diff --git a/url-to-frame-md/POLISH-LOG.md b/url-to-frame-md/POLISH-LOG.md
new file mode 100644
index 0000000000..aa354c1e36
--- /dev/null
+++ b/url-to-frame-md/POLISH-LOG.md
@@ -0,0 +1,425 @@
+# Showcase polish log
+
+Reviewer-driven iteration on the URL → frame.md → showcase pipeline. Each cycle = one
+verified increment. Canonical toolkit home: experiment-framework PR #41000 — push these
+source changes there when reviewed.
+
+## Cycle 12 — SVG density on bare beats + avatar frames
+
+Reviewer + user feedback: frames 1-3 were bare (wordmark / big text / lone number) — unrealistic for a video-agent — and there were no avatar frames.
+
+- cover -> SVG system emblem; claim -> oversized SVG quote-mark; stat -> real SVG area chart (grid + area + line + points), not a lone number.
+- New **avatar-support** (presenter as ground + supporting bar-viz) and **avatar-overlay** (PiP bug + lower-third over a stat beat), from a bundled brand-agnostic portrait, accent-tinted per site.
+- Sheet now 12 frames. All 15 verify+render green.
+
+## Cycle 1 — ground inversion, font poison, swatch legibility
+
+Reviewers (opus/linear/snowflake/elevenlabs, comparing `showcase.png` vs
+`screenshots/contact-sheet-1.jpg` vs `frame.md`) flagged three systemic showcase bugs.
+All three fixed and verified across all 11 sites (verify-green; visual spot-check on
+stripe/elevenlabs/snowflake=light, opus/linear=dark).
+
+1. **Italic font poisoning** (`lib/fonts.mjs`). Linear ships `InterVariable-Regular.woff2`
+   whose _content is italic_ (manifest `style: italic`) plus the true upright
+   `InterVariable.woff2`. Two-layer fix:
+   - skip italic files on read (`isItalicFile`: manifest style or /italic|oblique/ name);
+   - **stage with an unconditional copy** — the old `if (!existsSync)` guard let a stale
+     poisoned clean-named file from an earlier run survive forever (staging writes into
+     the same dir it reads). Re-copying the correctly-chosen source each run is idempotent
+     for good files and self-heals poisoned slots.
+     → Linear display/hero now upright Inter.
+
+2. **Gallery ground inversion** (`render-showcase.mjs`). The doc chrome was hardcoded
+   `#0e0e0e`, so light-first brands (ElevenLabs cream, Snowflake/Stripe white) rendered as
+   a dark board. Now derived from brand luminance: `darkGallery = lumOf(canvas) < 128`;
+   light brands get `shade(canvas,-8%)` ground + dark doc text; dark brands keep `#0e0e0e`.
+   Section heads, rails, frame shadows, and the Chrome `--default-background-color` all
+   follow the same polarity.
+
+3. **Invisible swatches + muddy labels** (`render-showcase.mjs`). Every `.sw .chip` now
+   gets a luminance-aware inset hairline (dark-on-dark / white-on-white chips were
+   vanishing). Muted label opacities bumped .5→.68/.7 (`.sm code`, `.tmeta span`,
+   `.cnote`, rail attrs).
+
+## Cycle 2 — gradient/mesh capture (engine) + accent proportion + offline re-extract harness
+
+All 5 reviewers (stripe/elevenlabs/opus/heygen/snowflake) converged: the #1 essence loss is the
+site's signature **gradient/mesh background** (flat spec-sheet vs. brand color wash), and #2 is the
+**accent overstatement** (giant stat numbers in accent). Both fixed end-to-end; all 11 verify-green.
+
+1. **Engine gradient capture** (`designStyleExtractor.ts` + `types.ts`). `getStyles` now records
+   gradient `backgroundImage` (url()/none dropped) and `backdropFilter`; button/card/nav keep those
+   in their dedup keys so a gradient/frosted variant survives. New page-level collector scans large
+   elements **+ `::before`/`::after` pseudo-elements** (hero orbs are often pseudo) and returns the
+   top washes ranked by **chroma-weighted area** (a vivid brand wash beats a bigger neutral scrim).
+   Result: Stripe's signature `radial-gradient(circle,#7F7DFC,#F44BCC 33%,#E5EDF5 66%)` mesh is
+   captured and now grounds the cover — instantly reads as Stripe.
+
+2. **Offline re-extraction harness** (`reextract-design.mjs`). Dependency-free Chrome DevTools
+   Protocol client (Node 22 global `WebSocket`/`fetch`) that re-runs the _actual_ engine script
+   (sourced from `designStyleExtractor.ts`, single source of truth) against the saved
+   `extracted/page.html` — validates engine changes across all 11 captures with **no live network**.
+   **MERGE-ONLY**: it writes back only `backgrounds`. Hard lesson: an early version overwrote the
+   whole `design-styles.json`, and offline typography _degrades_ (the saved "stable HTML" lacks some
+   runtime styling, so unstyled elements inherit headless Chrome's default face → "PingFang SC" /
+   stray non-brand fonts leaked into 3 sites and failed verify). Gradients read from inline
+   `background-image` and ARE offline-faithful; typography is not. (Verified: stripe offline
+   typography is byte-identical to its live backup — the leak only hits roles the saved CSS didn't
+   style.)
+
+3. **Generator** (`build-frame-from-capture.mjs`). Emits a `gradients:` token block (verbatim,
+   CSS-valid, trailing `, none` layer stripped). New font guard: any typography font **not in the
+   captured brand set** is normalized to the brand primary (was only catching CSS generics) — fixes
+   the offline fallback leak _and_ is a genuine robustness win (a role in a system font isn't
+   brand-meaningful). Keeps frame.md fonts ⊆ captured, so verify's L2 font gate holds.
+
+4. **Renderer** (`render-showcase.mjs`). Paints the cover ground with the most chromatic captured
+   gradient; adds a "Backgrounds" proof strip (shows exactly which washes were captured); stat
+   numbers now render in **ink** (accent reserved for eyebrow + one emphasized word), per all 5
+   reviewers. `run-all.sh` = canonical refresh (re-extract → generate → render → verify).
+
+Honest limits this cycle: ElevenLabs/HeyGen hero _auras_ are canvas/WebGL (or below the area
+floor), not CSS gradients — their captured washes are faint edge-scrims/glass fills, so no dramatic
+cover ground (correct, not forced). Opus/DoorDash are genuinely flat (0 gradients). `backdrop-filter`
+came back empty because the frosted panels aren't in the card/nav selectors (see backlog).
+
+## Cycle 3 — primary-CTA identity + card elevation + alpha-drop fix
+
+All 5 reviewers' #1 gap was an **inverted primary CTA**: the generator picked the wrong button as
+`button-primary`. No cycle-2 regressions (gradient cover + accent dial-back confirmed good). All 11
+verify-green; CTA fixed on 5/6 flagged sites (visually confirmed).
+
+Root causes + fixes:
+
+1. **Primary CTA chosen by "closest to accent"** — fails for brands whose CTA is a high-contrast
+   _neutral_ pill (ElevenLabs black, Opus white, HeyGen dark) rather than the accent hue.
+   → Generator: `fillProminence` ranks by `max(accent-closeness, canvas-contrast)` among solid fills,
+   with a pill-radius tie-break and gradient fills scored top. `radiusRef`/dedup now key on pill-vs-
+   square so a pill and a same-fill square stay distinct (Opus's white pill no longer collapses).
+
+2. **Primary CTA lived in the nav/header** (`Sign up`, `Start for free`) — the engine dropped all
+   `<nav>` descendants. → Engine: keep nav elements that are _filled_ (solid OR gradient), still
+   dropping plain text links. Widened button sampling (10→16, keep 6 variants).
+
+3. **Alpha-drop bug** (`rgba(…,0)` → `#000000`) turned every transparent wrapper into a phantom
+   black button/card and dropped real CTAs as bg==text. → Engine `rgbToHex` returns `transparent`
+   for zero-alpha; the generator already treats a transparent ground as no-fill (canvas). This is
+   foundational (also unblocks translucent/glass fills later). Fixed ElevenLabs/Opus CTA capture.
+
+4. **Cards read flat** — shadow tokens captured but the representative `card` often had `shadow:none`.
+   → Generator: sort captured cards shadow-first; if the lead card is flat but the site has a strong
+   global elevation shadow (blur ≥ 16px), graft it. Renderer: a card with no captured border/shadow
+   gets a faint inset hairline so dark-on-dark / white-on-white surfaces read (spec unchanged).
+
+5. **Faithful component fills** — `groundToken` now emits a literal hex when the fill is far from any
+   palette role (a `#0D1117` near-black pill or `#FFFFFF` pill keeps its true fill, not a greyer role).
+
+Harness is now **preserve-typography, take-offline-for-CSS-fields** (buttons/cards/nav/shadows/
+backgrounds are CSS-deterministic offline; only the typography ramp degrades offline, so it's kept).
+
+Honest limit: **Snowflake's blue pill** uses a gradient on an inner element/pseudo the button
+selector doesn't reach, so its CTA still renders as a plain surface. Generator + renderer now fully
+support gradient-filled CTA tokens (works the moment the gradient is captured on the button) — the
+remaining gap is engine selector/pseudo reach. Queued below.
+
+## Cycle 4 — frosted glass (backdrop-filter) + synthesized accent-pill CTA
+
+Reviewers' remaining HIGH items: glass/backdrop-filter (HeyGen hero prompt box, Stripe floating
+chrome) and Snowflake's still-missing blue pill. Both shipped; all 11 verify-green; visually
+confirmed. Verified `backdrop-filter` DOES rasterize under headless Chrome `--disable-gpu` (tested on
+a synthetic page) before investing.
+
+1. **Glass capture (engine).** New page-level collector scans elements with `backdrop-filter: blur`,
+   records the RAW translucent fill (rgba/gradient — alpha intact, since `rgbToHex` would drop it) +
+   blur + border + radius + shadow, ranked by area → `glass[]`. Captured: HeyGen `blur(24px)
+saturate(4)`, Stripe `blur(12px)`. (Bug caught mid-cycle: the collector ran but `glass` was
+   missing from the extractor's return object — proven via a synthetic backdrop-filter page, which is
+   also a good regression fixture.)
+
+2. **Glass material (generator + renderer).** Generator emits a `glass-panel` token (verbatim
+   translucent fill + `backdropFilter` + border + radius + shadow). Renderer applies
+   `backdrop-filter` in component CSS and adds a **Materials** section that floats the glass panel
+   over a colored ground (a translucent fill on flat white is invisible — it needs something to
+   frost over). HeyGen/Stripe showcases now show a real frosted-glass panel.
+
+3. **Synthesized accent-pill CTA (generator).** When extraction finds no usable filled CTA (all
+   captured buttons are transparent text-links — e.g. Snowflake's blue pill lives on a child the
+   selector misses), the generator now synthesizes the brand's real CTA pattern: **accent as a filled
+   pill** (accent + pill radius are captured atoms; only their composition is inferred). Light text
+   on accent picks the lighter palette neutral. Snowflake now renders its signature electric-blue
+   pill. All 5 reviewers had explicitly endorsed this floor.
+
+Offline-harness note reaffirmed: glass reads straight from CSS on visible elements, so it IS captured
+offline where those elements render (HeyGen/Stripe). Elements that are purely JS-gated (some auroras)
+still need a live capture.
+
+## Cycle 5 — chromatic heading colors (systemic) + broadened review coverage
+
+Reviewed the LESS-examined captures (livekit/descript/bmw/kuse) + an aura check on elevenlabs, to
+find systemic gaps rather than re-polish the same 5 sites. Top systemic bug (Descript, confirmed in
+code): **a brand-inked heading color was snapped to the generic `ink` token** — Descript's maroon
+`#390A1A` display/heading/hero rendered near-black, killing its editorial maroon-type signature.
+
+Fix (generator, offline-verifiable, affects every site): `typeColorToken` preserves a heading's
+captured color as a **literal hex** when it's a genuine brand chroma, gated by two guards so it can't
+misfire:
+
+- **Legibility** — the color must contrast the canvas (Δlum ≥ 50); a dark-on-dark mis-sample (Opus's
+  `#24235E` input-placeholder color) falls back to `ink`.
+- **Corroboration** — a distinct chromatic color is kept only if ≥2 heading roles share it, so a
+  consistent ramp (Descript maroon ×3) survives while a lone outlier (one stray green `#81B81A` h1
+  among Stripe's navy headings) is rejected as a mis-sample.
+  Renderer resolves a type color as a CSS var (role key) OR a literal hex. Result: Descript now renders
+  its maroon headings; Stripe/Opus unchanged (correctly neutral). All 11 verify-green.
+
+## Cycle 12 — asset frames (element + background) + centered motion-graphic beats
+
+User direction: a real video-agent frame almost always carries an ASSET (a photo as a masked
+element or a full-bleed background) — pure motion-graphics is the exception — and pure-drawn beats
+are **centered** (one focal, symmetric, negative space), NOT PPT (left-aligned title + editorial
+rails + content columns). Our composed sheet was all drawn + all wearing editorial left/right rails
+(kicker/ref top, caption + LIVE dot bottom) → read as a slide deck, not a moving frame.
+
+Renderer (`render-showcase.mjs`):
+
+- **Two asset frames.** `assetElFrame` — a circular-masked hero (accent ring + dashed orbit) anchoring
+  an off-center split with a kicker + oversized headline + two icon-pill badges (mirrors a real
+  video-agent scene). `assetBgFrame` — full-bleed hero under a darken+accent scrim with centered type.
+  Uses a general, brand-agnostic bundled demo asset (`assets/demo-hero.jpg`, a neutral abstract 3D
+  render) inlined as a data-URI → self-contained + deterministic; the accent ring/scrim are
+  brand-derived so each site tints it (amazon yellow, anthropic terracotta, …). Graceful fallback to
+  a drawn beat if the asset is missing.
+- **Centered beats + de-PPT'd chrome.** `cxFrame` dropped the editorial top/bottom rails; the frame
+  is now just a centered focal (the outer cell caption does the labeling). `.cx-main` centers content
+  (align-items + text-align). Cover / claim / stat / comparison / flow all read as centered
+  motion-graphic beats.
+- Sheet is now 7 composed + focal = 8 cells (4 rows; `SHEET_CELLS` + the row-budget from cycle-11's
+  Codex fix keep the PNG un-clipped). Portrait uses the full-bleed asset (fits 9:16) not the split.
+
+Verified: all 15 verify+render green; spot-checked amazon (navy+yellow ring) + anthropic (cream +
+terracotta ring, serif centered beats) — matches the reference video-agent frame the user shared.
+
+## Cycle 11 — box-shadows captured by computed style, not class-name selectors
+
+Reviewers (stripe + vercel, HIGH) both hit `shadows: []`: the sampler selected elements by class-name
+substring (`[class*='card']`, …), which utility/obfuscated class names never match, so all card
+elevation was lost and the renderer faked a heavy off-brand drop shadow. Fix (ENGINE,
+`designStyleExtractor.ts`): sweep a broad structural set of visible, card-sized boxes and collect
+their real computed `box-shadow`; the shadow recurring on the most boxes is the elevation signature
+(skips tiny + full-bleed wrappers). Live re-capture: Stripe `[]`→5 (incl. the signature
+`rgba(50,50,93,0.12) 0 16px 32px`), Vercel `[]`→3. Shipped as hyperframes PR #1883. Backlog:
+`cards: []` shares the same class-selector root cause; ElevenLabs glass/aura live on
+pseudo-elements/canvas; Snowflake CTA picks text-links over the filled pill.
+
+## Cycle 10 — data-driven grounds (dark footer navys) + universal icons + 大气 frames
+
+User feedback on the amazon showcase: (1) "footer 有两个灰色你都没拿到" — Amazon's footer
+navys never surfaced; (2) the composed frames are "太简单…不够大气" (too simple / not grand);
+(3) "图标感觉不通用" (the hand-drawn icons feel domain-specific). Root cause + one increment:
+
+1. **Grounds were structurally light-only.** The single `surface` role required
+   `|Δlum(canvas)| < 40`, so any dark/tinted ground was impossible to hold. Amazon's `#232F3E`
+   footer navy is the **3rd-largest painted area on the whole page** (maxArea 2.18M) yet was
+   dropped. Fix (generator): emit a ranked **`grounds:`** block — the top distinct background
+   colors by `maxArea` (real painted area), darks included, each with a best-contrast `on`-color
+   and a luminance-classified `kind` (light/mid/dark/canvas) — plus a first-class
+   **`surface-contrast`** role (the largest _neutral_ ground on the opposite tonal side of the
+   canvas: a dark footer under a light brand, a light inversion panel under a dark brand).
+   Now: amazon `surface-contrast #232F3E`, descript `#110A0D` wine-black, linear `#FFFFFF`.
+2. **Renderer rotation is now DATA-driven.** `groundList` reads `grounds:` (real grounds incl.
+   dark) then appends accent + ink as vivid stops, so a **dark full-bleed frame lands in every
+   sheet** — the thing that makes a composed frame read as authored/大气 rather than a flat light
+   card. Each frame uses the ground's authoritative `on`-color. Falls back to the role-guess for
+   older frame.md.
+3. **Universal icon vocabulary.** Replaced the domain-specific `database` glyph and expanded to a
+   neutral set (inbox / gear / check / grid / bolt / globe / spark + up/down/layers/target/arrow).
+   Flow is now `input → process → output` (inbox→gear→check); comparison is a domain-free
+   amplify/reduce. No icon implies a domain the brand isn't in.
+
+**Bug caught in-cycle:** on a dark brand (linear) `surface-contrast` first grabbed `#E4F222` —
+Linear's chartreuse _accent-2_ — because any far-luminance color qualified. Added a neutrality
+guard (`chroma < 45` + exclude accent/accent-2). Now correctly picks the white inversion panel.
+
+**Follow-up bug (regression from this cycle's `surface-contrast`): white-on-white button.** User:
+"linear button radius … perform worse on button." Linear's real "Sign up" is a white **pill** with
+**dark** text (radius 9999px was actually correct). But the extractor captured its label color as
+`#E2E4E7` (near-white) on a `#FFFFFF` fill. Before this cycle, `#FFFFFF` snapped to the `ink` role
+(no white role existed) so bg-role == text-role and the `visible` filter DROPPED it as invisible.
+Adding `surface-contrast: #FFFFFF` gave `#FFFFFF` its own role (≠ `ink`), so the broken button now
+passed `visible` and rendered white-on-white. Root fix (general invariant, not a patch): a solid-fill
+button's text MUST contrast its own fill — `legibleTextToken()` snaps captured text to its role, but
+if that fails contrast (Δlum < 55) against the fill, falls back to the best-contrast reading role
+(ink/canvas). Now linear = white pill + dark `canvas` text = the real Sign up. Accent/dark-fill CTAs
+(amazon yellow+ink, stripe violet+canvas, opus ink+surface) already contrast, so untouched.
+Gradient fills keep captured text (their contrast story is their own).
+
+Verified: regen + verify + render all **15 sites green**; visual spot-check amazon (navy+yellow,
+now on-brand), linear (dark, swatch fixed, button fixed), descript (wine editorial + serif). Backlog unchanged:
+pulling **real site copy** into the SVG labels (still generic "99.99%/Amplify/Reduce") is the next
+biggest tell of template — separate increment.
+
+## Cycle 9 — 3 fresh sites + radius-sentinel fix + serif-reclaim precision
+
+Tested generality on THREE unseen, aesthetically-diverse sites (captured live, re-extracted offline
+with the current engine): **vercel** (minimal black/white/blue, Geist), **clerk** (violet
+gradient/glass), **anthropic** (warm cream editorial, serif). All generated + verify-green + on-brand
+with no per-site tuning — Geist/Anthropic-Serif render correctly, accents right, gradients/glass
+captured, giant CTA + composed focal frame all work. The toolkit now covers 14 sites.
+
+Two fixes, both from the fresh reviews:
+
+1. **Radius sentinel (systemic).** Chrome reports an effectively-infinite border-radius (a pill on an
+   auto-width element) as `33554432px` (2²⁵). Vercel's CTA came out `rounded: "3.35544e+07px 6px 6px
+3.35544e+07px"` — a garbage number. `radiusRef` now normalizes any component ≥ 2000px to `9999px`,
+   so it reads as a clean pill/D-shape.
+2. **Serif-reclaim over-rotation (regression fix).** Cycle 7's reclaim fired whenever
+   `display === sansFont`, which is ALSO true when the display genuinely IS the brand sans — so it
+   wrongly serif-ified real-sans heroes (**Linear** Inter → Tiempos, **Anthropic** Sans → Serif).
+   Now it only fires when the display role's _captured_ font was a GENERIC fallback (Kuse's
+   `ui-sans-serif`). Linear → Inter, Anthropic → Anthropic Sans, Kuse → Instrument Serif (still).
+   `displayFamily` now follows the (possibly-reclaimed) display role, not `serifFace` unconditionally.
+
+New backlog from the fresh reviews (low/med): glass collector ranks by area so it can pick a weak
+`blur(1px)` panel over a strong one (Clerk) — rank by blur strength; a weak white CTA carrying a
+near-invisible gradient overlay dodges the synth-accent path (Clerk); synth-coral CTA vs the site's
+real dark button (Anthropic); Vercel wants a dark-ground frame + a mono/pixel specimen; accent-hex
+disagreement between tokens and roles (Vercel #0070F3 vs #0072F5).
+
+## Cycle 8 — font-family canonicalization (the ramp font must be a real @font-face)
+
+Reviewer flagged BMW/Descript display type rendering as a generic fallback. Root cause (BMW,
+systemic): the site's computed display font is a web ALIAS (`bmwTypeNextWeb`) while the font FILES
+register under a different family (`BMWTypeNext`) — both land in `tokens.fonts` as separate brand
+fonts, the type ramp picked the alias, and the alias got no `@font-face`, so the CSS matched nothing
+and fell back to Arial. (Descript actually loaded fine — its "fallback" was faux-bold of a
+weight-400-only face; names already matched.)
+
+Fix (generator + lib/fonts): **stage fonts up front and snap every ramp/component font to a family
+that actually renders.**
+
+- `stageFonts` now returns `{ block, families }` — the set of `@font-face` family names it emitted
+  (the ONLY names that render). Called once, early; the block is appended at the end as before.
+- `fontFor` resolves a captured/computed name to a **staged** family: exact normalized match, else a
+  containment match (`bmwtypenextweb` ⊃ `bmwtypenext` → `BMWTypeNext`), else the brand sans. So the
+  emitted `font-family` always matches an `@font-face`.
+- `sansFont`/`monoFont`/`serifFace` are now chosen from the staged families (a fallback that renders,
+  not a phantom). Serif reclaim only fires for a serif that's actually staged.
+
+Result: BMW now renders BMWTypeNext (thin grotesque), Descript its gamuthDisplay serif, Kuse/Stripe
+unchanged. All 11 verify-green. Known limit: DoorDash's font files were never downloaded during
+capture (`assets/fonts` empty) — nothing can render there without a re-capture (capture-level gap).
+
+## Cycle 7 — faithful hero: serif reclaim + honest CTA (fill + geometry)
+
+Broadened review surfaced three convergent systemic gaps (kuse + doordash); all generator-side,
+offline-verifiable, all 11 verify-green.
+
+1. **Orphaned serif hero (kuse, HIGH systemic).** A brand serif is the display/hero voice, but the
+   capture sampled a generic fallback for kuse's h1 (`ui-sans-serif` → snapped to poppins) while
+   Instrument Serif shipped as a loaded-but-unused brand font. Added `isSerifFont` (name heuristic,
+   `!sans` guarded); when a brand serif exists and the display role fell back to the body sans, it's
+   reclaimed for the display + hero ramp. Kuse now renders its editorial serif hero (+ the
+   single-orange-accent-word-in-serif claim). Affects any serif-hero + sans-body brand.
+2. **A low-contrast canvas pill kept as primary (kuse, HIGH).** The weak-primary check exempted any
+   pill — so kuse's white "Sign up" pill (white on cream, no color hierarchy) was kept as the CTA.
+   Removed the pill exemption: weakness is judged purely on canvas-contrast, so a white-on-cream pill
+   is weak → synthesizes the accent (orange) pill, while Opus's white-on-DARK pill stays (high
+   contrast).
+3. **Synth CTA fabricated a full pill for square brands (doordash, HIGH).** The accent-pill fallback
+   forced `9999px`. Now the synth radius uses the captured button radius when it has one (Kuse's pill
+   survives), else a scale pill only if the brand actually carries one, else a **moderate 8px** —
+   never a fabricated full pill. DoorDash (empty radius scale, ~square buttons) now gets a red
+   near-square CTA instead of a wrong-brand pill.
+
+Minor backlog from this round (low): focal-frame soft-shadow is a touch heavy for aggressively-flat
+brands (DoorDash `card.shadow:none`); some captures don't emit `@font-face` so the brand display face
+falls back to sans in-render (font-staging gap); kuse focal eyebrow (orange on cream) reads faint.
+
+## Cycle 6 — Daphne integration: compose components + ground + material into one frame
+
+Studied experiment-framework's **Daphne** agent + its **FrameMd skill** (the LLM path that turns
+design.md → frame.md). Two ideas we lacked, adopted here: **frame-scale component variants** and
+**"treatments compose components"** (a gradient is a Ground, glass is a material — never a loose
+swatch). Prompted by the user: our standalone gradient/glass swatch strips "didn't make sense" with
+the composition for the downstream video agent.
+
+1. **Frame-scale CTA variant (generator).** Emit `button-primary-giant` — button-primary's sacred
+   atoms (fill / radius / border / shadow) re-scaled to video legibility (cqw padding + a hero-ramp
+   `fontSize`). A captured 32px web pill is a speck at 1920×1080; this is what a hero/plate frame
+   composes.
+2. **Emoji-font leak fix (generator, systemic).** `isIconFont` now also matches emoji/symbol faces —
+   HeyGen's CTA had leaked `NotoEmoji` as its typography; it's now correctly SF Pro Display. Emoji
+   fonts are never brand text.
+3. **Composed focal frame (renderer).** The 4th composition is now a REAL frame: the captured
+   **gradient as the Ground**, a floating **glass panel (or card) as the material**, and the
+   **giant CTA** on top — background + material + component unified. Falls back gracefully: no
+   gradient → a synthesized accent→(accent-2/lightened)→canvas aurora; no glass → the elevated card.
+   The panel gets a **canvas-tinted frosted fill + elevation shadow + hairline** so it reads as a
+   lifted frosted card and stays legible on any ground (reviewers caught a tone-on-tone dissolve when
+   the captured glass fill matched the gradient hue — fixed universally). Backdrop-blur is kept from
+   the captured glass token.
+4. **Removed the standalone Backgrounds / Materials swatch strips** — their content now lives _inside_
+   the focal frame, where it's used. Reviewers: net improvement, "no longer orphaned swatch rows;
+   materials demonstrate themselves in-context." Frame-composition materials (giant CTA, glass) are
+   filtered out of the token-mirror Components row.
+
+Verified across light-glass (HeyGen), light-mesh (Stripe), and no-gradient (Opus); all 11
+verify-green, no regressions in cover/claim/stat/Components.
+
+**Honest ground (opus-reviewer follow-up).** First cut fabricated a full-bleed accent→canvas aurora
+for any brand — the reviewer flagged this as off-brand for Opus (a dark/flat, screenshot-forward
+brand with no gradient). Fixed so the focal ground is never invented:
+
+- real captured wash → use it (Stripe mesh);
+- brand genuinely uses glass but no wash → a **restrained accent GLOW** (radial, canvas stays
+  dominant) so the frost has color to read over without a fake hero (Opus = dark canvas + purple
+  corner glow, matching its real hero; HeyGen = white + cyan glow);
+- neither → a flat brand ground, card floats on its own shadow.
+  The panel gets the canvas-tinted frost only on a colored ground; on a flat ground it keeps the card's
+  own surface fill (a canvas-frost would vanish against canvas).
+
+Minor backlog from reviews (low): the token-mirror Components row under-renders a ghost `button-3`
+(bare text, no outline) and the `nav-bar` mirror (empty solid box); the giant CTA could read a touch
+larger in the focal panel.
+
+## Done (cycles 1–4)
+
+Gradient/mesh backgrounds · accent proportion · gallery-ground inversion · italic-font poison ·
+primary-CTA identity (prominence re-rank + nav-CTA capture + alpha-drop fix + synthesized accent-pill
+floor) · card elevation · frosted-glass (backdrop-filter) capture + material + render. All 11
+verify-green throughout.
+
+## Backlog — remaining essence gaps (deeper, need care)
+
+- **Serif display font orphaned (kuse; systemic for serif-hero + sans-body sites).** The serif
+  (Instrument Serif) is loaded but no type role uses it — display/heading map to the sans body
+  (poppins), losing the serif-hero signature. The DOM sample picked the sans (font-inheritance / a
+  non-hero h1). Fix: if a captured brand font is a serif/display face used by _no_ role, assign it to
+  the display/hero role. (Generator, needs care to avoid mis-assigning.)
+- **Shader/WebGL hero motifs (livekit HIGH, elevenlabs/heygen auras).** `shaders.json` (8 GLSL shaders
+  on livekit; orb/particle/wireframe) is captured but never surfaced. And a repeating-line
+  `linear-gradient` (livekit's 70px grid over `#070707`) is mis-labeled a gradient wash. Options:
+  surface a `motifs:` flag ("hero uses animated shader") + classify grid patterns distinctly; full
+  rasterization is a separate large effort.
+- **Persistent accent CTA / accent starvation (kuse, snowflake, livekit).** Brands anchor the page
+  with a persistent accent pill (kuse orange "Try free", livekit cyan "Start building"). The synth
+  floor gives an accent pill when capture fails, but when a WHITE bordered pill IS captured it's kept
+  over the real accent/charcoal CTA. Prefer accent/high-contrast fills over canvas-colored pills even
+  when the canvas pill has a border.
+- **Canvas/WebGL aura capture (ElevenLabs/HeyGen).** Their signature hero _glow_ is a
+  `<canvas>`/shader (mask-gradients in CSS are just masks; the color orbs are shader) — CSS
+  gradient/backdrop capture can't reach it. So the frosted-glass panel has no aurora to frost over.
+  Separate effort (surface the shader or rasterize the glow layer during capture).
+- **Snowflake blue-gradient CTA (higher-fidelity than the synth floor).** The real pill fill is a
+  blue _gradient_ on an inner span/pseudo the button selector misses; we now synthesize a flat-accent
+  pill (good floor). To get the exact gradient, broaden button capture to inspect a filled
+  descendant / `::before`.
+- **Stripe gradient as ambient field, not object.** Reviewer: the mesh should bathe the whole frame
+  (feathered, full-bleed) rather than read as a contained radial blob on white. Renderer scale/blend
+  tuning for the cover ground.
+- **Live re-capture path.** The offline harness can't see purely JS-gated DOM (some CTAs, auroras).
+  A thin live-capture mode (real `hyperframes capture`, network) would close the residual gaps for
+  JS-heavy apps — but is fragile per-site (auth walls, anti-bot); keep offline as the default.
+- **Robustness:** `isStaged` clean-name regex can false-exclude a legit source weight named like
+  `Family-Bold.woff2`; consider staging into a separate `staged/` dir instead of writing back into
+  `assets/fonts`.
diff --git a/url-to-frame-md/assets/demo-avatar.jpg b/url-to-frame-md/assets/demo-avatar.jpg
new file mode 100644
index 0000000000..2734ea5c7f
Binary files /dev/null and b/url-to-frame-md/assets/demo-avatar.jpg differ
diff --git a/url-to-frame-md/assets/demo-hero.jpg b/url-to-frame-md/assets/demo-hero.jpg
new file mode 100644
index 0000000000..7388b5c6fb
Binary files /dev/null and b/url-to-frame-md/assets/demo-hero.jpg differ
diff --git a/url-to-frame-md/build-frame-from-capture.mjs b/url-to-frame-md/build-frame-from-capture.mjs
new file mode 100644
index 0000000000..c0dd7d9cdc
--- /dev/null
+++ b/url-to-frame-md/build-frame-from-capture.mjs
@@ -0,0 +1,897 @@
+#!/usr/bin/env node
+// build-frame-from-capture.mjs — capture folder → frame.md (faithful: every hex/size from the capture).
+//   node build-frame-from-capture.mjs --capture ./stripe-capture [--out <path>] [--frame-width 1920]
+
+import { existsSync, readFileSync, writeFileSync } from "node:fs";
+import { dirname, join, resolve } from "node:path";
+import {
+  brandRolesFromStats,
+  chroma,
+  lum,
+  pickAccent,
+  semanticColors,
+  UA_DEFAULT_COLORS,
+  vividAccents,
+} from "./lib/tokens.mjs";
+import { colorDist, isHex, toHex, upper } from "./lib/color.mjs";
+import { isIconFont, isMonoFont, isSerifFont, stageFonts } from "./lib/fonts.mjs";
+
+const argv = process.argv.slice(2);
+const flag = (name, def) => {
+  const i = argv.indexOf(`--${name}`);
+  return i >= 0 && i + 1 < argv.length ? argv[i + 1] : def;
+};
+const die = (m) => {
+  console.error(`✗ build-frame-from-capture: ${m}`);
+  process.exit(1);
+};
+
+const captureDir = resolve(flag("capture", "."));
+const frameWidth = parseInt(flag("frame-width", "1920"), 10);
+const outPath = resolve(flag("out", join(captureDir, "frame.md")));
+
+const tokensPath = join(captureDir, "extracted/tokens.json");
+const stylesPath = join(captureDir, "extracted/design-styles.json");
+if (!existsSync(tokensPath))
+  die(`no tokens.json at ${tokensPath} — is --capture a hyperframes capture folder?`);
+const readJSON = (p) => {
+  try {
+    return JSON.parse(readFileSync(p, "utf8"));
+  } catch (e) {
+    return die(`${p}: invalid JSON — ${e.message}`);
+  }
+};
+const tokens = readJSON(tokensPath);
+const styles = existsSync(stylesPath) ? readJSON(stylesPath) : {};
+
+// ── helpers (color parsing + comparison live in lib/color.mjs) ───────────────
+const px = (v) => {
+  const m = /^(-?[\d.]+)px$/.exec(String(v).trim());
+  return m ? parseFloat(m[1]) : null;
+};
+const toCqw = (pxVal) => Math.round((pxVal * 10000) / frameWidth) / 100; // 2 decimals
+const round = (n, d = 2) => Math.round(n * 10 ** d) / 10 ** d;
+
+// ── 1. brand palette → semantic color keys ───────────────────────────────────
+const paletteColors = (tokens.colors ?? [])
+  .map((c) => (typeof c === "string" ? c : (c?.hex ?? c?.value ?? "")))
+  .map((c) => toHex(c)) // normalize rgb()/hsl()/oklch()/#rgb → #RRGGBB (don't drop non-hex captures)
+  .filter(Boolean);
+const colorStats = Array.isArray(tokens.colorStats)
+  ? tokens.colorStats.filter((s) => isHex(s?.hex))
+  : [];
+
+if (!paletteColors.length) die("tokens.json has no usable hex colors");
+
+// roles by FUNCTION from colorStats (canvas = largest bg area, accent = recurring chromatic,
+// ink = dominant contrasting text); fall back to luminance/chroma when stats are absent.
+const roles =
+  brandRolesFromStats(colorStats, paletteColors) ??
+  (() => {
+    const clean = paletteColors.filter((h) => !UA_DEFAULT_COLORS.has(upper(h)));
+    const s = semanticColors(clean.map((h, i) => [`c${i}`, h]));
+    return {
+      ink: s.ink,
+      canvas: s.canvas,
+      accent: pickAccent(colorStats, clean, [s.ink, s.canvas]) ?? s.accent,
+      accent2: s.accent2,
+    };
+  })();
+if (!roles.canvas || !roles.ink || !roles.accent)
+  die("could not resolve canvas/ink/accent from palette");
+
+// secondary ink: the most-used TEXT color that is neutral-ish and distinct from ink/canvas/accent
+const used = new Set([upper(roles.canvas), upper(roles.ink), upper(roles.accent)]);
+const inkMuted = colorStats
+  .filter((s) => !used.has(upper(s.hex)) && (s.textCount || 0) > 0 && chroma(s.hex) < 60)
+  .sort((a, b) => (b.textCount || 0) - (a.textCount || 0))[0]?.hex;
+if (inkMuted) used.add(upper(inkMuted));
+
+// surface: a light background that is NOT the canvas (cards / sections sit on it)
+const canvasLum = lum(roles.canvas) ?? 255;
+const surface = colorStats
+  .filter(
+    (s) =>
+      !used.has(upper(s.hex)) &&
+      (s.bgCount || 0) > 0 &&
+      Math.abs((lum(s.hex) ?? 0) - canvasLum) < 40 &&
+      chroma(s.hex) < 40,
+  )
+  .sort((a, b) => (b.bgCount || 0) - (a.bgCount || 0))[0]?.hex;
+if (surface) used.add(upper(surface));
+
+// accent-2 only if it's a REAL second accent: distinct from accent, genuinely chromatic,
+// and not a near-canvas tint (a pale peach at chroma ~46 next to white is not an accent).
+const accent2cand =
+  roles.accent2 && upper(roles.accent2) !== upper(roles.accent) ? roles.accent2 : null;
+const accent2 =
+  accent2cand && chroma(accent2cand) > 50 && Math.abs((lum(accent2cand) ?? 0) - canvasLum) > 40
+    ? accent2cand
+    : null;
+
+// grounds: real page background blocks ranked by painted area (maxArea) — includes dark/tinted bands the light `surface` role can't hold.
+const canvasMaxArea = colorStats.reduce((m, s) => Math.max(m, s.maxArea || 0), 0) || 1;
+const onColorFor = (bg) => {
+  const bl = lum(bg) ?? 0;
+  return [roles.ink, roles.canvas, "#FFFFFF", "#111111"]
+    .filter(isHex)
+    .map((c) => [c, Math.abs((lum(c) ?? 0) - bl)])
+    .sort((a, b) => b[1] - a[1])[0][0];
+};
+// classify a ground by its OWN luminance (not sign-relative to canvas, which mislabels a
+// near-white grey as "dark"): light / mid / dark — the renderer keys chrome + emphasis off this.
+const groundKind = (bg) => {
+  if (upper(bg) === upper(roles.canvas)) return "canvas";
+  const l = lum(bg) ?? 0;
+  return l > 170 ? "light" : l < 90 ? "dark" : "mid";
+};
+const grounds = [];
+const seenGround = [];
+for (const s of [...colorStats].sort((a, b) => (b.maxArea || 0) - (a.maxArea || 0))) {
+  if (!isHex(s.hex)) continue;
+  if ((s.bgCount || 0) <= 0 && (s.areaBg || 0) <= 0) continue; // must actually paint a background
+  if ((s.maxArea || 0) < canvasMaxArea * 0.02) continue; // drop tiny chips (<2% of the biggest ground)
+  if (upper(s.hex) === upper(roles.accent)) continue; // accent is its own role, rotated in separately
+  if (seenGround.some((g) => colorDist(g, s.hex) < 24)) continue; // dedup near-identical grounds
+  seenGround.push(s.hex);
+  grounds.push({ bg: s.hex, on: onColorFor(s.hex), kind: groundKind(s.hex) });
+  if (grounds.length >= 5) break;
+}
+if (!grounds.some((g) => upper(g.bg) === upper(roles.canvas)))
+  grounds.unshift({ bg: roles.canvas, on: onColorFor(roles.canvas), kind: "canvas" });
+
+// surface-contrast: the largest-area neutral ground on the opposite tonal side of the canvas (a dark footer under a light page).
+const accentSet = new Set([upper(roles.accent), accent2 && upper(accent2)].filter(Boolean));
+const surfaceDark = colorStats
+  .filter(
+    (s) =>
+      isHex(s.hex) &&
+      !used.has(upper(s.hex)) &&
+      !accentSet.has(upper(s.hex)) && // it's a NEUTRAL ground, never a brand accent
+      upper(s.hex) !== upper(roles.ink) &&
+      chroma(s.hex) < 45 && // saturated blocks are accents/brand colors, not a surface band
+      (s.bgCount || 0) > 0 &&
+      Math.abs((lum(s.hex) ?? 0) - canvasLum) > 60,
+  )
+  .sort((a, b) => (b.maxArea || 0) - (a.maxArea || 0))[0]?.hex;
+if (surfaceDark) used.add(upper(surfaceDark));
+
+// loud hue-distinct secondary brand hues from the full palette (usage-stats accent2 misses these).
+const vivid = vividAccents(paletteColors, {
+  exclude: [roles.canvas, roles.ink, surface, surfaceDark, inkMuted, roles.accent].filter(Boolean),
+  hueAnchors: [roles.accent].filter(Boolean),
+  max: 2,
+});
+// accent-2/3 = vivid hues first; stats accent2 only as a palette-member fallback (else strays leak in).
+const paletteSet = new Set(paletteColors.map(upper));
+const accent2InPalette = accent2 && paletteSet.has(upper(accent2)) ? accent2 : null;
+const secondaryAccents = [];
+for (const h of [...vivid, accent2InPalette].filter(Boolean)) {
+  if (!secondaryAccents.some((x) => upper(x) === upper(h)) && upper(h) !== upper(roles.accent))
+    secondaryAccents.push(h);
+}
+
+// ordered semantic palette — keys are stable role names (frame.md key naming is free).
+const palette = [
+  ["canvas", roles.canvas],
+  surface && ["surface", surface],
+  surfaceDark && ["surface-contrast", surfaceDark],
+  ["ink", roles.ink],
+  inkMuted && ["ink-muted", inkMuted],
+  ["accent", roles.accent],
+  secondaryAccents[0] && ["accent-2", secondaryAccents[0]],
+  secondaryAccents[1] && ["accent-3", secondaryAccents[1]],
+].filter(Boolean);
+
+const paletteUpper = palette.map(([k, v]) => [k, upper(v)]);
+// hex → nearest semantic key (used by typography/components so emitted values are always palette colors)
+const keyFor = (hex) => {
+  if (!isHex(hex)) return "ink";
+  const u = upper(hex);
+  const exact = paletteUpper.find(([, v]) => v === u);
+  if (exact) return exact[0];
+  const [k, d] = palette.map(([k, v]) => [k, colorDist(hex, v)]).sort((a, b) => a[1] - b[1])[0];
+  // no palette color is close (an outlier sample color, e.g. a one-off hero highlight) →
+  // snap to ink rather than forcing a misleading nearest-match.
+  return d <= 80 ? k : "ink";
+};
+// type-ramp color → role key, or a literal chromatic hex (brand-inked heading) kept only if corroborated by another heading role.
+const headColors = (styles.typography ?? [])
+  .filter((t) => /display|head|hero|title/i.test(String(t.role || "")))
+  .map((t) => toHex(t.color))
+  .filter(Boolean);
+const corroborated = (hex) => headColors.filter((h) => colorDist(h, hex) <= 40).length >= 2;
+const typeColorToken = (raw) => {
+  const hex = toHex(raw);
+  if (!hex) return "ink";
+  // a heading must read on the canvas: if the captured color barely contrasts it (a dark-on-dark
+  // mis-sample like an input placeholder), fall back to the safe reading ink.
+  if (Math.abs((lum(hex) ?? 0) - (lum(roles.canvas) ?? 255)) < 50) return "ink";
+  const exact = paletteUpper.find(([, v]) => v === hex);
+  if (exact) return exact[0];
+  const [k, d] = palette.map(([key, v]) => [key, colorDist(hex, v)]).sort((a, b) => a[1] - b[1])[0];
+  if (d <= 40) return k; // effectively a palette role
+  return chroma(hex) > 40 && corroborated(hex) ? hex : "ink"; // trusted brand chroma → keep; else ink
+};
+
+// ── 2. fonts (isIconFont / isMonoFont / stageFonts live in lib/fonts.mjs) ─────
+const brandFonts = (tokens.fonts ?? [])
+  .map((f) => (typeof f === "string" ? f : (f?.family ?? f?.name ?? "")))
+  .map((f) => String(f).split(",")[0].replace(/['"]/g, "").trim())
+  .filter(Boolean)
+  .filter((f) => !isIconFont(f));
+const brandWeights = [
+  ...new Set(
+    (tokens.fonts ?? [])
+      .filter((f) => f && typeof f === "object" && !isIconFont(f.family ?? f.name ?? ""))
+      .flatMap((f) => (Array.isArray(f.weights) ? f.weights : []))
+      .map((w) => parseInt(w, 10))
+      .filter(Number.isFinite),
+  ),
+].sort((a, b) => a - b);
+// Stage brand fonts into assets/fonts (idempotent) so emitted font-family names always match a real @font-face.
+const outFontsDir = join(dirname(outPath), "assets/fonts");
+const fontStaging = stageFonts(
+  captureDir,
+  outFontsDir,
+  brandFonts,
+  brandFonts.find((f) => !isMonoFont(f)) ?? brandFonts[0] ?? "Inter",
+);
+const stagedFamilies = fontStaging.families;
+const normFont = (s) =>
+  String(s)
+    .toLowerCase()
+    .replace(/[^a-z0-9]/g, "");
+// system/CSS-generic fallback faces leaked from unstyled elements → normalize to the brand sans.
+const GENERIC =
+  /^(sans-serif|serif|system-ui|ui-sans-serif|ui-serif|ui-monospace|monospace|-apple-system|blinkmacsystemfont|arial|helvetica(\s+neue)?|times(\s+new\s+roman)?|georgia|courier(\s+new)?|inherit|initial|unset)$/i;
+const GENERIC_MONO = /^(ui-monospace|monospace|courier(\s+new)?|consolas|menlo|monaco)$/i;
+const monoFont = stagedFamilies.find(isMonoFont) ?? brandFonts.find(isMonoFont) ?? null;
+// the brand body sans — a STAGED non-mono/non-serif so it actually renders; degrade to a captured
+// name only when nothing staged (e.g. DoorDash's fonts were never downloaded — nothing can render).
+const sansFont =
+  stagedFamilies.find((f) => !isMonoFont(f) && !isSerifFont(f)) ??
+  stagedFamilies.find((f) => !isMonoFont(f)) ??
+  brandFonts.find((f) => !isMonoFont(f)) ??
+  brandFonts[0] ??
+  "Inter";
+// resolve a computed font name to the staged family that actually renders; generic/icon/unknown → brand sans.
+const fontFor = (fam) => {
+  const f = String(fam || "").trim();
+  if (!f || GENERIC.test(f)) return GENERIC_MONO.test(f) && monoFont ? monoFont : sansFont;
+  if (isIconFont(f)) return sansFont;
+  const nf = normFont(f);
+  const exact = stagedFamilies.find((sf) => normFont(sf) === nf);
+  if (exact) return exact;
+  const near = stagedFamilies.find((sf) => {
+    const ns = normFont(sf);
+    return ns.length > 3 && (ns.includes(nf) || nf.includes(ns));
+  });
+  if (near) return near;
+  return isMonoFont(f) && monoFont ? monoFont : sansFont;
+};
+const nearestWeight = (n) =>
+  brandWeights.length
+    ? brandWeights.reduce(
+        (best, w) => (Math.abs(w - n) < Math.abs(best - n) ? w : best),
+        brandWeights[0],
+      )
+    : n;
+
+// ── 3. typography ramp (px → cqw, lineHeight → ratio, letterSpacing → em) ──────
+const typeRoles = [];
+const seenRole = new Set();
+for (const t of styles.typography ?? []) {
+  const sizePx = px(t.fontSize);
+  if (sizePx == null) continue;
+  let role = String(t.role || "").trim() || `t${typeRoles.length}`;
+  if (seenRole.has(role)) continue; // first occurrence of each role wins (DOM order = importance)
+  seenRole.add(role);
+  const lhPx = px(t.lineHeight);
+  const lsPx = px(t.letterSpacing);
+  const weight = nearestWeight(parseInt(t.fontWeight, 10) || 400);
+  // a code/mono role often computes to a serif system fallback (Times) when its CSS var doesn't
+  // resolve in capture — force it onto the brand mono rather than carrying the fallback.
+  const isCodeRole = /(?:^|[-_])(?:code|mono|data|kbd|pre|tick)(?:[-_]|$)/i.test(role);
+  const entry = {
+    role,
+    fontFamily: isCodeRole && monoFont ? monoFont : fontFor(t.fontFamily),
+    weight,
+  };
+  // small chrome (<16px) stays in px; everything that should scale becomes cqw
+  if (sizePx < 16) entry.px = Math.round(sizePx);
+  else entry.cqw = toCqw(sizePx);
+  if (lhPx != null && sizePx > 0) entry.lineHeight = round(lhPx / sizePx);
+  if (lsPx != null && Math.abs(lsPx) > 0.01 && sizePx > 0)
+    entry.tracking = `${round(lsPx / sizePx, 3)}em`;
+  if (t.color) entry.color = typeColorToken(t.color);
+  typeRoles.push(entry);
+}
+
+// reclaim an orphaned brand serif for the display voice ONLY when display sampled a generic fallback (not a real brand sans).
+const serifFace =
+  stagedFamilies.find((f) => !isMonoFont(f) && !isIconFont(f) && isSerifFont(f)) ?? null;
+const dispRole = typeRoles.find((t) => /^display$|hero|wordmark|title/i.test(t.role));
+const dispCaptured = (styles.typography ?? []).find((t) => t.role === dispRole?.role)?.fontFamily;
+if (
+  serifFace &&
+  dispRole &&
+  dispRole.fontFamily === sansFont &&
+  GENERIC.test(String(dispCaptured ?? "").trim())
+) {
+  dispRole.fontFamily = serifFace; // display fell back from a generic → reclaim the real brand serif
+}
+
+// display / hero ramp — frame-native sizes for cover & oversized-claim frames (a video-scale
+// addition, not from capture); weight is clamped to the brand's own ceiling.
+const heroWeight = nearestWeight(700);
+const headingRole = typeRoles.find((t) => /display|head|hero|title/i.test(t.role));
+const heroColor = headingRole?.color ?? "ink";
+// the hero ramp IS the display voice — use the (possibly serif-reclaimed) display role's own face.
+const displayFamily = dispRole?.fontFamily ?? headingRole?.fontFamily ?? sansFont;
+const heroRamp = [
+  {
+    role: "display-hero",
+    fontFamily: displayFamily,
+    cqw: 8,
+    weight: heroWeight,
+    lineHeight: 1.0,
+    tracking: "-0.02em",
+    color: heroColor,
+  },
+  {
+    role: "wordmark-mega",
+    fontFamily: displayFamily,
+    cqw: 16,
+    weight: heroWeight,
+    lineHeight: 0.92,
+    tracking: "-0.03em",
+    color: heroColor,
+  },
+];
+
+// ── 4. radii + shadows (optional blocks) ───────────────────────────────────────
+const radii = [
+  ...new Set(
+    (styles.radius ?? []).map((r) => String(r).trim()).filter((r) => /^\d/.test(r) && r !== "0px"),
+  ),
+];
+const shadows = (styles.shadows ?? [])
+  .map((s) => (typeof s === "string" ? s : s?.value))
+  .filter((s) => s && s !== "none");
+
+// ── 5. spacing scale (px → cqw, a few representative steps) ─────────────────────
+const observed = [
+  ...new Set((styles.spacing?.observed ?? []).filter((n) => Number.isFinite(n) && n > 0)),
+].sort((a, b) => a - b);
+const pickAt = (frac) =>
+  observed[Math.min(observed.length - 1, Math.round(frac * (observed.length - 1)))];
+const spacing = observed.length
+  ? [
+      ["gap-tight", pickAt(0.25)],
+      ["gap", pickAt(0.55)],
+      ["pad-region", pickAt(0.8)],
+      ["pad-edge", observed[observed.length - 1]],
+    ]
+      .filter(([, v]) => Number.isFinite(v))
+      .map(([k, v]) => [k, `${toCqw(v)}cqw`])
+  : [];
+
+// ── 6. components — structured tokens ({colors.x}/{radii.rN}); drop unstyled (bg==text) + section-sized noise.
+const cleanComp = (c, maxH) => {
+  if (!c) return null;
+  const transparent =
+    String(c.background ?? "")
+      .trim()
+      .toLowerCase() === "transparent";
+  const bg = transparent ? null : toHex(c.background); // transparent ground = valid (no fill)
+  if (!transparent && !bg) return null; // unparseable, non-transparent bg → not a real component
+  const fg = toHex(c.color);
+  if (bg && fg && upper(bg) === upper(fg)) return null; // solid bg == text → unstyled wrapper
+  const h = px(c.height);
+  if (h != null && h > maxH) return null; // oversized → a section, not a component
+  return { ...c, background: bg, color: fg ?? c.color, transparent };
+};
+// component ground → color token: transparent → canvas; solid → nearest palette role if close, else literal hex.
+const groundToken = (c) =>
+  c.transparent || !c.background
+    ? "{colors.canvas}"
+    : (colorTokenOrHex(c.background) ?? "{colors.canvas}");
+// effective ground hex for contrast checks (transparent sits on the canvas)
+const effGround = (c) => (c.transparent || !c.background ? roles.canvas : c.background);
+const radiiKeyByVal = new Map(radii.map((v, i) => [v, `r${i + 1}`]));
+// normalize Chrome's giant pill-radius sentinel (≥2000px) to "9999px".
+const normRadius = (raw) =>
+  String(raw ?? "").replace(/(\d+(?:\.\d+)?(?:e\+?\d+)?)px/gi, (m, n) =>
+    parseFloat(n) >= 2000 ? "9999px" : m,
+  );
+// keep captured radius verbatim: single scale value → token; multi-corner / % / pill pass through unchanged.
+const radiusRef = (raw) => {
+  const s = normRadius(String(raw ?? "").trim());
+  if (!s || s === "0" || s === "0px") return "0px";
+  return radiiKeyByVal.has(s) ? `{radii.${radiiKeyByVal.get(s)}}` : s;
+};
+// a color → {colors.key} when it's near a palette role, else the faithful literal hex
+const colorTokenOrHex = (raw) => {
+  const hex = toHex(raw);
+  if (!hex) return null;
+  const exact = paletteUpper.find(([, v]) => v === hex);
+  if (exact) return `{colors.${exact[0]}}`;
+  const [k, d] = palette.map(([key, v]) => [key, colorDist(hex, v)]).sort((a, b) => a[1] - b[1])[0];
+  return d <= 60 ? `{colors.${k}}` : hex;
+};
+const cleanBorder = (border) => {
+  const s = String(border ?? "").trim();
+  if (!s || /^none/.test(s)) return null;
+  const m = /^([\d.]+px)\s+(solid|dashed|dotted)\s+(.+)$/.exec(s);
+  if (!m || parseFloat(m[1]) === 0) return null; // 0px width → no border
+  const rawColor = m[3].trim();
+  // a faint hairline is often rgba(...,0.08) — keep a translucent color verbatim so it renders as
+  // the intended whisper, not an opaque line (colorTokenOrHex would drop the alpha).
+  const translucent = /rgba?\([^)]*[,/]\s*(?:0?\.\d+|0)\s*\)$/i.test(rawColor);
+  const c = translucent ? rawColor : colorTokenOrHex(rawColor);
+  return c ? `${m[1]} ${m[2]} ${c}` : null;
+};
+const cleanPad = (p) => (p && !/^0px$/.test(String(p).trim()) ? String(p).trim() : null);
+// pass a component's OWN box-shadow through verbatim (real multi-layer shadows are captured but
+// were being dropped in favor of a coarse global scale); null for "none"/empty.
+const cleanShadow = (s) => {
+  const v = String(s ?? "").trim();
+  return v && v !== "none" ? v : null;
+};
+// gradient value → verbatim (CSS-valid), trailing ", none" background-image layer stripped; else null
+const cleanGradient = (g) => {
+  const v = String(g ?? "")
+    .replace(/,\s*none\s*$/, "")
+    .replace(/\s+/g, " ")
+    .trim();
+  return v && /gradient/.test(v) ? v : null;
+};
+
+const components = [];
+// hex for a palette role key (canvas/ink/…), for contrast math.
+const roleHexOf = (k) => (palette.find(([kk]) => kk === k) ?? [])[1];
+// the best-contrast READING role (ink vs canvas) for text sitting on a given fill.
+const onRoleFor = (fillHex) =>
+  [
+    ["ink", roles.ink],
+    ["canvas", roles.canvas],
+  ]
+    .map(([k, v]) => [k, Math.abs((lum(fillHex) ?? 0) - (lum(v) ?? 0))])
+    .sort((a, b) => b[1] - a[1])[0][0];
+// legible button text: captured text role, but fall back to best-contrast role when it fails contrast on the fill.
+const legibleTextToken = (fillHex, capturedText) => {
+  const role = keyFor(toHex(capturedText) ?? capturedText);
+  const contrast = Math.abs((lum(fillHex) ?? 0) - (lum(roleHexOf(role)) ?? 0));
+  return `{colors.${contrast >= 55 ? role : onRoleFor(fillHex)}}`;
+};
+const compFromButton = (b, name, desc) => [
+  name,
+  {
+    backgroundColor: groundToken(b),
+    backgroundImage: cleanGradient(b.backgroundImage),
+    // gradient fills carry their own contrast story; for a solid fill enforce text legibility on it.
+    textColor: cleanGradient(b.backgroundImage)
+      ? `{colors.${keyFor(toHex(b.color) ?? b.color)}}`
+      : legibleTextToken(effGround(b), b.color),
+    typography: `${fontFor(b.fontFamily ?? sansFont)} ${nearestWeight(parseInt(b.fontWeight, 10) || 500)}`,
+    rounded: radiusRef(b.borderRadius),
+    padding: cleanPad(b.padding),
+    border: cleanBorder(b.border),
+    shadow: cleanShadow(b.boxShadow),
+    height: px(b.height) != null ? `${Math.round(px(b.height))}px` : null,
+    description: desc,
+  },
+];
+// emit every distinct visible button-sized token; drop noise + invisible (bg≈text), dedup by ground+text+border.
+const visible = (c) => {
+  if (cleanGradient(c.backgroundImage)) return true; // a gradient fill is unambiguously visible
+  const g = effGround(c);
+  const t = toHex(c.color) ?? c.color;
+  return keyFor(g) !== keyFor(t) && Math.abs((lum(g) ?? 0) - (lum(t) ?? 0)) >= 20;
+};
+const btnSized = (b) => {
+  const h = px(b.height);
+  return h == null || (h >= 24 && h <= 96);
+};
+// a pill/circle radius (≥50px, 9999, or 50%) marks a rounded CTA — used by the dedup (a pill and a
+// square of the same fill are distinct buttons) and by the primary-CTA tie-break below.
+const isPillRadius = (r) => /(?:^|\s)(?:[5-9]\d|\d{3,})px|9999|50%/.test(String(r ?? ""));
+let cleanBtns = (styles.buttons ?? [])
+  .map((b) => cleanComp(b, 96))
+  .filter(Boolean)
+  .filter(btnSized)
+  .filter(visible);
+{
+  const seen = new Set();
+  cleanBtns = cleanBtns.filter((b) => {
+    // include radius: a pill and a square button of the same fill are distinct CTAs (the pill is
+    // usually the primary), so they must not collapse to one in the dedup.
+    const sig = `${upper(b.background)}|${upper(toHex(b.color) ?? b.color)}|${cleanBorder(b.border) ? "b" : "_"}|${isPillRadius(b.borderRadius) ? "pill" : "sq"}`;
+    if (seen.has(sig)) return false;
+    seen.add(sig);
+    return true;
+  });
+}
+// primary CTA = the most prominent solid button: accent-colored, or a bold neutral pill maxing canvas contrast.
+const fillProminence = (b) => {
+  const grad = !!cleanGradient(b.backgroundImage);
+  if ((b.transparent || !b.background) && !grad) return -1; // outlined / ghost → secondary, never primary
+  const g = effGround(b);
+  // a gradient fill is a bold, deliberate CTA (Snowflake blue pill) — score it top, like the accent.
+  const accentClose = grad ? 255 : 255 - Math.min(colorDist(g, roles.accent), 255);
+  const canvasContrast = Math.abs((lum(g) ?? 0) - (lum(roles.canvas) ?? 255));
+  return Math.max(accentClose, canvasContrast) + (isPillRadius(b.borderRadius) ? 25 : 0);
+};
+const primaryBtn = [...cleanBtns].sort((a, b) => fillProminence(b) - fillProminence(a))[0];
+const restBtns = cleanBtns.filter((b) => b !== primaryBtn);
+const secondaryBtn = restBtns.find((b) => cleanBorder(b.border));
+const extraBtns = restBtns.filter((b) => b !== secondaryBtn);
+// "weak" primary = no real filled CTA captured (ground ≈ canvas, not a gradient); synthesize accent fill at the brand's own button geometry.
+const primaryWeak =
+  !primaryBtn ||
+  (!cleanGradient(primaryBtn.backgroundImage) &&
+    Math.abs((lum(effGround(primaryBtn)) ?? 0) - (lum(roles.canvas) ?? 255)) < 40);
+if (primaryWeak) {
+  const onAccent = (lum(roles.canvas) ?? 255) >= (lum(roles.ink) ?? 0) ? "canvas" : "ink";
+  // radius = the brand's own button geometry: the captured button's radius when it has one, else a
+  // pill if the radius scale has one, else the smallest scale step. Never a forced pill.
+  const capRadius =
+    primaryBtn && !/^0(px)?$/.test(String(primaryBtn.borderRadius ?? ""))
+      ? primaryBtn.borderRadius
+      : null;
+  // use the captured button radius; else a pill only if the radius scale has one; else a moderate default.
+  const synthRadius = capRadius ?? radii.find((r) => isPillRadius(r)) ?? "8px";
+  components.push([
+    "button-primary",
+    {
+      backgroundColor: "{colors.accent}",
+      textColor: `{colors.${onAccent}}`,
+      typography: `${sansFont} ${nearestWeight(600)}`,
+      rounded: radiusRef(synthRadius),
+      padding: cleanPad(primaryBtn?.padding) ?? "16px 36px",
+      description:
+        "Primary CTA — the brand accent at the brand's own button geometry (synthesized: no usable filled CTA was captured).",
+    },
+  ]);
+} else {
+  components.push(
+    compFromButton(
+      primaryBtn,
+      "button-primary",
+      "Primary solid action button (the site's most prominent filled CTA — accent-colored or a bold neutral pill).",
+    ),
+  );
+}
+if (secondaryBtn)
+  components.push(
+    compFromButton(secondaryBtn, "button-secondary", "Secondary / outline button (bordered)."),
+  );
+extraBtns
+  .slice(0, 2)
+  .forEach((b, i) =>
+    components.push(
+      compFromButton(b, `button-${i + 3}`, "Additional button variant captured from the site."),
+    ),
+  );
+// frame-scale CTA variant: button-primary's fill/radius/border/shadow re-scaled to video size (cqw).
+const primaryComp = components.find((c) => c[0] === "button-primary");
+if (primaryComp) {
+  const p = primaryComp[1];
+  components.push([
+    "button-primary-giant",
+    {
+      backgroundColor: p.backgroundColor,
+      backgroundImage: p.backgroundImage,
+      textColor: p.textColor,
+      typography: p.typography,
+      fontSize: "2.4cqw",
+      rounded: p.rounded,
+      padding: "1.5cqw 3.4cqw",
+      border: p.border,
+      shadow: p.shadow,
+      description:
+        "Frame-scale primary CTA — button-primary's atoms at video size; compose into hero/plate frames.",
+    },
+  ]);
+}
+
+// cards: emit each distinct card that carries a real skin (radius/border/shadow) with its own effects.
+const hasSkin = (c) =>
+  radiusRef(c.borderRadius) !== "0px" || cleanBorder(c.border) || cleanShadow(c.boxShadow);
+let cleanCards = (styles.cards ?? [])
+  .map((c) => cleanComp(c, cleanShadow(c?.boxShadow) || cleanBorder(c?.border) ? 900 : 480))
+  .filter(Boolean)
+  .filter(hasSkin);
+{
+  const seen = new Set();
+  cleanCards = cleanCards.filter((c) => {
+    const sig = `${upper(c.background)}|${radiusRef(c.borderRadius)}|${cleanShadow(c.boxShadow) ? "s" : "_"}`;
+    if (seen.has(sig)) return false;
+    seen.add(sig);
+    return true;
+  });
+}
+// float the lead card: prefer one with a shadow; else graft the site's strong global elevation (blur ≥16px) if any.
+const shadowBlur = (s) => {
+  const m = /(-?\d+)px\s+(-?\d+)px\s+(\d+)px/.exec(String(s ?? ""));
+  return m ? parseInt(m[3], 10) : 0;
+};
+const strongShadow = (styles.shadows ?? [])
+  .map((s) => (typeof s === "string" ? s : s?.value))
+  .filter(Boolean)
+  .find((s) => shadowBlur(s) >= 16);
+cleanCards.sort((a, b) => (cleanShadow(b.boxShadow) ? 1 : 0) - (cleanShadow(a.boxShadow) ? 1 : 0));
+if (cleanCards.length && !cleanShadow(cleanCards[0].boxShadow) && strongShadow) {
+  cleanCards[0] = { ...cleanCards[0], boxShadow: strongShadow };
+}
+if (cleanCards.length) {
+  cleanCards.slice(0, 3).forEach((c, i) =>
+    components.push([
+      i ? `card-${i + 1}` : "card",
+      {
+        backgroundColor: groundToken(c),
+        rounded: radiusRef(c.borderRadius),
+        border: cleanBorder(c.border),
+        shadow: cleanShadow(c.boxShadow) ?? "none",
+        description: "Content surface captured from the site (its own radius / border / shadow).",
+      },
+    ]),
+  );
+} else {
+  const cardEntry = (styles.cards ?? [])
+    .map((c) => cleanComp(c, 1e9))
+    .filter(Boolean)
+    .find(hasSkin);
+  components.push([
+    "card",
+    {
+      backgroundColor: surface ? "{colors.surface}" : "{colors.canvas}",
+      rounded: cardEntry ? radiusRef(cardEntry.borderRadius) : radii.length ? "{radii.r1}" : "0px",
+      border: cardEntry ? cleanBorder(cardEntry.border) : null,
+      shadow: cardEntry ? (cleanShadow(cardEntry.boxShadow) ?? "none") : "none",
+      description: "Content surface. Flat (no shadow) when the site uses none.",
+    },
+  ]);
+}
+
+// nav-bar height (only when the captured nav isn't degenerate)
+const navC = styles.nav && cleanComp(styles.nav, 200);
+if (navC && px(navC.height) != null) {
+  components.push([
+    "nav-bar",
+    {
+      backgroundColor: `{colors.${keyFor(navC.background)}}`,
+      height: navC.height,
+      description:
+        "Top-nav ground/height — use sparingly in video (one establishing frame at most).",
+    },
+  ]);
+}
+
+// frosted-glass material (translucent fill + backdrop blur), fill kept verbatim so its alpha survives.
+const glass0 = (styles.glass ?? [])[0];
+if (glass0 && /blur/.test(String(glass0.backdropFilter))) {
+  const gBg = String(glass0.background ?? "").trim();
+  const isGrad = /gradient/.test(gBg);
+  const translucent = /rgba?\([^)]*[,/]\s*(?:0?\.\d+)\s*\)/i.test(gBg);
+  components.push([
+    "glass-panel",
+    {
+      backgroundColor: isGrad ? null : translucent ? gBg : "rgba(255,255,255,0.6)",
+      backgroundImage: isGrad ? cleanGradient(gBg) : null,
+      backdropFilter: String(glass0.backdropFilter).replace(/\s+/g, " ").trim(),
+      border: cleanBorder(glass0.border),
+      rounded: radiusRef(glass0.borderRadius),
+      shadow: cleanShadow(glass0.boxShadow),
+      description:
+        "Frosted-glass panel: translucent fill + backdrop blur — composite over a colored ground.",
+    },
+  ]);
+}
+
+// dedup helper by ground+radius+border
+const dedupComps = (list) => {
+  const seen = new Set();
+  return list.filter((c) => {
+    const sig = `${upper(c.background)}|${radiusRef(c.borderRadius)}|${cleanBorder(c.border) ? "b" : "_"}`;
+    if (seen.has(sig)) return false;
+    seen.add(sig);
+    return true;
+  });
+};
+
+// chips / pills / badges / tags → chip, chip-2 (drop invisible-text matches, same guard as buttons)
+const cleanChips = dedupComps(
+  (styles.chips ?? [])
+    .map((c) => cleanComp(c, 60))
+    .filter(Boolean)
+    .filter(visible),
+);
+cleanChips
+  .slice(0, 2)
+  .forEach((c, i) =>
+    components.push(
+      compFromButton(c, i ? `chip-${i + 1}` : "chip", "Pill / badge / tag — small rounded label."),
+    ),
+  );
+
+// tabs → tab
+const cleanTabs = dedupComps(
+  (styles.tabs ?? [])
+    .map((c) => cleanComp(c, 64))
+    .filter(Boolean)
+    .filter(visible),
+);
+if (cleanTabs[0]) components.push(compFromButton(cleanTabs[0], "tab", "Tab control."));
+
+// stat cells → a stat-num TYPOGRAPHY token (the big numeral, most reusable) + a stat-cell surface
+// only when it's a real card (has a border or radius, not a bare transparent block).
+const statList = (styles.statCells ?? []).filter((s) => px(s.numberFontSize) != null);
+if (statList.length && !typeRoles.some((t) => t.role === "stat-num")) {
+  const s0 = statList[0];
+  const nc = toHex(s0.numberColor);
+  typeRoles.push({
+    role: "stat-num",
+    fontFamily: displayFamily,
+    cqw: toCqw(px(s0.numberFontSize)),
+    weight: nearestWeight(parseInt(s0.numberFontWeight, 10) || 600),
+    lineHeight: 1.0,
+    color: nc ? keyFor(nc) : "accent",
+  });
+  const cellBorder = cleanBorder(s0.border);
+  if (cellBorder || (px(s0.borderRadius) ?? 0) > 0) {
+    const cellBg = toHex(s0.background);
+    components.push([
+      "stat-cell",
+      {
+        backgroundColor: cellBg ? `{colors.${keyFor(cellBg)}}` : "{colors.surface}",
+        rounded: radiusRef(s0.borderRadius),
+        border: cellBorder,
+        typography: "{typography.stat-num}",
+        description: "Metric cell — a large numeral ({typography.stat-num}) over a small label.",
+      },
+    ]);
+  }
+}
+
+// ── 7. assemble frontmatter ─────────────────────────────────────────────────────
+// double-quoted YAML scalar — escape backslash + quote so a title/value with `"` can't break the doc.
+const q = (v) => `"${String(v).replace(/\\/g, "\\\\").replace(/"/g, '\\"')}"`;
+const yamlColors = palette.map(([k, v]) => `  ${k}: ${q(v)}`).join("\n");
+// grounds: the ranked page grounds (bg + best-contrast on-color + kind), for full-bleed frames.
+const yamlGrounds = grounds.length
+  ? `\ngrounds:\n${grounds
+      .map((g) => `  - { bg: ${q(g.bg)}, on: ${q(g.on)}, kind: ${q(g.kind)} }`)
+      .join("\n")}\n`
+  : "";
+const yamlRadii = radii.length
+  ? `\nradii:\n${radii.map((r, i) => `  r${i + 1}: ${q(r)}`).join("\n")}\n`
+  : "";
+const yamlShadows = shadows.length
+  ? `\nshadows:\n${shadows.map((s, i) => `  shadow-${i + 1}: ${q(s)}`).join("\n")}\n`
+  : "";
+// gradient/mesh washes (the site's signature color grounds) — cleaned via the hoisted cleanGradient,
+// ranked by on-screen area.
+const gradients = (styles.backgrounds ?? [])
+  .map((b) => cleanGradient(b?.value))
+  .filter(Boolean)
+  .slice(0, 4);
+const yamlGradients = gradients.length
+  ? `\ngradients:\n${gradients.map((g, i) => `  gradient-${i + 1}: ${q(g)}`).join("\n")}\n`
+  : "";
+const typeLine = (t) => {
+  const parts = [`fontFamily: ${q(t.fontFamily)}`];
+  if (t.cqw != null) parts.push(`cqw: ${t.cqw}`);
+  if (t.px != null) parts.push(`px: ${t.px}`);
+  parts.push(`weight: ${t.weight}`);
+  if (t.lineHeight != null) parts.push(`lineHeight: ${t.lineHeight}`);
+  if (t.tracking) parts.push(`tracking: ${q(t.tracking)}`);
+  if (t.color) parts.push(`color: ${q(t.color)}`);
+  return `  ${t.role}: { ${parts.join(", ")} }`;
+};
+const yamlType =
+  `  # — reading ramp (captured px → frame-relative cqw) —\n` +
+  typeRoles.map(typeLine).join("\n") +
+  `\n  # — display / hero ramp (frame-native, video-scale) —\n` +
+  heroRamp.map(typeLine).join("\n");
+const yamlSpacing = spacing.length
+  ? spacing.map(([k, v]) => `  ${k}: ${q(v)}`).join("\n")
+  : '  pad-edge: "4cqw"';
+const yamlComponents = components
+  .map(
+    ([name, body]) =>
+      `  ${name}:\n${Object.entries(body)
+        .filter(([, v]) => v != null)
+        .map(([k, v]) => `    ${k}: ${q(v)}`)
+        .join("\n")}`,
+  )
+  .join("\n");
+
+// keep the name a safe plain YAML scalar: drop ':' / '#' (would start a mapping/comment) and quotes.
+const siteName =
+  String(tokens.title || "Captured site")
+    .split("|")[0]
+    .replace(/["#:]/g, "")
+    .trim() || "Captured site";
+const siteDesc = String(tokens.description || "")
+  .replace(/\n/g, " ")
+  .trim();
+
+let md = `---
+version: alpha
+name: ${siteName} — Frame (video / frame layer)
+description: >
+  Frame-scale design system generated from a capture of ${siteName}. The unit is the frame
+  (${frameWidth}×1080). Colors, typography, spacing, radii, and components below are extracted
+  from the live site and are normative — quote them verbatim.${siteDesc ? `\n  Source tagline: ${siteDesc}` : ""}
+unit: the frame — ${frameWidth}×1080 primary; 9:16 and 1:1 documented
+principle: atoms are sacred · composition is free · numbers come from the script
+
+colors:
+${yamlColors}
+${yamlGrounds}${yamlRadii}${yamlShadows}${yamlGradients}
+typography:
+${yamlType}
+
+spacing:
+${yamlSpacing}
+
+components:
+${yamlComponents}
+---
+
+# ${siteName} — Frame
+
+## Overview
+
+Generated from a \`hyperframes capture\` of **${siteName}**. The YAML frontmatter above is the
+source of truth (extracted from the live site); the prose below is a skeleton to fill in with
+creative intent. Strict on brand (the hex values, font families, weight relationships); free on
+layout (compose frames as the script needs).
+
+## Colors
+
+${palette.map(([k, v]) => `- \`${k}\` — \`${v}\``).join("\n")}
+
+Accent (\`accent\`) is the brand's recurring chromatic color; reserve it for emphasis and the
+primary action. \`canvas\` is the page ground; \`ink\` the dominant reading color.
+
+## Typography
+
+**Reading ramp** (captured, faithful):
+
+${typeRoles.map((t) => `- \`${t.role}\` — ${t.fontFamily} ${t.weight}${t.cqw != null ? `, ${t.cqw}cqw` : t.px != null ? `, ${t.px}px` : ""}`).join("\n")}
+
+**Display / hero ramp** (frame-native, video-scale — for cover & oversized-claim frames):
+
+${heroRamp.map((t) => `- \`${t.role}\` — ${t.fontFamily} ${t.weight}, ${t.cqw}cqw`).join("\n")}
+
+Reading-ramp sizes are the captured web px converted to frame-relative \`cqw\` at ${frameWidth}px width —
+faithful to the source. The hero ramp is added for video legibility (a 1.4cqw ≈ 27px legibility floor
+applies to any load-bearing line).
+
+## Components
+
+${components.map(([n]) => `- \`${n}\``).join("\n") || "- (none cleanly extracted)"}
+
+## Known Gaps
+
+- Prose sections (Composition Rules, Do's/Don'ts, Frame Treatments) are intentionally left as a
+  skeleton — fill them from the screenshots in \`screenshots/\`.
+- Component extraction is conservative: noisy/section-sized DOM matches were dropped.
+`;
+
+// ── 8. append the @font-face block (fonts were already staged up top) ─────────
+md += fontStaging.block;
+
+// ── 9. write ───────────────────────────────────────────────────────────────────
+writeFileSync(outPath, md);
+console.log(`✓ build-frame-from-capture → ${outPath}`);
+console.log(`  colors: ${palette.map(([k]) => k).join(", ")}`);
+console.log(
+  `  typography: ${typeRoles.length} roles · radii: ${radii.length} · shadows: ${shadows.length} · components: ${components.map(([n]) => n).join(", ") || "none"}`,
+);
+console.log(
+  `  fonts: ${brandFonts.join(", ") || "none"} (weights ${brandWeights.join("/") || "?"})`,
+);
diff --git a/url-to-frame-md/lib/color.mjs b/url-to-frame-md/lib/color.mjs
new file mode 100644
index 0000000000..ee32c91db7
--- /dev/null
+++ b/url-to-frame-md/lib/color.mjs
@@ -0,0 +1,74 @@
+// color.mjs — CSS color parsing + comparison, shared by the generator and verifier.
+// Parses hex / #rgb / rgb()/rgba() / hsl() / oklch() → "#RRGGBB" (modern sites emit oklch/hsl).
+
+export const HEX6 = /^#[0-9a-fA-F]{6}$/;
+export const isHex = (v) => HEX6.test(String(v).trim());
+export const upper = (h) => String(h).trim().toUpperCase();
+export const hexToRgb = (hex) => {
+  const n = parseInt(hex.slice(1), 16);
+  return [(n >> 16) & 255, (n >> 8) & 255, n & 255];
+};
+// perceptual-ish weighted RGB distance (cheap, good enough for nearest-key); non-hex → Infinity.
+export const colorDist = (a, b) => {
+  if (!isHex(a) || !isHex(b)) return Infinity;
+  const [r1, g1, b1] = hexToRgb(a);
+  const [r2, g2, b2] = hexToRgb(b);
+  const rm = (r1 + r2) / 2;
+  return Math.sqrt(
+    (2 + rm / 256) * (r1 - r2) ** 2 + 4 * (g1 - g2) ** 2 + (2 + (255 - rm) / 256) * (b1 - b2) ** 2,
+  );
+};
+
+const clamp01 = (x) => Math.min(1, Math.max(0, x));
+const to255 = (x) =>
+  Math.max(0, Math.min(255, Math.round(x)))
+    .toString(16)
+    .padStart(2, "0")
+    .toUpperCase();
+const rgbHex = (r, g, b) => `#${to255(r)}${to255(g)}${to255(b)}`;
+const hslToRgb = (h, s, l) => {
+  s /= 100;
+  l /= 100;
+  const k = (n) => (n + h / 30) % 12;
+  const a = s * Math.min(l, 1 - l);
+  const f = (n) => l - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1)));
+  return [f(0) * 255, f(8) * 255, f(4) * 255];
+};
+const oklchToRgb = (Lraw, C, H) => {
+  const L = String(Lraw).endsWith("%") ? parseFloat(Lraw) / 100 : parseFloat(Lraw);
+  const hr = (H * Math.PI) / 180;
+  const a = C * Math.cos(hr);
+  const b = C * Math.sin(hr);
+  const l_ = L + 0.3963377774 * a + 0.2158037573 * b;
+  const m_ = L - 0.1055613458 * a - 0.0638541728 * b;
+  const s_ = L - 0.0894841775 * a - 1.291485548 * b;
+  const l = l_ ** 3,
+    m = m_ ** 3,
+    s = s_ ** 3;
+  const lin2srgb = (c) => (c <= 0.0031308 ? 12.92 * c : 1.055 * Math.pow(c, 1 / 2.4) - 0.055);
+  const R = lin2srgb(4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s);
+  const G = lin2srgb(-1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s);
+  const B = lin2srgb(-0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s);
+  return [clamp01(R) * 255, clamp01(G) * 255, clamp01(B) * 255];
+};
+export const toHex = (raw) => {
+  const s = String(raw ?? "").trim();
+  if (!s) return null;
+  if (HEX6.test(s)) return s.toUpperCase();
+  if (/^#[0-9a-fA-F]{3}$/.test(s))
+    return `#${s[1]}${s[1]}${s[2]}${s[2]}${s[3]}${s[3]}`.toUpperCase();
+  let m;
+  if ((m = /^rgba?\(\s*([\d.]+)[\s,]+([\d.]+)[\s,]+([\d.]+)/i.exec(s)))
+    return rgbHex(+m[1], +m[2], +m[3]);
+  if ((m = /^hsla?\(\s*([\d.]+)(?:deg)?[\s,]+([\d.]+)%[\s,]+([\d.]+)%/i.exec(s)))
+    return rgbHex(...hslToRgb(+m[1], +m[2], +m[3]));
+  if ((m = /^oklch\(\s*([\d.]+%?)[\s,]+([\d.]+)[\s,]+([\d.]+)(?:deg)?/i.exec(s)))
+    return rgbHex(...oklchToRgb(m[1], +m[2], +m[3]));
+  return null;
+};
+// luminance 0..255 of a #RRGGBB (Rec.601), for "near-white?" checks; null for non-hex.
+export const lumOf = (hex) => {
+  if (!isHex(hex)) return null;
+  const [r, g, b] = hexToRgb(hex);
+  return 0.299 * r + 0.587 * g + 0.114 * b;
+};
diff --git a/url-to-frame-md/lib/fonts.mjs b/url-to-frame-md/lib/fonts.mjs
new file mode 100644
index 0000000000..8fa2aec35d
--- /dev/null
+++ b/url-to-frame-md/lib/fonts.mjs
@@ -0,0 +1,118 @@
+// fonts.mjs — brand-font classification + @font-face staging, shared by the generator.
+import { copyFileSync, existsSync, mkdirSync, readdirSync, readFileSync } from "node:fs";
+import { join } from "node:path";
+
+// icon / emoji / symbol faces are never brand TEXT — an emoji font (NotoEmoji, Apple Color Emoji)
+// leaking into a button/heading typography is a capture artifact, so classify it as an icon font.
+export const isIconFont = (n) =>
+  /(?:^|[\s_-])icons?(?:[\s_-]|$)|icomoon|font\s*-?awesome|glyphicons?|material\s*icons|feather|emoji|symbols?/i.test(
+    String(n),
+  );
+// serif/editorial display faces (the !sans guard drops ui-sans-serif / PT Sans).
+export const isSerifFont = (n) =>
+  !/sans/i.test(String(n)) &&
+  /serif|times|georgia|playfair|tiempos|lora|garamond|caslon|didot|freight|canela|fraunces|spectral|merriweather|domaine|editorial|instrument/i.test(
+    String(n),
+  );
+// match "mono" anywhere + named mono faces (monaco/consolas/…).
+export const isMonoFont = (n) =>
+  /mono|consol|courier|menlo|monaco|jetbrains|berkeley\s*mono|source\s*code|fira\s*code|geist\s*mono|dm\s*mono|ibm\s*plex\s*mono|sf\s*mono|roboto\s*mono/i.test(
+    String(n),
+  );
+
+// bind brand font names to files via fonts-manifest.json; returns a "## Font loading" markdown block, or "".
+export function stageFonts(captureDir, outDir, brandFonts, sansFont) {
+  if (!brandFonts.length) return { block: "", families: [] };
+  const extOf = (f) => (f.match(/\.(woff2|woff|ttf|otf)$/i)?.[1] ?? "").toLowerCase();
+  const FMT = { woff2: "woff2", woff: "woff", ttf: "truetype", otf: "opentype" };
+  const norm = (s) =>
+    String(s)
+      .toLowerCase()
+      .replace(/[^a-z0-9]/g, "");
+  const weightFromName = (name) => {
+    const s = name.toLowerCase();
+    if (/black|heavy|ultra|extrabold/.test(s)) return { n: 800, w: "ExtraBold" };
+    if (/semibold|demibold/.test(s)) return { n: 600, w: "SemiBold" };
+    if (/bold/.test(s)) return { n: 700, w: "Bold" };
+    if (/medium/.test(s)) return { n: 500, w: "Medium" };
+    if (/light|thin/.test(s)) return { n: 300, w: "Light" };
+    return { n: 400, w: "Regular" };
+  };
+  const manifestPath = join(captureDir, "extracted/fonts-manifest.json");
+  let manifest = {};
+  if (existsSync(manifestPath)) {
+    try {
+      manifest = JSON.parse(readFileSync(manifestPath, "utf8"));
+    } catch {
+      manifest = {}; // unreadable manifest → fall back to name-only binding
+    }
+  }
+  const metaByFile = new Map((manifest.files ?? []).map((f) => [f.file, f]));
+  const variableFams = new Set(
+    (manifest.families ?? []).filter((f) => f.variable).map((f) => norm(f.family)),
+  );
+  const srcDir = join(captureDir, "assets/fonts");
+  // staged output lands in this same dir, so on a re-run skip our own clean-named files.
+  const stagedPrefixes = brandFonts.map((b) => b.replace(/[^A-Za-z0-9]/g, ""));
+  const isStaged = (f) =>
+    stagedPrefixes.some((p) =>
+      new RegExp(
+        `^${p}-(Regular|Light|Medium|SemiBold|Bold|ExtraBold)\\.(woff2?|ttf|otf)$`,
+        "i",
+      ).test(f),
+    );
+  // never stage an ICON font — the orphan-assignment would bind glyph files to a text family.
+  const isIconFile = (f) =>
+    metaByFile.get(f)?.isIcon ||
+    /icon|glyph|fontawesome/i.test(f) ||
+    isIconFont(metaByFile.get(f)?.family);
+  // skip ITALIC/oblique files — the clean-name dedup ("Family-Regular") sorts "Italic" before
+  // "Regular", so an italic subset would win the normal slot and render the whole family slanted.
+  const isItalicFile = (f) => metaByFile.get(f)?.style === "italic" || /italic|oblique/i.test(f);
+  const files = existsSync(srcDir)
+    ? readdirSync(srcDir)
+        .filter((f) => extOf(f) && !isStaged(f) && !isIconFile(f) && !isItalicFile(f))
+        .sort()
+    : [];
+
+  const nonMono = brandFonts.filter((f) => !isMonoFont(f));
+  const monoBrand = brandFonts.find(isMonoFont) ?? null;
+  const monoish = (s) =>
+    isMonoFont(s) || /commit|courier|consol|menlo|monaco|mono/i.test(String(s));
+
+  const assign = files.map((file) => {
+    const fam = metaByFile.get(file)?.family ?? "";
+    if (monoBrand && (monoish(file) || monoish(fam))) return { file, name: monoBrand };
+    const nf = norm(fam);
+    const named =
+      nf && fam !== "." ? nonMono.find((b) => nf.includes(norm(b)) || norm(b).includes(nf)) : null;
+    return { file, name: named ?? null };
+  });
+  const have = new Set(assign.filter((a) => a.name).map((a) => a.name));
+  const orphan = nonMono.find((b) => !have.has(b)) ?? nonMono[nonMono.length - 1] ?? sansFont;
+  for (const a of assign) if (!a.name) a.name = orphan;
+
+  const faces = [];
+  const staged = new Set();
+  const families = new Set(); // @font-face family names actually emitted — the ONLY names that render
+  for (const { file, name } of assign) {
+    if (!name) continue;
+    const meta = metaByFile.get(file) ?? {};
+    const { n, w } = weightFromName(file);
+    const clean = `${name.replace(/[^A-Za-z0-9]/g, "")}-${w}.${extOf(file)}`;
+    if (staged.has(clean)) continue;
+    mkdirSync(outDir, { recursive: true });
+    // copy unconditionally (idempotent) so a stale clean-named file from an earlier run can't survive.
+    if (join(srcDir, file) !== join(outDir, clean))
+      copyFileSync(join(srcDir, file), join(outDir, clean));
+    staged.add(clean);
+    families.add(name);
+    const isVar = meta.variable || variableFams.has(norm(meta.family ?? ""));
+    faces.push(
+      `@font-face{font-family:"${name}";font-weight:${isVar ? "100 900" : n};font-style:normal;font-display:block;src:url("assets/fonts/${clean}") format("${FMT[extOf(file)]}");}`,
+    );
+  }
+  if (!faces.length) return { block: "", families: [] };
+  const block = `\n## Font loading (auto-generated)\n\nThe brand fonts ship as local files in \`assets/fonts/\`. Paste this into every frame's \`<head>\`:\n\n\`\`\`html\n<style>\n${faces.join("\n")}\n</style>\n\`\`\`\n`;
+  return { block, families: [...families] };
+}
diff --git a/url-to-frame-md/lib/tokens.mjs b/url-to-frame-md/lib/tokens.mjs
new file mode 100644
index 0000000000..da5351c627
--- /dev/null
+++ b/url-to-frame-md/lib/tokens.mjs
@@ -0,0 +1,242 @@
+// tokens.mjs — brand-token parsing + semantic color-role mapping (shared, pure node).
+
+// Collect `key: value` pairs under the top-level `colors:` block (until dedent).
+export function parseColors(md) {
+  const out = [];
+  let inBlock = false;
+  for (const line of md.split(/\r?\n/)) {
+    if (/^colors:\s*$/.test(line)) {
+      inBlock = true;
+      continue;
+    }
+    if (!inBlock) continue;
+    if (/^\S/.test(line)) break; // dedent to a top-level key → end of block
+    const m = line.match(
+      /^\s+([\w-]+):\s*(?:"([^"]+)"|'([^']+)'|(#[0-9a-fA-F]{3,8}|rgba?\([^)]*\)|[^#\s][^#\n]*?))\s*(?:#.*)?$/,
+    );
+    if (m) out.push([m[1], (m[2] ?? m[3] ?? m[4]).trim()]);
+  }
+  return out;
+}
+
+// relative luminance of a #rrggbb (null for non-hex like rgba()).
+export function lum(v) {
+  const m = /^#?([0-9a-fA-F]{6})$/.exec(String(v).trim());
+  if (!m) return null;
+  const n = parseInt(m[1], 16);
+  return 0.2126 * ((n >> 16) & 255) + 0.7152 * ((n >> 8) & 255) + 0.0722 * (n & 255);
+}
+
+// chroma (max−min channel) of a #rrggbb — a cheap "how colorful" proxy; −1 for non-hex.
+export function chroma(v) {
+  const m = /^#?([0-9a-fA-F]{6})$/.exec(String(v).trim());
+  if (!m) return -1;
+  const n = parseInt(m[1], 16);
+  const r = (n >> 16) & 255,
+    g = (n >> 8) & 255,
+    b = n & 255;
+  return Math.max(r, g, b) - Math.min(r, g, b);
+}
+
+// HSL hue (0–360) of a #rrggbb; −1 for non-hex or achromatic (chroma 0).
+export function hueOf(v) {
+  const m = /^#?([0-9a-fA-F]{6})$/.exec(String(v).trim());
+  if (!m) return -1;
+  const n = parseInt(m[1], 16);
+  const r = ((n >> 16) & 255) / 255,
+    g = ((n >> 8) & 255) / 255,
+    b = (n & 255) / 255;
+  const max = Math.max(r, g, b),
+    min = Math.min(r, g, b),
+    d = max - min;
+  if (d === 0) return -1;
+  let h;
+  if (max === r) h = ((g - b) / d) % 6;
+  else if (max === g) h = (b - r) / d + 2;
+  else h = (r - g) / d + 4;
+  h *= 60;
+  return h < 0 ? h + 360 : h;
+}
+
+// circular hue distance (0–180).
+export function hueSep(a, b) {
+  if (a < 0 || b < 0) return 360; // an achromatic anchor never blocks a chromatic candidate
+  const d = Math.abs(a - b) % 360;
+  return d > 180 ? 360 - d : d;
+}
+
+// Loud, hue-distinct secondary brand hues from the full palette (the gradient/graphic colors usage
+// stats miss). Hue-separated from the primary accent + each other; [] for mono-accent brands.
+export function vividAccents(
+  colors,
+  {
+    exclude = [],
+    hueAnchors = [],
+    max = 2,
+    minChroma = 70,
+    minHueSep = 40,
+    maxRankFrac = 0.7,
+  } = {},
+) {
+  const list = (colors ?? []).map(String);
+  const ban = new Set([...exclude, ...UA_DEFAULT_COLORS].map((c) => String(c).toUpperCase()));
+  // palette is frequency-ordered; keep the leading portion (tail = one-off illustration pixels).
+  const rankLimit = Math.max(3, Math.ceil(list.length * maxRankFrac));
+  const cand = list
+    .map((h, i) => ({ h, i }))
+    .filter(
+      ({ h, i }) =>
+        i < rankLimit &&
+        /^#[0-9a-fA-F]{6}$/.test(h) &&
+        !ban.has(h.toUpperCase()) &&
+        chroma(h) >= minChroma,
+    )
+    .sort((a, b) => chroma(b.h) - chroma(a.h));
+  const anchorHues = hueAnchors.filter((h) => chroma(h) >= 30).map(hueOf);
+  const chosen = [];
+  for (const { h } of cand) {
+    if (chosen.length >= max) break;
+    const hh = hueOf(h);
+    const clear = [...anchorHues, ...chosen.map(hueOf)].every((a) => hueSep(a, hh) >= minHueSep);
+    if (clear) chosen.push(h.toUpperCase());
+  }
+  return chosen;
+}
+
+// UA-default link colors — saturated but never a brand accent.
+export const UA_DEFAULT_COLORS = new Set(
+  ["#0000EE", "#0000FF", "#0000CC", "#1A0DAB", "#551A8B", "#EE0000"].map((c) => c.toUpperCase()),
+);
+
+// Brand accent: with stats, the chromatic color recurring across the most UI roles; else most chromatic.
+export function pickAccent(stats, colors, exclude = []) {
+  const ban = new Set([...exclude, ...UA_DEFAULT_COLORS].map((c) => String(c).toUpperCase()));
+  const ok = (h) => /^#[0-9a-fA-F]{6}$/.test(String(h)) && !ban.has(String(h).toUpperCase());
+  // palette prominence (index 0 = most used) breaks ties; a saturated tail color is a one-off.
+  const rank = new Map((colors ?? []).map((h, i) => [String(h).toUpperCase(), i]));
+  const inPalette = (h) => rank.has(String(h).toUpperCase());
+  const prom = (h) => (inPalette(h) ? rank.get(String(h).toUpperCase()) : 1e9);
+  if (Array.isArray(stats) && stats.length) {
+    const roles = (s) =>
+      ((s.interactiveBg || 0) > 0 ? 1 : 0) +
+      ((s.textCount || 0) > 0 ? 1 : 0) +
+      ((s.bgCount || 0) > 0 ? 1 : 0);
+    // reject injected-widget/focus-ring strays: a real accent is in the palette, paints a bg, or recurs.
+    const strayFree = (s) => inPalette(s.hex) || (s.areaBg || 0) > 0 || (s.count || 0) >= 5;
+    const a = stats
+      .filter((s) => ok(s?.hex) && chroma(s.hex) > 40 && strayFree(s))
+      .sort(
+        (x, y) =>
+          roles(y) - roles(x) || // used in MORE roles (link+icon+button) = the brand accent
+          prom(x.hex) - prom(y.hex) || // earlier in the palette = more prominent
+          (y.count || 0) - (x.count || 0) ||
+          (y.interactiveBg || 0) - (x.interactiveBg || 0) ||
+          chroma(y.hex) - chroma(x.hex),
+      );
+    if (a.length) return a[0].hex;
+  }
+  const c = (colors ?? [])
+    .map(String)
+    .filter(ok)
+    .sort((x, y) => chroma(y) - chroma(x));
+  return c[0];
+}
+
+// Brand roles from colorStats by FUNCTION: canvas = biggest bg area, ink = dominant contrasting text, accent via pickAccent.
+export function brandRolesFromStats(stats, colorsInOrder) {
+  if (!Array.isArray(stats) || !stats.length) return null;
+  const v = stats.filter((s) => /^#[0-9a-fA-F]{6}$/.test(s?.hex || ""));
+  if (!v.length) return null;
+  const canvas = [...v].sort(
+    (a, b) =>
+      (b.areaBg || 0) - (a.areaBg || 0) ||
+      (b.maxArea || 0) - (a.maxArea || 0) ||
+      (b.bgCount || 0) - (a.bgCount || 0),
+  )[0]?.hex;
+  // pass the frequency-ordered palette (tokens.colors) so pickAccent can use palette
+  // PROMINENCE — colorStats counts alone are too sparse to rank rare accents.
+  const accent = pickAccent(v, colorsInOrder ?? v.map((s) => s.hex), [canvas]);
+  if (!canvas || !accent) return null;
+  const cl = lum(canvas) ?? 0;
+  const ink =
+    [...v]
+      .filter((s) => s.hex !== canvas && s.hex !== accent)
+      .sort((a, b) => (b.textCount || 0) - (a.textCount || 0))
+      .find((s) => Math.abs((lum(s.hex) ?? 0) - cl) > 64)?.hex ??
+    (cl > 128 ? "#000000" : "#FFFFFF");
+  const accent2 =
+    v
+      .filter(
+        (s) =>
+          ![canvas, ink, accent].includes(s.hex) &&
+          (s.interactiveBg || 0) > 0 &&
+          chroma(s.hex) > 40 &&
+          !UA_DEFAULT_COLORS.has(s.hex.toUpperCase()),
+      )
+      .sort((a, b) => (b.interactiveBg || 0) - (a.interactiveBg || 0))[0]?.hex ?? accent;
+  return { ink, canvas, accent, accent2 };
+}
+
+// Fallback role mapping by name + luminance/chroma, for when colorStats are absent.
+export function semanticColors(colors) {
+  if (!colors.length) return {};
+  const named = (re) => colors.find(([k]) => re.test(k));
+  const hexes = colors.filter(([, v]) => lum(v) != null);
+  const byLum = [...hexes].sort((a, b) => (lum(a[1]) ?? 1e9) - (lum(b[1]) ?? 1e9));
+  const pick = (m, fallback) => (m ? m[1] : fallback ? fallback[1] : undefined);
+  // "ink" must be a whole word-segment so "soft-pink"/"pink" don't match it.
+  const ink = pick(
+    named(/(?:^|[-_])ink(?:[-_]|$)|black|charcoal|^text(?:-dark)?$|outline|noir/i),
+    byLum[0] ?? colors[0],
+  );
+  const canvas = pick(
+    named(/cream|paper|canvas|white|bg|ground|surface|base|sand|parchment|off-?white|bone/i),
+    byLum[byLum.length - 1] ?? colors[colors.length - 1],
+  );
+  const accents = colors
+    .filter(([, v]) => v !== ink && v !== canvas && !UA_DEFAULT_COLORS.has(String(v).toUpperCase()))
+    .sort((a, b) => chroma(b[1]) - chroma(a[1]))
+    .map(([, v]) => v);
+  return { ink, canvas, accent: accents[0] ?? ink, accent2: accents[1] ?? accents[0] ?? ink };
+}
+
+// Collect role→fontFamily under the top-level `typography:` block; pick a display
+// + body family from the usual role names. Returns quoted families (or null).
+export function parseFonts(md) {
+  const roles = {};
+  let inBlock = false;
+  for (const line of md.split(/\r?\n/)) {
+    if (/^typography:\s*$/.test(line)) {
+      inBlock = true;
+      continue;
+    }
+    if (!inBlock) continue;
+    if (/^\S/.test(line)) break;
+    const m = line.match(/^\s+([\w-]+):\s*\{[^}]*fontFamily:\s*"([^"]+)"/);
+    if (m) roles[m[1]] = m[2];
+  }
+  const q = (s) => (s ? `"${s}"` : null);
+  const body = roles.body ?? roles.subtitle ?? Object.values(roles)[0];
+  const display =
+    roles.display ??
+    roles.headline ??
+    roles["card-headline"] ??
+    roles["section-headline"] ??
+    roles["quote-display"] ??
+    roles.h1 ??
+    roles.h2 ??
+    roles.title ??
+    roles.hero ??
+    body;
+  // the monospace/chrome family (code, tags, ticks); null when there's no distinct mono role.
+  const mono =
+    roles.mono ??
+    roles["mono-tag"] ??
+    roles["mono-chrome"] ??
+    roles["mono-tick"] ??
+    roles.code ??
+    roles.data ??
+    roles.pagenum ??
+    null;
+  return { display: q(display), body: q(body), mono: q(mono) };
+}
diff --git a/url-to-frame-md/reextract-design.mjs b/url-to-frame-md/reextract-design.mjs
new file mode 100644
index 0000000000..8bd40ae6b4
--- /dev/null
+++ b/url-to-frame-md/reextract-design.mjs
@@ -0,0 +1,154 @@
+#!/usr/bin/env node
+// reextract-design.mjs — re-run designStyleExtractor.ts offline against a capture's saved page.html (via CDP).
+//   node reextract-design.mjs --capture ../stripe-capture [--chrome <path>]
+
+import { spawn } from "node:child_process";
+import { existsSync, mkdtempSync, readFileSync, writeFileSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { join, resolve } from "node:path";
+
+const argv = process.argv.slice(2);
+const arg = (name, def) => {
+  const i = argv.indexOf(`--${name}`);
+  return i >= 0 && i + 1 < argv.length ? argv[i + 1] : def;
+};
+const die = (m) => {
+  console.error(`✗ ${m}`);
+  process.exit(1);
+};
+
+const captureDir = resolve(arg("capture", ""));
+if (!captureDir || !existsSync(captureDir)) die(`--capture <dir> required (got ${captureDir})`);
+const pageHtml = join(captureDir, "extracted/page.html");
+if (!existsSync(pageHtml))
+  die(`no extracted/page.html in ${captureDir} — cannot re-extract offline`);
+const outPath = join(captureDir, "extracted/design-styles.json");
+
+const CHROME = arg("chrome", "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome");
+if (!existsSync(CHROME)) die(`Chrome not found at ${CHROME} — pass --chrome <path>`);
+
+// ── source the extraction script from the engine (single source of truth) ────────
+const extractorTs = resolve("../packages/cli/src/capture/designStyleExtractor.ts");
+const tsSrc = existsSync(extractorTs)
+  ? readFileSync(extractorTs, "utf8")
+  : die(`engine extractor not found at ${extractorTs}`);
+const m = tsSrc.match(/EXTRACT_DESIGN_STYLES_SCRIPT\s*=\s*`([\s\S]*?)`;/);
+if (!m) die("could not locate EXTRACT_DESIGN_STYLES_SCRIPT template literal in engine source");
+// the .ts stores the script as a template literal with escaped backslashes (\\( etc.); re-interpret
+// it as a template literal to recover the runtime string the engine actually evaluates.
+const script = new Function(`return \`${m[1]}\``)();
+
+// ── minimal CDP-over-WebSocket client (no deps) ──────────────────────────────────
+const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
+
+async function cdpEval(ws, expression, { returnByValue = true, awaitPromise = false } = {}) {
+  return sendCmd(ws, "Runtime.evaluate", { expression, returnByValue, awaitPromise });
+}
+
+let msgId = 0;
+const pending = new Map();
+function sendCmd(ws, method, params = {}) {
+  const id = ++msgId;
+  return new Promise((res, rej) => {
+    pending.set(id, { res, rej });
+    ws.send(JSON.stringify({ id, method, params }));
+    setTimeout(() => {
+      if (pending.has(id)) {
+        pending.delete(id);
+        rej(new Error(`CDP ${method} timed out`));
+      }
+    }, 30000);
+  });
+}
+
+async function run() {
+  const profile = mkdtempSync(join(tmpdir(), "reextract-"));
+  const fileUrl = `file://${pageHtml}`;
+  const chrome = spawn(CHROME, [
+    "--headless=new",
+    "--disable-gpu",
+    "--no-sandbox",
+    "--disable-setuid-sandbox",
+    "--hide-scrollbars",
+    "--no-first-run",
+    "--no-default-browser-check",
+    "--disable-extensions",
+    `--user-data-dir=${profile}`,
+    "--remote-debugging-port=0",
+    "--window-size=1920,1080",
+    fileUrl,
+  ]);
+
+  // Chrome prints "DevTools listening on ws://127.0.0.1:<port>/devtools/browser/..." to stderr.
+  const port = await new Promise((res, rej) => {
+    let buf = "";
+    const to = setTimeout(() => rej(new Error("timed out waiting for DevTools endpoint")), 15000);
+    chrome.stderr.on("data", (d) => {
+      buf += d.toString();
+      const mm = buf.match(/ws:\/\/127\.0\.0\.1:(\d+)\//);
+      if (mm) {
+        clearTimeout(to);
+        res(Number(mm[1]));
+      }
+    });
+    chrome.on("exit", (c) => rej(new Error(`Chrome exited early (code ${c})`)));
+  });
+
+  // Find the page target's WebSocket URL.
+  let wsUrl = null;
+  for (let i = 0; i < 40 && !wsUrl; i++) {
+    try {
+      const list = await (await fetch(`http://127.0.0.1:${port}/json/list`)).json();
+      const target = list.find((t) => t.type === "page" && String(t.url).startsWith("file://"));
+      if (target?.webSocketDebuggerUrl) wsUrl = target.webSocketDebuggerUrl;
+    } catch {
+      // devtools http not ready yet
+    }
+    if (!wsUrl) await sleep(150);
+  }
+  if (!wsUrl) throw new Error("no page target found via /json/list");
+
+  const ws = new WebSocket(wsUrl);
+  ws.addEventListener("message", (ev) => {
+    const msg = JSON.parse(ev.data);
+    if (msg.id && pending.has(msg.id)) {
+      const { res, rej } = pending.get(msg.id);
+      pending.delete(msg.id);
+      if (msg.error) rej(new Error(msg.error.message));
+      else res(msg.result);
+    }
+  });
+  await new Promise((res, rej) => {
+    ws.addEventListener("open", res, { once: true });
+    ws.addEventListener("error", () => rej(new Error("ws connect failed")), { once: true });
+  });
+
+  // Wait for the saved DOM to finish parsing (offline: remote assets 404, but CSS is inlined so
+  // computed styles resolve). Cap the wait so a hanging resource can't stall us.
+  for (let i = 0; i < 40; i++) {
+    const r = await cdpEval(ws, "document.readyState");
+    if (r?.result?.value === "complete") break;
+    await sleep(150);
+  }
+  await sleep(300);
+
+  const out = await cdpEval(ws, script, { returnByValue: true });
+  if (out?.exceptionDetails) throw new Error(`extractor threw: ${out.exceptionDetails.text}`);
+  const styles = out.result.value;
+
+  // offline extract is faithful except typography (unstyled text leaks Chrome defaults) — keep the live type ramp.
+  const existing = existsSync(outPath) ? JSON.parse(readFileSync(outPath, "utf8")) : {};
+  const merged = { ...styles };
+  if (Array.isArray(existing.typography) && existing.typography.length) {
+    merged.typography = existing.typography;
+  }
+  writeFileSync(outPath, JSON.stringify(merged, null, 2));
+  ws.close();
+  chrome.kill("SIGKILL");
+
+  console.log(
+    `✓ re-extracted ${outPath} — buttons:${styles.buttons.length} cards:${styles.cards.length} backgrounds:${styles.backgrounds?.length ?? 0} (typography preserved)`,
+  );
+}
+
+run().catch((e) => die(e.message));
diff --git a/url-to-frame-md/render-showcase.mjs b/url-to-frame-md/render-showcase.mjs
new file mode 100644
index 0000000000..1bf3308321
--- /dev/null
+++ b/url-to-frame-md/render-showcase.mjs
@@ -0,0 +1,1011 @@
+#!/usr/bin/env node
+// render-showcase.mjs — frame.md → frame-showcase.html, screenshotted to PNG via headless Chrome.
+//   node render-showcase.mjs --frame ./stripe-capture/frame.md [--out <dir>] [--chrome <path>]
+
+import { spawn } from "node:child_process";
+import { existsSync, mkdtempSync, readFileSync, statSync, writeFileSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { dirname, join, resolve } from "node:path";
+import { hexToRgb, isHex, lumOf } from "./lib/color.mjs";
+
+const statSafe = (p) => {
+  try {
+    return statSync(p);
+  } catch {
+    return null;
+  }
+};
+const argv = process.argv.slice(2);
+const flag = (n, d) => {
+  const i = argv.indexOf(`--${n}`);
+  return i >= 0 && i + 1 < argv.length ? argv[i + 1] : d;
+};
+// desktop Chrome runs sandboxed by default; pass --no-sandbox for container/root (where Chrome
+// otherwise refuses to launch), or set HF_CHROME_NO_SANDBOX=1.
+const noSandbox = argv.includes("--no-sandbox") || process.env.HF_CHROME_NO_SANDBOX === "1";
+
+// Demo A-roll avatar + b-roll hero. Default: hosted URLs (Chrome fetches at render, like the fonts).
+// Override with --avatar / --hero <url|path>: URL → used directly; local path → inlined as data-URI.
+const DEFAULT_AVATAR_URL = "https://www.heygenverse.com/s/f3a3205d-ad9d-4c2f-a97b-c8bf0d557925/raw";
+const DEFAULT_HERO_URL = "https://www.heygenverse.com/s/9d1617d6-9c4d-4ac5-87ea-67c16c0d3920/raw";
+const assetSrc = (v) => {
+  if (!v) return null;
+  if (/^https?:\/\//.test(v)) return v;
+  try {
+    return "data:image/jpeg;base64," + readFileSync(resolve(v)).toString("base64");
+  } catch {
+    return null;
+  }
+};
+const avatarAsset = assetSrc(flag("avatar", DEFAULT_AVATAR_URL));
+const heroAsset = assetSrc(flag("hero", DEFAULT_HERO_URL));
+const die = (m) => {
+  console.error(`✗ render-showcase: ${m}`);
+  process.exit(1);
+};
+
+const framePath = resolve(flag("frame", "frame.md"));
+if (!existsSync(framePath)) die(`no frame.md at ${framePath}`);
+const baseDir = dirname(framePath);
+const outDir = resolve(flag("out", baseDir));
+const md = readFileSync(framePath, "utf8");
+const CHROME = flag(
+  "chrome",
+  [
+    "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome",
+    "/usr/bin/google-chrome",
+    "/usr/bin/google-chrome-stable",
+  ].find((p) => existsSync(p)),
+);
+
+// ── parse frame.md ─────────────────────────────────────────────────────────────
+const fm = (/^---\n([\s\S]*?)\n---/.exec(md) ?? [undefined, ""])[1];
+const frameWidth = parseInt((/unit:.*?(\d{3,4})\s*[×x]/.exec(md) ?? [undefined, "1920"])[1], 10);
+// The showcase never prints the source site's name — the captured URL is only the aesthetic source,
+// and every frame is a UNIVERSAL, content-agnostic template. The gallery card outside does the naming.
+const wmCqw = 9;
+
+const blockLines = (name) => {
+  const out = [];
+  let inB = false;
+  for (const line of fm.split(/\r?\n/)) {
+    if (new RegExp(`^${name}:\\s*$`).test(line)) {
+      inB = true;
+      continue;
+    }
+    if (!inB) continue;
+    if (/^\S/.test(line)) break;
+    out.push(line);
+  }
+  return out;
+};
+const kvBlock = (name) => {
+  const o = {};
+  for (const line of blockLines(name)) {
+    const m = line.match(/^\s+([\w-]+):\s*"([^"]+)"/);
+    if (m) o[m[1]] = m[2];
+  }
+  return o;
+};
+
+const colors = kvBlock("colors");
+// grounds: the ranked page grounds emitted by the generator — a list of `- { bg, on, kind }`.
+// Data-driven, incl. dark/tinted grounds the flat `colors` roles can't hold. Empty for older frame.md.
+const groundsParsed = [];
+for (const line of blockLines("grounds")) {
+  const bg = line.match(/bg:\s*"([^"]+)"/);
+  const on = line.match(/on:\s*"([^"]+)"/);
+  const kind = line.match(/kind:\s*"([^"]+)"/);
+  if (bg) groundsParsed.push({ bg: bg[1], on: on?.[1], kind: kind?.[1] ?? "surface" });
+}
+const radii = kvBlock("radii");
+const spacing = kvBlock("spacing");
+const shadows = kvBlock("shadows");
+const gradients = kvBlock("gradients");
+const gradientList = Object.values(gradients);
+// chroma = max stop saturation (max−min RGB channel) — a real color wash scores high, a
+// neutral scrim (white/cream → transparent) scores low. Pick the most chromatic as the hero ground.
+const chromaOf = (grad) => {
+  let max = 0;
+  for (const m of String(grad).matchAll(/rgba?\(\s*(\d+)[,\s]+(\d+)[,\s]+(\d+)/g)) {
+    const [r, g, b] = [+m[1], +m[2], +m[3]];
+    max = Math.max(max, Math.max(r, g, b) - Math.min(r, g, b));
+  }
+  return max;
+};
+const heroGradient =
+  gradientList
+    .map((g) => [g, chromaOf(g)])
+    .filter(([, c]) => c > 55)
+    .sort((a, b) => b[1] - a[1])[0]?.[0] ?? null;
+const resolveRefs = (s) =>
+  String(s ?? "")
+    .replace(/\{colors\.([\w-]+)\}/g, (_, k) => colors[k] ?? "currentColor")
+    .replace(/\{radii\.([\w-]+)\}/g, (_, k) => radii[k] ?? "0px");
+
+// typography: role -> { fontFamily, cqw, px, weight, lineHeight, tracking, color }
+const types = [];
+for (const line of blockLines("typography")) {
+  const m = line.match(/^\s+([\w-]+):\s*\{(.*)\}/);
+  if (!m) continue;
+  const body = m[2];
+  const get = (k) => {
+    const mm = body.match(new RegExp(`${k}:\\s*(?:"([^"]+)"|([\\d.\\-]+))`));
+    return mm ? (mm[1] ?? mm[2]) : null;
+  };
+  const cqw = get("cqw");
+  const pxv = get("px");
+  types.push({
+    role: m[1],
+    fontFamily: get("fontFamily") || "sans-serif",
+    cqw: cqw != null ? parseFloat(cqw) : null,
+    px: cqw != null ? (parseFloat(cqw) * frameWidth) / 100 : pxv != null ? parseFloat(pxv) : 16,
+    weight: get("weight") || "400",
+    lineHeight: get("lineHeight") || "1.15",
+    tracking: get("tracking"),
+    color: get("color") || "ink",
+  });
+}
+const typeByRole = new Map(types.map((t) => [t.role, t]));
+const cqwOf = (role, fb) => typeByRole.get(role)?.cqw ?? fb;
+
+// components: name -> { prop: value }
+const components = [];
+{
+  let cur = null;
+  for (const line of blockLines("components")) {
+    const head = line.match(/^\s{2}([\w-]+):\s*$/);
+    const prop = line.match(/^\s{4}([\w-]+):\s*"([^"]+)"/);
+    if (head) {
+      cur = { name: head[1], props: {} };
+      components.push(cur);
+    } else if (prop && cur) {
+      cur.props[prop[1]] = prop[2];
+    }
+  }
+}
+const fontFace =
+  (/```html\s*\n(<style>[\s\S]*?<\/style>)\s*\n```/.exec(md) ?? [undefined, ""])[1] || "";
+if (!Object.keys(colors).length) die("no colors parsed from frame.md");
+
+// ── brand atoms ─────────────────────────────────────────────────────────────────
+const canvas = colors.canvas ?? colors.bg ?? "#FFFFFF";
+const ink = colors.ink ?? colors.text ?? "#111111";
+const inkMuted = colors["ink-muted"] ?? colors.muted ?? ink;
+const accent = colors.accent ?? colors.primary ?? "#000000";
+// full vivid accent set (primary + secondaries); frames rotate through it. accents2 = secondaries only.
+const accents2 = [colors["accent-2"], colors["accent-3"]].filter(isHex);
+const accents = [accent, ...accents2].filter(isHex);
+const acc = (i) => accents[i % accents.length] ?? accent;
+// a brand spectrum wash across the vivid hues — only meaningful when there are ≥2 (else null).
+const brandWash = accents.length >= 2 ? `linear-gradient(120deg, ${accents.join(", ")})` : null;
+const dispFont =
+  types.find((t) => t.role.includes("head") || t.role.includes("display"))?.fontFamily ??
+  "sans-serif";
+const bodyFont = types.find((t) => t.role.includes("body"))?.fontFamily ?? dispFont;
+const cssVars = Object.entries(colors)
+  .map(([k, v]) => `--${k}: ${v};`)
+  .join(" ");
+const r1 = radii.r1 ?? "8px";
+
+// gallery ground derived from the brand canvas (light brand → light board, dark → dark).
+const shade = (hex, f) => {
+  if (!isHex(hex)) return hex;
+  const [r, g, b] = hexToRgb(hex);
+  const c = (x) =>
+    Math.round(Math.max(0, Math.min(255, x)))
+      .toString(16)
+      .padStart(2, "0");
+  return `#${c(r + 255 * f)}${c(g + 255 * f)}${c(b + 255 * f)}`;
+};
+const darkGallery = (lumOf(canvas) ?? 255) < 128;
+const galleryBg = darkGallery ? "#0e0e0e" : shade(canvas, -0.08); // light: a touch darker than the frames so they read as lit panels
+const docInk = darkGallery ? "#ededed" : "#1b1b1b";
+const docFaint = darkGallery ? "#7c7c7c" : "#8a8a8a";
+const secBorder = darkGallery ? "#232323" : "rgba(0,0,0,.12)";
+const railName = darkGallery ? "#eaeaea" : "#1b1b1b";
+const railAttr = darkGallery ? "#7c7c7c" : "#8a8a8a";
+const chipHair = darkGallery ? "rgba(255,255,255,.14)" : "rgba(0,0,0,.14)";
+const frameShadow = darkGallery ? "0 10px 40px rgba(0,0,0,.45)" : "0 10px 34px rgba(0,0,0,.14)";
+const parseTypo = (s) => {
+  const m = /^(.*?)\s+(\d{3})$/.exec(String(s || ""));
+  return m ? { fam: m[1], weight: m[2] } : { fam: s || bodyFont, weight: "400" };
+};
+
+// component → CSS class body (resolved)
+const compCss = components
+  .map((c) => {
+    const p = c.props;
+    const t = parseTypo(p.typography);
+    const isCard = /^card/.test(c.name);
+    const hasShadow = p.shadow && p.shadow !== "none";
+    const decls = [
+      // a gradient fill (e.g. Snowflake's blue pill CTA) wins over the flat color when present
+      p.backgroundImage
+        ? `background:${resolveRefs(p.backgroundImage)}`
+        : p.backgroundColor && `background:${resolveRefs(p.backgroundColor)}`,
+      p.textColor && `color:${resolveRefs(p.textColor)}`,
+      `font-family:'${t.fam}',sans-serif`,
+      `font-weight:${t.weight}`,
+      p.fontSize && `font-size:${p.fontSize}`, // frame-scale variants carry a cqw size
+      (p.rounded || p.borderRadius) && `border-radius:${resolveRefs(p.rounded ?? p.borderRadius)}`,
+      p.padding && `padding:${p.padding}`,
+      p.border && `border:${resolveRefs(p.border)}`,
+      p.height && `min-height:${p.height}`,
+      p.backdropFilter && `backdrop-filter:${p.backdropFilter}`,
+      p.backdropFilter && `-webkit-backdrop-filter:${p.backdropFilter}`,
+      hasShadow && `box-shadow:${resolveRefs(p.shadow)}`,
+      // showcase legibility only (spec unchanged): a card with no captured border/shadow gets a faint
+      // hairline so dark-on-dark / white-on-white surfaces read as surfaces, like the swatch chips.
+      isCard && !hasShadow && !p.border && `box-shadow: inset 0 0 0 1px ${chipHair}`,
+    ].filter(Boolean);
+    return `  .c-${c.name}{ ${decls.join("; ")}; display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box }`;
+  })
+  .join("\n");
+
+// ── composed 16:9 frames (compose the tokens) ─────────────────────────────────
+const heroCqw = cqwOf("display-hero", 8);
+const eyebrowCqw = Math.max(cqwOf("label", 0.73) * 1.2, 1.2);
+const btnPrimary = components.find((c) => c.name === "button-primary");
+
+const frame = (cls, inner) => `<div class="frame ${cls}"><div class="fill">${inner}</div></div>`;
+const cell = (cls, inner, name, arch, density) =>
+  `<div class="cell">${frame(cls, inner)}<div class="rail"><span class="rn">${name}</span><span class="ra">${arch} · ${density}</span></div></div>`;
+
+const eyebrow = (txt) => `<div class="eyebrow">${txt}</div>`;
+const counter = (txt) => `<div class="counter">${txt}</div>`;
+
+// 1 · identity / cover
+const coverInner = `
+  <div class="aline"></div>
+  ${eyebrow("FRAME SYSTEM · VOL.01")}
+  <div class="wordmark">Design, distilled.</div>
+  <div class="coversub">Generated frame system — atoms are sacred, composition is free.</div>
+  ${counter("01 / 04")}
+  <div class="pbar"></div>`;
+// focal-artifact frame: gradient ground + floating card/glass panel + frame-scale CTA.
+const hasGlass = components.some((c) => c.name === "glass-panel");
+const hasGiant = components.some((c) => c.name === "button-primary-giant");
+const hasCard = components.some((c) => /^card/.test(c.name));
+// focal ground: captured wash if any; else a restrained accent glow only if the brand uses glass; else a flat brand ground.
+const coloredGround = !!heroGradient || hasGlass;
+const focalGround = heroGradient
+  ? heroGradient
+  : hasGlass
+    ? // a restrained accent GLOW on the brand's own canvas (canvas stays dominant) — enough color for
+      // the frost to read over, without a fabricated full-bleed aurora that misreads the brand
+      `radial-gradient(90% 90% at 22% 16%, ${accent}, ${canvas} 55%)`
+    : canvas;
+// the floating panel: the frosted glass material if captured, else the elevated card
+const panelClass = hasGlass ? "c-glass-panel" : hasCard ? "c-card" : "";
+// panel fill: canvas-tinted frost on a colored ground (so it separates); the card's own surface on a flat ground.
+const [pfr, pfg, pfb] = isHex(canvas) ? hexToRgb(canvas) : [255, 255, 255];
+const panelBg = coloredGround ? `background:rgba(${pfr}, ${pfg}, ${pfb}, 0.74); ` : "";
+const ctaGiant = hasGiant
+  ? `<span class="c-button-primary-giant">Get started</span>`
+  : btnPrimary
+    ? `<span class="c-button-primary">Get started</span>`
+    : "";
+const plateInner = `
+  ${eyebrow("FOCAL · MATERIAL ON GROUND")}
+  <div class="platewrap">
+    <div class="${panelClass} platepanel">
+      <div class="cardk">The material, foregrounded</div>
+      <div class="cardv">Built to be seen.</div>
+      ${ctaGiant}
+    </div>
+  </div>`;
+
+// grounds-driven frames: each commits to a captured ground, text auto-contrasts, meta/caption rails frame it.
+const lumSafe = (h) => lumOf(h) ?? 128;
+const onColorFor = (g) => {
+  const cands = [ink, canvas, "#FFFFFF", "#0E0E0E"].filter(isHex);
+  return cands.map((c) => [c, Math.abs(lumSafe(c) - lumSafe(g))]).sort((a, b) => b[1] - a[1])[0][0];
+};
+const emphasisOn = (g) => (Math.abs(lumSafe(accent) - lumSafe(g)) > 45 ? accent : onColorFor(g));
+// grounds to rotate through: the generator's ranked grounds, then accent + ink; falls back to role-guess.
+const groundList = [];
+{
+  const seen = new Set();
+  const push = (label, bg, on) => {
+    if (bg && isHex(bg) && !seen.has(bg.toUpperCase())) {
+      seen.add(bg.toUpperCase());
+      groundList.push([label, bg, on && isHex(on) ? on : onColorFor(bg)]);
+    }
+  };
+  for (const gr of groundsParsed) push(gr.kind ?? "ground", gr.bg, gr.on);
+  push("accent", colors.accent);
+  push("ink", colors.ink);
+  if (!groundList.length)
+    for (const key of ["canvas", "accent", "ink", "surface", "accent-2"]) push(key, colors[key]);
+}
+const g = (i) => groundList[i % groundList.length] ?? ["canvas", canvas, onColorFor(canvas)];
+// a motion beat: one centered focal on a committed ground. ground = [label, bg, on] tuple.
+const cxFrame = (cls, ground, mainFn) => {
+  const bg = ground[1];
+  const on = ground[2] ?? onColorFor(bg);
+  const emph = emphasisOn(bg);
+  return `<div class="frame cx ${cls}" style="background:${bg}; color:${on}">
+    <div class="cx-tex"></div>
+    <div class="cx-main">${mainFn(on, emph)}</div>
+  </div>`;
+};
+// asset frames — two patterns: ELEMENT (circular-masked hero + accent ring) and BACKGROUND (full-bleed + scrim).
+const assetElFrame = (ground) => {
+  const bg = ground[1];
+  const on = ground[2] ?? onColorFor(bg);
+  const emph = emphasisOn(bg);
+  if (!heroAsset) return cxFrame("cx-cl", ground, aClaim); // graceful fallback: a drawn beat
+  return `<div class="frame cx cx-asset" style="background:${bg}; color:${on}">
+    <div class="cx-tex"></div>
+    <div class="cx-ael">
+      <div class="cx-aet">
+        <div class="cx-eye" style="color:${emph}">FEATURE · IN FOCUS</div>
+        <div class="cx-aeh">The <em style="color:${emph}">one</em> that matters.</div>
+        <div class="cx-abadges">
+          <span class="cx-badge" style="border-color:${emph}55">${ICON.bolt}Fast</span>
+          <span class="cx-badge" style="border-color:${emph}55">${ICON.check}Ready</span>
+        </div>
+      </div>
+      <div class="cx-aeimg">
+        <div class="cx-orbit" style="border-color:${emph}55"></div>
+        <div class="cx-circ" style="border-color:${emph}"><img src="${heroAsset}" alt=""></div>
+      </div>
+    </div>
+  </div>`;
+};
+const assetBgFrame = (ground) => {
+  const emph = emphasisOn(ground[1]);
+  if (!heroAsset) return cxFrame("cx-st", ground, aStat); // graceful fallback: a drawn beat
+  const [er, eg, eb] = isHex(emph) ? hexToRgb(emph) : [0, 0, 0];
+  // darken-for-legibility + a low-alpha brand-accent wash → cinematic, brand-tinted, always readable.
+  const scrim = `linear-gradient(0deg, rgba(8,8,10,.74), rgba(8,8,10,.32)), linear-gradient(0deg, rgba(${er},${eg},${eb},.30), rgba(${er},${eg},${eb},.05))`;
+  return `<div class="frame cx cx-assetbg" style="color:#fff">
+    <img class="cx-bgimg" src="${heroAsset}" alt="">
+    <div class="cx-scrim" style="background:${scrim}"></div>
+    <div class="cx-main cx-bgmain">
+      <div class="cx-eye" style="color:${emph}">IN FRAME</div>
+      <div class="cx-word">Set the scene.</div>
+      <div class="cx-sub" style="opacity:.85">Asset as ground · type on the scrim.</div>
+    </div>
+  </div>`;
+};
+const cxCell = (fr, name, arch) =>
+  `<div class="cell">${fr}<div class="rail"><span class="rn">${name}</span><span class="ra">${arch}</span></div></div>`;
+const aCover = (on, emph) =>
+  `<div class="cx-eye" style="color:${emph}">FRAME SYSTEM · VOL.01</div><div class="cx-word">Design,<br>distilled.</div><div class="cx-sub">Atoms are sacred · composition is free.</div>`;
+const aClaim = (on, emph) =>
+  `<div class="cx-eye" style="color:${emph}">THE CLAIM</div><div class="cx-claim">One bold idea, <em style="color:${emph}">said once</em>, owns the frame.</div>`;
+// no data figures — a graphic "focus" beat: a single drawn target on the ground + a universal line.
+const aStat = (on, emph) =>
+  `<div class="cx-eye" style="color:${emph}">IN FOCUS</div><div class="cx-focus" style="color:${emph}">${ICON.target}</div><div class="cx-claim">Make <em style="color:${emph}">one thing</em> unmissable.</div>`;
+
+// cover/claim/stat beats in the video-agent idiom (tri-tone ground, mono kicker, footer meta, avatar A-roll).
+const cx2Foot = (on) =>
+  `<div class="cx2-ft" style="border-color:${on}33"><span>Frame System</span><span>Vol.01 · 2026</span></div>`;
+// A-roll = full-frame talking-head avatar + a transparent overlay; accent-tinted scrim keeps overlay text legible.
+const arScrim = (acc) => {
+  const [r, g, b] = isHex(acc) ? hexToRgb(acc) : [0, 0, 0];
+  return `linear-gradient(90deg, rgba(12,14,17,.52) 0%, rgba(12,14,17,.18) 46%, rgba(12,14,17,.02) 70%), linear-gradient(0deg, rgba(${r},${g},${b},.16), rgba(${r},${g},${b},.02))`;
+};
+const coverFrame = (ground) => {
+  if (!avatarAsset) return claimFrame(ground);
+  // overlay stays in corners/edges — face clear. NO site name (the URL is only the aesthetic source);
+  // a neutral editorial title stands in, like a real video-agent topic card.
+  return `<div class="frame cx2 cx2-aroll" style="color:#fff">
+    <img class="cx2-arimg" src="${avatarAsset}" alt="">
+    <div class="cx2-arscrim" style="background:${arScrim(accent)}"></div>
+    <div class="cx2-arpill">Special Report</div>
+    <div class="cx2-arlower">
+      <div class="cx2-areye">Frame System · A-roll</div>
+      <div class="cx2-artitle">The brief.</div>
+      <span class="cx2-arrule" style="background:${accent}"></span>
+    </div>
+    <div class="cx2-arstamp">2026</div>
+  </div>`;
+};
+const claimFrame = (ground) => {
+  const bg = ground[1],
+    on = ground[2] ?? onColorFor(bg),
+    emph = emphasisOn(bg);
+  return `<div class="frame cx2 cx2-claim" style="background:${bg};color:${on}">
+    <div class="cx2-tex"></div>
+    <div class="cx2-kick" style="color:${emph}">The Claim</div>
+    <div class="cx2-claim-main"><span class="cx2-bigline">One bold idea,</span><span class="cx2-serif-lg" style="color:${emph}">said once,</span><span class="cx2-bigline">owns the frame.</span></div>
+    ${cx2Foot(on)}
+  </div>`;
+};
+// A-roll + a lower-third whose box IS the container (content padded inside); translucent fill keeps text opaque.
+const statFrame = (ground) => {
+  if (!avatarAsset) return claimFrame(ground);
+  const on = onColorFor(canvas);
+  const [cr, cg, cb] = isHex(canvas) ? hexToRgb(canvas) : [255, 255, 255];
+  const bars = Array.from({ length: 34 }, (_, i) => {
+    const h = (
+      1 +
+      (Math.abs(Math.sin(i * 0.7)) * 0.5 + Math.abs(Math.sin(i * 1.9)) * 0.5) * 2.4
+    ).toFixed(2);
+    return `<span class="cx2-fgbar" style="height:${h}cqw;background:${accent}"></span>`;
+  }).join("");
+  return `<div class="frame cx2 cx2-aroll">
+    <img class="cx2-arimg" src="${avatarAsset}" alt="">
+    <div class="cx2-fgcard" style="background:rgba(${cr},${cg},${cb},.93);color:${on}">
+      <div class="cx2-lt-pill" style="border-color:${on}">Live Audio Feed</div>
+      <div class="cx2-lt-eye">The Signal</div>
+      <div class="cx2-lt-head">Forward Guidance</div>
+      <div class="cx2-lt-wave">${bars}</div>
+    </div>
+  </div>`;
+};
+// radial hub-spoke system map: central accent hub + ring nodes + SVG connectors, neutral universal labels.
+const networkFrame = (ground) => {
+  const bg = ground[1],
+    on = ground[2] ?? onColorFor(bg),
+    emph = emphasisOn(bg);
+  const labels = ["Signal", "System", "Reach", "Craft", "Scale", "Trust"];
+  const N = labels.length,
+    R = 40,
+    cx = 50,
+    cy = 50;
+  const pos = labels.map((lab, i) => {
+    const a = (i / N) * Math.PI * 2 - Math.PI / 2;
+    return { lab, x: cx + R * Math.cos(a), y: cy + R * Math.sin(a) };
+  });
+  const lines = pos
+    .map(
+      (p) =>
+        `<line x1="${cx}" y1="${cy}" x2="${p.x.toFixed(1)}" y2="${p.y.toFixed(1)}" stroke="${emph}" stroke-width=".5" stroke-opacity=".45"/>`,
+    )
+    .join("");
+  // node dots rotate through the brand's vivid accent set — one color for a mono brand, the full
+  // cyan/green/purple spread for a multi-accent brand like HeyGen, so the map carries the palette.
+  const nodeEls = pos
+    .map(
+      (p, i) =>
+        `<div class="cx3-node" style="left:${p.x.toFixed(1)}%;top:${p.y.toFixed(1)}%"><div class="cx3-ndot" style="border-color:${acc(i)};background:${bg}"><i style="background:${acc(i)}"></i></div><div class="cx3-nlab">${p.lab}</div></div>`,
+    )
+    .join("");
+  return `<div class="frame cx2 cx3-net" style="background:${bg};color:${on}">
+    <div class="cx2-tex"></div>
+    <div class="cx3-head"><div class="cx3-title">System Map</div><div class="cx3-sub">How the parts connect</div></div>
+    <div class="cx3-diagram">
+      <svg class="cx3-svg" viewBox="0 0 100 100" preserveAspectRatio="none">${lines}</svg>
+      ${nodeEls}
+      <div class="cx3-hub" style="background:${emph};color:${onColorFor(emph)}">CORE</div>
+    </div>
+    <div class="cx3-legend"><span class="cx3-lg"><i style="background:${emph}"></i>Hub</span><span class="cx3-lg"><i style="border:.3cqw solid ${emph}"></i>Node</span></div>
+  </div>`;
+};
+// inline SVG line-icons (currentColor), a universal vocabulary so no icon implies a domain the brand isn't in.
+const IC = (b) =>
+  `<svg class="cx-ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">${b}</svg>`;
+const ICON = {
+  up: IC(`<polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/><polyline points="17 6 23 6 23 12"/>`),
+  down: IC(
+    `<polyline points="23 18 13.5 8.5 8.5 13.5 1 6"/><polyline points="17 18 23 18 23 12"/>`,
+  ),
+  inbox: IC(
+    `<path d="M22 12h-6l-2 3h-4l-2-3H2"/><path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/>`,
+  ),
+  gear: IC(
+    `<circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/>`,
+  ),
+  check: IC(
+    `<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/>`,
+  ),
+  layers: IC(
+    `<polygon points="12 2 2 7 12 12 22 7 12 2"/><polyline points="2 17 12 22 22 17"/><polyline points="2 12 12 17 22 12"/>`,
+  ),
+  target: IC(
+    `<circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/>`,
+  ),
+  grid: IC(
+    `<rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/>`,
+  ),
+  bolt: IC(`<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/>`),
+  globe: IC(
+    `<circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/>`,
+  ),
+  spark: IC(
+    `<path d="M12 2v6M12 16v6M2 12h6M16 12h6M5 5l3.5 3.5M15.5 15.5 19 19M19 5l-3.5 3.5M8.5 15.5 5 19"/>`,
+  ),
+  arrow: `<svg class="cx-arrow" viewBox="0 0 40 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><line x1="2" y1="12" x2="33" y2="12"/><polyline points="25 4 35 12 25 20"/></svg>`,
+};
+// rotate grounds across archetypes: cover on canvas, content frames through the ranked grounds.
+const canvasGround = ["canvas", canvas, onColorFor(canvas)];
+// half-and-half comparison: header pill + 50% divider + two-tone panels, each with label + display term + icon.
+const comparePane = (bg, on, emph, label, big, serif, icon) =>
+  `<section class="cx2-pane" style="background:${bg};color:${on}">
+    <div class="cx2-plabel">${label}</div>
+    <div class="cx2-pbig">${big}</div>
+    <div class="cx2-pserif" style="color:${emph}">${serif}</div>
+    <div class="cx2-picon">${icon}</div>
+  </section>`;
+const compareFrame = (gA, gB) => {
+  const bgA = gA[1],
+    onA = gA[2] ?? onColorFor(bgA),
+    emphA = emphasisOn(bgA);
+  const bgB = gB[1],
+    onB = gB[2] ?? onColorFor(bgB),
+    emphB = emphasisOn(bgB);
+  return `<div class="frame cx2 cx2-split" style="background:${bgA};color:${onA}">
+    <div class="cx2-tex"></div>
+    <div class="cx2-splithd" style="border-color:${onA}2e"><span class="cx2-splitpill" style="border-color:${onA}66">The Trade-off</span></div>
+    <div class="cx2-splitmain">
+      <div class="cx2-splitdiv" style="background:${onA}2e"></div>
+      ${comparePane(bgA, onA, emphA, "Expansive", "SIGNAL", "amplified", ICON.up)}
+      ${comparePane(bgB, onB, emphB, "Restrictive", "NOISE", "filtered", ICON.down)}
+    </div>
+    <div class="cx2-splitft" style="border-color:${onA}2e"><span>Trade-off</span><span>Frame System · 2026</span></div>
+  </div>`;
+};
+// Centered drawn beats + the two asset frames. Grounds rotate so a dark full-bleed frame lands in
+// the set; the asset frames anchor with a real image (element + background).
+const composed = [
+  cxCell(coverFrame(canvasGround), "Identity / Cover", "avatar overlay + wordmark"),
+  cxCell(claimFrame(g(1)), "Oversized Claim", "serif-italic statement"),
+  cxCell(
+    compareFrame(canvasGround, ["accent", accent, onColorFor(accent)]),
+    "Comparison",
+    "half-and-half · two-tone",
+  ),
+  cxCell(statFrame(g(2)), "Avatar + Overlay", "presenter + audio waveform"),
+  cxCell(networkFrame(g(4)), "System Map", "hub-spoke · ported from FOMC diagram"),
+  cxCell(assetElFrame(g(2)), "Asset · Element", "photo + accent ring"),
+  cxCell(assetBgFrame(g(1)), "Asset · Background", "full-bleed + scrim"),
+].join("");
+// keep the material/focal frame (glass or card on gradient + giant CTA) as the 5th
+const focalCell = cell(
+  "plate",
+  plateInner,
+  `Focal · ${hasGlass ? "glass on gradient" : "material"}`,
+  "focal",
+  "material",
+);
+
+const swatches = Object.entries(colors)
+  .map(
+    ([k, v]) =>
+      `<div class="sw"><div class="chip" style="background:${v}"></div><div class="sm"><b>${k}</b><code>${v}</code></div></div>`,
+  )
+  .join("");
+
+// brand-neutral type specimens (no source-brand copy).
+const sampleFor = (role) =>
+  ({
+    heading: "A clear, confident headline",
+    display: "The opening line",
+    "heading-2": "A supporting subhead",
+    "heading-3": "Section title in one line",
+    "heading-4": "A smaller section title",
+    "body-small": "A short line of body copy that sets the context in a sentence or two.",
+    label: "SECTION · LABEL",
+    code: "const frame = compose(scene);",
+    "display-hero": "Said once.",
+    "wordmark-mega": "Aa",
+  })[role] ?? `Aa — ${role}`;
+
+// type color is a palette role key (→ CSS var) OR a literal hex (a brand-inked heading kept verbatim)
+const typeColor = (c) => (/^#/.test(String(c)) ? c : `var(--${c}, ${ink})`);
+const typeRows = types
+  .map((t) => {
+    const ls = t.tracking ? `letter-spacing:${t.tracking};` : "";
+    const shown = Math.min(t.px, 92); // cap specimen so huge hero sizes stay on one line
+    return `<div class="trow"><div class="tmeta"><b>${t.role}</b><span>${t.fontFamily} ${t.weight} · ${Math.round(t.px)}px${t.cqw != null ? ` · ${t.cqw}cqw` : ""}</span></div>
+      <div class="tspec" style="font-family:'${t.fontFamily}',sans-serif;font-size:${shown}px;font-weight:${t.weight};line-height:${t.lineHeight};${ls}color:${typeColor(t.color)}">${sampleFor(t.role)}</div></div>`;
+  })
+  .join("");
+
+// video-native atoms from brand tokens: universal core + material-specific ones the capture actually has.
+const findComp = (re) => components.find((c) => re.test(c.name));
+const secondaryTok = findComp(/^button-secondary$/);
+const cardTok = findComp(/^card$/);
+const glassTok = findComp(/^glass-panel$/);
+const btnBg = btnPrimary ? resolveRefs(btnPrimary.props.backgroundColor ?? "{colors.ink}") : ink;
+const btnFg = btnPrimary ? resolveRefs(btnPrimary.props.textColor ?? "{colors.canvas}") : canvas;
+const btnRad = btnPrimary ? resolveRefs(btnPrimary.props.rounded ?? r1) : r1;
+const pillRad = /9999|999|50%/.test(String(radii.r2)) ? resolveRefs(radii.r2) : "999px";
+const cardRad = cardTok ? resolveRefs(cardTok.props.rounded ?? r1) : r1;
+const cardShadow =
+  cardTok && cardTok.props.shadow && cardTok.props.shadow !== "none"
+    ? resolveRefs(cardTok.props.shadow)
+    : `inset 0 0 0 1px ${chipHair}`;
+const labelFont = types.find((t) => t.role === "label")?.fontFamily ?? bodyFont;
+const videoComps = [
+  {
+    name: "kicker",
+    demo: `<div class="v-kick" style="color:${accent};font-family:'${labelFont}'">◆&nbsp;&nbsp;SECTION LABEL</div>`,
+  },
+  {
+    name: "title lockup",
+    demo: `<div class="v-lock"><div class="v-lock-h" style="font-family:'${dispFont}'">Headline set here</div><span class="v-rule" style="background:${accent}"></span></div>`,
+  },
+  {
+    name: "lower-third",
+    demo: `<div class="v-lt" style="border-left:4px solid ${accent}"><div class="v-lt-t" style="font-family:'${dispFont}'">Name Here</div><div class="v-lt-s" style="font-family:'${labelFont}'">ROLE · SUBTITLE</div></div>`,
+  },
+  {
+    name: "caption",
+    demo: `<div class="v-cap" style="background:${ink};color:${onColorFor(ink)};border-radius:${pillRad}">the spoken line, captioned</div>`,
+  },
+  {
+    name: "CTA end-card",
+    demo: `<span class="v-cta" style="background:${btnBg};color:${btnFg};border-radius:${btnRad};font-family:'${dispFont}'">Get started</span>`,
+  },
+  // ── brand-specific: only present when the capture actually has the material ──
+  secondaryTok && {
+    name: "ghost button",
+    demo: `<span class="v-cta v-ghost" style="border:1.5px solid ${resolveRefs(secondaryTok.props.border?.match(/\{colors\.[\w-]+\}|#[0-9a-fA-F]{6}/)?.[0] ?? "{colors.ink-muted}")};color:${resolveRefs(secondaryTok.props.textColor ?? "{colors.ink}")};border-radius:${resolveRefs(secondaryTok.props.rounded ?? btnRad)};font-family:'${dispFont}'">Learn more</span>`,
+  },
+  cardTok && {
+    name: "callout card",
+    demo: `<div class="v-card" style="border-radius:${cardRad};box-shadow:${cardShadow};background:${canvas}"><div class="v-card-k" style="color:${accent};font-family:'${labelFont}'">PULL-QUOTE</div><div class="v-card-t" style="font-family:'${dispFont}'">A line worth framing.</div></div>`,
+  },
+  glassTok && {
+    name: "glass panel",
+    demo: `<div class="v-glasswrap" style="background:${brandWash ?? `linear-gradient(120deg, ${accent}, ${canvas})`}"><div class="v-glass" style="background:${resolveRefs(glassTok.props.backgroundImage ?? "rgba(255,255,255,.4)")};backdrop-filter:${glassTok.props.backdropFilter ?? "blur(12px)"};border-radius:${resolveRefs(glassTok.props.rounded ?? r1)};font-family:'${dispFont}'">Frosted</div></div>`,
+  },
+  {
+    name: "badge / tag",
+    demo: `<span class="v-badge" style="border-color:${accent};color:${accent};border-radius:${pillRad};font-family:'${labelFont}'">NEW</span>`,
+  },
+  accents.length >= 2 && {
+    name: "brand spectrum",
+    demo: `<div class="v-spec" style="background:${brandWash}"></div>`,
+  },
+  {
+    name: "progress",
+    demo: `<div class="v-prog"><span style="width:62%;background:${accent}"></span></div>`,
+  },
+].filter(Boolean);
+const compRow = videoComps
+  .map((c) => `<div class="cdemo"><div class="cnote">${c.name}</div>${c.demo}</div>`)
+  .join("");
+
+// Foundations — radius / spacing / elevation: real captured tokens the showcase used to hide entirely.
+const radiiRow = Object.entries(radii)
+  .map(
+    ([k, v]) =>
+      `<div class="fitem"><div class="fbox" style="border-radius:${resolveRefs(v)}"></div><div class="fmeta"><b>${k}</b><code>${v}</code></div></div>`,
+  )
+  .join("");
+const spaceVals = Object.entries(spacing).map(([k, v]) => [k, v, parseFloat(v) || 0]);
+const spaceMax = Math.max(1, ...spaceVals.map(([, , n]) => n));
+const spacingRow = spaceVals
+  .map(
+    ([k, v, n]) =>
+      `<div class="fspace"><div class="fbar" style="width:${Math.max(4, (n / spaceMax) * 66)}%;background:${accent}"></div><div class="fmeta"><b>${k}</b><code>${v}</code></div></div>`,
+  )
+  .join("");
+const shadowRow = Object.entries(shadows)
+  .map(([k, v]) => `<div class="fcard" style="box-shadow:${resolveRefs(v)}"><b>${k}</b></div>`)
+  .join("");
+const foundationsSection =
+  radiiRow || spacingRow || shadowRow
+    ? `<section>
+      <div class="sec-head"><span class="bar"></span><h2>Foundations</h2><span class="idx">03 · radius · spacing · elevation</span></div>
+      <div class="panel fpanel">
+        ${radiiRow ? `<div class="fgroup"><div class="flabel">Radius</div><div class="frow">${radiiRow}</div></div>` : ""}
+        ${spacingRow ? `<div class="fgroup"><div class="flabel">Spacing scale</div><div class="fcol">${spacingRow}</div></div>` : ""}
+        ${shadowRow ? `<div class="fgroup"><div class="flabel">Elevation</div><div class="frow">${shadowRow}</div></div>` : ""}
+      </div>
+    </section>`
+    : "";
+
+// rough page height so the screenshot isn't clipped
+const boardW = 1280;
+const coverH = Math.round((boardW * 9) / 16);
+const frameInnerW = (1180 - 96 - 40) / 2;
+// sheet = 2-col grid of all composed cells; budget the real row count so nothing clips.
+const SHEET_CELLS = 8;
+const sheetRows = Math.ceil(SHEET_CELLS / 2);
+const sheetRowH = Math.round((frameInnerW * 9) / 16) + 64;
+const sheetH = sheetRows * sheetRowH + (sheetRows - 1) * 40 + 120;
+const portraitFrameW = 320;
+// portrait frame height + rail + section head + section padding, with margin so it never clips
+const portraitH = Math.round((portraitFrameW * 16) / 9) + 60 + 90 + 108;
+// Foundations section: radius+spacing+elevation groups + heading/pad (0 when frame.md has none).
+const foundationsH = foundationsSection
+  ? 130 +
+    (radiiRow ? 150 : 0) +
+    (spacingRow ? Object.keys(spacing).length * 30 + 60 : 0) +
+    (shadowRow ? 140 : 0)
+  : 0;
+const docH = 360 + (types.length * 72 + 150) + foundationsH + 320 + sheetH + portraitH + 260;
+const boardH = coverH + docH;
+
+const html = `<!doctype html><html><head><meta charset="utf-8">
+<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=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+<style>${fontFace.replace(/<\/?style>/g, "")}</style>
+<style>
+  :root{ ${cssVars} --disp:'${dispFont}',sans-serif; --body:'${bodyFont}',sans-serif; --serif:'Instrument Serif',Georgia,serif; --mono:'JetBrains Mono',ui-monospace,monospace }
+  *{margin:0;box-sizing:border-box}
+  html{background:${galleryBg}}
+  body{width:${boardW}px;background:${galleryBg};color:${docInk};font-family:var(--body)}
+
+  /* full-bleed cover (a real 16:9 frame, first element) */
+  .frame{ container-type:size; position:relative; overflow:hidden; background:${canvas}; color:${ink} }
+  .frame .fill{ position:absolute; inset:0; padding:6cqw; display:flex; flex-direction:column }
+  /* cover sits on the real page ground (canvas) — a captured gradient is a LOCAL decoration on the
+     site, not the page background, so we no longer slap it full-frame as a rigid blob. */
+  .cover{ width:100%; aspect-ratio:16/9; background:${canvas} }
+  .eyebrow{ font-family:var(--disp); font-size:${eyebrowCqw}cqw; letter-spacing:.22em; text-transform:uppercase; color:${accent}; white-space:nowrap }
+  .aline{ width:9cqw; height:.5cqw; background:${accent}; margin-bottom:2.4cqw }
+  .wordmark{ font-family:var(--disp); font-size:${wmCqw}cqw; font-weight:${parseTypo(btnPrimary?.props.typography).weight}; line-height:.96; letter-spacing:-.03em; color:${ink}; margin-top:auto; max-height:60cqh; overflow:hidden }
+  .coversub{ font-family:var(--body); font-size:1.9cqw; color:${inkMuted}; max-width:60cqw; margin-top:1.6cqw }
+  .counter{ position:absolute; right:6cqw; bottom:6cqw; font-family:var(--disp); font-size:1.5cqw; letter-spacing:.1em; color:${inkMuted} }
+  .pbar{ position:absolute; left:0; bottom:0; height:.7cqw; width:38%; background:${brandWash ?? accent} }
+
+  /* doc chrome — wears the brand on a ground derived from the brand's own luminance */
+  .doc{ max-width:1180px; margin:0 auto; padding:96px 48px 140px }
+  section{ padding:54px 0; border-top:1px solid ${secBorder} }
+  .sec-head{ display:flex; align-items:center; gap:16px; margin-bottom:34px }
+  .sec-head .bar{ width:34px; height:4px; background:${accent} }
+  .sec-head h2{ font-family:var(--disp); font-weight:600; font-size:30px; color:${docInk}; letter-spacing:-.01em }
+  .sec-head .idx{ font-family:var(--disp); color:${docFaint}; font-size:15px; margin-left:auto; letter-spacing:.1em }
+
+  .panel{ background:${canvas}; color:${ink}; border-radius:14px; padding:40px; box-shadow:${frameShadow} }
+  .swatches{ display:grid; grid-template-columns:repeat(5,1fr); gap:20px }
+  .sw .chip{ height:84px; border-radius:${r1}; box-shadow:inset 0 0 0 1px ${chipHair} }
+  .sm b{ font-family:var(--disp); font-size:14px; display:block; margin-top:10px } .sm code{ font-size:12px; opacity:.7 }
+
+  .trow{ display:grid; grid-template-columns:230px 1fr; gap:24px; align-items:center; padding:16px 0; border-bottom:1px solid ${secBorder} }
+  .tmeta b{ font-family:var(--disp); font-size:15px; display:block } .tmeta span{ font-size:12px; opacity:.68 }
+  .tspec{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
+
+  .comprow{ display:flex; gap:36px 40px; flex-wrap:wrap; align-items:flex-end }
+  .cdemo{ display:flex; flex-direction:column; gap:12px }
+  .cnote{ font-size:12px; letter-spacing:.06em; opacity:.68; font-family:var(--disp) }
+  /* video-native component kit (built from brand tokens) */
+  .v-kick{ font-size:13px; font-weight:700; letter-spacing:.16em; text-transform:uppercase }
+  .v-lock{ display:flex; flex-direction:column; gap:9px; align-items:flex-start }
+  .v-lock-h{ font-size:26px; font-weight:700; color:${ink}; line-height:1 }
+  .v-rule{ width:52px; height:4px; border-radius:2px }
+  .v-lt{ padding:10px 16px; background:${canvas}; box-shadow:${frameShadow}; border-radius:6px }
+  .v-lt-t{ font-size:19px; font-weight:700; color:${ink}; line-height:1.1 }
+  .v-lt-s{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; opacity:.62; margin-top:3px }
+  .v-cap{ padding:9px 18px; font-size:15px; font-weight:600; max-width:240px }
+  .v-cta{ display:inline-block; padding:13px 26px; font-size:16px; font-weight:700 }
+  .v-badge{ display:inline-block; padding:5px 14px; border:1.5px solid; font-size:12px; font-weight:700; letter-spacing:.1em }
+  .v-ghost{ background:transparent !important }
+  .v-card{ width:210px; padding:18px 20px; display:flex; flex-direction:column; gap:8px; align-items:flex-start }
+  .v-card-k{ font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase }
+  .v-card-t{ font-size:19px; font-weight:700; color:${ink}; line-height:1.15 }
+  .v-glasswrap{ padding:16px; border-radius:14px; display:inline-flex }
+  .v-glass{ padding:14px 22px; font-size:15px; font-weight:700; color:${ink}; box-shadow:0 6px 20px rgba(0,0,0,.16) }
+  .v-spec{ width:230px; height:44px; border-radius:8px }
+  .v-prog{ width:230px; height:8px; border-radius:999px; background:${chipHair}; overflow:hidden } .v-prog span{ display:block; height:100% }
+
+  /* foundations — radius / spacing / elevation */
+  .fpanel{ display:flex; flex-direction:column; gap:34px }
+  .fgroup{ display:flex; flex-direction:column; gap:16px }
+  .flabel{ font-family:var(--disp); font-size:13px; letter-spacing:.12em; text-transform:uppercase; opacity:.6 }
+  .frow{ display:flex; gap:34px; flex-wrap:wrap; align-items:flex-end }
+  .fcol{ display:flex; flex-direction:column; gap:14px; max-width:560px }
+  .fitem{ display:flex; flex-direction:column; gap:10px }
+  .fbox{ width:96px; height:64px; background:${accent}; box-shadow:inset 0 0 0 1px ${chipHair} }
+  .fmeta b{ font-family:var(--disp); font-size:14px; display:inline-block; margin-right:8px } .fmeta code{ font-size:12px; opacity:.66 }
+  .fspace{ display:flex; align-items:center; gap:16px }
+  .fbar{ height:14px; border-radius:3px; flex:none }
+  .fcard{ width:150px; height:78px; background:${canvas}; border-radius:12px; display:flex; align-items:flex-end; padding:12px } .fcard b{ font-family:var(--disp); font-size:13px; opacity:.7 }
+  .spectrum{ height:22px; border-radius:8px; margin-top:22px; box-shadow:inset 0 0 0 1px ${chipHair} }
+${compCss}
+
+  /* contact sheet of composed frames */
+  .sheet{ display:grid; grid-template-columns:repeat(2,1fr); gap:40px }
+  .cell .frame{ width:100%; aspect-ratio:16/9; border-radius:10px; box-shadow:${frameShadow} }
+  .rail{ display:flex; gap:10px; align-items:baseline; padding:12px 2px 0 }
+  .rail .rn{ font-family:var(--disp); color:${railName}; font-size:14px } .rail .ra{ color:${railAttr}; font-size:12px; letter-spacing:.04em }
+  .portrait{ display:flex; gap:32px }
+  .portrait .cell .frame{ width:${portraitFrameW}px; aspect-ratio:9/16 }
+
+  /* per-archetype frame internals (all in cqw → true frame proportions) */
+  .claim{ font-family:var(--disp); font-size:${Math.min(heroCqw + 2, 12)}cqw; font-weight:${parseTypo(btnPrimary?.props.typography).weight}; line-height:1.0; letter-spacing:-.02em; color:${ink}; margin:auto 0; max-width:78cqw }
+  .claim em{ font-style:normal; color:${accent} }
+  /* focal-artifact: the captured gradient as the frame GROUND, a floating glass/card panel as the
+     MATERIAL, and the frame-scale CTA composed on top — background + material + component as one. */
+  .plate{ background:${focalGround} }
+  .platewrap{ margin:auto 0; width:100%; display:flex; justify-content:center }
+  .platepanel{ width:58cqw; flex-direction:column !important; align-items:flex-start !important; justify-content:center; gap:2cqw; padding:5cqw; ${panelBg}border:1px solid ${chipHair}; box-shadow:0 2cqw 6cqw rgba(0,0,0,.24) }
+  .platepanel .cardk{ font-family:var(--body); font-size:1.7cqw; color:${ink}; opacity:.72; text-transform:uppercase; letter-spacing:.12em }
+  .platepanel .cardv{ font-family:var(--disp); font-size:9cqw; color:${ink}; line-height:.92; margin-bottom:1cqw }
+  .c-button-primary-giant{ white-space:nowrap }
+
+  /* grounds-driven editorial-chrome frames */
+  .cx{ display:flex; flex-direction:column; overflow:hidden }
+  .cx-tex{ position:absolute; inset:0; background:radial-gradient(120% 90% at 24% 12%, currentColor 0, transparent 62%); opacity:.06; pointer-events:none }
+  .cx-rail{ display:flex; justify-content:space-between; align-items:center; padding:2.4cqw 4cqw; font-family:var(--disp); font-size:1.15cqw; letter-spacing:.16em; text-transform:uppercase; z-index:1 }
+  .cx-top{ border-bottom:1px solid currentColor }
+  .cx-bot{ border-top:1px solid currentColor; margin-top:auto }
+  .cx-status{ display:flex; align-items:center; gap:.7cqw } .cx-status i{ width:.85cqw; height:.85cqw; border-radius:50%; display:block }
+  .cx-main{ flex:1; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:3.5cqw 4cqw; gap:1.6cqw; z-index:1 }
+  .cx-eye{ font-family:var(--disp); font-size:1.35cqw; letter-spacing:.22em; text-transform:uppercase; font-weight:700 }
+  .cx-word{ font-family:var(--disp); font-size:${wmCqw}cqw; line-height:.94; letter-spacing:-.03em; font-weight:800; max-height:52cqh; overflow:hidden }
+  .cx-sub{ font-family:var(--body); font-size:1.7cqw; opacity:.72 }
+  .cx-claim{ font-family:var(--disp); font-size:${Math.min(heroCqw + 1, 9.5)}cqw; line-height:1.02; letter-spacing:-.02em; font-weight:800; max-width:82cqw } .cx-claim em{ font-style:normal }
+  /* ── rebuilt first-three beats (real video-agent idiom) ── */
+  .cx2{ position:relative; overflow:hidden }
+  .cx2-tex{ position:absolute; inset:0; opacity:.09; background-image:radial-gradient(currentColor 1px,transparent 1px); background-size:2.2cqw 2.2cqw; pointer-events:none }
+  .cx2-kick{ position:absolute; top:5cqw; left:6cqw; z-index:2; font-family:var(--mono); font-size:1.5cqw; letter-spacing:.2em; text-transform:uppercase; display:flex; align-items:center; gap:1.1cqw }
+  .cx2-kick::before{ content:""; width:3.2cqw; height:1px; background:currentColor }
+  .cx2-ft{ position:absolute; left:6cqw; right:6cqw; bottom:3.4cqw; z-index:2; display:flex; justify-content:space-between; font-family:var(--mono); font-size:1.2cqw; letter-spacing:.12em; text-transform:uppercase; border-top:1px solid; padding-top:1.4cqw; opacity:.85 }
+  /* Claim = pure typographic b_roll */
+  .cx2-claim-main{ position:absolute; inset:0; z-index:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:.3cqw; padding:0 8cqw }
+  .cx2-bigline{ font-family:var(--disp); font-weight:800; font-size:7.2cqw; line-height:1.0; letter-spacing:-.02em }
+  .cx2-serif-lg{ font-family:var(--serif); font-style:italic; font-size:8.6cqw; line-height:.92 }
+  /* A-roll = full-frame talking-head avatar (real bg) + transparent overlay detail on top */
+  .cx2-aroll{ position:relative; overflow:hidden }
+  .cx2-arimg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 16% }
+  .cx2-arscrim{ position:absolute; inset:0 }
+  .cx2-arpill{ position:absolute; top:5cqw; left:5cqw; z-index:2; font-family:var(--mono); font-size:1.5cqw; letter-spacing:.2em; text-transform:uppercase; border:1px solid #ffffffaa; border-radius:999px; padding:.9cqw 2.4cqw }
+  .cx2-arstamp{ position:absolute; right:5cqw; bottom:6cqw; z-index:2; font-family:var(--mono); font-size:1.5cqw; letter-spacing:.18em; opacity:.9 }
+  /* cover overlay stays bottom-left — off the face */
+  .cx2-arlower{ position:absolute; left:5cqw; bottom:6cqw; z-index:2; max-width:60cqw }
+  .cx2-areye{ font-family:var(--mono); font-size:1.4cqw; letter-spacing:.2em; text-transform:uppercase; opacity:.85; margin-bottom:1cqw }
+  .cx2-artitle{ font-family:var(--serif); font-style:italic; font-size:7.5cqw; line-height:.92; text-shadow:0 .3cqw 2.4cqw rgba(0,0,0,.5) }
+  .cx2-arrule{ display:block; width:12cqw; height:.55cqw; margin-top:1.6cqw; border-radius:999px }
+  /* network (hub-spoke, ported from FOMC Members Diagram) */
+  .cx3-net{ position:relative; overflow:hidden }
+  .cx3-head{ position:absolute; top:5cqw; left:5cqw; z-index:3 }
+  .cx3-title{ font-family:var(--disp); font-weight:800; font-size:4.4cqw; text-transform:uppercase; letter-spacing:-.02em; line-height:1 }
+  .cx3-sub{ font-family:var(--mono); font-size:1.5cqw; letter-spacing:.14em; text-transform:uppercase; opacity:.7; margin-top:.8cqw }
+  .cx3-diagram{ position:absolute; left:50%; top:55%; transform:translate(-50%,-50%); width:40cqw; height:40cqw }
+  .cx3-svg{ position:absolute; inset:0; width:100%; height:100% }
+  .cx3-hub{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:30%; height:30%; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--disp); font-weight:800; font-size:2.8cqw; letter-spacing:.04em; z-index:4; box-shadow:0 1cqw 3cqw rgba(0,0,0,.2) }
+  .cx3-node{ position:absolute; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; width:22cqw; z-index:3 }
+  .cx3-ndot{ width:5cqw; height:5cqw; border-radius:50%; border:.45cqw solid; display:flex; align-items:center; justify-content:center }
+  .cx3-ndot i{ width:1.5cqw; height:1.5cqw; border-radius:50%; display:block }
+  .cx3-nlab{ font-family:var(--disp); font-weight:700; font-size:2cqw; margin-top:.7cqw }
+  .cx3-legend{ position:absolute; right:5cqw; bottom:4.5cqw; z-index:3; display:flex; gap:2.4cqw; font-family:var(--mono); font-size:1.4cqw; text-transform:uppercase; letter-spacing:.08em; opacity:.85 }
+  .cx3-lg{ display:flex; align-items:center; gap:.8cqw } .cx3-lg i{ width:1.4cqw; height:1.4cqw; border-radius:50%; display:inline-block }
+  /* Forward Guidance lower-third — the card IS the container; content padded inside it */
+  .cx2-fgcard{ position:absolute; left:4cqw; bottom:4cqw; z-index:2; display:inline-flex; flex-direction:column; align-items:flex-start; gap:1.3cqw; padding:2.8cqw 3cqw; border-radius:1.6cqw; max-width:52cqw; box-shadow:0 1cqw 4cqw rgba(0,0,0,.28) }
+  .cx2-lt-pill{ width:fit-content; padding:.6cqw 1.8cqw; border:.14cqw solid; border-radius:999px; font-family:var(--mono); font-size:1.3cqw; text-transform:uppercase; letter-spacing:.1em }
+  .cx2-lt-eye{ font-family:var(--mono); font-size:1.3cqw; text-transform:uppercase; letter-spacing:.15em; opacity:.78 }
+  .cx2-lt-head{ font-family:var(--disp); font-weight:800; font-size:4.6cqw; line-height:.95; letter-spacing:-.02em }
+  .cx2-lt-wave{ display:flex; align-items:center; gap:.35cqw; height:4.5cqw }
+  .cx2-fgbar{ width:.42cqw; border-radius:999px; flex:none; min-height:1cqw }
+  /* faithful half-and-half comparison (QE/QT idiom) */
+  .cx2-split{ position:relative; display:flex; flex-direction:column; overflow:hidden }
+  .cx2-splithd{ height:15cqh; display:flex; align-items:center; justify-content:center; border-bottom:1px solid; z-index:2 }
+  .cx2-splitpill{ font-family:var(--mono); font-size:1.5cqw; letter-spacing:.2em; text-transform:uppercase; border:1px solid; border-radius:999px; padding:.8cqw 2.8cqw }
+  .cx2-splitmain{ flex:1; display:grid; grid-template-columns:1fr 1fr; position:relative; min-height:0 }
+  .cx2-splitdiv{ position:absolute; left:50%; top:0; bottom:0; width:1px; transform:translateX(-50%); z-index:3 }
+  .cx2-pane{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.4cqw; padding:3cqw; overflow:hidden }
+  .cx2-plabel{ font-family:var(--mono); font-size:1.45cqw; letter-spacing:.2em; text-transform:uppercase; opacity:.82 }
+  .cx2-pbig{ font-family:var(--disp); font-weight:800; font-size:11cqw; line-height:.86; letter-spacing:-.03em }
+  .cx2-pserif{ font-family:var(--serif); font-style:italic; font-size:5cqw; line-height:.9 }
+  .cx2-picon{ margin-top:1.4cqw } .cx2-picon svg{ width:6.5cqw; height:6.5cqw }
+  .cx2-splitft{ height:10cqh; display:flex; align-items:center; justify-content:space-between; padding:0 5cqw; border-top:1px solid; font-family:var(--mono); font-size:1.3cqw; letter-spacing:.14em; text-transform:uppercase; opacity:.85; z-index:2 }
+  .cx-num{ font-family:var(--disp); font-size:17cqw; line-height:.84; letter-spacing:-.03em; font-weight:800 }
+  .cx-spark{ width:34cqw; height:5cqw; display:block }
+  .cx-lab{ font-family:var(--body); font-size:1.6cqw; opacity:.72 }
+  .cx-cmp{ display:grid; grid-template-columns:1fr 1fr; gap:2.5cqw; margin-top:1cqw }
+  .cx-pane{ border:1px solid currentColor; border-radius:${r1}; padding:3cqw; display:flex; flex-direction:column; align-items:center; text-align:center; gap:1.2cqw }
+  .cx-pk{ font-family:var(--body); font-size:1.4cqw; text-transform:uppercase; letter-spacing:.12em; opacity:.7 }
+  .cx-pv{ font-family:var(--disp); font-size:5.5cqw; font-weight:800; line-height:1 }
+  .cx-focus{ margin:1cqw 0 } .cx-focus svg{ width:16cqw; height:16cqw; display:block; stroke-width:1.3 }
+  /* inline SVG icons + flow-diagram nodes/connectors */
+  .cx-ic{ width:6cqw; height:6cqw; display:block }
+  .cx-flow{ display:flex; align-items:center; justify-content:center; gap:1.8cqw; margin-top:1cqw }
+  .cx-node{ border:1px solid currentColor; border-radius:${r1}; padding:2.6cqw 2cqw; display:flex; flex-direction:column; align-items:center; gap:1cqw; min-width:17cqw }
+  .cx-nl{ font-family:var(--disp); font-size:2.2cqw; font-weight:800; line-height:1 }
+  .cx-ns{ font-family:var(--body); font-size:1.15cqw; opacity:.6; text-transform:uppercase; letter-spacing:.12em }
+  .cx-conn{ display:flex; align-items:center } .cx-arrow{ width:5cqw; height:3cqw; display:block }
+  /* ── asset frames: element (masked photo + accent ring) + background (full-bleed + scrim) ── */
+  .cx-asset .cx-tex{ opacity:.05 }
+  .cx-ael{ flex:1; display:flex; align-items:center; gap:3cqw; padding:4cqw 4.5cqw; z-index:1 }
+  .cx-aet{ flex:1; display:flex; flex-direction:column; gap:2cqw; text-align:left }
+  .cx-aeh{ font-family:var(--disp); font-size:8cqw; line-height:.96; letter-spacing:-.02em; font-weight:800 } .cx-aeh em{ font-style:normal }
+  .cx-abadges{ display:flex; flex-wrap:wrap; gap:1.2cqw; margin-top:1cqw }
+  .cx-badge{ display:inline-flex; align-items:center; gap:.8cqw; border:1px solid currentColor; border-radius:999px; padding:1cqw 2.2cqw; font-family:var(--disp); font-weight:700; font-size:1.9cqw; letter-spacing:.02em }
+  .cx-badge svg{ width:2.6cqw; height:2.6cqw }
+  .cx-aeimg{ position:relative; width:40cqw; height:40cqw; flex:none; display:flex; align-items:center; justify-content:center }
+  .cx-orbit{ position:absolute; inset:-1cqw; border-radius:50%; border:1px dashed currentColor; opacity:.6 }
+  .cx-circ{ width:34cqw; height:34cqw; border-radius:50%; overflow:hidden; border:1cqw solid currentColor; box-shadow:0 2cqw 5cqw rgba(0,0,0,.28) }
+  .cx-circ img{ width:100%; height:100%; object-fit:cover; display:block }
+  .cx-assetbg{ position:relative }
+  .cx-bgimg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0 }
+  .cx-scrim{ position:absolute; inset:0; z-index:1 }
+  .cx-bgmain{ position:relative; z-index:2 }
+</style></head>
+<body>
+  <!-- cover: full-bleed identity frame, before any doc chrome -->
+  <div class="cover frame"><div class="fill">${coverInner}</div></div>
+
+  <div class="doc">
+    <section style="border-top:0">
+      <div class="sec-head"><span class="bar"></span><h2>Palette</h2><span class="idx">01${accents.length >= 2 ? " · brand spectrum" : ""}</span></div>
+      <div class="panel"><div class="swatches">${swatches}</div>${brandWash ? `<div class="spectrum" style="background:${brandWash}"></div>` : ""}</div>
+    </section>
+
+    <section>
+      <div class="sec-head"><span class="bar"></span><h2>Typography</h2><span class="idx">02 · two ramps</span></div>
+      <div class="panel">${typeRows}</div>
+    </section>
+
+    ${foundationsSection}
+
+    <section>
+      <div class="sec-head"><span class="bar"></span><h2>Components</h2><span class="idx">04 · video-ready atoms</span></div>
+      <div class="panel"><div class="comprow">${compRow}</div></div>
+    </section>
+
+    <section>
+      <div class="sec-head"><span class="bar"></span><h2>Frame Compositions</h2><span class="idx">05 · 16:9</span></div>
+      <div class="sheet">
+        ${composed}
+        ${focalCell}
+      </div>
+    </section>
+
+    <section>
+      <div class="sec-head"><span class="bar"></span><h2>Portrait · 9:16</h2><span class="idx">06 · reflow proof</span></div>
+      <div class="portrait">
+        ${cxCell(cxFrame("cx-cover", canvasGround, aCover), "Cover", "9:16")}
+        ${cxCell(assetBgFrame(g(1)), "Asset", "9:16")}
+        ${cxCell(cxFrame("cx-st", g(2), aStat), "Stat", "9:16")}
+      </div>
+    </section>
+  </div>
+</body></html>`;
+
+const htmlPath = join(outDir, "frame-showcase.html");
+const pngPath = join(outDir, "showcase.png");
+writeFileSync(htmlPath, html);
+
+if (!CHROME) {
+  console.log(
+    `✓ wrote ${htmlPath} (no Chrome found — open it manually; pass --chrome <path> to screenshot)`,
+  );
+  process.exit(0);
+}
+
+const profile = mkdtempSync(join(tmpdir(), "fg-chrome-"));
+const before = statSafe(pngPath);
+const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
+const child = spawn(
+  CHROME,
+  [
+    "--headless=new",
+    "--disable-gpu",
+    "--hide-scrollbars",
+    "--no-first-run",
+    "--no-default-browser-check",
+    ...(noSandbox ? ["--no-sandbox", "--disable-setuid-sandbox"] : []),
+    `--user-data-dir=${profile}`,
+    "--force-device-scale-factor=1",
+    `--default-background-color=${galleryBg.replace("#", "")}ff`,
+    `--screenshot=${pngPath}`,
+    `--window-size=${boardW},${boardH}`,
+    "--virtual-time-budget=4000",
+    `file://${htmlPath}`,
+  ],
+  { stdio: "ignore" },
+);
+let done = null;
+for (let waited = 0; waited < 20000; waited += 300) {
+  await sleep(300);
+  const s = statSafe(pngPath);
+  if (s && s.size > 0 && (!before || s.mtimeMs !== before.mtimeMs)) {
+    await sleep(300);
+    const s2 = statSafe(pngPath);
+    if (s2 && s2.size === s.size) {
+      done = s2;
+      break;
+    }
+  }
+  if (child.exitCode != null) break;
+}
+try {
+  child.kill("SIGKILL");
+} catch {
+  // already gone
+}
+if (!done) die(`Chrome did not produce a screenshot at ${pngPath}`);
+console.log(
+  `✓ render-showcase → ${pngPath}  (${boardW}×${boardH}, ${Math.round(done.size / 1024)}KB)`,
+);
+console.log(`  html: ${htmlPath}`);
+console.log(`  compare against: ${join(baseDir, "screenshots/contact-sheet-1.jpg")}`);
diff --git a/url-to-frame-md/run-all.sh b/url-to-frame-md/run-all.sh
new file mode 100644
index 0000000000..92135d0ef4
--- /dev/null
+++ b/url-to-frame-md/run-all.sh
@@ -0,0 +1,14 @@
+#!/usr/bin/env bash
+# Re-extract (offline) → regenerate → render → verify, across all 11 captures. Sequential so each
+# site gets its own Chrome without port/resource contention.
+set -u
+cd "$(dirname "$0")"
+SITES="stripe livekit doordash snowflake linear elevenlabs kuse heygen opus descript bmw"
+for s in $SITES; do
+  echo "=== $s ==="
+  node reextract-design.mjs --capture "../$s-capture" 2>&1 | grep -E "✓|✗|backgrounds" || echo "  reextract FAIL"
+  node build-frame-from-capture.mjs --capture "../$s-capture" >/dev/null 2>&1 && echo "  gen: ok" || echo "  gen: FAIL"
+  node render-showcase.mjs --frame "../$s-capture/frame.md" --no-sandbox >/dev/null 2>&1 && echo "  render: ok" || echo "  render: FAIL"
+  node verify-frame.mjs --frame "../$s-capture/frame.md" --capture "../$s-capture" 2>&1 | grep -iE "all gates pass|FAIL|✗" | tail -1
+done
+echo "=== DONE ==="
diff --git a/url-to-frame-md/verify-frame.mjs b/url-to-frame-md/verify-frame.mjs
new file mode 100644
index 0000000000..d6241b41a9
--- /dev/null
+++ b/url-to-frame-md/verify-frame.mjs
@@ -0,0 +1,302 @@
+#!/usr/bin/env node
+// verify-frame.mjs — machine gates for a frame.md: L0 schema · L1 coherence · L2 fidelity to capture.
+//   node verify-frame.mjs --frame ./stripe-capture/frame.md --capture ./stripe-capture
+
+import { existsSync, readFileSync } from "node:fs";
+import { join, resolve } from "node:path";
+import { chroma, lum, parseColors, semanticColors } from "./lib/tokens.mjs";
+import { colorDist, isHex, toHex } from "./lib/color.mjs";
+
+const argv = process.argv.slice(2);
+const flag = (n, d) => {
+  const i = argv.indexOf(`--${n}`);
+  return i >= 0 && i + 1 < argv.length ? argv[i + 1] : d;
+};
+
+const captureDir = resolve(flag("capture", "."));
+const framePath = resolve(flag("frame", join(captureDir, "frame.md")));
+const SIZE_TOL = 0.1; // ±10% on type sizes vs the captured computed px
+const COLOR_TOL = 12; // weighted-RGB distance treated as "same color"
+
+if (!existsSync(framePath)) {
+  console.error(`✗ no frame.md at ${framePath}`);
+  process.exit(2);
+}
+const md = readFileSync(framePath, "utf8");
+
+// ── tiny helpers (color parsing/compare live in lib/color.mjs) ───────────────
+const isColorVal = (v) => isHex(v) || /^(rgba?|hsla?|oklch)\([^)]*\)$/i.test(String(v).trim());
+const frontmatter = (() => {
+  const m = /^---\n([\s\S]*?)\n---/.exec(md);
+  return m ? m[1] : "";
+})();
+const frameWidth = (() => {
+  const m = /unit:.*?(\d{3,4})\s*[×x]\s*\d{3,4}/.exec(md);
+  return m ? parseInt(m[1], 10) : 1920;
+})();
+
+// ── parse frame.md frontmatter ───────────────────────────────────────────────
+const colorEntries = parseColors(md); // [[key, value], …] from the colors: block
+const colorKeys = new Set(colorEntries.map(([k]) => k));
+const colorByKey = new Map(colorEntries);
+
+// typography: `role: { fontFamily: "X", cqw: N | px: N, weight: N, …, color: "key" }`
+const typeEntries = [];
+{
+  let inBlock = false;
+  for (const line of frontmatter.split(/\r?\n/)) {
+    if (/^typography:\s*$/.test(line)) {
+      inBlock = true;
+      continue;
+    }
+    if (!inBlock) continue;
+    if (/^\S/.test(line)) break;
+    const m = line.match(/^\s+([\w-]+):\s*\{(.*)\}\s*$/);
+    if (!m) continue;
+    const role = m[1];
+    const body = m[2];
+    const get = (k) => {
+      const mm = body.match(new RegExp(`${k}:\\s*(?:"([^"]+)"|([\\d.\\-]+))`));
+      return mm ? (mm[1] ?? mm[2]) : null;
+    };
+    typeEntries.push({
+      role,
+      fontFamily: get("fontFamily"),
+      cqw: get("cqw") != null ? parseFloat(get("cqw")) : null,
+      px: get("px") != null ? parseFloat(get("px")) : null,
+      weight: get("weight") != null ? parseInt(get("weight"), 10) : null,
+      color: get("color"),
+    });
+  }
+}
+
+// every {colors.X} / {typography.Y} reference in the whole frontmatter
+const colorRefs = [...frontmatter.matchAll(/\{colors\.([\w-]+)\}/g)].map((m) => m[1]);
+const typeRefs = [...frontmatter.matchAll(/\{typography\.([\w-]+)\}/g)].map((m) => m[1]);
+const typeKeys = new Set(typeEntries.map((t) => t.role));
+
+// ── capture source-of-truth ────────────────────────────────────────────────────
+const tokensPath = join(captureDir, "extracted/tokens.json");
+const stylesPath = join(captureDir, "extracted/design-styles.json");
+const readJSON = (p) => {
+  try {
+    return JSON.parse(readFileSync(p, "utf8"));
+  } catch (e) {
+    console.error(`✗ ${p}: invalid JSON — ${e.message}`);
+    process.exit(2);
+  }
+};
+const tokens = existsSync(tokensPath) ? readJSON(tokensPath) : null;
+const styles = existsSync(stylesPath) ? readJSON(stylesPath) : null;
+// "on the site" = ranked palette + every colorStats hex, normalized through toHex.
+const capturePalette = [
+  ...(tokens?.colors ?? []).map((c) => (typeof c === "string" ? c : c?.hex)),
+  ...(tokens?.colorStats ?? []).map((s) => s?.hex),
+]
+  .map((c) => toHex(c))
+  .filter(Boolean);
+const captureFonts = (tokens?.fonts ?? [])
+  .map((f) => (typeof f === "string" ? f : f?.family))
+  .map((f) => String(f).split(",")[0].replace(/['"]/g, "").trim())
+  .filter(Boolean);
+const captureWeights = new Set(
+  (tokens?.fonts ?? [])
+    .flatMap((f) => (Array.isArray(f?.weights) ? f.weights : []))
+    .map((w) => parseInt(w, 10))
+    .filter(Number.isFinite),
+);
+// first occurrence per role wins — the generator dedups the same way, so a duplicated role
+// (e.g. two "heading-3" entries) must compare against the SAME one the generator kept.
+const styleSizeByRole = new Map();
+for (const t of styles?.typography ?? []) {
+  const v = parseFloat(t.fontSize);
+  if (Number.isFinite(v) && !styleSizeByRole.has(t.role)) styleSizeByRole.set(t.role, v);
+}
+const captureRadii = new Set((styles?.radius ?? []).map((r) => String(r).trim()));
+
+// ── run checks ───────────────────────────────────────────────────────────────
+const results = [];
+const add = (level, name, status, detail) => results.push({ level, name, status, detail });
+
+// L0 — parse / schema
+add(
+  "L0",
+  "Frontmatter parses",
+  frontmatter ? "PASS" : "FAIL",
+  frontmatter ? `${frontmatter.split("\n").length} lines` : "no --- frontmatter block found",
+);
+const requiredBlocks = ["colors", "typography", "spacing", "components"];
+const missing = requiredBlocks.filter((b) => !new RegExp(`^${b}:\\s*$`, "m").test(frontmatter));
+add(
+  "L0",
+  "Required blocks present",
+  missing.length ? "FAIL" : "PASS",
+  missing.length ? `missing: ${missing.join(", ")}` : requiredBlocks.join(", "),
+);
+const badColors = colorEntries.filter(([, v]) => !isColorVal(v));
+add(
+  "L0",
+  "Color values valid",
+  badColors.length ? "FAIL" : "PASS",
+  badColors.length
+    ? `invalid: ${badColors.map(([k, v]) => `${k}=${v}`).join(", ")}`
+    : `${colorEntries.length} colors`,
+);
+const typeNoSize = typeEntries.filter((t) => t.cqw == null && t.px == null);
+const typeNoFam = typeEntries.filter((t) => !t.fontFamily);
+add(
+  "L0",
+  "Typography roles well-formed",
+  typeNoSize.length || typeNoFam.length ? "FAIL" : "PASS",
+  typeNoSize.length || typeNoFam.length
+    ? `${typeNoSize.length} missing size, ${typeNoFam.length} missing family`
+    : `${typeEntries.length} roles, all have family+size`,
+);
+const danglingColor = [...new Set(colorRefs)].filter((r) => !colorKeys.has(r));
+const danglingType = [...new Set(typeRefs)].filter((r) => !typeKeys.has(r));
+add(
+  "L0",
+  "No dangling references",
+  danglingColor.length || danglingType.length ? "FAIL" : "PASS",
+  danglingColor.length || danglingType.length
+    ? `colors:{${danglingColor}} typography:{${danglingType}}`
+    : `${colorRefs.length} color + ${typeRefs.length} type refs resolve`,
+);
+
+// L1 — internal coherence
+const inkHex = colorByKey.get("ink") ?? semanticColors(colorEntries).ink;
+const canvasHex = colorByKey.get("canvas") ?? semanticColors(colorEntries).canvas;
+const li = lum(inkHex);
+const lc = lum(canvasHex);
+const sep = li != null && lc != null ? Math.abs(li - lc) : null;
+add(
+  "L1",
+  "ink/canvas contrast",
+  sep == null ? "WARN" : sep >= 40 ? "PASS" : "FAIL",
+  sep == null
+    ? "non-hex ink/canvas — can't measure"
+    : `ink ${inkHex} (lum ${li.toFixed(0)}) vs canvas ${canvasHex} (lum ${lc.toFixed(0)}) — Δ${sep.toFixed(0)} (≥40)`,
+);
+const accentHex = colorByKey.get("accent");
+const accentChroma = accentHex ? chroma(accentHex) : -1;
+add(
+  "L1",
+  "accent is chromatic",
+  accentHex == null ? "WARN" : accentChroma > 40 ? "PASS" : "FAIL",
+  accentHex == null ? "no accent key" : `accent ${accentHex} chroma ${accentChroma} (>40)`,
+);
+const weightsOff = captureWeights.size
+  ? typeEntries.filter((t) => t.weight != null && !captureWeights.has(t.weight))
+  : [];
+add(
+  "L1",
+  "weights ∈ brand faces",
+  !captureWeights.size ? "INFO" : weightsOff.length ? "FAIL" : "PASS",
+  !captureWeights.size
+    ? "no weight data in capture"
+    : weightsOff.length
+      ? `off-face: ${weightsOff.map((t) => `${t.role}=${t.weight}`).join(", ")}`
+      : `all ∈ {${[...captureWeights].sort((a, b) => a - b).join(", ")}}`,
+);
+const cqwInsane = typeEntries.filter((t) => t.cqw != null && (t.cqw <= 0 || t.cqw > 40));
+add(
+  "L1",
+  "cqw in sane range",
+  cqwInsane.length ? "FAIL" : "PASS",
+  cqwInsane.length
+    ? `out of (0,40]: ${cqwInsane.map((t) => `${t.role}=${t.cqw}`).join(", ")}`
+    : `${typeEntries.filter((t) => t.cqw != null).length} cqw sizes ok`,
+);
+
+// L2 — fidelity to source (only when capture data is present)
+if (!tokens) {
+  add("L2", "Fidelity to capture", "INFO", "no capture tokens.json — skipped");
+} else {
+  const invented = colorEntries
+    .filter(([, v]) => isHex(v))
+    .filter(([, v]) => !capturePalette.some((c) => colorDist(v, c) <= COLOR_TOL));
+  add(
+    "L2",
+    "Colors ⊆ captured palette",
+    invented.length ? "FAIL" : "PASS",
+    invented.length
+      ? `not on site: ${invented.map(([k, v]) => `${k}=${v}`).join(", ")}`
+      : `${colorEntries.length} colors all match capture (±${COLOR_TOL})`,
+  );
+
+  const normF = (s) =>
+    String(s)
+      .toLowerCase()
+      .replace(/[^a-z0-9]/g, "");
+  const capFamNorm = captureFonts.map(normF);
+  const fontsOff = [...new Set(typeEntries.map((t) => t.fontFamily).filter(Boolean))].filter(
+    (f) => !capFamNorm.includes(normF(f)),
+  );
+  add(
+    "L2",
+    "Fonts == captured fonts",
+    !captureFonts.length ? "INFO" : fontsOff.length ? "FAIL" : "PASS",
+    !captureFonts.length
+      ? "no font data"
+      : fontsOff.length
+        ? `not captured: ${fontsOff.join(", ")}`
+        : `${captureFonts.join(", ")}`,
+  );
+
+  if (styleSizeByRole.size) {
+    const off = [];
+    let checked = 0;
+    for (const t of typeEntries) {
+      const srcPx = styleSizeByRole.get(t.role);
+      if (!(srcPx > 0)) continue; // no comparable captured size (missing / zero) → skip, don't divide by 0
+      const ourPx = t.cqw != null ? (t.cqw * frameWidth) / 100 : t.px;
+      if (ourPx == null) continue;
+      checked++;
+      const drift = Math.abs(ourPx - srcPx) / srcPx;
+      if (drift > SIZE_TOL)
+        off.push(`${t.role} ${ourPx.toFixed(0)}px vs ${srcPx}px (${(drift * 100).toFixed(0)}%)`);
+    }
+    add(
+      "L2",
+      "Type sizes match capture",
+      off.length ? "FAIL" : checked ? "PASS" : "INFO",
+      off.length
+        ? `>±${SIZE_TOL * 100}%: ${off.join("; ")}`
+        : `${checked} roles within ±${SIZE_TOL * 100}% of computed px`,
+    );
+  }
+
+  if (styles?.radius) {
+    const radiiVals = [...frontmatter.matchAll(/^\s*r\d+:\s*"([^"]+)"/gm)].map((m) => m[1]);
+    const radOff = radiiVals.filter((r) => !captureRadii.has(r));
+    add(
+      "L2",
+      "Radii ⊆ captured",
+      radOff.length ? "FAIL" : "PASS",
+      radOff.length ? `not on site: ${radOff.join(", ")}` : `${radiiVals.join(", ") || "none"}`,
+    );
+  }
+}
+
+// ── report ─────────────────────────────────────────────────────────────────────
+const ICON = { PASS: "✓", FAIL: "✗", WARN: "⚠", INFO: "·" };
+console.log(`\nframe.md verification — ${framePath}\n`);
+let lvl = "";
+for (const r of results) {
+  if (r.level !== lvl) {
+    lvl = r.level;
+    const titles = {
+      L0: "L0 · parse / schema",
+      L1: "L1 · internal coherence",
+      L2: "L2 · fidelity to source",
+    };
+    console.log(`  ${titles[lvl]}`);
+  }
+  console.log(`    ${ICON[r.status]} ${r.status.padEnd(4)} ${r.name} — ${r.detail}`);
+}
+const fails = results.filter((r) => r.status === "FAIL");
+const warns = results.filter((r) => r.status === "WARN");
+console.log(
+  `\n  ${fails.length ? `✗ ${fails.length} FAIL` : "✓ all gates pass"}${warns.length ? ` · ${warns.length} WARN` : ""}\n`,
+);
+process.exit(fails.length ? 1 : 0);