diff --git a/bolt-slides/.bolt/prompt b/bolt-slides/.bolt/prompt
index 4772365..e1bba7f 100644
--- a/bolt-slides/.bolt/prompt
+++ b/bolt-slides/.bolt/prompt
@@ -1,5 +1,5 @@
-Import project modules with the `@/` path alias, which maps to `src/` (e.g. `@/components/Foo` == `src/components/Foo`), instead of deep relative paths like `../../components/Foo`.
+Import project modules with the `@/` path alias, which maps to `src/` (e.g. `@/deck/Slide` == `src/deck/Slide`), instead of deep relative paths like `../../deck/Slide`.
 
 This template uses Vite 8. `resolve.tsconfigPaths: true` is a valid built-in Vite option. Preserve it for the `@/` alias; do not claim it is invalid or add the `vite-tsconfig-paths` plugin.
 
-Author decks by writing `deck.json` and `src/styles/tokens.css`. Follow `.bolt/skills/slides/SKILL.md`. Layout `props` match `src/data/layoutProps.ts`.
+Author decks by writing one React component per slide in `src/slides/` and listing them in `deck.json` (theme in `src/styles/tokens.css`). Follow `.bolt/skills/slides/SKILL.md`. There is no house style: design each deck's palette, type, imagery and composition for its subject. Every slide must be responsive.
diff --git a/bolt-slides/.bolt/skills/slides/SKILL.md b/bolt-slides/.bolt/skills/slides/SKILL.md
index 3d1f645..ffd68a6 100644
--- a/bolt-slides/.bolt/skills/slides/SKILL.md
+++ b/bolt-slides/.bolt/skills/slides/SKILL.md
@@ -1,189 +1,363 @@
 ---
 name: slides
 description: >-
-  Author a premium slide deck in Bolt Slides. Slides live in repo-root
-  deck.json; the studio lets the user reorder, duplicate, delete,
-  edit speaker notes, Present, and download PDF/JSON. Use this whenever
-  the user asks for a deck, a pitch, slides, or a presentation in this
-  project.
+  Author a slide deck in Bolt Slides. Each slide is a React component you
+  design and write in src/slides/, listed in repo-root deck.json; the studio
+  handles reorder, duplicate, delete, speaker notes, Present, speaker view
+  and PDF / JSON download. Use this whenever the user asks for a deck, a
+  pitch, slides, or a presentation in this project.
 ---
 
-# Slides — prompt decks into a presentable app
-
-This repo is a complete slide **studio**. Author content into it.
-
-- `/` — in the Bolt preview iframe (and local Vite): studio. Side panel
-  (S) and grid (G) reorder / duplicate / delete; the dock holds notes,
-  Download (PDF or JSON), Speaker view, and Present. Present opens a new
-  tab (`/?present=1`); the studio stays put. Grid selection is the
-  start slide. The published site at `/` is the audience deck (notes
-  stripped). **P** opens speaker view in a new tab.
-- `/?presenter=1` — speaker view (current slide, up next, notes
-  read-only, timer, note text size). `/present` is the same route.
-
-**Your job is CONTENT.** A deck is `deck.json`. Write that file (and
-`src/styles/tokens.css` when theming). Layout `props` follow
-`src/data/layoutProps.ts`.
-
-## Hard rules
-
-1. **Write `deck.json` and `src/styles/tokens.css`.** Those are the
-   authoring files. Colors, fonts, sizes, spacing in a deck request mean
-   deck `accent` / `font` or `tokens.css` `:root` values. If they want a
-   studio or engine change, say so and wait.
-2. **Author from the user's REAL input.** Topic, brand, facts, numbers.
-   Never invent a placeholder company for a real subject. Brand given →
-   derive theme colors/fonts from it (fetch the site or use its known
-   palette) and say what you used.
-3. **One solid accent.** `--accent` is a hex, never a gradient. Use it
-   sparingly.
-4. **`layout` is an exact `LayoutName`.** Pick a camelCase key from
-   `LAYOUT_NAMES` in `src/data/layoutProps.ts` (`cover`, `bigNumber`,
-   `statGrid`, …) and put it on the `layout` field.
-5. **Homonym keys follow that layout's `*Props` type.** Chart
-   `kind: "line"` `points` is a pipe string of numbers
-   (`"12 | 18 | 26"`). Insight takeaways `points` are
-   `{label, body}[]`. Insight line series is `points_line`. Contrast
-   bullets are `string[]` on `left.points` / `right.points`. Logos
-   `items` is one pipe string (`"Acme | Globex"`); every other
-   layout's `items` is an object array.
-
-## Step 0 · bootstrap (mandatory, first)
+# Slides — you design the slides, the studio does the rest
 
-Read `deck.json`. If `boltSlidesId` is missing or null, set it to a new
-uuid (`crypto.randomUUID()` or equivalent) and write the file. Keep
-`boltSlidesVersion` at `1`. Then patch content.
+This repo is a complete slide **studio** with **no house style**. There is
+no layout catalog, no theme, no type scale, no default palette or imagery.
+Every visual decision in a deck is yours, made for this brief.
 
-## Workflow
+- `/` — in the Bolt preview iframe (and local Vite): the studio. Side panel
+  (S) and grid (G) reorder / duplicate / delete and pick the start slide;
+  the dock holds speaker notes, Download (PDF or JSON), Speaker view (P)
+  and Present. Present opens a new tab (`/?present=1`); the studio stays
+  put. The published site at `/` is the audience deck (notes stripped).
+- `/?presenter=1` — speaker view: current slide, up next, notes, timer.
+
+**What you write:**
+
+1. `src/slides/<name>.tsx` — one React component per slide (default
+   export). Free-form: any markup, inline styles or a `<style>` block, SVG,
+   images, motion. No new npm dependencies.
+2. `deck.json` — the ordered list of slides. Each entry's `layout` is the
+   component's filename without `.tsx`.
+
+Everything else is the shell — `src/deck`, `src/studio`, `src/present`,
+`src/export`, `src/copy`, `src/data`, `src/slide`, `src/styles/`,
+`vite.config.ts`. Leave it alone. If the user asks for a studio or engine
+change, say so and wait.
+
+## The one rule: every slide is responsive
+
+A slide is a responsive web layout, not a fixed canvas. The same
+component renders at phone width, in the thumbnail rail and grid, on a
+laptop, on a projector, and at 1280×720 in the PDF export. It must hold
+up at all of them.
+
+**The stage.** Your component fills a box called the stage. From phone
+width up to **1600×900 the stage is the window and the slide reflows**.
+Beyond that the shell **scales the whole slide up** by the smaller of the
+width and height ratios, so the stage you lay out in is never narrower
+than 1600 or shorter than 900 — it only ever gets wider (a 2400×900 window
+is a 2400×900 stage; a 2900×1300 window is a 2013×900 stage at 1.44×).
+Design for 390→1600 wide at 900 tall, and let extra width be room, not
+size. Measure against the stage, not the window:
+
+- **Stage units, not viewport units.** Use `cqw` / `cqh` (the stage is
+  the container named `slide`) wherever you would write `vw` / `vh`:
+  `font-size: clamp(28px, 5cqw, 72px)`, `gap: 3cqh`. Viewport units
+  measure the window and are wrong in thumbnails, in the PDF and on
+  scaled stages.
+- **Phones and tablets reflow, they don't shrink.** Like a responsive
+  website, the slide has tiers, and each is a layout — never the desktop
+  composition scaled down (proportional `cqw` sizing alone produces a tiny
+  desktop slide; that is the failure):
+  - **Phone** (stage < 700px wide): one column, the hero first, secondary
+    material dropped or shortened, charts and images on their own
+    full-width row.
+  - **Tablet / small window** (< 1100px wide — iPad portrait is 820,
+    landscape 1180): two columns only when each gets ≥ 20rem; otherwise
+    stack. Three-up grids become two-up.
+  - **Portrait** (taller than wide — any iPad held upright, every phone):
+    anything side by side stacks; height is plentiful, width is not.
+  Restack with `@container slide (max-width: 700px)` / `(max-width:
+  1100px)` / `(orientation: portrait)` in a `<style>` block, or in JSX
+  with `const { narrow, compact, portrait, width, height } = useStage()`
+  from `@/slide/stage` to reorder, hide or swap elements. Container
+  queries and `useStage()` react to the stage; media queries react to the
+  window and are wrong here.
+  The canonical case — text beside a chart or image on a wide stage — is
+  a single column on a phone, with the visual on its own full-width row
+  at a fixed height and the type at reading size:
+
+  ```tsx
+  const { narrow, portrait } = useStage();
+  const stack = narrow || portrait;
+  <section
+    style={{
+      display: 'grid',
+      gridTemplateColumns: stack ? '1fr' : 'minmax(20rem, 45%) 1fr',
+      gridTemplateRows: stack ? 'auto 40cqh' : '1fr',
+      gap: stack ? '4cqh' : '4cqw',
+      alignItems: 'center',
+      height: '100%',
+      padding: 'clamp(24px, 6cqw, 96px)',
+    }}
+  >
+    <div>…kicker, headline, body…</div>
+    <Chart style={{ width: '100%', height: stack ? '100%' : '55cqh' }} />
+  </section>
+  ```
+
+  Side by side at 390px wide — a 160px text column next to a 160px chart
+  with 6px axis labels — is the failure.
+- **Type has a floor, not just a ratio.** The first value of every
+  `clamp()` is the phone size, and it is a real reading size: body
+  16–18px, headlines 28–36px, figures 40px+. `cqw` shapes the middle;
+  it never takes text below the floor.
+- **Fluid sizing.** `clamp()`, `%`, `cqw`/`cqh`, `rem`, `min()`/`max()`.
+  No fixed pixel widths or heights on content. Media may be the only
+  fixed-ratio box (`aspect-ratio` + `max-height`, `object-fit: cover`).
+- **Grids wrap.** `repeat(auto-fit, minmax(min(240px, 100%), 1fr))`,
+  `flex-wrap`, or the `.cols` utility. A hardcoded column count needs a
+  narrow-stage fallback (`@container slide (max-width: 900px)`).
+- **Nothing out of view — ever.** A paged slide cannot scroll; anything
+  past the stage edge is simply not shown, and the audience never knows
+  it existed. In dev the shell measures every live slide and logs
+  `[bolt-slides] Slide "…" has content out of view …` as a console
+  **error**. Treat it like a failed build: fix the slide before you're
+  done. Tactics, in order: cut copy; split into two slides; use the
+  width (two balanced columns instead of one long one); shrink media
+  before text. Never fix it with `overflow: hidden`, `nowrap` or text
+  below the legibility floor. Budget the slide for its shortest stage:
+  1600×900 *and* a phone in portrait; footers, sources and page numbers
+  count against the budget.
+- **Text gets room.** A cramped text column is the most common failure.
+  Body copy runs 45–75ch wide, headlines up to ~20–28ch; a text column
+  next to an image or panel takes at least ~40% of the stage at 1600
+  (`minmax(min(20rem, 100%), 1fr)` or `clamp(20rem, 45%, 40rem)`),
+  and a lone text block sits on a wide measure, not a sliver. Narrow
+  text is a deliberate choice on one slide, never the default.
+- **Fill the stage at 1600×900.** Larger screens magnify that layout,
+  so what looks sparse there looks sparse everywhere. Size type, spacing
+  and media so the composition uses the stage (headlines in the 5–8cqw
+  range, media that takes real area), and distribute or center content
+  across the height. A headline pinned top-left, a row of small tiles far
+  below and a void between them is the failure. Not too wide either: a
+  single text column stays ≤ ~75ch.
+- **Height is the scarce axis.** Tie vertical sizes to `cqh` or fixed
+  values, not `cqw`: a stage can be much wider than 16:9 but never
+  shorter than 900 at reference, so width-driven heights are what push
+  content out of view when a window gets wider. That includes anything
+  whose height follows its width — an SVG with only `width: 100%`, an
+  `aspect-ratio` box, an image without `max-height`. Give each a height
+  in `cqh` or a `max-height`, and give a column that stacks a chart or
+  image over text a fixed split (`grid-template-rows: 55cqh auto`).
+- **Check four stages.** Before you finish, look at 390×844 (phone),
+  820×1180 (iPad portrait), 1180×820 (iPad landscape) and 1600×900. The
+  phone and portrait iPad must read like a page (one column, readable
+  type, nothing out of view); landscape iPad is a smaller desktop with
+  fewer columns. The rail and grid render the real component, so they
+  show breakage too.
+
+## Design it — for this deck
+
+Because the shell imposes nothing, a deck that ships as centered text on a
+plain background with one accent color is your choice, and almost never
+the right one. Build a visual identity for the subject and brand:
+
+- **Palette and surfaces** — light or dark, brand colors, gradients,
+  color blocks, photographic backgrounds. Set them per slide or in one
+  shared module you import (e.g. `src/slides/theme.ts`).
+- **Type** — pick fonts for the deck. Add a Google Fonts `<link>` to
+  `index.html` (or `@import` in a `<style>` block) and use them; or set
+  deck-level `font` in `deck.json` for one of the built-in pairings.
+- **Imagery** — real photos (Unsplash `https://images.unsplash.com/…?w=1600&q=80`
+  or the user's assets), generated images written to `public/`, product
+  screenshots, illustration, inline SVG, diagrams, charts drawn in SVG,
+  device or browser mocks. Full-bleed images under a scrim, split panels,
+  image grids — whatever the story needs.
+- **Composition** — asymmetry, overlap, edge-to-edge, big numbers,
+  timelines, maps, whatever fits.
+- **Motion, on by default.** Unless the user asks for a static deck, every
+  slide animates in smoothly: staggered entrances with `Reveal` (or
+  `motion/react` with an ease-out curve, ~0.5–0.8s, small offsets) and
+  `Build` for the beats worth a click. Calm and consistent across the deck,
+  never a circus; respect `prefers-reduced-motion` for anything that loops.
+
+Ground it in the user's real input: topic, brand, facts, numbers, assets.
+Never invent a placeholder company for a real subject. Brand given →
+derive colors, fonts and imagery from it and say what you used.
+
+### Not this — the generic-AI look
+
+These read as template output. Don't use them unless the brief asks:
+
+- A card with a colored **left (or top) border** as its accent.
+- A **row of identical cards**, each with a mono `01 / 02 / 03` index, a
+  bold title and a grey paragraph — the same for feature grids of
+  icon + title + paragraph.
+- Everything boxed: rounded white cards with soft shadows on every
+  element, cards inside cards, a card around a single sentence.
+- Decorative **status pills / tag chips**, gradient text, one rainbow
+  color per list item.
+- Small type and small tiles floating in a large empty stage.
+
+Instead: hierarchy from type scale and space; rules, columns and
+alignment instead of boxes; one strong element per slide (a figure, an
+image, a chart, a sentence); asymmetry; real imagery; contrast in scale
+between the thing that matters and everything else.
 
-1. Theme only if needed: `:root` values in `src/styles/tokens.css`.
-2. Read `deck.json` so you keep studio-side reorder / duplicate / delete.
-3. Patch when they already have slides; replace `slides` only for a new
-   deck. Keep `boltSlidesId` once it exists.
+### Data, charts and figures — presentation scale, not dashboard scale
 
-`props` follow **Layout props** below; other slide fields follow **Deck JSON**.
-`position` is 0-based. Always set `background` on every slide (never omit).
-Default: `background` `{"type":"color","color":"var(--bg)"}`,
-`animation` `cascade`, `status` `none`, `transition` `null`, `nav`
-`null`, `notes` `""`.
+- **The number is the hero.** A KPI slide leads with the figure at
+  headline size (8–14cqw) and one line of meaning; supporting numbers are
+  a clear second tier, not a row of chips.
+- **Charts are drawn for the room.** Inline SVG with a `viewBox`, sized
+  by **height** (`height: 45cqh; width: 100%`, and `preserveAspectRatio=
+  "none"` or `xMidYMid meet`) so a wider stage cannot make the chart
+  taller and push what's below it out of view. Strokes, ticks and labels
+  sized to read from the back (labels ≥ 1.1cqw); labels stay inside the
+  `viewBox` (pad the last point, or anchor end labels with
+  `text-anchor="end"`). A chart takes real area (half the stage or more)
+  — never a widget inside a card inside the slide.
+- **Labels never live inside data-sized shapes.** Funnel steps, bars and
+  bubbles shrink with their values; text does not. Put labels and values
+  beside or above the shape on a fixed grid, and never let a word wrap
+  mid-word or a label outgrow its box.
+- **No dashboard furniture.** No card borders around a single chart, no
+  legend chips, no "widget title" captions in 11px. Title, chart, one
+  takeaway.
 
-4. Ask the user to look at the studio to see the result: side panel
-   or grid to reorder / duplicate / delete, notes, Present, Download.
+### Alignment — it's a stage
 
-Read first. Replacing all of `props` drops keys you omit; change one
-field by patching that key. Empty `notes` erases what was there. Replace
-the `slides` array only when replacing the whole deck.
+- **Vertically centered by default.** The composition sits in the middle
+  of the stage (or is distributed across its full height); top-anchor
+  only when the slide is genuinely full (a dense table, a full-bleed
+  image with a caption). A headline at the top with the bottom half empty
+  is wrong on every screen size.
+- **One grid.** Kicker, headline, body and blocks share left edges (or a
+  common center); one gutter value per deck; nothing floats between the
+  edges. Two columns align at the top *and* balance in height.
+- **Left-anchored text needs a counterweight** — an image, a figure, a
+  chart on the other side. A text-only slide is centered, or set on a
+  deliberate wide measure with the space used on purpose.
+- **Kicker above headline, never beside it.** Small label, then the
+  headline, sharing a left edge (or both centered).
 
-## Deck JSON
+### Legibility floor — check every slide before you're done
 
-Repo-root `deck.json`:
+At 1600×900 no text is smaller than 16px (~1cqw), and at 390 wide none is
+smaller than 12px. Nothing wraps mid-word, nothing is clipped, nothing is
+out of view (no `[bolt-slides] … out of view` console errors), no label
+is larger than the shape it sits in, and the composition occupies at
+least ~60% of the stage height. If a slide fails any of these, fix the
+slide — don't shrink the text.
+
+## Slide component contract
+
+```tsx
+// src/slides/opening.tsx
+import Reveal from '@/deck/Reveal';
+import Build from '@/deck/Build';
+import type { SlideComponent } from '@/slide/registry';
+
+const Opening: SlideComponent = ({ slide }) => (
+  <section style={{ width: '100%', height: '100%', /* your design */ }}>
+    <Reveal>…entrance content…</Reveal>
+    <Build at={1}>…revealed on the first click…</Build>
+  </section>
+);
+
+export default Opening;
+```
+
+- The component fills the stage (100% × 100%; a CSS container named
+  `slide`, so `cqw`/`cqh` and `@container slide (…)` measure it). Any root
+  element works. `<Slide>` from `@/deck/Slide` is an optional root that
+  pads with the `--gutter` tokens, centers with `center`, or goes
+  edge-to-edge with `full` — use it or not.
+- `slide` is the deck.json entry. `slide.props` is free-form JSON you may
+  put data in (copy, numbers, image URLs) when you want it outside the
+  component — for example to reuse one component across two slides.
+  Ignore it when you don't need it.
+- Engine helpers, all optional: `Reveal` (entrance when the slide shows),
+  `Build at={n}` (hidden until the n-th click on that slide; advancing
+  reveals builds, then moves on), `useInView` from `@/deck/useInView`
+  (draw-in on view), `useStage()` from `@/slide/stage` (`{ width,
+  height, narrow, compact, portrait }` of the stage the component is laid
+  out in).
+- In-place text editing in the studio works for text rendered with
+  `<T path="title" />` from `@/copy/DeckText`, which reads
+  `slide.props.title` (rich markers: `==accent==`, `**bold**`,
+  `_italic_`). Optional.
+
+Duplicate in the studio creates a second deck.json entry pointing at the
+same component. When the copy should differ, give it its own component
+(or drive both from `slide.props`). Deleting an entry does not delete the
+file; unused files in `src/slides/` are harmless — remove the seed
+`welcome.tsx` when the real deck replaces it.
+
+## deck.json
 
 ```jsonc
 {
   "boltSlidesVersion": 1,
   "boltSlidesId": "…",           // uuid; mint on first write if missing
   "deck": {
-    "title": "Acme — Series A",
+    "title": "47 Maple Grove — Open house",
     "transition": "fade",        // deck default: fade | slide | rise | zoom | none
-    "font": "inter",             // inter | space | sora | manrope | dm | outfit | playfair | fraunces
-    "accent": "#1688FC"          // optional — deck-wide accent (solid hex); omit for the tokens.css default
+    "font": "playfair",          // optional built-in pairing: inter | space | sora | manrope | dm | outfit | playfair | fraunces
+    "accent": "#B23A48"          // optional: the color `==accent==` text and `--accent` use
   },
   "slides": [
     {
       "id": "s1",                // stable string; new slides get a new id
-      "position": 0,
-      "layout": "cover",         // LayoutName from src/data/layoutProps.ts
-      "props": { ... },          // that layout's *Props type in the same file
-                                 // every layout also accepts "scale": "lg" | "xl"
+      "position": 0,             // 0-based order
+      "layout": "opening",       // src/slides/opening.tsx
+      "props": {},               // free-form data for the component (may be empty)
       "animation": "cascade",    // cascade | rise | fade | zoom | none
-      "transition": "zoom",      // optional per-slide override (or null to inherit)
+      "transition": null,        // optional per-slide override of deck.transition
       "background": { "type": "color", "color": "var(--bg)" },
-      "nav": null,
+      "nav": null,               // optional short label for the rail / presenter
       "notes": "Open with the hook.",   // speaker notes (presenter console)
-      "status": "draft"          // optional review state: none (default) |
-                                 // draft | in-progress | review | approved
+      "status": "none"           // none | draft | in-progress | review | approved
     }
   ]
 }
 ```
 
-**Rich text** in any text prop: `==accent==` renders in the accent color,
-`**bold**` bold, `_italic_` italic, `{c:#ff6b6b}text{/c}` a specific text
-color (`{c:accent}` works too), `{s:1.4}text{/s}` font size as an em
-multiplier (0.4–4 — stays responsive), `\n` line break. A whole field can
-override its alignment with a `{a:l}` / `{a:c}` / `{a:r}` prefix (rarely
-needed — layouts already align deliberately). Markers nest across types. Discipline: `==` on the one or two words that carry each headline;
-custom colors and sizes are for rare, deliberate moments — the theme does the
-typography.
-
-**Backgrounds** — always set on every slide (studio, thumbs, and present share
-the same opaque surface; never leave the field off):
-`{"type":"color","color":"var(--bg)"}` (default — theme surface; follows
-`tokens.css`),
-`{"type":"color","color":"#0b1020"}`,
-`{"type":"gradient","from":"#…","to":"#…","angle":160}`,
-`{"type":"image","url":"https://…","dim":0.45}` (omit dim for 0.45; engine floors below 0.4),
-`{"type":"none"}` (legacy alias for the theme surface — prefer `color` +
-`var(--bg)` in new decks). Most slides use `var(--bg)`; save gradient / image
-for moments (a section break, a photo cover). Photos:
-`https://images.unsplash.com/...?w=1600&q=80`.
-
-**Animation** is per-slide and user-changeable later — pick deliberately:
-`cascade` (default — the layout's designed staggers) for almost everything;
-`fade` for quotes/statements you want to land quietly; `rise` or `zoom` as an
-occasional emphasis beat; `none` only for dense reference slides.
-**Transitions**: set ONE deck default (usually `fade`); override per-slide
-sparingly (`zoom` into section dividers works well).
-
-**Numbers animate themselves**: any figure-like string (`"$3T"`, `"48%"`,
-`"1,200+"`) counts up on reveal automatically. Just write the string.
-
-## Layout props
-
-Open `src/data/layoutProps.ts`. `layout` is a `LayoutName`. `props` is the
-type of the same name (`cover` → `CoverProps`, `insight` → `InsightProps`).
-Use that type. Homonym keys (`points`, `items`, `values`) are hard
-rule 5 — each layout's type is the shape.
-
-Pick by purpose:
-
-- **Rhythm** — `cover` (opener / closing CTA), `section` (chapter divider),
-  `statement` (one thought), `bigNumber` (drama beat), `manifesto`
-  (editorial breather; empty lower half is the layout), `quote`.
-- **Structure** — `agenda`, `steps`, `pillars` (focus areas, not a process),
-  `timeline`, `contrast` (before / after), `comparison`, `table` (real data;
-  ≤5 cols, ≤7 rows), `tabs`, `accordion` (interactive FAQ), `qa` (flat FAQ),
-  `pricing` (highlight exactly one tier), `team`, `logos`.
-- **Visual** — `bento` (feature grid), `statGrid`, `figures` (editorial
-  numbers), `poster`, `story`, `speaker`, `persona`, `chart`, `insight`
-  (chart + takeaways), `chat`, `code`.
-
-## Deck design discipline
-
-- **10–16 slides.** Arc: hook → problem → shift → product proof → numbers →
-  plan → team/ask. Alternate dense layouts with statement-scale beats.
-- Titles ≤ 8 words, benefit-first. Bodies ≤ 2 sentences. If a slide needs a
-  paragraph, it's two slides.
-- Every deck: one `bigNumber`, one `contrast` or `comparison`, and section
-  dividers every 4–6 slides. Never two dense grids back-to-back.
-- The editorial set — `manifesto`, `poster`, `story`, `speaker`, `persona`,
-  `figures`, `pillars`, large `qa` — is what makes a deck feel designed
-  rather than generated: use two or three of them for texture, and let their
-  empty space breathe (it's part of the layout, not waste).
-- Write `notes` for the presenter on every content slide — one or two lines of
-  what to SAY, not a repeat of the slide.
-- After writing, tell the user to look at the studio: drag to reorder,
-  ••• or right-click a thumbnail to duplicate/delete, grid (G) to pick a
-  slide then Present, notes and Download on the dock.
-
-## Theming (`tokens.css` `:root`)
-
-Prefer the deck-level `accent` and `font` (Deck JSON above) over editing
-tokens. For deeper theming: all color/type/radius/motion live in
-`src/styles/tokens.css`. Change VALUES, never names. `--accent` =
-`--primary` = one solid hex. `--bg-grad-1`, `--bg-grad-2`, and `--glow`
-must stay `color-mix` of `--accent` so atmosphere follows the deck accent.
-Dark default; for a light deck set `--bg` /
-`--fg` in tokens.css. Fonts: set the deck-level `font` pairing (Google Fonts,
-loaded automatically; `playfair`/`fraunces` for editorial serifs, `space`/
-`sora`/`outfit` for technical, `manrope`/`dm` for friendly).
+- **Always set `background`** on every slide; it is painted under your
+  component and is what thumbnails show before the component mounts.
+  `{"type":"color","color":"var(--bg)"}` is the shell's fallback surface;
+  `{"type":"color","color":"#0b1020"}`,
+  `{"type":"gradient","from":"#…","to":"#…","angle":160}` and
+  `{"type":"image","url":"https://…","dim":0.45}` (a dark scrim; engine
+  floors `dim` at 0.4) are the alternatives. The component can also paint
+  its own background over it.
+- `animation`: `cascade` lets the component's own `Reveal` / `Build`
+  choreography run; `rise` / `fade` / `zoom` replace it with one entrance
+  for the whole slide; `none` shows it instantly.
+- Every slide also accepts `"props": { "scale": "lg" | "xl" }` to enlarge
+  the whole slide 15 % / 30 %.
+
+### Bootstrap (mandatory, first)
+
+Read `deck.json`. If `boltSlidesId` is missing or null, set it to a new
+uuid (`crypto.randomUUID()` or equivalent) and write the file. Keep
+`boltSlidesVersion` at `1`.
+
+### Editing an existing deck
+
+Read `deck.json` first so you keep the user's studio-side reorder /
+duplicate / delete / notes. Patch entries in place; replace the `slides`
+array only when replacing the whole deck. Empty `notes` erases what was
+there.
+
+## Shell tokens (`src/styles/tokens.css`)
+
+The shell reads a handful of CSS variables: `--bg` (slide surface
+fallback), `--fg` (text color the slide box inherits), `--accent` /
+`--primary` (the `==accent==` marker; deck-level `accent` overrides them),
+`--font-head` / `--font-body` (deck-level `font` overrides them), and
+`--gutter` / `--gutter-y` (what `<Slide>` pads with). Their defaults are
+neutral on purpose. Set them to the deck's design, or ignore them and
+style each component directly. Change values, not names.
+
+## Workflow
+
+1. Ground the deck in the user's real input; decide its visual identity.
+2. Bootstrap `boltSlidesId` (above).
+3. Write one component per slide into `src/slides/`, then the matching
+   `deck.json` entries, with speaker `notes` where they help.
+4. `npm run typecheck` and `npm run build` must pass. Check narrow and
+   wide. Then tell the user to look at the studio: drag to reorder, ••• or
+   right-click a thumbnail to duplicate / delete, grid (G) to pick a
+   slide, notes and Download on the dock, Present for the audience view.
diff --git a/bolt-slides/README.md b/bolt-slides/README.md
index 97c5bdc..2a89bad 100644
--- a/bolt-slides/README.md
+++ b/bolt-slides/README.md
@@ -1,12 +1,18 @@
 # Bolt Slides
 
-A Pitch-style slide studio for [Bolt](https://bolt.new): prompt a deck into
-`deck.json`, refine it in the studio, present in a new tab, and
-download PDF or JSON.
+A Pitch-style slide studio for [Bolt](https://bolt.new): prompt a deck,
+refine it in the studio, present in a new tab, and download PDF or JSON.
 
-The prompt skill (`.bolt/skills/slides/SKILL.md`) covers bootstrap
-(mint `boltSlidesId` on first write) and authoring. Layout `props`
-shapes live in `src/data/layoutProps.ts`.
+Each slide is a React component in `src/slides/`, listed in `deck.json`.
+There is no layout catalog and no house style — no theme, type scale,
+palette or imagery is imposed; the agent designs every slide for the deck
+at hand. The one rule is that every slide is responsive — it renders at
+phone width, in the thumbnail rail, on a projector and at 1280×720 in the
+PDF.
+
+The prompt skill (`.bolt/skills/slides/SKILL.md`) covers bootstrap (mint
+`boltSlidesId` on first write), the slide component contract, the
+`deck.json` shape and the responsiveness rule.
 
 ## Quick start
 
@@ -17,10 +23,10 @@ npm run lint       # ESLint (same kit as bolt-vite-react-ts)
 npm run typecheck
 ```
 
-Prompt a deck with the `slides` skill, or edit `deck.json` directly.
-In the studio, drag to reorder, use a thumbnail’s ••• menu (or
-right-click) to duplicate or delete, edit speaker notes, then Present
-or Download as PDF / JSON.
+Prompt a deck with the `slides` skill, or write `src/slides/*.tsx` and
+`deck.json` directly. In the studio, drag to reorder, use a thumbnail’s
+••• menu (or right-click) to duplicate or delete, edit speaker notes, then
+Present or Download as PDF / JSON.
 
 ## What's inside
 
@@ -34,26 +40,38 @@ or Download as PDF / JSON.
 
 Collaborate by sharing the Bolt project.
 
-## The skill
+## Authoring
 
-`.bolt/skills/slides/SKILL.md` covers bootstrap (mint `boltSlidesId` on
-first write) and authoring `deck.json` plus `src/styles/tokens.css`.
-Layout `props` shapes live in `src/data/layoutProps.ts`.
+- `src/slides/<name>.tsx` — a slide: default-export a component typed
+  `SlideComponent` (from `@/slide/registry`). It receives the deck.json
+  entry as `slide`; `slide.props` is free-form data it may read.
+  `@/deck/Slide`, `@/deck/Reveal`, `@/deck/Build` and
+  `@/deck/useInView` are optional helpers.
+- `deck.json` — the ordered slides. `layout` is the component filename
+  (without `.tsx`); `background`, `animation`, `transition`, `nav`,
+  `notes` and `status` are read by the studio, presenter and export.
+- `src/styles/tokens.css` — the few CSS variables the shell reads
+  (`--bg`, `--fg`, `--accent`, fonts, gutters). Neutral fallbacks; set
+  them per deck or ignore them.
 
 ## Architecture
 
 ```
-deck.json               canonical deck (envelope + slides)
-src/data/               types, layout props contract, zustand store
-src/layouts/            layout registry
-src/components/         section components
-src/deck/               presentation engine
+deck.json               canonical deck (envelope + slide entries)
+src/slides/             the deck's slide components (authored per deck)
+src/slide/              SlideView + the src/slides registry (import.meta.glob)
+src/data/               types, zustand store, deck.json persistence
+src/deck/               presentation engine + chrome (dock, rail, grid, presenter)
 src/studio/             studio chrome
-src/copy/               stamped deck text + visual-edit persist
-src/styles/tokens.css   theme: edit :root values only
+src/present/            audience / speaker routes
+src/export/             PDF export
+src/copy/               rich text + in-place text edit persist
+src/styles/tokens.css   shell fallbacks (--bg, --fg, --accent, fonts, gutters)
 ```
 
 ## Theming
 
-Everything visual derives from the `:root` tokens in `src/styles/tokens.css`.
-`--accent` must stay a solid color.
+There is none built in. Slide components carry their own design. The
+`:root` variables in `src/styles/tokens.css` are only the fallbacks the
+shell reads (slide surface, inherited text color, the `==accent==` marker
+color, deck-level font pairing, `<Slide>` gutters).
diff --git a/bolt-slides/deck.json b/bolt-slides/deck.json
index 86db7f5..5607eb0 100644
--- a/bolt-slides/deck.json
+++ b/bolt-slides/deck.json
@@ -8,112 +8,8 @@
     {
       "id": "s1",
       "position": 0,
-      "layout": "cover",
-      "props": {
-        "kicker": "Company · 2026",
-        "title": "A ==bold== opening.",
-        "subtitle": "One sharp sentence on what this deck argues.",
-        "foot": "August 2026 · Your name"
-      },
-      "background": {
-        "type": "color",
-        "color": "var(--bg)"
-      },
-      "animation": "cascade",
-      "transition": null,
-      "nav": null,
-      "notes": "# This is test text.\n\n# Test text line two.\n\n# Another line, oh no.",
-      "status": "none"
-    },
-    {
-      "id": "s2",
-      "position": 1,
-      "layout": "statement",
-      "props": {
-        "kicker": "",
-        "title": "Say the ==one thing== this slide exists to say.",
-        "body": ""
-      },
-      "background": {
-        "type": "color",
-        "color": "var(--bg)"
-      },
-      "animation": "cascade",
-      "transition": null,
-      "nav": null,
-      "notes": "Land the thesis. Pause before you click on. hello!",
-      "status": "none"
-    },
-    {
-      "id": "s3",
-      "position": 2,
-      "layout": "bigNumber",
-      "props": {
-        "kicker": "The market",
-        "value": "$3T",
-        "caption": "moves through this problem every year",
-        "foot": "Source: —"
-      },
-      "background": {
-        "type": "color",
-        "color": "var(--bg)"
-      },
-      "animation": "cascade",
-      "transition": null,
-      "nav": null,
-      "notes": "Give the figure a beat, then say what it means for us.",
-      "status": "none"
-    },
-    {
-      "id": "s4",
-      "position": 3,
-      "layout": "agenda",
-      "props": {
-        "kicker": "Agenda",
-        "title": "What we'll cover.",
-        "items": [
-          {
-            "title": "The problem",
-            "hint": "5 min"
-          },
-          {
-            "title": "The product"
-          },
-          {
-            "title": "The ask"
-          }
-        ]
-      },
-      "background": {
-        "type": "color",
-        "color": "var(--bg)"
-      },
-      "animation": "cascade",
-      "transition": null,
-      "nav": null,
-      "notes": "Preview the arc so they know where this is going.",
-      "status": "none"
-    },
-    {
-      "id": "a0706894",
-      "position": 4,
-      "layout": "agenda",
-      "props": {
-        "kicker": "Agenda",
-        "title": "What we'll cover.",
-        "items": [
-          {
-            "title": "The problem",
-            "hint": "5 min"
-          },
-          {
-            "title": "The product"
-          },
-          {
-            "title": "The ask"
-          }
-        ]
-      },
+      "layout": "welcome",
+      "props": {},
       "background": {
         "type": "color",
         "color": "var(--bg)"
@@ -121,9 +17,8 @@
       "animation": "cascade",
       "transition": null,
       "nav": null,
-      "notes": "Preview the arc so they know where this is going.",
+      "notes": "",
       "status": "none"
     }
-  ],
-  "boltSlidesId": "11011050-f9d6-4d43-8a9e-3e43af51bbaf"
+  ]
 }
diff --git a/bolt-slides/eslint.config.js b/bolt-slides/eslint.config.js
index fd1d764..6de8343 100644
--- a/bolt-slides/eslint.config.js
+++ b/bolt-slides/eslint.config.js
@@ -25,10 +25,10 @@ export default tseslint.config(
       ],
     },
   },
-  /* Layout catalogs export schema + Render functions, not Fast Refresh
-     boundaries. Same kit as bolt-vite-react-ts otherwise. */
+  /* The slide registry exports the component map next to its renderer,
+     not a Fast Refresh boundary. Same kit as bolt-vite-react-ts otherwise. */
   {
-    files: ['src/layouts/**/*.{ts,tsx}'],
+    files: ['src/slide/registry.tsx'],
     rules: { 'react-refresh/only-export-components': 'off' },
   }
 );
diff --git a/bolt-slides/index.html b/bolt-slides/index.html
index ee832d2..ccdb58e 100644
--- a/bolt-slides/index.html
+++ b/bolt-slides/index.html
@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Slides</title>
     <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 178 227'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M103.267 198.762C87.1743 198.762 71.3565 192.914 62.2897 180.315L59.0909 195.151L0 226.551L6.37813 195.151L49.3961 0H102.089L86.8603 68.7856C99.1455 55.3229 110.567 50.3381 125.208 50.3381C156.823 50.3381 177.901 71.121 177.901 109.174C177.901 147.227 153.605 198.742 103.247 198.742L103.267 198.762ZM123.461 120.321C123.461 138.474 110.587 152.231 93.9056 152.231C84.5445 152.231 76.0469 148.718 70.493 142.576L78.6963 106.564C84.8389 100.421 91.8646 96.9083 100.068 96.9083C112.647 96.9083 123.48 106.269 123.48 120.321H123.461Z' fill='%231688FC'/%3E%3C/svg%3E" />
-    <meta name="theme-color" content="#05070a" />
+    <meta name="theme-color" content="#ffffff" />
     <!-- OpenGraph — og.png is generated from slide 1 -->
     <meta property="og:title" content="Slides" />
     <meta property="og:description" content="A deck built with Bolt Slides." />
diff --git a/bolt-slides/src/components/Accordion.tsx b/bolt-slides/src/components/Accordion.tsx
deleted file mode 100644
index 8b4bac4..0000000
--- a/bolt-slides/src/components/Accordion.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import { useState, type ReactNode } from 'react';
-import { AnimatePresence, motion, useReducedMotion } from 'motion/react';
-
-export type AccordionItem = { title: string; body: ReactNode };
-
-export default function Accordion({
-  items,
-  single = true,
-  defaultOpen = 0,
-}: {
-  items: AccordionItem[];
-  single?: boolean;
-  defaultOpen?: number | null;
-}) {
-  const reduce = useReducedMotion();
-  const [open, setOpen] = useState<number[]>(
-    defaultOpen == null ? [] : [defaultOpen]
-  );
-
-  const isOpen = (i: number) => open.includes(i);
-  const toggle = (i: number) =>
-    setOpen((cur) => {
-      const has = cur.includes(i);
-
-      if (single) return has ? [] : [i];
-
-      return has ? cur.filter((x) => x !== i) : [...cur, i];
-    });
-
-  return (
-    <div className="accordion">
-      {items.map((it, i) => (
-        <div key={i} className={'acc-item mat' + (isOpen(i) ? ' open' : '')}>
-          <button
-            className="acc-head"
-            onClick={() => toggle(i)}
-            aria-expanded={isOpen(i)}
-          >
-            <span className="acc-index">{String(i + 1).padStart(2, '0')}</span>
-            <h3>{it.title}</h3>
-            <span className="acc-plus" aria-hidden />
-          </button>
-          <AnimatePresence initial={false}>
-            {isOpen(i) && (
-              <motion.div
-                className="acc-body"
-                initial={{ height: 0, opacity: 0 }}
-                animate={{ height: 'auto', opacity: 1 }}
-                exit={{ height: 0, opacity: 0 }}
-                transition={{
-                  duration: reduce ? 0 : 0.34,
-                  ease: [0.16, 1, 0.3, 1],
-                }}
-              >
-                <div className="acc-body-inner">{it.body}</div>
-              </motion.div>
-            )}
-          </AnimatePresence>
-        </div>
-      ))}
-    </div>
-  );
-}
diff --git a/bolt-slides/src/components/Agenda.tsx b/bolt-slides/src/components/Agenda.tsx
deleted file mode 100644
index 4bcafe4..0000000
--- a/bolt-slides/src/components/Agenda.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import { motion, useReducedMotion } from 'motion/react';
-import Reveal from '../deck/Reveal';
-import { useDeck } from '../deck/DeckContext';
-
-export type AgendaItem = string | { title: string; hint?: string };
-
-export default function Agenda({
-  kicker,
-  title,
-  items,
-}: {
-  kicker?: string;
-  title?: string;
-  items: AgendaItem[];
-}) {
-  const { isStatic } = useDeck();
-  const reduce = useReducedMotion();
-  const animate = !isStatic && !reduce;
-
-  return (
-    <div className="slide">
-      <div className="container">
-        <Reveal>
-          {kicker && (
-            <div
-              className="kicker"
-              style={{ marginBottom: 10, textAlign: 'center' }}
-            >
-              {kicker}
-            </div>
-          )}
-          {title && (
-            <h2
-              className="headline"
-              style={{
-                textAlign: 'center',
-                marginInline: 'auto',
-                marginBottom: 'clamp(24px,4vh,40px)',
-              }}
-            >
-              {title}
-            </h2>
-          )}
-        </Reveal>
-        <div className="agenda">
-          {items.map((it, i) => {
-            const item = typeof it === 'string' ? { title: it } : it;
-
-            return (
-              <motion.div
-                key={i}
-                className="agenda-row"
-                initial={animate ? { opacity: 0, x: -16 } : false}
-                animate={{ opacity: 1, x: 0 }}
-                transition={{
-                  duration: 0.5,
-                  delay: 0.15 + i * 0.08,
-                  ease: [0.16, 1, 0.3, 1],
-                }}
-              >
-                <span className="agenda-no">
-                  {String(i + 1).padStart(2, '0')}
-                </span>
-                <span className="agenda-t">{item.title}</span>
-                {item.hint && <span className="agenda-hint">{item.hint}</span>}
-              </motion.div>
-            );
-          })}
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/bolt-slides/src/components/Bento.tsx b/bolt-slides/src/components/Bento.tsx
deleted file mode 100644
index 0284dbf..0000000
--- a/bolt-slides/src/components/Bento.tsx
+++ /dev/null
@@ -1,129 +0,0 @@
-import type { CSSProperties, ReactNode } from 'react';
-import { motion, useReducedMotion } from 'motion/react';
-import Reveal from '../deck/Reveal';
-import { useDeck } from '../deck/DeckContext';
-
-export type BentoTile = {
-  k?: string;
-  fig?: ReactNode;
-  title?: string;
-  body?: string;
-  c?: number;
-  r?: number;
-  variant?: 'accent' | 'glow';
-  img?: string;
-};
-
-const BENTO_COLS = 6;
-
-function tileSpan(t: BentoTile, mosaic: boolean, fromTwelve: boolean): number {
-  if (!mosaic) return 1;
-  const raw = t.c ?? (fromTwelve ? 4 : 2);
-  const scaled = fromTwelve ? Math.round(raw / 2) : raw;
-  return Math.min(BENTO_COLS, Math.max(1, scaled));
-}
-
-export default function Bento({
-  kicker,
-  title,
-  tiles,
-}: {
-  kicker?: string;
-  title?: string;
-  tiles: BentoTile[];
-}) {
-  const { isStatic } = useDeck();
-  const reduce = useReducedMotion();
-  const animate = !isStatic && !reduce;
-  const mosaic = tiles.some((t) => t.c != null);
-  // Older decks used a 12-col grid (spans like 8+4). Halve those onto 6.
-  const fromTwelve = mosaic && tiles.some((t) => (t.c ?? 0) > BENTO_COLS);
-  const cols = mosaic
-    ? BENTO_COLS
-    : Math.min(BENTO_COLS, Math.max(1, tiles.length));
-
-  return (
-    <div className="slide bento-wide">
-      <div className="container">
-        <Reveal>
-          {kicker && (
-            <div className="kicker" style={{ marginBottom: 10 }}>
-              {kicker}
-            </div>
-          )}
-          {title && (
-            <h2
-              className="headline"
-              style={{ marginBottom: 'clamp(20px,3vh,34px)', maxWidth: '24ch' }}
-            >
-              {title}
-            </h2>
-          )}
-        </Reveal>
-        <div
-          className="bento"
-          style={{ '--cols': String(cols) } as CSSProperties}
-        >
-          {tiles.map((t, i) => (
-            <motion.div
-              key={i}
-              className="bento-cell"
-              style={
-                {
-                  '--c': String(tileSpan(t, mosaic, fromTwelve)),
-                  '--r': String(t.r ?? 1),
-                } as CSSProperties
-              }
-              initial={animate ? { opacity: 0, y: 26, scale: 0.985 } : false}
-              animate={{ opacity: 1, y: 0, scale: 1 }}
-              transition={{
-                duration: 0.55,
-                delay: 0.16 + i * 0.07,
-                ease: [0.16, 1, 0.3, 1],
-              }}
-            >
-              <div
-                className={
-                  'btile mat' +
-                  (t.variant ? ` ${t.variant}` : '') +
-                  (t.img ? ' has-img' : '')
-                }
-              >
-                {t.img && (
-                  <>
-                    <img className="btile-img" src={t.img} alt="" aria-hidden />
-                    <span className="btile-scrim" aria-hidden />
-                  </>
-                )}
-                {(t.k || t.fig != null) && !t.img && (
-                  <div className="btile-head">
-                    {t.fig != null && <span className="tick" />}
-                    {t.k && <div className="btile-k">{t.k}</div>}
-                  </div>
-                )}
-                <div>
-                  {t.img && t.k && (
-                    <div className="btile-k" style={{ marginBottom: 6 }}>
-                      {t.k}
-                    </div>
-                  )}
-                  {t.fig != null && (
-                    <div
-                      className={
-                        'btile-fig' + (t.variant === 'accent' ? '' : ' grad')
-                      }
-                    >
-                      {t.fig}
-                    </div>
-                  )}
-                  {t.title && <h3>{t.title}</h3>}
-                  {t.body && <p>{t.body}</p>}
-                </div>
-              </div>
-            </motion.div>
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/bolt-slides/src/components/BigNumber.tsx b/bolt-slides/src/components/BigNumber.tsx
deleted file mode 100644
index 38308a4..0000000
--- a/bolt-slides/src/components/BigNumber.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import type { ReactNode } from 'react';
-import Reveal from '../deck/Reveal';
-
-export default function BigNumber({
-  kicker,
-  value,
-  caption,
-  foot,
-}: {
-  kicker?: string;
-  value: ReactNode;
-  caption?: ReactNode;
-  foot?: string;
-}) {
-  return (
-    <div className="slide center">
-      <Reveal>
-        {kicker && (
-          <div className="kicker" style={{ marginBottom: 18 }}>
-            {kicker}
-          </div>
-        )}
-      </Reveal>
-      <Reveal delay={0.08}>
-        <div className="figure">{value}</div>
-      </Reveal>
-      {caption && (
-        <Reveal delay={0.18}>
-          <p className="subhead bignum-caption">{caption}</p>
-        </Reveal>
-      )}
-      {foot && (
-        <Reveal delay={0.3}>
-          <div className="foot" style={{ marginTop: 'clamp(16px,3vh,26px)' }}>
-            {foot}
-          </div>
-        </Reveal>
-      )}
-    </div>
-  );
-}
diff --git a/bolt-slides/src/components/Charts.tsx b/bolt-slides/src/components/Charts.tsx
deleted file mode 100644
index a5a3c38..0000000
--- a/bolt-slides/src/components/Charts.tsx
+++ /dev/null
@@ -1,389 +0,0 @@
-import {
-  useEffect,
-  useId,
-  useState,
-  type CSSProperties,
-  type ReactNode,
-} from 'react';
-import { motion, useReducedMotion } from 'motion/react';
-import { useInView } from '../deck/useInView';
-import { useDeck } from '../deck/DeckContext';
-
-export function BarChart({
-  data,
-  height = 200,
-  showValues = true,
-}: {
-  /** valueNode overrides how the figure above a bar renders (math still uses value) */
-  data: { label: ReactNode; value: number; valueNode?: ReactNode }[];
-  height?: number;
-  showValues?: boolean;
-}) {
-  const { isStatic } = useDeck();
-  const reduce = useReducedMotion();
-  const { ref, inView } = useInView<HTMLDivElement>(0.3);
-  const animate = !isStatic && !reduce;
-  const max = Math.max(...data.map((d) => d.value)) || 1;
-
-  return (
-    <div className="ch ch-bars" ref={ref} style={{ height }}>
-      {data.map((d, i) => (
-        <div key={i} className="ch-col">
-          {showValues && (
-            <motion.div
-              className="ch-val"
-              initial={animate ? { opacity: 0, y: 6 } : false}
-              animate={inView ? { opacity: 1, y: 0 } : undefined}
-              transition={{ duration: 0.4, delay: 0.45 + i * 0.06 }}
-            >
-              {d.valueNode ?? d.value.toLocaleString('en-US')}
-            </motion.div>
-          )}
-          <div className="ch-bar-track">
-            <motion.span
-              className="ch-bar"
-              initial={animate ? { height: 0 } : false}
-              animate={{ height: inView ? `${(d.value / max) * 100}%` : 0 }}
-              transition={{
-                duration: 0.7,
-                delay: i * 0.06,
-                ease: [0.16, 1, 0.3, 1],
-              }}
-            />
-          </div>
-          <div className="ch-x">{d.label}</div>
-        </div>
-      ))}
-    </div>
-  );
-}
-
-export function LineChart({
-  points: rawPoints,
-  height = 200,
-  showValues = false,
-  large = false,
-  valueNodes,
-}: {
-  points: number[];
-  height?: number;
-  showValues?: boolean;
-  large?: boolean;
-  valueNodes?: ReactNode[];
-}) {
-  const points =
-    rawPoints.length >= 2
-      ? rawPoints
-      : rawPoints.length === 1
-      ? [rawPoints[0], rawPoints[0]]
-      : [0, 0];
-
-  const { isStatic } = useDeck();
-  const reduce = useReducedMotion();
-  const { ref, inView } = useInView<HTMLDivElement>(0.3);
-  const gid = useId();
-  const animate = !isStatic && !reduce;
-
-  const w = 300,
-    h = 120;
-  const max = Math.max(...points),
-    min = Math.min(...points);
-  const span = max - min || 1;
-  const coords = points.map((p, i) => [
-    (i / (points.length - 1)) * w,
-    h - ((p - min) / span) * (h - 10) - 5,
-  ]);
-  const line = coords
-    .map(
-      (c, i) => `${i === 0 ? 'M' : 'L'}${c[0].toFixed(1)},${c[1].toFixed(1)}`
-    )
-    .join(' ');
-  const area = `${line} L${w},${h} L0,${h} Z`;
-  const [ex, ey] = coords[coords.length - 1];
-
-  return (
-    <div className="ch-wrap" ref={ref}>
-      <svg
-        className="ch-line"
-        viewBox={`0 0 ${w} ${h}`}
-        preserveAspectRatio="none"
-        style={{ height }}
-      >
-        <defs>
-          <linearGradient id={gid} x1="0" y1="0" x2="0" y2="1">
-            <stop offset="0%" stopColor="var(--primary)" stopOpacity="0.34" />
-            <stop offset="100%" stopColor="var(--primary)" stopOpacity="0" />
-          </linearGradient>
-        </defs>
-        {/* horizontal gridlines — crisp regardless of the non-uniform scale */}
-        {[0.25, 0.5, 0.75].map((f) => (
-          <line
-            key={f}
-            x1="0"
-            x2={w}
-            y1={5 + (h - 10) * f}
-            y2={5 + (h - 10) * f}
-            stroke="var(--hair-2)"
-            strokeWidth={1}
-            vectorEffect="non-scaling-stroke"
-          />
-        ))}
-        <line
-          x1="0"
-          x2={w}
-          y1={h - 0.5}
-          y2={h - 0.5}
-          stroke="var(--hair)"
-          strokeWidth={1}
-          vectorEffect="non-scaling-stroke"
-        />
-        <motion.path
-          d={area}
-          fill={`url(#${gid})`}
-          initial={animate ? { opacity: 0 } : false}
-          animate={{ opacity: inView ? 1 : 0 }}
-          transition={{ duration: 0.6, delay: 0.5 }}
-        />
-        {/* no vectorEffect here: non-scaling-stroke breaks the pathLength
-            draw-in under a stretched viewBox (the dash ends before the path
-            does and the stroke stops short of its end-point) */}
-        <motion.path
-          d={line}
-          fill="none"
-          stroke="var(--primary)"
-          strokeWidth={2.5}
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          initial={animate ? { pathLength: 0 } : false}
-          animate={{ pathLength: inView ? 1 : 0 }}
-          transition={{ duration: 1.2, ease: [0.16, 1, 0.3, 1] }}
-        />
-      </svg>
-      {showValues &&
-        coords.map((c, i) => (
-          <span
-            key={i}
-            className={'ch-pt-val' + (inView ? ' shown' : '')}
-            style={{
-              left: `${(c[0] / w) * 100}%`,
-              top: `${(c[1] / h) * 100}%`,
-              transitionDelay: `${0.3 + i * 0.05}s`,
-            }}
-          >
-            {valueNodes?.[i] ?? points[i].toLocaleString('en-US')}
-          </span>
-        ))}
-      {/* the live end-point — a glowing dot with a radar pulse */}
-      <span
-        className={'ch-dot' + (large ? ' lg' : '') + (inView ? ' shown' : '')}
-        style={{ left: `${(ex / w) * 100}%`, top: `${(ey / h) * 100}%` }}
-        aria-hidden
-      />
-    </div>
-  );
-}
-
-export function DonutChart({
-  value,
-  label,
-  size = 168,
-  valueNode,
-}: {
-  value: number;
-  label?: ReactNode;
-  size?: number;
-  valueNode?: ReactNode;
-}) {
-  const { isStatic } = useDeck();
-  const reduce = useReducedMotion();
-  const { ref, inView } = useInView<SVGSVGElement>(0.4);
-  const [shown, setShown] = useState(isStatic ? value : 0);
-  const r = 54;
-  const circ = 2 * Math.PI * r;
-
-  useEffect(() => {
-    if (isStatic || !inView) return;
-
-    if (reduce) {
-      setShown(value);
-      return;
-    }
-
-    let raf = 0;
-    const t0 = performance.now();
-    const dur = 1100;
-    const tick = (now: number) => {
-      const p = Math.min(1, (now - t0) / dur);
-
-      setShown(value * (1 - Math.pow(1 - p, 3)));
-      if (p < 1) raf = requestAnimationFrame(tick);
-    };
-
-    raf = requestAnimationFrame(tick);
-
-    return () => cancelAnimationFrame(raf);
-  }, [isStatic, inView, value, reduce]);
-
-  return (
-    <div
-      className="ch-donut"
-      style={{ '--ch-size': `${size}px` } as CSSProperties}
-    >
-      <div className="ch-donut-ring">
-        <svg ref={ref} viewBox="0 0 140 140">
-          <circle
-            cx="70"
-            cy="70"
-            r={r}
-            fill="none"
-            stroke="var(--hair)"
-            strokeWidth={12}
-          />
-          <motion.circle
-            className="ch-donut-arc"
-            cx="70"
-            cy="70"
-            r={r}
-            fill="none"
-            stroke="var(--primary)"
-            strokeWidth={12}
-            strokeLinecap="round"
-            strokeDasharray={circ}
-            transform="rotate(-90 70 70)"
-            initial={isStatic || reduce ? false : { strokeDashoffset: circ }}
-            animate={{
-              strokeDashoffset: inView ? circ * (1 - value / 100) : circ,
-            }}
-            transition={{ duration: 1.1, ease: [0.16, 1, 0.3, 1] }}
-          />
-          {valueNode ? null : (
-            <text
-              x="70"
-              y="70"
-              textAnchor="middle"
-              dominantBaseline="central"
-              className="ch-donut-val"
-            >
-              {Math.round(shown)}%
-            </text>
-          )}
-        </svg>
-        {valueNode ? (
-          <div className="ch-donut-val-html">{valueNode}</div>
-        ) : null}
-      </div>
-      {label ? <div className="ch-donut-label">{label}</div> : null}
-    </div>
-  );
-}
-
-const SERIES_COLORS = [
-  'var(--primary)',
-  'color-mix(in srgb, var(--primary) 45%, var(--fg-muted))',
-  'color-mix(in srgb, var(--fg-muted) 60%, transparent)',
-];
-
-export function GroupedBarChart({
-  categories,
-  series,
-  height = 240,
-  showValues = false,
-}: {
-  categories: ReactNode[];
-  series: { label: ReactNode; values: number[]; valueNodes?: ReactNode[] }[];
-  height?: number;
-  showValues?: boolean;
-}) {
-  const { isStatic } = useDeck();
-  const reduce = useReducedMotion();
-  const { ref, inView } = useInView<HTMLDivElement>(0.3);
-  const animate = !isStatic && !reduce;
-  const max = Math.max(...series.flatMap((s) => s.values), 1);
-  // 4 tidy ticks
-  const step = Math.pow(10, Math.floor(Math.log10(max / 4 || 1)));
-  const unit =
-    [1, 2, 2.5, 5, 10].map((m) => m * step).find((u) => u * 4 >= max) ?? step;
-  const top = unit * 4;
-  const ticks = [4, 3, 2, 1];
-
-  return (
-    <div className="gch" ref={ref}>
-      <div className="gch-legend">
-        {series.map((s, i) => (
-          <span key={i} className="gch-key">
-            <i
-              style={{ background: SERIES_COLORS[i % SERIES_COLORS.length] }}
-            />
-            {s.label}
-          </span>
-        ))}
-      </div>
-      <div className="gch-plot" style={{ height }}>
-        <div className="gch-axis">
-          {ticks.map((t) => (
-            <span
-              key={t}
-              className="gch-tick"
-              style={{ bottom: `${(t / 4) * 100}%` }}
-            >
-              {(unit * t) % 1 === 0 ? unit * t : (unit * t).toFixed(1)}
-            </span>
-          ))}
-        </div>
-        <div className="gch-area">
-          {ticks.map((t) => (
-            <span
-              key={t}
-              className="gch-grid"
-              style={{ bottom: `${(t / 4) * 100}%` }}
-            />
-          ))}
-          <div className="gch-groups">
-            {categories.map((c, ci) => (
-              <div key={ci} className="gch-group">
-                <div className="gch-bars">
-                  {series.map((s, si) => (
-                    <div key={si} className="gch-barwrap">
-                      {showValues && (
-                        <motion.span
-                          className="gch-val"
-                          initial={animate ? { opacity: 0 } : false}
-                          animate={{ opacity: inView ? 1 : 0 }}
-                          transition={{
-                            duration: 0.4,
-                            delay: 0.5 + ci * 0.06 + si * 0.04,
-                          }}
-                        >
-                          {s.valueNodes?.[ci] ??
-                            (s.values[ci] ?? 0).toLocaleString('en-US')}
-                        </motion.span>
-                      )}
-                      <motion.span
-                        className="gch-bar"
-                        style={{
-                          background: SERIES_COLORS[si % SERIES_COLORS.length],
-                        }}
-                        initial={animate ? { height: 0 } : false}
-                        animate={{
-                          height: inView
-                            ? `${((s.values[ci] ?? 0) / top) * 100}%`
-                            : 0,
-                        }}
-                        transition={{
-                          duration: 0.7,
-                          delay: ci * 0.06 + si * 0.04,
-                          ease: [0.16, 1, 0.3, 1],
-                        }}
-                      />
-                    </div>
-                  ))}
-                </div>
-                <div className="gch-x">{c}</div>
-              </div>
-            ))}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/bolt-slides/src/components/Chat.tsx b/bolt-slides/src/components/Chat.tsx
deleted file mode 100644
index d110f9a..0000000
--- a/bolt-slides/src/components/Chat.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import Build from '../deck/Build';
-import Reveal from '../deck/Reveal';
-
-export type ChatMessage = { from: 'user' | 'ai'; text: string };
-
-export default function Chat({
-  kicker,
-  title,
-  name = 'Assistant',
-  messages,
-}: {
-  kicker?: string;
-  title?: string;
-  name?: string;
-  messages: ChatMessage[];
-}) {
-  return (
-    <div className="slide">
-      <div className="container">
-        <Reveal>
-          {kicker && (
-            <div
-              className="kicker"
-              style={{ marginBottom: 10, textAlign: 'center' }}
-            >
-              {kicker}
-            </div>
-          )}
-          {title && (
-            <h2
-              className="headline"
-              style={{
-                textAlign: 'center',
-                marginInline: 'auto',
-                marginBottom: 'clamp(22px,3.5vh,36px)',
-              }}
-            >
-              {title}
-            </h2>
-          )}
-        </Reveal>
-        <Reveal delay={0.1}>
-          <div className="chat mat">
-            <div className="chat-head">
-              <span className="ddot" />
-              {name}
-            </div>
-            <div className="chat-body">
-              {messages.map((m, i) => (
-                <Build key={i} at={i + 1} className={'msg ' + m.from} y={10}>
-                  {m.text}
-                </Build>
-              ))}
-            </div>
-          </div>
-        </Reveal>
-      </div>
-    </div>
-  );
-}
diff --git a/bolt-slides/src/components/CodeWindow.tsx b/bolt-slides/src/components/CodeWindow.tsx
deleted file mode 100644
index cc96cb1..0000000
--- a/bolt-slides/src/components/CodeWindow.tsx
+++ /dev/null
@@ -1,100 +0,0 @@
-import { Fragment, type ReactNode } from 'react';
-
-const KW =
-  /\b(const|let|var|function|return|if|else|for|while|import|from|export|default|class|new|await|async|type|interface|extends|implements|public|private|true|false|null|undefined)\b/g;
-const NUM = /(\b\d+(?:\.\d+)?\b)/g;
-
-function tintNumbers(s: string, key: number): ReactNode {
-  const parts = s.split(NUM);
-
-  if (parts.length === 1) return s;
-
-  return (
-    <Fragment key={key}>
-      {parts.map((p, k) =>
-        k % 2 === 1 ? (
-          <span key={k} className="cw-num">
-            {p}
-          </span>
-        ) : (
-          p
-        )
-      )}
-    </Fragment>
-  );
-}
-
-function hl(line: string): ReactNode {
-  // split off a trailing line comment
-  const ci = line.indexOf('//');
-  const code = ci >= 0 ? line.slice(0, ci) : line;
-  const comment = ci >= 0 ? line.slice(ci) : '';
-
-  // strings first (odd indices), then keywords, then numeric literals
-  const segs = code.split(
-    /("(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*'|`(?:[^`\\]|\\.)*`)/g
-  );
-
-  return (
-    <>
-      {segs.map((seg, i) =>
-        i % 2 === 1 ? (
-          <span key={i} className="cw-str">
-            {seg}
-          </span>
-        ) : (
-          <Fragment key={i}>
-            {seg.split(KW).map((s, j) =>
-              j % 2 === 1 ? (
-                <span key={j} className="cw-kw">
-                  {s}
-                </span>
-              ) : (
-                tintNumbers(s, j)
-              )
-            )}
-          </Fragment>
-        )
-      )}
-      {comment && <span className="cw-com">{comment}</span>}
-    </>
-  );
-}
-
-export default function CodeWindow({
-  title = 'app.tsx',
-  code,
-  highlight = [],
-}: {
-  title?: string;
-  code: string;
-  highlight?: number[];
-}) {
-  const lines = code.replace(/\n$/, '').split('\n');
-
-  return (
-    <div className="cw mat">
-      <div className="cw-bar">
-        <span className="cw-dots">
-          <i />
-          <i />
-          <i />
-        </span>
-        <span className="cw-title">{title}</span>
-      </div>
-      <pre className="cw-body">
-        <code>
-          {lines.map((ln, i) => (
-            <div
-              key={i}
-              className={'cw-line' + (highlight.includes(i + 1) ? ' hl' : '')}
-            >
-              <span className="cw-no">{i + 1}</span>
-              <span className="cw-code">{ln.length ? hl(ln) : ' '}</span>
-            </div>
-          ))}
-        </code>
-      </pre>
-    </div>
-  );
-}
diff --git a/bolt-slides/src/components/Comparison.tsx b/bolt-slides/src/components/Comparison.tsx
deleted file mode 100644
index 10f0488..0000000
--- a/bolt-slides/src/components/Comparison.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-import type { CSSProperties, ReactNode } from 'react';
-import { motion, useReducedMotion } from 'motion/react';
-import { useInView } from '../deck/useInView';
-
-export type CompRow = { label: ReactNode; values: (boolean | ReactNode)[] };
-
-const Check = () => (
-  <svg
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth={2.6}
-    strokeLinecap="round"
-    strokeLinejoin="round"
-  >
-    <path d="M5 12.5l4.5 4.5L19 6.5" />
-  </svg>
-);
-
-const Cross = () => (
-  <svg
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth={2.3}
-    strokeLinecap="round"
-    strokeLinejoin="round"
-  >
-    <path d="M7 7l10 10M17 7L7 17" />
-  </svg>
-);
-
-export default function Comparison({
-  cols,
-  rows,
-  highlight = 0,
-}: {
-  cols: ReactNode[];
-  rows: CompRow[];
-  highlight?: number;
-}) {
-  const { ref, inView } = useInView<HTMLDivElement>(0.25);
-  const reduce = useReducedMotion();
-  const vcols = cols.length - 1;
-
-  return (
-    <div
-      ref={ref}
-      className="cmp mat"
-      style={{ '--vcols': vcols } as CSSProperties}
-    >
-      <div className="cmp-row cmp-head">
-        {cols.map((c, i) => (
-          <div
-            key={i}
-            className={'cmp-cell cmp-h' + (i - 1 === highlight ? ' hl' : '')}
-          >
-            {c}
-          </div>
-        ))}
-      </div>
-      {rows.map((r, ri) => (
-        <motion.div
-          key={ri}
-          className="cmp-row"
-          initial={reduce ? false : { opacity: 0, y: 10 }}
-          animate={inView ? { opacity: 1, y: 0 } : undefined}
-          transition={{
-            duration: 0.45,
-            delay: 0.1 + ri * 0.07,
-            ease: [0.16, 1, 0.3, 1],
-          }}
-        >
-          <div className="cmp-cell cmp-label">{r.label}</div>
-          {r.values.map((v, vi) => (
-            <div
-              key={vi}
-              className={'cmp-cell' + (vi === highlight ? ' hl' : '')}
-            >
-              {typeof v === 'boolean' ? (
-                <span className={'cmp-chip ' + (v ? 'ok' : 'no')}>
-                  {v ? <Check /> : <Cross />}
-                </span>
-              ) : (
-                <span className="cmp-val">{v}</span>
-              )}
-            </div>
-          ))}
-        </motion.div>
-      ))}
-    </div>
-  );
-}
diff --git a/bolt-slides/src/components/Contrast.tsx b/bolt-slides/src/components/Contrast.tsx
deleted file mode 100644
index 6ef9aec..0000000
--- a/bolt-slides/src/components/Contrast.tsx
+++ /dev/null
@@ -1,111 +0,0 @@
-import type { ReactNode } from 'react';
-import { motion, useReducedMotion } from 'motion/react';
-import Reveal from '../deck/Reveal';
-import { useDeck } from '../deck/DeckContext';
-
-export type ContrastPanel = {
-  label?: string;
-  title?: string;
-  points: ReactNode[];
-};
-
-const Cross = () => (
-  <svg
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth={2.2}
-    strokeLinecap="round"
-    strokeLinejoin="round"
-  >
-    <path d="M7 7l10 10M17 7L7 17" />
-  </svg>
-);
-
-const Check = () => (
-  <svg
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth={2.6}
-    strokeLinecap="round"
-    strokeLinejoin="round"
-  >
-    <path d="M5 12.5l4.5 4.5L19 6.5" />
-  </svg>
-);
-
-export default function Contrast({
-  kicker,
-  title,
-  left,
-  right,
-}: {
-  kicker?: string;
-  title?: string;
-  left: ContrastPanel;
-  right: ContrastPanel;
-}) {
-  const { isStatic } = useDeck();
-  const reduce = useReducedMotion();
-  const animate = !isStatic && !reduce;
-
-  const panel = (p: ContrastPanel, lit: boolean, i: number) => (
-    <motion.div
-      className={'con-panel mat ' + (lit ? 'lit' : 'dim')}
-      initial={animate ? { opacity: 0, y: 24 } : false}
-      animate={{ opacity: 1, y: 0 }}
-      transition={{
-        duration: 0.55,
-        delay: 0.18 + i * 0.14,
-        ease: [0.16, 1, 0.3, 1],
-      }}
-    >
-      {p.label && (
-        <span className={'chip' + (lit ? '' : ' dim')}>{p.label}</span>
-      )}
-      {p.title && <h3>{p.title}</h3>}
-      <div className="con-points">
-        {p.points.map((pt, pi) => (
-          <div key={pi} className="con-point">
-            {lit ? <Check /> : <Cross />}
-            <span>{pt}</span>
-          </div>
-        ))}
-      </div>
-    </motion.div>
-  );
-
-  return (
-    <div className="slide">
-      <div className="container">
-        <Reveal>
-          {kicker && (
-            <div
-              className="kicker"
-              style={{ marginBottom: 10, textAlign: 'center' }}
-            >
-              {kicker}
-            </div>
-          )}
-          {title && (
-            <h2
-              className="headline"
-              style={{
-                textAlign: 'center',
-                marginInline: 'auto',
-                marginBottom: 'clamp(26px,4.5vh,46px)',
-              }}
-            >
-              {title}
-            </h2>
-          )}
-        </Reveal>
-        <div className="contrast">
-          {panel(left, false, 0)}
-          {panel(right, true, 1)}
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/bolt-slides/src/components/CountUp.tsx b/bolt-slides/src/components/CountUp.tsx
deleted file mode 100644
index 26e5163..0000000
--- a/bolt-slides/src/components/CountUp.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import { useEffect, useRef, useState } from 'react';
-import { useDeck } from '../deck/DeckContext';
-
-export default function CountUp({
-  to,
-  from = 0,
-  duration = 1500,
-  decimals = 0,
-  prefix = '',
-  suffix = '',
-}: {
-  to: number;
-  from?: number;
-  duration?: number;
-  decimals?: number;
-  prefix?: string;
-  suffix?: string;
-}) {
-  const { isStatic } = useDeck();
-  const ref = useRef<HTMLSpanElement>(null);
-  const [val, setVal] = useState(isStatic ? to : from);
-  const started = useRef(false);
-
-  useEffect(() => {
-    if (isStatic) {
-      setVal(to);
-      return;
-    }
-
-    const el = ref.current;
-
-    if (!el) return;
-
-    let raf = 0;
-    const run = () => {
-      if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
-        setVal(to);
-        return;
-      }
-
-      const t0 = performance.now();
-      const tick = (now: number) => {
-        const p = Math.min(1, (now - t0) / duration);
-
-        setVal(from + (to - from) * (1 - Math.pow(1 - p, 5)));
-        if (p < 1) raf = requestAnimationFrame(tick);
-      };
-
-      raf = requestAnimationFrame(tick);
-    };
-
-    const io = new IntersectionObserver(
-      (entries) =>
-        entries.forEach((e) => {
-          if (e.isIntersecting && !started.current) {
-            started.current = true;
-            run();
-          }
-        }),
-      { threshold: 0.4 }
-    );
-
-    io.observe(el);
-
-    return () => {
-      io.disconnect();
-      cancelAnimationFrame(raf);
-    };
-  }, [isStatic, to, from, duration]);
-
-  const text =
-    prefix +
-    val.toLocaleString('en-US', {
-      minimumFractionDigits: decimals,
-      maximumFractionDigits: decimals,
-    }) +
-    suffix;
-
-  return (
-    <span ref={ref} style={{ fontVariantNumeric: 'tabular-nums' }}>
-      {text}
-    </span>
-  );
-}
diff --git a/bolt-slides/src/components/Cover.tsx b/bolt-slides/src/components/Cover.tsx
deleted file mode 100644
index ca8d32b..0000000
--- a/bolt-slides/src/components/Cover.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import type { ReactNode } from 'react';
-import Reveal from '../deck/Reveal';
-import { effectiveImageDim } from '../data/imageDim';
-
-export default function Cover({
-  kicker,
-  title,
-  subtitle,
-  image,
-  foot,
-  dim,
-}: {
-  kicker?: string;
-  title: ReactNode;
-  subtitle?: ReactNode;
-  image?: string;
-  dim?: number;
-  foot?: string;
-}) {
-  return (
-    <div className="slide center">
-      {image && (
-        <>
-          <img className="cover-img" src={image} alt="" aria-hidden />
-          <div
-            className="cover-scrim"
-            aria-hidden
-            style={{ ['--dim' as string]: effectiveImageDim(dim) }}
-          />
-        </>
-      )}
-      <Reveal>
-        {kicker && (
-          <div className="kicker" style={{ marginBottom: 14 }}>
-            {kicker}
-          </div>
-        )}
-      </Reveal>
-      <Reveal delay={0.08}>
-        <h1 className="display">{title}</h1>
-      </Reveal>
-      {subtitle && (
-        <Reveal delay={0.16}>
-          <p className="subhead" style={{ marginTop: 18 }}>
-            {subtitle}
-          </p>
-        </Reveal>
-      )}
-      {foot && (
-        <Reveal delay={0.3} className="cover-foot">
-          <div className="foot">{foot}</div>
-        </Reveal>
-      )}
-    </div>
-  );
-}
diff --git a/bolt-slides/src/components/Marquee.tsx b/bolt-slides/src/components/Marquee.tsx
deleted file mode 100644
index c4e6d22..0000000
--- a/bolt-slides/src/components/Marquee.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { Fragment, type ReactNode } from 'react';
-
-export default function Marquee({
-  items,
-  duration = 26,
-}: {
-  items: ReactNode[];
-  duration?: number;
-}) {
-  const run = (copy: number) => (
-    <Fragment key={copy}>
-      {items.map((it, i) => (
-        <Fragment key={`${copy}-${i}`}>
-          <span className="marquee-item" aria-hidden={copy === 1 || undefined}>
-            {it}
-          </span>
-          <span className="marquee-dot" aria-hidden />
-        </Fragment>
-      ))}
-    </Fragment>
-  );
-
-  return (
-    <div className="marquee">
-      <div
-        className="marquee-track"
-        style={{ animationDuration: `${duration}s` }}
-      >
-        {run(0)}
-        {run(1)}
-      </div>
-    </div>
-  );
-}
diff --git a/bolt-slides/src/components/Pricing.tsx b/bolt-slides/src/components/Pricing.tsx
deleted file mode 100644
index 917a550..0000000
--- a/bolt-slides/src/components/Pricing.tsx
+++ /dev/null
@@ -1,108 +0,0 @@
-import type { CSSProperties } from 'react';
-import { motion, useReducedMotion } from 'motion/react';
-import Reveal from '../deck/Reveal';
-import { useDeck } from '../deck/DeckContext';
-
-export type Tier = {
-  name: string;
-  price: string;
-  period?: string;
-  blurb?: string;
-  features?: string[];
-  highlight?: boolean;
-  badge?: string;
-};
-
-const Check = () => (
-  <svg
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth={2.6}
-    strokeLinecap="round"
-    strokeLinejoin="round"
-  >
-    <path d="M5 12.5l4.5 4.5L19 6.5" />
-  </svg>
-);
-
-export default function Pricing({
-  kicker,
-  title,
-  tiers,
-}: {
-  kicker?: string;
-  title?: string;
-  tiers: Tier[];
-}) {
-  const { isStatic } = useDeck();
-  const reduce = useReducedMotion();
-  const animate = !isStatic && !reduce;
-
-  return (
-    <div className="slide">
-      <div className="container">
-        <Reveal>
-          {kicker && (
-            <div
-              className="kicker"
-              style={{ marginBottom: 10, textAlign: 'center' }}
-            >
-              {kicker}
-            </div>
-          )}
-          {title && (
-            <h2
-              className="headline"
-              style={{
-                textAlign: 'center',
-                marginInline: 'auto',
-                marginBottom: 'clamp(26px,4.5vh,46px)',
-              }}
-            >
-              {title}
-            </h2>
-          )}
-        </Reveal>
-        <div
-          className="pricing"
-          style={{ '--tiers': tiers.length } as CSSProperties}
-        >
-          {tiers.map((t, i) => (
-            <motion.div
-              key={i}
-              className={'tier mat' + (t.highlight ? ' hl' : '')}
-              initial={animate ? { opacity: 0, y: 24 } : false}
-              animate={{ opacity: 1, y: 0 }}
-              transition={{
-                duration: 0.55,
-                delay: 0.16 + i * 0.09,
-                ease: [0.16, 1, 0.3, 1],
-              }}
-            >
-              {t.highlight && (
-                <span className="tier-badge">{t.badge ?? 'Most popular'}</span>
-              )}
-              <div className="tier-name">{t.name}</div>
-              <div className="tier-price">
-                <span className="tier-amount">{t.price}</span>
-                {t.period && <span className="tier-period">{t.period}</span>}
-              </div>
-              {t.blurb && <div className="tier-blurb">{t.blurb}</div>}
-              {t.features && t.features.length > 0 && (
-                <div className="tier-list">
-                  {t.features.map((f, fi) => (
-                    <div key={fi} className="tier-feat">
-                      <Check />
-                      {f}
-                    </div>
-                  ))}
-                </div>
-              )}
-            </motion.div>
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/bolt-slides/src/components/Quote.tsx b/bolt-slides/src/components/Quote.tsx
deleted file mode 100644
index 4ec1532..0000000
--- a/bolt-slides/src/components/Quote.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-import type { ReactNode } from 'react';
-import Reveal from '../deck/Reveal';
-import { effectiveImageDim } from '../data/imageDim';
-
-export default function Quote({
-  text,
-  name,
-  role,
-  img,
-  image,
-  initials: initialsProp,
-  dim,
-}: {
-  text: ReactNode;
-  name?: ReactNode;
-  role?: ReactNode;
-  img?: string;
-  image?: string;
-  dim?: number;
-  /** avatar initials — required when `name` isn't a plain string */
-  initials?: string;
-}) {
-  const initials =
-    initialsProp ??
-    (typeof name === 'string'
-      ? name
-          .split(/\s+/)
-          .map((w) => w[0])
-          .slice(0, 2)
-          .join('')
-          .toUpperCase()
-      : '');
-
-  return (
-    <div className="slide center">
-      {image && (
-        <>
-          <img className="cover-img" src={image} alt="" aria-hidden />
-          <div
-            className="cover-scrim"
-            aria-hidden
-            style={{ ['--dim' as string]: effectiveImageDim(dim) }}
-          />
-        </>
-      )}
-      <Reveal>
-        <div className="quote-mark" aria-hidden>
-          “
-        </div>
-      </Reveal>
-      <Reveal delay={0.08}>
-        <p
-          className="quote-text"
-          style={{ marginTop: 'clamp(14px,2.5vh,24px)' }}
-        >
-          {text}
-        </p>
-      </Reveal>
-      {name && (
-        <Reveal delay={0.18}>
-          <div className="quote-attr">
-            <span className="quote-ava">
-              {img ? (
-                <img src={img} alt={typeof name === 'string' ? name : ''} />
-              ) : (
-                initials
-              )}
-            </span>
-            <span className="quote-who">
-              <div className="quote-name">{name}</div>
-              {role && <div className="quote-role">{role}</div>}
-            </span>
-          </div>
-        </Reveal>
-      )}
-    </div>
-  );
-}
diff --git a/bolt-slides/src/components/Section.tsx b/bolt-slides/src/components/Section.tsx
deleted file mode 100644
index f16367d..0000000
--- a/bolt-slides/src/components/Section.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import type { ReactNode } from 'react';
-import Reveal from '../deck/Reveal';
-import { effectiveImageDim } from '../data/imageDim';
-
-export default function Section({
-  n,
-  kicker,
-  title,
-  image,
-  dim,
-}: {
-  n?: number | string;
-  kicker?: string;
-  title: ReactNode;
-  image?: string;
-  dim?: number;
-}) {
-  return (
-    <div className="slide center">
-      {image && (
-        <>
-          <img className="cover-img" src={image} alt="" aria-hidden />
-          <div
-            className="cover-scrim"
-            aria-hidden
-            style={{ ['--dim' as string]: effectiveImageDim(dim) }}
-          />
-        </>
-      )}
-      <div className="sec-glow" aria-hidden />
-      {n != null && (
-        <div className="sec-ghost" aria-hidden>
-          {String(n).padStart(2, '0')}
-        </div>
-      )}
-      <Reveal>
-        {kicker && (
-          <div className="kicker" style={{ marginBottom: 16 }}>
-            {kicker}
-          </div>
-        )}
-        <h2 className="display">{title}</h2>
-      </Reveal>
-    </div>
-  );
-}
diff --git a/bolt-slides/src/components/StatGrid.tsx b/bolt-slides/src/components/StatGrid.tsx
deleted file mode 100644
index 627cb7b..0000000
--- a/bolt-slides/src/components/StatGrid.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import type { ReactNode } from 'react';
-import { motion, useReducedMotion } from 'motion/react';
-import Reveal from '../deck/Reveal';
-import { useDeck } from '../deck/DeckContext';
-
-export type Stat = { value?: ReactNode; label: string; caption?: string };
-
-export default function StatGrid({
-  kicker,
-  title,
-  stats,
-}: {
-  kicker?: string;
-  title?: string;
-  stats: Stat[];
-}) {
-  const { isStatic } = useDeck();
-  const reduce = useReducedMotion();
-  const animate = !isStatic && !reduce;
-
-  return (
-    <div className="slide">
-      <div className="container">
-        <Reveal>
-          {kicker && (
-            <div
-              className="kicker"
-              style={{ marginBottom: 10, textAlign: 'center' }}
-            >
-              {kicker}
-            </div>
-          )}
-          {title && (
-            <h2
-              className="headline"
-              style={{
-                textAlign: 'center',
-                marginInline: 'auto',
-                marginBottom: 'clamp(24px,4vh,44px)',
-              }}
-            >
-              {title}
-            </h2>
-          )}
-        </Reveal>
-        <div className="stat-grid">
-          {stats.map((s, i) => (
-            <motion.div
-              key={i}
-              className="stat-cell"
-              initial={animate ? { opacity: 0, y: 24 } : false}
-              animate={{ opacity: 1, y: 0 }}
-              transition={{
-                duration: 0.55,
-                delay: 0.18 + i * 0.09,
-                ease: [0.16, 1, 0.3, 1],
-              }}
-            >
-              <div className="stat-card mat">
-                <span className="tick" />
-                <div className="stat-value">{s.value}</div>
-                <div className="stat-label">{s.label}</div>
-                {s.caption && <div className="stat-caption">{s.caption}</div>}
-              </div>
-            </motion.div>
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/bolt-slides/src/components/Steps.tsx b/bolt-slides/src/components/Steps.tsx
deleted file mode 100644
index a38f7f8..0000000
--- a/bolt-slides/src/components/Steps.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-import type { CSSProperties, ReactNode } from 'react';
-import { motion, useReducedMotion } from 'motion/react';
-import Reveal from '../deck/Reveal';
-import { useDeck } from '../deck/DeckContext';
-
-export type Step = { title: string; body?: ReactNode };
-
-export default function Steps({
-  kicker,
-  title,
-  items,
-}: {
-  kicker?: string;
-  title?: string;
-  items: Step[];
-}) {
-  const { isStatic } = useDeck();
-  const reduce = useReducedMotion();
-  const animate = !isStatic && !reduce;
-
-  return (
-    <div className="slide">
-      <div className="container">
-        <Reveal>
-          {kicker && (
-            <div
-              className="kicker"
-              style={{ marginBottom: 10, textAlign: 'center' }}
-            >
-              {kicker}
-            </div>
-          )}
-          {title && (
-            <h2
-              className="headline"
-              style={{
-                textAlign: 'center',
-                marginInline: 'auto',
-                marginBottom: 'clamp(26px,4.5vh,48px)',
-              }}
-            >
-              {title}
-            </h2>
-          )}
-        </Reveal>
-        <div className="steps" style={{ '--n': items.length } as CSSProperties}>
-          {items.map((s, i) => (
-            <motion.div
-              key={i}
-              className="step"
-              initial={animate ? { opacity: 0, y: 20 } : false}
-              animate={{ opacity: 1, y: 0 }}
-              transition={{
-                duration: 0.5,
-                delay: 0.18 + i * 0.14,
-                ease: [0.16, 1, 0.3, 1],
-              }}
-            >
-              <div className="step-no-row">
-                <span className="step-no">
-                  {String(i + 1).padStart(2, '0')}
-                </span>
-                <span
-                  className={
-                    'step-line' + (i === items.length - 1 ? ' end' : '')
-                  }
-                >
-                  <motion.span
-                    initial={animate ? { scaleX: 0 } : false}
-                    animate={{ scaleX: 1 }}
-                    transition={{
-                      duration: 0.6,
-                      delay: 0.34 + i * 0.14,
-                      ease: [0.16, 1, 0.3, 1],
-                    }}
-                  />
-                </span>
-              </div>
-              <h3>{s.title}</h3>
-              {s.body && <p>{s.body}</p>}
-            </motion.div>
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/bolt-slides/src/components/Table.tsx b/bolt-slides/src/components/Table.tsx
deleted file mode 100644
index 0d11925..0000000
--- a/bolt-slides/src/components/Table.tsx
+++ /dev/null
@@ -1,104 +0,0 @@
-import { isValidElement, type ReactNode } from 'react';
-import { motion, useReducedMotion } from 'motion/react';
-import { useInView } from '../deck/useInView';
-
-export type TableColumn =
-  | ReactNode
-  | { label: ReactNode; align?: 'left' | 'right' | 'center' };
-export type TableCell = string | number | ReactNode;
-
-function isAlignedColumn(
-  column: TableColumn
-): column is { label: ReactNode; align?: 'left' | 'right' | 'center' } {
-  return (
-    typeof column === 'object' &&
-    column !== null &&
-    !isValidElement(column) &&
-    'label' in column
-  );
-}
-
-function columnLabel(column: TableColumn): ReactNode {
-  return isAlignedColumn(column) ? column.label : column;
-}
-
-export default function Table({
-  columns,
-  rows,
-  highlightCol,
-  highlightRow,
-  caption,
-}: {
-  columns: TableColumn[];
-  rows: TableCell[][];
-  highlightCol?: number;
-  highlightRow?: number;
-  caption?: ReactNode;
-}) {
-  const { ref, inView } = useInView<HTMLDivElement>(0.25);
-  const reduce = useReducedMotion();
-
-  const align = (c: TableColumn) => (isAlignedColumn(c) ? c.align : undefined);
-  const alignClass = (i: number) => {
-    const a = align(columns[i]);
-
-    return a ? ` al-${a[0]}` : '';
-  };
-
-  return (
-    <div ref={ref}>
-      <div className="dtable mat">
-        <table>
-          <thead>
-            <tr>
-              {columns.map((c, i) => (
-                <th
-                  key={i}
-                  className={
-                    (i === highlightCol ? 'hl-col' : '') + alignClass(i)
-                  }
-                >
-                  {columnLabel(c)}
-                </th>
-              ))}
-            </tr>
-          </thead>
-          <tbody>
-            {rows.map((r, ri) => (
-              <motion.tr
-                key={ri}
-                className={ri === highlightRow ? 'hl-row' : undefined}
-                initial={reduce ? false : { opacity: 0 }}
-                animate={inView ? { opacity: 1 } : undefined}
-                transition={{
-                  duration: 0.4,
-                  delay: 0.08 + ri * 0.06,
-                  ease: [0.16, 1, 0.3, 1],
-                }}
-              >
-                {r.map((cell, ci) => (
-                  <td
-                    key={ci}
-                    className={
-                      (ci === highlightCol ? 'hl-col' : '') + alignClass(ci)
-                    }
-                  >
-                    {cell}
-                  </td>
-                ))}
-              </motion.tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
-      {caption ? (
-        <div
-          className="foot dtable-caption"
-          style={{ maxWidth: 880, marginInline: 'auto' }}
-        >
-          {caption}
-        </div>
-      ) : null}
-    </div>
-  );
-}
diff --git a/bolt-slides/src/components/Tabs.tsx b/bolt-slides/src/components/Tabs.tsx
deleted file mode 100644
index 55fe022..0000000
--- a/bolt-slides/src/components/Tabs.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-import { useId, useState, type ReactNode } from 'react';
-import { AnimatePresence, motion, useReducedMotion } from 'motion/react';
-
-export type Tab = { label: string; content: ReactNode };
-
-export default function Tabs({
-  tabs,
-  defaultTab = 0,
-}: {
-  tabs: Tab[];
-  defaultTab?: number;
-}) {
-  const pillId = useId();
-  const reduce = useReducedMotion();
-  const [active, setActive] = useState(defaultTab);
-
-  function onKeyDown(e: React.KeyboardEvent) {
-    if (e.key !== 'ArrowRight' && e.key !== 'ArrowLeft') return;
-
-    e.preventDefault();
-    e.stopPropagation(); // don't page the deck while switching tabs
-
-    const next =
-      e.key === 'ArrowRight'
-        ? (active + 1) % tabs.length
-        : (active - 1 + tabs.length) % tabs.length;
-
-    setActive(next);
-
-    const bar = e.currentTarget as HTMLElement;
-
-    (bar.children[next] as HTMLElement | undefined)?.focus();
-  }
-
-  return (
-    <div className="tabs">
-      <div className="tabs-bar-row">
-        <div className="tabs-bar" role="tablist" onKeyDown={onKeyDown}>
-          {tabs.map((t, i) => (
-            <button
-              key={i}
-              className={'tab' + (i === active ? ' on' : '')}
-              onClick={() => setActive(i)}
-              role="tab"
-              aria-selected={i === active}
-              tabIndex={i === active ? 0 : -1}
-            >
-              {i === active && (
-                <motion.span
-                  layoutId={pillId}
-                  className="tab-pill"
-                  transition={
-                    reduce
-                      ? { duration: 0 }
-                      : { type: 'spring', stiffness: 380, damping: 32 }
-                  }
-                />
-              )}
-              <span className="tab-label">{t.label}</span>
-            </button>
-          ))}
-        </div>
-      </div>
-      <div className="tabs-panel">
-        <AnimatePresence mode="wait">
-          <motion.div
-            key={active}
-            className="tabs-panel-inner"
-            initial={{ opacity: 0, y: 8, filter: 'blur(2px)' }}
-            animate={{ opacity: 1, y: 0, filter: 'blur(0px)' }}
-            exit={{ opacity: 0, y: -8, filter: 'blur(2px)' }}
-            transition={{
-              duration: reduce ? 0 : 0.25,
-              ease: [0.16, 1, 0.3, 1],
-            }}
-          >
-            {tabs[active].content}
-          </motion.div>
-        </AnimatePresence>
-      </div>
-    </div>
-  );
-}
diff --git a/bolt-slides/src/components/Team.tsx b/bolt-slides/src/components/Team.tsx
deleted file mode 100644
index c84642e..0000000
--- a/bolt-slides/src/components/Team.tsx
+++ /dev/null
@@ -1,96 +0,0 @@
-import type { ReactNode } from 'react';
-import { motion, useReducedMotion } from 'motion/react';
-import Reveal from '../deck/Reveal';
-import { useDeck } from '../deck/DeckContext';
-
-export type Person = {
-  name: ReactNode;
-  role?: ReactNode;
-  img?: string;
-  /** avatar initials — required when `name` isn't a plain string */
-  initials?: string;
-};
-
-export default function Team({
-  kicker,
-  title,
-  people,
-}: {
-  kicker?: string;
-  title?: string;
-  people: Person[];
-}) {
-  const { isStatic } = useDeck();
-  const reduce = useReducedMotion();
-  const animate = !isStatic && !reduce;
-
-  return (
-    <div className="slide">
-      <div className="container">
-        <Reveal>
-          {kicker && (
-            <div
-              className="kicker"
-              style={{ marginBottom: 10, textAlign: 'center' }}
-            >
-              {kicker}
-            </div>
-          )}
-          {title && (
-            <h2
-              className="headline"
-              style={{
-                textAlign: 'center',
-                marginInline: 'auto',
-                marginBottom: 'clamp(26px,4.5vh,46px)',
-              }}
-            >
-              {title}
-            </h2>
-          )}
-        </Reveal>
-        <div className="team">
-          {people.map((p, i) => {
-            const initials =
-              p.initials ??
-              (typeof p.name === 'string'
-                ? p.name
-                    .split(/\s+/)
-                    .map((w) => w[0])
-                    .slice(0, 2)
-                    .join('')
-                    .toUpperCase()
-                : '');
-
-            return (
-              <motion.div
-                key={i}
-                className="person mat"
-                initial={animate ? { opacity: 0, y: 22 } : false}
-                animate={{ opacity: 1, y: 0 }}
-                transition={{
-                  duration: 0.5,
-                  delay: 0.16 + i * 0.08,
-                  ease: [0.16, 1, 0.3, 1],
-                }}
-              >
-                <span className="person-ava">
-                  {p.img ? (
-                    <img
-                      src={p.img}
-                      alt={typeof p.name === 'string' ? p.name : ''}
-                    />
-                  ) : (
-                    initials
-                  )}
-                </span>
-                <div className="person-name">{p.name}</div>
-                {p.role && <div className="person-role">{p.role}</div>}
-              </motion.div>
-            );
-          })}
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/bolt-slides/src/components/Timeline.tsx b/bolt-slides/src/components/Timeline.tsx
deleted file mode 100644
index b1ab71c..0000000
--- a/bolt-slides/src/components/Timeline.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import { motion, useReducedMotion } from 'motion/react';
-import type { ReactNode } from 'react';
-import { useInView } from '../deck/useInView';
-
-export type TimelineItem = { time: string; title: string; body?: ReactNode };
-
-export default function Timeline({ items }: { items: TimelineItem[] }) {
-  const { ref, inView } = useInView<HTMLDivElement>(0.2);
-  const reduce = useReducedMotion();
-
-  return (
-    <div className="tl" ref={ref}>
-      <div className="tl-line">
-        <motion.span
-          className="tl-line-fill"
-          initial={reduce ? false : { scaleY: 0 }}
-          animate={{ scaleY: inView ? 1 : 0 }}
-          transition={{ duration: reduce ? 0 : 0.9, ease: [0.16, 1, 0.3, 1] }}
-        />
-      </div>
-      <div className="tl-items">
-        {items.map((it, i) => (
-          <motion.div
-            key={i}
-            className="tl-item"
-            initial={reduce ? false : { opacity: 0, x: -14 }}
-            animate={inView ? { opacity: 1, x: 0 } : undefined}
-            transition={{
-              delay: 0.15 + i * 0.12,
-              duration: reduce ? 0 : 0.5,
-              ease: [0.16, 1, 0.3, 1],
-            }}
-          >
-            <span className="tl-dot" />
-            <div className="tl-content">
-              <span className="chip tl-time">{it.time}</span>
-              <h3>{it.title}</h3>
-              {it.body && <p>{it.body}</p>}
-            </div>
-          </motion.div>
-        ))}
-      </div>
-    </div>
-  );
-}
diff --git a/bolt-slides/src/data/fonts.ts b/bolt-slides/src/data/fonts.ts
index 744f419..a5c3b46 100644
--- a/bolt-slides/src/data/fonts.ts
+++ b/bolt-slides/src/data/fonts.ts
@@ -68,8 +68,18 @@ const FONTS: FontPairing[] = [
 ];
 
 export function applyFont(id: string | undefined) {
-  const f = FONTS.find((x) => x.id === id) ?? FONTS[0];
+  const f = FONTS.find((x) => x.id === id);
   let link = document.getElementById('gfont') as HTMLLinkElement | null;
+  const r = document.documentElement.style;
+
+  /* No deck-level pairing: impose nothing — tokens.css / the slide
+     components decide the fonts. */
+  if (!f) {
+    link?.remove();
+    r.removeProperty('--font-head');
+    r.removeProperty('--font-body');
+    return;
+  }
 
   if (f.import) {
     if (!link) {
@@ -84,8 +94,6 @@ export function applyFont(id: string | undefined) {
     link?.remove();
   }
 
-  const r = document.documentElement.style;
-
   r.setProperty(
     '--font-head',
     `'${f.head}', 'Inter', -apple-system, sans-serif`
diff --git a/bolt-slides/src/data/layoutProps.ts b/bolt-slides/src/data/layoutProps.ts
deleted file mode 100644
index 23e1f8e..0000000
--- a/bolt-slides/src/data/layoutProps.ts
+++ /dev/null
@@ -1,344 +0,0 @@
-export type TextScale = 'lg' | 'xl';
-
-type Scaled<T> = T & { scale?: TextScale };
-
-export type CardSurface =
-  | { type: 'color'; color: string }
-  | { type: 'gradient'; from: string; to: string; angle?: number };
-
-export type BarDatum = { label: string; value: number };
-export type DonutDatum = { value: number; label: string };
-export type GroupedSeries = { label: string; values: string };
-export type LineSeries = { label: string; points: string };
-export type InsightTakeaway = { label: string; body: string };
-
-export type CoverProps = Scaled<{
-  kicker: string;
-  title: string;
-  subtitle?: string;
-  image?: string;
-  dim?: number;
-  foot?: string;
-}>;
-
-export type SectionProps = Scaled<{
-  n: number;
-  kicker: string;
-  title: string;
-  image?: string;
-  dim?: number;
-}>;
-
-export type StatementProps = Scaled<{
-  kicker?: string;
-  title: string;
-  body?: string;
-}>;
-
-export type BigNumberProps = Scaled<{
-  kicker?: string;
-  value: string;
-  caption: string;
-  foot?: string;
-}>;
-
-export type ManifestoProps = Scaled<{
-  label: string;
-  text: string;
-}>;
-
-export type QuoteProps = Scaled<{
-  text: string;
-  name?: string;
-  role?: string;
-  img?: string;
-  image?: string;
-  dim?: number;
-}>;
-
-export type AgendaProps = Scaled<{
-  kicker?: string;
-  title?: string;
-  items: { title: string; hint?: string }[];
-}>;
-
-export type StepsProps = Scaled<{
-  kicker?: string;
-  title?: string;
-  items: { title: string; body?: string }[];
-}>;
-
-export type PillarsProps = Scaled<{
-  title: string;
-  items: { title: string; body: string }[];
-  large?: boolean;
-}>;
-
-export type TimelineProps = Scaled<{
-  kicker?: string;
-  title?: string;
-  items: { time: string; title: string; body?: string }[];
-}>;
-
-export type ContrastProps = Scaled<{
-  kicker?: string;
-  title?: string;
-  left: { label: string; title: string; points: string[] };
-  right: { label: string; title: string; points: string[] };
-}>;
-
-export type ComparisonProps = Scaled<{
-  kicker?: string;
-  title?: string;
-  cols: string[];
-  highlight: number;
-  rows: { label: string; values: Array<boolean | string> }[];
-}>;
-
-export type TableProps = Scaled<{
-  kicker?: string;
-  title?: string;
-  columns: string[];
-  rows: string[][];
-  highlightCol?: number;
-  caption?: string;
-  filled?: boolean;
-  large?: boolean;
-  labelLeft?: string;
-}>;
-
-export type TabsProps = Scaled<{
-  kicker?: string;
-  title?: string;
-  tabs: { label: string; content: string }[];
-}>;
-
-export type AccordionProps = Scaled<{
-  kicker?: string;
-  title?: string;
-  items: { title: string; body: string }[];
-}>;
-
-export type QaProps = Scaled<{
-  title: string;
-  items: { q: string; a: string }[];
-  large?: boolean;
-}>;
-
-export type PricingProps = Scaled<{
-  kicker?: string;
-  title?: string;
-  tiers: {
-    name: string;
-    price: string;
-    period?: string;
-    blurb?: string;
-    features: string[];
-    highlight?: boolean;
-    badge?: string;
-  }[];
-}>;
-
-export type TeamProps = Scaled<{
-  kicker?: string;
-  title?: string;
-  people: { name: string; role?: string; img?: string }[];
-}>;
-
-/** Pipe-delimited marquee: "Acme | Northwind | Globex". Other layouts use `items` as an object array. */
-export type LogosProps = Scaled<{
-  kicker?: string;
-  title?: string;
-  items: string;
-}>;
-
-export type BentoTile = {
-  k?: string;
-  fig?: string;
-  title?: string;
-  body?: string;
-  /** Column span on the 6-col mosaic. Omit on every tile for equal N-up. */
-  c?: number;
-  r?: number;
-  variant?: 'accent' | 'glow';
-  img?: string;
-};
-
-export type BentoProps = Scaled<{
-  kicker?: string;
-  title?: string;
-  tiles: BentoTile[];
-}>;
-
-export type StatGridProps = Scaled<{
-  kicker?: string;
-  title?: string;
-  stats: { value: string; label: string; caption?: string }[];
-}>;
-
-export type FiguresProps = Scaled<{
-  title: string;
-  body?: string;
-  items: { label: string; value: string; caption?: string }[];
-  cards?: boolean;
-  cardBg?: CardSurface;
-}>;
-
-export type PosterProps = Scaled<{
-  title: string;
-  body: string;
-  label: string;
-  image?: string;
-  inset?: boolean;
-  flip?: boolean;
-}>;
-
-export type StoryProps = Scaled<{
-  kicker: string;
-  title: string;
-  body: string;
-  /** Default true: two portraits. */
-  pair?: boolean;
-  image?: string;
-  image2?: string;
-  flip?: boolean;
-}>;
-
-export type SpeakerProps = Scaled<{
-  label: string;
-  name: string;
-  role: string;
-  bio: string;
-  image?: string;
-  flip?: boolean;
-}>;
-
-export type PersonaProps = Scaled<{
-  title: string;
-  body: string;
-  label: string;
-  image?: string;
-  flip?: boolean;
-}>;
-
-type ChartShared = Scaled<{
-  kicker?: string;
-  title?: string;
-  color?: string;
-  large?: boolean;
-  /** `false` hides data-point figures. */
-  values?: boolean;
-  caption?: string;
-}>;
-
-export type ChartProps = ChartShared &
-  (
-    | { kind: 'bars'; bars: BarDatum[] }
-    | { kind: 'line'; points: string } // pipe string; insight line series is `points_line`
-    | { kind: 'donut'; donutValue: number; donutLabel: string }
-    | { kind: 'donuts'; donuts: DonutDatum[] }
-    | { kind: 'grouped'; categories: string; series: GroupedSeries[] }
-    | { kind: 'lines'; lines: LineSeries[] }
-  );
-
-type InsightShared = Scaled<{
-  title: string;
-  subtitle?: string;
-  color?: string;
-  heading?: string;
-  /** Takeaways. Line series is `points_line`, not this key. */
-  points: InsightTakeaway[];
-  values?: boolean;
-}>;
-
-export type InsightProps = InsightShared &
-  (
-    | { kind: 'bars'; bars: BarDatum[] }
-    | { kind: 'line'; points_line: string } // pipe string; `points` is the takeaway list
-    | { kind: 'donut'; donutValue: number; donutLabel: string }
-  );
-
-export type ChatProps = Scaled<{
-  kicker?: string;
-  title?: string;
-  name: string;
-  messages: { from: 'user' | 'ai'; text: string }[];
-}>;
-
-export type CodeProps = Scaled<{
-  kicker?: string;
-  title?: string;
-  filename: string;
-  code: string;
-  highlight?: string;
-}>;
-
-export const LAYOUT_NAMES = [
-  'cover',
-  'section',
-  'statement',
-  'bigNumber',
-  'manifesto',
-  'quote',
-  'agenda',
-  'steps',
-  'pillars',
-  'timeline',
-  'contrast',
-  'comparison',
-  'table',
-  'tabs',
-  'accordion',
-  'qa',
-  'pricing',
-  'team',
-  'logos',
-  'bento',
-  'statGrid',
-  'figures',
-  'poster',
-  'story',
-  'speaker',
-  'persona',
-  'chart',
-  'insight',
-  'chat',
-  'code',
-] as const;
-
-export type LayoutName = (typeof LAYOUT_NAMES)[number];
-
-export interface LayoutPropsByName {
-  cover: CoverProps;
-  section: SectionProps;
-  statement: StatementProps;
-  bigNumber: BigNumberProps;
-  manifesto: ManifestoProps;
-  quote: QuoteProps;
-  agenda: AgendaProps;
-  steps: StepsProps;
-  pillars: PillarsProps;
-  timeline: TimelineProps;
-  contrast: ContrastProps;
-  comparison: ComparisonProps;
-  table: TableProps;
-  tabs: TabsProps;
-  accordion: AccordionProps;
-  qa: QaProps;
-  pricing: PricingProps;
-  team: TeamProps;
-  logos: LogosProps;
-  bento: BentoProps;
-  statGrid: StatGridProps;
-  figures: FiguresProps;
-  poster: PosterProps;
-  story: StoryProps;
-  speaker: SpeakerProps;
-  persona: PersonaProps;
-  chart: ChartProps;
-  insight: InsightProps;
-  chat: ChatProps;
-  code: CodeProps;
-}
-
-export type LayoutProps = LayoutPropsByName[LayoutName];
diff --git a/bolt-slides/src/data/types.ts b/bolt-slides/src/data/types.ts
index 0ec5249..9f93d54 100644
--- a/bolt-slides/src/data/types.ts
+++ b/bolt-slides/src/data/types.ts
@@ -1,5 +1,3 @@
-export type { LayoutName, LayoutProps, LayoutPropsByName } from './layoutProps';
-
 export type Background =
   | { type: 'none' }
   | { type: 'color'; color: string }
@@ -20,7 +18,9 @@ export type SlideStatus =
 export interface SlideData {
   id: string;
   position: number;
+  /** Slide component: the basename of a file in src/slides/. */
   layout: string;
+  /** Optional free-form data the slide component may read. */
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   props: any;
   background: Background;
diff --git a/bolt-slides/src/layouts/blocks.tsx b/bolt-slides/src/layouts/blocks.tsx
deleted file mode 100644
index fb2f77e..0000000
--- a/bolt-slides/src/layouts/blocks.tsx
+++ /dev/null
@@ -1,385 +0,0 @@
-import Slide from '../deck/Slide';
-import Timeline from '../components/Timeline';
-import Comparison from '../components/Comparison';
-import Table from '../components/Table';
-import Tabs from '../components/Tabs';
-import Accordion from '../components/Accordion';
-import Chat from '../components/Chat';
-import CodeWindow from '../components/CodeWindow';
-import T from '../copy/DeckText';
-import { useSlide } from '../copy/SlideScope';
-import { deckPathProps } from '../copy/deckPath';
-import {
-  type LayoutDef,
-  e,
-  useShow,
-  Heading,
-  pipe,
-  normTable,
-  asList,
-} from './shared';
-
-const TimelineDef: LayoutDef = {
-  type: 'timeline',
-  label: 'Timeline',
-  defaults: {
-    kicker: 'Roadmap',
-    title: 'Where this goes.',
-    items: [
-      { time: 'Q3', title: 'Launch', body: 'Starter ships with the skill.' },
-      {
-        time: 'Q4',
-        title: 'Collaboration',
-        body: 'Live cursors and multiplayer editing.',
-      },
-      {
-        time: '2027',
-        title: 'Templates',
-        body: 'A gallery of themed starting points.',
-      },
-    ],
-  },
-  Render: ({ slide }) => (
-    <Slide>
-      <Heading slide={slide} />
-      <Timeline
-        items={asList<Record<string, unknown>>(slide.props.items).map(
-          (it, i) => ({
-            time: e(<T path={`items.${i}.time`} />),
-            title: e(<T path={`items.${i}.title`} />),
-            body: it.body ? <T path={`items.${i}.body`} block /> : undefined,
-          })
-        )}
-      />
-    </Slide>
-  ),
-};
-
-const normCmp = (p: { cols?: unknown; rows?: unknown[] }) => ({
-  cols: Array.isArray(p.cols)
-    ? (p.cols as string[])
-    : pipe(p.cols as string | undefined),
-  rows: asList<{ label?: string; values?: unknown }>(p.rows).map((r) => ({
-    label: r.label ?? '',
-    values: Array.isArray(r.values)
-      ? (r.values as (boolean | string)[])
-      : pipe((r.values as string | undefined) ?? '').map((v) =>
-          v === 'yes' ? true : v === 'no' ? false : v
-        ),
-  })),
-});
-
-const ComparisonDef: LayoutDef = {
-  type: 'comparison',
-  label: 'Comparison',
-  defaults: {
-    kicker: 'Why us',
-    title: 'The honest comparison.',
-    cols: ['', 'This starter', 'Slideware'],
-    highlight: 0,
-    rows: [
-      { label: 'Prompt slides into existence', values: [true, false] },
-      { label: 'Edit in place', values: [true, true] },
-      { label: 'Single-file portability', values: [true, false] },
-    ],
-  },
-  Render: ({ slide }) => {
-    const data = normCmp(slide.props);
-
-    return (
-      <Slide>
-        <Heading slide={slide} />
-        <Comparison
-          cols={data.cols.map((_, i) => (
-            <T
-              key={i}
-              path={`cols.${i}`}
-              placeholder={i === 0 ? '—' : 'Column'}
-            />
-          ))}
-          highlight={slide.props.highlight ?? 0}
-          rows={data.rows.map((r, ri) => ({
-            label: <T path={`rows.${ri}.label`} placeholder="Feature" />,
-            values: r.values.map((v, vi) =>
-              typeof v === 'boolean' ? (
-                v
-              ) : (
-                <T path={`rows.${ri}.values.${vi}`} placeholder="—" />
-              )
-            ),
-          }))}
-        />
-      </Slide>
-    );
-  },
-};
-
-const TableDef: LayoutDef = {
-  type: 'table',
-  label: 'Table',
-  defaults: {
-    kicker: 'The data',
-    title: 'By region.',
-    columns: ['Region', 'ARR', 'Growth'],
-    rows: [
-      ['North America', '$2.4M', '+38%'],
-      ['Europe', '$1.1M', '+52%'],
-      ['APAC', '$0.6M', '+74%'],
-    ],
-    highlightCol: 2,
-    caption: 'Company data, FY26',
-  },
-  Render: ({ slide }) => {
-    const show = useShow();
-    const { columns, rows } = normTable(slide.props);
-    const labels = show(slide.props.labelLeft) && (
-      <div className="tbl-labels">
-        <span className="kicker">
-          <T path="labelLeft" placeholder="Top-left label" />
-        </span>
-      </div>
-    );
-    const cls = [
-      slide.props.filled && 'tbl-filled',
-      slide.props.large && 'tbl-large',
-    ]
-      .filter(Boolean)
-      .join(' ');
-
-    return (
-      <Slide className={cls || undefined}>
-        <Heading slide={slide} />
-        {labels}
-        <Table
-          columns={columns.map((_, ci) => (
-            <T key={ci} path={`columns.${ci}`} placeholder="Column" />
-          ))}
-          rows={rows.map((r, ri) =>
-            r.map((_, ci) => (
-              <T key={ci} path={`rows.${ri}.${ci}`} placeholder="—" />
-            ))
-          )}
-          highlightCol={slide.props.highlightCol ?? undefined}
-          caption={
-            show(slide.props.caption) ? (
-              <T path="caption" placeholder="Caption" />
-            ) : undefined
-          }
-        />
-      </Slide>
-    );
-  },
-};
-
-const TabsDef: LayoutDef = {
-  type: 'tabs',
-  label: 'Tabs',
-  defaults: {
-    kicker: 'One tool',
-    title: 'Three audiences.',
-    tabs: [
-      {
-        label: 'Founders',
-        content: 'Pitch decks that stay on brand without a designer.',
-      },
-      {
-        label: 'Product',
-        content: 'Roadmaps and reviews, statuses on every slide.',
-      },
-      {
-        label: 'Sales',
-        content: 'Duplicate the master deck, tailor it per prospect.',
-      },
-    ],
-  },
-  Render: ({ slide }) => (
-    <Slide>
-      <Heading slide={slide} />
-      <Tabs
-        tabs={asList<{ label: string; content: string }>(slide.props.tabs).map(
-          (t: { label: string; content: string }, i: number) => ({
-            label: e(<T path={`tabs.${i}.label`} />),
-            content: (
-              <div className="lead" style={{ maxWidth: '52ch' }}>
-                <T path={`tabs.${i}.content`} block />
-              </div>
-            ),
-          })
-        )}
-      />
-    </Slide>
-  ),
-};
-
-const QaDef: LayoutDef = {
-  type: 'qa',
-  label: 'Q & A',
-  defaults: {
-    title: 'The questions we hear\nmost, ==answered==.',
-    items: [
-      {
-        q: 'How long does this take to set up?',
-        a: 'Minutes — one prompt produces the working draft.',
-      },
-      {
-        q: 'Can I change what it made?',
-        a: 'Everything: text in place, layouts, backgrounds, motion.',
-      },
-      {
-        q: 'Where does the data live?',
-        a: 'One portable file you can copy, back up, or hand off.',
-      },
-      {
-        q: 'Is this only for pitches?',
-        a: 'Any deck — reviews, all-hands, teaching, proposals.',
-      },
-    ],
-  },
-  Render: ({ slide }) => (
-    <Slide className={slide.props.large ? 'qa-wide' : undefined}>
-      <h2 className="headline qa-title">
-        <T path="title" placeholder="Title" />
-      </h2>
-      <div className={'qa-rows' + (slide.props.large ? ' large' : '')}>
-        {asList(slide.props.items).map((_: unknown, i: number) => (
-          <div key={i} className="qa-row">
-            <div className="qa-q">
-              <span className="qa-mark" aria-hidden>
-                Q
-              </span>
-              <T path={`items.${i}.q`} />
-            </div>
-            <div className="qa-a">
-              <span className="qa-mark qa-mark-a" aria-hidden>
-                A
-              </span>
-              <T path={`items.${i}.a`} />
-            </div>
-          </div>
-        ))}
-      </div>
-    </Slide>
-  ),
-};
-
-const AccordionDef: LayoutDef = {
-  type: 'accordion',
-  label: 'Accordion',
-  defaults: {
-    kicker: 'Questions',
-    title: 'Asked and answered.',
-    items: [
-      {
-        title: 'Where does the data live?',
-        body: 'In repo-root deck.json. The studio and Present read the same file.',
-      },
-      {
-        title: 'Can I change what the AI made?',
-        body: 'Everything: text in place, layouts, backgrounds, animations.',
-      },
-    ],
-  },
-  Render: ({ slide }) => (
-    <Slide>
-      <Heading slide={slide} />
-      <Accordion
-        items={asList(slide.props.items).map((_: unknown, i: number) => ({
-          title: e(<T path={`items.${i}.title`} />),
-          body: <T path={`items.${i}.body`} block />,
-        }))}
-      />
-    </Slide>
-  ),
-};
-
-const ChatDef: LayoutDef = {
-  type: 'chat',
-  label: 'Chat',
-  defaults: {
-    kicker: 'Prompt it',
-    title: 'Slides, spoken into existence.',
-    name: 'Bolt',
-    messages: [
-      {
-        from: 'user',
-        text: 'Make me a 10-slide seed pitch for a robotics startup.',
-      },
-      {
-        from: 'ai',
-        text: 'Done — cover, problem, product, traction, team, ask. Want the traction slide as a chart?',
-      },
-    ],
-  },
-  Render: ({ slide }) => {
-    const show = useShow();
-
-    return (
-      <Chat
-        kicker={
-          show(slide.props.kicker)
-            ? e(<T path="kicker" placeholder="Kicker" />)
-            : undefined
-        }
-        title={
-          show(slide.props.title)
-            ? e(<T path="title" placeholder="Title" />)
-            : undefined
-        }
-        name={e(<T path="name" placeholder="Assistant" />)}
-        messages={asList<{ from: 'user' | 'ai' }>(slide.props.messages).map(
-          (m: { from: 'user' | 'ai' }, i: number) => ({
-            from: m.from,
-            text: e(<T path={`messages.${i}.text`} block />),
-          })
-        )}
-      />
-    );
-  },
-};
-
-const CodeDef: LayoutDef = {
-  type: 'code',
-  label: 'Code',
-  defaults: {
-    kicker: 'For developers',
-    title: 'Author a deck as data.',
-    filename: 'deck.json',
-    code: '{\n  "layout": "bigNumber",\n  "props": { "value": "$3T", "caption": "the market" },\n  "animation": "cascade"\n}',
-    highlight: '',
-  },
-  Render: ({ slide }) => {
-    const { slideId } = useSlide();
-
-    return (
-      <Slide>
-        <Heading slide={slide} tight />
-        <div
-          style={{ maxWidth: 760, marginInline: 'auto' }}
-          {...deckPathProps(slideId, 'code', { kind: 'code' })}
-        >
-          <CodeWindow
-            title={
-              (<T path="filename" placeholder="file.ts" />) as unknown as string
-            }
-            code={slide.props.code ?? ''}
-            highlight={String(slide.props.highlight ?? '')
-              .split(',')
-              .map((n) => parseInt(n.trim(), 10))
-              .filter(Number.isFinite)}
-          />
-        </div>
-      </Slide>
-    );
-  },
-};
-
-export const blockLayouts = [
-  TimelineDef,
-  ComparisonDef,
-  TableDef,
-  TabsDef,
-  AccordionDef,
-  QaDef,
-  ChatDef,
-  CodeDef,
-];
diff --git a/bolt-slides/src/layouts/core.tsx b/bolt-slides/src/layouts/core.tsx
deleted file mode 100644
index 31b9d1a..0000000
--- a/bolt-slides/src/layouts/core.tsx
+++ /dev/null
@@ -1,218 +0,0 @@
-import Slide from '../deck/Slide';
-import Reveal from '../deck/Reveal';
-import Cover from '../components/Cover';
-import Section from '../components/Section';
-import Quote from '../components/Quote';
-import BigNumber from '../components/BigNumber';
-import T from '../copy/DeckText';
-import { type LayoutDef, e, useShow, Num } from './shared';
-
-const CoverDef: LayoutDef = {
-  type: 'cover',
-  label: 'Cover',
-  defaults: {
-    kicker: 'Company · 2026',
-    title: 'A ==bold== opening.',
-    subtitle: 'One sharp sentence on what this deck argues.',
-    foot: 'August 2026 · Your name',
-  },
-  Render: ({ slide }) => {
-    const show = useShow();
-
-    return (
-      <Cover
-        kicker={
-          show(slide.props.kicker)
-            ? e(<T path="kicker" placeholder="Kicker" />)
-            : undefined
-        }
-        title={<T path="title" placeholder="Title" />}
-        subtitle={
-          show(slide.props.subtitle) ? (
-            <T path="subtitle" placeholder="Subtitle" block />
-          ) : undefined
-        }
-        image={slide.props.image || undefined}
-        dim={slide.props.dim}
-        foot={
-          show(slide.props.foot)
-            ? e(<T path="foot" placeholder="Date · Presenter" />)
-            : undefined
-        }
-      />
-    );
-  },
-};
-
-const SectionDef: LayoutDef = {
-  type: 'section',
-  label: 'Section',
-  defaults: { n: 1, kicker: 'Part one', title: 'A new ==chapter==.' },
-  Render: ({ slide }) => {
-    const show = useShow();
-
-    return (
-      <Section
-        n={slide.props.n}
-        kicker={
-          show(slide.props.kicker)
-            ? e(<T path="kicker" placeholder="Kicker" />)
-            : undefined
-        }
-        title={<T path="title" placeholder="Title" />}
-        image={slide.props.image || undefined}
-        dim={slide.props.dim}
-      />
-    );
-  },
-};
-
-const StatementDef: LayoutDef = {
-  type: 'statement',
-  label: 'Statement',
-  defaults: {
-    kicker: '',
-    title: 'Say the ==one thing== this slide exists to say.',
-    body: '',
-  },
-  Render: ({ slide }) => {
-    const show = useShow();
-
-    return (
-      <Slide center>
-        {show(slide.props.kicker) && (
-          <Reveal>
-            <div className="kicker" style={{ marginBottom: 14 }}>
-              <T path="kicker" placeholder="Kicker" />
-            </div>
-          </Reveal>
-        )}
-        <Reveal delay={0.08}>
-          <h2
-            className="display"
-            style={{ maxWidth: '18ch', marginInline: 'auto' }}
-          >
-            <T path="title" placeholder="Statement" />
-          </h2>
-        </Reveal>
-        {show(slide.props.body) && (
-          <Reveal delay={0.16}>
-            <p className="subhead" style={{ marginTop: 18 }}>
-              <T path="body" placeholder="Supporting line" block />
-            </p>
-          </Reveal>
-        )}
-      </Slide>
-    );
-  },
-};
-
-const BigNumberDef: LayoutDef = {
-  type: 'bigNumber',
-  label: 'Big number',
-  defaults: {
-    kicker: 'The market',
-    value: '$3T',
-    caption: 'moves through this problem every year',
-    foot: 'Source: —',
-  },
-  Render: ({ slide }) => {
-    const show = useShow();
-
-    return (
-      <BigNumber
-        kicker={
-          show(slide.props.kicker)
-            ? e(<T path="kicker" placeholder="Kicker" />)
-            : undefined
-        }
-        value={<Num path="value" value={slide.props.value} />}
-        caption={
-          show(slide.props.caption) ? (
-            <T path="caption" placeholder="Caption" block />
-          ) : undefined
-        }
-        foot={
-          show(slide.props.foot)
-            ? e(<T path="foot" placeholder="Source" />)
-            : undefined
-        }
-      />
-    );
-  },
-};
-
-const QuoteDef: LayoutDef = {
-  type: 'quote',
-  label: 'Quote',
-  defaults: {
-    text: 'It changed how we work — completely.',
-    name: 'Dana Kim',
-    role: 'VP Engineering, Acme',
-  },
-  Render: ({ slide }) => {
-    const show = useShow();
-
-    return (
-      <Quote
-        text={<T path="text" placeholder="Quote" />}
-        name={
-          show(slide.props.name) ? (
-            <T path="name" placeholder="Name" />
-          ) : undefined
-        }
-        role={
-          show(slide.props.role) ? (
-            <T path="role" placeholder="Role" />
-          ) : undefined
-        }
-        initials={String(slide.props.name ?? '')
-          .split(/\s+/)
-          .filter(Boolean)
-          .map((w: string) => w[0])
-          .slice(0, 2)
-          .join('')
-          .toUpperCase()}
-        img={slide.props.img || undefined}
-        image={slide.props.image || undefined}
-        dim={slide.props.dim}
-      />
-    );
-  },
-};
-
-const ManifestoDef: LayoutDef = {
-  type: 'manifesto',
-  label: 'Manifesto',
-  defaults: {
-    label: 'A SMALL LABEL UP HERE',
-    text: 'A few unhurried sentences that make one argument properly. Large enough to feel deliberate, with the bottom of the slide left empty on purpose — the silence is part of the design.',
-  },
-  Render: ({ slide }) => {
-    const show = useShow();
-
-    return (
-      <Slide full>
-        <div className="manifesto">
-          {show(slide.props.label) && (
-            <div className="kicker manifesto-label">
-              <T path="label" placeholder="Label" />
-            </div>
-          )}
-          <div className="manifesto-text">
-            <T path="text" placeholder="The statement" block />
-          </div>
-        </div>
-      </Slide>
-    );
-  },
-};
-
-export const coreLayouts = [
-  CoverDef,
-  SectionDef,
-  StatementDef,
-  ManifestoDef,
-  BigNumberDef,
-  QuoteDef,
-];
diff --git a/bolt-slides/src/layouts/grids.tsx b/bolt-slides/src/layouts/grids.tsx
deleted file mode 100644
index 69b42b0..0000000
--- a/bolt-slides/src/layouts/grids.tsx
+++ /dev/null
@@ -1,499 +0,0 @@
-import Slide from '../deck/Slide';
-import Bento from '../components/Bento';
-import StatGrid from '../components/StatGrid';
-import Contrast from '../components/Contrast';
-import Agenda from '../components/Agenda';
-import Steps from '../components/Steps';
-import Pricing from '../components/Pricing';
-import Team from '../components/Team';
-import Marquee from '../components/Marquee';
-import T from '../copy/DeckText';
-import {
-  type LayoutDef,
-  e,
-  useShow,
-  Num,
-  Heading,
-  pipe,
-  asList,
-  strings,
-} from './shared';
-import { bgCss } from '../data/bgCss';
-
-const kickerTitle = (
-  slide: { props: { kicker?: string; title?: string } },
-  show: (v: unknown) => boolean
-) => ({
-  kicker: show(slide.props.kicker)
-    ? e(<T path="kicker" placeholder="Kicker" />)
-    : undefined,
-  title: show(slide.props.title)
-    ? e(<T path="title" placeholder="Title" />)
-    : undefined,
-});
-
-const BentoDef: LayoutDef = {
-  type: 'bento',
-  label: 'Bento',
-  defaults: {
-    kicker: 'What you get',
-    title: 'The system, at a glance.',
-    tiles: [
-      {
-        k: 'Speed',
-        fig: '3×',
-        title: 'Faster to ship',
-        body: 'From idea to deployed deck in minutes.',
-        c: 4,
-        r: 1,
-        variant: 'glow',
-      },
-      { k: 'Uptime', fig: '99.99%', c: 2, r: 1 },
-      {
-        k: 'Teams',
-        title: 'Built for review',
-        body: 'Live edits, one source of truth.',
-        c: 2,
-        r: 1,
-      },
-      {
-        k: 'Scale',
-        fig: '48k',
-        title: 'Slides generated',
-        c: 4,
-        r: 1,
-        variant: 'accent',
-      },
-    ],
-  },
-  Render: ({ slide }) => {
-    const show = useShow();
-
-    return (
-      <Bento
-        {...kickerTitle(slide, show)}
-        tiles={asList<Record<string, unknown>>(slide.props.tiles).map(
-          (t: Record<string, unknown>, i: number) => ({
-            ...t,
-            k: t.k ? e(<T path={`tiles.${i}.k`} />) : undefined,
-            fig: t.fig ? (
-              <Num path={`tiles.${i}.fig`} value={String(t.fig)} />
-            ) : undefined,
-            title: t.title ? e(<T path={`tiles.${i}.title`} />) : undefined,
-            body: t.body ? e(<T path={`tiles.${i}.body`} block />) : undefined,
-          })
-        )}
-      />
-    );
-  },
-};
-
-const StatGridDef: LayoutDef = {
-  type: 'statGrid',
-  label: 'Stat grid',
-  defaults: {
-    kicker: 'Proof',
-    title: 'The numbers hold up.',
-    stats: [
-      {
-        value: '48%',
-        label: 'Faster reviews',
-        caption: 'vs. previous quarter',
-      },
-      { value: '$1.2M', label: 'Pipeline created' },
-      { value: '9', label: 'Markets live' },
-    ],
-  },
-  Render: ({ slide }) => {
-    const show = useShow();
-
-    return (
-      <StatGrid
-        {...kickerTitle(slide, show)}
-        stats={asList<Record<string, unknown>>(slide.props.stats).map(
-          (s: Record<string, unknown>, i: number) => ({
-            value: (
-              <Num path={`stats.${i}.value`} value={String(s.value ?? '')} />
-            ),
-            label: e(<T path={`stats.${i}.label`} />),
-            caption: s.caption
-              ? e(<T path={`stats.${i}.caption`} />)
-              : undefined,
-          })
-        )}
-      />
-    );
-  },
-};
-
-const ContrastDef: LayoutDef = {
-  type: 'contrast',
-  label: 'Contrast',
-  defaults: {
-    kicker: 'The shift',
-    title: 'Stop rebuilding. Start ==shipping==.',
-    left: {
-      label: 'Before',
-      title: 'Slide chaos',
-      points: [
-        'Decks rebuilt from scratch',
-        'Feedback lost in email',
-        'Nobody knows what changed',
-      ],
-    },
-    right: {
-      label: 'After',
-      title: 'One living deck',
-      points: [
-        'Slides prompted into existence',
-        'Notes travel with the deck',
-        'Share a link, not a file',
-      ],
-    },
-  },
-  Render: ({ slide }) => {
-    const show = useShow();
-    const panel = (side: 'left' | 'right') => ({
-      label: show(slide.props[side]?.label)
-        ? e(<T path={`${side}.label`} placeholder="Chip" />)
-        : undefined,
-      title: show(slide.props[side]?.title)
-        ? e(<T path={`${side}.title`} placeholder="Panel title" />)
-        : undefined,
-      points: strings(slide.props[side]?.points).map((_, i: number) => (
-        <T key={i} path={`${side}.points.${i}`} />
-      )),
-    });
-
-    return (
-      <Contrast
-        {...kickerTitle(slide, show)}
-        left={panel('left')}
-        right={panel('right')}
-      />
-    );
-  },
-};
-
-const AgendaDef: LayoutDef = {
-  type: 'agenda',
-  label: 'Agenda',
-  defaults: {
-    kicker: 'Agenda',
-    title: "What we'll cover.",
-    items: [
-      { title: 'The problem', hint: '5 min' },
-      { title: 'The product' },
-      { title: 'The ask' },
-    ],
-  },
-  Render: ({ slide }) => {
-    const show = useShow();
-
-    return (
-      <Agenda
-        {...kickerTitle(slide, show)}
-        items={asList<Record<string, unknown>>(slide.props.items).map(
-          (it: Record<string, unknown>, i: number) => ({
-            title: e(<T path={`items.${i}.title`} />),
-            hint: it.hint ? e(<T path={`items.${i}.hint`} />) : undefined,
-          })
-        )}
-      />
-    );
-  },
-};
-
-const StepsDef: LayoutDef = {
-  type: 'steps',
-  label: 'Steps',
-  defaults: {
-    kicker: 'How it works',
-    title: 'Three steps to a finished deck.',
-    items: [
-      {
-        title: 'Prompt',
-        body: 'Describe the deck; the skill authors it as data.',
-      },
-      { title: 'Refine', body: 'Edit any text in place, restyle any slide.' },
-      {
-        title: 'Present',
-        body: 'Full-screen engine with builds and presenter view.',
-      },
-    ],
-  },
-  Render: ({ slide }) => {
-    const show = useShow();
-
-    return (
-      <Steps
-        {...kickerTitle(slide, show)}
-        items={asList<Record<string, unknown>>(slide.props.items).map(
-          (it: Record<string, unknown>, i: number) => ({
-            title: e(<T path={`items.${i}.title`} />),
-            body: it.body ? <T path={`items.${i}.body`} block /> : undefined,
-          })
-        )}
-      />
-    );
-  },
-};
-
-const PricingDef: LayoutDef = {
-  type: 'pricing',
-  label: 'Pricing',
-  defaults: {
-    kicker: 'Pricing',
-    title: 'Simple, honest plans.',
-    tiers: [
-      {
-        name: 'Starter',
-        price: '$0',
-        period: '/mo',
-        features: ['1 deck', 'PDF export'],
-      },
-      {
-        name: 'Pro',
-        price: '$19',
-        period: '/mo',
-        features: ['Unlimited decks', 'Presenter notes', 'OG images'],
-        highlight: true,
-        badge: 'Most popular',
-      },
-      {
-        name: 'Team',
-        price: '$49',
-        period: '/mo',
-        features: ['Everything in Pro', 'Custom themes', 'Priority support'],
-      },
-    ],
-  },
-  Render: ({ slide }) => {
-    const show = useShow();
-
-    return (
-      <Pricing
-        {...kickerTitle(slide, show)}
-        tiers={asList<Record<string, unknown>>(slide.props.tiers).map(
-          (t: Record<string, unknown>, i: number) => ({
-            ...t,
-            name: e(<T path={`tiers.${i}.name`} />),
-            price: e(<T path={`tiers.${i}.price`} />),
-            period: t.period ? e(<T path={`tiers.${i}.period`} />) : undefined,
-            blurb: t.blurb
-              ? e(<T path={`tiers.${i}.blurb`} block />)
-              : undefined,
-            badge: t.highlight
-              ? e(<T path={`tiers.${i}.badge`} placeholder="Most popular" />)
-              : undefined,
-            features: strings(t.features).map((_, fi) =>
-              e(<T key={fi} path={`tiers.${i}.features.${fi}`} />)
-            ),
-          })
-        )}
-      />
-    );
-  },
-};
-
-const TeamDef: LayoutDef = {
-  type: 'team',
-  label: 'Team',
-  defaults: {
-    kicker: 'The team',
-    title: 'Built by operators.',
-    people: [
-      { name: 'Dana Kim', role: 'CEO · ex-Stripe' },
-      { name: 'Ade Obi', role: 'CTO' },
-      { name: 'Mia Chen', role: 'Design' },
-    ],
-  },
-  Render: ({ slide }) => {
-    const show = useShow();
-
-    return (
-      <Team
-        {...kickerTitle(slide, show)}
-        people={asList<{ name?: string; role?: string; img?: string }>(
-          slide.props.people
-        ).map(
-          (p: { name?: string; role?: string; img?: string }, i: number) => ({
-            img: p.img || undefined,
-            initials: (p.name ?? '')
-              .split(/\s+/)
-              .map((w) => w[0])
-              .slice(0, 2)
-              .join('')
-              .toUpperCase(),
-            name: <T path={`people.${i}.name`} />,
-            role: p.role ? <T path={`people.${i}.role`} /> : undefined,
-          })
-        )}
-      />
-    );
-  },
-};
-
-const FiguresDef: LayoutDef = {
-  type: 'figures',
-  label: 'Figures',
-  defaults: {
-    title: 'A few numbers worth ==sitting with==.',
-    body: 'One short paragraph that tells the reader how to weigh what follows — where the numbers come from and why they matter.',
-    items: [
-      {
-        label: 'FIRST MEASURE, YOY',
-        value: '+48%',
-        caption: 'WHAT THIS FIGURE COUNTS',
-      },
-      { label: 'SECOND MEASURE', value: '92%', caption: 'AND ITS SOURCE' },
-      { label: 'THIRD MEASURE', value: '17', caption: '' },
-    ],
-  },
-  Render: ({ slide }) => {
-    const show = useShow();
-    const items = asList<{
-      label: string;
-      value: string;
-    }>(slide.props.items);
-
-    return (
-      <Slide full>
-        <div className="figures">
-          <div className="figures-head">
-            <h2 className="headline figures-title">
-              <T path="title" placeholder="Title" />
-            </h2>
-            {show(slide.props.body) && (
-              <div className="lead figures-intro">
-                <T path="body" placeholder="Intro" block />
-              </div>
-            )}
-          </div>
-          <div
-            className={'figures-row' + (slide.props.cards ? ' cards' : '')}
-            style={{ ['--n' as never]: String(Math.max(1, items.length)) }}
-          >
-            {items.map((it, i) => (
-              <div
-                key={i}
-                className={'figures-cell' + (slide.props.cards ? ' mat' : '')}
-                style={
-                  slide.props.cards
-                    ? { background: bgCss(slide.props.cardBg) }
-                    : undefined
-                }
-              >
-                <div className="kicker figures-label">
-                  <T path={`items.${i}.label`} />
-                </div>
-                <div className="figures-value">
-                  <Num
-                    path={`items.${i}.value`}
-                    value={String(it.value ?? '')}
-                  />
-                </div>
-                {show((it as { caption?: string }).caption) && (
-                  <div className="kicker figures-caption">
-                    <T path={`items.${i}.caption`} placeholder="Caption" />
-                  </div>
-                )}
-              </div>
-            ))}
-          </div>
-        </div>
-      </Slide>
-    );
-  },
-};
-
-const PillarsDef: LayoutDef = {
-  type: 'pillars',
-  label: 'Pillars',
-  defaults: {
-    title: 'Where we are ==focusing==.',
-    items: [
-      {
-        title: 'First area',
-        body: 'What it covers, in plain words, and the change people should expect to see.',
-      },
-      {
-        title: 'Second area',
-        body: 'The unglamorous day-to-day part — named honestly so the room trusts the rest.',
-      },
-      {
-        title: 'Third area',
-        body: 'The structural piece: policy, budget, defaults — where intent becomes durable.',
-      },
-    ],
-  },
-  Render: ({ slide }) => {
-    const items = asList<{
-      title: string;
-      body?: string;
-    }>(slide.props.items);
-
-    return (
-      <Slide full>
-        <div className={'pillars' + (slide.props.large ? ' large' : '')}>
-          <h2 className="headline pillars-title">
-            <T path="title" placeholder="Title" />
-          </h2>
-          <div
-            className="pillars-row"
-            style={{ ['--n' as never]: String(Math.max(1, items.length)) }}
-          >
-            {items.map((it, i) => (
-              <div key={i} className="pillars-cell">
-                <div className="pillars-no" aria-hidden>
-                  {String(i + 1).padStart(2, '0')}
-                </div>
-                <h3 className="pillars-head">
-                  <T path={`items.${i}.title`} />
-                </h3>
-                <div className="pillars-body">
-                  <T path={`items.${i}.body`} placeholder="Body" block />
-                </div>
-              </div>
-            ))}
-          </div>
-        </div>
-      </Slide>
-    );
-  },
-};
-
-const LogosDef: LayoutDef = {
-  type: 'logos',
-  label: 'Logo wall',
-  defaults: {
-    kicker: 'Trusted by',
-    title: '',
-    items: 'Acme | Northwind | Globex | Initech | Umbrella | Stark',
-  },
-  Render: ({ slide }) => (
-    <Slide center>
-      <Heading slide={slide} tight />
-      <div style={{ width: '100%', marginTop: 'clamp(16px,3vh,30px)' }}>
-        <Marquee
-          items={pipe(slide.props.items).map((_, i) => (
-            <T key={i} path="items" pipeIndex={i} />
-          ))}
-        />
-      </div>
-    </Slide>
-  ),
-};
-
-export const gridLayouts = [
-  BentoDef,
-  StatGridDef,
-  FiguresDef,
-  ContrastDef,
-  AgendaDef,
-  StepsDef,
-  PillarsDef,
-  PricingDef,
-  TeamDef,
-  LogosDef,
-];
diff --git a/bolt-slides/src/layouts/media.tsx b/bolt-slides/src/layouts/media.tsx
deleted file mode 100644
index d63a6ef..0000000
--- a/bolt-slides/src/layouts/media.tsx
+++ /dev/null
@@ -1,525 +0,0 @@
-import Slide from '../deck/Slide';
-import {
-  BarChart,
-  LineChart,
-  DonutChart,
-  GroupedBarChart,
-} from '../components/Charts';
-import T from '../copy/DeckText';
-import { type LayoutDef, e, useShow, Heading, pipe, asList } from './shared';
-
-const PosterDef: LayoutDef = {
-  type: 'poster',
-  label: 'Poster',
-  defaults: {
-    title: 'A headline that ==lands==.',
-    body: 'Two or three calm sentences that carry the supporting thought, anchored to the floor of the slide.',
-    label: 'A quiet label over the visual',
-    image: '',
-  },
-  Render: ({ slide }) => {
-    const show = useShow();
-
-    return (
-      <div className="slide full">
-        <div
-          className={
-            'poster' +
-            (slide.props.flip ? ' flip' : '') +
-            (slide.props.inset ? ' inset' : '')
-          }
-        >
-          <div className="poster-body">
-            <h2 className="headline poster-title">
-              <T path="title" placeholder="Headline" />
-            </h2>
-            {show(slide.props.body) && (
-              <div className="lead poster-caption">
-                <T path="body" placeholder="Supporting copy" block />
-              </div>
-            )}
-          </div>
-          <div className="poster-media">
-            {slide.props.image ? (
-              <img src={slide.props.image} alt="" />
-            ) : (
-              <div className="poster-wash" aria-hidden />
-            )}
-            {show(slide.props.label) && (
-              <div className="kicker poster-label">
-                <T path="label" placeholder="Label" />
-              </div>
-            )}
-          </div>
-        </div>
-      </div>
-    );
-  },
-};
-
-const StoryDef: LayoutDef = {
-  type: 'story',
-  label: 'Story',
-  defaults: {
-    kicker: 'A SMALL LABEL UP HERE',
-    title: 'A headline that makes\nthe ==argument==.',
-    pair: true,
-    body: 'A fuller paragraph than most slides get — four or five sentences that earn their space by telling one story properly, with the visual holding the other half of the slide.',
-    image: '',
-  },
-  Render: ({ slide }) => {
-    const show = useShow();
-    const pair = slide.props.pair !== false;
-    const img = (url: string | undefined) => (
-      <div className="story-img">
-        {url ? (
-          <img src={url} alt="" />
-        ) : (
-          <div className="poster-wash" aria-hidden />
-        )}
-      </div>
-    );
-
-    return (
-      <div className="slide full">
-        <div className={'story' + (slide.props.flip ? ' flip' : '')}>
-          <div className="story-body">
-            {show(slide.props.kicker) && (
-              <div className="kicker story-kicker">
-                <T path="kicker" placeholder="Kicker" />
-              </div>
-            )}
-            <h2 className="headline story-title">
-              <T path="title" placeholder="Headline" />
-            </h2>
-            {show(slide.props.body) && (
-              <div className="story-copy">
-                <T path="body" placeholder="Body" block />
-              </div>
-            )}
-          </div>
-          <div className="story-media">
-            {img(slide.props.image)}
-            {pair && img(slide.props.image2)}
-          </div>
-        </div>
-      </div>
-    );
-  },
-};
-
-const PersonaDef: LayoutDef = {
-  type: 'persona',
-  label: 'Persona',
-  defaults: {
-    title: 'Meet a person,\ntheir role,\nat their company.',
-    body: 'Tell the story that makes them real: what they were trying to do, what stood in the way, and what it was costing them before things changed.',
-    label: 'THE OPPORTUNITY',
-    image: '',
-  },
-  Render: ({ slide }) => {
-    const show = useShow();
-
-    return (
-      <div className="slide full">
-        <div className={'persona' + (slide.props.flip ? ' flip' : '')}>
-          <div className="persona-media">
-            {slide.props.image ? (
-              <img src={slide.props.image} alt="" />
-            ) : (
-              <div className="poster-wash" aria-hidden />
-            )}
-          </div>
-          <div className="persona-body">
-            <h2 className="headline persona-title">
-              <T path="title" placeholder="Headline" />
-            </h2>
-            {show(slide.props.body) && (
-              <div className="persona-copy">
-                <T path="body" placeholder="Story" block />
-              </div>
-            )}
-            {show(slide.props.label) && (
-              <div className="kicker persona-label">
-                <T path="label" placeholder="Label" />
-              </div>
-            )}
-          </div>
-        </div>
-      </div>
-    );
-  },
-};
-
-const SpeakerDef: LayoutDef = {
-  type: 'speaker',
-  label: 'Speaker',
-  defaults: {
-    label: "TODAY'S SPEAKER",
-    name: 'Firstname Lastname',
-    role: 'ROLE, TEAM\nAT COMPANY',
-    bio: 'Three or four sentences of biography: what they lead, how long they have done it, and the one thing the audience should know before they start speaking.',
-    image: '',
-  },
-  Render: ({ slide }) => {
-    const show = useShow();
-
-    return (
-      <div className="slide full">
-        <div className={'speaker' + (slide.props.flip ? ' flip' : '')}>
-          <div className="speaker-body">
-            {show(slide.props.label) && (
-              <div className="kicker speaker-label">
-                <T path="label" placeholder="Label" />
-              </div>
-            )}
-            <div className="speaker-who">
-              <h2 className="headline speaker-name">
-                <T path="name" placeholder="Name" />
-              </h2>
-              {show(slide.props.role) && (
-                <div className="kicker speaker-role">
-                  <T path="role" placeholder="Role" block />
-                </div>
-              )}
-            </div>
-            {show(slide.props.bio) && (
-              <div className="speaker-bio">
-                <T path="bio" placeholder="Bio" block />
-              </div>
-            )}
-          </div>
-          <div className="speaker-media">
-            {slide.props.image ? (
-              <img src={slide.props.image} alt="" />
-            ) : (
-              <div className="poster-wash" aria-hidden />
-            )}
-          </div>
-        </div>
-      </div>
-    );
-  },
-};
-
-const ChartDef: LayoutDef = {
-  type: 'chart',
-  label: 'Chart',
-  defaults: {
-    kicker: 'Traction',
-    title: 'Up and to the right.',
-    kind: 'bars',
-    bars: [
-      { label: 'Q1', value: 18 },
-      { label: 'Q2', value: 26 },
-      { label: 'Q3', value: 41 },
-      { label: 'Q4', value: 64 },
-    ],
-    points: '12 | 18 | 15 | 26 | 22 | 34 | 30',
-    donutValue: 72,
-    donutLabel: 'Adoption',
-    donuts: [
-      { value: 64, label: 'First segment' },
-      { value: 43, label: 'Second segment' },
-      { value: 81, label: 'Third segment' },
-    ],
-    categories: 'Jan | Mar | May | Jul | Sep',
-    series: [
-      { label: 'First series', values: '20 | 34 | 28 | 51 | 63' },
-      { label: 'Second series', values: '12 | 22 | 31 | 38 | 44' },
-    ],
-    lines: [
-      { label: 'First measure', points: '4 | 7 | 6 | 11 | 9 | 12' },
-      { label: 'Second measure', points: '20 | 26 | 31 | 28 | 38 | 41' },
-      { label: 'Third measure', points: '1.5 | 3 | 2.5 | 4.5 | 4 | 6' },
-    ],
-    caption: '',
-  },
-  Render: ({ slide }) => {
-    const show = useShow();
-    const kind = slide.props.kind ?? 'bars';
-    const large = !!slide.props.large;
-    const showValues = slide.props.values !== false;
-    const bars = asList<{ label: string; value: number | string }>(
-      slide.props.bars
-    ).map((b) => ({ label: b.label, value: Number(b.value) || 0 }));
-
-    return (
-      <Slide>
-        <Heading slide={slide} />
-        <div
-          style={{
-            maxWidth: large
-              ? 'none'
-              : kind === 'donut'
-              ? 420
-              : kind === 'donuts' || kind === 'grouped' || kind === 'lines'
-              ? 940
-              : 680,
-            marginInline: 'auto',
-            textAlign:
-              kind === 'donut' || kind === 'donuts' ? 'center' : undefined,
-            ...(slide.props.color
-              ? {
-                  ['--primary' as never]: slide.props.color,
-                  ['--accent' as never]: slide.props.color,
-                }
-              : {}),
-          }}
-        >
-          {kind === 'bars' && (
-            <BarChart
-              height={large ? 340 : 240}
-              showValues={showValues}
-              data={bars.map((b, i) => ({
-                value: b.value,
-                valueNode: <T path={`bars.${i}.value`} />,
-                label: e(<T path={`bars.${i}.label`} />),
-              }))}
-            />
-          )}
-          {kind === 'line' && (
-            <LineChart
-              showValues={showValues}
-              large={large}
-              points={pipe(slide.props.points)
-                .map(Number)
-                .filter(Number.isFinite)}
-              valueNodes={
-                showValues
-                  ? pipe(slide.props.points).map((_, i) => (
-                      <T key={i} path="points" pipeIndex={i} />
-                    ))
-                  : undefined
-              }
-              height={large ? 340 : 240}
-            />
-          )}
-          {kind === 'donut' && (
-            <div className="chart-center">
-              <DonutChart
-                size={large ? 300 : 200}
-                value={Number(slide.props.donutValue) || 0}
-                label={e(<T path="donutLabel" />)}
-                valueNode={<T path="donutValue" />}
-              />
-            </div>
-          )}
-          {kind === 'grouped' && (
-            <GroupedBarChart
-              height={large ? 350 : 250}
-              showValues={showValues}
-              categories={pipe(slide.props.categories).map((_, i) => (
-                <T key={i} path="categories" pipeIndex={i} />
-              ))}
-              series={asList<{
-                label: string;
-                values: string;
-              }>(slide.props.series).map((s2, i) => ({
-                label: e(<T path={`series.${i}.label`} />),
-                values: pipe(s2.values)
-                  .map(Number)
-                  .map((n) => (Number.isFinite(n) ? n : 0)),
-                valueNodes: showValues
-                  ? pipe(s2.values).map((_, ci) => (
-                      <T key={ci} path={`series.${i}.values`} pipeIndex={ci} />
-                    ))
-                  : undefined,
-              }))}
-            />
-          )}
-          {kind === 'lines' && (
-            <div className="lines-row">
-              {asList<{ label: string; points: string }>(slide.props.lines).map(
-                (l, i) => (
-                  <div key={i} className="lines-cell">
-                    <LineChart
-                      showValues={showValues}
-                      large={large}
-                      points={pipe(l.points)
-                        .map(Number)
-                        .filter(Number.isFinite)}
-                      valueNodes={
-                        showValues
-                          ? pipe(l.points).map((_, pi) => (
-                              <T
-                                key={pi}
-                                path={`lines.${i}.points`}
-                                pipeIndex={pi}
-                              />
-                            ))
-                          : undefined
-                      }
-                      height={large ? 230 : 150}
-                    />
-                    <div className="lines-label">
-                      <T path={`lines.${i}.label`} />
-                    </div>
-                  </div>
-                )
-              )}
-            </div>
-          )}
-          {kind === 'donuts' && (
-            <div className="donut-row">
-              {asList<{ value: number; label: string }>(slide.props.donuts).map(
-                (d, i) => (
-                  <div key={i} className="donut-cell">
-                    <DonutChart
-                      value={Number(d.value) || 0}
-                      size={large ? 210 : 140}
-                      valueNode={<T path={`donuts.${i}.value`} />}
-                      label={e(<T path={`donuts.${i}.label`} />)}
-                    />
-                  </div>
-                )
-              )}
-            </div>
-          )}
-          {show(slide.props.caption) && (
-            <div
-              className="foot"
-              style={{ marginTop: 18, textAlign: 'center' }}
-            >
-              <T path="caption" placeholder="Caption" />
-            </div>
-          )}
-        </div>
-      </Slide>
-    );
-  },
-};
-
-const InsightDef: LayoutDef = {
-  type: 'insight',
-  label: 'Insight',
-  defaults: {
-    title: 'What the data ==says==.',
-    subtitle: 'A chart is easier to trust with a title over it.',
-    kind: 'donut',
-    bars: [
-      { label: 'Q1', value: 18 },
-      { label: 'Q2', value: 26 },
-      { label: 'Q3', value: 41 },
-      { label: 'Q4', value: 64 },
-    ],
-    donutValue: 64,
-    donutLabel: 'The headline figure',
-    points_line: '12 | 18 | 15 | 26 | 22 | 34 | 30',
-    heading: 'A bit more context',
-    points: [
-      {
-        label: 'THE FIRST POINT',
-        body: 'What does this chart tell you? One sentence of interpretation.',
-      },
-      {
-        label: 'THE SECOND POINT',
-        body: 'Something else that stands out about the data.',
-      },
-      {
-        label: 'ONE FINAL POINT',
-        body: 'Synthesize the findings or draw the conclusion.',
-      },
-    ],
-  },
-  Render: ({ slide }) => {
-    const show = useShow();
-    const kind = slide.props.kind ?? 'donut';
-    const bars = asList<{ label: string; value: number | string }>(
-      slide.props.bars
-    ).map((b) => ({ label: b.label, value: Number(b.value) || 0 }));
-    const showValues = slide.props.values !== false;
-    const chart =
-      kind === 'bars' ? (
-        <BarChart
-          height={230}
-          showValues={showValues}
-          data={bars.map((b, i) => ({
-            value: b.value,
-            valueNode: <T path={`bars.${i}.value`} />,
-            label: e(<T path={`bars.${i}.label`} />),
-          }))}
-        />
-      ) : kind === 'line' ? (
-        <LineChart
-          showValues={showValues}
-          points={pipe(slide.props.points_line)
-            .map(Number)
-            .filter(Number.isFinite)}
-          valueNodes={
-            showValues
-              ? pipe(slide.props.points_line).map((_, i) => (
-                  <T key={i} path="points_line" pipeIndex={i} />
-                ))
-              : undefined
-          }
-          height={230}
-        />
-      ) : (
-        <DonutChart
-          value={Number(slide.props.donutValue) || 0}
-          size={200}
-          label={e(<T path="donutLabel" />)}
-          valueNode={<T path="donutValue" />}
-        />
-      );
-
-    return (
-      <div className="slide full">
-        <div
-          className="insight"
-          style={
-            slide.props.color
-              ? {
-                  ['--primary' as never]: slide.props.color,
-                  ['--accent' as never]: slide.props.color,
-                }
-              : undefined
-          }
-        >
-          <div className="insight-chart">
-            <h2 className="headline insight-title">
-              <T path="title" placeholder="Title" />
-            </h2>
-            {show(slide.props.subtitle) && (
-              <div className="insight-sub">
-                <T path="subtitle" placeholder="Chart subtitle" />
-              </div>
-            )}
-            <div
-              className={'insight-viz' + (kind === 'donut' ? ' center' : '')}
-            >
-              {chart}
-            </div>
-          </div>
-          <div className="insight-points">
-            {show(slide.props.heading) && (
-              <h3 className="insight-heading">
-                <T path="heading" placeholder="Heading" />
-              </h3>
-            )}
-            {asList<{ label: string }>(slide.props.points).map((_, i) => (
-              <div key={i} className="insight-point">
-                <div className="kicker insight-point-label">
-                  <T path={`points.${i}.label`} />
-                </div>
-                <div className="insight-point-body">
-                  <T path={`points.${i}.body`} block />
-                </div>
-              </div>
-            ))}
-          </div>
-        </div>
-      </div>
-    );
-  },
-};
-
-export const mediaLayouts = [
-  PosterDef,
-  StoryDef,
-  SpeakerDef,
-  PersonaDef,
-  ChartDef,
-  InsightDef,
-];
diff --git a/bolt-slides/src/layouts/registry.tsx b/bolt-slides/src/layouts/registry.tsx
deleted file mode 100644
index 21613a3..0000000
--- a/bolt-slides/src/layouts/registry.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import type { SlideData } from '../data/types';
-import { type LayoutDef } from './shared';
-import { coreLayouts } from './core';
-import { gridLayouts } from './grids';
-import { blockLayouts } from './blocks';
-import { mediaLayouts } from './media';
-import { LAYOUT_NAMES, type LayoutName } from '../data/layoutProps';
-
-export type { LayoutName, LayoutProps } from '../data/layoutProps';
-export type { LayoutDef } from './shared';
-
-export const LAYOUTS: Record<string, LayoutDef> = Object.fromEntries(
-  [...coreLayouts, ...gridLayouts, ...mediaLayouts, ...blockLayouts].map(
-    (l) => [l.type, l]
-  )
-);
-
-const missing = LAYOUT_NAMES.filter((name) => !LAYOUTS[name]);
-
-if (missing.length) {
-  throw new Error(`LAYOUTS missing LayoutName: ${missing.join(', ')}`);
-}
-
-const extra = Object.keys(LAYOUTS).filter(
-  (name) => !LAYOUT_NAMES.includes(name as LayoutName)
-);
-
-if (extra.length) {
-  throw new Error(`LAYOUTS has untyped layouts: ${extra.join(', ')}`);
-}
-
-function aliasKeys(type: string): string[] {
-  const kebab = type.replace(/[A-Z]/g, (c) => '-' + c.toLowerCase());
-  const snake = type.replace(/[A-Z]/g, (c) => '_' + c.toLowerCase());
-  return [type.toLowerCase(), kebab, snake];
-}
-
-const LAYOUT_ALIASES: Record<string, string> = {};
-
-for (const type of Object.keys(LAYOUTS)) {
-  for (const a of aliasKeys(type)) LAYOUT_ALIASES[a] = type;
-}
-
-export function resolveLayoutType(raw: unknown): string {
-  if (typeof raw !== 'string' || !raw.trim()) return '';
-
-  const name = raw.trim();
-
-  if (LAYOUTS[name]) return name;
-
-  return LAYOUT_ALIASES[name] ?? LAYOUT_ALIASES[name.toLowerCase()] ?? name;
-}
-
-export function RenderLayout({ slide }: { slide: SlideData }) {
-  const type = resolveLayoutType(slide.layout);
-  const def = LAYOUTS[type];
-
-  if (!def) {
-    return (
-      <div className="slide center">
-        <div className="kicker">Unknown layout</div>
-        <h2 className="headline">“{slide.layout}”</h2>
-      </div>
-    );
-  }
-
-  return <def.Render slide={slide} />;
-}
diff --git a/bolt-slides/src/layouts/shared.tsx b/bolt-slides/src/layouts/shared.tsx
deleted file mode 100644
index a2f9913..0000000
--- a/bolt-slides/src/layouts/shared.tsx
+++ /dev/null
@@ -1,133 +0,0 @@
-import type { ReactNode } from 'react';
-import type { LayoutName } from '../data/layoutProps';
-import type { SlideData } from '../data/types';
-import { useSlide } from '../copy/SlideScope';
-import { deckPathProps } from '../copy/deckPath';
-import { renderRich } from '../copy/rich';
-import T from '../copy/DeckText';
-import CountUp from '../components/CountUp';
-import Reveal from '../deck/Reveal';
-
-export interface LayoutDef {
-  type: LayoutName;
-  label: string;
-  defaults: Record<string, unknown>;
-  Render: (p: { slide: SlideData }) => ReactNode;
-}
-
-export const e = (node: ReactNode) => node as unknown as string;
-
-export const useShow = () => (v: unknown) => !!v;
-
-function parseCountable(v: string | undefined) {
-  if (!v || v.length > 16) return null;
-
-  const m = v.match(/^([^0-9-]{0,4})(-?[\d,]+(?:\.\d+)?)([^0-9]{0,6})$/);
-
-  if (!m) return null;
-
-  const to = parseFloat(m[2].replace(/,/g, ''));
-
-  if (!Number.isFinite(to)) return null;
-
-  const decimals = m[2].includes('.') ? m[2].split('.')[1].length : 0;
-
-  return { to, prefix: m[1], suffix: m[3], decimals };
-}
-
-export function Num({ path, value }: { path: string; value?: string }) {
-  const { slideId } = useSlide();
-  const c = parseCountable(value);
-
-  if (c)
-    return (
-      <span style={{ display: 'contents' }} {...deckPathProps(slideId, path)}>
-        <CountUp
-          to={c.to}
-          prefix={c.prefix}
-          suffix={c.suffix}
-          decimals={c.decimals}
-        />
-      </span>
-    );
-
-  return <T path={path} placeholder="42%" />;
-}
-
-export function Heading({
-  slide,
-  tight,
-}: {
-  slide: SlideData;
-  tight?: boolean;
-}) {
-  const show = useShow();
-
-  if (!show(slide.props.kicker) && !show(slide.props.title)) return null;
-
-  return (
-    <Reveal>
-      {show(slide.props.kicker) && (
-        <div
-          className="kicker"
-          style={{ marginBottom: 10, textAlign: 'center' }}
-        >
-          <T path="kicker" placeholder="Kicker" />
-        </div>
-      )}
-      {show(slide.props.title) && (
-        <h2
-          className="headline"
-          style={{
-            textAlign: 'center',
-            marginInline: 'auto',
-            marginBottom: tight
-              ? 'clamp(18px,3vh,30px)'
-              : 'clamp(24px,4vh,44px)',
-          }}
-        >
-          <T path="title" placeholder="Title" />
-        </h2>
-      )}
-    </Reveal>
-  );
-}
-
-export function asList<T = unknown>(value: unknown): T[] {
-  return Array.isArray(value) ? (value as T[]) : [];
-}
-
-export const pipe = (value: unknown) =>
-  Array.isArray(value)
-    ? value.map((item) => String(item ?? '').trim())
-    : String(value ?? '')
-        .split('|')
-        .map((x) => x.trim());
-
-export function strings(value: unknown): string[] {
-  if (Array.isArray(value)) {
-    return value.flatMap((item) =>
-      typeof item === 'string' || typeof item === 'number'
-        ? [String(item).trim()]
-        : []
-    );
-  }
-
-  if (typeof value !== 'string') return [];
-
-  return value
-    .split('|')
-    .map((x) => x.trim())
-    .filter((x) => x !== '');
-}
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const normTable = (p: any): { columns: string[]; rows: string[][] } => ({
-  columns: Array.isArray(p.columns) ? p.columns : pipe(p.columns),
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  rows: asList(p.rows).map((r: any) =>
-    Array.isArray(r) ? r : pipe(r?.cells ?? '')
-  ),
-});
-
-export const rich = renderRich;
diff --git a/bolt-slides/src/present/PresentApp.tsx b/bolt-slides/src/present/PresentApp.tsx
index f26ea1e..d98508a 100644
--- a/bolt-slides/src/present/PresentApp.tsx
+++ b/bolt-slides/src/present/PresentApp.tsx
@@ -3,7 +3,7 @@ import Deck from '../deck/Deck';
 import { useStore } from '../data/store';
 import { applyFont, applyAccent } from '../data/fonts';
 import { stripRich } from '../copy/rich';
-import { LAYOUTS, resolveLayoutType } from '../layouts/registry';
+import { slideLabel } from '../slide/registry';
 
 export default function PresentApp({
   embedded,
@@ -80,7 +80,7 @@ export default function PresentApp({
           ? plain.length > 52
             ? plain.slice(0, 52) + '…'
             : plain
-          : LAYOUTS[resolveLayoutType(slide.layout)]?.label;
+          : slide.nav || slideLabel(slide.layout);
       }}
     />
   );
diff --git a/bolt-slides/src/slide/SlideView.tsx b/bolt-slides/src/slide/SlideView.tsx
index 100d081..9082a82 100644
--- a/bolt-slides/src/slide/SlideView.tsx
+++ b/bolt-slides/src/slide/SlideView.tsx
@@ -1,11 +1,26 @@
-import { Component, type ReactNode as RN } from 'react';
+import {
+  Component,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+  type ReactNode as RN,
+} from 'react';
 import { motion, type Variants } from 'motion/react';
 import type { ReactNode } from 'react';
 import type { Background, SlideData } from '../data/types';
 import { effectiveImageDim, slideHasImage } from '../data/imageDim';
 import { DeckCtx, useDeck } from '../deck/DeckContext';
 import { SlideScope } from '../copy/SlideScope';
-import { RenderLayout } from '../layouts/registry';
+import { RenderSlide } from './registry';
+import {
+  DEFAULT_STAGE,
+  FALLBACK,
+  StageCtx,
+  describeStage,
+  stageUpscale,
+  type StageSize,
+} from './stage';
 
 function BackgroundLayer({ bg }: { bg: Background | undefined }) {
   const base = { position: 'absolute', inset: 0, zIndex: 0 } as const;
@@ -57,7 +72,7 @@ function BackgroundLayer({ bg }: { bg: Background | undefined }) {
           style={{
             width: '100%',
             height: '100%',
-            background: 'var(--surface-2, #15161b)',
+            background: '#15161b',
           }}
         />
       )}
@@ -74,6 +89,45 @@ function BackgroundLayer({ bg }: { bg: Background | undefined }) {
 
 const STATIC_CTX = { clicks: 9999, isStatic: true };
 
+function useStageUpscale<T extends HTMLElement>() {
+  const ref = useRef<T>(null);
+  const [stage, setStage] = useState<StageSize>(DEFAULT_STAGE);
+
+  useLayoutEffect(() => {
+    const el = ref.current;
+
+    if (!el) return;
+
+    const apply = (width: number, height: number) => {
+      const upscale = stageUpscale(width, height);
+      const w = Math.round(width / upscale);
+      const h = Math.round(height / upscale);
+
+      setStage((prev) =>
+        prev.width === w && prev.height === h && prev.upscale === upscale
+          ? prev
+          : describeStage(w, h, upscale)
+      );
+    };
+
+    apply(el.clientWidth, el.clientHeight);
+
+    if (typeof ResizeObserver === 'undefined') return;
+
+    const ro = new ResizeObserver((entries) => {
+      for (const entry of entries)
+        apply(entry.contentRect.width, entry.contentRect.height);
+    });
+
+    ro.observe(el);
+
+    return () => ro.disconnect();
+  }, []);
+
+  return { ref, stage };
+}
+
+
 class SlideBoundary extends Component<
   { children: RN },
   { err: string | null }
@@ -92,13 +146,11 @@ class SlideBoundary extends Component<
   render() {
     if (this.state.err) {
       return (
-        <div className="slide center">
-          <div className="kicker" style={{ marginBottom: 12 }}>
+        <div className="slide center" style={FALLBACK}>
+          <div style={{ opacity: 0.6, marginBottom: 12 }}>
             This slide hit an error
           </div>
-          <p className="subhead" style={{ maxWidth: '46ch' }}>
-            {this.state.err}
-          </p>
+          <p style={{ maxWidth: '46ch' }}>{this.state.err}</p>
         </div>
       );
     }
@@ -116,6 +168,107 @@ const ENTRANCES: Record<string, Variants> = {
   },
 };
 
+/* Dev-only guard: a paged slide cannot scroll, so any content that leaves
+   the stage is simply not shown. Measure the live slide after its entrance
+   settles and report offenders on the console, where Bolt's agent sees
+   them. Decorative elements (no text, no media) are ignored so off-stage
+   washes and blobs do not trip it. */
+const OUT_OF_VIEW_TOLERANCE = 2;
+
+function hasContent(el: Element): boolean {
+  const tag = el.tagName;
+
+  if (tag === 'IMG' || tag === 'VIDEO' || tag === 'svg' || tag === 'CANVAS')
+    return true;
+
+  for (const node of el.childNodes) {
+    if (node.nodeType === Node.TEXT_NODE && node.textContent?.trim())
+      return true;
+  }
+
+  return false;
+}
+
+function measureOutOfView(stage: HTMLElement) {
+  const box = stage.getBoundingClientRect();
+  let count = 0;
+  let bottom = 0;
+  let right = 0;
+  let top = 0;
+  let left = 0;
+
+  for (const el of stage.querySelectorAll('*')) {
+    if (!(el instanceof HTMLElement || el instanceof SVGElement)) continue;
+    if (!hasContent(el)) continue;
+
+    const r = el.getBoundingClientRect();
+
+    if (r.width === 0 || r.height === 0) continue;
+
+    const dBottom = r.bottom - box.bottom;
+    const dRight = r.right - box.right;
+    const dTop = box.top - r.top;
+    const dLeft = box.left - r.left;
+
+    if (
+      dBottom > OUT_OF_VIEW_TOLERANCE ||
+      dRight > OUT_OF_VIEW_TOLERANCE ||
+      dTop > OUT_OF_VIEW_TOLERANCE ||
+      dLeft > OUT_OF_VIEW_TOLERANCE
+    ) {
+      count++;
+      bottom = Math.max(bottom, dBottom);
+      right = Math.max(right, dRight);
+      top = Math.max(top, dTop);
+      left = Math.max(left, dLeft);
+    }
+  }
+
+  return { count, bottom, right, top, left, box };
+}
+
+function useOutOfViewGuard(
+  ref: React.RefObject<HTMLElement | null>,
+  slide: SlideData,
+  enabled: boolean,
+  upscale: number
+) {
+  useEffect(() => {
+    if (!enabled || !import.meta.env.DEV) return;
+
+    const stage = ref.current;
+
+    if (!stage) return;
+
+    const timer = window.setTimeout(() => {
+      const m = measureOutOfView(stage);
+
+      if (!m.count) return;
+
+      const sides = [
+        m.bottom > OUT_OF_VIEW_TOLERANCE && `${Math.round(m.bottom / upscale)}px below`,
+        m.right > OUT_OF_VIEW_TOLERANCE && `${Math.round(m.right / upscale)}px past the right edge`,
+        m.top > OUT_OF_VIEW_TOLERANCE && `${Math.round(m.top / upscale)}px above`,
+        m.left > OUT_OF_VIEW_TOLERANCE && `${Math.round(m.left / upscale)}px past the left edge`,
+      ]
+        .filter(Boolean)
+        .join(', ');
+      const w = Math.round(m.box.width / upscale);
+      const h = Math.round(m.box.height / upscale);
+
+      console.error(
+        `[bolt-slides] Slide "${slide.id}" (src/slides/${slide.layout}.tsx) ` +
+          `has content out of view: ${m.count} element${m.count === 1 ? '' : 's'} ` +
+          `${sides} on a ${w}×${h} stage. A slide cannot scroll — anything ` +
+          `outside the stage is not shown. Split the slide or resize its ` +
+          `content; do not hide the overflow.`
+      );
+    }, 1200);
+
+    return () => window.clearTimeout(timer);
+  }, [ref, slide, enabled, upscale]);
+}
+
 export default function SlideView({
   slide,
 }: {
@@ -126,11 +279,16 @@ export default function SlideView({
   const parent = useDeck();
   const live = !parent.isStatic;
   const mode = slide.animation ?? 'cascade';
-  const zoom =
+  const { ref: stageRef, stage } = useStageUpscale<HTMLDivElement>();
+  const upscale = stage.upscale;
+
+  useOutOfViewGuard(stageRef, slide, live, upscale);
+  const textScale =
     slide.props?.scale === 'xl' ? 1.3 : slide.props?.scale === 'lg' ? 1.15 : 1;
+  const zoom = textScale * upscale;
   let content: ReactNode = (
     <SlideBoundary>
-      <RenderLayout slide={slide} />
+      <RenderSlide slide={slide} />
     </SlideBoundary>
   );
 
@@ -157,9 +315,15 @@ export default function SlideView({
   return (
     <SlideScope.Provider value={{ slideId: slide.id, slide }}>
       <div
+        ref={stageRef}
         className={'slide-view' + (slideHasImage(slide) ? ' has-image' : '')}
         data-deck-slide={slide.id}
-        style={{ position: 'relative', width: '100%', height: '100%' }}
+        style={{
+          position: 'relative',
+          width: '100%',
+          height: '100%',
+          overflow: 'hidden',
+        }}
       >
         <BackgroundLayer bg={slide.background} />
         <div
@@ -170,9 +334,13 @@ export default function SlideView({
             height: `${100 / zoom}%`,
             transform: zoom !== 1 ? `scale(${zoom})` : undefined,
             transformOrigin: 'top left',
+            /* `cqw` / `cqh` and @container queries in slide components
+               measure this box — the slide's own stage, not the window. */
+            containerType: 'size',
+            containerName: 'slide',
           }}
         >
-          {content}
+          <StageCtx.Provider value={stage}>{content}</StageCtx.Provider>
         </div>
       </div>
     </SlideScope.Provider>
diff --git a/bolt-slides/src/slide/registry.tsx b/bolt-slides/src/slide/registry.tsx
new file mode 100644
index 0000000..706bf36
--- /dev/null
+++ b/bolt-slides/src/slide/registry.tsx
@@ -0,0 +1,55 @@
+import type { ComponentType } from 'react';
+import type { SlideData } from '../data/types';
+import { FALLBACK } from './stage';
+
+/** A slide component: `src/slides/<name>.tsx`, default export. */
+export type SlideComponent = ComponentType<{ slide: SlideData }>;
+
+/* Every file in src/slides/ is a slide component; its basename is the
+   `layout` value that deck.json uses to reference it. */
+const modules = import.meta.glob<SlideComponent>('../slides/*.tsx', {
+  eager: true,
+  import: 'default',
+});
+
+export const SLIDES: Record<string, SlideComponent> = Object.fromEntries(
+  Object.entries(modules).map(([file, component]) => [
+    file.replace(/^.*\//, '').replace(/\.tsx$/, ''),
+    component,
+  ])
+);
+
+/** Human label for a slide name: `closing-cta` / `closingCta` → "Closing cta". */
+export function slideLabel(name: string): string {
+  const words = name
+    .replace(/([a-z0-9])([A-Z])/g, '$1 $2')
+    .replace(/[-_]+/g, ' ')
+    .trim()
+    .toLowerCase();
+
+  return words ? words[0].toUpperCase() + words.slice(1) : 'Slide';
+}
+
+export function RenderSlide({ slide }: { slide: SlideData }) {
+  const name = String(slide.layout ?? '').trim();
+  const Component = SLIDES[name];
+
+  if (!Component) {
+    return (
+      <div className="slide center" style={FALLBACK}>
+        <div style={{ opacity: 0.6, marginBottom: 12 }}>
+          Missing slide component
+        </div>
+        <h2 style={{ fontSize: '2em', fontWeight: 600 }}>
+          “{name || '(empty)'}”
+        </h2>
+        <p style={{ marginTop: 16, maxWidth: '46ch' }}>
+          Add <code>src/slides/{name || 'name'}.tsx</code> with a default
+          export, or point this deck.json entry at an existing file.
+        </p>
+      </div>
+    );
+  }
+
+  return <Component slide={slide} />;
+}
diff --git a/bolt-slides/src/slide/stage.ts b/bolt-slides/src/slide/stage.ts
new file mode 100644
index 0000000..3f3d244
--- /dev/null
+++ b/bolt-slides/src/slide/stage.ts
@@ -0,0 +1,71 @@
+import { createContext, useContext } from 'react';
+
+/* Reference stage. Up to 1600×900 a slide reflows responsively; on bigger
+   stages the whole slide is scaled up, so a 2900px screen shows the
+   reference composition larger instead of stretched thin. The scale is the
+   smaller of the two ratios, so the inner stage is never narrower than
+   1600 or shorter than 900 — widening a window can only give the slide
+   more room, never take height away. */
+export const STAGE_REF_WIDTH = 1600;
+export const STAGE_REF_HEIGHT = 900;
+
+/* Stage tiers. Below NARROW a slide is a phone: one column, never a
+   shrunken desktop. Below COMPACT it is a tablet or a half-screen window:
+   two columns only when each gets real room. Portrait stages (taller than
+   wide — an iPad held upright, a phone) stack side-by-side layouts. */
+export const NARROW_STAGE_WIDTH = 700;
+export const COMPACT_STAGE_WIDTH = 1100;
+
+/** The stage a slide component is laid out in, in its own CSS pixels. */
+export interface StageSize {
+  width: number;
+  height: number;
+  /** >1 only on stages larger than 1600×900 (the slide is magnified). */
+  upscale: number;
+  /** width < 700 — a phone; one column. */
+  narrow: boolean;
+  /** width < 1100 — a tablet or small window; be frugal with columns. */
+  compact: boolean;
+  /** height > width — stack anything side by side. */
+  portrait: boolean;
+}
+
+export function describeStage(
+  width: number,
+  height: number,
+  upscale: number
+): StageSize {
+  return {
+    width,
+    height,
+    upscale,
+    narrow: width < NARROW_STAGE_WIDTH,
+    compact: width < COMPACT_STAGE_WIDTH,
+    portrait: height > width,
+  };
+}
+
+export const DEFAULT_STAGE: StageSize = describeStage(
+  STAGE_REF_WIDTH,
+  STAGE_REF_HEIGHT,
+  1
+);
+
+export const StageCtx = createContext<StageSize>(DEFAULT_STAGE);
+
+/** Read the stage size from inside a slide component (see SKILL.md). */
+export const useStage = () => useContext(StageCtx);
+
+export function stageUpscale(width: number, height: number): number {
+  return Math.max(
+    1,
+    Math.min(width / STAGE_REF_WIDTH, height / STAGE_REF_HEIGHT)
+  );
+}
+
+/* Shell fallback text (error / missing component) — deliberately plain. */
+export const FALLBACK = {
+  fontFamily: 'system-ui, sans-serif',
+  fontSize: 'clamp(14px, 1.6vw, 18px)',
+  lineHeight: 1.5,
+} as const;
diff --git a/bolt-slides/src/slides/welcome.tsx b/bolt-slides/src/slides/welcome.tsx
new file mode 100644
index 0000000..3ced6ff
--- /dev/null
+++ b/bolt-slides/src/slides/welcome.tsx
@@ -0,0 +1,37 @@
+import type { SlideComponent } from '@/slide/registry';
+
+/* Seed slide. It has no design on purpose — delete it once the deck has
+   its own slides. */
+const Welcome: SlideComponent = () => (
+  <div
+    style={{
+      width: '100%',
+      height: '100%',
+      display: 'grid',
+      placeItems: 'center',
+      padding: 'clamp(24px, 6cqw, 96px)',
+      textAlign: 'center',
+      fontFamily: 'system-ui, sans-serif',
+    }}
+  >
+    <div>
+      <h1 style={{ fontSize: 'clamp(28px, 5cqw, 64px)', fontWeight: 600 }}>
+        Your deck starts here.
+      </h1>
+      <p
+        style={{
+          marginTop: '1em',
+          fontSize: 'clamp(15px, 1.8cqw, 22px)',
+          opacity: 0.7,
+          maxWidth: '40ch',
+          marginInline: 'auto',
+        }}
+      >
+        Ask Bolt for a deck. Every slide becomes a React component in
+        src/slides/, listed in deck.json.
+      </p>
+    </div>
+  </div>
+);
+
+export default Welcome;
diff --git a/bolt-slides/src/styles/base.css b/bolt-slides/src/styles/base.css
index 575b5f1..aa2513f 100644
--- a/bolt-slides/src/styles/base.css
+++ b/bolt-slides/src/styles/base.css
@@ -1,5 +1,3 @@
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
-
 /* ── Reset & page ───────────────────────────────────────────────── */
 *,
 *::before,
@@ -12,9 +10,6 @@ body,
   height: 100%;
   margin: 0;
 }
-html {
-  color-scheme: dark;
-} /* set "light" for light decks */
 body {
   background: var(--bg);
   color: var(--fg);
@@ -97,3871 +92,1315 @@ body {
   margin-inline: auto;
 }
 
-/* Atmosphere — drifting spotlights + film grain + vignette, per slide */
-.slide {
-  box-shadow: inset 0 0 220px 50px var(--vignette);
-}
-.slide::before {
-  content: '';
-  position: absolute;
-  inset: -15%;
-  pointer-events: none;
-  z-index: 0;
-  background: radial-gradient(
-      44% 50% at 24% 16%,
-      var(--bg-grad-1),
-      transparent 60%
-    ),
-    radial-gradient(50% 56% at 82% 88%, var(--bg-grad-2), transparent 62%);
-  animation: drift 26s var(--ease) infinite alternate;
-}
-@keyframes drift {
-  0% {
-    transform: translate3d(-2%, -1%, 0) scale(1.06);
-  }
-  100% {
-    transform: translate3d(3%, 2%, 0) scale(1.14);
-  }
-}
-.slide::after {
-  content: '';
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
-  z-index: 2;
-  opacity: var(--grain);
-  mix-blend-mode: overlay;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
-}
-
-/* ── Fluid type atoms ───────────────────────────────────────────── */
+/* Base text reset. No type scale, no palette: each deck's slide components
+   define their own look. */
 h1,
 h2,
-h3 {
-  font-family: var(--font-head);
-  font-weight: 600;
-  letter-spacing: -0.028em;
-  line-height: 1.04;
-  margin: 0;
-  color: var(--fg);
-}
+h3,
+h4,
 p {
   margin: 0;
-  line-height: 1.5;
-}
-strong {
-  font-weight: 600;
-  color: var(--fg);
-}
-.kicker {
-  font-size: clamp(12px, 1.1vw, 15px);
-  font-weight: 500;
-  letter-spacing: 0.16em;
-  text-transform: uppercase;
-  color: var(--fg-faint);
-}
-.display {
-  font-weight: 600;
-  letter-spacing: -0.04em;
-  line-height: 0.98;
-  font-size: clamp(44px, 8vw, 116px);
-}
-.headline {
-  font-weight: 600;
-  letter-spacing: -0.03em;
-  line-height: 1.04;
-  font-size: clamp(32px, 5.2vw, 62px);
-  max-width: 18ch;
-}
-.lead {
-  font-size: clamp(17px, 2.1vw, 25px);
-  color: var(--fg-muted);
-  max-width: 42ch;
-  line-height: 1.5;
-}
-.subhead {
-  font-size: clamp(18px, 2.4vw, 30px);
-  color: var(--fg-muted);
-  max-width: 26ch;
-  line-height: 1.35;
-}
-.foot {
-  font-size: clamp(13px, 1.2vw, 16px);
-  color: var(--fg-faint);
-}
-/* Image surfaces are black-dimmed, so muted gray never clears. Overlay
-   chrome uses near-white; color slides keep --fg-muted / --fg-faint. */
-.slide-view.has-image .kicker,
-.slide-view.has-image .foot,
-.slide-view.has-image .quote-role {
-  color: rgba(255, 255, 255, 0.78);
-}
-.slide-view.has-image .subhead,
-.slide-view.has-image .lead {
-  color: rgba(255, 255, 255, 0.88);
-}
-.center .lead,
-.center .subhead {
-  margin-inline: auto;
 }
+/* `==accent==` rich-text marker (speaker notes, in-place text edit). */
 .accent-text {
-  background: var(--accent);
-  -webkit-background-clip: text;
-  background-clip: text;
-  color: transparent;
-}
-.figure {
-  font-weight: 600;
-  letter-spacing: -0.05em;
-  line-height: 0.9;
-  font-size: clamp(88px, 16vw, 220px);
-  font-feature-settings: 'tnum' 1;
-  background: var(--accent);
-  -webkit-background-clip: text;
-  background-clip: text;
-  color: transparent;
-}
-.rule {
-  width: 96px;
-  height: 1px;
-  background: linear-gradient(90deg, var(--primary), transparent);
+  color: var(--accent);
 }
 
-/* ═══ COMPONENT MATERIAL — one shared premium-card language ══════════
-   Card components compose `.mat`: a layered surface, a hairline border, a
-   faint inner top-light, and a centered top "sheen" (the lit-from-above
-   edge). Shared details: `.tick` (a small accent index bar) and `.chip`
-   (a mono label pill). All token-driven — re-theme :root, everything follows. */
-.mat {
-  position: relative;
-  background: linear-gradient(180deg, var(--surface-2), var(--surface));
-  border: 1px solid var(--hair);
-  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--fg) 6%, transparent);
-}
-.mat::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 14%;
-  right: 14%;
-  height: 1px;
-  z-index: 2;
-  background: linear-gradient(
-    90deg,
-    transparent,
-    color-mix(in srgb, var(--fg) 26%, transparent),
-    transparent
-  );
-  pointer-events: none;
-}
-.tick {
-  display: block;
-  width: 22px;
-  height: 3px;
-  border-radius: 2px;
-  background: var(--accent);
+/* ── Responsive utilities ─────────────────────────────────────────── */
+.cols {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
+  gap: 20px;
+  align-items: stretch;
 }
-.chip {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: 4px 11px;
-  border-radius: 999px;
-  font-family: var(--font-mono);
-  font-size: 11.5px;
-  font-weight: 500;
-  letter-spacing: 0.07em;
-  text-transform: uppercase;
-  color: var(--primary);
-  background: color-mix(in srgb, var(--primary) 9%, transparent);
-  border: 1px solid color-mix(in srgb, var(--primary) 24%, transparent);
+@media (max-width: 900px) {
+  .cols {
+    gap: 12px;
+  }
 }
 
-/* ── Bento — 6-col mosaic when tiles set `c`; otherwise equal N-up ── */
-/* Mosaic rows need the slide width; lift the 1180px container cap. */
-.bento-wide .container {
-  max-width: none;
-}
-.bento {
-  display: grid;
-  grid-template-columns: repeat(var(--cols, 6), 1fr);
-  grid-auto-rows: minmax(clamp(130px, 20vh, 230px), auto);
-  gap: 16px;
-  width: 100%;
-}
-.bento-cell {
-  grid-column: span var(--c, 2);
-  grid-row: span var(--r, 1);
-  display: flex;
-  min-width: 0;
+/* ═══════════════════════════════════════════════════════════════════
+   NAVIGATION CHROME — the Slidev-style floating glass dock + thumbnail
+   rail, ported to React. This is the UI to keep; restyle only via tokens.
+   ═══════════════════════════════════════════════════════════════════ */
+.noir-dock {
+  position: fixed;
+  bottom: 22px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 100;
+  opacity: 0.35;
+  transition: opacity 0.35s ease;
+  font-family: var(--font-ui);
+  overflow: visible;
 }
-.btile {
-  overflow: hidden;
-  flex: 1;
-  grid-column: span var(--c, 2);
-  grid-row: span var(--r, 1);
+/* Shared anchor above the bar — notes, annotate, and future dock popovers. */
+.noir-dock-popover {
+  position: absolute;
+  bottom: calc(100% + 10px);
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 45;
+  /* Wider than the dock when needed (annotate tools); don't shrink-wrap to the bar. */
+  width: max-content;
+  max-width: 94vw;
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
-  gap: 14px;
-  padding: clamp(20px, 2vw, 28px);
-  border-radius: var(--radius-lg);
-  transition: border-color var(--dur) var(--ease),
-    transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
-}
-.btile::after {
-  content: '';
-  position: absolute;
-  inset: 0;
+  align-items: center;
+  gap: 8px;
   pointer-events: none;
-  opacity: 0;
-  background: radial-gradient(
-    75% 62% at 82% -12%,
-    color-mix(in srgb, var(--primary) 14%, transparent),
-    transparent 66%
-  );
-  transition: opacity var(--dur) var(--ease);
-}
-.btile:hover {
-  border-color: color-mix(in srgb, var(--primary) 30%, transparent);
-  transform: translateY(-3px);
-}
-.btile:hover::after {
-  opacity: 1;
 }
-.btile.glow {
-  border-color: color-mix(in srgb, var(--primary) 36%, transparent);
-  box-shadow: var(--glow),
-    inset 0 1px 0 color-mix(in srgb, var(--fg) 7%, transparent);
+.noir-dock-popover > * {
+  pointer-events: auto;
 }
-.btile.glow::after {
+.noir-dock.editor,
+.noir-dock.dragging {
   opacity: 1;
 }
-.btile.accent {
-  background: var(--accent);
-  border-color: transparent;
-  box-shadow: var(--glow);
-}
-.btile.accent::before,
-.btile.accent::after {
-  display: none;
+.noir-dock.placed {
+  bottom: auto;
+  transform: none;
+  visibility: visible;
 }
-.btile.accent .btile-fig,
-.btile.accent h3,
-.btile.accent p {
-  color: var(--accent-ink);
-  -webkit-text-fill-color: var(--accent-ink);
+.noir-dock:not(.placed) {
+  visibility: hidden;
 }
-.btile.accent .btile-k {
-  color: color-mix(in srgb, var(--accent-ink) 72%, transparent);
+.noir-dock.dragging {
+  transition: none;
 }
-.btile.accent .tick {
-  background: var(--accent-ink);
-  opacity: 0.75;
+.noir-dock:hover,
+.noir-dock:focus-within {
+  opacity: 1;
 }
-/* image tile — full-bleed photo under a bottom scrim, text anchored low */
-.btile-img {
-  position: absolute;
-  inset: 0;
-  z-index: 0;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
+.noir-bar {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 6px 8px;
+  border-radius: 999px;
+  /* Same surface as notes / annotate popovers — DS dark --bgAlt (neutral[950]) */
+  background: var(--ed-bg-alt);
+  /* DS dark --borderPrimary (neutral[800]) */
+  border: 1px solid var(--ed-border);
+  backdrop-filter: blur(22px) saturate(180%);
+  -webkit-backdrop-filter: blur(22px) saturate(180%);
+  box-shadow: var(--ed-shadow-lg);
 }
-.btile-scrim {
-  position: absolute;
-  inset: 0;
-  z-index: 0;
-  background: linear-gradient(
-    180deg,
-    transparent 32%,
-    color-mix(in srgb, var(--bg) 82%, transparent)
-  );
+.noir-icon-btn {
+  width: 32px;
+  height: 32px;
+  display: grid;
+  place-items: center;
+  border: none;
+  border-radius: 50%;
+  background: transparent;
+  color: var(--ed-text);
+  font-size: 18px;
+  cursor: pointer;
+  transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
 }
-.btile.has-img {
-  justify-content: flex-end;
+.noir-icon-btn:hover {
+  /* DS dark --bgTertiaryHover (neutral[800]) */
+  background: var(--ed-bg-tertiary-hover);
 }
-.btile.has-img > :not(.btile-img):not(.btile-scrim) {
-  position: relative;
-  z-index: 1;
+.noir-icon-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
 }
-.btile-head {
-  display: flex;
-  flex-direction: column;
-  gap: 9px;
+.noir-icon-btn:disabled:hover {
+  background: transparent;
 }
-.btile-k {
-  font-size: clamp(11px, 1vw, 13px);
-  font-weight: 600;
-  letter-spacing: 0.14em;
-  text-transform: uppercase;
-  color: var(--fg-faint);
+.noir-icon-btn.on {
+  color: var(--ed-on-brand);
+  background: var(--ed-brand);
 }
-.btile-fig {
-  font-size: clamp(40px, 4.4vw, 64px);
-  font-weight: 600;
-  letter-spacing: -0.045em;
-  line-height: 0.92;
-  font-feature-settings: 'tnum' 1;
-  color: var(--fg);
+.noir-dock:hover .noir-icon-btn.danger,
+.noir-dock:focus-within .noir-icon-btn.danger,
+.noir-dock.dragging .noir-icon-btn.danger {
+  color: var(--ed-on-danger);
+  background: var(--ed-danger);
 }
-.btile-fig.grad {
-  background: var(--accent);
-  -webkit-background-clip: text;
-  background-clip: text;
-  color: transparent;
+.noir-dock:hover .noir-icon-btn.danger:hover,
+.noir-dock:focus-within .noir-icon-btn.danger:hover,
+.noir-dock.dragging .noir-icon-btn.danger:hover {
+  background: var(--ed-danger-hover);
 }
-.btile h3 {
-  font-size: clamp(18px, 2vw, 23px);
+.noir-icon-btn.sm {
+  width: 28px;
+  height: 28px;
+  font-size: 16px;
 }
-.btile p {
-  font-size: clamp(14px, 1.4vw, 16px);
-  color: var(--fg-muted);
-  line-height: 1.4;
+.noir-icon-btn svg {
+  width: 1em;
+  height: 1em;
 }
-
-/* ── Stat grid + card ───────────────────────────────────────────── */
-.stat-grid {
+.noir-grip {
+  width: 32px;
+  height: 32px;
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-  gap: clamp(14px, 1.6vw, 22px);
-  width: 100%;
+  place-items: center;
+  flex-shrink: 0;
+  border: none;
+  padding: 0;
+  border-radius: 50%;
+  background: transparent;
+  /* DS dark --textSecondary (neutral[300]) — above faint icon gray */
+  color: var(--ed-text-muted);
+  cursor: grab;
+  touch-action: none;
+  user-select: none;
 }
-.stat-cell {
-  display: flex;
-  min-width: 0;
+.noir-grip:active {
+  cursor: grabbing;
 }
-.stat-card {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  padding: clamp(24px, 2.4vw, 36px) clamp(22px, 2vw, 30px);
-  border-radius: var(--radius);
-  text-align: left;
-  transition: transform var(--dur) var(--ease),
-    border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
+.noir-grip svg {
+  width: 18px;
+  height: 18px;
+}
+.noir-sep {
+  width: 1px;
+  height: 22px;
+  background: var(--ed-divider);
+  margin: 0 4px;
 }
-.stat-card:hover {
-  transform: translateY(-6px);
-  border-color: color-mix(in srgb, var(--primary) 32%, transparent);
-  box-shadow: var(--glow),
-    inset 0 1px 0 color-mix(in srgb, var(--fg) 7%, transparent);
+.noir-bar .dl-wrap {
+  flex: none;
 }
-.stat-card .tick {
-  margin-bottom: 8px;
+.noir-bar .dl-pop {
+  right: auto;
+  left: 0;
 }
-.stat-value {
-  font-size: clamp(40px, 4.6vw, 58px);
-  font-weight: 600;
-  letter-spacing: -0.04em;
-  line-height: 1;
+.noir-counter {
+  display: flex;
+  align-items: baseline;
+  gap: 5px;
+  padding: 0 12px;
   font-feature-settings: 'tnum' 1;
-  background: var(--accent);
-  -webkit-background-clip: text;
-  background-clip: text;
-  color: transparent;
+  user-select: none;
+  flex: none;
+  white-space: nowrap;
 }
-.stat-label {
-  font-size: clamp(16px, 1.6vw, 19px);
+.noir-counter-now {
+  font-size: 16px;
   font-weight: 600;
-  color: var(--fg);
-  margin-top: 8px;
+  color: var(--ed-text);
 }
-.stat-caption {
-  font-size: clamp(13px, 1.3vw, 15px);
-  color: var(--fg-faint);
-  line-height: 1.4;
+.noir-counter-tot {
+  font-size: 13px;
+  color: var(--ed-text-faint);
 }
 
-/* ── Accordion ──────────────────────────────────────────────────── */
-.accordion {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  width: 100%;
-}
-.acc-item {
-  border-radius: var(--radius);
-  overflow: hidden;
-  transition: border-color var(--dur) var(--ease),
-    box-shadow var(--dur) var(--ease);
+/* Left thumbnail rail */
+.noir-rail {
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: 248px;
+  z-index: 95;
+  padding: 0 14px 26px;
+  overflow-y: auto;
+  background: rgb(17 17 20 / 0.92);
+  border-right: 1px solid var(--ed-border);
+  backdrop-filter: blur(26px) saturate(180%);
+  -webkit-backdrop-filter: blur(26px) saturate(180%);
+  font-family: var(--font-ui);
+  /* Fallback before Motion hydrates; the spring owns x after that. */
+  transform: translateX(-100%);
 }
-.acc-item.open {
-  border-color: color-mix(in srgb, var(--primary) 34%, transparent);
-  box-shadow: 0 22px 48px -32px color-mix(in srgb, var(--primary) 45%, transparent),
-    inset 0 1px 0 color-mix(in srgb, var(--fg) 7%, transparent);
+.noir-rail.open {
+  transform: translateX(0);
 }
-.acc-head {
+/* the head stays put while the thumbnails scroll under it */
+.noir-rail-head {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  margin: 0 -14px;
+  padding: 8px 16px 8px 20px;
   display: flex;
   align-items: center;
-  gap: 16px;
-  width: 100%;
-  padding: clamp(16px, 1.8vw, 22px) clamp(18px, 2vw, 26px);
+  justify-content: space-between;
   background: transparent;
+}
+/* the glass lives on a layer whose OPACITY animates — fading a compositor layer
+   is smooth both ways, where animating backdrop-filter itself stutters. */
+.noir-rail-head::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.16s ease-out;
+  background: rgb(17 17 20 / 0.44);
+  backdrop-filter: blur(20px) saturate(180%);
+  -webkit-backdrop-filter: blur(20px) saturate(180%);
+}
+.noir-rail-head.scrolled::before {
+  opacity: 1;
+}
+.noir-rail-head > * {
+  position: relative;
+  z-index: 1;
+}
+.noir-rail-title {
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--ed-text-faint);
+}
+.noir-rail-head .noir-icon-btn.sm {
+  width: 26px;
+  height: 26px;
+  font-size: 14px;
+}
+.noir-rail-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding-top: 8px;
+}
+.noir-thumb {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 0;
   border: none;
+  background: transparent;
   cursor: pointer;
   text-align: left;
-  font-family: var(--font-body);
-  color: var(--fg);
 }
-.acc-index {
-  font-family: var(--font-mono);
-  font-size: 12.5px;
-  font-weight: 600;
-  letter-spacing: 0.04em;
-  color: var(--fg-faint);
+.noir-thumb-no {
+  width: 18px;
+  font-size: 12px;
+  font-feature-settings: 'tnum' 1;
+  color: var(--ed-icon-faint);
   flex-shrink: 0;
-  transition: color var(--dur) var(--ease);
-}
-.acc-item.open .acc-index {
-  background: var(--accent);
-  -webkit-background-clip: text;
-  background-clip: text;
-  color: transparent;
 }
-.acc-head h3 {
+.noir-thumb-frame {
   flex: 1;
-  font-size: clamp(17px, 1.9vw, 21px);
-  font-weight: 600;
-  letter-spacing: -0.02em;
-  color: var(--fg);
-  margin: 0;
-}
-/* the +/× morph — a plus that rotates 45° open, Apple-style */
-.acc-plus {
+  min-width: 0;
+  width: 100%;
+  height: auto;
+  border-radius: 9px;
+  overflow: hidden;
+  /* No border — border-box + aspect-ratio would shrink the content box off
+     16×9 and letterbox the scaled slide. Hover / active / sel use outline. */
+  border: none;
+  /* Transparent by default so outline-color doesn't interpolate from
+     currentColor (near-white text) on hover. */
+  outline: 1.5px solid transparent;
+  outline-offset: 0;
+  transition: outline-color 0.25s ease, outline-offset 0.25s ease,
+    outline-width 0.25s ease;
+  line-height: 0;
+  /* Fixed thumb chrome — do not follow the window aspect or rail thumbs
+     grow taller as the viewport narrows. */
+  aspect-ratio: 16 / 9;
   position: relative;
-  width: 22px;
-  height: 22px;
-  flex-shrink: 0;
-  transition: transform 0.4s var(--ease-spring);
+  background: var(--bg);
 }
-.acc-plus::before,
-.acc-plus::after {
-  content: '';
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  background: var(--fg-faint);
-  border-radius: 2px;
-  transition: background var(--dur) var(--ease);
+.noir-thumb:hover .noir-thumb-frame {
+  outline-color: var(--ed-border);
+}
+.noir-thumb.active .noir-thumb-no {
+  color: var(--ed-text);
 }
-.acc-plus::before {
-  width: 14px;
-  height: 1.8px;
-  transform: translate(-50%, -50%);
+.noir-thumb.active .noir-thumb-frame {
+  outline-color: var(--ed-text);
 }
-.acc-plus::after {
-  width: 1.8px;
-  height: 14px;
-  transform: translate(-50%, -50%);
+.noir-thumb.sel .noir-thumb-frame,
+.noir-thumb.sel:hover .noir-thumb-frame,
+.noir-thumb.active.sel .noir-thumb-frame,
+.noir-thumb:not(.noir-thumb-grid):focus-visible .noir-thumb-frame,
+.noir-thumb:not(.noir-thumb-grid):focus-visible:hover .noir-thumb-frame,
+.noir-thumb:not(.noir-thumb-grid).active:focus-visible .noir-thumb-frame {
+  outline-width: 2px;
+  outline-color: var(--ed-brand);
+  outline-offset: 3px;
 }
-.acc-item.open .acc-plus {
-  transform: rotate(45deg);
+.noir-thumb:focus,
+.noir-thumb:focus-visible {
+  outline: none;
 }
-.acc-item.open .acc-plus::before,
-.acc-item.open .acc-plus::after {
-  background: var(--primary);
+/* Fixed 16×9 stage (1280×720) scaled into the frame — thumbs keep presentation
+   aspect instead of mirroring the live window. width/height/transform inline. */
+.noir-thumb-scale {
+  position: absolute;
+  top: 0;
+  left: 0;
+  transform-origin: top left;
+  pointer-events: none;
 }
-.acc-body {
-  overflow: hidden;
+.noir-rail::-webkit-scrollbar {
+  width: 0;
 }
-.acc-body-inner {
-  padding: 0 clamp(18px, 2vw, 26px) clamp(18px, 2vw, 24px)
-    clamp(44px, 5vw, 58px);
-  font-size: clamp(14px, 1.5vw, 17px);
-  color: var(--fg-muted);
-  line-height: 1.5;
-  max-width: 62ch;
-  text-align: left;
+.noir-rail {
+  scrollbar-width: none;
 }
 
-/* ═══ State-of-the-art sections ═════════════════════════════════════ */
-
-/* Comparison (us vs them) */
-.cmp {
-  width: 100%;
-  border-radius: var(--radius);
-  overflow: hidden;
+/* Grid overview — full-screen slide picker (G) */
+.noir-grid {
+  position: fixed;
+  inset: 0;
+  z-index: 98;
+  overflow-y: auto;
+  padding: 0 clamp(18px, 4vw, 54px) 96px;
+  background: rgb(17 17 20 / 0.92);
+  backdrop-filter: blur(26px) saturate(180%);
+  -webkit-backdrop-filter: blur(26px) saturate(180%);
+  font-family: var(--font-ui);
 }
-.cmp-row {
-  display: grid;
-  grid-template-columns: 1.6fr repeat(var(--vcols, 2), 1fr);
-  align-items: stretch;
+.noir-grid::-webkit-scrollbar {
+  width: 0;
 }
-.cmp-row + .cmp-row {
-  border-top: 1px solid var(--hair-2);
+.noir-grid {
+  scrollbar-width: none;
 }
-.cmp-cell {
-  padding: clamp(12px, 1.5vw, 18px) clamp(14px, 1.6vw, 22px);
-  font-size: clamp(14px, 1.5vw, 17px);
-  color: var(--fg-muted);
+.noir-grid-head {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  margin: 0 clamp(-54px, -4vw, -18px);
+  padding: 10px clamp(18px, 4vw, 54px);
   display: flex;
   align-items: center;
+  justify-content: space-between;
+  background: transparent;
 }
-.cmp-cell:not(.cmp-label):not(.cmp-h) {
-  justify-content: center;
-}
-.cmp-head {
-  background: var(--surface-2);
-}
-.cmp-h {
-  font-weight: 600;
-  color: var(--fg);
-  justify-content: center;
-}
-.cmp-h:first-child {
-  justify-content: flex-start;
-}
-.cmp-label {
-  color: var(--fg);
-  font-weight: 500;
+.noir-grid-head::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.16s ease-out;
+  background: rgb(17 17 20 / 0.42);
+  backdrop-filter: blur(20px) saturate(180%);
+  -webkit-backdrop-filter: blur(20px) saturate(180%);
 }
-/* the highlighted (your) column reads as a framed strip through the table */
-.cmp-cell.hl {
-  background: color-mix(in srgb, var(--primary) 7%, transparent);
-  border-inline: 1px solid color-mix(in srgb, var(--primary) 16%, transparent);
+.noir-grid-head.scrolled::before {
+  opacity: 1;
 }
-.cmp-h.hl {
-  color: transparent;
-  background: var(--accent);
-  -webkit-background-clip: text;
-  background-clip: text;
-  border-inline: 1px solid color-mix(in srgb, var(--primary) 16%, transparent);
-  box-shadow: inset 0 2px 0 var(--primary);
+.noir-grid-head > * {
+  position: relative;
+  z-index: 1;
 }
-.cmp-chip {
+.noir-grid-head .noir-icon-btn.sm {
   width: 26px;
   height: 26px;
-  border-radius: 999px;
-  display: grid;
-  place-items: center;
-  flex-shrink: 0;
-}
-.cmp-chip svg {
-  width: 14px;
-  height: 14px;
+  font-size: 14px;
 }
-.cmp-chip.ok {
-  color: var(--primary);
-  background: color-mix(in srgb, var(--primary) 12%, transparent);
-  border: 1px solid color-mix(in srgb, var(--primary) 26%, transparent);
+.noir-grid-list {
+  padding: 6px 2px 10px;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
+  gap: clamp(14px, 2vw, 26px);
 }
-.cmp-chip.no {
-  color: var(--fg-faint);
-  background: var(--surface);
-  border: 1px solid var(--hair-2);
-  opacity: 0.75;
+.noir-thumb-grid {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 7px;
 }
-.cmp-val {
-  font-feature-settings: 'tnum' 1;
+.noir-thumb-grid .noir-thumb-no {
+  width: auto;
 }
-
-/* Data table — dense numeric tables: mono-ruled rows, right-aligned tabular
-   numerals, an optional accent column/row. For real data, not feature matrices
-   (that's Comparison). */
-.dtable {
+.noir-thumb-shell {
+  position: relative;
+  min-width: 0;
   width: 100%;
-  max-width: 880px;
-  margin-inline: auto;
-  border-radius: var(--radius);
-  overflow: hidden;
 }
-.dtable table {
+.noir-thumb-shell .noir-thumb {
   width: 100%;
-  border-collapse: collapse;
-  font-size: clamp(13px, 1.4vw, 15.5px);
-}
-.dtable th {
-  font-size: clamp(10.5px, 1vw, 12px);
-  font-weight: 600;
-  letter-spacing: 0.12em;
-  text-transform: uppercase;
-  color: var(--fg-faint);
-  background: var(--surface-2);
-  padding: clamp(10px, 1.2vw, 14px) clamp(12px, 1.5vw, 18px);
-  text-align: right;
-  white-space: nowrap;
-}
-.dtable td {
-  padding: clamp(9px, 1.1vw, 13px) clamp(12px, 1.5vw, 18px);
-  color: var(--fg-muted);
-  border-top: 1px solid var(--hair-2);
-  text-align: right;
-  font-feature-settings: 'tnum' 1;
 }
-.dtable th:first-child,
-.dtable td:first-child {
-  text-align: left;
+.noir-thumb-shell > .dl-wrap.noir-thumb-more {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  z-index: 2;
+  opacity: 0;
+  pointer-events: none;
 }
-.dtable td:first-child {
-  color: var(--fg);
-  font-weight: 500;
+.noir-thumb-shell:hover > .dl-wrap.noir-thumb-more,
+.noir-thumb-shell > .dl-wrap.noir-thumb-more:focus-within,
+.noir-thumb-shell > .dl-wrap.noir-thumb-more.open,
+.noir-thumb-shell.grid.active > .dl-wrap.noir-thumb-more,
+.noir-thumb-shell.grid.sel > .dl-wrap.noir-thumb-more {
+  opacity: 1;
+  pointer-events: auto;
 }
-.dtable .al-l {
-  text-align: left;
+.noir-thumb-shell > .dl-wrap.noir-thumb-more.open {
+  z-index: 8;
 }
-.dtable .al-c {
-  text-align: center;
-}
-.dtable .al-r {
-  text-align: right;
-}
-.dtable .hl-col {
-  background: color-mix(in srgb, var(--primary) 7%, transparent);
-  border-inline: 1px solid color-mix(in srgb, var(--primary) 16%, transparent);
-}
-.dtable th.hl-col {
-  color: var(--primary);
-  box-shadow: inset 0 2px 0 var(--primary);
-}
-.dtable tr.hl-row td {
-  background: color-mix(in srgb, var(--primary) 7%, transparent);
-  color: var(--fg);
-}
-.dtable-caption {
-  margin-top: 10px;
-  text-align: right;
-}
-
-/* Tabs (sliding accent pill) */
-.tabs {
-  width: 100%;
-}
-.tabs-bar {
-  display: inline-flex;
-  gap: 4px;
-  padding: 5px;
-  border-radius: 999px;
-  background: color-mix(in srgb, var(--bg) 45%, transparent);
-  border: 1px solid var(--hair);
-  box-shadow: inset 0 1px 3px color-mix(in srgb, var(--bg) 65%, transparent);
-}
-.tab {
-  position: relative;
+.noir-thumb-more-btn {
+  /* DS CloseButton ghost / icon-xs */
+  width: 28px;
+  height: 28px;
+  display: grid;
+  place-items: center;
   border: none;
+  border-radius: 4px;
   background: transparent;
+  color: var(--ed-text);
   cursor: pointer;
-  padding: 9px 18px;
-  border-radius: 999px;
-  font-family: var(--font-body);
-  font-size: 15px;
-  font-weight: 600;
-  color: var(--fg-muted);
-  transition: color var(--dur) var(--ease);
-}
-.tab:hover {
-  color: var(--fg);
-}
-.tab.on {
-  color: var(--accent-ink);
+  transition: background 0.15s ease;
 }
-.tab-pill {
-  position: absolute;
-  inset: 0;
-  border-radius: 999px;
-  background: var(--accent);
-  z-index: 0;
-  box-shadow: 0 8px 22px -8px color-mix(in srgb, var(--primary) 65%, transparent);
+.noir-thumb-more-btn:hover,
+.noir-thumb-more-btn.on {
+  background: var(--ed-util-hover);
+  color: var(--ed-text);
 }
-.tab-label {
-  position: relative;
-  z-index: 1;
+.noir-thumb-more-btn:focus-visible {
+  outline: 2px solid var(--ed-brand-hover);
+  outline-offset: 0;
 }
-/* the panel centers its content MASS, not just its box: text centers, and
-   width-capped blocks (a .lead, a fit-content Timeline) get auto margins.
-   An explicit inline margin on a child still overrides. */
-.tabs-panel {
-  margin-top: 22px;
-  text-align: center;
+.noir-thumb-more-btn svg {
+  width: 20px;
+  height: 20px;
 }
-.tabs-panel-inner > * {
-  margin-inline: auto;
+@media (max-width: 700px) {
+  .noir-grid-list {
+    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+  }
 }
 
-/* Timeline */
-.tl {
-  position: relative;
-}
-.tl-line {
-  position: absolute;
-  left: 11px;
-  top: 10px;
-  bottom: 10px;
-  width: 2px;
-  background: var(--hair);
-  border-radius: 2px;
-  overflow: hidden;
-}
-.tl-line-fill {
-  position: absolute;
+/* ── Presenter console (/present?presenter=1) ──────────────────────────
+   A second-screen cockpit: live slide, what's next, notes at reading size,
+   stopwatch and clock. Its own screen — no slide behind it. */
+.pres {
+  position: fixed;
   inset: 0;
-  background: var(--accent);
-  transform-origin: top;
-}
-.tl-items {
+  z-index: 99;
   display: flex;
   flex-direction: column;
-  gap: clamp(20px, 3vh, 34px);
+  background: var(--ed-bg);
+  color: var(--ed-text);
+  font-family: var(--font-ui);
 }
-.tl-item {
-  position: relative;
+.pres-top {
   display: flex;
-  gap: 20px;
-  padding-left: 2px;
-}
-/* milestone = a glowing ring with an accent core, knocked out of the line */
-.tl-dot {
-  position: relative;
-  z-index: 1;
-  flex-shrink: 0;
-  width: 20px;
-  height: 20px;
-  margin-top: 2px;
-  border-radius: 50%;
-  background: var(--bg);
-  border: 2px solid var(--primary);
-  box-shadow: 0 0 0 4px var(--bg),
-    0 0 20px -2px color-mix(in srgb, var(--primary) 60%, transparent);
-  display: grid;
-  place-items: center;
-}
-.tl-dot::after {
-  content: '';
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  background: var(--accent);
+  align-items: center;
+  justify-content: space-between;
+  gap: 18px;
+  padding: 12px clamp(14px, 2vw, 26px);
+  border-bottom: 1px solid var(--ed-border);
+  background: var(--ed-bg-secondary);
 }
-.tl-time {
-  margin-bottom: 9px;
+.pres-timer,
+.pres-right {
+  display: flex;
+  align-items: center;
+  gap: 6px;
 }
-.tl-content h3 {
-  font-size: clamp(18px, 2vw, 23px);
+.pres-time {
+  font-size: clamp(26px, 3.2vw, 40px);
   font-weight: 600;
+  line-height: 1;
   letter-spacing: -0.02em;
-  margin: 0 0 5px;
-}
-.tl-content p {
-  font-size: clamp(14px, 1.5vw, 16px);
-  color: var(--fg-muted);
-  line-height: 1.5;
-  max-width: 52ch;
-  margin: 0;
-}
-
-/* Code window */
-.cw {
-  width: 100%;
-  border-radius: var(--radius);
-  overflow: hidden;
-  background: var(--bg);
-  box-shadow: var(--shadow),
-    inset 0 1px 0 color-mix(in srgb, var(--fg) 6%, transparent);
+  font-feature-settings: 'tnum' 1;
+  color: var(--ed-text);
+  margin-right: 4px;
 }
-.cw-bar {
-  position: relative;
-  z-index: 1;
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 11px 16px;
-  background: var(--surface-2);
-  border-bottom: 1px solid var(--hair-2);
+.pres-time.paused {
+  color: var(--ed-text-faint);
 }
-.cw-dots {
+.pres-center {
   display: flex;
-  gap: 7px;
-}
-.cw-dots i {
-  width: 11px;
-  height: 11px;
-  border-radius: 50%;
-  background: var(--hair);
-}
-.cw-title {
-  font-family: var(--font-mono);
-  font-size: 12.5px;
-  color: var(--fg-faint);
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-}
-.cw-title::before {
-  content: '';
-  width: 6px;
-  height: 6px;
-  border-radius: 2px;
-  background: var(--accent);
+  align-items: baseline;
+  gap: 14px;
 }
-.cw-body {
-  margin: 0;
-  padding: 14px 0;
-  overflow-x: auto;
+.pres-builds {
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--ed-brand);
+  padding: 3px 9px;
+  border-radius: 999px;
+  background: var(--ed-brand-bg-subtle);
 }
-.cw-body code {
-  font-family: var(--font-mono);
-  font-size: clamp(12px, 1.3vw, 14px);
-  line-height: 1.7;
+.pres-clock {
+  font-size: 15px;
+  color: var(--ed-text-faint);
+  font-feature-settings: 'tnum' 1;
 }
-.cw-line {
-  display: flex;
-  padding: 0 16px 0 0;
-  white-space: pre;
+.pres-sep {
+  width: 1px;
+  height: 20px;
+  background: var(--ed-divider);
+  margin: 0 6px;
 }
-.cw-line.hl {
-  background: color-mix(in srgb, var(--primary) 9%, transparent);
-  box-shadow: inset 2px 0 0 var(--primary);
+.pres-icon {
+  position: relative;
+  width: 32px;
+  height: 32px;
+  display: grid;
+  place-items: center;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--ed-icon-muted);
+  cursor: pointer;
+  transition: background 0.18s ease, color 0.18s ease, opacity 0.18s ease;
 }
-.cw-no {
-  width: 44px;
-  flex-shrink: 0;
-  color: var(--fg-faint);
-  opacity: 0.45;
-  user-select: none;
-  text-align: right;
-  padding-right: 14px;
-  margin-right: 14px;
-  border-right: 1px solid var(--hair-2);
-  font-feature-settings: 'tnum' 1;
+.pres-icon svg {
+  width: 16px;
+  height: 16px;
+  display: block;
 }
-.cw-code {
-  color: var(--fg);
+.pres-timer .pres-icon.is-play svg {
+  /* triangle's optical center sits left of the viewBox midpoint */
+  transform: translateX(1px);
 }
-.cw-kw {
-  color: var(--primary);
+.pres-icon:hover:not(:disabled) {
+  background: var(--ed-util-hover);
+  color: var(--ed-text);
 }
-.cw-str {
-  color: color-mix(in srgb, var(--primary) 50%, var(--fg-muted));
+.pres-icon:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
 }
-.cw-num {
-  color: color-mix(in srgb, var(--primary) 65%, var(--fg));
-  font-feature-settings: 'tnum' 1;
+.pres-icon-sub {
+  position: absolute;
+  right: 3px;
+  bottom: 2px;
+  font-size: 10px;
+  font-weight: 700;
+  line-height: 1;
 }
-.cw-com {
-  color: var(--fg-faint);
-  font-style: italic;
+.pres :focus-visible {
+  outline: 2px solid var(--ed-brand);
+  outline-offset: 2px;
 }
 
-/* Charts */
-.ch-bars {
-  display: flex;
-  align-items: stretch;
-  gap: clamp(8px, 1.4vw, 16px);
-  width: 100%;
-}
-.ch-col {
+.pres-body {
   flex: 1;
-  min-width: 0;
+  min-height: 0;
+  display: grid;
+  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
+  gap: clamp(14px, 2vw, 28px);
+  padding: clamp(14px, 2vw, 26px);
+}
+/* The stage column stacks the live preview and up-next. The live preview
+   sizes from its width (16×9); leftover column height stays empty chrome. */
+.pres-stage {
   display: flex;
   flex-direction: column;
+  gap: 10px;
+  min-height: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+.pres-label {
+  display: flex;
   align-items: center;
   gap: 8px;
-  height: 100%;
+  flex: none;
+  min-width: 0;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--ed-text-faint);
 }
-.ch-bar-track {
+.pres-now,
+.pres-next {
+  border-radius: 12px;
+  overflow: hidden;
+  background: var(--bg);
+  border: 1px solid var(--ed-border);
+  box-shadow: var(--ed-shadow-lg);
+  /* Width-driven 16×9 — don't shrink or stretch with leftover column height. */
+  flex: none;
   width: 100%;
-  flex: 1;
+  aspect-ratio: 16 / 9;
   display: flex;
-  align-items: flex-end;
+  justify-content: center;
+  align-items: stretch;
 }
-.ch-bar {
+.pres-now .noir-thumb-frame,
+.pres-next .noir-thumb-frame {
   width: 100%;
-  border-radius: 9px 9px 5px 5px;
-  background: var(--accent);
-  display: block;
-  min-height: 3px;
-}
-.ch-val {
-  font-size: 11.5px;
-  font-weight: 600;
-  color: var(--fg-muted);
-  font-feature-settings: 'tnum' 1;
-}
-.ch-x {
-  font-size: 11.5px;
-  color: var(--fg-faint);
+  height: 100%;
+  max-width: 100%;
+  flex: none;
+  align-self: stretch;
 }
-.ch-wrap {
-  position: relative;
+.pres-next-wrap {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  flex: none;
+  min-width: 0;
   width: 100%;
 }
-.ch-line {
-  width: 100%;
-  display: block;
-}
-/* the live end-point of a line chart — a glowing dot with a radar pulse */
-.ch-dot {
-  position: absolute;
-  width: 9px;
-  height: 9px;
-  border-radius: 50%;
-  background: var(--primary);
-  transform: translate(-50%, -50%) scale(0.3);
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent),
-    0 0 14px color-mix(in srgb, var(--primary) 60%, transparent);
-  opacity: 0;
-  transition: opacity 0.6s var(--ease) 0.55s,
-    transform 0.6s var(--ease-spring) 0.55s;
+.pres-next {
+  padding: 0;
+  cursor: pointer;
+  opacity: 0.34;
+  transition: opacity 0.2s ease;
 }
-.ch-dot.shown {
+.pres-next:not(.pres-next-end):hover,
+.pres-next:focus-visible {
   opacity: 1;
-  transform: translate(-50%, -50%) scale(1);
-}
-.ch-dot::before {
-  content: '';
-  position: absolute;
-  inset: -3px;
-  border-radius: 50%;
-  border: 1px solid color-mix(in srgb, var(--primary) 60%, transparent);
-  animation: chpulse 2.2s var(--ease) infinite;
-}
-.ch-dot.lg {
-  width: 14px;
-  height: 14px;
-  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 22%, transparent),
-    0 0 20px color-mix(in srgb, var(--primary) 60%, transparent);
 }
-.ch-dot.lg::before {
-  inset: -5px;
-}
-@keyframes chpulse {
-  0% {
-    transform: scale(1);
-    opacity: 0.8;
-  }
-  70%,
-  100% {
-    transform: scale(2.1);
-    opacity: 0;
-  }
+.pres-next-end {
+  display: grid;
+  place-items: center;
+  aspect-ratio: 16 / 9;
+  cursor: default;
+  color: var(--ed-text-faint);
+  font-size: 13px;
+  background: var(--ed-bg-secondary);
 }
-.ch-donut {
-  width: var(--ch-size, 168px);
+
+/* label above the box, exactly like "Current slide" — so both columns start
+   on the same line and their boxes align */
+.pres-notes-col {
   display: flex;
   flex-direction: column;
-  align-items: center;
-  gap: 12px;
-}
-.ch-donut-ring {
-  position: relative;
-  width: 100%;
+  gap: 10px;
+  min-height: 0;
 }
-.ch-donut svg {
-  width: 100%;
-  height: auto;
-  display: block;
-  overflow: visible;
+.pres-notes-box {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  border-radius: 12px;
+  border: 1px solid var(--ed-border);
+  background: var(--ed-bg-secondary);
+  padding: 14px clamp(14px, 1.6vw, 22px);
 }
-.ch-donut-arc {
-  filter: drop-shadow(
-    0 0 7px color-mix(in srgb, var(--primary) 40%, transparent)
-  );
+.pres-notes-head {
+  justify-content: space-between;
 }
-.ch-donut-val {
-  fill: var(--fg);
-  font-family: var(--font-head);
-  font-size: 30px;
-  font-weight: 600;
-  font-feature-settings: 'tnum' 1;
+.pres-notes {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  line-height: 1.55;
+  color: var(--ed-text);
+  padding-bottom: 14px;
+  scrollbar-width: thin;
+  scrollbar-color: var(--ed-border) transparent;
 }
-.ch-donut-val-html {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-family: var(--font-head);
-  font-size: calc(var(--ch-size, 168px) * 30 / 140);
-  font-weight: 600;
-  font-feature-settings: 'tnum' 1;
-  pointer-events: auto;
+.pres-notes::-webkit-scrollbar {
+  width: 6px;
 }
-.ch-donut-val-html::after {
-  content: '%';
+.pres-notes::-webkit-scrollbar-thumb {
+  background: var(--ed-border);
+  border-radius: 3px;
 }
-.ch-donut-label {
-  font-size: 14px;
-  color: var(--fg-muted);
-  font-weight: 500;
+.pres-notes-empty {
+  color: var(--ed-text-faint);
 }
-
-/* ═══ Slide layouts — Section / Quote / Pricing / Steps / Agenda / Team ═══ */
-
-/* Section — chapter divider: ghost number + stronger accent corner glows */
-.sec-glow {
-  position: absolute;
-  inset: 0;
-  z-index: 0;
-  pointer-events: none;
-  background: radial-gradient(
-      42% 48% at 12% 88%,
-      color-mix(in srgb, var(--primary) 13%, transparent),
-      transparent 62%
-    ),
-    radial-gradient(
-      36% 42% at 88% 10%,
-      color-mix(in srgb, var(--primary) 9%, transparent),
-      transparent 62%
-    );
+/* ── notes typography + WYSIWYG (shared: presenter console + editor) ──
+   The same marks the deck speaks, rendered as prose. Both the read view and
+   the editable surface use these, so what you type is what you present. */
+.note-p,
+.note-wyg div {
+  margin: 0 0 0.75em;
 }
-.sec-ghost {
-  position: absolute;
-  right: -1vw;
-  top: 50%;
-  transform: translateY(-52%);
-  z-index: 0;
-  font-family: var(--font-head);
-  font-weight: 600;
-  line-height: 1;
-  letter-spacing: -0.06em;
-  font-size: clamp(260px, 42vw, 600px);
-  font-feature-settings: 'tnum' 1;
-  color: transparent;
-  -webkit-text-stroke: 1.5px color-mix(in srgb, var(--fg) 10%, transparent);
-  user-select: none;
-  pointer-events: none;
+.note-p:last-child {
+  margin-bottom: 0;
 }
-
-/* Quote — pull-quote slide */
-.quote-mark {
+.note-h,
+.note-wyg h3 {
+  margin: 1.1em 0 0.45em;
   font-family: var(--font-head);
-  font-weight: 600;
-  line-height: 0.55;
-  font-size: clamp(72px, 9vw, 128px);
-  background: var(--accent);
-  -webkit-background-clip: text;
-  background-clip: text;
-  color: transparent;
+  font-size: 1.02em;
+  font-weight: 650;
+  letter-spacing: -0.01em;
+  color: #fff;
 }
-.quote-text {
-  font-family: var(--font-head);
-  font-weight: 500;
-  letter-spacing: -0.025em;
-  line-height: 1.2;
-  font-size: clamp(26px, 3.8vw, 48px);
-  max-width: 24ch;
-  margin-inline: auto;
-  color: var(--fg);
+.note-h:first-child,
+.note-wyg h3:first-child {
+  margin-top: 0;
 }
-.quote-attr {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 14px;
-  margin-top: clamp(22px, 4vh, 36px);
+.note-list,
+.note-wyg ul,
+.note-wyg ol {
+  margin: 0 0 0.8em;
+  padding-left: 1.25em;
 }
-.quote-ava {
-  width: 46px;
-  height: 46px;
-  border-radius: 50%;
-  overflow: hidden;
-  display: grid;
-  place-items: center;
-  flex-shrink: 0;
-  font-weight: 600;
-  font-size: 15px;
-  color: var(--accent-ink);
-  background: var(--accent);
+.note-list li,
+.note-wyg li {
+  margin-bottom: 0.35em;
 }
-.quote-ava img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  display: block;
+.note-list li::marker,
+.note-wyg li::marker {
+  color: var(--primary);
 }
-.quote-who {
-  text-align: left;
+.note-quote,
+.note-wyg blockquote {
+  margin: 0 0 0.8em;
+  padding: 0.5em 0 0.5em 0.85em;
+  border-left: 2px solid var(--primary);
+  color: #fff;
+  background: color-mix(in srgb, var(--primary) 8%, transparent);
+  border-radius: 0 8px 8px 0;
 }
-.quote-name {
-  font-weight: 600;
-  color: var(--fg);
-  font-size: 15.5px;
+.note-quote p {
+  margin: 0;
 }
-.quote-role {
-  color: var(--fg-faint);
-  font-size: 13.5px;
-  margin-top: 1px;
+.note-code,
+.note-wyg code {
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: 0.88em;
+  padding: 0.12em 0.4em;
+  border-radius: 5px;
+  background: rgba(255, 255, 255, 0.09);
 }
 
-/* Pricing — tier cards, one highlighted */
-.pricing {
-  display: grid;
-  grid-template-columns: repeat(var(--tiers, 3), 1fr);
-  gap: clamp(14px, 1.6vw, 20px);
-  width: 100%;
-  max-width: 980px;
-  margin-inline: auto;
-  align-items: stretch;
-}
-.tier {
-  position: relative;
+.note-wyg-wrap {
   display: flex;
   flex-direction: column;
-  padding: clamp(22px, 2.2vw, 30px) clamp(20px, 2vw, 26px);
-  border-radius: var(--radius-lg);
-  transition: transform var(--dur) var(--ease),
-    border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
+  min-height: 0;
+  flex: 1;
+  gap: 8px;
 }
-.tier:hover {
-  transform: translateY(-4px);
-  border-color: color-mix(in srgb, var(--primary) 28%, transparent);
+/* one row of tools, identical everywhere the editor appears — in a narrow
+   container it scrolls sideways rather than reflowing into a different shape */
+.note-wyg-bar {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  flex-wrap: nowrap;
+  flex: none;
+  padding: 4px;
+  border-radius: 10px;
+  /* DS dark --bgAltHover (neutral[900]) — one step above the popover's --bgAlt */
+  background: var(--ed-bg-alt-hover);
+  border: none;
+  overflow-x: auto;
+  overflow-y: visible;
+  scrollbar-width: none;
 }
-.tier.hl {
-  border-color: color-mix(in srgb, var(--primary) 42%, transparent);
-  box-shadow: var(--glow),
-    inset 0 1px 0 color-mix(in srgb, var(--fg) 7%, transparent);
+.note-wyg-bar::-webkit-scrollbar {
+  height: 0;
 }
-.tier-badge {
-  position: absolute;
-  top: 0;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  z-index: 3;
-  padding: 5px 13px;
-  border-radius: 999px;
-  white-space: nowrap;
-  font-size: 10.5px;
-  font-weight: 700;
-  letter-spacing: 0.09em;
-  text-transform: uppercase;
-  color: var(--accent-ink);
-  background: var(--accent);
-  box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--primary) 60%, transparent);
+.note-wyg-bar > * {
+  flex: none;
 }
-.tier-name {
-  font-weight: 600;
-  font-size: clamp(15px, 1.5vw, 17px);
-  color: var(--fg);
+/* draggable when it overflows — a mouse can pan it, no trackpad needed */
+.note-wyg-bar {
+  cursor: grab;
+  touch-action: pan-x;
 }
-.tier-price {
-  display: flex;
-  align-items: baseline;
-  gap: 6px;
-  margin: 10px 0 4px;
+.note-wyg-bar:active {
+  cursor: grabbing;
 }
-.tier-amount {
-  font-size: clamp(34px, 3.6vw, 46px);
-  font-weight: 600;
-  letter-spacing: -0.04em;
-  line-height: 1;
-  font-feature-settings: 'tnum' 1;
-  color: var(--fg);
+.note-wyg-btn {
+  cursor: pointer;
 }
-.tier.hl .tier-amount {
-  background: var(--accent);
-  -webkit-background-clip: text;
-  background-clip: text;
-  color: transparent;
+.note-wyg-btn {
+  width: 28px;
+  height: 28px;
+  display: grid;
+  place-items: center;
+  border: none;
+  border-radius: 7px;
+  background: transparent;
+  color: #c7c7cc;
+  cursor: pointer;
+  transition: background 0.15s ease, color 0.15s ease;
 }
-.tier-period {
-  color: var(--fg-faint);
-  font-size: 13px;
+.note-wyg-btn:hover {
+  background: rgba(255, 255, 255, 0.12);
+  color: #fff;
 }
-.tier-blurb {
-  color: var(--fg-muted);
-  font-size: 13.5px;
-  line-height: 1.45;
+.note-wyg-btn.on {
+  background: rgba(255, 255, 255, 0.14);
+  color: #fff;
 }
-.tier-list {
-  display: flex;
-  flex-direction: column;
-  gap: 9px;
-  margin-top: 14px;
-  padding-top: 14px;
-  border-top: 1px solid var(--hair-2);
+.note-wyg-sep {
+  width: 1px;
+  height: 18px;
+  background: rgba(255, 255, 255, 0.14);
+  margin: 0 4px;
 }
-.tier-feat {
+
+/* colour + highlight palette, behind the A button */
+.note-wyg-pop-wrap {
+  position: relative;
   display: flex;
-  gap: 9px;
-  align-items: flex-start;
-  font-size: 13.5px;
-  color: var(--fg-muted);
-  line-height: 1.4;
-  text-align: left;
 }
-.tier-feat svg {
-  width: 14px;
-  height: 14px;
-  color: var(--primary);
-  flex-shrink: 0;
-  margin-top: 2.5px;
-}
-
-/* Steps — horizontal numbered process with a drawing connector */
-.steps {
-  display: grid;
-  grid-template-columns: repeat(var(--n, 3), 1fr);
-  gap: clamp(18px, 2.4vw, 30px);
-  width: 100%;
-  max-width: 1020px;
-  margin-inline: auto;
-}
-.step {
+.note-wyg-pop {
+  position: fixed;
+  z-index: 120;
+  width: max-content;
   display: flex;
   flex-direction: column;
-  gap: 10px;
-  min-width: 0;
-}
-.step-no-row {
-  display: flex;
-  align-items: center;
-  gap: 14px;
-  margin-bottom: 4px;
-}
-.step-no {
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-  display: grid;
-  place-items: center;
-  flex-shrink: 0;
-  font-family: var(--font-mono);
-  font-weight: 600;
-  font-size: 14.5px;
-  color: var(--primary);
-  background: color-mix(in srgb, var(--primary) 10%, transparent);
-  border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
-}
-.step-line {
-  flex: 1;
-  height: 1px;
-  background: var(--hair);
-  position: relative;
-  overflow: hidden;
-}
-.step-line span {
-  position: absolute;
-  inset: 0;
-  background: var(--accent);
-  transform-origin: left;
-  display: block;
+  gap: 5px;
+  padding: 10px 11px;
+  border-radius: 12px;
+  background: var(--ed-pop, rgba(28, 28, 30, 0.96));
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  backdrop-filter: blur(22px) saturate(180%);
+  -webkit-backdrop-filter: blur(22px) saturate(180%);
+  box-shadow: 0 18px 50px -16px rgba(0, 0, 0, 0.8);
+  animation: note-pop-in 0.13s cubic-bezier(0.32, 0.72, 0, 1);
 }
-/* the trailing bar on the LAST step tapers out instead of stopping hard */
-.step-line.end {
-  -webkit-mask-image: linear-gradient(90deg, #000 20%, transparent 92%);
-  mask-image: linear-gradient(90deg, #000 20%, transparent 92%);
+@keyframes note-pop-in {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
 }
-.step h3 {
-  font-size: clamp(17px, 1.9vw, 22px);
+.note-wyg-pop-label {
+  font-size: 9.5px;
   font-weight: 600;
-  letter-spacing: -0.02em;
-  margin: 0;
-}
-.step p {
-  font-size: clamp(13.5px, 1.4vw, 16px);
-  color: var(--fg-muted);
-  line-height: 1.5;
-  max-width: 34ch;
-  margin: 0;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: #8e8e93;
 }
-
-/* Agenda — numbered table-of-contents rows */
-.agenda {
-  width: 100%;
-  max-width: 760px;
-  margin-inline: auto;
+.note-wyg-pop-label:not(:first-child) {
+  margin-top: 4px;
 }
-.agenda-row {
+.note-wyg-pop-row {
   display: flex;
   align-items: center;
-  gap: clamp(18px, 2.4vw, 28px);
-  padding: clamp(14px, 2.2vh, 22px) 6px;
-  border-bottom: 1px solid var(--hair-2);
-}
-.agenda-row:first-child {
-  border-top: 1px solid var(--hair-2);
+  gap: 6px;
 }
-.agenda-no {
-  font-family: var(--font-mono);
-  font-size: clamp(13px, 1.3vw, 15px);
-  font-weight: 600;
-  background: var(--accent);
-  -webkit-background-clip: text;
-  background-clip: text;
-  color: transparent;
-  flex-shrink: 0;
+.note-wyg-swatch {
+  width: 19px;
+  height: 19px;
+  padding: 0;
+  border-radius: 50%;
+  cursor: pointer;
+  border: 1px solid rgba(255, 255, 255, 0.28);
+  transition: transform 0.15s ease;
 }
-.agenda-t {
-  flex: 1;
-  font-family: var(--font-head);
-  font-weight: 600;
-  letter-spacing: -0.02em;
-  font-size: clamp(20px, 2.6vw, 30px);
-  color: var(--fg);
-  text-align: left;
+.note-wyg-swatch:hover {
+  transform: scale(1.15);
 }
-.agenda-hint {
-  color: var(--fg-faint);
-  font-size: clamp(12px, 1.2vw, 13.5px);
-  font-feature-settings: 'tnum' 1;
+.note-wyg-swatch.is-accent-swatch {
+  background: var(--accent);
+  border-color: rgba(255, 255, 255, 0.5);
 }
-
-/* Cover — standardized opening slide, optional full-bleed image under a scrim */
-.cover-img {
-  position: absolute;
-  inset: 0;
-  z-index: 0;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
+.note-wyg-swatch.is-hl {
+  border-radius: 5px;
 }
-/* designed theme scrim, plus a flat dim (--dim is floored in render) */
-.cover-scrim {
-  position: absolute;
-  inset: 0;
-  z-index: 0;
+.note-wyg-swatch.is-none {
+  border-radius: 5px;
   background: linear-gradient(
-      180deg,
-      rgba(0, 0, 0, var(--dim, 0)),
-      rgba(0, 0, 0, var(--dim, 0))
+      to top right,
+      transparent calc(50% - 1px),
+      #ef4444 50%,
+      transparent calc(50% + 1px)
     ),
-    linear-gradient(
-      180deg,
-      color-mix(in srgb, var(--bg) 52%, transparent),
-      color-mix(in srgb, var(--bg) 40%, transparent) 45%,
-      color-mix(in srgb, var(--bg) 82%, transparent)
-    );
-}
-.cover-foot {
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: calc(var(--gutter-y) + 40px);
-  text-align: center;
-} /* clears the dock */
-
-/* BigNumber — the one giant-figure drama slide every deck needs */
-.bignum-caption {
-  margin-top: clamp(10px, 2vh, 20px);
+    rgba(255, 255, 255, 0.06);
 }
 
-/* Contrast — before/after, problem/solution: muted panel vs accent-lit panel */
-.contrast {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: clamp(14px, 1.8vw, 22px);
-  width: 100%;
-  max-width: 1000px;
-  margin-inline: auto;
-  align-items: stretch;
-}
-.con-panel {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  padding: clamp(22px, 2.4vw, 32px);
-  border-radius: var(--radius-lg);
-  text-align: left;
-}
-.con-panel.dim {
-  background: var(--surface);
-}
-.con-panel.dim::before {
-  display: none;
-}
-.con-panel.lit {
-  border-color: color-mix(in srgb, var(--primary) 40%, transparent);
-  box-shadow: var(--glow),
-    inset 0 1px 0 color-mix(in srgb, var(--fg) 7%, transparent);
-}
-.chip.dim {
-  color: var(--fg-faint);
-  background: var(--surface-2);
-  border-color: var(--hair);
-}
-.con-panel h3 {
-  font-size: clamp(19px, 2.1vw, 25px);
-  margin: 2px 0 4px;
-}
-.con-panel.dim h3 {
-  color: var(--fg-muted);
-}
-.con-points {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  margin-top: 2px;
+/* highlighter — the one mark notes add on top of the deck's own */
+.note-hl,
+.note-wyg [data-hl] {
+  border-radius: 4px;
+  padding: 0.08em 0.26em;
+  margin: 0 -0.06em;
+  color: inherit;
+  -webkit-box-decoration-break: clone;
+  box-decoration-break: clone;
 }
-.con-point {
-  display: flex;
-  gap: 10px;
-  align-items: flex-start;
-  font-size: clamp(13.5px, 1.4vw, 15.5px);
-  color: var(--fg-muted);
-  line-height: 1.45;
-}
-.con-point svg {
-  width: 15px;
-  height: 15px;
-  flex-shrink: 0;
-  margin-top: 2px;
+.note-wyg {
+  --note-pad-x: 10px;
+  --note-pad-y: 8px;
+  position: relative;
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  line-height: 1.55;
+  color: #f0f0f2;
+  padding: var(--note-pad-y) var(--note-pad-x) 12px;
+  border-radius: 12px;
+  outline: none;
+  transition: box-shadow 0.15s ease, background 0.15s ease;
 }
-.con-panel.dim .con-point svg {
-  color: var(--fg-faint);
-  opacity: 0.7;
+/* the focus ring is ours: rounded, and INSET so it can never crowd or spill
+   past the edge of whatever box the editor sits in */
+.note-wyg:focus,
+.note-wyg:focus-visible {
+  outline: none;
+  background: rgba(255, 255, 255, 0.03);
+  box-shadow: inset 0 0 0 1.5px
+    color-mix(in srgb, var(--ed-brand) 55%, transparent);
 }
-.con-panel.lit .con-point svg {
-  color: var(--primary);
+/* the placeholder sits UNDER the caret, not above the first line, so typing
+   replaces it instead of pushing it down */
+.note-wyg.is-empty::before {
+  content: attr(data-placeholder);
+  position: absolute;
+  pointer-events: none;
+  color: #5c5c61;
+  top: var(--note-pad-y);
+  left: var(--note-pad-x);
+  right: var(--note-pad-x);
 }
 
-/* Chat — a conversation mock; messages reveal in beats (Build) */
-.chat {
-  width: 100%;
-  max-width: 640px;
-  margin-inline: auto;
-  border-radius: var(--radius-lg);
-  overflow: hidden;
-  box-shadow: var(--shadow),
-    inset 0 1px 0 color-mix(in srgb, var(--fg) 6%, transparent);
-}
-.chat-head {
-  display: flex;
-  align-items: center;
-  gap: 9px;
-  padding: 12px 16px;
-  background: var(--surface-2);
-  border-bottom: 1px solid var(--hair-2);
-  font-weight: 600;
-  font-size: 13.5px;
-  color: var(--fg);
-}
-.chat-body {
+.pres-bottom {
   display: flex;
   flex-direction: column;
+  align-items: stretch;
   gap: 10px;
-  padding: clamp(16px, 2vw, 22px);
-}
-.msg {
-  max-width: 78%;
-  padding: 10px 14px;
-  border-radius: 16px;
-  font-size: clamp(13.5px, 1.4vw, 15px);
-  line-height: 1.45;
-  text-align: left;
-}
-.msg.user {
-  align-self: flex-end;
-  background: var(--accent);
-  color: var(--accent-ink);
-  border-bottom-right-radius: 5px;
-}
-.msg.ai {
-  align-self: flex-start;
-  background: var(--surface-2);
-  border: 1px solid var(--hair-2);
-  color: var(--fg);
-  border-bottom-left-radius: 5px;
-}
-
-/* Team — people grid (photos or auto-initials) */
-.team {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
-  gap: clamp(14px, 1.6vw, 20px);
-  width: 100%;
-  max-width: 1000px;
-  margin-inline: auto;
+  padding: 12px clamp(14px, 2vw, 26px);
+  border-top: 1px solid rgba(255, 255, 255, 0.08);
 }
-.person {
+.pres-pager {
   display: flex;
-  flex-direction: column;
   align-items: center;
-  text-align: center;
-  padding: clamp(22px, 2.2vw, 30px) 18px;
-  border-radius: var(--radius);
-  transition: transform var(--dur) var(--ease),
-    border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
-}
-.person:hover {
-  transform: translateY(-4px);
-  border-color: color-mix(in srgb, var(--primary) 28%, transparent);
-  box-shadow: var(--glow),
-    inset 0 1px 0 color-mix(in srgb, var(--fg) 7%, transparent);
-}
-.person-ava {
-  width: clamp(64px, 6vw, 84px);
-  aspect-ratio: 1;
-  border-radius: 50%;
+  justify-content: center;
+  gap: 4px;
+}
+.pres-progress {
+  height: 4px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.1);
   overflow: hidden;
-  display: grid;
-  place-items: center;
-  margin-bottom: 13px;
-  font-weight: 600;
-  font-size: clamp(20px, 2vw, 26px);
-  color: var(--accent-ink);
-  background: var(--accent);
 }
-.person-ava img {
-  width: 100%;
+.pres-progress-fill {
   height: 100%;
-  object-fit: cover;
-  display: block;
+  border-radius: 999px;
+  background: var(--accent);
+  transition: width 0.35s cubic-bezier(0.32, 0.72, 0, 1);
 }
-.person-name {
-  font-weight: 600;
-  color: var(--fg);
-  font-size: clamp(15px, 1.6vw, 18px);
+
+/* ── responsive: the console has to work in a half-screen window, a phone-
+   shaped one, and a short letterbox one ─────────────────────────────── */
+.pres-top {
+  flex-wrap: wrap;
+  row-gap: 8px;
 }
-.person-role {
-  color: var(--fg-muted);
-  font-size: clamp(12.5px, 1.3vw, 14px);
-  margin-top: 3px;
+.pres-timer,
+.pres-center,
+.pres-right {
+  min-width: 0;
 }
 
-/* ── Responsive utilities ─────────────────────────────────────────── */
-.cols {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
-  gap: 20px;
-  align-items: stretch;
-}
-@media (max-width: 640px) {
-  /* charts shrink so stacked chart cards fit short phones (beats inline heights) */
-  .ch-bars,
-  .ch-line {
-    height: 120px !important;
-  }
-  .ch-donut {
-    --ch-size: 120px !important;
-  }
-  /* data tables keep their column integrity and pan horizontally instead */
-  .dtable {
-    overflow-x: auto;
-  }
-  .dtable table {
-    min-width: 540px;
-  }
-  .dtable th,
-  .dtable td {
-    white-space: nowrap;
-    padding: 9px 12px;
+/* one column: previews on top, notes below with a floor of their own */
+@media (max-width: 1000px) {
+  .pres-body {
+    grid-template-columns: 1fr;
+    grid-template-rows: minmax(0, 1.1fr) minmax(190px, 1fr);
   }
 }
 
-/* short phones: squeeze chart stacks a little further */
-@media (max-width: 640px) and (max-height: 740px) {
-  .ch-bars,
-  .ch-line {
-    height: 96px !important;
-  }
-  .ch-donut {
-    --ch-size: 100px !important;
+/* narrow: the top bar centres, the counter leads, labels give way to icons */
+@media (max-width: 620px) {
+  .pres-top {
+    justify-content: center;
   }
-  .cols {
-    gap: 10px;
+  .pres-center {
+    order: -1;
+    width: 100%;
+    justify-content: center;
   }
-}
-
-/* ── Alignment guardrails ───────────────────────────────────────────
-   A structured block that stands alone on a slide reads off-center if
-   left at full bleed, so these self-center with sensible max-widths.
-   Inside a Split/Bento side they simply fill that side; an explicit
-   width/maxWidth on a wrapper still overrides. */
-.cmp {
-  max-width: 880px;
-  margin-inline: auto;
-}
-.accordion {
-  max-width: 760px;
-  margin-inline: auto;
-}
-/* Timeline: fit-content, not a fixed box — its content is ragged (rail +
-   variable text), so centering a fixed-width box still reads left-shifted.
-   Hugging the real content mass and centering THAT is what looks centered. */
-.tl {
-  width: fit-content;
-  max-width: min(640px, 100%);
-  margin-inline: auto;
-}
-.tabs {
-  max-width: 820px;
-  margin-inline: auto;
-}
-.tabs-bar-row {
-  display: flex;
-  justify-content: center;
-}
-
-/* ── Responsive collapse ────────────────────────────────────────── */
-@media (max-width: 900px) {
-  /* bento: 2-up compact tiles (first tile spans full width) so 5–6 tiles
-     still fit ONE phone screen — full-width stacking overflows the page */
-  .bento {
-    grid-template-columns: repeat(2, 1fr);
-    grid-auto-rows: auto;
-    gap: 10px;
-  }
-  .bento-cell,
-  .btile {
-    grid-column: auto;
-    grid-row: auto;
-  }
-  .bento > :first-child {
-    grid-column: 1 / -1;
-  }
-  .btile {
-    min-height: clamp(100px, 14vh, 150px);
-    padding: 16px 18px;
-  }
-  .btile-fig {
-    font-size: clamp(28px, 8vw, 44px);
-  }
-  .cmp-cell {
-    padding: 10px 10px;
-    font-size: 13.5px;
-  }
-  .pricing {
-    grid-template-columns: 1fr;
-    max-width: 420px;
-    gap: 12px;
+  .pres-timer,
+  .pres-right {
+    flex: 1;
   }
-  .tier {
-    padding: 18px 20px;
+  .pres-right {
+    justify-content: flex-end;
   }
-  /* a paged slide can't scroll — on phones only the crowned tier keeps its
-     feature list so three stacked tiers still fit one screen */
-  .tier:not(.hl) .tier-list {
+  .pres-clock {
     display: none;
   }
-  .steps {
-    grid-template-columns: 1fr;
-    gap: 18px;
+  .pres-time {
+    font-size: 26px;
   }
-  .step-line {
+}
+
+/* short window: the next-slide preview is the first thing to go, so the
+   notes keep a readable height */
+@media (max-height: 560px) {
+  .pres-next-wrap {
     display: none;
   }
-  .sec-ghost {
-    font-size: clamp(160px, 60vw, 300px);
-    right: -6vw;
-  }
-  .contrast {
-    grid-template-columns: 1fr;
-  }
-  .con-panel {
-    padding: 18px 20px;
-  }
-  .msg {
-    max-width: 92%;
-  }
-  .chat-body {
-    padding: 14px;
-    gap: 8px;
-  }
-  /* Team: 2-up compact cards so 4 people fit one phone screen */
-  .team {
-    grid-template-columns: repeat(2, 1fr);
-    gap: 10px;
-  }
-  .person {
-    padding: 16px 10px;
+  .pres-top,
+  .pres-bottom {
+    padding-top: 8px;
+    padding-bottom: 8px;
   }
-  .person-ava {
-    width: 54px;
-    font-size: 18px;
-    margin-bottom: 9px;
+  .pres-time {
+    font-size: 24px;
   }
-  .cols {
+  .pres-body {
+    padding: 10px clamp(10px, 2vw, 20px);
     gap: 12px;
   }
 }
 
-/* ═══════════════════════════════════════════════════════════════════
-   NAVIGATION CHROME — the Slidev-style floating glass dock + thumbnail
-   rail, ported to React. This is the UI to keep; restyle only via tokens.
-   ═══════════════════════════════════════════════════════════════════ */
-.noir-dock {
+/* Annotation overlay + tool bar */
+.ann-canvas {
   position: fixed;
-  bottom: 22px;
-  left: 50%;
-  transform: translateX(-50%);
-  z-index: 100;
-  opacity: 0.35;
-  transition: opacity 0.35s ease;
-  font-family: var(--font-ui);
-  overflow: visible;
+  inset: 0;
+  z-index: 88;
+  touch-action: none;
 }
-/* Shared anchor above the bar — notes, annotate, and future dock popovers. */
-.noir-dock-popover {
-  position: absolute;
-  bottom: calc(100% + 10px);
+.ann-bar {
+  /* Fallback when the dock popover host is not mounted yet. */
+  position: fixed;
+  bottom: 78px;
   left: 50%;
   transform: translateX(-50%);
-  z-index: 45;
-  /* Wider than the dock when needed (annotate tools); don't shrink-wrap to the bar. */
-  width: max-content;
-  max-width: 94vw;
+  z-index: 91;
   display: flex;
-  flex-direction: column;
   align-items: center;
-  gap: 8px;
-  pointer-events: none;
-}
-.noir-dock-popover > * {
-  pointer-events: auto;
-}
-.noir-dock.editor,
-.noir-dock.dragging {
-  opacity: 1;
+  gap: 3px;
+  padding: 6px 8px;
+  border-radius: 999px;
+  flex-wrap: wrap;
+  max-width: 94vw;
+  justify-content: center;
+  background: rgba(28, 28, 30, 0.72);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(22px) saturate(180%);
+  -webkit-backdrop-filter: blur(22px) saturate(180%);
+  box-shadow: 0 18px 50px -20px rgba(0, 0, 0, 0.8);
+  font-family: var(--font-body);
 }
-.noir-dock.placed {
+.noir-dock-popover .ann-bar {
+  position: relative;
   bottom: auto;
+  left: auto;
   transform: none;
-  visibility: visible;
-}
-.noir-dock:not(.placed) {
-  visibility: hidden;
-}
-.noir-dock.dragging {
-  transition: none;
-}
-.noir-dock:hover,
-.noir-dock:focus-within {
-  opacity: 1;
+  z-index: auto;
+  flex-wrap: nowrap;
+  max-width: none;
 }
-.noir-bar {
+.ann-group {
   display: flex;
   align-items: center;
-  gap: 4px;
-  padding: 6px 8px;
-  border-radius: 999px;
-  /* Same surface as notes / annotate popovers — DS dark --bgAlt (neutral[950]) */
-  background: var(--ed-bg-alt);
-  /* DS dark --borderPrimary (neutral[800]) */
-  border: 1px solid var(--ed-border);
-  backdrop-filter: blur(22px) saturate(180%);
-  -webkit-backdrop-filter: blur(22px) saturate(180%);
-  box-shadow: var(--ed-shadow-lg);
+  gap: 3px;
 }
-.noir-icon-btn {
-  width: 32px;
-  height: 32px;
+.ann-btn {
+  width: 34px;
+  height: 34px;
   display: grid;
   place-items: center;
   border: none;
-  border-radius: 50%;
+  border-radius: 999px;
   background: transparent;
-  color: var(--ed-text);
-  font-size: 18px;
+  color: #e8e8ea;
   cursor: pointer;
-  transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
+  transition: background 0.18s ease, color 0.18s ease, opacity 0.18s ease;
 }
-.noir-icon-btn:hover {
-  /* DS dark --bgTertiaryHover (neutral[800]) */
-  background: var(--ed-bg-tertiary-hover);
+.ann-btn svg {
+  width: 19px;
+  height: 19px;
 }
-.noir-icon-btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
+.ann-btn:hover:not(:disabled) {
+  background: rgba(255, 255, 255, 0.12);
 }
-.noir-icon-btn:disabled:hover {
-  background: transparent;
+.ann-btn:disabled {
+  opacity: 0.3;
+  cursor: default;
 }
-.noir-icon-btn.on {
+.ann-btn.on {
   color: var(--ed-on-brand);
   background: var(--ed-brand);
 }
-.noir-dock:hover .noir-icon-btn.danger,
-.noir-dock:focus-within .noir-icon-btn.danger,
-.noir-dock.dragging .noir-icon-btn.danger {
-  color: var(--ed-on-danger);
-  background: var(--ed-danger);
-}
-.noir-dock:hover .noir-icon-btn.danger:hover,
-.noir-dock:focus-within .noir-icon-btn.danger:hover,
-.noir-dock.dragging .noir-icon-btn.danger:hover {
-  background: var(--ed-danger-hover);
+.ann-bar :focus-visible,
+.ann-pop :focus-visible {
+  outline: 2px solid var(--ed-brand);
+  outline-offset: 2px;
 }
-.noir-icon-btn.sm {
-  width: 28px;
-  height: 28px;
-  font-size: 16px;
+.ann-sep {
+  width: 1px;
+  height: 22px;
+  background: rgba(255, 255, 255, 0.12);
+  margin: 0 5px;
 }
-.noir-icon-btn svg {
-  width: 1em;
-  height: 1em;
+
+/* current colour + size, opening the style popover */
+.ann-style {
+  position: relative;
+  display: flex;
 }
-.noir-grip {
-  width: 32px;
-  height: 32px;
+.ann-swatch {
+  width: 34px;
+  height: 34px;
   display: grid;
   place-items: center;
-  flex-shrink: 0;
   border: none;
-  padding: 0;
-  border-radius: 50%;
+  border-radius: 999px;
   background: transparent;
-  /* DS dark --textSecondary (neutral[300]) — above faint icon gray */
-  color: var(--ed-text-muted);
-  cursor: grab;
-  touch-action: none;
-  user-select: none;
-}
-.noir-grip:active {
-  cursor: grabbing;
-}
-.noir-grip svg {
-  width: 18px;
-  height: 18px;
-}
-.noir-sep {
-  width: 1px;
-  height: 22px;
-  background: var(--ed-divider);
-  margin: 0 4px;
+  cursor: pointer;
+  padding: 0;
+  transition: background 0.18s ease;
 }
-.noir-bar .dl-wrap {
-  flex: none;
+.ann-swatch:hover,
+.ann-swatch.on {
+  background: rgba(255, 255, 255, 0.12);
 }
-.noir-bar .dl-pop {
-  right: auto;
-  left: 0;
+.ann-swatch-dot {
+  display: block;
+  border-radius: 50%;
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35),
+    0 0 0 1px rgba(0, 0, 0, 0.25);
+  transition: width 0.15s ease, height 0.15s ease;
 }
-.noir-counter {
-  display: flex;
-  align-items: baseline;
-  gap: 5px;
-  padding: 0 12px;
-  font-feature-settings: 'tnum' 1;
-  user-select: none;
-  flex: none;
-  white-space: nowrap;
-}
-.noir-counter-now {
-  font-size: 16px;
-  font-weight: 600;
-  color: var(--ed-text);
-}
-.noir-counter-tot {
-  font-size: 13px;
-  color: var(--ed-text-faint);
-}
-
-/* Left thumbnail rail */
-.noir-rail {
-  position: fixed;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  width: 248px;
-  z-index: 95;
-  padding: 0 14px 26px;
-  overflow-y: auto;
-  background: rgb(17 17 20 / 0.92);
-  border-right: 1px solid var(--ed-border);
-  backdrop-filter: blur(26px) saturate(180%);
-  -webkit-backdrop-filter: blur(26px) saturate(180%);
-  font-family: var(--font-ui);
-  /* Fallback before Motion hydrates; the spring owns x after that. */
-  transform: translateX(-100%);
-}
-.noir-rail.open {
-  transform: translateX(0);
-}
-/* the head stays put while the thumbnails scroll under it */
-.noir-rail-head {
-  position: sticky;
-  top: 0;
-  z-index: 2;
-  margin: 0 -14px;
-  padding: 8px 16px 8px 20px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  background: transparent;
-}
-/* the glass lives on a layer whose OPACITY animates — fading a compositor layer
-   is smooth both ways, where animating backdrop-filter itself stutters. */
-.noir-rail-head::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
-  opacity: 0;
-  transition: opacity 0.16s ease-out;
-  background: rgb(17 17 20 / 0.44);
-  backdrop-filter: blur(20px) saturate(180%);
-  -webkit-backdrop-filter: blur(20px) saturate(180%);
-}
-.noir-rail-head.scrolled::before {
-  opacity: 1;
-}
-.noir-rail-head > * {
-  position: relative;
-  z-index: 1;
-}
-.noir-rail-title {
-  font-size: 12px;
-  font-weight: 600;
-  letter-spacing: 0.14em;
-  text-transform: uppercase;
-  color: var(--ed-text-faint);
-}
-.noir-rail-head .noir-icon-btn.sm {
-  width: 26px;
-  height: 26px;
-  font-size: 14px;
-}
-.noir-rail-list {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  padding-top: 8px;
-}
-.noir-thumb {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 0;
-  border: none;
-  background: transparent;
-  cursor: pointer;
-  text-align: left;
-}
-.noir-thumb-no {
-  width: 18px;
-  font-size: 12px;
-  font-feature-settings: 'tnum' 1;
-  color: var(--ed-icon-faint);
-  flex-shrink: 0;
-}
-.noir-thumb-frame {
-  flex: 1;
-  min-width: 0;
-  width: 100%;
-  height: auto;
-  border-radius: 9px;
-  overflow: hidden;
-  /* No border — border-box + aspect-ratio would shrink the content box off
-     16×9 and letterbox the scaled slide. Hover / active / sel use outline. */
-  border: none;
-  /* Transparent by default so outline-color doesn't interpolate from
-     currentColor (near-white text) on hover. */
-  outline: 1.5px solid transparent;
-  outline-offset: 0;
-  transition: outline-color 0.25s ease, outline-offset 0.25s ease,
-    outline-width 0.25s ease;
-  line-height: 0;
-  /* Fixed thumb chrome — do not follow the window aspect or rail thumbs
-     grow taller as the viewport narrows. */
-  aspect-ratio: 16 / 9;
-  position: relative;
-  background: var(--bg);
-}
-.noir-thumb:hover .noir-thumb-frame {
-  outline-color: var(--ed-border);
-}
-.noir-thumb.active .noir-thumb-no {
-  color: var(--ed-text);
-}
-.noir-thumb.active .noir-thumb-frame {
-  outline-color: var(--ed-text);
-}
-.noir-thumb.sel .noir-thumb-frame,
-.noir-thumb.sel:hover .noir-thumb-frame,
-.noir-thumb.active.sel .noir-thumb-frame,
-.noir-thumb:not(.noir-thumb-grid):focus-visible .noir-thumb-frame,
-.noir-thumb:not(.noir-thumb-grid):focus-visible:hover .noir-thumb-frame,
-.noir-thumb:not(.noir-thumb-grid).active:focus-visible .noir-thumb-frame {
-  outline-width: 2px;
-  outline-color: var(--ed-brand);
-  outline-offset: 3px;
-}
-.noir-thumb:focus,
-.noir-thumb:focus-visible {
-  outline: none;
-}
-/* Fixed 16×9 stage (1280×720) scaled into the frame — thumbs keep presentation
-   aspect instead of mirroring the live window. width/height/transform inline. */
-.noir-thumb-scale {
-  position: absolute;
-  top: 0;
-  left: 0;
-  transform-origin: top left;
-  pointer-events: none;
-}
-.noir-rail::-webkit-scrollbar {
-  width: 0;
-}
-.noir-rail {
-  scrollbar-width: none;
-}
-
-/* Grid overview — full-screen slide picker (G) */
-.noir-grid {
-  position: fixed;
-  inset: 0;
-  z-index: 98;
-  overflow-y: auto;
-  padding: 0 clamp(18px, 4vw, 54px) 96px;
-  background: rgb(17 17 20 / 0.92);
-  backdrop-filter: blur(26px) saturate(180%);
-  -webkit-backdrop-filter: blur(26px) saturate(180%);
-  font-family: var(--font-ui);
-}
-.noir-grid::-webkit-scrollbar {
-  width: 0;
-}
-.noir-grid {
-  scrollbar-width: none;
-}
-.noir-grid-head {
-  position: sticky;
-  top: 0;
-  z-index: 2;
-  margin: 0 clamp(-54px, -4vw, -18px);
-  padding: 10px clamp(18px, 4vw, 54px);
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  background: transparent;
-}
-.noir-grid-head::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
-  opacity: 0;
-  transition: opacity 0.16s ease-out;
-  background: rgb(17 17 20 / 0.42);
-  backdrop-filter: blur(20px) saturate(180%);
-  -webkit-backdrop-filter: blur(20px) saturate(180%);
-}
-.noir-grid-head.scrolled::before {
-  opacity: 1;
-}
-.noir-grid-head > * {
-  position: relative;
-  z-index: 1;
-}
-.noir-grid-head .noir-icon-btn.sm {
-  width: 26px;
-  height: 26px;
-  font-size: 14px;
-}
-.noir-grid-list {
-  padding: 6px 2px 10px;
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
-  gap: clamp(14px, 2vw, 26px);
-}
-.noir-thumb-grid {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  gap: 7px;
-}
-.noir-thumb-grid .noir-thumb-no {
-  width: auto;
-}
-.noir-thumb-shell {
-  position: relative;
-  min-width: 0;
-  width: 100%;
-}
-.noir-thumb-shell .noir-thumb {
-  width: 100%;
-}
-.noir-thumb-shell > .dl-wrap.noir-thumb-more {
-  position: absolute;
-  top: 8px;
-  right: 8px;
-  z-index: 2;
-  opacity: 0;
-  pointer-events: none;
-}
-.noir-thumb-shell:hover > .dl-wrap.noir-thumb-more,
-.noir-thumb-shell > .dl-wrap.noir-thumb-more:focus-within,
-.noir-thumb-shell > .dl-wrap.noir-thumb-more.open,
-.noir-thumb-shell.grid.active > .dl-wrap.noir-thumb-more,
-.noir-thumb-shell.grid.sel > .dl-wrap.noir-thumb-more {
-  opacity: 1;
-  pointer-events: auto;
-}
-.noir-thumb-shell > .dl-wrap.noir-thumb-more.open {
-  z-index: 8;
-}
-.noir-thumb-more-btn {
-  /* DS CloseButton ghost / icon-xs */
-  width: 28px;
-  height: 28px;
-  display: grid;
-  place-items: center;
-  border: none;
-  border-radius: 4px;
-  background: transparent;
-  color: var(--ed-text);
-  cursor: pointer;
-  transition: background 0.15s ease;
-}
-.noir-thumb-more-btn:hover,
-.noir-thumb-more-btn.on {
-  background: var(--ed-util-hover);
-  color: var(--ed-text);
-}
-.noir-thumb-more-btn:focus-visible {
-  outline: 2px solid var(--ed-brand-hover);
-  outline-offset: 0;
-}
-.noir-thumb-more-btn svg {
-  width: 20px;
-  height: 20px;
-}
-@media (max-width: 700px) {
-  .noir-grid-list {
-    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
-  }
-}
-
-/* ── Presenter console (/present?presenter=1) ──────────────────────────
-   A second-screen cockpit: live slide, what's next, notes at reading size,
-   stopwatch and clock. Its own screen — no slide behind it. */
-.pres {
-  position: fixed;
-  inset: 0;
-  z-index: 99;
-  display: flex;
-  flex-direction: column;
-  background: var(--ed-bg);
-  color: var(--ed-text);
-  font-family: var(--font-ui);
-}
-.pres-top {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 18px;
-  padding: 12px clamp(14px, 2vw, 26px);
-  border-bottom: 1px solid var(--ed-border);
-  background: var(--ed-bg-secondary);
-}
-.pres-timer,
-.pres-right {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-.pres-time {
-  font-size: clamp(26px, 3.2vw, 40px);
-  font-weight: 600;
-  line-height: 1;
-  letter-spacing: -0.02em;
-  font-feature-settings: 'tnum' 1;
-  color: var(--ed-text);
-  margin-right: 4px;
-}
-.pres-time.paused {
-  color: var(--ed-text-faint);
-}
-.pres-center {
-  display: flex;
-  align-items: baseline;
-  gap: 14px;
-}
-.pres-builds {
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.12em;
-  text-transform: uppercase;
-  color: var(--ed-brand);
-  padding: 3px 9px;
-  border-radius: 999px;
-  background: var(--ed-brand-bg-subtle);
-}
-.pres-clock {
-  font-size: 15px;
-  color: var(--ed-text-faint);
-  font-feature-settings: 'tnum' 1;
-}
-.pres-sep {
-  width: 1px;
-  height: 20px;
-  background: var(--ed-divider);
-  margin: 0 6px;
-}
-.pres-icon {
-  position: relative;
-  width: 32px;
-  height: 32px;
-  display: grid;
-  place-items: center;
-  border: none;
-  border-radius: 6px;
-  background: transparent;
-  color: var(--ed-icon-muted);
-  cursor: pointer;
-  transition: background 0.18s ease, color 0.18s ease, opacity 0.18s ease;
-}
-.pres-icon svg {
-  width: 16px;
-  height: 16px;
-  display: block;
-}
-.pres-timer .pres-icon.is-play svg {
-  /* triangle's optical center sits left of the viewBox midpoint */
-  transform: translateX(1px);
-}
-.pres-icon:hover:not(:disabled) {
-  background: var(--ed-util-hover);
-  color: var(--ed-text);
-}
-.pres-icon:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-.pres-icon-sub {
-  position: absolute;
-  right: 3px;
-  bottom: 2px;
-  font-size: 10px;
-  font-weight: 700;
-  line-height: 1;
-}
-.pres :focus-visible {
-  outline: 2px solid var(--ed-brand);
-  outline-offset: 2px;
-}
-
-.pres-body {
-  flex: 1;
-  min-height: 0;
-  display: grid;
-  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
-  gap: clamp(14px, 2vw, 28px);
-  padding: clamp(14px, 2vw, 26px);
-}
-/* The stage column stacks the live preview and up-next. The live preview
-   sizes from its width (16×9); leftover column height stays empty chrome. */
-.pres-stage {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  min-height: 0;
-  overflow-x: hidden;
-  overflow-y: auto;
-}
-.pres-label {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  flex: none;
-  min-width: 0;
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.14em;
-  text-transform: uppercase;
-  color: var(--ed-text-faint);
-}
-.pres-now,
-.pres-next {
-  border-radius: 12px;
-  overflow: hidden;
-  background: var(--bg);
-  border: 1px solid var(--ed-border);
-  box-shadow: var(--ed-shadow-lg);
-  /* Width-driven 16×9 — don't shrink or stretch with leftover column height. */
-  flex: none;
-  width: 100%;
-  aspect-ratio: 16 / 9;
-  display: flex;
-  justify-content: center;
-  align-items: stretch;
-}
-.pres-now .noir-thumb-frame,
-.pres-next .noir-thumb-frame {
-  width: 100%;
-  height: 100%;
-  max-width: 100%;
-  flex: none;
-  align-self: stretch;
-}
-.pres-next-wrap {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  flex: none;
-  min-width: 0;
-  width: 100%;
-}
-.pres-next {
-  padding: 0;
-  cursor: pointer;
-  opacity: 0.34;
-  transition: opacity 0.2s ease;
-}
-.pres-next:not(.pres-next-end):hover,
-.pres-next:focus-visible {
-  opacity: 1;
-}
-.pres-next-end {
-  display: grid;
-  place-items: center;
-  aspect-ratio: 16 / 9;
-  cursor: default;
-  color: var(--ed-text-faint);
-  font-size: 13px;
-  background: var(--ed-bg-secondary);
-}
-
-/* label above the box, exactly like "Current slide" — so both columns start
-   on the same line and their boxes align */
-.pres-notes-col {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  min-height: 0;
-}
-.pres-notes-box {
-  flex: 1;
-  min-height: 0;
-  display: flex;
-  flex-direction: column;
-  border-radius: 12px;
-  border: 1px solid var(--ed-border);
-  background: var(--ed-bg-secondary);
-  padding: 14px clamp(14px, 1.6vw, 22px);
-}
-.pres-notes-head {
-  justify-content: space-between;
-}
-.pres-notes {
-  flex: 1;
-  min-height: 0;
-  overflow-y: auto;
-  line-height: 1.55;
-  color: var(--ed-text);
-  padding-bottom: 14px;
-  scrollbar-width: thin;
-  scrollbar-color: var(--ed-border) transparent;
-}
-.pres-notes::-webkit-scrollbar {
-  width: 6px;
-}
-.pres-notes::-webkit-scrollbar-thumb {
-  background: var(--ed-border);
-  border-radius: 3px;
-}
-.pres-notes-empty {
-  color: var(--ed-text-faint);
-}
-/* ── notes typography + WYSIWYG (shared: presenter console + editor) ──
-   The same marks the deck speaks, rendered as prose. Both the read view and
-   the editable surface use these, so what you type is what you present. */
-.note-p,
-.note-wyg div {
-  margin: 0 0 0.75em;
-}
-.note-p:last-child {
-  margin-bottom: 0;
-}
-.note-h,
-.note-wyg h3 {
-  margin: 1.1em 0 0.45em;
-  font-family: var(--font-head);
-  font-size: 1.02em;
-  font-weight: 650;
-  letter-spacing: -0.01em;
-  color: #fff;
-}
-.note-h:first-child,
-.note-wyg h3:first-child {
-  margin-top: 0;
-}
-.note-list,
-.note-wyg ul,
-.note-wyg ol {
-  margin: 0 0 0.8em;
-  padding-left: 1.25em;
-}
-.note-list li,
-.note-wyg li {
-  margin-bottom: 0.35em;
-}
-.note-list li::marker,
-.note-wyg li::marker {
-  color: var(--primary);
-}
-.note-quote,
-.note-wyg blockquote {
-  margin: 0 0 0.8em;
-  padding: 0.5em 0 0.5em 0.85em;
-  border-left: 2px solid var(--primary);
-  color: #fff;
-  background: color-mix(in srgb, var(--primary) 8%, transparent);
-  border-radius: 0 8px 8px 0;
-}
-.note-quote p {
-  margin: 0;
-}
-.note-code,
-.note-wyg code {
-  font-family: var(--font-mono, ui-monospace, monospace);
-  font-size: 0.88em;
-  padding: 0.12em 0.4em;
-  border-radius: 5px;
-  background: rgba(255, 255, 255, 0.09);
-}
-
-.note-wyg-wrap {
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-  flex: 1;
-  gap: 8px;
-}
-/* one row of tools, identical everywhere the editor appears — in a narrow
-   container it scrolls sideways rather than reflowing into a different shape */
-.note-wyg-bar {
-  display: flex;
-  align-items: center;
-  gap: 2px;
-  flex-wrap: nowrap;
-  flex: none;
-  padding: 4px;
-  border-radius: 10px;
-  /* DS dark --bgAltHover (neutral[900]) — one step above the popover's --bgAlt */
-  background: var(--ed-bg-alt-hover);
-  border: none;
-  overflow-x: auto;
-  overflow-y: visible;
-  scrollbar-width: none;
-}
-.note-wyg-bar::-webkit-scrollbar {
-  height: 0;
-}
-.note-wyg-bar > * {
-  flex: none;
-}
-/* draggable when it overflows — a mouse can pan it, no trackpad needed */
-.note-wyg-bar {
-  cursor: grab;
-  touch-action: pan-x;
-}
-.note-wyg-bar:active {
-  cursor: grabbing;
-}
-.note-wyg-btn {
-  cursor: pointer;
-}
-.note-wyg-btn {
-  width: 28px;
-  height: 28px;
-  display: grid;
-  place-items: center;
-  border: none;
-  border-radius: 7px;
-  background: transparent;
-  color: #c7c7cc;
-  cursor: pointer;
-  transition: background 0.15s ease, color 0.15s ease;
-}
-.note-wyg-btn:hover {
-  background: rgba(255, 255, 255, 0.12);
-  color: #fff;
-}
-.note-wyg-btn.on {
-  background: rgba(255, 255, 255, 0.14);
-  color: #fff;
-}
-.note-wyg-sep {
-  width: 1px;
-  height: 18px;
-  background: rgba(255, 255, 255, 0.14);
-  margin: 0 4px;
-}
-
-/* colour + highlight palette, behind the A button */
-.note-wyg-pop-wrap {
-  position: relative;
-  display: flex;
-}
-.note-wyg-pop {
-  position: fixed;
-  z-index: 120;
-  width: max-content;
-  display: flex;
-  flex-direction: column;
-  gap: 5px;
-  padding: 10px 11px;
-  border-radius: 12px;
-  background: var(--ed-pop, rgba(28, 28, 30, 0.96));
-  border: 1px solid rgba(255, 255, 255, 0.12);
-  backdrop-filter: blur(22px) saturate(180%);
-  -webkit-backdrop-filter: blur(22px) saturate(180%);
-  box-shadow: 0 18px 50px -16px rgba(0, 0, 0, 0.8);
-  animation: note-pop-in 0.13s cubic-bezier(0.32, 0.72, 0, 1);
-}
-@keyframes note-pop-in {
-  from {
-    opacity: 0;
-    transform: translateY(-4px);
-  }
-}
-.note-wyg-pop-label {
-  font-size: 9.5px;
-  font-weight: 600;
-  letter-spacing: 0.14em;
-  text-transform: uppercase;
-  color: #8e8e93;
-}
-.note-wyg-pop-label:not(:first-child) {
-  margin-top: 4px;
-}
-.note-wyg-pop-row {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-.note-wyg-swatch {
-  width: 19px;
-  height: 19px;
-  padding: 0;
-  border-radius: 50%;
-  cursor: pointer;
-  border: 1px solid rgba(255, 255, 255, 0.28);
-  transition: transform 0.15s ease;
-}
-.note-wyg-swatch:hover {
-  transform: scale(1.15);
-}
-.note-wyg-swatch.is-accent-swatch {
-  background: var(--accent);
-  border-color: rgba(255, 255, 255, 0.5);
-}
-.note-wyg-swatch.is-hl {
-  border-radius: 5px;
-}
-.note-wyg-swatch.is-none {
-  border-radius: 5px;
-  background: linear-gradient(
-      to top right,
-      transparent calc(50% - 1px),
-      #ef4444 50%,
-      transparent calc(50% + 1px)
-    ),
-    rgba(255, 255, 255, 0.06);
-}
-
-/* highlighter — the one mark notes add on top of the deck's own */
-.note-hl,
-.note-wyg [data-hl] {
-  border-radius: 4px;
-  padding: 0.08em 0.26em;
-  margin: 0 -0.06em;
-  color: inherit;
-  -webkit-box-decoration-break: clone;
-  box-decoration-break: clone;
-}
-.note-wyg {
-  --note-pad-x: 10px;
-  --note-pad-y: 8px;
-  position: relative;
-  flex: 1;
-  min-height: 0;
-  overflow-y: auto;
-  line-height: 1.55;
-  color: #f0f0f2;
-  padding: var(--note-pad-y) var(--note-pad-x) 12px;
-  border-radius: 12px;
-  outline: none;
-  transition: box-shadow 0.15s ease, background 0.15s ease;
-}
-/* the focus ring is ours: rounded, and INSET so it can never crowd or spill
-   past the edge of whatever box the editor sits in */
-.note-wyg:focus,
-.note-wyg:focus-visible {
-  outline: none;
-  background: rgba(255, 255, 255, 0.03);
-  box-shadow: inset 0 0 0 1.5px
-    color-mix(in srgb, var(--ed-brand) 55%, transparent);
-}
-/* the placeholder sits UNDER the caret, not above the first line, so typing
-   replaces it instead of pushing it down */
-.note-wyg.is-empty::before {
-  content: attr(data-placeholder);
-  position: absolute;
-  pointer-events: none;
-  color: #5c5c61;
-  top: var(--note-pad-y);
-  left: var(--note-pad-x);
-  right: var(--note-pad-x);
-}
-
-.pres-bottom {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  gap: 10px;
-  padding: 12px clamp(14px, 2vw, 26px);
-  border-top: 1px solid rgba(255, 255, 255, 0.08);
-}
-.pres-pager {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 4px;
-}
-.pres-progress {
-  height: 4px;
-  border-radius: 999px;
-  background: rgba(255, 255, 255, 0.1);
-  overflow: hidden;
-}
-.pres-progress-fill {
-  height: 100%;
-  border-radius: 999px;
-  background: var(--accent);
-  transition: width 0.35s cubic-bezier(0.32, 0.72, 0, 1);
-}
-
-/* ── responsive: the console has to work in a half-screen window, a phone-
-   shaped one, and a short letterbox one ─────────────────────────────── */
-.pres-top {
-  flex-wrap: wrap;
-  row-gap: 8px;
-}
-.pres-timer,
-.pres-center,
-.pres-right {
-  min-width: 0;
-}
-
-/* one column: previews on top, notes below with a floor of their own */
-@media (max-width: 1000px) {
-  .pres-body {
-    grid-template-columns: 1fr;
-    grid-template-rows: minmax(0, 1.1fr) minmax(190px, 1fr);
-  }
-}
-
-/* narrow: the top bar centres, the counter leads, labels give way to icons */
-@media (max-width: 620px) {
-  .pres-top {
-    justify-content: center;
-  }
-  .pres-center {
-    order: -1;
-    width: 100%;
-    justify-content: center;
-  }
-  .pres-timer,
-  .pres-right {
-    flex: 1;
-  }
-  .pres-right {
-    justify-content: flex-end;
-  }
-  .pres-clock {
-    display: none;
-  }
-  .pres-time {
-    font-size: 26px;
-  }
-}
-
-/* short window: the next-slide preview is the first thing to go, so the
-   notes keep a readable height */
-@media (max-height: 560px) {
-  .pres-next-wrap {
-    display: none;
-  }
-  .pres-top,
-  .pres-bottom {
-    padding-top: 8px;
-    padding-bottom: 8px;
-  }
-  .pres-time {
-    font-size: 24px;
-  }
-  .pres-body {
-    padding: 10px clamp(10px, 2vw, 20px);
-    gap: 12px;
-  }
-}
-
-/* Annotation overlay + tool bar */
-.ann-canvas {
-  position: fixed;
-  inset: 0;
-  z-index: 88;
-  touch-action: none;
-}
-.ann-bar {
-  /* Fallback when the dock popover host is not mounted yet. */
-  position: fixed;
-  bottom: 78px;
-  left: 50%;
-  transform: translateX(-50%);
-  z-index: 91;
-  display: flex;
-  align-items: center;
-  gap: 3px;
-  padding: 6px 8px;
-  border-radius: 999px;
-  flex-wrap: wrap;
-  max-width: 94vw;
-  justify-content: center;
-  background: rgba(28, 28, 30, 0.72);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  backdrop-filter: blur(22px) saturate(180%);
-  -webkit-backdrop-filter: blur(22px) saturate(180%);
-  box-shadow: 0 18px 50px -20px rgba(0, 0, 0, 0.8);
-  font-family: var(--font-body);
-}
-.noir-dock-popover .ann-bar {
-  position: relative;
-  bottom: auto;
-  left: auto;
-  transform: none;
-  z-index: auto;
-  flex-wrap: nowrap;
-  max-width: none;
-}
-.ann-group {
-  display: flex;
-  align-items: center;
-  gap: 3px;
-}
-.ann-btn {
-  width: 34px;
-  height: 34px;
-  display: grid;
-  place-items: center;
-  border: none;
-  border-radius: 999px;
-  background: transparent;
-  color: #e8e8ea;
-  cursor: pointer;
-  transition: background 0.18s ease, color 0.18s ease, opacity 0.18s ease;
-}
-.ann-btn svg {
-  width: 19px;
-  height: 19px;
-}
-.ann-btn:hover:not(:disabled) {
-  background: rgba(255, 255, 255, 0.12);
-}
-.ann-btn:disabled {
-  opacity: 0.3;
-  cursor: default;
-}
-.ann-btn.on {
-  color: var(--ed-on-brand);
-  background: var(--ed-brand);
-}
-.ann-bar :focus-visible,
-.ann-pop :focus-visible {
-  outline: 2px solid var(--ed-brand);
-  outline-offset: 2px;
-}
-.ann-sep {
-  width: 1px;
-  height: 22px;
-  background: rgba(255, 255, 255, 0.12);
-  margin: 0 5px;
-}
-
-/* current colour + size, opening the style popover */
-.ann-style {
-  position: relative;
-  display: flex;
-}
-.ann-swatch {
-  width: 34px;
-  height: 34px;
-  display: grid;
-  place-items: center;
-  border: none;
-  border-radius: 999px;
-  background: transparent;
-  cursor: pointer;
-  padding: 0;
-  transition: background 0.18s ease;
-}
-.ann-swatch:hover,
-.ann-swatch.on {
-  background: rgba(255, 255, 255, 0.12);
-}
-.ann-swatch-dot {
-  display: block;
-  border-radius: 50%;
-  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35),
-    0 0 0 1px rgba(0, 0, 0, 0.25);
-  transition: width 0.15s ease, height 0.15s ease;
-}
-.ann-pop {
-  position: absolute;
-  bottom: calc(100% + 10px);
-  left: 50%;
-  transform: translateX(-50%);
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  padding: 11px 12px;
-  border-radius: 16px;
-  width: max-content;
-  background: rgba(28, 28, 30, 0.86);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  backdrop-filter: blur(22px) saturate(180%);
-  -webkit-backdrop-filter: blur(22px) saturate(180%);
-  box-shadow: 0 18px 50px -20px rgba(0, 0, 0, 0.85);
-  animation: ann-pop-in 0.14s cubic-bezier(0.32, 0.72, 0, 1);
-}
-@keyframes ann-pop-in {
-  from {
-    opacity: 0;
-    transform: translateX(-50%) translateY(4px);
-  }
-}
-.ann-pop-row {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-.ann-color {
-  width: 24px;
-  height: 24px;
-  border-radius: 50%;
-  border: 2px solid transparent;
-  cursor: pointer;
-  padding: 0;
-  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
-  transition: transform 0.15s ease, border-color 0.15s ease;
-}
-.ann-color:hover {
-  transform: scale(1.1);
-}
-.ann-color.on {
-  border-color: #fff;
-  transform: scale(1.1);
-}
-.ann-pop-sizes {
-  justify-content: space-between;
-}
-.ann-size {
-  width: 34px;
-  height: 30px;
-  display: grid;
-  place-items: center;
-  border: none;
-  background: transparent;
-  cursor: pointer;
-  border-radius: 9px;
-  transition: background 0.15s ease;
-}
-.ann-size span {
-  display: block;
-  border-radius: 50%;
-}
-.ann-size:hover {
-  background: rgba(255, 255, 255, 0.08);
-}
-.ann-size.on {
-  background: rgba(255, 255, 255, 0.14);
-}
-
-/* Hide / dim the UI (H key, or auto on idle in fullscreen) */
-.noir-dock.hidden {
-  opacity: 0 !important;
-  pointer-events: none;
-}
-.noir-dock:not(.placed).hidden {
-  transform: translateX(-50%) translateY(18px);
-}
-.noir-dock.hidden:focus-within {
-  opacity: 1 !important;
-  pointer-events: auto;
-}
-.noir-dock:not(.placed).hidden:focus-within {
-  transform: translateX(-50%) translateY(0);
-}
-.deck.nocursor,
-.deck.nocursor * {
-  cursor: none !important;
-}
-
-/* ── Marquee ─────────────────────────────────────────────────────── */
-.marquee {
-  width: 100%;
-  overflow: hidden;
-  -webkit-mask-image: linear-gradient(
-    90deg,
-    transparent,
-    #000 8%,
-    #000 92%,
-    transparent
-  );
-  mask-image: linear-gradient(
-    90deg,
-    transparent,
-    #000 8%,
-    #000 92%,
-    transparent
-  );
-}
-.marquee-track {
-  display: flex;
-  align-items: center;
-  gap: clamp(34px, 4vw, 54px);
-  width: max-content;
-  animation: marquee linear infinite;
-}
-.marquee:hover .marquee-track {
-  animation-play-state: paused;
-}
-.marquee-item {
-  font-size: clamp(20px, 2.4vw, 28px);
-  font-weight: 600;
-  letter-spacing: -0.02em;
-  white-space: nowrap;
-  color: var(--fg-muted);
-  opacity: 0.78;
-  transition: opacity var(--dur) var(--ease), color var(--dur) var(--ease);
-}
-.marquee-item:hover {
-  opacity: 1;
-  color: var(--fg);
-}
-.marquee-dot {
-  width: 5px;
-  height: 5px;
-  flex-shrink: 0;
-  transform: rotate(45deg);
-  border-radius: 1px;
-  background: color-mix(in srgb, var(--primary) 50%, transparent);
-}
-@keyframes marquee {
-  from {
-    transform: translateX(0);
-  }
-  to {
-    transform: translateX(-50%);
-  }
-}
-/* ── Responsive controls — declutter the dock on touch / small screens ─
-   On touch there's no hover, so keep the dock fully visible; on phones,
-   shrink it and drop the presenter-only tools (draw + presenter overlay). */
-@media (hover: none) {
-  .noir-dock {
-    opacity: 1;
-  }
-}
-@media (max-width: 640px) {
-  .noir-dock {
-    opacity: 1;
-    bottom: 14px;
-  }
-  .noir-bar {
-    gap: 2px;
-    padding: 6px 7px;
-  }
-  .noir-icon-btn {
-    width: 34px;
-    height: 34px;
-    font-size: 17px;
-  }
-  .noir-icon-btn.sm {
-    width: 28px;
-    height: 28px;
-  }
-  .noir-counter {
-    padding: 0 8px;
-  }
-  .noir-counter-now {
-    font-size: 15px;
-  }
-  .noir-sep {
-    margin: 0 2px;
-  }
-  .noir-optional {
-    display: none;
-  }
-  .noir-rail {
-    width: min(248px, 84vw);
-  }
-}
-
-/* ── Reduced motion ─────────────────────────────────────────────── */
-@media (prefers-reduced-motion: reduce) {
-  .slide-stage,
-  .slide::before,
-  .marquee-track,
-  .btile,
-  .btile::after,
-  .acc-item,
-  .acc-plus,
-  .acc-plus::before,
-  .acc-plus::after,
-  .stat-card,
-  .tab,
-  .ch-dot,
-  .ch-dot::before {
-    animation: none !important;
-    transition: none !important;
-  }
-  .ch-dot {
-    opacity: 1;
-  }
-  /* chrome too: panels, overlays and popovers appear instead of sliding */
-  .noir-rail,
-  .noir-grid,
-  .note-wyg-pop,
-  .share-modal,
-  .ann-pop,
-  .pres-progress-fill,
-  .share-toggle-knob,
-  .noir-rail-head::before,
-  .noir-grid-head::before {
-    transition: none !important;
-    animation: none !important;
-  }
-}
-
-/* A visible focus ring everywhere, not only where a component defined one. */
-:focus-visible {
-  outline: 2px solid var(--ed-brand);
-  outline-offset: 2px;
-  border-radius: 3px;
-}
-
-/* ── Poster: editorial split — headline top-left, copy bottom-left, visual
-   panel right with a centered label. No image → themed gradient wash. ── */
-.poster {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  width: 100%;
-  height: 100%;
-}
-.poster.flip .poster-body {
-  order: 2;
-}
-.poster-body {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  padding: var(--gutter-y) clamp(28px, 5vw, 72px) var(--gutter-y) var(--gutter);
-}
-.poster.flip .poster-body {
-  padding: var(--gutter-y) var(--gutter) var(--gutter-y) clamp(28px, 5vw, 72px);
-}
-.poster-title {
-  font-size: clamp(38px, 5.2vw, 68px);
-  max-width: 13ch;
-}
-.poster-caption {
-  max-width: 36ch;
-}
-.poster-media {
-  position: relative;
-  overflow: hidden;
-  display: flex;
-  justify-content: center;
-  align-items: flex-start;
-}
-.poster-media img {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-.poster-wash {
-  position: absolute;
-  inset: 0;
-  background: radial-gradient(
-      120% 90% at 30% 15%,
-      var(--bg-grad-1),
-      transparent 60%
-    ),
-    radial-gradient(110% 90% at 80% 90%, var(--bg-grad-2), transparent 55%),
-    var(--surface);
-}
-.poster-label {
-  position: relative;
-  z-index: 1;
-  margin-top: clamp(24px, 6vh, 52px);
-  text-align: center;
-  max-width: 30ch;
-}
-@media (max-width: 860px) {
-  .poster {
-    grid-template-columns: 1fr;
-    grid-template-rows: minmax(0, 1fr) auto;
-  }
-  .poster.flip .poster-body {
-    order: 0;
-  }
-  .poster-media {
-    min-height: 34vh;
-  }
-}
-
-/* ── Manifesto: editorial statement — label top-left, large paragraph in the
-   right column, top-aligned; the lower half stays empty by design. ── */
-.manifesto {
-  display: grid;
-  grid-template-columns: minmax(0, 0.55fr) minmax(0, 1fr);
-  gap: clamp(24px, 4vw, 64px);
-  width: 100%;
-  height: 100%;
-  padding: var(--gutter-y) var(--gutter);
-  align-items: start;
-  align-content: start;
-}
-.manifesto-label {
-  max-width: 24ch;
-  padding-top: 0.9em;
-}
-.manifesto-text {
-  font-family: var(--font-head);
-  font-size: clamp(22px, 2.7vw, 40px);
-  line-height: 1.45;
-  letter-spacing: -0.015em;
-  font-weight: 500;
-  max-width: none;
-}
-@media (max-width: 720px) {
-  .manifesto {
-    grid-template-columns: 1fr;
-    gap: 18px;
-  }
-}
-
-/* ── Figures: editorial stats — intro top-left, small-caps labels mid-slide,
-   giant figures anchored to the bottom edge. ── */
-.figures {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  width: 100%;
-  height: 100%;
-  padding: var(--gutter-y) var(--gutter);
-  gap: clamp(24px, 5vh, 56px);
-}
-.figures-title {
-  max-width: 24ch;
-}
-.figures-intro {
-  margin-top: clamp(12px, 2.4vh, 22px);
-  max-width: 46ch;
-}
-.figures-row {
-  display: grid;
-  grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr));
-  align-items: stretch;
-}
-.figures-cell {
-  display: flex;
-  flex-direction: column;
-  justify-content: end;
-  gap: clamp(18px, 9vh, 96px);
-  padding-inline: clamp(20px, 2.6vw, 46px);
-}
-.figures-cell:first-child {
-  padding-left: 0;
-}
-.figures-cell:last-child {
-  padding-right: 0;
-}
-.figures-cell + .figures-cell {
-  border-left: 1px solid var(--hair-2);
-}
-.figures-label {
-  max-width: 24ch;
-}
-.figures-value {
-  font-family: var(--font-head);
-  font-size: clamp(54px, 7.2vw, 108px);
-  font-weight: 600;
-  letter-spacing: -0.04em;
-  line-height: 0.92;
-  font-feature-settings: 'tnum' 1;
-}
-@media (max-width: 720px) {
-  .figures-row {
-    grid-template-columns: 1fr;
-    gap: 22px;
-  }
-  .figures-cell {
-    gap: 10px;
-    padding-inline: 0;
-  }
-  .figures-cell + .figures-cell {
-    border-left: none;
-    border-top: 1px solid var(--hair-2);
-    padding-top: 18px;
-  }
-}
-
-/* ── Speaker slide — label top-left, name + role mid-left, bio
-   anchored low; portrait fills the right's lower portion, bottom-aligned. ── */
-.speaker {
-  display: grid;
-  grid-template-columns: 1.1fr 1fr;
-  gap: clamp(24px, 4vw, 64px);
-  width: 100%;
-  height: 100%;
-  padding: var(--gutter-y) var(--gutter) 0 var(--gutter);
-}
-.speaker.flip .speaker-body {
-  order: 2;
-}
-.speaker-body {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  gap: clamp(16px, 3vh, 30px);
-  padding-bottom: var(--gutter-y);
-}
-.speaker-name {
-  font-size: clamp(38px, 5vw, 68px);
-  max-width: 14ch;
-}
-.speaker-role {
-  margin-top: clamp(10px, 2vh, 18px);
-  line-height: 1.6;
-}
-.speaker-bio {
-  color: var(--fg-muted);
-  font-size: clamp(14px, 1.25vw, 18px);
-  line-height: 1.6;
-  max-width: 44ch;
-}
-.speaker-media {
-  position: relative;
-  align-self: end;
-  overflow: hidden;
-  width: 100%;
-  height: 76%;
-  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
-}
-.speaker-media img {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-@media (max-width: 860px) {
-  .speaker {
-    grid-template-columns: 1fr;
-    grid-template-rows: minmax(0, 1fr) auto;
-  }
-  .speaker.flip .speaker-body {
-    order: 0;
-  }
-  .speaker-media {
-    height: 32vh;
-    align-self: stretch;
-  }
-}
-
-/* ── Story: kicker + headline top-left, fuller copy mid-left, image anchored
-   lower-right (inset within the gutters, ~60% height). ── */
-.story {
-  display: grid;
-  grid-template-columns: 1.05fr 1fr;
-  gap: clamp(24px, 4vw, 64px);
-  width: 100%;
-  height: 100%;
-  padding: var(--gutter-y) var(--gutter);
-}
-.story.flip .story-body {
-  order: 2;
-}
-.story-body {
-  display: flex;
-  flex-direction: column;
-}
-.story-title {
-  margin-top: clamp(14px, 2.6vh, 24px);
-  font-size: clamp(36px, 4.8vw, 64px);
-  max-width: 16ch;
-}
-.story-copy {
-  margin-top: clamp(18px, 4vh, 38px);
-  color: var(--fg-muted);
-  font-size: clamp(14px, 1.3vw, 19px);
-  line-height: 1.65;
-  max-width: 46ch;
-}
-.story-media {
-  position: relative;
-  align-self: end;
-  justify-self: stretch;
-  width: 100%;
-  height: 68%;
-}
-@media (max-width: 860px) {
-  .story {
-    grid-template-columns: 1fr;
-    grid-template-rows: minmax(0, 1fr) auto;
-  }
-  .story.flip .story-body {
-    order: 0;
-  }
-  .story-media {
-    height: 30vh;
-    align-self: stretch;
-  }
-}
-
-/* story media: two portrait images side by side (15px between), or one
-   larger image when the pair toggle is off */
-.story-media {
-  display: flex;
-  gap: 15px;
-}
-.story-img {
-  position: relative;
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  border-radius: var(--radius-lg);
-}
-.story-img img {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-/* ── Q&A: headline top-left, striped rows — question left, answer right. ── */
-.qa-title {
-  font-size: clamp(34px, 4.4vw, 58px);
-  max-width: 20ch;
-  margin-bottom: clamp(22px, 4vh, 42px);
-}
-.qa-rows {
-  display: flex;
-  flex-direction: column;
-}
-.qa-row {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: clamp(20px, 4vw, 72px);
-  padding: clamp(12px, 2.2vh, 20px) clamp(14px, 1.4vw, 22px);
-  border-radius: var(--radius-sm);
-}
-.qa-row:nth-child(odd) {
-  background: var(--surface);
-}
-.qa-q {
-  font-weight: 600;
-}
-.qa-a {
-  color: var(--fg-muted);
-}
-.qa-q,
-.qa-a {
-  display: flex;
-  gap: 12px;
-  align-items: baseline;
-  font-size: clamp(14px, 1.3vw, 19px);
-  line-height: 1.5;
-}
-.qa-mark {
-  flex-shrink: 0;
-  font-family: var(--font-mono);
-  font-size: 0.72em;
-  font-weight: 500;
-  color: var(--primary);
-  padding-top: 0.2em;
-}
-.qa-mark-a {
-  color: var(--fg-faint);
-}
-@media (max-width: 720px) {
-  .qa-row {
-    grid-template-columns: 1fr;
-    gap: 6px;
-  }
-}
-
-/* Q&A large variant: reference-scale rows that fill the slide */
-.qa-rows.large .qa-row {
-  padding: clamp(20px, 3.6vh, 34px) clamp(16px, 1.6vw, 26px);
-}
-.qa-rows.large .qa-q,
-.qa-rows.large .qa-a {
-  font-size: clamp(17px, 1.85vw, 27px);
-  line-height: 1.45;
-}
-.qa-rows.large + * {
-  margin-top: 0;
-}
-
-/* large Q&A also runs almost full width — the container cap lifts */
-.qa-wide .container {
-  max-width: none;
-}
-
-/* ── Pillars: headline top-left, numbered columns anchored low. ── */
-.pillars {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  width: 100%;
-  height: 100%;
-  padding: var(--gutter-y) var(--gutter);
-  gap: clamp(24px, 5vh, 56px);
-}
-.pillars-title {
-  font-size: clamp(34px, 4.6vw, 62px);
-  max-width: 22ch;
-}
-/* one shared set of rows across all columns: numbers, titles and bodies
-   each align on their own line no matter how the text wraps */
-.pillars-row {
-  display: grid;
-  grid-auto-flow: column;
-  grid-template-rows: auto auto auto;
-  grid-auto-columns: minmax(0, 1fr);
-  column-gap: clamp(24px, 3.4vw, 64px);
-  align-items: start;
-}
-.pillars-cell {
-  display: contents;
-}
-.pillars-no {
-  grid-row: 1;
-}
-.pillars-head {
-  grid-row: 2;
-}
-.pillars-body {
-  grid-row: 3;
-}
-.pillars-no {
-  font-family: var(--font-mono);
-  font-size: clamp(15px, 1.5vw, 22px);
-  color: var(--primary);
-  margin-bottom: clamp(20px, 6vh, 64px);
-}
-.pillars-head {
-  margin: 0 0 clamp(8px, 1.6vh, 14px);
-  font-size: clamp(17px, 1.7vw, 25px);
-  letter-spacing: -0.015em;
-}
-.pillars-body {
-  color: var(--fg-muted);
-  font-size: clamp(13px, 1.15vw, 17px);
-  line-height: 1.6;
-  max-width: 34ch;
-}
-@media (max-width: 720px) {
-  .pillars-row {
-    display: flex;
-    flex-direction: column;
-    gap: 22px;
-  }
-  .pillars-cell {
-    display: flex;
-    flex-direction: column;
-  }
-  .pillars-no {
-    margin-bottom: 8px;
-  }
-}
-
-/* pillars large variant */
-.pillars.large .pillars-no {
-  font-size: clamp(18px, 2vw, 30px);
-}
-.pillars.large .pillars-head {
-  font-size: clamp(22px, 2.4vw, 36px);
-}
-.pillars.large .pillars-body {
-  font-size: clamp(15px, 1.5vw, 23px);
-  max-width: 30ch;
-}
-
-/* ── table variants: corner labels + filled (inverted) header row ── */
-.tbl-labels {
-  display: flex;
-  justify-content: space-between;
-  align-items: baseline;
-  gap: 24px;
-  max-width: 880px;
-  margin: 0 auto clamp(12px, 2.2vh, 20px);
-  width: 100%;
-}
-.tbl-labels .kicker:last-child {
-  text-align: right;
-}
-.tbl-filled .dtable thead th {
-  background: var(--accent);
-  color: var(--accent-ink);
-  border-bottom-color: transparent;
-}
-.tbl-filled .dtable thead th.hl-col {
-  box-shadow: none;
-  color: var(--accent-ink);
-  background: var(--accent);
-  -webkit-text-fill-color: currentColor;
-}
-
-/* table large variant: near full-width, bigger cells */
-.tbl-large .dtable,
-.tbl-large .tbl-labels,
-.tbl-large .dtable-caption {
-  max-width: none;
-}
-.tbl-large .dtable table {
-  font-size: clamp(16px, 1.6vw, 23px);
-}
-.tbl-large .dtable th {
-  font-size: clamp(12px, 1.15vw, 15px);
-  padding: clamp(13px, 1.6vw, 20px) clamp(16px, 1.8vw, 24px);
-}
-.tbl-large .dtable td {
-  padding: clamp(13px, 1.6vw, 20px) clamp(16px, 1.8vw, 24px);
-}
-
-/* figures: optional small-caps caption under each giant figure */
-.figures-caption {
-  margin-top: clamp(10px, 1.8vh, 16px);
-  color: var(--fg-faint);
-  max-width: 24ch;
-}
-
-/* figures card variant: columns on material cards instead of open dividers */
-.figures-row.cards {
-  column-gap: clamp(16px, 2vw, 30px);
-  align-items: stretch;
-}
-.figures-row.cards .figures-cell {
-  border-radius: var(--radius);
-  padding: clamp(20px, 2.2vw, 34px);
-}
-.figures-row.cards .figures-cell:first-child {
-  padding-left: clamp(20px, 2.2vw, 34px);
-}
-.figures-row.cards .figures-cell:last-child {
-  padding-right: clamp(20px, 2.2vw, 34px);
-}
-.figures-row.cards .figures-cell + .figures-cell {
-  border-left: 1px solid var(--hair);
-}
-
-/* ── Persona: tall portrait left, headline + story right, tag at bottom. ── */
-.persona {
-  display: grid;
-  grid-template-columns: 1fr 1.15fr;
-  gap: clamp(28px, 4.5vw, 72px);
-  width: 100%;
-  height: 100%;
-  padding: var(--gutter-y) var(--gutter);
-}
-.persona.flip .persona-media {
-  order: 2;
-}
-.persona-media {
-  position: relative;
-  overflow: hidden;
-  border-radius: var(--radius-lg);
-}
-.persona-media img {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-.persona-body {
+.ann-pop {
+  position: absolute;
+  bottom: calc(100% + 10px);
+  left: 50%;
+  transform: translateX(-50%);
   display: flex;
   flex-direction: column;
-  min-width: 0;
-}
-.persona-title {
-  font-size: clamp(34px, 4.6vw, 62px);
-  max-width: 16ch;
-}
-.persona-copy {
-  margin-top: clamp(20px, 4.5vh, 44px);
-  color: var(--fg-muted);
-  font-size: clamp(14px, 1.3vw, 19px);
-  line-height: 1.65;
-  max-width: 44ch;
-}
-.persona-label {
-  margin-top: auto;
-  padding-top: clamp(16px, 3vh, 28px);
+  gap: 8px;
+  padding: 11px 12px;
+  border-radius: 16px;
+  width: max-content;
+  background: rgba(28, 28, 30, 0.86);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(22px) saturate(180%);
+  -webkit-backdrop-filter: blur(22px) saturate(180%);
+  box-shadow: 0 18px 50px -20px rgba(0, 0, 0, 0.85);
+  animation: ann-pop-in 0.14s cubic-bezier(0.32, 0.72, 0, 1);
 }
-@media (max-width: 860px) {
-  .persona {
-    grid-template-columns: 1fr;
-    grid-template-rows: auto minmax(0, 1fr);
-  }
-  .persona-media {
-    min-height: 30vh;
-    order: 0;
-  }
-  .persona.flip .persona-media {
-    order: 0;
+@keyframes ann-pop-in {
+  from {
+    opacity: 0;
+    transform: translateX(-50%) translateY(4px);
   }
 }
-
-/* chart: donut row (2–4 donuts side by side) */
-.donut-row {
-  display: flex;
-  justify-content: center;
-  gap: clamp(24px, 4vw, 72px);
-  flex-wrap: wrap;
-  margin-inline: auto;
-}
-.donut-cell {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  text-align: center;
-}
-.donut-cell .ch-donut {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-.donut-cell .ch-donut-label {
-  text-align: center;
-}
-
-/* ── Insight: chart + subtitle left, annotated takeaways right. ── */
-.insight {
-  display: grid;
-  grid-template-columns: 1.1fr 1fr;
-  gap: clamp(28px, 4.5vw, 76px);
-  width: 100%;
-  height: 100%;
-  padding: var(--gutter-y) var(--gutter);
-  align-items: center; /* both halves share the vertical center line */
-}
-.insight-chart {
+.ann-pop-row {
   display: flex;
-  flex-direction: column;
   align-items: center;
-  text-align: center;
-}
-.insight-title {
-  font-size: clamp(30px, 3.8vw, 52px);
-  max-width: 18ch;
-  margin-inline: auto;
-}
-.insight-sub {
-  margin-top: clamp(8px, 1.6vh, 14px);
-  color: var(--fg-muted);
-  font-size: clamp(13px, 1.15vw, 17px);
-  max-width: 40ch;
-  margin-inline: auto;
+  gap: 8px;
 }
-.insight-viz {
-  margin-top: clamp(20px, 4vh, 40px);
-  width: 100%;
-  display: flex;
-  justify-content: center;
+.ann-color {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  border: 2px solid transparent;
+  cursor: pointer;
+  padding: 0;
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
+  transition: transform 0.15s ease, border-color 0.15s ease;
 }
-.insight-viz > * {
-  width: 100%;
-  max-width: 560px;
+.ann-color:hover {
+  transform: scale(1.1);
 }
-.insight-viz .ch-donut {
-  width: auto;
+.ann-color.on {
+  border-color: #fff;
+  transform: scale(1.1);
 }
-.insight-points {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  gap: clamp(16px, 3vh, 28px);
+.ann-pop-sizes {
+  justify-content: space-between;
 }
-.insight-heading {
-  margin: 0 0 clamp(4px, 1vh, 10px);
-  font-size: clamp(18px, 1.8vw, 26px);
-  letter-spacing: -0.015em;
+.ann-size {
+  width: 34px;
+  height: 30px;
+  display: grid;
+  place-items: center;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  border-radius: 9px;
+  transition: background 0.15s ease;
 }
-.insight-point-label {
-  color: var(--primary);
-  margin-bottom: 6px;
+.ann-size span {
+  display: block;
+  border-radius: 50%;
 }
-.insight-point-body {
-  color: var(--fg-muted);
-  font-size: clamp(13px, 1.2vw, 17px);
-  line-height: 1.6;
-  max-width: 42ch;
+.ann-size:hover {
+  background: rgba(255, 255, 255, 0.08);
 }
-@media (max-width: 860px) {
-  .insight {
-    grid-template-columns: 1fr;
-  }
+.ann-size.on {
+  background: rgba(255, 255, 255, 0.14);
 }
 
-/* ── grouped bar chart: y-axis, gridlines, legend ── */
-.gch {
-  width: 100%;
-}
-.gch-legend {
-  display: flex;
-  justify-content: center;
-  gap: 22px;
-  margin-bottom: clamp(14px, 2.4vh, 24px);
-}
-.gch-key {
-  display: inline-flex;
-  align-items: center;
-  gap: 7px;
-  color: var(--fg-muted);
-  font-size: clamp(12px, 1vw, 14px);
-}
-.gch-key i {
-  width: 9px;
-  height: 9px;
-  border-radius: 3px;
-}
-.gch-plot {
-  display: flex;
-}
-.gch-axis {
-  position: relative;
-  width: 40px;
-  flex-shrink: 0;
-}
-.gch-tick {
-  position: absolute;
-  right: 10px;
-  transform: translateY(50%);
-  color: var(--fg-faint);
-  font-family: var(--font-mono);
-  font-size: 10.5px;
-  font-feature-settings: 'tnum' 1;
-}
-.gch-area {
-  position: relative;
-  flex: 1;
-  border-left: 1px solid var(--hair);
-  border-bottom: 1px solid var(--hair);
-}
-.gch-grid {
-  position: absolute;
-  left: 0;
-  right: 0;
-  height: 1px;
-  background: var(--hair-2);
-}
-.gch-groups {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  align-items: end;
-  justify-content: space-around;
-  gap: 8px;
-  padding: 0 3%;
-}
-.gch-group {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  height: 100%;
-  justify-content: end;
-  min-width: 0;
-  flex: 1;
-}
-.gch-bars {
-  display: flex;
-  align-items: end;
-  gap: 3px;
-  height: 100%;
-  width: 100%;
-  justify-content: center;
-}
-.gch-bar {
-  width: clamp(8px, 1.4vw, 22px);
-  border-radius: 4px 4px 0 0;
-}
-.gch-x {
-  position: absolute;
-  bottom: -26px;
-  color: var(--fg-muted);
-  font-size: clamp(10px, 0.9vw, 13px);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 100%;
-}
-.gch-group {
-  position: relative;
+/* Hide / dim the UI (H key, or auto on idle in fullscreen) */
+.noir-dock.hidden {
+  opacity: 0 !important;
+  pointer-events: none;
 }
-.gch-plot {
-  margin-bottom: 30px;
+.noir-dock:not(.placed).hidden {
+  transform: translateX(-50%) translateY(18px);
 }
-
-/* ── small multiples: a row of mini line charts, independent scales ── */
-.lines-row {
-  display: grid;
-  grid-auto-flow: column;
-  grid-auto-columns: minmax(0, 1fr);
-  gap: clamp(20px, 3vw, 48px);
+.noir-dock.hidden:focus-within {
+  opacity: 1 !important;
+  pointer-events: auto;
 }
-.lines-cell {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
+.noir-dock:not(.placed).hidden:focus-within {
+  transform: translateX(-50%) translateY(0);
 }
-.lines-label {
-  text-align: center;
-  color: var(--fg-muted);
-  font-size: clamp(12px, 1vw, 14.5px);
+.deck.nocursor,
+.deck.nocursor * {
+  cursor: none !important;
 }
 
-/* poster inset variant: the panel floats inside the gutters */
-.poster.inset {
-  padding: var(--gutter-y) var(--gutter);
-  gap: clamp(24px, 4vw, 64px);
-}
-.poster.inset .poster-body {
-  padding: 0;
+/* ── Responsive controls — declutter the dock on touch / small screens ─
+   On touch there's no hover, so keep the dock fully visible; on phones,
+   shrink it and drop the presenter-only tools (draw + presenter overlay). */
+@media (hover: none) {
+  .noir-dock {
+    opacity: 1;
+  }
 }
-.poster.inset .poster-media {
-  border-radius: var(--radius-lg);
-  overflow: hidden;
+@media (max-width: 640px) {
+  .noir-dock {
+    opacity: 1;
+    bottom: 14px;
+  }
+  .noir-bar {
+    gap: 2px;
+    padding: 6px 7px;
+  }
+  .noir-icon-btn {
+    width: 34px;
+    height: 34px;
+    font-size: 17px;
+  }
+  .noir-icon-btn.sm {
+    width: 28px;
+    height: 28px;
+  }
+  .noir-counter {
+    padding: 0 8px;
+  }
+  .noir-counter-now {
+    font-size: 15px;
+  }
+  .noir-sep {
+    margin: 0 2px;
+  }
+  .noir-optional {
+    display: none;
+  }
+  .noir-rail {
+    width: min(248px, 84vw);
+  }
 }
 
-/* single donut always sits dead-center */
-.chart-center {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-.ch-donut {
-  margin-inline: auto;
+/* ── Reduced motion ─────────────────────────────────────────────── */
+@media (prefers-reduced-motion: reduce) {
+  .slide-stage,
+  .slide::before {
+    animation: none !important;
+    transition: none !important;
+  }
+  /* chrome too: panels, overlays and popovers appear instead of sliding */
+  .noir-rail,
+  .noir-grid,
+  .note-wyg-pop,
+  .share-modal,
+  .ann-pop,
+  .pres-progress-fill,
+  .share-toggle-knob,
+  .noir-rail-head::before,
+  .noir-grid-head::before {
+    transition: none !important;
+    animation: none !important;
+  }
 }
 
-/* value labels on line points + grouped bars */
-.ch-pt-val {
-  position: absolute;
-  transform: translate(-50%, -160%);
-  color: var(--fg-muted);
-  font-family: var(--font-mono);
-  font-size: 10.5px;
-  font-feature-settings: 'tnum' 1;
-  opacity: 0;
-  transition: opacity 0.4s ease;
-  pointer-events: none;
-  white-space: nowrap;
-}
-.ch-pt-val.shown {
-  opacity: 1;
-}
-.gch-barwrap {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: end;
-  height: 100%;
-}
-.gch-val {
-  color: var(--fg-muted);
-  font-family: var(--font-mono);
-  font-size: 9.5px;
-  font-feature-settings: 'tnum' 1;
-  margin-bottom: 3px;
-  white-space: nowrap;
+/* A visible focus ring everywhere, not only where a component defined one. */
+:focus-visible {
+  outline: 2px solid var(--ed-brand);
+  outline-offset: 2px;
+  border-radius: 3px;
 }
diff --git a/bolt-slides/src/styles/tokens.css b/bolt-slides/src/styles/tokens.css
index 0e3ee2f..ec385ba 100644
--- a/bolt-slides/src/styles/tokens.css
+++ b/bolt-slides/src/styles/tokens.css
@@ -1,58 +1,24 @@
 /* ===================================================================
-   THEME TOKENS — edit ONLY this :root block to re-theme the whole deck.
-   The SAME token vocabulary as the `slides` (Slidev) and `webdeck` skills,
-   so a brand looks identical across all of them. The values below are a
-   "dark product" default — REPLACE them to match the brief or the brand.
+   DECK TOKENS — the few values the shell reads for a deck.
+   They are fallbacks, not a theme: the slide surface (`--bg`), the text
+   color the slide box inherits (`--fg`), the color the `==accent==` text
+   marker and deck-level `accent` use, the fonts that deck-level `font`
+   swaps, and the gutters `<Slide>` pads with. Set them to the deck's
+   own design, or ignore them and style each slide component directly.
    =================================================================== */
 :root {
-  /* Surfaces — atmosphere / glow mix from --accent so a deck accent
-     override retints washes without rewriting these. */
-  --bg: #06080d;
-  --bg-grad-1: color-mix(in srgb, var(--accent) 10%, transparent);
-  --bg-grad-2: color-mix(in srgb, var(--accent) 6%, transparent);
-  --surface: rgba(255, 255, 255, 0.045);
-  --surface-2: rgba(255, 255, 255, 0.07);
+  --bg: #ffffff;
+  --fg: #111111;
 
-  /* Ink */
-  --fg: #f2f5f9;
-  --fg-muted: #9aa3b2;
-  --fg-faint: #5f6a7b;
+  --accent: #111111;
+  --primary: var(--accent);
 
-  /* Hairlines */
-  --hair: rgba(255, 255, 255, 0.1);
-  --hair-2: rgba(255, 255, 255, 0.06);
+  --font-head: system-ui, -apple-system, 'Segoe UI', sans-serif;
+  --font-body: system-ui, -apple-system, 'Segoe UI', sans-serif;
+  --font-mono: ui-monospace, 'SF Mono', Menlo, monospace;
 
-  /* Accent — ONE accent, SOLID (no gradients). */
-  --primary: #1688fc;
-  --accent: #1688fc;
-  --accent-ink: #ffffff;
-
-  /* Radius */
-  --radius: 22px;
-  --radius-sm: 12px;
-  --radius-lg: 26px;
-
-  /* Depth */
-  --shadow: 0 50px 120px -50px rgba(0, 0, 0, 0.9);
-  --glow: 0 30px 80px -40px color-mix(in srgb, var(--accent) 45%, transparent);
-
-  /* Type */
-  --font-head: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display',
-    sans-serif;
-  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text',
-    sans-serif;
-  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
-
-  /* Motion */
-  --dur: 0.4s;
   --ease: cubic-bezier(0.32, 0.72, 0, 1);
-  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
-
-  /* Atmosphere */
-  --grain: 0.035;
-  --vignette: rgba(0, 0, 0, 0.22);
 
-  /* Responsive gutter — fluid side / vertical padding */
-  --gutter: clamp(28px, 6vw, 120px);
-  --gutter-y: clamp(40px, 8vh, 96px);
+  --gutter: clamp(24px, 6cqw, 96px);
+  --gutter-y: clamp(24px, 6cqh, 72px);
 }