diff --git a/skills/general-video/SKILL.md b/skills/general-video/SKILL.md
index e942598e81..6e38f3961b 100644
--- a/skills/general-video/SKILL.md
+++ b/skills/general-video/SKILL.md
@@ -1,21 +1,17 @@
 ---
 name: general-video
 description: >
-  Use as the fallback for custom HyperFrames HTML video composition authoring
-  when no specialized workflow fits. Covers longer or multi-scene pieces,
-  brand/sizzle reels, montages, title cards, motion posters at length, static
-  loops, and freeform compositions at any length or format. Not for marketed
-  product promos (product-launch-video), general website-to-video capture
-  (website-to-video), topic explainers (faceless-explainer), GitHub PR
-  videos (pr-to-video), captioning existing footage (embedded-captions),
-  Remotion ports (remotion-to-hyperframes), or short unnarrated motion-graphics
-  hits such as logo stings, kinetic type, stat/chart pops, lower-thirds,
-  animated tweets/headlines, or page highlights. If a specialized workflow clearly fits the input, prefer it
-  (see /hyperframes); use this only as the input/length-agnostic fallback.
+  The fallback workflow for authoring custom HyperFrames video compositions at
+  any length or format — longer or multi-scene pieces, brand / sizzle reels,
+  montages, title cards, static loops, and freeform compositions. Input- and
+  length-agnostic. If a specialized workflow clearly fits the input — a
+  marketed product, a website, a topic explainer, a GitHub PR, existing
+  footage, a short motion graphic, or a Remotion port — prefer it (see
+  /hyperframes); use this only as the general fallback when none fit.
 metadata: { "tags": "orchestrator, general-video, fallback, freeform, composition-authoring" }
 ---
 
-# general-video — general composition authoring
+# general-video — general video workflow
 
 > **Confirm the route before you build.** This is the **fallback** for custom composition authoring. If the input clearly fits a specialized workflow, prefer it: marketed product → `/product-launch-video`; general site → `/website-to-video`; topic explainer → `/faceless-explainer`; GitHub PR → `/pr-to-video`; existing footage → `/embedded-captions` · `/graphic-overlays`; short unnarrated motion graphic → `/motion-graphics`; Remotion port → `/remotion-to-hyperframes`. **Out of scope**: live / at-render-time data, NLE-style editing of a finished video, or producing footage HyperFrames can't capture. Unsure? **Read `/hyperframes` first.**
 
@@ -100,18 +96,40 @@ Never use `position: absolute; top: Npx` on a content container — it overflows
 
 This maps the skill's full surface (see the `description`) to its references — non-exhaustive; when an intent isn't listed, route through `hyperframes-creative` (look/concept), `hyperframes-animation` (motion), `hyperframes-core` (contract), `hyperframes-media` (audio/captions). **The first row is ADDITIVE — read it AND your intent row, not one or the other.**
 
-| Building…                                                             | Read first (in order)                                                                                                                                                       |
-| --------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **ALWAYS — every non-trivial piece, on top of your intent row below** | `hyperframes-creative/references/house-style.md` + `references/video-composition.md` (also gated in Step 1 / HARD-GATE; the "produced, not generated" foreground detailing) |
-| **Kinetic typography / text-forward**                                 | `hyperframes-animation/techniques.md` (kinetic type) + `adapters/gsap-easing-and-stagger.md` + `rules/kinetic-beat-slam.md`                                                 |
-| **Title card / lower-third / overlay / PiP / text-behind-subject**    | `hyperframes-creative/references/composition-patterns.md` + (for the centered/sized frame) `hyperframes-core` → "Root must be sized"                                        |
-| **Logo / brand-mark reveal**                                          | `hyperframes-animation/rules/svg-path-draw.md` (draw-on) + `rules/3d-text-depth-layers.md` + `rules/scale-swap-transition.md`                                               |
-| **Data / stats / numbers**                                            | `hyperframes-animation/rules/counting-dynamic-scale.md` + `rules/stat-bars-and-fills.md` + `hyperframes-creative/references/data-in-motion.md`                              |
-| **Product / app / UI demo**                                           | `hyperframes-animation/rules/3d-page-scroll.md` + `rules/cursor-click-ripple.md` + `rules/press-release-spring.md`                                                          |
-| **Audio-reactive / music-driven**                                     | `hyperframes-creative/references/audio-reactive.md` (pre-extract bands; map to motion)                                                                                      |
-| **Narrated / voiceover / captions / subtitles**                       | `hyperframes-media` (`tts`, `transcribe`, caption authoring) → place assets via `hyperframes-core`                                                                          |
-| **Multi-scene / transitions**                                         | `hyperframes-animation/transitions/overview.md` **then** `transitions/catalog.md` (you are not done after the overview — the GSAP recipe is in the catalog)                 |
-| **Modular / sub-compositions**                                        | `hyperframes-core/references/composition-patterns.md` + `references/sub-compositions.md`                                                                                    |
+| Building…                                                             | Read first (in order)                                                                                                                                                                                |
+| --------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **ALWAYS — every non-trivial piece, on top of your intent row below** | `hyperframes-creative/references/house-style.md` + `references/video-composition.md` (also gated in Step 1 / HARD-GATE; the "produced, not generated" foreground detailing)                          |
+| **Kinetic typography / text-forward**                                 | `hyperframes-animation/techniques.md` (kinetic type) + `adapters/gsap-easing-and-stagger.md` + `rules/kinetic-beat-slam.md`                                                                          |
+| **Title card / lower-third / overlay / PiP / text-behind-subject**    | `hyperframes-creative/references/composition-patterns.md` + (for the centered/sized frame) `hyperframes-core` → "Root must be sized"                                                                 |
+| **Logo / brand-mark reveal**                                          | `hyperframes-animation/rules/svg-path-draw.md` (draw-on) + `rules/3d-text-depth-layers.md` + `rules/scale-swap-transition.md`                                                                        |
+| **Data / stats / numbers**                                            | `hyperframes-animation/rules/counting-dynamic-scale.md` + `rules/stat-bars-and-fills.md` + `hyperframes-creative/references/data-in-motion.md`                                                       |
+| **Product / app / UI demo**                                           | `hyperframes-animation/rules/3d-page-scroll.md` + `rules/cursor-click-ripple.md` + `rules/press-release-spring.md`                                                                                   |
+| **Audio-reactive / music-driven**                                     | `hyperframes-creative/references/audio-reactive.md` (pre-extract bands; map to motion)                                                                                                               |
+| **Narrated / voiceover / music / SFX / captions**                     | `hyperframes-media` → the shared audio engine `scripts/audio.mjs` (one call = TTS + BGM + SFX → `audio_meta.json`); caption authoring + asset placement via `hyperframes-core`. See **Audio** below. |
+| **Multi-scene / transitions**                                         | `hyperframes-animation/transitions/overview.md` **then** `transitions/catalog.md` (you are not done after the overview — the GSAP recipe is in the catalog)                                          |
+| **Modular / sub-compositions**                                        | `hyperframes-core/references/composition-patterns.md` + `references/sub-compositions.md`                                                                                                             |
+
+### Audio: one engine (TTS · BGM · SFX)
+
+Only when the piece calls for it (per "build exactly what was asked" — no ambient music on a title card). Don't hand-roll TTS or vendor a copy: write a neutral `audio_request.json` and call the shared engine in `hyperframes-media`. It auto-degrades on one switch — HeyGen credential present → HeyGen TTS + music/SFX **retrieval**; absent → ElevenLabs/Kokoro TTS, Lyria/MusicGen BGM **generation**, and the bundled SFX library. Full flag list + request/meta schema: the header comment of `hyperframes-media/scripts/audio.mjs`.
+
+```jsonc
+// audio_request.json — one line per narrated segment; `id` is yours (joins audio_meta back)
+{
+  "lines": [
+    { "id": "s1", "text": "Your opening line.", "sfx": ["whoosh"] },
+    { "id": "s2", "text": "The next beat." },
+  ],
+  "bgm": { "query": "calm cinematic underscore" }, // omit "mode" → auto (retrieve if HeyGen, else generate); "none" to disable
+}
+```
+
+```bash
+# <MEDIA_DIR> = the installed hyperframes-media skill dir (sibling of this skill)
+node <MEDIA_DIR>/scripts/audio.mjs --request ./audio_request.json --hyperframes . --out ./audio_meta.json
+```
+
+Then read `audio_meta.json`: mount each `voices[].path` + (`bgm.path`, `sfx[]`) as `<audio>` tracks and use `voices[].words` for captions, all per `hyperframes-core` (audio tracks + caption authoring). If BGM took the generate path (`bgm_pending: true`), run `hyperframes-media/scripts/wait-bgm.mjs` before final render.
 
 ## Output checklist → `hyperframes-cli`
 
@@ -121,12 +139,3 @@ This maps the skill's full surface (see the `description`) to its references —
 - [ ] contrast warnings addressed; for multi-scene work, review the animation map (`hyperframes-animation/scripts/animation-map.mjs`)
 - [ ] deliver the preview; render to MP4 only on explicit request
 - [ ] surface the preview **only at handoff** (it is the stable, final preview); don't pop one mid-build — build-phase snapshots are headless
-
-## Not this workflow
-
-- A specific **product / company / SaaS / website** being marketed, launched, or promoted → `/product-launch-video`
-- A **concept / topic / article / how-X-works** being explained, no product → `/faceless-explainer`
-- A **GitHub PR / code change** → `/pr-to-video`
-- An **existing talking-head video** to add captions to → `/embedded-captions`
-- Porting an existing **Remotion** composition → `/remotion-to-hyperframes`
-- Cutting / editing a **finished video file** like an NLE → out of scope (HyperFrames composites HTML and media into a deterministic timeline; it does not edit footage)
diff --git a/skills/hyperframes-cli/SKILL.md b/skills/hyperframes-cli/SKILL.md
index e77c833efe..f84776d0da 100644
--- a/skills/hyperframes-cli/SKILL.md
+++ b/skills/hyperframes-cli/SKILL.md
@@ -14,7 +14,7 @@ Everything runs through `npx hyperframes` unless project instructions specify a
 3. **Lint** — `npx hyperframes lint`
 4. **Validate** — `npx hyperframes validate` (runtime errors + contrast)
 5. **Visual inspect** — `npx hyperframes inspect`
-6. **Preview** — `npx hyperframes preview`
+6. **Preview** — `npx hyperframes preview` opens **Studio**, the timeline editor where the user can manually edit anything (not just watch). Review there, then ask before rendering.
 7. **Render** — pick the variant:
    - Iterate: `npx hyperframes render --quality draft`
    - Deliver: `npx hyperframes render --quality high --output out.mp4`
@@ -34,6 +34,7 @@ Cross-cutting rules that hold for every command:
 - **Non-TTY mode is auto-detected.** When `stdout` is not a TTY (CI, agents, piped output) the CLI auto-switches to non-interactive; `init` then **requires `--example`**. Pass `--non-interactive` to force this mode even on a TTY.
 - **CI gating on render**: `--strict` fails on lint errors, `--strict-all` fails on warnings too, `--strict-variables` fails on undeclared `--variables` keys.
 - **Paths in `--json` are redacted** — `$HOME` becomes the literal `$HOME` so output is safe to paste into bug reports and agent contexts.
+- **Render is user-gated.** Never auto-render once the checks pass. Pause at `preview`, tell the user the video is editable in Studio, and render only after they approve.
 - **Post-render verification.** After `render` returns exit 0, confirm the output file exists and has plausible size before reporting success: `[ -s "$OUTPUT" ] || echo "render produced no output"`. The CLI prints `◇  <path>` on success; for long renders also sanity-check duration with `ffprobe -i "$OUTPUT" -show_format -v error`.
 
 ## Routing
diff --git a/skills/hyperframes-cli/references/preview-render.md b/skills/hyperframes-cli/references/preview-render.md
index 02dce4e07a..16447fce78 100644
--- a/skills/hyperframes-cli/references/preview-render.md
+++ b/skills/hyperframes-cli/references/preview-render.md
@@ -9,7 +9,7 @@ npx hyperframes preview                   # serve current directory
 npx hyperframes preview --port 4567       # custom port (default 3002)
 ```
 
-Hot-reloads on file changes. Opens the studio in your browser automatically.
+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:
 
@@ -53,6 +53,8 @@ Validation runs before any server boots, so an invalid value exits cleanly witho
 
 ## 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
diff --git a/skills/hyperframes-core/SKILL.md b/skills/hyperframes-core/SKILL.md
index ffdcf79b5a..47e7ad019d 100644
--- a/skills/hyperframes-core/SKILL.md
+++ b/skills/hyperframes-core/SKILL.md
@@ -1,129 +1,78 @@
 ---
 name: hyperframes-core
-description: HyperFrames HTML composition contract. Use for composition structure, data attributes, clips, tracks, sub-compositions, variables, media playback, deterministic render rules, and validation of minimal renderable projects.
+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. 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**. Other concerns live in sibling skills:
-
-- `hyperframes-animation` — atomic motion rules + scene blueprints + per-runtime adapters (GSAP, Lottie, Three, Anime.js, CSS, WAAPI, TypeGPU)
-- `hyperframes-creative` — palettes, typography, narration, beat planning, audio-reactive
-- `hyperframes-media` — TTS, Whisper transcribe, background removal, captions
-- `hyperframes-registry` — install blocks and components (`hyperframes add`)
-- `hyperframes-cli` — dev loop commands (lint / validate / preview / render)
-
-For **Tailwind v4 projects** (`hyperframes init --tailwind`), see `references/tailwind.md` — the browser-runtime contract is distinct from Studio's Tailwind v3 setup.
-
-## Routing
-
-| Want to…                                                                                   | Read                                 |
-| ------------------------------------------------------------------------------------------ | ------------------------------------ |
-| See a minimal renderable composition                                                       | `references/minimal-composition.md`  |
-| Decide between monolithic single-file and modular sub-comp architecture                    | `references/composition-patterns.md` |
-| Structure a modular `index.html` (orchestrator + slots + root audio)                       | `references/composition-patterns.md` |
-| Pick a sub-comp archetype (content / driver-only / multi-scene merge / audio-reactive)     | `references/composition-patterns.md` |
-| Look up a `data-*` attribute (root, clip, sub-comp host, legacy aliases)                   | `references/data-attributes.md`      |
-| Use `class="clip"` correctly                                                               | `references/data-attributes.md`      |
-| Pick a `data-track-index`; same-track overlap; track-index vs CSS `z-index`                | `references/tracks-and-clips.md`     |
-| Time a clip relative to another (`data-start="intro + 2"`, crossfade overlap, chains)      | `references/tracks-and-clips.md`     |
-| Wire a sub-composition (host attributes, `<template>` wrapper, per-instance variables)     | `references/sub-compositions.md`     |
-| Animate inside a sub-composition (`gsap.fromTo` over `gsap.from`, seek-back behavior)      | `references/sub-compositions.md`     |
-| Declare variables (types, extra options, defaults, `--strict-variables` in CI)             | `references/variables-and-media.md`  |
-| Place `<video>` / `<audio>`, set volume, trim with `data-media-start`                      | `references/variables-and-media.md`  |
-| Build a seekable timeline (paused, sync construction, `gsap.set` later-scene trap)         | `references/determinism-rules.md`    |
-| Avoid non-deterministic state (clocks, `Math.random`, `repeat: -1`, finite repeat formula) | `references/determinism-rules.md`    |
-| Know what can / cannot be animated (visual-property allowlist; not `display`/`visibility`) | `references/determinism-rules.md`    |
-| Fit text and prevent overflow (`fitTextFontSize` signature, `<br>` rule, layout contract)  | `references/determinism-rules.md`    |
-| Author full-frame motion with shared backgrounds                                           | `references/full-screen-motion.md`   |
-| Work in a Tailwind v4 project (`init --tailwind`)                                          | `references/tailwind.md`             |
+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`, `hyperframes-media`, `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/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`.
 
-## Composition Structure
+## Building a composition
 
-Two root forms; they are **not** interchangeable.
+### Two root forms (not interchangeable)
 
-- **Standalone** (the top-level `index.html`) — root `<div data-composition-id="…">` sits directly in `<body>`. **No `<template>` wrapper.** Wrapping a standalone root in `<template>` hides all content from the browser and breaks rendering.
-- **Sub-composition** (a file loaded via `data-composition-src`) — root `<div data-composition-id="…">` **must** be wrapped in `<template>`. Without the wrapper the runtime cannot extract and mount it.
+- **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>`.
 
-> ⚠ Sub-composition transport rule: the runtime **only clones `<template>` contents** into the live DOM. Everything outside the template — including `<head>` and any `<style>`/`<script>`/`<link>` that lives in `<head>` — is discarded. Put `<style>` and `<script>` blocks **inside** `<template>`, not in `<head>`.
->
-> ⚠ Host-id rule: in the host file, `data-composition-id` on the slot must **exactly equal** the inner template's `data-composition-id` **and** the `window.__timelines["<id>"]` key. Do not add `-mount` / `-slot` / `-host` suffixes.
+> ⚠ 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.
 
-See `references/sub-compositions.md` for the file shape, host wiring, pitfall examples, and the pre-render verification checklist.
+File shape, host wiring, and the pre-render checklist → `references/sub-compositions.md`.
 
 ### Root must be sized (silent layout bug)
 
-The standalone root must establish an explicitly **sized box**, and every ancestor between it and a `height: 100%` element must have a resolved height. If the root or an intermediate wrapper has no height, a flex/`height:100%` content container collapses to ~0 and content piles into the **top-left corner** (often clipping the first glyph at x=0). `lint`, `validate`, and `inspect` do **not** catch this — `inspect` substitutes the authored `data-width`/`data-height` for a collapsed root and reports "0 layout issues."
-
-```html
-<body style="margin: 0">
-  <div
-    id="root"
-    data-composition-id="main"
-    data-width="1920"
-    data-height="1080"
-    data-duration="5"
-    style="position: relative; width: 1920px; height: 1080px; overflow: hidden"
-  >
-    <!-- Center robustly: position:absolute + inset:0 fills the sized root regardless of
-         intermediate wrappers; or use a flex container ONLY if its parent chain is sized. -->
-    <section
-      class="clip"
-      data-start="0"
-      data-duration="5"
-      data-track-index="1"
-      style="position: absolute; inset: 0; display: grid; place-items: center; padding: 120px 160px; box-sizing: border-box"
-    >
-      <h1>Title</h1>
-    </section>
-  </div>
-</body>
-```
-
-Keep the `padding` (≥80px) on the centering container — it is the title-safe margin that stops large type touching the frame edge. See `references/minimal-composition.md`.
-
-## Timeline Contract (GSAP default)
-
-Every composition registers exactly one GSAP timeline.
-
-- Create with `gsap.timeline({ paused: true })` — the player owns playback.
-- Register at `window.__timelines["<composition-id>"]`; the key **must exactly match** the root's `data-composition-id`. Dot syntax (`window.__timelines.<id> = tl`) is equivalent when the id is a valid identifier; use brackets if the id contains `-`.
-- Build the timeline **synchronously** during page load — not inside `async`, `setTimeout`, `Promise`, or event handlers. The renderer samples after page load completes; any deferred timeline construction misses the sample.
-- Render duration comes from `data-duration` on the root, **not** from GSAP timeline length. Do not pad the timeline with empty tweens to set duration.
-- For sub-compositions, do **not** manually nest sub-timelines into the host (`master.add(sub)`); the framework drives them independently.
-
-For non-GSAP runtimes (Lottie / Three / WAAPI / CSS / Anime.js / TypeGPU), the equivalent contract lives in `hyperframes-animation/adapters/<runtime>.md`. See `references/determinism-rules.md` for the cross-runtime Animation Runtime Contract.
-
-## Non-Negotiable Rules
-
-These break the renderer — or produce **silent visual bugs that `lint`/`validate`/`inspect` do NOT catch** (rules 3, 7-8). (Synchronous timeline construction is covered above in **Timeline Contract**.)
-
-1. No `Math.random()` / `Date.now()` / `performance.now()` driving visuals — use a seeded PRNG.
-2. No `repeat: -1`. Use `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).
-3. `<video>`/`<audio>` must be a **direct child of the host root** (`index.html`) — never inside a sub-comp `<template>`, never inside a wrapper `<div>`; otherwise it is never decoded and renders blank/black (silent). The framework owns playback: no `video.play()` / `audio.play()` / `currentTime = …`. A sub-comp **cannot** drive host elements (selector or `querySelector`), so animate host media from the **main timeline** at global time. See `references/variables-and-media.md`.
-4. No `gsap.set()` on clip elements from later scenes (they are not in the DOM yet). Use `tl.set(selector, vars, time)` at or after the clip's `data-start`.
-5. No animating `display` / `visibility`. Animate `opacity` / transforms; the clip lifecycle handles show/hide.
-6. No `<br>` in body text. Let text wrap via `max-width`.
-7. 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).
-8. Absolutely-positioned decoratives (badges, pills, tags) 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.
-
-## Editing Existing Compositions
-
-- Read the actual files before editing.
-- Preserve unrelated timing, tracks, IDs, variables, and media paths.
-- Match existing composition IDs and timeline registry keys.
-- When adding a clip, choose a non-overlapping `data-track-index` or intentionally adjust surrounding timing.
-- When adding a sub-composition, verify its internal `data-composition-id` before wiring the host.
+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. `lint`/`validate`/`inspect` do **not** catch this. 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 `lint`/`validate`/`inspect` won't catch)
+
+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 `display`/`visibility`; no `gsap.set` on later-scene clips. → `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.
+- Adding a sub-composition: verify its internal `data-composition-id` before wiring the host.
 
 ## Validation
 
-Use `hyperframes-cli` for command details.
+Use `hyperframes-cli` for command details
 
 - [ ] `npx hyperframes lint` passes (0 errors)
 - [ ] `npx hyperframes validate` passes (0 console errors)
-- [ ] `npx hyperframes inspect` passes, or overflow is intentionally marked
+- [ ] `npx hyperframes inspect` passes (0 errors)
 - [ ] 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/skills/hyperframes-core/references/determinism-rules.md b/skills/hyperframes-core/references/determinism-rules.md
index f6af4fd6b6..1cee99b081 100644
--- a/skills/hyperframes-core/references/determinism-rules.md
+++ b/skills/hyperframes-core/references/determinism-rules.md
@@ -27,7 +27,7 @@ Rendered frames must be reproducible from the requested time. Do **not** use any
 - 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 repeat count from the visible duration: `repeat: Math.ceil(duration / cycleDuration) - 1`.
+- 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:
 
@@ -46,6 +46,8 @@ Build the visible end-state in static HTML and CSS first, then animate from/to t
 - 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 — lint/inspect 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
 
diff --git a/skills/hyperframes-core/references/script-format.md b/skills/hyperframes-core/references/script-format.md
new file mode 100644
index 0000000000..18e003c77b
--- /dev/null
+++ b/skills/hyperframes-core/references/script-format.md
@@ -0,0 +1,49 @@
+# `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 `hyperframes-media` → `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 `npx hyperframes tts` (pin `--voice` / `--provider` from the header; capture word timestamps for captions). Real per-word timing replaces the `**Time:**` guides. CLI contract → `hyperframes-media/references/tts.md`.
diff --git a/skills/hyperframes-core/references/storyboard-format.md b/skills/hyperframes-core/references/storyboard-format.md
new file mode 100644
index 0000000000..e9d962ba31
--- /dev/null
+++ b/skills/hyperframes-core/references/storyboard-format.md
@@ -0,0 +1,95 @@
+# 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, behind `VITE_STUDIO_ENABLE_STORYBOARD=1`). 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`                         |
+
+## 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.
+
+## 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.
+- Multi-line `voiceover` values collapse to one line on save.
diff --git a/skills/hyperframes-creative/SKILL.md b/skills/hyperframes-creative/SKILL.md
index 0e72774a90..e249645944 100644
--- a/skills/hyperframes-creative/SKILL.md
+++ b/skills/hyperframes-creative/SKILL.md
@@ -18,8 +18,9 @@ For motion patterns, scene blueprints, transitions, and CSS marker effects, use
 
 ## Workflow
 
-1. If a project has a design spec, read it first — precedence `frame.md` → `design.md` → `DESIGN.md`. `frame.md` is the preferred spec for video/hyperframes projects and wins if more than one exists (same format as `design.md`); it is always lowercase, no `FRAME.md` variant, while `design.md` and `DESIGN.md` are different files on Linux. Treat it as brand truth: colors, fonts, spacing, tone, and constraints.
+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`
@@ -28,21 +29,22 @@ For motion patterns, scene blueprints, transitions, and CSS marker effects, use
 
 ## Routing
 
-| Topic                                                                    | Read                                 |
-| ------------------------------------------------------------------------ | ------------------------------------ |
-| 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`           |
-| Script pacing, tone, openings, number pronunciation                      | `references/narration.md`            |
-| Precomputed audio bands mapped to motion                                 | `references/audio-reactive.md`       |
+| 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`                     |
+| Script pacing, tone, openings, number pronunciation                      | `references/narration.md`                      |
+| Precomputed audio bands mapped to motion                                 | `references/audio-reactive.md`                 |
 
 ## Scripts
 
diff --git a/skills/hyperframes-creative/frame-presets/biennale-yellow/FRAME.md b/skills/hyperframes-creative/frame-presets/biennale-yellow/FRAME.md
new file mode 100644
index 0000000000..c082ea2fef
--- /dev/null
+++ b/skills/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/skills/hyperframes-creative/frame-presets/biennale-yellow/caption-skin.html b/skills/hyperframes-creative/frame-presets/biennale-yellow/caption-skin.html
new file mode 100644
index 0000000000..8ca6684563
--- /dev/null
+++ b/skills/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/skills/hyperframes-creative/frame-presets/biennale-yellow/frame-showcase.html b/skills/hyperframes-creative/frame-presets/biennale-yellow/frame-showcase.html
new file mode 100644
index 0000000000..186f8252ad
--- /dev/null
+++ b/skills/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/skills/hyperframes-creative/frame-presets/blockframe/FRAME.md b/skills/hyperframes-creative/frame-presets/blockframe/FRAME.md
new file mode 100644
index 0000000000..00e4d88318
--- /dev/null
+++ b/skills/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/skills/hyperframes-creative/frame-presets/blockframe/caption-skin.html b/skills/hyperframes-creative/frame-presets/blockframe/caption-skin.html
new file mode 100644
index 0000000000..f0cdb26fd0
--- /dev/null
+++ b/skills/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/skills/hyperframes-creative/frame-presets/blockframe/frame-showcase.html b/skills/hyperframes-creative/frame-presets/blockframe/frame-showcase.html
new file mode 100644
index 0000000000..3f5a165072
--- /dev/null
+++ b/skills/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/skills/hyperframes-creative/frame-presets/blue-professional/FRAME.md b/skills/hyperframes-creative/frame-presets/blue-professional/FRAME.md
new file mode 100644
index 0000000000..e821dee2dc
--- /dev/null
+++ b/skills/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/skills/hyperframes-creative/frame-presets/blue-professional/caption-skin.html b/skills/hyperframes-creative/frame-presets/blue-professional/caption-skin.html
new file mode 100644
index 0000000000..5a599c2703
--- /dev/null
+++ b/skills/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/skills/hyperframes-creative/frame-presets/blue-professional/frame-showcase.html b/skills/hyperframes-creative/frame-presets/blue-professional/frame-showcase.html
new file mode 100644
index 0000000000..ff00e7be73
--- /dev/null
+++ b/skills/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/skills/hyperframes-creative/frame-presets/bold-poster/FRAME.md b/skills/hyperframes-creative/frame-presets/bold-poster/FRAME.md
new file mode 100644
index 0000000000..c9f31256cd
--- /dev/null
+++ b/skills/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/skills/hyperframes-creative/frame-presets/bold-poster/caption-skin.html b/skills/hyperframes-creative/frame-presets/bold-poster/caption-skin.html
new file mode 100644
index 0000000000..ee1d4bfb68
--- /dev/null
+++ b/skills/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/skills/hyperframes-creative/frame-presets/bold-poster/frame-showcase.html b/skills/hyperframes-creative/frame-presets/bold-poster/frame-showcase.html
new file mode 100644
index 0000000000..a8f91897fa
--- /dev/null
+++ b/skills/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/skills/hyperframes-creative/frame-presets/broadside/FRAME.md b/skills/hyperframes-creative/frame-presets/broadside/FRAME.md
new file mode 100644
index 0000000000..4dff52def2
--- /dev/null
+++ b/skills/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/skills/hyperframes-creative/frame-presets/broadside/caption-skin.html b/skills/hyperframes-creative/frame-presets/broadside/caption-skin.html
new file mode 100644
index 0000000000..00f4b6f8db
--- /dev/null
+++ b/skills/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/skills/hyperframes-creative/frame-presets/broadside/frame-showcase.html b/skills/hyperframes-creative/frame-presets/broadside/frame-showcase.html
new file mode 100644
index 0000000000..0d2a6cd152
--- /dev/null
+++ b/skills/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/skills/hyperframes-creative/frame-presets/capsule/FRAME.md b/skills/hyperframes-creative/frame-presets/capsule/FRAME.md
new file mode 100644
index 0000000000..a37f828c84
--- /dev/null
+++ b/skills/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/skills/hyperframes-creative/frame-presets/capsule/caption-skin.html b/skills/hyperframes-creative/frame-presets/capsule/caption-skin.html
new file mode 100644
index 0000000000..0742a05321
--- /dev/null
+++ b/skills/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/skills/hyperframes-creative/frame-presets/capsule/frame-showcase.html b/skills/hyperframes-creative/frame-presets/capsule/frame-showcase.html
new file mode 100644
index 0000000000..65b4e196db
--- /dev/null
+++ b/skills/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/skills/hyperframes-creative/frame-presets/cartesian/FRAME.md b/skills/hyperframes-creative/frame-presets/cartesian/FRAME.md
new file mode 100644
index 0000000000..a00c21d925
--- /dev/null
+++ b/skills/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/skills/hyperframes-creative/frame-presets/cartesian/caption-skin.html b/skills/hyperframes-creative/frame-presets/cartesian/caption-skin.html
new file mode 100644
index 0000000000..135fa97192
--- /dev/null
+++ b/skills/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/skills/hyperframes-creative/frame-presets/cartesian/frame-showcase.html b/skills/hyperframes-creative/frame-presets/cartesian/frame-showcase.html
new file mode 100644
index 0000000000..7918b04e9d
--- /dev/null
+++ b/skills/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/skills/hyperframes-creative/frame-presets/claude/FRAME.md b/skills/hyperframes-creative/frame-presets/claude/FRAME.md
new file mode 100644
index 0000000000..e6ca03f419
--- /dev/null
+++ b/skills/hyperframes-creative/frame-presets/claude/FRAME.md
@@ -0,0 +1,277 @@
+---
+version: alpha
+name: Claude — Frame (video / frame layer)
+description: >
+  Video-first companion to Claude's design.md. The unit is the frame (1920×1080). Atoms are
+  identical and sacred — warm cream paper (never pure white, never cool), a single terracotta coral
+  as scarce "voltage", hairline ink elevation (no heavy shadow), EB Garamond for all
+  display + Inter body + JetBrains Mono for the index/code voice on a warm-navy code surface,
+  sentence-case display, and the ✱ coral spike mark. Composition + frame scale rewritten. Motion out
+  of scope.
+unit: the frame — 1920×1080 primary; 9:16 and 1:1 documented
+principle: atoms are sacred · composition is free · numbers come from the script
+
+colors:
+  ink: "#141413"
+  cream: "#FAF9F5"
+  tile: "#EFE9DE"
+  tile-strong: "#ECE3D4"
+  coral: "#CC785C"
+  navy: "#181715"
+  navy-soft: "#1F1E1B"
+  navy-elev: "#252320"
+
+borders: { hairline: "1px solid ink@12%", hairline-strong: "1px solid ink@20%", dark: "1px solid cream@14% (on navy)" }
+shadows: { card: "0 1px 3px ink@8%, 0 4px 16px ink@4%", none: "none" }
+
+typography:
+  # — reading + chrome ramp —
+  body:    { fontFamily: "Inter", cqw: 1.5, weight: 400, lineHeight: 1.5 }
+  lead:    { fontFamily: "Inter", cqw: 2.08, weight: 400, lineHeight: 1.5 }
+  card-title:{ fontFamily: "Inter", cqw: 2.3, weight: 500, lineHeight: 1.25, tracking: "-0.005em" }
+  button:  { fontFamily: "Inter", cqw: 1.46, weight: 500, lineHeight: 1.0 }
+  tag-upper:{ fontFamily: "Inter", cqw: 1.35, weight: 500, tracking: "0.18em", upper: true }
+  kicker:  { fontFamily: "JetBrains Mono", px: 28, cqw: 1.46, weight: 500, tracking: "0.16em", upper: true }
+  mono-label:{ fontFamily: "JetBrains Mono", px: 26, cqw: 1.35, weight: 500, tracking: "0.02em" }
+  code:    { fontFamily: "JetBrains Mono", cqw: 1.67, weight: 400, lineHeight: 1.6 }
+  # — display ramp (EB Garamond 400, sentence case, negative tracking. Renderer embeds only 400/700 — author at 400; italic is the synthesized slant) —
+  headline:{ fontFamily: "EB Garamond", cqw: 4.6, weight: 400, lineHeight: 1.06, tracking: "-0.018em" }
+  quote-pull:{ fontFamily: "EB Garamond", cqw: 5.0, weight: 400, lineHeight: 1.12, tracking: "-0.012em", italic: true }
+  display-italic:{ fontFamily: "EB Garamond", cqw: 6.7, weight: 400, lineHeight: 1.05, tracking: "-0.012em", italic: true }
+  display:{ fontFamily: "EB Garamond", cqw: 7.3, weight: 400, lineHeight: 1.02, tracking: "-0.022em" }
+  number-hero:{ fontFamily: "EB Garamond", cqw: 9.4, weight: 400, lineHeight: 0.95, tracking: "-0.025em" }
+  display-cover:{ fontFamily: "EB Garamond", cqw: 9.9, weight: 400, lineHeight: 0.98, tracking: "-0.028em" }
+  number-unit:{ fontFamily: "JetBrains Mono", cqw: 2.08, weight: 500, lineHeight: 1.0 }
+
+spacing:
+  slide-pad: "4.2cqw"   # ~80px @1920
+  gap-md: "1.7cqw"
+  hairline: "1px"
+  radius-sm: "6px"
+  radius-md: "8px"
+  radius-lg: "12px"
+  radius-pill: "9999px"
+
+components:
+  card-hairline:
+    backgroundColor: "{colors.cream} or {colors.tile}"
+    border: "1px solid {colors.ink}@12%"
+    rounded: "{spacing.radius-lg}"
+    shadow: "{shadows.card}"
+    typography: "{typography.card-title} + {typography.body}"
+    description: "The editorial content card. Elevation is the hairline + ONE soft warm shadow — never a heavy drop, glow, or gradient."
+  kicker-spike:
+    typography: "{typography.kicker}"
+    mark: "✱ coral spike prefix"
+    description: "The eyebrow — JetBrains Mono uppercase, indexical (2–5 words), prefixed with the coral ✱. Never plain text, never a sentence."
+  coral-callout:
+    backgroundColor: "{colors.coral} (full-bleed) or {colors.cream} with a coral edge"
+    textColor: "{colors.cream} on coral"
+    rounded: "{spacing.radius-md}"
+    typography: "{typography.button} / {typography.h2}"
+    description: "The ONE voltage moment per frame — the CTA, the single inline link, OR the full-bleed band. Never two corals in one frame."
+  number-lockup:
+    typography: "{typography.number-hero} figure + {typography.number-unit} unit"
+    description: "Hero stat — a EB Garamond figure paired with a JetBrains Mono unit (200K, +1,204, −318, 17 files). Figure is serif; the unit is ALWAYS mono, never the serif."
+  pull-quote:
+    typography: "{typography.quote-pull} (EB Garamond italic) + {typography.tag-upper} cite"
+    description: "A commit message, a reviewer line, or the thesis. EB Garamond italic, small Inter uppercase cite beneath."
+  section-rule:
+    rule: "1px solid {colors.ink}@12% (or {colors.cream}@14% on navy)"
+    description: "The only separator. A coral 1px rule may draw on to introduce a section. Never 2px+, never a heavy divider."
+  code-surface:
+    backgroundColor: "{colors.navy} body / {colors.navy-elev} title bar + status strip"
+    textColor: "{colors.cream} (JetBrains Mono); syntax in coral (keywords) / teal #5DB8A6 (strings) / amber #E8A55A (numbers)"
+    border: "1px solid {colors.cream}@14%"
+    rounded: "{spacing.radius-md}"
+    description: "The warm-navy code / terminal surface. The CODE ITSELF is rendered by the code-* registry blocks (code-diff / code-typing / code-snippet-*); this preset owns the surrounding surface, title bar, status strip, and mono chrome — not the code rendering."
+  spike-mark:
+    glyph: "✱ (U+2731), always {colors.coral}"
+    description: "The brand mark. Fades + scales 0.92→1 on a single emphasis beat; never spins."
+---
+
+# Claude — Frame (video / frame layer)
+
+## Overview
+
+Claude at frame scale is a **warm-editorial brand book come to life** — the register of a literary
+imprint or a research note. The thesis is three colors: **cream is the ground, ink is the voice,
+coral is the voltage** — and a fourth (warm navy) only where code shows itself. Every surface is
+**warm cream** (never pure white, never cool gray); content gathers on a **tile** surface half a
+step darker — the demarcation is a half-step, never a hard contrast. Elevation is a **1px hairline**
+ink border at low alpha plus, rarely, one soft warm shadow. There are no heavy drops, no glows, no
+gradients on content.
+
+Three editorial voices, each in its own face: **EB Garamond** carries every display moment — covers,
+headlines, pull-quotes, big stat numerals — at large display sizes with gentle negative tracking;
+its **italic** is the expressive register. **Inter** carries body, leads, card titles, buttons, and
+UI chrome. **JetBrains Mono** carries the indexical layer — kickers, technical labels, the code
+window, status strips. Switching a voice's face collapses the register: a sans headline or a serif
+label reads as a different brand.
+
+**Key characteristics at frame scale:**
+
+- **Cream / ink / coral trinity** + a warm-navy code surface; cream is the default ground, ink the voice, coral the scarce voltage.
+- **EB Garamond** (sentence case, negative-tracked) for all display; **Inter** body/chrome; **JetBrains Mono** index + code.
+- **Hairline elevation** — a 1px low-alpha ink border + at most one soft warm shadow. No heavy drop, glow, or gradient.
+- **Coral is rationed** — at most ONE coral moment per frame (CTA, inline link, OR full-bleed band); coral never sets a headline or a body run.
+- **Density is free** — fill the frame as the content wants; a frame may stand on a single focal or carry a dense, layered composition.
+- **The ✱ coral spike** opens kickers; warm navy is reserved for the code/terminal surface.
+
+## The Frame
+
+### Frame Craft Bar
+
+Eyeball tests gate every frame before any structural check:
+
+- **Squint** — one EB Garamond display moment dominates at 3–6× its neighbor.
+- **Trinity** — cream/tile ground, ink text, coral exactly **once**; warm navy only on the code surface; no cool gray / pure white / fourth hue.
+- **Type** — EB Garamond sentence-case display (negative-tracked); Inter 400 body; JetBrains Mono kickers (uppercase 0.16em, coral ✱) + code.
+
+- **Primary:** 1920×1080 (16:9). Display authored in **`cqw`** (`px ÷ 1920 × 100 = cqw`).
+- **Vertical:** 1080×1920 (9:16). **Square:** 1080×1080 (1:1).
+- **Safe area:** `slide-pad` ~4.2cqw; the kicker/mono chrome sit inside it.
+
+**The container law (load-bearing).** Every frame ground sets `container-type: size`; ALL
+frame-relative units are `cqw`/`cqh` against it — never `vw`. Hairlines stay 1px; card radii stay
+6/8/12px; the warm-paper reading must survive every ratio.
+
+## Colors
+
+Tokens identical to the source. Default ground `{colors.cream}`; content gathers on
+`{colors.tile}` / `{colors.tile-strong}` (half-step warm steps, never a hard contrast).
+**Headlines & body:** `{colors.ink}` on cream/tile; `{colors.cream}` on navy. **Coral**
+(`{colors.coral}`) is the scarce voltage — one moment per frame (CTA, inline link, or full-bleed
+band), never body text, never a card fill. **Warm navy** (`{colors.navy}` / `navy-soft` /
+`navy-elev`) is the code / terminal / dark-card surface — a structural anchor, not a fourth brand
+hue. **No cool grays, no pure white, no pure black.**
+
+**Fixed syntax colors (decoration, NOT remixable brand hues).** When a code line is hand-set rather
+than rendered by a `code-*` block, keywords are coral, strings are **teal `#5DB8A6`**, numbers are
+**amber `#E8A55A`**; status reads success `#5DB872` / warn `#C64545`. These track the code surface,
+not the brand trinity — keep them out of the brand palette.
+
+## Typography
+
+Two ramps. The **reading/chrome ramp** (Inter `body` 1.5cqw / `lead` 2.08cqw weight 400; JetBrains
+Mono `kicker`/`mono-label` in px) carries copy + chrome; the **display ramp** (EB Garamond `headline` 4.6cqw
+→ `display-cover` 9.9cqw, weight 400, negative-tracked) carries every headline + stat.
+
+- **Legibility floor:** any load-bearing line ≥ **1.4cqw**; mono px labels are chrome only.
+- **Fit-to-measure:** size the headline to its length. Cap the block at **≤ 78cqw**; ≤3 words → `display-cover`; 4–6 → `display`; 7+ → `headline`. Reserve the 7.3–9.9cqw tier for cover / statement / stat.
+- **EB Garamond display is sentence case** (NOT title case, NOT uppercase), weight 400, negative-tracked (−0.012..−0.028em); reach for **italic** when the line is a stance or a definition. **Inter body** sentence case weight 400. **JetBrains Mono** kickers UPPERCASE 0.16em with the coral ✱. No uppercase serif, no sans headline, no serif label.
+
+## Depth & Surface
+
+Hairline elevation:
+
+- **1px hairline** ink border at ~12% alpha is the primary lift (cream@14% on navy).
+- **One soft warm shadow** (`0 1px 3px ink@8%, 0 4px 16px ink@4%`) — used rarely, never heavy.
+- **Half-step surface** — a `{colors.tile}` block on cream reads elevated by the warm step, not by a cast shadow.
+
+**Ceiling:** no heavy drop shadow, no glow, no gradient on content, no tilt. The system has no light
+to emit; it reads by warmth and hairline.
+
+## Shapes
+
+- **6px** small chrome, **8px** cards / code surface, **12px** large cards / quote frames, **9999px** true pills only. No square corners, no heavy rounding; the editorial register is gently rounded, never hard.
+
+## Components
+
+- **card-hairline** — the editorial content card (hairline + one soft shadow). **section-rule** — the only separator (1px, coral may draw on).
+- **kicker-spike** — the ✱ coral eyebrow. **coral-callout** — the one voltage moment (CTA / inline link / full-bleed band).
+- **number-lockup** — EB Garamond figure + mono unit (the PR `+N / −M`, `200K`, file counts). **pull-quote** — EB Garamond italic + cite (a commit message / reviewer line).
+- **code-surface** — the warm-navy code / terminal surface; the code itself comes from the **`code-*` registry blocks**, this owns the surface + mono chrome.
+- **spike-mark** — the ✱ brand glyph, always coral.
+
+## Frame Treatments
+
+> Recipe: ground · container · composes · focal · chrome · accent · Fixed/Free · density.
+> One coral moment per frame; open with a kicker-spike.
+
+### 1 · Cover (identity · move: oversized EB Garamond · cream)
+
+**Ground** `{colors.cream}`, `slide-pad`. **Composes** kicker-spike, display-cover, lead, mono-label index. **Focal** a 2–3 line EB Garamond `display-cover` (sentence case, ink) under a coral ✱ kicker. **Chrome** mono index strip (repo · branch). **Accent** the single coral ✱. **Fixed** EB Garamond 400 sentence case, hairline, cream ground. **Free** title, the mono index, layout + how full the frame runs. **Density** free.
+
+### 2 · Statement (statement · move: single EB Garamond line · cream or navy)
+
+**Ground** `{colors.cream}` (or `{colors.navy}` for gravity). **Composes** kicker-spike, display, optional lead. **Focal** one 2-line EB Garamond `display` carrying the change in a sentence — reach for **italic** if it's a stance. **Chrome** mono kicker. **Accent** none — the serif carries it (or one coral word). **Fixed** sentence-case serif. **Free** the line, ground, layout + density. **Density** free.
+
+### 3 · Code Surface (code · move: warm-navy code window · the PR-critical frame)
+
+**Ground** `{colors.cream}` framing a `{colors.navy}` **code-surface** (8px, cream@14% hairline, `navy-elev` title bar + filename in mono). **Composes** mono-label filename, the **`code-*` block** (code-diff / code-typing / code-snippet-_), optional `section-rule`. **Focal** the code panel — the diff / before→after / typed-on snippet. **Chrome** mono filename + status strip. **Accent** syntax coral/teal/amber inside the panel; one coral marker outside (e.g. a `+`/`−` gutter cue). **Fixed** warm-navy surface, mono code, hairline. **Free** which code-_ block, the code (from the diff), how large the panel runs. **Density** dense.
+
+### 4 · Number / Impact (data · move: oversized figure · cream)
+
+**Ground** `{colors.cream}`, `slide-pad`. **Composes** kicker-spike, number-lockup, lead/caption, optional `section-rule`. **Focal** a EB Garamond `number-hero` figure with a mono unit over a 1px rule — the PR impact (`+1,204 / −318`, `17 files`, `2.1× faster`). **Chrome** mono tag. **Accent** the figure in ink; at most one coral unit. **Fixed** serif figure + mono unit, hairline rule. **Free** the figures (from the script), tag, layout + density. **Density** free.
+
+### 5 · Pull-quote (quote · move: EB Garamond italic · cream)
+
+**Ground** `{colors.cream}`. **Composes** kicker-spike, pull-quote, tag-upper cite. **Focal** a EB Garamond **italic** `quote-pull` — a commit message, a reviewer line, or the thesis — with a small Inter uppercase cite (author · role) beneath. **Chrome** mono kicker. **Accent** none, or one coral mark. **Fixed** EB Garamond italic quote + uppercase cite. **Free** quote, attribution, layout + density. **Density** free.
+
+### 6 · Closing / CTA (closer · move: coral voltage · cream or navy)
+
+**Ground** `{colors.cream}` (or `{colors.navy}`). **Composes** display sign-off, coral-callout, optional contributor row (`assets/<login>.png` avatars + mono names). **Focal** a short EB Garamond sign-off with the one **coral-callout** (the CTA or full-bleed band) and, for a "shipped-by" close, a row of hairline-ringed avatar chips. **Chrome** mono index. **Accent** the single coral voltage. **Fixed** one coral moment, hairline avatar rings, sentence-case serif. **Free** sign-off, who ships, layout + density. **Density** free.
+
+## Composition Rules
+
+### Do
+
+- Stand every frame on the **warm cream floor**; gather content on a **half-step tile** surface.
+- Set all display in **EB Garamond, sentence case**, negative-tracked; **Inter 400** body; **JetBrains Mono** kickers (uppercase, 0.16em, coral ✱) + code.
+- Ration **coral to one moment per frame** — CTA, inline link, OR full-bleed band.
+- Elevate with a **1px hairline** + at most one soft warm shadow; reserve **warm navy** for the code/terminal surface.
+- Lead with **one clear focal**; open regions with a **kicker-spike**. Fill the frame as the content wants.
+- Pair a EB Garamond figure with a **mono unit** for every stat; render code via the **`code-*` blocks** on the navy surface.
+
+### Don't
+
+- No pure white, no cool gray, no pure black; no fourth brand hue (navy is structural, syntax colors are decoration).
+- No heavy drop shadow, glow, gradient on content, or tilt — hairline elevation only.
+- No uppercase or title-case EB Garamond display; no sans headline; no serif label; no serif-set numeric unit.
+- No two coral moments in one frame; coral never sets a headline or body run.
+- Don't blow a headline past the measure — step the ramp down.
+
+## Aspect-Ratio Behavior
+
+| Treatment     | 16:9                    | 9:16                        | 1:1                    |
+| ------------- | ----------------------- | --------------------------- | ---------------------- |
+| Cover         | display left, index top | display top, index below    | display, index corner  |
+| Statement     | line left/centered      | line stacked                | centered               |
+| Code Surface  | panel framed in cream   | panel taller, fewer lines   | panel centered, square |
+| Number/Impact | figure left             | figure centered, taller     | centered               |
+| Pull-quote    | quote left              | quote stacked               | centered               |
+| Closing/CTA   | sign-off + avatar row   | sign-off top, avatars below | centered, avatars wrap |
+
+`slide-pad` holds on the short edge; re-step display above the 1.4cqw floor. The code surface keeps
+its hairline + mono chrome on every ratio; the avatar row wraps rather than shrinks below legibility.
+
+## Approved Real Entities
+
+No real customers, logos, or vendors are defined in the source — render any such mark as a
+placeholder. Contributor avatars come from the project's `assets/<login>.png` (staged from the PR's
+people graph); the ✱ spike, hairlines, and the code surface are CSS-only and need no external imagery.
+
+## Numerals & Claims (hard rule)
+
+Never invent figures, stats, diffs, or counts at frame scale. Render slots as `— figure —`,
+`{metric}`, `+N / −M`. Number-lockups, code panels, and impact stats carry placeholders until the
+script (from the PR ingest) supplies real values. Branch names, file counts, and `+/−` totals trace
+to the diff; commit/issue numbers are chrome.
+
+## Pre-Render Self-Audit
+
+- **Squint** — one EB Garamond display moment dominates.
+- **Trinity** — cream floor + tile step + ink voice; coral appears exactly once; warm navy only on the code surface; no cool gray / pure white / fourth hue.
+- **Type** — EB Garamond sentence-case display (negative-tracked); Inter 400 body; JetBrains Mono kickers (uppercase 0.16em, coral ✱) + code; ≥1.4cqw floor.
+- **Depth** — 1px hairline + at most one soft warm shadow; no heavy drop / glow / gradient / tilt; 6/8/12px radii.
+- **Code** — code rendered by a `code-*` block on the warm-navy surface; syntax coral/teal/amber; figures paired with a mono unit.
+- **Fabrication** — every numeral / diff traces to the PR, else placeholder.
+
+## Known Gaps
+
+- **Motion intentionally out of scope.** frame.md specifies composition only. Claude's motion register — short cross-dissolves, no overshoot/bounce/elastic, coral the only "draw-on", numbers count up, code types on line by line — lives in the workflow's `motion-language.md` + `hyperframes-animation`, not here.
+- **EB Garamond + Inter + JetBrains Mono are all bundled in the HyperFrames renderer (`@fontsource` embedded data) — they resolve offline by name, with no Google Fonts dependency.** This is deliberate: every face here renders deterministically on a clean machine or AWS Lambda, so a frame needs no captured `.woff2` or `@font-face` for these three. The embedded set ships **weights 400 + 700 only and no true italic** — so author display at **weight 400** (700 reads as a heavy bold, off-register), and treat italic as the browser-synthesized slant (acceptable for the pull-quote register; ship a real EB Garamond italic `.woff2` + `@font-face` only if a project leans hard on it). EB Garamond is a warm old-style serif (low contrast, humanist); if it ever fails, fall to Georgia or another old-style serif — never to a sans. CJK: Noto Serif SC (display) / Noto Sans SC (body) / Noto Sans Mono CJK (code); the sentence-case warmth carries when the serif drops.
+- **Syntax colors (teal `#5DB8A6` / amber `#E8A55A` / status) are fixed decoration**, declared in §Colors — they are NOT in the remixable `colors:` block, so a brand remix never repaints them.
+- **The code itself is the `code-*` registry blocks**, not this preset — this preset owns only the surrounding warm-navy surface + mono chrome.
+- **9:16 / 1:1 are guidance**; verify the legibility floor and that the cream/tile warmth + one-coral discipline hold per ratio.
diff --git a/skills/hyperframes-creative/frame-presets/claude/caption-skin.html b/skills/hyperframes-creative/frame-presets/claude/caption-skin.html
new file mode 100644
index 0000000000..32b657bdfd
--- /dev/null
+++ b/skills/hyperframes-creative/frame-presets/claude/caption-skin.html
@@ -0,0 +1,224 @@
+<!--
+  Claude — caption skin (preset-local source).
+
+  This is the preset's own lower-third karaoke caption look. product-launch-video's
+  (and pr-to-video's) Step 2 copies it into the project as caption-skin.html;
+  captions.mjs then fills the three reserved holes, wraps the fragment in a
+  <template>, and writes compositions/captions.html:
+    · the empty GROUPS array            → the engine's scene-aware word groups
+    · the 0 duration + 0 width/height   → real total + canvas size
+    · the empty data-brand-tokens style → :root tokens derived from the project's frame.md
+
+  Token contract — reference ONLY this fixed vocab (captions.mjs injects it from
+  frame.md, so the Step-2 brand overlay flows through; each var has a claude literal
+  fallback for standalone preview):
+    --cap-ink · --cap-canvas · --cap-accent · --cap-accent-2 · --font-display ·
+    --font-body · --cap-band-top · --cap-band-height
+  Hooks (do not rename): .caption-group / .caption-word + states .is-active / .is-spoken,
+  root data-composition-id="captions", timeline at window.__timelines["captions"].
+  State changes use gsap.set({className}) (applied on the engine's frame-by-frame seek);
+  never tl.call() callbacks (seek does not fire them → wrong state on render).
+
+  Visual: a warm cream card lifted off the page on a 1px hairline ink border + one soft
+  warm shadow — claude's only elevation language, no tilt, editorial and precise.
+  EB Garamond sentence case, warm-ink glyphs. Upcoming words sit in faint ink; the current
+  word reads in full ink under a 3px coral "voltage" underline (the brand's inline-link
+  gesture, border-bottom = underline without layout shift); spoken words settle to solid
+  ink, underline cleared.
+-->
+<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+
+<!-- captions.mjs injects the project's :root tokens here -->
+<style data-brand-tokens></style>
+
+<style>
+  #captions-root {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+  }
+  .caption-layer {
+    position: absolute;
+    inset: 0;
+    z-index: 20;
+    pointer-events: none;
+  }
+  /* the keep-out band, from captionBand(H) — frame content stays above it */
+  .caption-stage {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: var(--cap-band-top, 900px);
+    height: var(--cap-band-height, 180px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .caption-group {
+    /* every group is absolutely stacked over the SAME band — exactly one shown at a
+       time via opacity. Must be absolute: in-flow groups would lay out side-by-side. */
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+  }
+
+  /* THE lifted cream card — warm cream fill, 1px hairline ink border, one soft warm
+     shadow (claude's only elevation language), 12px radius, no tilt */
+  .caption-pill {
+    max-width: 78%;
+    padding: 22px 44px 26px;
+    background: var(--cap-canvas, #faf9f5);
+    border: 1px solid color-mix(in srgb, var(--cap-ink, #141413) 12%, transparent);
+    border-radius: 12px;
+    box-shadow:
+      0 1px 3px color-mix(in srgb, var(--cap-ink, #141413) 8%, transparent),
+      0 4px 16px color-mix(in srgb, var(--cap-ink, #141413) 4%, transparent);
+  }
+  .caption-line {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 0.12em 0.3em;
+    font-family: var(--font-display, "EB Garamond"), Georgia, serif;
+    font-weight: 500;
+    font-size: clamp(40px, 4.4vw, 56px);
+    line-height: 1.24;
+    letter-spacing: -0.02em;
+  }
+
+  /* upcoming — faint warm ink, no underline */
+  .caption-word {
+    display: inline-block;
+    padding: 0 0.02em 0.06em;
+    color: color-mix(in srgb, var(--cap-ink, #141413) 40%, var(--cap-canvas, #faf9f5));
+    border-bottom: 3px solid transparent;
+  }
+  /* current word — full ink under the coral voltage underline (the brand's signature
+     inline-link gesture; border-bottom = underline without layout shift) */
+  .caption-word.is-active {
+    color: var(--cap-ink, #141413);
+    border-bottom: 3px solid var(--cap-accent, #cc785c);
+  }
+  /* already spoken — solid warm ink, underline cleared */
+  .caption-word.is-spoken {
+    color: var(--cap-ink, #141413);
+    border-bottom: 3px solid transparent;
+  }
+
+  /* optional per-word accents (dormant until a word-classer tags them) */
+  /* brand / key term — the expressive EB Garamond italic */
+  .caption-word.cap-brand {
+    font-style: italic;
+    color: var(--cap-ink, #141413);
+  }
+  .caption-word.cap-brand.is-active {
+    border-bottom: 3px solid var(--cap-accent, #cc785c);
+  }
+  /* numerals / data — slightly recessed warm ink */
+  .caption-word.cap-num {
+    color: color-mix(in srgb, var(--cap-ink, #141413) 72%, var(--cap-canvas, #faf9f5));
+  }
+  /* emphasis — a persistent coral voltage underline */
+  .caption-word.cap-cta {
+    border-bottom: 3px solid var(--cap-accent-2, #b5654a);
+    color: var(--cap-ink, #141413);
+  }
+
+  @media (max-aspect-ratio: 9/16) {
+    .caption-pill {
+      max-width: 92%;
+    }
+    .caption-line {
+      font-size: clamp(34px, 5.4vw, 46px);
+    }
+  }
+</style>
+
+<div
+  id="captions-root"
+  data-composition-id="captions"
+  data-timeline-locked
+  data-start="0"
+  data-duration="0"
+  data-fps="30"
+  data-width="0"
+  data-height="0"
+>
+  <div class="caption-layer" aria-hidden="true">
+    <div id="caption-stage" class="caption-stage"></div>
+  </div>
+</div>
+
+<script>
+  // captions.mjs injects the engine's scene-aware groups + real duration here.
+  var GROUPS = [];
+  var DURATION = 0;
+
+  (function () {
+    var stage = document.getElementById("caption-stage");
+
+    // build DOM: one .caption-group per group, .caption-word per word
+    GROUPS.forEach(function (group, g) {
+      var groupEl = document.createElement("div");
+      groupEl.className = "caption-group";
+      groupEl.id = "caption-group-" + g;
+      var pill = document.createElement("div");
+      pill.className = "caption-pill";
+      var line = document.createElement("div");
+      line.className = "caption-line";
+      (group.words || []).forEach(function (w, i) {
+        var span = document.createElement("span");
+        span.className = "caption-word";
+        span.id = "caption-word-" + g + "-" + i;
+        span.textContent = String(w.text);
+        line.appendChild(span);
+      });
+      pill.appendChild(line);
+      groupEl.appendChild(pill);
+      stage.appendChild(groupEl);
+    });
+
+    window.__timelines = window.__timelines || {};
+    var tl = gsap.timeline({ paused: true });
+
+    GROUPS.forEach(function (group, g) {
+      var groupEl = document.getElementById("caption-group-" + g);
+      var words = group.words || [];
+      var next = GROUPS[g + 1];
+      var isLast = g === GROUPS.length - 1;
+      var start = Math.max(0, Number(group.start));
+      var end = isLast ? DURATION : Math.min(Number(next.start), Number(group.end) + 0.3);
+      if (end <= start) end = start + 0.01;
+
+      // group on/off — exactly one group visible at a time
+      tl.set(groupEl, { opacity: 1 }, start);
+      tl.set(groupEl, { opacity: 0 }, end);
+
+      // 3-state karaoke via className SETS — seek-safe (gsap.set applies on the
+      // engine's frame-by-frame seek; .call callbacks would NOT fire).
+      words.forEach(function (w, i) {
+        var el = document.getElementById("caption-word-" + g + "-" + i);
+        var at = Math.max(start, Number(w.start));
+        tl.set(el, { className: "caption-word" }, start); // upcoming (also resets on reverse-seek)
+        tl.set(el, { className: "caption-word is-active" }, at); // current
+        tl.fromTo(el, { scale: 0.98 }, { scale: 1, duration: 0.16, ease: "power1.out" }, at);
+        if (i + 1 < words.length) {
+          var nextAt = Math.max(start, Number(words[i + 1].start));
+          tl.set(el, { className: "caption-word is-spoken" }, nextAt); // demote when next activates
+        }
+      });
+      if (words.length) {
+        var lastEl = document.getElementById("caption-word-" + g + "-" + (words.length - 1));
+        var lastSpoken = Math.min(end, Number(words[words.length - 1].end) + 0.1);
+        tl.set(lastEl, { className: "caption-word is-spoken" }, lastSpoken);
+      }
+    });
+
+    // full-span anchor so the sub-comp timeline spans the whole video
+    tl.to({}, { duration: DURATION }, 0);
+    window.__timelines["captions"] = tl;
+  })();
+</script>
diff --git a/skills/hyperframes-creative/frame-presets/claude/frame-showcase.html b/skills/hyperframes-creative/frame-presets/claude/frame-showcase.html
new file mode 100644
index 0000000000..67a98a8ab7
--- /dev/null
+++ b/skills/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/skills/hyperframes-creative/frame-presets/cobalt-grid/FRAME.md b/skills/hyperframes-creative/frame-presets/cobalt-grid/FRAME.md
new file mode 100644
index 0000000000..af52eec8f3
--- /dev/null
+++ b/skills/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/skills/hyperframes-creative/frame-presets/cobalt-grid/caption-skin.html b/skills/hyperframes-creative/frame-presets/cobalt-grid/caption-skin.html
new file mode 100644
index 0000000000..e604347cf7
--- /dev/null
+++ b/skills/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/skills/hyperframes-creative/frame-presets/cobalt-grid/frame-showcase.html b/skills/hyperframes-creative/frame-presets/cobalt-grid/frame-showcase.html
new file mode 100644
index 0000000000..d9449880f1
--- /dev/null
+++ b/skills/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/skills/hyperframes-creative/frame-presets/coral/FRAME.md b/skills/hyperframes-creative/frame-presets/coral/FRAME.md
new file mode 100644
index 0000000000..0c73b04acb
--- /dev/null
+++ b/skills/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/skills/hyperframes-creative/frame-presets/coral/caption-skin.html b/skills/hyperframes-creative/frame-presets/coral/caption-skin.html
new file mode 100644
index 0000000000..41f2a59603
--- /dev/null
+++ b/skills/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/skills/hyperframes-creative/frame-presets/coral/frame-showcase.html b/skills/hyperframes-creative/frame-presets/coral/frame-showcase.html
new file mode 100644
index 0000000000..ae87659f3b
--- /dev/null
+++ b/skills/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/skills/hyperframes-creative/frame-presets/creative-mode/FRAME.md b/skills/hyperframes-creative/frame-presets/creative-mode/FRAME.md
new file mode 100644
index 0000000000..e00e6fed67
--- /dev/null
+++ b/skills/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/skills/hyperframes-creative/frame-presets/creative-mode/caption-skin.html b/skills/hyperframes-creative/frame-presets/creative-mode/caption-skin.html
new file mode 100644
index 0000000000..231e39bf04
--- /dev/null
+++ b/skills/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/skills/hyperframes-creative/frame-presets/creative-mode/frame-showcase.html b/skills/hyperframes-creative/frame-presets/creative-mode/frame-showcase.html
new file mode 100644
index 0000000000..e540e40a39
--- /dev/null
+++ b/skills/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/skills/hyperframes-creative/frame-presets/daisy-days/FRAME.md b/skills/hyperframes-creative/frame-presets/daisy-days/FRAME.md
new file mode 100644
index 0000000000..ed3ebf49e0
--- /dev/null
+++ b/skills/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/skills/hyperframes-creative/frame-presets/daisy-days/caption-skin.html b/skills/hyperframes-creative/frame-presets/daisy-days/caption-skin.html
new file mode 100644
index 0000000000..6431baaa6c
--- /dev/null
+++ b/skills/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/skills/hyperframes-creative/frame-presets/daisy-days/frame-showcase.html b/skills/hyperframes-creative/frame-presets/daisy-days/frame-showcase.html
new file mode 100644
index 0000000000..c577bdbab3
--- /dev/null
+++ b/skills/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/skills/hyperframes-creative/frame-presets/editorial-forest/FRAME.md b/skills/hyperframes-creative/frame-presets/editorial-forest/FRAME.md
new file mode 100644
index 0000000000..83e2594f63
--- /dev/null
+++ b/skills/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/skills/hyperframes-creative/frame-presets/editorial-forest/caption-skin.html b/skills/hyperframes-creative/frame-presets/editorial-forest/caption-skin.html
new file mode 100644
index 0000000000..b3d2898679
--- /dev/null
+++ b/skills/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/skills/hyperframes-creative/frame-presets/editorial-forest/frame-showcase.html b/skills/hyperframes-creative/frame-presets/editorial-forest/frame-showcase.html
new file mode 100644
index 0000000000..c5c08718fe
--- /dev/null
+++ b/skills/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/skills/hyperframes-creative/references/design-spec.md b/skills/hyperframes-creative/references/design-spec.md
new file mode 100644
index 0000000000..ba50475a28
--- /dev/null
+++ b/skills/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/skills/hyperframes-media/SKILL.md b/skills/hyperframes-media/SKILL.md
index 9a67ef9d62..8a5f3de16d 100644
--- a/skills/hyperframes-media/SKILL.md
+++ b/skills/hyperframes-media/SKILL.md
@@ -1,15 +1,40 @@
 ---
 name: hyperframes-media
-description: Asset preprocessing for HyperFrames compositions — multi-provider TTS (HeyGen / ElevenLabs / Kokoro local), multi-provider BGM (Google Lyria / local MusicGen), Whisper transcription, background removal, and caption authoring. Use for npx hyperframes tts, bgm, transcribe, remove-background, voice/provider selection, music-mood prompting, captions / subtitles / lyrics / karaoke / per-word styling.
+description: Audio and media assets for HyperFrames compositions, produced by one shared audio engine (`scripts/audio.mjs`) — multi-provider TTS (HeyGen / ElevenLabs / Kokoro local), background music + sound effects (HeyGen audio-library retrieval by default, with local Lyria / MusicGen BGM generation and a bundled SFX library as the no-credential fallback), Whisper transcription, background removal, and caption authoring. Use for voiceover / TTS, BGM, SFX / sound effects, transcription, captions / subtitles / lyrics / karaoke / per-word styling, voice + provider selection, and music-mood prompting.
 ---
 
 # HyperFrames Media
 
-CLI commands that create assets (`tts`, `bgm`, `transcribe`, `remove-background`), plus everything needed to consume and animate transcript data in HTML. For placing assets into compositions, see `hyperframes-core`.
+Create the audio and media assets a composition needs — voiceover (TTS), background music + sound effects, transcription, captions, background removal — then consume and animate that data in HTML. For placing assets into compositions, see `hyperframes-core`.
 
-## Provider chains (auto-detected from env)
+## The audio engine — one source for TTS · BGM · SFX
 
-**TTS** — `npx hyperframes tts "..."` picks the first available provider:
+Workflows do NOT hand-roll audio or vendor a copy. There is one engine — **`scripts/audio.mjs`** — that takes a neutral `audio_request.json` and writes `audio_meta.json` (plus assets under `assets/voice|bgm|sfx`):
+
+```bash
+# <MEDIA_DIR> = this skill's directory
+node <MEDIA_DIR>/scripts/audio.mjs --request ./audio_request.json --hyperframes . --out ./audio_meta.json
+```
+
+All three capabilities degrade on **ONE switch** — whether a HeyGen credential is present (resolved from `$HEYGEN_API_KEY` / `$HYPERFRAMES_API_KEY` / `~/.heygen`, **not** the CLI):
+
+| Capability | HeyGen credential present                          | absent                                               |
+| ---------- | -------------------------------------------------- | ---------------------------------------------------- |
+| TTS        | HeyGen Starfish REST (native word timestamps)      | → ElevenLabs → Kokoro (chain `transcribe` for words) |
+| BGM        | HeyGen music **retrieval**                         | Lyria → MusicGen local **generation** (detached)     |
+| SFX        | HeyGen sound-effects **retrieval** (min_score 0.4) | bundled 21-file library (`assets/sfx/`)              |
+
+- **Request** (`audio_request.json`): `{ provider?, lang?, speed?, lines: [{ id, text, sfx?: [names] }], bgm: { mode?, query?, prompt? } }`. `id` joins each line back to the caller's model (a frame number, a scene id, …). `bgm.mode` = `retrieve | generate | none`; omit for auto (retrieve when credentialed, else generate). An **explicit** `retrieve` is strict — it skips rather than starting a detached generate (for callers with no `wait-bgm` step).
+- **Output** (`audio_meta.json`, id-keyed): `{ tts_provider, voice_id, bgm, bgm_pending, …, voices: [{ id, path, duration_s, words }], 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` (e.g. TTS+BGM early, SFX once cues exist).
+- BGM generate is spawned **detached** (`bgm_pending: true`) — run `scripts/wait-bgm.mjs` before assembling.
+- `scripts/heygen-tts.mjs` is a single-shot CLI over the same code (one text → wav + words) for when you just need HeyGen TTS without a request file.
+
+Full flag list + the `audio_meta.json` schema live in the header of `scripts/audio.mjs`. The references below cover the provider details and edge cases behind each capability.
+
+## Provider chains (the detail behind the engine)
+
+**TTS** — first available provider wins (the engine, or `npx hyperframes tts "..."`):
 
 | Order | Provider                      | Detected when                                | Word timestamps                                                  |
 | ----- | ----------------------------- | -------------------------------------------- | ---------------------------------------------------------------- |
@@ -17,36 +42,40 @@ CLI commands that create assets (`tts`, `bgm`, `transcribe`, `remove-background`
 | 2     | ElevenLabs                    | `$ELEVENLABS_API_KEY` set                    | No — chain `transcribe` after                                    |
 | 3     | Kokoro-82M (local, 54 voices) | always (no key required)                     | No — chain `transcribe` after                                    |
 
-> If the installed `hyperframes tts` is the local-only build (its `--help` says "Kokoro-82M" and has no `--provider`/`--words` flags), it silently falls back to Kokoro even with `$HEYGEN_API_KEY` set. To force HeyGen regardless of CLI version, use the self-contained `scripts/heygen-tts.mjs` (see `references/tts.md`).
+> The published `hyperframes tts` CLI is often the local-only build (its `--help` says "Kokoro-82M", no `--provider`/`--words`) and silently falls back to Kokoro even with `$HEYGEN_API_KEY` set. That is why the engine's HeyGen path is the self-contained `scripts/heygen-tts.mjs` (REST), NOT the CLI; the CLI is used only for the Kokoro path. See `references/tts.md`.
 
-**BGM** — `npx hyperframes bgm --duration N`:
+**BGM & SFX** — by default **retrieved** from the HeyGen audio library (`/v3/audio/sounds`), same credential as HeyGen TTS, with the no-credential fallback from the switch above:
 
-| Order | Provider                                    | Detected when                                       |
-| ----- | ------------------------------------------- | --------------------------------------------------- |
-| 1     | Google Lyria (RealTime)                     | `$GEMINI_API_KEY` or `$GOOGLE_API_KEY` set          |
-| 2     | MusicGen (`facebook/musicgen-small`, local) | Python `transformers + torch + soundfile` installed |
+| Asset | HeyGen `type`                   | Lands in                                                   | Fallback (no credential)                                   |
+| ----- | ------------------------------- | ---------------------------------------------------------- | ---------------------------------------------------------- |
+| BGM   | `music`                         | `assets/bgm/track.mp3` (retrieve) · `track.wav` (generate) | Lyria / MusicGen generation                                |
+| SFX   | `sound_effects` (min_score 0.4) | `assets/sfx/<slug>.mp3`                                    | bundled 21-file library (`assets/sfx/*` + `manifest.json`) |
 
-Override either with `--provider <name>`.
+See `references/bgm.md` and `references/sfx.md`.
 
 ## Routing
 
-| Task                                                              | Read                                               |
-| ----------------------------------------------------------------- | -------------------------------------------------- |
-| `npx hyperframes tts` — provider chain, voice IDs, words.json     | `references/tts.md`                                |
-| HeyGen without the CLI — self-contained REST script (wav + words) | `scripts/heygen-tts.mjs` (see `references/tts.md`) |
-| `npx hyperframes bgm` — Lyria vs MusicGen, mood prompts, tuning   | `references/bgm.md`                                |
-| `npx hyperframes transcribe` — Whisper, model rules, output shape | `references/transcribe.md`                         |
-| `npx hyperframes remove-background` — transparent cutouts         | `references/remove-background.md`                  |
-| TTS → transcription → captions (no recorded voiceover)            | `references/tts-to-captions.md`                    |
-| Caption authoring — style detection, layout, word grouping, exit  | `references/captions/authoring.md`                 |
-| Transcript handling — input formats, quality gates, cleanup, APIs | `references/captions/transcript-handling.md`       |
-| Caption motion — karaoke, marker effects, audio-reactive          | `references/captions/motion.md`                    |
-| Model caches, system dependencies, troubleshooting                | `references/requirements.md`                       |
+| Task                                                                | Read                                         |
+| ------------------------------------------------------------------- | -------------------------------------------- |
+| The audio engine — request/meta schema, `--only`, the switch        | `scripts/audio.mjs` (header comment)         |
+| `npx hyperframes tts` / `heygen-tts.mjs` — providers, voices, words | `references/tts.md`                          |
+| BGM — HeyGen retrieval + local Lyria / MusicGen generation          | `references/bgm.md`                          |
+| SFX — HeyGen retrieval (min_score 0.4) + bundled local library      | `references/sfx.md`                          |
+| `npx hyperframes transcribe` — Whisper, model rules, output shape   | `references/transcribe.md`                   |
+| `npx hyperframes remove-background` — transparent cutouts           | `references/remove-background.md`            |
+| TTS → transcription → captions (no recorded voiceover)              | `references/tts-to-captions.md`              |
+| Caption authoring — style detection, layout, word grouping, exit    | `references/captions/authoring.md`           |
+| Transcript handling — input formats, quality gates, cleanup, APIs   | `references/captions/transcript-handling.md` |
+| Caption motion — karaoke, marker effects, audio-reactive            | `references/captions/motion.md`              |
+| Model caches, system dependencies, troubleshooting                  | `references/requirements.md`                 |
 
 ## Non-negotiable rules
 
+- **One engine, no vendored copies.** Produce audio via `scripts/audio.mjs` (or `heygen-tts.mjs` for one-shot HeyGen TTS). Don't re-implement TTS/BGM/SFX inside a workflow — write an `audio_request.json` adapter and call the engine.
+- **"HeyGen available" = a resolvable credential, not the CLI.** The whole switch keys off `heygenCredential()`; the published `hyperframes tts` may be Kokoro-only, and there is no `hyperframes bgm` / `hyperframes sfx` command at all.
 - **Voice IDs are provider-specific.** `am_michael` is Kokoro-only; HeyGen UUIDs don't work on Kokoro. If you pass `--voice`, also pin `--provider` to avoid silent provider drift when the user's env changes.
 - **Always pass `--model` to `transcribe`.** The CLI default `small.en` silently translates non-English audio. See `references/transcribe.md` → "Language Rule".
-- **HeyGen returns word timestamps; ElevenLabs / Kokoro do not.** When you want captions, either pass `--words` to HeyGen and use that JSON directly, or run `transcribe` against the audio file. Don't assume word data is always there.
+- **HeyGen returns word timestamps; ElevenLabs / Kokoro do not.** The engine chains `transcribe` automatically for the latter two; standalone, pass `--words` to HeyGen or run `transcribe` against the audio file.
 - **Captions consume the flat word-array format** with `{ id, text, start, end }`. See `references/transcribe.md` → "Output Shape".
 - **`remove-background --background-output` is hole-cut, not inpainted.** For "scene without the person", a different tool is needed. See `references/remove-background.md` → "When NOT the right tool".
+- **BGM/SFX default to HeyGen retrieval; the no-credential fallback is generation (BGM) or the bundled library (SFX).** `/audio/sounds` ranks by a text query — name effects concretely (`glass shatter`, not `dramatic sound`); a no-match **skips**, never blocks the render. SFX sit at volume ~0.35 under voice + BGM. See `references/sfx.md` / `references/bgm.md`.
diff --git a/skills/hyperframes-media/assets/sfx/CREDITS.md b/skills/hyperframes-media/assets/sfx/CREDITS.md
new file mode 100644
index 0000000000..750d6e8393
--- /dev/null
+++ b/skills/hyperframes-media/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/skills/hyperframes-media/assets/sfx/chime.mp3 b/skills/hyperframes-media/assets/sfx/chime.mp3
new file mode 100644
index 0000000000..12da953a35
Binary files /dev/null and b/skills/hyperframes-media/assets/sfx/chime.mp3 differ
diff --git a/skills/hyperframes-media/assets/sfx/click-soft.mp3 b/skills/hyperframes-media/assets/sfx/click-soft.mp3
new file mode 100644
index 0000000000..2706b1d2ea
Binary files /dev/null and b/skills/hyperframes-media/assets/sfx/click-soft.mp3 differ
diff --git a/skills/hyperframes-media/assets/sfx/click.mp3 b/skills/hyperframes-media/assets/sfx/click.mp3
new file mode 100644
index 0000000000..2706b1d2ea
Binary files /dev/null and b/skills/hyperframes-media/assets/sfx/click.mp3 differ
diff --git a/skills/hyperframes-media/assets/sfx/error.mp3 b/skills/hyperframes-media/assets/sfx/error.mp3
new file mode 100644
index 0000000000..6b4487ff46
Binary files /dev/null and b/skills/hyperframes-media/assets/sfx/error.mp3 differ
diff --git a/skills/hyperframes-media/assets/sfx/glitch-1.mp3 b/skills/hyperframes-media/assets/sfx/glitch-1.mp3
new file mode 100644
index 0000000000..124f450194
Binary files /dev/null and b/skills/hyperframes-media/assets/sfx/glitch-1.mp3 differ
diff --git a/skills/hyperframes-media/assets/sfx/glitch-2.mp3 b/skills/hyperframes-media/assets/sfx/glitch-2.mp3
new file mode 100644
index 0000000000..580b6fdc4f
Binary files /dev/null and b/skills/hyperframes-media/assets/sfx/glitch-2.mp3 differ
diff --git a/skills/hyperframes-media/assets/sfx/glitch-3.mp3 b/skills/hyperframes-media/assets/sfx/glitch-3.mp3
new file mode 100644
index 0000000000..5a8adc2442
Binary files /dev/null and b/skills/hyperframes-media/assets/sfx/glitch-3.mp3 differ
diff --git a/skills/hyperframes-media/assets/sfx/impact-bass-1.mp3 b/skills/hyperframes-media/assets/sfx/impact-bass-1.mp3
new file mode 100644
index 0000000000..ecfe0c48a6
Binary files /dev/null and b/skills/hyperframes-media/assets/sfx/impact-bass-1.mp3 differ
diff --git a/skills/hyperframes-media/assets/sfx/impact-bass-2.mp3 b/skills/hyperframes-media/assets/sfx/impact-bass-2.mp3
new file mode 100644
index 0000000000..4ae448b58a
Binary files /dev/null and b/skills/hyperframes-media/assets/sfx/impact-bass-2.mp3 differ
diff --git a/skills/hyperframes-media/assets/sfx/key-press.mp3 b/skills/hyperframes-media/assets/sfx/key-press.mp3
new file mode 100644
index 0000000000..d669006e01
Binary files /dev/null and b/skills/hyperframes-media/assets/sfx/key-press.mp3 differ
diff --git a/skills/hyperframes-media/assets/sfx/manifest.json b/skills/hyperframes-media/assets/sfx/manifest.json
new file mode 100644
index 0000000000..7db0ad7ca5
--- /dev/null
+++ b/skills/hyperframes-media/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/skills/hyperframes-media/assets/sfx/notification.mp3 b/skills/hyperframes-media/assets/sfx/notification.mp3
new file mode 100644
index 0000000000..d3f0d1fa22
Binary files /dev/null and b/skills/hyperframes-media/assets/sfx/notification.mp3 differ
diff --git a/skills/hyperframes-media/assets/sfx/ping.mp3 b/skills/hyperframes-media/assets/sfx/ping.mp3
new file mode 100644
index 0000000000..99808c8b63
Binary files /dev/null and b/skills/hyperframes-media/assets/sfx/ping.mp3 differ
diff --git a/skills/hyperframes-media/assets/sfx/pop.mp3 b/skills/hyperframes-media/assets/sfx/pop.mp3
new file mode 100644
index 0000000000..e3ed16fef0
Binary files /dev/null and b/skills/hyperframes-media/assets/sfx/pop.mp3 differ
diff --git a/skills/hyperframes-media/assets/sfx/riser.mp3 b/skills/hyperframes-media/assets/sfx/riser.mp3
new file mode 100644
index 0000000000..0cea32c08d
Binary files /dev/null and b/skills/hyperframes-media/assets/sfx/riser.mp3 differ
diff --git a/skills/hyperframes-media/assets/sfx/sparkle.mp3 b/skills/hyperframes-media/assets/sfx/sparkle.mp3
new file mode 100644
index 0000000000..dae37802ff
Binary files /dev/null and b/skills/hyperframes-media/assets/sfx/sparkle.mp3 differ
diff --git a/skills/hyperframes-media/assets/sfx/typing.mp3 b/skills/hyperframes-media/assets/sfx/typing.mp3
new file mode 100644
index 0000000000..ff69cc0420
Binary files /dev/null and b/skills/hyperframes-media/assets/sfx/typing.mp3 differ
diff --git a/skills/hyperframes-media/assets/sfx/whoosh-cinematic.mp3 b/skills/hyperframes-media/assets/sfx/whoosh-cinematic.mp3
new file mode 100644
index 0000000000..93b7218007
Binary files /dev/null and b/skills/hyperframes-media/assets/sfx/whoosh-cinematic.mp3 differ
diff --git a/skills/hyperframes-media/assets/sfx/whoosh-short.mp3 b/skills/hyperframes-media/assets/sfx/whoosh-short.mp3
new file mode 100644
index 0000000000..e23e513d27
Binary files /dev/null and b/skills/hyperframes-media/assets/sfx/whoosh-short.mp3 differ
diff --git a/skills/hyperframes-media/assets/sfx/whoosh.mp3 b/skills/hyperframes-media/assets/sfx/whoosh.mp3
new file mode 100644
index 0000000000..e23e513d27
Binary files /dev/null and b/skills/hyperframes-media/assets/sfx/whoosh.mp3 differ
diff --git a/skills/hyperframes-media/references/bgm.md b/skills/hyperframes-media/references/bgm.md
index 3b55e6bcba..cff7a440bf 100644
--- a/skills/hyperframes-media/references/bgm.md
+++ b/skills/hyperframes-media/references/bgm.md
@@ -1,67 +1,70 @@
-# Background Music
+# Background music (BGM)
 
-`npx hyperframes bgm --duration <s>` generates a stereo WAV from a mood prompt. Auto-detects between Google Lyria (cloud) and MusicGen (local).
+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:
 
-## Provider chain
+- **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 automatic 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.
 
-| Order | Provider                             | Env / deps                                                          | Speed                                                   | Quality                                                    |
-| ----- | ------------------------------------ | ------------------------------------------------------------------- | ------------------------------------------------------- | ---------------------------------------------------------- |
-| 1     | Google Lyria RealTime                | `$GEMINI_API_KEY` or `$GOOGLE_API_KEY` + `pip install google-genai` | Real-time stream (≈ requested duration)                 | Production-grade, BPM / brightness / density / scale knobs |
-| 2     | MusicGen (`facebook/musicgen-small`) | Python `transformers + torch + soundfile` (~300 MB on first run)    | Slow on CPU (minutes); fast on Apple Silicon MPS / CUDA | Decent; coarser controls (prompt only)                     |
+## Driving it from the request
 
-Override with `--provider lyria|musicgen`. If neither path is available the command exits 1 with a clear message — callers decide whether to proceed without BGM.
+`audio_request.json` → `bgm: { mode?, query?, prompt? }`:
 
-```bash
-# Auto (Lyria if a Google key is set)
-npx hyperframes bgm --duration 30 -o bgm.wav
+- **`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.
 
-# Pin a provider
-npx hyperframes bgm --duration 60 --provider musicgen -o bgm.wav
+## HeyGen retrieval (default)
 
-# Explicit mood
-npx hyperframes bgm --duration 45 --prompt "Calm cinematic, soft strings, BPM 95" -o bgm.wav
+`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`:
 
-# Infer mood from a script (industry-keyword match)
-npx hyperframes bgm --duration 45 --from-file narrator_scripts.json -o bgm.wav
-
-# Lyria tuning
-npx hyperframes bgm --duration 30 --prompt "..." --bpm 95 --scale MINOR --brightness 0.6 --density 0.4
+```jsonc
+{
+  "path": "assets/bgm/track.mp3",
+  "volume": 0.8,
+  "mode": "retrieve",
+  "query": "calm cinematic underscore",
+  "duration_s": 42.0,
+}
 ```
 
-## Mood inference (`--from-file`)
+`volume` is 0.8 under narration, 0.9 for a silent film (no voice). `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.
 
-Pass any text file (narrator script, script blob, JSON dump). The CLI scans the lowercased content against industry keywords and picks a prompt:
+| 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 |
 
-| Match                                                     | Default prompt                                                                              |
-| --------------------------------------------------------- | ------------------------------------------------------------------------------------------- |
-| `saas / api / cloud / developer / platform / sdk / infra` | `Uplifting corporate tech, bright and modern, gentle piano with synth pads, BPM 110, MAJOR` |
-| `crypto / nft / web3 / defi / token / blockchain`         | `Atmospheric electronic, deep bass, futuristic synths, restrained percussion, BPM 100`      |
-| `creative / agency / design / studio / art / brand`       | `Playful electronic, warm pads, light percussion, BPM 115, MAJOR`                           |
-| `finance / fintech / bank / payment / invest / wealth`    | `Calm cinematic, soft strings, restrained percussion, BPM 95`                               |
-| _(default)_                                               | Same as `saas`                                                                              |
+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).
 
-`--prompt` always wins over `--from-file`.
+## Mood inference (the generate prompt)
 
-## Lyria knobs
+`inferBgmPrompt()` in `scripts/lib/bgm.mjs`: an explicit `prompt` wins; otherwise industry-keyword **base** → narrative-**archetype** shape → emotional-**arc** tiebreaker.
 
-- `--bpm` 90–110 calm, 110–130 energetic (default 110)
-- `--brightness` 0–1, ≥ 0.7 for promotional (default 0.8)
-- `--density` 0–1, higher = fuller mix (default 0.5)
-- `--scale` `MAJOR` upbeat / `MINOR` somber / `PENTATONIC` / etc. (default `MAJOR`)
-- `--negative-prompt` styles to exclude (e.g. `"vocals, drums"`)
+| 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 |
 
-MusicGen ignores all of the above — pass the mood you want directly in `--prompt`.
+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).
 
-## Output
+## Lyria knobs (direct recipe use)
 
-48 kHz / 16-bit stereo WAV at the requested duration (Lyria; MusicGen returns 32 kHz mono). Lyria writes silence-padded if the stream timeouts; check the printed `durationSeconds` against your target.
+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                                                                                        |
-| ----------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- |
-| `$GEMINI_API_KEY` / `$GOOGLE_API_KEY` unset **and** Python deps missing | Exit 1 with install hint (`pip install transformers torch soundfile` or set `$GEMINI_API_KEY`). |
-| Lyria API error                                                         | Exit 1 with stderr tail. Re-run with `--provider musicgen` to fall back.                        |
-| MusicGen OOM on CPU                                                     | Reduce `--duration` (each second ≈ 50 tokens; ~10 GB peak for 30 s on CPU).                     |
+| 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 generation is **synchronous** in the CLI — for multi-minute renders, run it in the background (`&` in shell, or your agent harness's background-execution option).
+BGM failure never blocks a render.
diff --git a/skills/hyperframes-media/references/sfx.md b/skills/hyperframes-media/references/sfx.md
new file mode 100644
index 0000000000..6df3268cc3
--- /dev/null
+++ b/skills/hyperframes-media/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/skills/hyperframes-media/scripts/audio.mjs b/skills/hyperframes-media/scripts/audio.mjs
new file mode 100644
index 0000000000..0532a0cf57
--- /dev/null
+++ b/skills/hyperframes-media/scripts/audio.mjs
@@ -0,0 +1,282 @@
+#!/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 21-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";
+
+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));
+
+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 } = await synthesizeOne({
+      provider: ttsProvider,
+      text,
+      voiceId,
+      lang,
+      speed,
+      wavAbs: abs,
+      hyperframesDir,
+    });
+    if (!ok) {
+      anomalies.push(`line ${id}: TTS failed — omitted`);
+      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 Promise.all(lines.map(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/skills/hyperframes-media/scripts/heygen-tts.mjs b/skills/hyperframes-media/scripts/heygen-tts.mjs
index c815161112..f54eba892c 100755
--- a/skills/hyperframes-media/scripts/heygen-tts.mjs
+++ b/skills/hyperframes-media/scripts/heygen-tts.mjs
@@ -1,38 +1,25 @@
 #!/usr/bin/env node
-// Self-contained HeyGen TTS — bypasses the `hyperframes` CLI (Kokoro-only).
-//
-// One REST call to api.heygen.com/v3/voices/speech returns an audio_url plus
-// word_timestamps. We download the audio, transcode mp3→wav (44.1k mono) when
-// the output ends in .wav, and write the word timestamps in the flat
-// { id, text, start, end } shape the captions pipeline consumes — so the
-// separate Whisper transcribe pass is skipped.
-//
-// Mirrors the inline `synthesizeHeygen` in the video skills' audio.mjs, but
-// stands alone: single text in → one wav (+ optional words JSON) out.
+// 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   Output path (.wav → ffmpeg transcode; .mp3 → raw bytes). Default: narration.wav
-//       --words     Write word timestamps to this path ([{id,text,start,end}]). Optional.
-//       --voice     HeyGen starfish voice_id. Default: first English public starfish voice (auto).
-//       --speed     Speech speed multiplier. Default: 1.0
-//       --lang      Language code; anything other than "en" is sent as `language`. Default: en
-//       --list      List public starfish voices (voice_id / name / language) and exit.
+//   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
 //
-// Requires: $HEYGEN_API_KEY (read from shell env or a nearby .env), and ffmpeg
-// on PATH for .wav output.
+// Flags: -o/--output (.wav → ffmpeg transcode; .mp3 → raw bytes), --words,
+//   --voice (starfish id), --speed, --lang, --list.
+// Requires: $HEYGEN_API_KEY (or ~/.heygen) and ffmpeg for .wav output.
 
-import { spawnSync } from "node:child_process";
-import { existsSync, mkdirSync, mkdtempSync, readFileSync, rmSync, writeFileSync } from "node:fs";
-import { homedir, tmpdir } from "node:os";
-import { dirname, join, resolve } from "node:path";
+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";
 
-// ---------- argv ----------
 const argv = process.argv.slice(2);
 function flag(name, def) {
   const i = argv.indexOf(`--${name}`);
@@ -41,23 +28,22 @@ function flag(name, def) {
   const v = argv[i + 1];
   return v.startsWith("--") ? true : v;
 }
-function die(msg) {
-  console.error(`✗ heygen-tts: ${msg}`);
+const die = (m) => {
+  console.error(`✗ heygen-tts: ${m}`);
   process.exit(1);
-}
+};
 
-// First non-flag arg (and not a flag value) is the text or .txt path.
+// 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("--")) {
-      // skip its value if it consumes one
       const next = argv[i + 1];
       if (next && !next.startsWith("--")) i++;
       continue;
     }
     if (a === "-o") {
-      i++; // skip output value
+      i++;
       continue;
     }
     return a;
@@ -77,107 +63,26 @@ const speed = isFinite(speedRaw) && speedRaw > 0 ? speedRaw : 1.0;
 const lang = typeof flag("lang") === "string" ? flag("lang") : "en";
 const listOnly = flag("list") === true;
 
-// ---------- load .env ----------
-// Walk up from CWD ≤ 5 dirs, first .env wins; shell env always takes priority
-// (never override an already-set key). Matches audio.mjs / the CLI loader.
-function loadEnvFromDir(startDir) {
-  let dir = resolve(startDir);
-  for (let i = 0; i < 5; i++) {
-    const envPath = join(dir, ".env");
-    if (existsSync(envPath)) {
-      const txt = readFileSync(envPath, "utf8");
-      for (const raw of txt.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.charAt(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;
-  }
-}
 loadEnvFromDir(process.cwd());
-
-// ---------- resolve HeyGen credential ----------
-// Mirrors the hyperframes CLI (packages/cli/src/auth: resolver.ts + store.ts +
-// client.ts#buildAuthHeaders). First usable source wins:
-//   1. $HEYGEN_API_KEY        → X-Api-Key
-//   2. $HYPERFRAMES_API_KEY   → X-Api-Key  (alias)
-//   3. ~/.heygen/credentials  (shared with heygen-cli / `hyperframes auth login`;
-//                              $HEYGEN_CONFIG_DIR overrides the dir):
-//        oauth (unexpired) → Authorization: Bearer  ·  else api_key → X-Api-Key
-//        ·  legacy single-line plaintext key → X-Api-Key
-// Pure resolution (never throws); returns { headers } | { expired: true } | null.
-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 } };
-
-  const cred = JSON.parse(raw);
-  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;
-}
-
-// Headers for the HeyGen REST calls, or a clear error pointing at the fix.
-function heygenAuthHeaders() {
-  const cred = heygenCredential();
-  if (cred?.headers) return cred.headers;
-  if (cred?.expired)
-    die(
-      "HeyGen OAuth token expired — run `hyperframes auth refresh` (or `hyperframes auth login`)",
-    );
-  die(
-    "no HeyGen credentials — set $HEYGEN_API_KEY, or run `hyperframes auth login` (writes ~/.heygen/credentials)",
-  );
-}
-
-const authHeaders = heygenAuthHeaders();
-
-const BASE = "https://api.heygen.com/v3";
-
-// GET public starfish voices — the /v3/voices/speech endpoint only accepts
-// voice_ids from the starfish engine (v2 catalog ids are rejected with a 400).
-async function fetchStarfishVoices() {
-  const res = await fetch(`${BASE}/voices?engine=starfish&type=public&limit=50`, {
-    headers: authHeaders,
-  });
-  if (!res.ok) die(`voice list failed (HTTP ${res.status})`);
-  const payload = await res.json();
-  return payload.data ?? payload.voices ?? [];
+let authHeaders;
+try {
+  authHeaders = heygenAuthHeaders();
+} catch (e) {
+  die(e.message);
 }
 
 // ---------- --list ----------
 if (listOnly) {
-  for (const v of await fetchStarfishVoices()) {
+  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 input text ----------
+// ---------- 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))
@@ -185,82 +90,32 @@ const text =
     : positional;
 if (!text) die("input text is empty");
 
-// ---------- resolve voice ----------
-// Explicit --voice wins; otherwise pick the first English public starfish voice
-// (the speech endpoint requires a starfish voice_id).
-let voiceId = userVoice;
-if (!voiceId) {
-  const voices = await fetchStarfishVoices();
-  const pick = voices.find((v) => v.language === "English") ?? voices[0];
-  if (!pick) die("no public starfish voices available to default to — pass --voice");
-  voiceId = pick.voice_id;
-  console.error(`· using voice ${voiceId} (${pick.name})`);
-}
-
-// ---------- synthesize ----------
-const reqBody = { text, voice_id: voiceId, speed };
-if (lang !== "en") reqBody.language = lang;
-
-const res = await fetch(`${BASE}/voices/speech`, {
-  method: "POST",
-  headers: { ...authHeaders, "Content-Type": "application/json" },
-  body: JSON.stringify(reqBody),
+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 (!res.ok) {
-  const detail = await res.text().catch(() => "");
-  die(`speech request failed (HTTP ${res.status})${detail ? `\n${detail.slice(0, 300)}` : ""}`);
-}
-const payload = await res.json();
-const inner = payload.data ?? payload;
-if (!inner.audio_url) die("response had no audio_url");
-
-// ---------- download audio ----------
-const audioRes = await fetch(inner.audio_url);
-if (!audioRes.ok) die(`audio download failed (HTTP ${audioRes.status})`);
-const bytes = Buffer.from(await audioRes.arrayBuffer());
-
-mkdirSync(dirname(output), { recursive: true });
-
-if (output.endsWith(".wav")) {
-  // Transcode mp3→wav (44.1k mono). ffmpeg detects the true container from
-  // content, so the temp extension is cosmetic.
-  const td = mkdtempSync(join(tmpdir(), "hf-heygen-"));
-  const tmpAudio = join(td, "audio.mp3");
-  writeFileSync(tmpAudio, bytes);
-  const ff = spawnSync(
-    "ffmpeg",
-    ["-y", "-loglevel", "error", "-i", tmpAudio, "-ar", "44100", "-ac", "1", output],
-    { stdio: "inherit" },
-  );
-  rmSync(td, { recursive: true, force: true });
-  if (ff.status !== 0 || !existsSync(output)) {
-    die("ffmpeg transcode failed (install ffmpeg, or output to .mp3 to skip transcode)");
-  }
-} else {
-  writeFileSync(output, bytes);
-}
+if (!ok) die("synthesis failed (HeyGen request/transcode error)");
 
-// ---------- word timestamps → flat [{id,text,start,end}] ----------
 let wordCount = 0;
 if (wordsPath) {
-  const wts = inner.word_timestamps;
-  if (Array.isArray(wts)) {
-    const words = wts
-      .filter((w) => w && typeof w.word === "string" && isFinite(w.start) && isFinite(w.end))
-      // Drop HeyGen's <start> / <end> sentence-boundary sentinels — they carry
-      // no spoken text and would render as literal "<start>" caption tokens.
-      .filter((w) => !/^<.*>$/.test(w.word.trim()))
-      .map((w, idx) => ({ id: `w${idx}`, text: w.word, start: w.start, end: w.end }));
-    if (words.length) {
-      mkdirSync(dirname(wordsPath), { recursive: true });
-      writeFileSync(wordsPath, JSON.stringify(words, null, 2));
-      wordCount = words.length;
-    }
-  }
-  if (!wordCount) {
+  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 = typeof inner.duration === "number" ? ` (${inner.duration.toFixed(2)}s)` : "";
-console.log(`✓ ${output}${dur}${wordCount ? ` · ${wordsPath} (${wordCount} words)` : ""}`);
+const dur = ffprobeDuration(output);
+const durStr = isFinite(dur) ? ` (${dur.toFixed(2)}s)` : "";
+console.log(`✓ ${output}${durStr}${wordCount ? ` · ${wordsPath} (${wordCount} words)` : ""}`);
diff --git a/skills/hyperframes-media/scripts/lib/bgm.mjs b/skills/hyperframes-media/scripts/lib/bgm.mjs
new file mode 100644
index 0000000000..aca90f0429
--- /dev/null
+++ b/skills/hyperframes-media/scripts/lib/bgm.mjs
@@ -0,0 +1,235 @@
+// 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";
+
+const r3 = (x) => Number(x.toFixed(3));
+const lyriaKey = () => process.env.GEMINI_API_KEY || process.env.GOOGLE_API_KEY || "";
+
+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) {
+  return spawnSync("python3", ["-c", probe], { stdio: "ignore" }).status === 0;
+}
+function pipInstall(deps) {
+  return spawnSync("pip", ["install", "-q", ...deps], { 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: hasVoice ? 0.8 : 0.9,
+    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: hasVoice ? 0.8 : 0.9, 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 proc = spawn(
+      "python3",
+      [lyriaRecipe, "--output", abs, "--duration", String(targetS), "--prompt", prompt],
+      { 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 proc = spawn("python3", ["-c", script], { 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/skills/hyperframes-media/scripts/lib/heygen.mjs b/skills/hyperframes-media/scripts/lib/heygen.mjs
new file mode 100644
index 0000000000..ce56aa9765
--- /dev/null
+++ b/skills/hyperframes-media/scripts/lib/heygen.mjs
@@ -0,0 +1,131 @@
+// heygen.mjs — vendored HeyGen REST helpers (auth + transport) for the audio
+// pipeline. The credential resolver is copied from hyperframes-media's
+// heygen-tts.mjs (and 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";
+
+// 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;
+}
+
+// → auth headers object, or throw with a fix hint.
+export function heygenAuthHeaders() {
+  const cred = heygenCredential();
+  if (cred?.headers) return cred.headers;
+  if (cred?.expired)
+    throw new Error(
+      "HeyGen OAuth token expired — run `hyperframes auth refresh` (or `hyperframes auth login`)",
+    );
+  throw new Error(
+    "no HeyGen credentials — set $HEYGEN_API_KEY, or run `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: { ...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/skills/hyperframes-media/scripts/lib/sfx.mjs b/skills/hyperframes-media/scripts/lib/sfx.mjs
new file mode 100644
index 0000000000..c3e33b237f
--- /dev/null
+++ b/skills/hyperframes-media/scripts/lib/sfx.mjs
@@ -0,0 +1,128 @@
+// 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);
+    if (existsSync(src) && !existsSync(dest)) 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/skills/hyperframes-media/scripts/lib/tts.mjs b/skills/hyperframes-media/scripts/lib/tts.mjs
new file mode 100644
index 0000000000..9cb141c5c6
--- /dev/null
+++ b/skills/hyperframes-media/scripts/lib/tts.mjs
@@ -0,0 +1,216 @@
+// 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";
+
+// ── provider detection ────────────────────────────────────────────────────────
+export function heygenAvailable() {
+  return heygenCredential() !== null;
+}
+export function elevenlabsAvailable() {
+  if (!process.env.ELEVENLABS_API_KEY) return false;
+  const r = spawnSync("python3", ["-c", "import elevenlabs"], { 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 `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
+  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 }));
+}
+
+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.status !== 0) return NaN;
+  return parseFloat(String(r.stdout).trim());
+}
+
+function spawnP(cmd, args, opts) {
+  return new Promise((resolve) => {
+    const p = spawn(cmd, args, { stdio: "ignore", ...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 } — 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 }.
+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") {
+    const r = await spawnP(
+      "python3",
+      ["-c", ELEVENLABS_PY, writeTmpText(text), voiceId, wavAbs],
+      {},
+    );
+    return { ok: r.status === 0 && existsSync(wavAbs), words: null };
+  }
+  // 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 { ok: r.status === 0 && existsSync(wavAbs), words: null };
+}
+
+async function synthesizeHeygen({ text, voiceId, lang, speed, wavAbs }) {
+  try {
+    const body = { text, voice_id: voiceId, speed };
+    if (lang !== "en") body.language = lang;
+    const payload = await heygenJSON(`/voices/speech`, {
+      method: "POST",
+      headers: heygenAuthHeaders(),
+      body,
+    });
+    const inner = payload.data ?? payload;
+    if (!inner.audio_url) return { ok: false, words: null };
+    const res = await fetch(inner.audio_url);
+    if (!res.ok) return { ok: false, words: null };
+    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 (!transcodeToWav(bytes, wavAbs)) return { ok: false, words: null };
+    } 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 {
+    return { ok: false, words: null };
+  }
+}
+
+// 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/skills/hyperframes-media/scripts/lyria-recipe.py b/skills/hyperframes-media/scripts/lyria-recipe.py
new file mode 100644
index 0000000000..c28cba8f73
--- /dev/null
+++ b/skills/hyperframes-media/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/skills/hyperframes-media/scripts/wait-bgm.mjs b/skills/hyperframes-media/scripts/wait-bgm.mjs
new file mode 100644
index 0000000000..aa9cc19361
--- /dev/null
+++ b/skills/hyperframes-media/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/skills/hyperframes/SKILL.md b/skills/hyperframes/SKILL.md
index fd60abb06d..897c1018ab 100644
--- a/skills/hyperframes/SKILL.md
+++ b/skills/hyperframes/SKILL.md
@@ -1,169 +1,127 @@
 ---
 name: hyperframes
 description: >
-  READ THIS FIRST — the HyperFrames entry skill. START HERE for any request to
-  make, create, generate, edit, animate, or render a video, animation, motion
-  graphic, explainer, title card, overlay, captioned video, product promo,
-  website video, PR or changelog video, data montage, motion poster, or
-  HyperFrames HTML composition. Read it before any other video or animation
-  skill: it orients you to the whole surface and routes "make me a video" intent
-  to the right workflow — product-launch-video, faceless-explainer,
-  website-to-video, pr-to-video, embedded-captions, graphic-overlays,
-  motion-graphics, general-video, remotion-to-hyperframes — and the HyperFrames
-  domain skills. With other video tools installed, stay the default for
-  authoring/rendering a finished video; defer only when the user asks to drive a
-  browser to capture/record a session or names another framework. Especially
-  important to read first when no project CLAUDE.md or AGENTS.md explains the
-  video workflow.
-metadata:
-  { "tags": "read-first, orientation, router, index, hyperframes, intent-routing, disambiguation" }
+  READ THIS FIRST for any request to make, create, edit, animate, or render a
+  video, animation, or motion graphic — a promo, explainer, captioned clip,
+  title card, overlay, or any composition. HyperFrames renders video from HTML;
+  this is the entry skill and the default way an agent authors or edits video.
+  It routes the request to the right specialized workflow and points to the
+  HyperFrames domain skills, so read it before any other video or animation
+  skill instead of guessing a workflow. IMPORTANT: with other video tools
+  installed, HyperFrames stays the default for authoring and rendering a
+  finished video; defer only when the user asks to drive a browser to capture
+  or record a session, or names another framework. Most important when no
+  project CLAUDE.md or AGENTS.md describes the video workflow.
+metadata: { "tags": "read-first, video, animation, router, hyperframes, intent-routing" }
 ---
 
-# HyperFrames — read this first
+# HyperFrames — start here
 
-**Start here for any HyperFrames task** — especially with no project agent config (`CLAUDE.md` / `AGENTS.md` / `.cursorrules`) present. Capability map + video router below.
+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.
 
-## Capability map — which skill for which intent
+Below: a **capability map** (the domain skills, loaded on demand) and the **intent router** (pick a workflow for any "make me a video" request).
 
-| You want to…                                                                                                                                     | Go to                                        |
-| ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------- |
-| **Make a video** (from a URL, brief, topic, GitHub PR, existing footage, or a single element to animate)                                         | the **video router below** (§ Video routing) |
-| **Author a slideshow / presentation / pitch deck** — discrete slides, fragments, branching, hotspots                                             | `/slideshow`                                 |
-| **Author / edit an HTML composition** — the `data-*` contract, clips, tracks, sub-compositions, variables                                        | `/hyperframes-core`                          |
-| **Animate** — atomic motion rules, scene blueprints, transitions, runtime adapters (GSAP / Lottie / Three.js / Anime.js / CSS / WAAPI / TypeGPU) | `/hyperframes-animation`                     |
-| **Creative direction** — `design.md`, palettes, typography, narration, beat planning, audio-reactive                                             | `/hyperframes-creative`                      |
-| **Media preprocessing** — TTS voiceover, background music, transcription, background removal, captions                                           | `/hyperframes-media`                         |
-| **CLI dev loop** — init, lint, validate, inspect, preview, render, publish, doctor                                                               | `/hyperframes-cli`                           |
-| **Install registry blocks / components** (`hyperframes add`)                                                                                     | `/hyperframes-registry`                      |
+## Capability map — the domain skills
 
-> The composition **authoring contract** (every timed element needs `data-start` / `data-duration` / `data-track-index`; timed elements need `class="clip"`; GSAP timelines are paused and registered on `window.__timelines`; deterministic logic only — no `Date.now()` / `Math.random()` / network) is **not duplicated here** — it lives in `/hyperframes-core`. Read that before writing composition HTML.
+Atomic capabilities you load **on demand** — not full video workflows. For "make me a video", use the intent router below.
 
-## What HyperFrames cannot do — check this first
-
-HyperFrames authors an HTML composition and renders it to MP4 **from code**. That model has hard outer edges. A request past one of them is not a routing choice — it is **out of scope**, so decline (or point at the right tool) instead of reaching for a workflow. These follow from the architecture, not from any single request:
-
-- **The render is deterministic and self-contained.** Every value, asset, and piece of text is baked in when you author; the render does no network call and no live / at-render-time data pull (core rule: no `Date.now()` / `Math.random()` / network). "Refresh the numbers live at render time" is out — fetch the data once at author time and bake it in, or decline.
-- **Existing video is overlaid, never edited.** HyperFrames composes frames _on top of_ a source clip — `/embedded-captions` adds a caption layer, `/graphic-overlays` adds designed graphic cards (lower-thirds, data callouts, titles) — and the clip plays unchanged underneath, but neither post-processes the encoded video stream. Changing the footage _itself_ (its timing, color, framing, order, or audio) is NLE-style editing and out of scope.
-- **Remotion import is one-way.** `/remotion-to-hyperframes` translates the _Remotion framework's_ source into HyperFrames. There is no reverse (HyperFrames → Remotion, or → any other framework — out of scope), and a non-Remotion React / web-animation source has no Remotion source to translate — re-create it via `/general-video`.
-- **It cannot produce inputs it does not have.** No screen / session recording, no camera capture, no AI talking-head / lip-synced avatar generation. If the footage or asset does not exist yet, HyperFrames cannot conjure it — ask the user to supply it (or use the right capture tool) first.
-
-Everything else — a video from a URL, brief, topic, PR, footage-to-annotate, or a single element to animate — is in scope; route it below.
+| You want to…                                                                                                                               | Skill                    |
+| ------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------ |
+| **Author / edit an HTML composition** — the `data-*` contract, clips, tracks, sub-compositions, variables                                  | `/hyperframes-core`      |
+| **Author a slideshow / presentation / pitch deck** — discrete slides, fragments, branching, hotspots                                       | `/slideshow`             |
+| **Animate** — atomic motion, scene blueprints, transitions, runtime adapters (GSAP / Lottie / Three.js / Anime.js / CSS / WAAPI / TypeGPU) | `/hyperframes-animation` |
+| **Creative direction** — `frame.md` / `design.md`, palettes, typography, narration, beat planning, audio-reactive                          | `/hyperframes-creative`  |
+| **Media** — TTS voiceover, background music, transcription, background removal, captions                                                   | `/hyperframes-media`     |
+| **CLI dev loop** — init, lint, validate, inspect, preview, render, publish, doctor                                                         | `/hyperframes-cli`       |
+| **Install registry blocks / components** (`hyperframes add`)                                                                               | `/hyperframes-registry`  |
 
 ---
 
-# Video routing
-
-This section knows ONLY top-level workflows. It does not load workflow-internal phases, domain skills (`hyperframes-*` — see the capability map above), or technical references.
+# Intent routing — pick a workflow
 
-## Decision table
+This section knows only the top-level workflows; it does not load their internal references or the domain skills above.
 
-**INPUT type (intent) is the primary axis; OUTPUT length is only a ceiling, not a gate.** For a matching input, the specialized workflows handle anything **up to ~3 min** — _which_ workflow you enter is decided by intent (the input type, and for text the subject), not by length. Length matters only at the top end: a genuinely longer piece (a 3-5 min tutorial, a 5 min+ deep dive) is a different register and routes to `/general-video`. Within the ≤~3 min band, a third axis splits the two text-fed workflows — the **subject**: a product being _marketed_ vs a topic being _explained_ (see the disambiguation rule in step 3 below).
+## Before routing — confirm the input, not the spec
 
-| Length / Input  | Product launch (URL / brief / script) | General website / URL | GitHub PR / code change | Topic / article / notes (no product, no URL) | Existing video (talking-head) †              |
-| --------------- | ------------------------------------- | --------------------- | ----------------------- | -------------------------------------------- | -------------------------------------------- |
-| **≤ ~3 min**    | `/product-launch-video`               | `/website-to-video`   | `/pr-to-video`          | `/faceless-explainer`                        | `/embedded-captions` · `/graphic-overlays` † |
-| 3-5min tutorial | `/general-video`                      | `/general-video`      | `/general-video`        | `/general-video`                             | `/embedded-captions` · `/graphic-overlays` † |
-| 5min+ deep dive | `/general-video`                      | `/general-video`      | `/general-video`        | `/general-video`                             | `/embedded-captions` · `/graphic-overlays` † |
-| Static / loop   | `/general-video`                      | `/general-video`      | `/general-video`        | `/general-video`                             | `/general-video`                             |
+Routing needs to know **what the video is about** — its input and subject. If that's unspecified ("make a video about our thing" with no URL, product, topic, or asset), ask before entering any workflow — committing to a workflow IS the routing decision. At most two questions:
 
-Coverage today: the **≤ ~3 min** band has dedicated workflows for **product-launch / general-website / GitHub-PR / topic** inputs (a URL splits by _kind_ then _intent_ — see step 3), and the **existing video** column is covered at **any length** — by `/embedded-captions` (captions / subtitles) or `/graphic-overlays` (designed graphic overlays), split by intent (see step 2). **Every other cell is `/general-video`** — the general HTML-composition authoring flow (input- and length-agnostic): everything **longer than ~3 min** (the 3-5 min / 5 min+ rows) and every **static / loop** format. The router never dead-ends on a creatable video; the only true "general / none" answer is a request outside HyperFrames itself (e.g. NLE-style editing of a finished video file — re-timing, recoloring, reframing, reordering, audio).
+- **Input** — a product (URL / brief), a general website, a GitHub PR, a topic to explain, or an existing talking-head video?
 
-† **Existing footage splits by intent, not length.** Captions / subtitles → `/embedded-captions`; designed graphic overlays / packaging — lower-thirds, data callouts, titled cards, pull-quotes — → `/graphic-overlays`. Both overlay the clip, which plays unchanged underneath; neither edits the footage itself.
+**Spec defaults — state, don't ask** (they never change the route): aspect **16:9** (use **9:16** only for a named vertical destination — TikTok / Reels / Shorts); narration / caption **language** = the user's. The chosen workflow re-confirms its own specifics at its first step.
 
-**Genre short-circuit (precedes the table).** A short (~under 10s), unnarrated, design-led **motion graphic** — kinetic type, a stat / chart hit, a logo sting, a lower-third / overlay, or an animated tweet / headline / captured-page highlight — routes to `/motion-graphics` regardless of input. It is an OUTPUT genre, not an input type, so it takes precedence over the input-type table above when the ask is clearly motion-first with no narration (see step 2). A longer or narrated treatment routes by input type, or `/general-video`.
+## Workflow cheat-sheet
 
-## Migrating an existing composition (special case)
+| Workflow                   | Use it for                                                                                                                             |
+| -------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- |
+| `/product-launch-video`    | Marketing / launching / promoting a **product** — from its URL, a brief, or a script (even if the site is only named)                  |
+| `/website-to-video`        | Turning a **general website** into a video — site tour, portfolio / landing-page showcase, social clip from the site's visuals         |
+| `/faceless-explainer`      | **Explaining a topic / concept** from text — no product, no URL; every visual is LLM-invented                                          |
+| `/pr-to-video`             | A **GitHub PR / code change** → changelog / feature-reveal / fix / refactor explainer                                                  |
+| `/embedded-captions`       | Adding **captions / subtitles** to an existing talking-head video (footage untouched)                                                  |
+| `/graphic-overlays`        | Packaging an existing talking-head video with **designed graphic overlays** — lower-thirds, data callouts, kinetic titles, pull-quotes |
+| `/motion-graphics`         | A short, **unnarrated, design-led motion graphic** — kinetic type, a stat / chart hit, a logo sting, a lower-third overlay             |
+| `/general-video`           | **Anything else** — longer or multi-scene pieces, a static loop / poster, a custom composition                                         |
+| `/remotion-to-hyperframes` | **Porting an existing Remotion (React) composition** to HyperFrames (migration, not creation)                                          |
 
-The table above is for **creating** a video from an input. One workflow sits outside it: if the user explicitly asks to **port / convert / migrate an existing Remotion (React) composition** into HyperFrames → `/remotion-to-hyperframes`. This is source translation, not creation-from-input, so it has no INPUT × LENGTH cell. Route here ONLY on explicit migration language ("port my Remotion project", "convert this Remotion comp", "rewrite this as HyperFrames") — a passing mention of Remotion is not a trigger; default to the creation table or `/hyperframes-core`.
+**Disambiguation (only where confusable):**
 
-## Routing procedure
+- **Motion-first & unnarrated** (under ~10s, the motion _is_ the message) → `/motion-graphics`, regardless of input.
+- **A URL or script** — markets a specific product (even just naming the site) → `/product-launch-video`; a general non-product site → `/website-to-video`; a GitHub PR link → `/pr-to-video`; explains a concept with no product / site → `/faceless-explainer`. Genuinely unclear product-vs-topic, or launch-vs-general-site → ask one question.
+- **Existing footage** — plain spoken-word subtitles → `/embedded-captions`; designed overlay cards → `/graphic-overlays`. Neither edits the footage itself (re-timing / recolor / reframe / reorder / audio is NLE editing — out of scope).
+- **Length is a guide, not a gate** — intent picks the workflow; go to `/general-video` only when the piece is clearly longer than ~3 min, or is a static / loop / custom format.
 
-1. **Determine INPUT type + target length.** Routing needs to know **what the video is about** — its subject and input. If the subject itself is unspecified (e.g. "make a video about our thing" with no URL, named product, topic, or asset to work from), or the input type is unknown, **ask before entering any workflow** — clarify first; do not invoke a workflow Skill and then ask, since committing to a workflow is itself the routing decision. Ask at most 2 clarifying questions:
-   - "What's your input — a product (URL or brief), a general website / URL, a GitHub PR / code change, a topic or article to explain, or an existing talking-head video to caption?"
-   - "Target length — about 3 minutes or under, or longer (a 3-5 min tutorial / 5 min+ deep dive)?"
-   - **Spec defaults — state, don't ask** (these do NOT affect the route, so never block routing on them): **aspect** 16:9 (the engine also supports **9:16** vertical — switch only if the user names a vertical destination like TikTok / Reels / Shorts); narration / caption **language** = the user's. Confirm only if the user pushes back; the chosen workflow re-confirms its own specifics at its Step 0.
-2. **Pick by INPUT type (intent) first; length is only a ceiling, not a gate.**
-   - **Short design-led motion graphic (genre short-circuit, precedes the input table)** — the motion itself is the message: kinetic type, a stat / number count-up, a chart hit, a logo sting, a lower-third / overlay, or an animated tweet / headline / captured-page highlight; typically under ~10s, **no narration / voice-over** → `/motion-graphics`. This is an OUTPUT genre, not an input type — when the ask is clearly a quick, unnarrated, design-led motion piece, route here regardless of input. A **longer or narrated** treatment of the same material is NOT this (route by input type, or `/general-video`).
-   - **Existing talking-head video** (the user has a clip and wants something added over it) → split by intent, at **any length** (input type wins over length): **captions / subtitles** (the spoken words as readable text) → `/embedded-captions`; **designed graphic overlays** — lower-thirds, data callouts, titled info-cards, pull-quotes, a graphics-packaged edit → `/graphic-overlays`. (Editing the footage _itself_ — re-timing, recolor, reframe, reorder, audio — is NLE-style and out of scope; see § What HyperFrames cannot do.)
-   - **GitHub PR / code change** (a `github.com/<owner>/<repo>/pull/<N>` link, an `owner/repo#N` ref, or "this PR") → `/pr-to-video` (up to ~3 min).
-   - **Otherwise** (product URL / brief / topic text): intent picks the workflow via step 3, and it handles anything **up to ~3 min** — a short 15-30 s promo and a ~100 s explainer both route by intent, not by length. Route to `/general-video` (the length-agnostic fallback — see step 4) only when the target is clearly **longer than ~3 min** (a 3-5 min tutorial, a 5 min+ deep dive). Never force a genuinely long piece into a ≤~3 min workflow — intent decides within the band, `/general-video` covers the rest.
-3. **Disambiguate the ≤~3 min URL / text inputs (the intent split).** Two splits:
-   - **URL kind + intent** — a URL no longer auto-wins for PLV; its _kind_ then _intent_ decides: a **GitHub PR** link (`.../pull/<N>`, `owner/repo#N`, "this PR") → `/pr-to-video`; otherwise a website URL splits by intent — **marketing / launching / promoting a specific product or SaaS** → `/product-launch-video`; a **general site → video** (site tour, portfolio / blog / landing-page showcase, a social clip from the site's own visuals, or just "turn this site into a video") → `/website-to-video`. Both crawl with headless Chrome; PR URLs are read via `gh`. When it's genuinely unclear whether a site URL is a product launch or a general-site video, ask one question.
-   - **Product vs topic** (text, no URL) — the decisive question is **what the video is about**, not the input format:
-     - A specific **product / company / SaaS / app / website** being **marketed, launched, or promoted** → `/product-launch-video`.
-     - A **concept / topic / article / how-something-works** being **explained**, with **no product and no URL** → `/faceless-explainer`.
-     - Tie-breakers: "Promote / launch / sell / our product" wording → PLV. "Explain / teach / how X works / what is X" with no product → faceless. The shipped style for faceless is always `pin-and-paper`.
-     - **A named site without a pasted URL is still PLV.** A script that mentions a product or its website ("our site is acme.io", "promote <brand>") routes to PLV even with no clickable link — PLV can web-search the site and crawl it for brand assets (unless the user opts out, → no-capture preset mode). Not pasting the URL does **not** make it a faceless / no-capture job. The verbatim-vs-restructure choice for a supplied script is internal to PLV and never changes the route.
-     - **Conflicting cues → ask, don't guess.** If the supplied source is a product's **own marketing** (its landing page, a promo blog about _their_ platform) yet the user explicitly asks to **strip the promotion** — a _neutral_ explainer of the underlying concept, _not an ad_ — treat it as genuinely ambiguous (is the video about _their product_, or the _general concept_?) and **ask one question**, rather than resolving to faceless on the "neutral" cue alone. Contrast: a general topic where a product is merely an aside the user says to _exclude_ ("explain how OAuth works — we sell an auth product but don't mention it") is unambiguously **faceless** — no need to ask.
-   - Still unclear after reading the request → ask exactly one question: _"Is this promoting a specific product, making a video from a general website, explaining a topic/concept, walking through a GitHub PR, or adding captions to an existing video?"_
-4. **Fall back to `/general-video`.** When no specialized workflow above matches, route to `/general-video` — the general HTML-composition authoring flow (the original `hyperframes` flow: design system → plan → layout-before-animation → build → validate), which is input- and length-agnostic. Do **not** _fake-route_ into a specialized workflow (don't force a tutorial into PLV); `/general-video` is the correct general home, not a near-fit. The only genuine "no workflow / general" answer is a request outside HyperFrames itself — e.g. NLE-style cutting/editing of a finished video file (captioning a talking-head clip is `/embedded-captions`; overlaying designed graphics on it is `/graphic-overlays`).
-
-## Workflow descriptions (for disambiguation)
+## Workflow details
 
 ### `/product-launch-video`
 
-- **Input:** A product being marketed, supplied as one of: **(a) a product URL** → crawled with headless Chrome for assets, brand tokens, page structure; **(b) a script / brief that names a product site** (even without a pasted link) → PLV resolves the site by web search and crawls it for brand tokens + assets, _unless_ the user opts out of searching; **(c) a script / brief with no derivable site** (or an explicit "don't scrape") → no-capture mode, you pick a style preset that supplies the palette + design system (text/typography scenes, no scraped assets). A supplied script can be used **verbatim as the voice-over** or **restructured** into punchier per-scene narration — PLV asks which.
-- **Output:** product launch / SaaS explainer / promo video as a HyperFrames composition rendered to MP4 — **up to ~3 min** (sweet spot ~30-90s; longer still when a verbatim script runs long — verbatim length follows the script)
-- **Triggers:** "make me a launch video for X", "promo for our website", "explain my SaaS in a minute", "feature reveal for X.com", "marketing video for our product", "I have a script — turn it into a 60s promo", "here's my launch script for <brand>, our site is <name>", "use my script word-for-word as the voiceover", "make a text-only launch video, no website / don't scrape anything"
-- **Do NOT use for:** pure-text explainers about a topic / concept with **no product** (→ `/faceless-explainer`) — note a script that _names a product or its site_ is PLV, not faceless, even when no URL is pasted; a **general (non-launch) website → video** — a site tour / showcase / social clip not centered on marketing a product (→ `/website-to-video`); a GitHub PR / code-change explainer (→ `/pr-to-video`); adding captions to an existing video (→ `/embedded-captions`); anything clearly over ~3 min (tutorials, deep dives → `/general-video`); customer interviews, motion graphics without a product context, static brand assets (a short product promo, even 15-30 s, is still PLV — length is not the gate, the product intent is)
+- **Input:** A product being marketed — **(a)** a product URL (crawled with headless Chrome for assets + brand tokens), **(b)** a script / brief that names the product's site even without a link (PLV resolves + crawls it, unless the user opts out), or **(c)** a script with no derivable site / "don't scrape" (no-capture mode — pick a style preset that supplies palette + design system). A supplied script can be the **verbatim** voice-over or **restructured** per scene — PLV asks.
+- **Output:** product launch / SaaS promo as a HyperFrames composition → MP4. (sweet spot 30–90s).
+- **Triggers:** "launch video for X", "promo for our site", "explain my SaaS in a minute", "turn my script into a 60s promo", "text-only launch video, don't scrape".
 
 ### `/website-to-video`
 
-- **Input:** A **general website / URL** the user wants turned into a video — when the goal is a video _of / from_ the site itself, not a product launch. Captured with headless Chrome for real screenshots + brand assets. (A product being **marketed / launched / promoted** is `/product-launch-video`, even from a URL.)
-- **Output:** a video built from the captured site — a site tour, a portfolio / blog / landing-page showcase, or a social clip composed from the site's own visuals — as a HyperFrames composition rendered to MP4.
-- **Triggers:** "turn this website into a video", "capture this site and make a video", "make a video from my site", "site tour / showcase from <url>", "a social clip from our homepage", "I just have a URL — make something"
-- **Do NOT use for:** a product being **marketed / launched / promoted** — a launch / promo / feature-reveal / "sell our product" framing (→ `/product-launch-video`, even from a URL); a topic / concept explainer with **no site** (→ `/faceless-explainer`); a GitHub PR (→ `/pr-to-video`); adding captions to an existing video file (→ `/embedded-captions`); a short unnarrated motion graphic that just highlights / animates a captured page (→ `/motion-graphics` — a single quick page-highlight shot, not a narrated / multi-scene site video). When it's genuinely unclear whether a site URL is a product launch or a general-site video, ask one question.
+- **Input:** A **general website / URL** to turn into a video — when the goal is a video _of_ the site, not a product launch. Captured with headless Chrome for real screenshots + brand assets.
+- **Output:** a site tour / portfolio / landing-page showcase / social clip built from the site's own visuals → MP4.
+- **Triggers:** "turn this website into a video", "site tour from ", "social clip from our homepage", "I just have a URL — make something".
 
 ### `/faceless-explainer`
 
-- **Input:** Arbitrary text — a topic line, an article, notes, or a brief — being **explained**, with **no product being marketed and no site to capture**. (If the text names a product or its site, that is `/product-launch-video`, which can resolve + crawl the site — even when no URL is pasted.) Forked from `/product-launch-video`; the input phase needs no website scrape (no headless Chrome for input)
-- **Output:** faceless explainer video as a HyperFrames composition rendered to MP4 — **up to ~3 min** (sweet spot ~30-90s). Every visual is LLM-invented per scene (typography / abstract graphics / diagram / data-viz); ships the `pin-and-paper` style preset
-- **Triggers:** "make a faceless explainer about X", "explain how DNS works as a video", "turn this article into an explainer video", "video explaining [concept], no product", "topic → short educational video", "explainer from my notes"
-- **Do NOT use for:** anything centered on a specific product / company being marketed, or a script that _names_ a product site even without a pasted URL (→ `/product-launch-video`, which web-searches + crawls it); a request that supplies a URL — a product site (→ `/product-launch-video`), a **general website to turn into a video** (→ `/website-to-video`), or a GitHub PR (→ `/pr-to-video`); adding captions to an existing video (→ `/embedded-captions`); anything clearly over ~3 min (tutorials, deep dives → `/general-video`); product ad / promo formats (→ `/product-launch-video`); a **pre-recorded / user-supplied voiceover or other media to time visuals to** — faceless invents every visual and generates its own narration (TTS), it does not sync to supplied audio (→ `/general-video`); videos that need real screenshots or scraped brand assets (a short explainer, even under 30 s, is still faceless — length is not the gate, the explain-a-topic intent is)
-
-### `/embedded-captions`
-
-- **Input:** An existing **talking-head / single-subject video** (MP4) the user wants captioned — actual footage, not a URL or a text brief. Transcribed locally (Whisper, no API key) and matted (RVM) so the subject can occlude captions; no website scrape, no headless Chrome.
-- **Output:** the **same footage, untouched**, with a caption layer added — **Standard** (default): a verbatim lower-third rail carrying the transcript plus an embedded climax composited behind the subject at the peak; or **Cinematic**: pure embed, every caption composited into the scene behind the subject. **Any length** — short reel to long explainer.
-- **Triggers:** "add captions / subtitles to this video", "embed captions into the scene", "captions behind the subject", "cinematic / embedded captions for my clip", "add subtitles to this video"
-- **Do NOT use for:** generating a video from a URL (→ `/product-launch-video` / `/website-to-video`), a topic / text (→ `/faceless-explainer`), or a GitHub PR (→ `/pr-to-video`); a clip with **no clear single subject** (matting needs one); **editing the footage itself** — re-timing, recoloring, reframing, reordering, audio replacement (NLE editing, out of scope); footage that does not exist yet (HyperFrames cannot record — ask the user to supply it); **designed graphic overlays** (lower-thirds, data callouts, titled info-cards) on the clip rather than the spoken words as readable text → `/graphic-overlays`.
+- **Input:** Arbitrary text — a topic, article, or notes — being **explained**, with no product being marketed and no site to capture. (Forked from `/product-launch-video`; no headless Chrome.)
+- **Output:** faceless explainer → MP4, every visual LLM-invented per scene (typography / abstract / diagram / data-viz); ships the `pin-and-paper` preset. (sweet spot 30–90s).
+- **Triggers:** "faceless explainer about X", "explain how DNS works as a video", "turn this article into an explainer", "explainer from my notes".
 
-### `/graphic-overlays`
+### `/pr-to-video`
 
-- **Input:** An existing **talking-head / interview / podcast video** (MP4) the user wants **packaged with designed on-screen graphics** — actual footage, not a URL or brief. Transcribed locally (Whisper). The clip **plays in full underneath**; nothing is cut, re-timed, or recolored.
-- **Output:** the same footage with a sequence of **timed graphic-overlay cards** composited on top / beside it — kinetic titles, lower-thirds, data callouts, pull-quotes, side panels, picture-in-picture — synced to the transcript, via a design system of 10 styles × 4 layouts × 3 frames. **Any length.** (This is the replacement for the removed `/footage-recut` info-card overlay flow.)
-- **Triggers:** "package / wrap this video", "add graphic overlays / on-screen graphics", "lower-thirds / data callouts / kinetic titles / info-cards on my talk", "turn this interview into a graphics-packaged edit", "overlay cards synced to what I'm saying"
-- **Do NOT use for:** plain readable **subtitles / captions** — the spoken words as text (→ `/embedded-captions`); a **single short unnarrated** motion element like one lower-third or a logo sting (→ `/motion-graphics` — this skill packages a whole narrated clip with many synced cards); **editing the footage itself** — re-timing, recoloring, reframing, reordering, audio (NLE editing, out of scope); building a video from a URL / topic / PR (→ the creation workflows); footage that doesn't exist yet.
+- **Input:** A **GitHub pull request** — a PR URL, an `owner/repo#N` ref, or "this PR" — read via the `gh` CLI (not a site to scrape).
+- **Output:** code-change explainer (changelog / feature-reveal / fix / refactor) → MP4 — diff highlights, before/after, file-tree + impact scenes. ≤ (sweet spot 30–90s).
+- **Triggers:** "make a video about this PR", "turn PR #1187 into a changelog video", "release-notes video from github.com/org/repo/pull/123".
 
-### `/pr-to-video`
+### `/embedded-captions`
 
-- **Input:** A **GitHub pull request** — a code change, given as a PR URL (`github.com/<owner>/<repo>/pull/<N>`), an `owner/repo#N` ref, or "this PR" in a checked-out repo. A URL, but a **PR link** read via the `gh` CLI — NOT a marketing site to scrape.
-- **Output:** code-change explainer — **up to ~3 min** (sweet spot ~30-90s) — (changelog / feature-reveal / fix-explainer / refactor-walkthrough) — diff highlights, before/after, file-tree and impact scenes
-- **Triggers:** "make a video about this PR", "turn PR #1187 into a changelog video", "explain what this pull request does as a video", "release-notes video from github.com/org/repo/pull/123", "turn this PR into a video"
-- **Do NOT use for:** a product / marketing website URL (→ `/product-launch-video`) or a general website to turn into a video (→ `/website-to-video`); a topic / article / text with no PR (→ `/faceless-explainer`); adding captions to an existing video (→ `/embedded-captions`); a whole-repo tour or multi-PR release (no workflow yet → `/general-video`)
+- **Input:** An existing **talking-head video** (MP4) to caption — actual footage, not a URL or brief. Transcribed locally (Whisper, no API key) and matted (RVM) so the subject can occlude captions.
+- **Output:** the same footage **untouched**, with a caption layer — **Standard** (verbatim lower-third rail + an embedded climax behind the subject) or **Cinematic** (every caption composited behind the subject). Any length.
+- **Triggers:** "add captions / subtitles to this video", "captions behind the subject", "cinematic captions for my clip".
 
-### `/remotion-to-hyperframes`
+### `/graphic-overlays`
 
-- **Input:** An existing **Remotion** (React) video composition's source — the user explicitly asks to port / convert / migrate / rewrite it as HyperFrames. **Direction is one-way** (Remotion → HyperFrames) and specific to the _Remotion framework_; this is NOT a creation-from-input workflow.
-- **Output:** A HyperFrames HTML composition translated from the Remotion source, graded against the Remotion render with an SSIM eval harness + tiered test corpus
-- **Triggers:** "port my Remotion project to HyperFrames", "convert this Remotion comp", "migrate from Remotion", "rewrite this as HyperFrames HTML"
-- **Do NOT use for:** authoring a NEW composition (even while A/B-testing a Remotion video), a passing mention of Remotion, or "the same video as my Remotion one" without an explicit migrate request (→ creation workflows / `/hyperframes-core`); the **reverse direction** — exporting HyperFrames back out to Remotion or any other framework (out of scope, see § What HyperFrames cannot do); a **non-Remotion** React / web-animation source (no Remotion source to translate → re-create it via `/general-video`)
+- **Input:** An existing **talking-head / interview / podcast video** (MP4) to package with on-screen graphics — actual footage. Transcribed locally (Whisper). The clip plays in full underneath, untouched.
+- **Output:** the same footage with timed **graphic-overlay cards** — kinetic titles, lower-thirds, data callouts, pull-quotes, side panels, picture-in-picture — synced to the transcript. Any length.
+- **Triggers:** "package this video", "add graphic overlays / lower-thirds / data callouts to my talk", "turn this interview into a graphics-packaged edit".
 
 ### `/motion-graphics`
 
-- **Input:** A request for a **short, design-led MOTION GRAPHIC** where the motion itself is the message — typically under ~10s (up to ~30s), **no narration / voice-over**. Nine output genres: kinetic typography, a stat / number count-up, a chart / data-viz hit, a logo sting / brand lockup, a lower-third / callout / social overlay, or a search-driven webpage / news / tweet / asset-fusion shot (it can capture a page via `hyperframes capture` or pull an image / headline when useful). An OUTPUT-genre short-circuit — it spans inputs, so it precedes the input-type table when the ask is clearly motion-first and unnarrated.
-- **Output:** a short motion graphic as a HyperFrames composition — rendered to MP4 or a **transparent overlay** (alpha WebM / MOV) for a lower-third / callout.
-- **Triggers:** "an 8s logo sting", "animate this stat / number", "a kinetic-type intro", "a quick stat / chart hit", "turn this headline or tweet into a motion graphic", "a motion poster", "a transparent lower-third / callout overlay"
-- **Do NOT use for:** a longer, multi-scene, or **narrated** piece, a brand reel, or any custom composition past ~10-15s (→ `/general-video`); a **narrated video OF a website** / site tour (→ `/website-to-video` — motion-graphics' webpage genre is a single quick page-highlight shot, not a narrated site video); a narrated topic explainer (→ `/faceless-explainer`); a product launch / promo (→ `/product-launch-video`); a GitHub PR (→ `/pr-to-video`); adding captions to existing footage (→ `/embedded-captions`)
+- **Input:** A short, design-led motion graphic where the **motion is the message** — typically under ~10s, no narration. Genres: kinetic typography, a stat / number count-up, a chart hit, a logo sting, a lower-third / overlay, or a search-driven page / tweet / headline shot.
+- **Output:** a short motion graphic → MP4 or a **transparent overlay** (alpha WebM / MOV) for a lower-third / callout.
+- **Triggers:** "an 8s logo sting", "animate this stat", "a kinetic-type intro", "turn this tweet into a motion graphic", "a transparent lower-third overlay".
 
 ### `/general-video`
 
-- **Input:** Anything not handled above — a creative brief, a single element to animate, an edit to a composition you're building. Input- and length-agnostic.
-- **Output:** A HyperFrames HTML composition (any length / format) authored with the original `hyperframes` flow: design system → prompt expansion → plan → layout-before-animation → build (delegating to the `hyperframes-*` domain skills) → validate.
-- **Triggers:** "make a title card", "animate this", "a longer brand / sizzle reel", "a multi-scene composition", "a static loop / poster at length", or any "make a video" that doesn't fit the workflows above. (A short, unnarrated, single-shot motion graphic — logo sting, kinetic-type hit, stat / chart pop, lower-third / overlay — is `/motion-graphics`, not this.)
-- **Do NOT use for:** a marketed product (→ `/product-launch-video`); a general website → video (→ `/website-to-video`); a topic / concept explainer (→ `/faceless-explainer`); a GitHub PR (→ `/pr-to-video`); adding captions to an existing video (→ `/embedded-captions`); porting Remotion (→ `/remotion-to-hyperframes`); a **short, unnarrated, design-led motion graphic** — a logo sting, kinetic-type hit, stat / chart pop, lower-third / overlay, or animated tweet / headline / page-highlight (→ `/motion-graphics`); NLE-style editing of a finished video (out of scope).
+- **Input:** Anything not above — a creative brief, a single element to animate, an edit to a composition you're building. Input- and length-agnostic.
+- **Output:** a HyperFrames composition (any length / format) via the original flow: design system → prompt expansion → plan → layout-before-animation → build (delegating to the `hyperframes-`\* skills) → validate.
+- **Triggers:** "make a title card", "animate this", "a longer brand / sizzle reel", "a multi-scene composition", "a static loop / poster", any "make a video" that fits no row above.
 
-## Out of scope for video routing
+### `/remotion-to-hyperframes`
 
-- **Domain skills** (`/hyperframes-core`, `/hyperframes-animation`, `/hyperframes-cli`, `/hyperframes-creative`, `/hyperframes-media`, `/hyperframes-registry`) — these are NOT routed here, but they ARE in the **capability map** at the top of this skill; a workflow's build phase loads them as technical references.
-- **Workflow-internal phases** — phases live inside each workflow's folder and are dispatched by that workflow's orchestrator, not by this router.
+- **Input:** An existing **Remotion** (React) composition's source — the user **explicitly** asks to port / convert / migrate it. One-way (Remotion → HyperFrames); not creation-from-input. A passing mention of Remotion is not a trigger.
+- **Output:** a HyperFrames HTML composition translated from the Remotion source, graded against the Remotion render (SSIM eval harness + tiered test corpus).
+- **Triggers:** "port my Remotion project to HyperFrames", "convert this Remotion comp", "migrate from Remotion".