From 44f61284e9448d94d864871b01f4d93d0cf3f438 Mon Sep 17 00:00:00 2001
From: inkko44 <do@inkko.ca>
Date: Tue, 29 Sep 2026 10:31:17 -0400
Subject: [PATCH 01/14] feat(bolt-slides): remove starter layouts; free-form
 responsive slides (BOU-2910)

Slides are now React components authored per deck in src/slides/ and
referenced from deck.json by filename (import.meta.glob registry in
src/slide/registry.tsx). The 30-layout catalog (src/layouts, src/components,
src/data/layoutProps.ts) and its ~2,400 lines of layout-only CSS are gone.

The studio, dock, rail, grid, notes, Present, speaker view, PDF/JSON
download and deck.json persistence are unchanged and render component
slides through the same SlideView path.

SKILL.md, .bolt/prompt and README now describe the deck.json <-> component
contract and the shell; the layout menu and styling rules are dropped.
The single design constraint is that every slide must be responsive.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 bolt-slides/.bolt/prompt                  |    4 +-
 bolt-slides/.bolt/skills/slides/SKILL.md  |  328 +-
 bolt-slides/README.md                     |   57 +-
 bolt-slides/deck.json                     |  113 +-
 bolt-slides/eslint.config.js              |    6 +-
 bolt-slides/src/components/Accordion.tsx  |   63 -
 bolt-slides/src/components/Agenda.tsx     |   73 -
 bolt-slides/src/components/Bento.tsx      |  129 -
 bolt-slides/src/components/BigNumber.tsx  |   41 -
 bolt-slides/src/components/Charts.tsx     |  389 --
 bolt-slides/src/components/Chat.tsx       |   60 -
 bolt-slides/src/components/CodeWindow.tsx |  100 -
 bolt-slides/src/components/Comparison.tsx |   93 -
 bolt-slides/src/components/Contrast.tsx   |  111 -
 bolt-slides/src/components/CountUp.tsx    |   84 -
 bolt-slides/src/components/Cover.tsx      |   56 -
 bolt-slides/src/components/Marquee.tsx    |   34 -
 bolt-slides/src/components/Pricing.tsx    |  108 -
 bolt-slides/src/components/Quote.tsx      |   78 -
 bolt-slides/src/components/Section.tsx    |   46 -
 bolt-slides/src/components/StatGrid.tsx   |   71 -
 bolt-slides/src/components/Steps.tsx      |   87 -
 bolt-slides/src/components/Table.tsx      |  104 -
 bolt-slides/src/components/Tabs.tsx       |   83 -
 bolt-slides/src/components/Team.tsx       |   96 -
 bolt-slides/src/components/Timeline.tsx   |   45 -
 bolt-slides/src/data/layoutProps.ts       |  344 --
 bolt-slides/src/data/types.ts             |    4 +-
 bolt-slides/src/layouts/blocks.tsx        |  385 --
 bolt-slides/src/layouts/core.tsx          |  218 -
 bolt-slides/src/layouts/grids.tsx         |  499 ---
 bolt-slides/src/layouts/media.tsx         |  525 ---
 bolt-slides/src/layouts/registry.tsx      |   68 -
 bolt-slides/src/layouts/shared.tsx        |  133 -
 bolt-slides/src/present/PresentApp.tsx    |    4 +-
 bolt-slides/src/slide/SlideView.tsx       |    4 +-
 bolt-slides/src/slide/registry.tsx        |   52 +
 bolt-slides/src/slides/welcome.tsx        |   23 +
 bolt-slides/src/styles/base.css           | 4523 +++++----------------
 39 files changed, 1331 insertions(+), 7910 deletions(-)
 delete mode 100644 bolt-slides/src/components/Accordion.tsx
 delete mode 100644 bolt-slides/src/components/Agenda.tsx
 delete mode 100644 bolt-slides/src/components/Bento.tsx
 delete mode 100644 bolt-slides/src/components/BigNumber.tsx
 delete mode 100644 bolt-slides/src/components/Charts.tsx
 delete mode 100644 bolt-slides/src/components/Chat.tsx
 delete mode 100644 bolt-slides/src/components/CodeWindow.tsx
 delete mode 100644 bolt-slides/src/components/Comparison.tsx
 delete mode 100644 bolt-slides/src/components/Contrast.tsx
 delete mode 100644 bolt-slides/src/components/CountUp.tsx
 delete mode 100644 bolt-slides/src/components/Cover.tsx
 delete mode 100644 bolt-slides/src/components/Marquee.tsx
 delete mode 100644 bolt-slides/src/components/Pricing.tsx
 delete mode 100644 bolt-slides/src/components/Quote.tsx
 delete mode 100644 bolt-slides/src/components/Section.tsx
 delete mode 100644 bolt-slides/src/components/StatGrid.tsx
 delete mode 100644 bolt-slides/src/components/Steps.tsx
 delete mode 100644 bolt-slides/src/components/Table.tsx
 delete mode 100644 bolt-slides/src/components/Tabs.tsx
 delete mode 100644 bolt-slides/src/components/Team.tsx
 delete mode 100644 bolt-slides/src/components/Timeline.tsx
 delete mode 100644 bolt-slides/src/data/layoutProps.ts
 delete mode 100644 bolt-slides/src/layouts/blocks.tsx
 delete mode 100644 bolt-slides/src/layouts/core.tsx
 delete mode 100644 bolt-slides/src/layouts/grids.tsx
 delete mode 100644 bolt-slides/src/layouts/media.tsx
 delete mode 100644 bolt-slides/src/layouts/registry.tsx
 delete mode 100644 bolt-slides/src/layouts/shared.tsx
 create mode 100644 bolt-slides/src/slide/registry.tsx
 create mode 100644 bolt-slides/src/slides/welcome.tsx

diff --git a/bolt-slides/.bolt/prompt b/bolt-slides/.bolt/prompt
index 4772365..7548f03 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`. 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..49ab215 100644
--- a/bolt-slides/.bolt/skills/slides/SKILL.md
+++ b/bolt-slides/.bolt/skills/slides/SKILL.md
@@ -1,82 +1,116 @@
 ---
 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
+  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)
-
-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.
-
-## Workflow
-
-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.
-
-`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` `""`.
-
-4. Ask the user to look at the studio to see the result: side panel
-   or grid to reorder / duplicate / delete, notes, Present, Download.
-
-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.
-
-## Deck JSON
+# Slides — write the slides, the studio does the rest
+
+This repo is a complete slide **studio**. You author the slides into it.
+
+- `/` — 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.
+
+**Your job is the slides.** Three files matter:
+
+1. `src/slides/<name>.tsx` — one React component per slide (default
+   export). Free-form: any markup, inline styles, a `<style>` block, SVG,
+   motion. No new npm dependencies.
+2. `deck.json` — the ordered list of slides. Each entry's `layout` is the
+   component's filename without `.tsx`.
+3. `src/styles/tokens.css` — the theme (optional; see Theming).
+
+Everything else is the shell — `src/deck`, `src/studio`, `src/present`,
+`src/export`, `src/copy`, `src/data`, `src/slide`, `src/styles/base.css`,
+`src/styles/chrome*.css`, `vite.config.ts`. Leave it alone. If the user
+asks for a studio or engine change, say so and wait.
+
+## The one design rule: every slide is responsive
+
+A slide is a full-viewport 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 look
+right at all of them.
+
+- **Fluid sizing.** `clamp()`, `%`, `vw`/`vh`, `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-viewport fallback (`@media (max-width: 900px)`).
+- **Nothing overflows or scrolls.** A paged slide cannot scroll; what
+  doesn't fit is cut off. Size each slide's content to one screen at every
+  viewport, and let long text wrap (`max-width` in `ch`, no `nowrap`).
+- **Check narrow and wide.** Before you finish, look at ~390px wide and
+  at ≥1440px. The rail and grid render the real component, so they show
+  breakage too.
+
+Content, structure, hierarchy, color, type, imagery and motion are yours to
+design for *this* deck and *this* brand. Nothing in the shell constrains
+them.
+
+## Slide component contract
+
+```tsx
+// src/slides/problem.tsx
+import Slide from '@/deck/Slide';
+import Reveal from '@/deck/Reveal';
+import Build from '@/deck/Build';
+import type { SlideComponent } from '@/slide/registry';
+
+const Problem: SlideComponent = ({ slide }) => (
+  <Slide>
+    <Reveal>
+      <div className="kicker">The problem</div>
+      <h2 className="headline">Forty dashboards, zero answers.</h2>
+    </Reveal>
+    <Build at={1}>
+      <p className="lead">Analysts spend the week answering the same question.</p>
+    </Build>
+  </Slide>
+);
+
+export default Problem;
+```
 
-Repo-root `deck.json`:
+- The component is rendered inside a box that fills the slide (100% ×
+  100% of the stage). `<Slide>` from `@/deck/Slide` is an optional root
+  that applies the theme gutters, `center` (centered stack) and `full`
+  (edge-to-edge, no padding). Any root element that fills the box works.
+- `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), the theme tokens (`var(--bg)`, `--fg`, `--fg-muted`,
+  `--accent`, `--surface`, `--hair`, `--radius`, `--font-head`,
+  `--font-body`, `--gutter`), and the fluid type atoms in `base.css`
+  (`.display .headline .lead .subhead .kicker .foot .figure .accent-text`)
+  plus `.cols` (equal columns that wrap).
+- 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.
+- Motion (`motion/react`) is already a dependency. Respect
+  `prefers-reduced-motion` for anything that loops.
+
+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
 {
@@ -85,105 +119,73 @@ Repo-root `deck.json`:
   "deck": {
     "title": "Acme — Series A",
     "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": "inter",             // optional: inter | space | sora | manrope | dm | outfit | playfair | fraunces
+    "accent": "#1688FC"          // optional deck-wide accent (a solid color)
   },
   "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": "cover",         // src/slides/cover.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. `{"type":"color","color":"var(--bg)"}`
+  is the theme 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 background is painted
+  under your component; the component decides what goes on top.
+- `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.
+
+## Workflow
+
+1. Ground the deck in the user's real input — topic, brand, facts,
+   numbers. Never invent a placeholder company for a real subject. Brand
+   given → derive colors / fonts from it and say what you used.
+2. Bootstrap `boltSlidesId` (above).
+3. Theme if needed (`deck.accent` / `deck.font`, or `tokens.css`).
+4. Write one component per slide into `src/slides/`, then the matching
+   `deck.json` entries, with speaker `notes` where they help.
+5. `npm run typecheck` and `npm run build` must pass. 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.
+
+## Theming (`src/styles/tokens.css`)
+
+Prefer the deck-level `accent` and `font` over editing tokens. For deeper
+theming, every `:root` value in `tokens.css` is yours to change — colors,
+surfaces, radius, shadows, fonts, motion, gutters. Change values, not
+variable names: the shell reads them (dock, thumbnails, atmosphere).
+`--accent` must be a color value (the atmosphere derives washes from it
+with `color-mix`). Dark is the default; for a light deck set `--bg` /
+`--fg` and `html { color-scheme: light }` in `base.css`. Deck-level
+`font` loads Google Fonts pairings automatically; for any other font, add
+its `@import` to `base.css` and set `--font-head` / `--font-body`.
diff --git a/bolt-slides/README.md b/bolt-slides/README.md
index 97c5bdc..69febe5 100644
--- a/bolt-slides/README.md
+++ b/bolt-slides/README.md
@@ -1,12 +1,16 @@
 # 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: 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 +21,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 +38,35 @@ 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 theme (`:root` values).
 
 ## 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/present/            audience / speaker routes
+src/export/             PDF export
+src/copy/               rich text + in-place text edit persist
 src/styles/tokens.css   theme: edit :root values only
 ```
 
 ## Theming
 
-Everything visual derives from the `:root` tokens in `src/styles/tokens.css`.
-`--accent` must stay a solid color.
+Everything the shell paints derives from the `:root` tokens in
+`src/styles/tokens.css`. `--accent` must stay a color value (the
+atmosphere mixes from it).
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/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/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..fab71da 100644
--- a/bolt-slides/src/slide/SlideView.tsx
+++ b/bolt-slides/src/slide/SlideView.tsx
@@ -5,7 +5,7 @@ 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';
 
 function BackgroundLayer({ bg }: { bg: Background | undefined }) {
   const base = { position: 'absolute', inset: 0, zIndex: 0 } as const;
@@ -130,7 +130,7 @@ export default function SlideView({
     slide.props?.scale === 'xl' ? 1.3 : slide.props?.scale === 'lg' ? 1.15 : 1;
   let content: ReactNode = (
     <SlideBoundary>
-      <RenderLayout slide={slide} />
+      <RenderSlide slide={slide} />
     </SlideBoundary>
   );
 
diff --git a/bolt-slides/src/slide/registry.tsx b/bolt-slides/src/slide/registry.tsx
new file mode 100644
index 0000000..2d02b94
--- /dev/null
+++ b/bolt-slides/src/slide/registry.tsx
@@ -0,0 +1,52 @@
+import type { ComponentType } from 'react';
+import type { SlideData } from '../data/types';
+
+/** 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">
+        <div className="kicker" style={{ marginBottom: 12 }}>
+          Missing slide component
+        </div>
+        <h2 className="headline">“{name || '(empty)'}”</h2>
+        <p className="subhead" style={{ marginTop: 16 }}>
+          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/slides/welcome.tsx b/bolt-slides/src/slides/welcome.tsx
new file mode 100644
index 0000000..cdd7e35
--- /dev/null
+++ b/bolt-slides/src/slides/welcome.tsx
@@ -0,0 +1,23 @@
+import Slide from '@/deck/Slide';
+import Reveal from '@/deck/Reveal';
+import type { SlideComponent } from '@/slide/registry';
+
+/* Seed slide. Delete this file once the deck has its own slides. */
+const Welcome: SlideComponent = () => (
+  <Slide center>
+    <Reveal>
+      <div className="kicker" style={{ marginBottom: 'clamp(12px, 2vh, 20px)' }}>
+        Bolt Slides
+      </div>
+      <h1 className="display">
+        Your deck <span className="accent-text">starts here.</span>
+      </h1>
+      <p className="subhead" style={{ marginTop: 'clamp(14px, 2.5vh, 24px)' }}>
+        Ask Bolt for a deck. Every slide becomes a React component in
+        src/slides/, listed in deck.json.
+      </p>
+    </Reveal>
+  </Slide>
+);
+
+export default Welcome;
diff --git a/bolt-slides/src/styles/base.css b/bolt-slides/src/styles/base.css
index 575b5f1..fd768ed 100644
--- a/bolt-slides/src/styles/base.css
+++ b/bolt-slides/src/styles/base.css
@@ -192,8 +192,7 @@ strong {
 /* 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 {
+.slide-view.has-image .foot {
   color: rgba(255, 255, 255, 0.78);
 }
 .slide-view.has-image .subhead,
@@ -227,3741 +226,1301 @@ strong {
   background: linear-gradient(90deg, var(--primary), transparent);
 }
 
-/* ═══ 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;
 }
-.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-sep {
+  width: 1px;
+  height: 22px;
+  background: var(--ed-divider);
+  margin: 0 4px;
 }
-.stat-card .tick {
-  margin-bottom: 8px;
+.noir-bar .dl-wrap {
+  flex: none;
 }
-.stat-value {
-  font-size: clamp(40px, 4.6vw, 58px);
-  font-weight: 600;
-  letter-spacing: -0.04em;
-  line-height: 1;
+.noir-bar .dl-pop {
+  right: auto;
+  left: 0;
+}
+.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 {
-  display: flex;
+/* 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;
-  border: none;
-  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);
-  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 {
-  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 {
-  position: relative;
-  width: 22px;
-  height: 22px;
-  flex-shrink: 0;
-  transition: transform 0.4s var(--ease-spring);
 }
-.acc-plus::before,
-.acc-plus::after {
+/* 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;
-  top: 50%;
-  left: 50%;
-  background: var(--fg-faint);
-  border-radius: 2px;
-  transition: background var(--dur) var(--ease);
-}
-.acc-plus::before {
-  width: 14px;
-  height: 1.8px;
-  transform: translate(-50%, -50%);
-}
-.acc-plus::after {
-  width: 1.8px;
-  height: 14px;
-  transform: translate(-50%, -50%);
-}
-.acc-item.open .acc-plus {
-  transform: rotate(45deg);
-}
-.acc-item.open .acc-plus::before,
-.acc-item.open .acc-plus::after {
-  background: var(--primary);
-}
-.acc-body {
-  overflow: hidden;
-}
-.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;
-}
-
-/* ═══ State-of-the-art sections ═════════════════════════════════════ */
-
-/* Comparison (us vs them) */
-.cmp {
-  width: 100%;
-  border-radius: var(--radius);
-  overflow: hidden;
-}
-.cmp-row {
-  display: grid;
-  grid-template-columns: 1.6fr repeat(var(--vcols, 2), 1fr);
-  align-items: stretch;
-}
-.cmp-row + .cmp-row {
-  border-top: 1px solid var(--hair-2);
-}
-.cmp-cell {
-  padding: clamp(12px, 1.5vw, 18px) clamp(14px, 1.6vw, 22px);
-  font-size: clamp(14px, 1.5vw, 17px);
-  color: var(--fg-muted);
-  display: flex;
-  align-items: center;
+  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%);
 }
-.cmp-cell:not(.cmp-label):not(.cmp-h) {
-  justify-content: center;
+.noir-rail-head.scrolled::before {
+  opacity: 1;
 }
-.cmp-head {
-  background: var(--surface-2);
+.noir-rail-head > * {
+  position: relative;
+  z-index: 1;
 }
-.cmp-h {
+.noir-rail-title {
+  font-size: 12px;
   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;
-}
-/* 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);
-}
-.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);
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--ed-text-faint);
 }
-.cmp-chip {
+.noir-rail-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-rail-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding-top: 8px;
 }
-.cmp-chip.no {
-  color: var(--fg-faint);
-  background: var(--surface);
-  border: 1px solid var(--hair-2);
-  opacity: 0.75;
+.noir-thumb {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  text-align: left;
 }
-.cmp-val {
+.noir-thumb-no {
+  width: 18px;
+  font-size: 12px;
   font-feature-settings: 'tnum' 1;
+  color: var(--ed-icon-faint);
+  flex-shrink: 0;
 }
-
-/* 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-frame {
+  flex: 1;
+  min-width: 0;
   width: 100%;
-  max-width: 880px;
-  margin-inline: auto;
-  border-radius: var(--radius);
+  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);
 }
-.dtable table {
-  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;
-}
-.dtable td:first-child {
-  color: var(--fg);
-  font-weight: 500;
+.noir-thumb:hover .noir-thumb-frame {
+  outline-color: var(--ed-border);
 }
-.dtable .al-l {
-  text-align: left;
+.noir-thumb.active .noir-thumb-no {
+  color: var(--ed-text);
 }
-.dtable .al-c {
-  text-align: center;
+.noir-thumb.active .noir-thumb-frame {
+  outline-color: var(--ed-text);
 }
-.dtable .al-r {
-  text-align: right;
+.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;
 }
-.dtable .hl-col {
-  background: color-mix(in srgb, var(--primary) 7%, transparent);
-  border-inline: 1px solid color-mix(in srgb, var(--primary) 16%, transparent);
+.noir-thumb:focus,
+.noir-thumb:focus-visible {
+  outline: none;
 }
-.dtable th.hl-col {
-  color: var(--primary);
-  box-shadow: inset 0 2px 0 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;
 }
-.dtable tr.hl-row td {
-  background: color-mix(in srgb, var(--primary) 7%, transparent);
-  color: var(--fg);
+.noir-rail::-webkit-scrollbar {
+  width: 0;
 }
-.dtable-caption {
-  margin-top: 10px;
-  text-align: right;
+.noir-rail {
+  scrollbar-width: none;
 }
 
-/* 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);
+/* 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);
 }
-.tab {
-  position: relative;
-  border: none;
-  background: transparent;
-  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);
+.noir-grid::-webkit-scrollbar {
+  width: 0;
 }
-.tab:hover {
-  color: var(--fg);
+.noir-grid {
+  scrollbar-width: none;
 }
-.tab.on {
-  color: var(--accent-ink);
+.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;
 }
-.tab-pill {
+.noir-grid-head::before {
+  content: '';
   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);
+  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%);
 }
-.tab-label {
+.noir-grid-head.scrolled::before {
+  opacity: 1;
+}
+.noir-grid-head > * {
   position: relative;
   z-index: 1;
 }
-/* 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-grid-head .noir-icon-btn.sm {
+  width: 26px;
+  height: 26px;
+  font-size: 14px;
 }
-.tabs-panel-inner > * {
-  margin-inline: auto;
+.noir-grid-list {
+  padding: 6px 2px 10px;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
+  gap: clamp(14px, 2vw, 26px);
 }
-
-/* Timeline */
-.tl {
+.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%;
 }
-.tl-line {
-  position: absolute;
-  left: 11px;
-  top: 10px;
-  bottom: 10px;
-  width: 2px;
-  background: var(--hair);
-  border-radius: 2px;
-  overflow: hidden;
+.noir-thumb-shell .noir-thumb {
+  width: 100%;
 }
-.tl-line-fill {
+.noir-thumb-shell > .dl-wrap.noir-thumb-more {
   position: absolute;
-  inset: 0;
-  background: var(--accent);
-  transform-origin: top;
+  top: 8px;
+  right: 8px;
+  z-index: 2;
+  opacity: 0;
+  pointer-events: none;
 }
-.tl-items {
-  display: flex;
-  flex-direction: column;
-  gap: clamp(20px, 3vh, 34px);
+.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;
 }
-.tl-item {
-  position: relative;
-  display: flex;
-  gap: 20px;
-  padding-left: 2px;
+.noir-thumb-shell > .dl-wrap.noir-thumb-more.open {
+  z-index: 8;
 }
-/* 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);
+.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;
 }
-.tl-dot::after {
-  content: '';
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  background: var(--accent);
+.noir-thumb-more-btn:hover,
+.noir-thumb-more-btn.on {
+  background: var(--ed-util-hover);
+  color: var(--ed-text);
 }
-.tl-time {
-  margin-bottom: 9px;
+.noir-thumb-more-btn:focus-visible {
+  outline: 2px solid var(--ed-brand-hover);
+  outline-offset: 0;
 }
-.tl-content h3 {
-  font-size: clamp(18px, 2vw, 23px);
-  font-weight: 600;
-  letter-spacing: -0.02em;
-  margin: 0 0 5px;
+.noir-thumb-more-btn svg {
+  width: 20px;
+  height: 20px;
 }
-.tl-content p {
-  font-size: clamp(14px, 1.5vw, 16px);
-  color: var(--fg-muted);
-  line-height: 1.5;
-  max-width: 52ch;
-  margin: 0;
+@media (max-width: 700px) {
+  .noir-grid-list {
+    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+  }
 }
 
-/* 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);
+/* ── 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);
 }
-.cw-bar {
-  position: relative;
-  z-index: 1;
+.pres-top {
   display: flex;
   align-items: center;
-  gap: 12px;
-  padding: 11px 16px;
-  background: var(--surface-2);
-  border-bottom: 1px solid var(--hair-2);
+  justify-content: space-between;
+  gap: 18px;
+  padding: 12px clamp(14px, 2vw, 26px);
+  border-bottom: 1px solid var(--ed-border);
+  background: var(--ed-bg-secondary);
 }
-.cw-dots {
+.pres-timer,
+.pres-right {
   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);
+  gap: 6px;
 }
-.cw-body {
-  margin: 0;
-  padding: 14px 0;
-  overflow-x: auto;
+.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;
 }
-.cw-body code {
-  font-family: var(--font-mono);
-  font-size: clamp(12px, 1.3vw, 14px);
-  line-height: 1.7;
+.pres-time.paused {
+  color: var(--ed-text-faint);
 }
-.cw-line {
+.pres-center {
   display: flex;
-  padding: 0 16px 0 0;
-  white-space: pre;
+  align-items: baseline;
+  gap: 14px;
 }
-.cw-line.hl {
-  background: color-mix(in srgb, var(--primary) 9%, transparent);
-  box-shadow: inset 2px 0 0 var(--primary);
+.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-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);
+.pres-clock {
+  font-size: 15px;
+  color: var(--ed-text-faint);
   font-feature-settings: 'tnum' 1;
 }
-.cw-code {
-  color: var(--fg);
+.pres-sep {
+  width: 1px;
+  height: 20px;
+  background: var(--ed-divider);
+  margin: 0 6px;
 }
-.cw-kw {
-  color: 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-str {
-  color: color-mix(in srgb, var(--primary) 50%, var(--fg-muted));
+.pres-icon svg {
+  width: 16px;
+  height: 16px;
+  display: block;
 }
-.cw-num {
-  color: color-mix(in srgb, var(--primary) 65%, var(--fg));
-  font-feature-settings: 'tnum' 1;
+.pres-timer .pres-icon.is-play svg {
+  /* triangle's optical center sits left of the viewBox midpoint */
+  transform: translateX(1px);
 }
-.cw-com {
-  color: var(--fg-faint);
-  font-style: italic;
+.pres-icon:hover:not(:disabled) {
+  background: var(--ed-util-hover);
+  color: var(--ed-text);
 }
-
-/* Charts */
-.ch-bars {
-  display: flex;
-  align-items: stretch;
-  gap: clamp(8px, 1.4vw, 16px);
-  width: 100%;
+.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;
 }
-.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;
-}
-.ch-dot.shown {
-  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;
-  }
-}
-.ch-donut {
-  width: var(--ch-size, 168px);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 12px;
-}
-.ch-donut-ring {
-  position: relative;
-  width: 100%;
-}
-.ch-donut svg {
-  width: 100%;
-  height: auto;
-  display: block;
-  overflow: visible;
-}
-.ch-donut-arc {
-  filter: drop-shadow(
-    0 0 7px color-mix(in srgb, var(--primary) 40%, transparent)
-  );
-}
-.ch-donut-val {
-  fill: var(--fg);
-  font-family: var(--font-head);
-  font-size: 30px;
-  font-weight: 600;
-  font-feature-settings: 'tnum' 1;
-}
-.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;
-}
-.ch-donut-val-html::after {
-  content: '%';
-}
-.ch-donut-label {
-  font-size: 14px;
-  color: var(--fg-muted);
-  font-weight: 500;
-}
-
-/* ═══ 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%
-    );
-}
-.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;
-}
-
-/* Quote — pull-quote slide */
-.quote-mark {
-  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;
-}
-.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);
-}
-.quote-attr {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 14px;
-  margin-top: clamp(22px, 4vh, 36px);
-}
-.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);
-}
-.quote-ava img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  display: block;
-}
-.quote-who {
-  text-align: left;
-}
-.quote-name {
-  font-weight: 600;
-  color: var(--fg);
-  font-size: 15.5px;
-}
-.quote-role {
-  color: var(--fg-faint);
-  font-size: 13.5px;
-  margin-top: 1px;
-}
-
-/* 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;
-  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);
-}
-.tier:hover {
-  transform: translateY(-4px);
-  border-color: color-mix(in srgb, var(--primary) 28%, transparent);
-}
-.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);
-}
-.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);
-}
-.tier-name {
-  font-weight: 600;
-  font-size: clamp(15px, 1.5vw, 17px);
-  color: var(--fg);
-}
-.tier-price {
-  display: flex;
-  align-items: baseline;
-  gap: 6px;
-  margin: 10px 0 4px;
-}
-.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);
-}
-.tier.hl .tier-amount {
-  background: var(--accent);
-  -webkit-background-clip: text;
-  background-clip: text;
-  color: transparent;
-}
-.tier-period {
-  color: var(--fg-faint);
-  font-size: 13px;
-}
-.tier-blurb {
-  color: var(--fg-muted);
-  font-size: 13.5px;
-  line-height: 1.45;
-}
-.tier-list {
-  display: flex;
-  flex-direction: column;
-  gap: 9px;
-  margin-top: 14px;
-  padding-top: 14px;
-  border-top: 1px solid var(--hair-2);
-}
-.tier-feat {
-  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 {
-  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;
-}
-/* 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%);
-}
-.step h3 {
-  font-size: clamp(17px, 1.9vw, 22px);
-  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;
-}
-
-/* Agenda — numbered table-of-contents rows */
-.agenda {
-  width: 100%;
-  max-width: 760px;
-  margin-inline: auto;
-}
-.agenda-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);
-}
-.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;
-}
-.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;
-}
-.agenda-hint {
-  color: var(--fg-faint);
-  font-size: clamp(12px, 1.2vw, 13.5px);
-  font-feature-settings: 'tnum' 1;
-}
-
-/* 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;
-}
-/* designed theme scrim, plus a flat dim (--dim is floored in render) */
-.cover-scrim {
-  position: absolute;
-  inset: 0;
-  z-index: 0;
-  background: linear-gradient(
-      180deg,
-      rgba(0, 0, 0, var(--dim, 0)),
-      rgba(0, 0, 0, var(--dim, 0))
-    ),
-    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);
-}
-
-/* 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;
-}
-.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;
-}
-.con-panel.dim .con-point svg {
-  color: var(--fg-faint);
-  opacity: 0.7;
-}
-.con-panel.lit .con-point svg {
-  color: var(--primary);
-}
-
-/* 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 {
-  display: flex;
-  flex-direction: column;
-  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;
-}
-.person {
-  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%;
-  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%;
-  height: 100%;
-  object-fit: cover;
-  display: block;
-}
-.person-name {
-  font-weight: 600;
-  color: var(--fg);
-  font-size: clamp(15px, 1.6vw, 18px);
-}
-.person-role {
-  color: var(--fg-muted);
-  font-size: clamp(12.5px, 1.3vw, 14px);
-  margin-top: 3px;
-}
-
-/* ── 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;
-  }
-}
-
-/* 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;
-  }
-  .cols {
-    gap: 10px;
-  }
-}
-
-/* ── 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;
-  }
-  .tier {
-    padding: 18px 20px;
-  }
-  /* 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 {
-    display: none;
-  }
-  .steps {
-    grid-template-columns: 1fr;
-    gap: 18px;
-  }
-  .step-line {
-    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;
-  }
-  .person-ava {
-    width: 54px;
-    font-size: 18px;
-    margin-bottom: 9px;
-  }
-  .cols {
-    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 {
-  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;
-}
-/* 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;
-  align-items: center;
-  gap: 8px;
-  pointer-events: none;
-}
-.noir-dock-popover > * {
-  pointer-events: auto;
-}
-.noir-dock.editor,
-.noir-dock.dragging {
-  opacity: 1;
-}
-.noir-dock.placed {
-  bottom: 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;
-}
-.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);
-}
-.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;
-}
-.noir-icon-btn:hover {
-  /* DS dark --bgTertiaryHover (neutral[800]) */
-  background: var(--ed-bg-tertiary-hover);
-}
-.noir-icon-btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-.noir-icon-btn:disabled:hover {
-  background: transparent;
-}
-.noir-icon-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);
-}
-.noir-icon-btn.sm {
-  width: 28px;
-  height: 28px;
-  font-size: 16px;
-}
-.noir-icon-btn svg {
-  width: 1em;
-  height: 1em;
-}
-.noir-grip {
-  width: 32px;
-  height: 32px;
-  display: grid;
-  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;
-}
-.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;
-}
-.noir-bar .dl-wrap {
-  flex: none;
-}
-.noir-bar .dl-pop {
-  right: auto;
-  left: 0;
-}
-.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;
+.pres-next {
   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);
+  opacity: 0.34;
+  transition: opacity 0.2s ease;
 }
-.marquee-item:hover {
+.pres-next:not(.pres-next-end):hover,
+.pres-next:focus-visible {
   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 {
+.pres-next-end {
   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;
-  }
+  place-items: center;
+  aspect-ratio: 16 / 9;
+  cursor: default;
+  color: var(--ed-text-faint);
+  font-size: 13px;
+  background: var(--ed-bg-secondary);
 }
 
-/* ── Figures: editorial stats — intro top-left, small-caps labels mid-slide,
-   giant figures anchored to the bottom edge. ── */
-.figures {
+/* 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;
-  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;
+  gap: 10px;
+  min-height: 0;
 }
-.figures-cell {
+.pres-notes-box {
+  flex: 1;
+  min-height: 0;
   display: flex;
   flex-direction: column;
-  justify-content: end;
-  gap: clamp(18px, 9vh, 96px);
-  padding-inline: clamp(20px, 2.6vw, 46px);
+  border-radius: 12px;
+  border: 1px solid var(--ed-border);
+  background: var(--ed-bg-secondary);
+  padding: 14px clamp(14px, 1.6vw, 22px);
 }
-.figures-cell:first-child {
-  padding-left: 0;
+.pres-notes-head {
+  justify-content: space-between;
 }
-.figures-cell:last-child {
-  padding-right: 0;
+.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;
 }
-.figures-cell + .figures-cell {
-  border-left: 1px solid var(--hair-2);
+.pres-notes::-webkit-scrollbar {
+  width: 6px;
 }
-.figures-label {
-  max-width: 24ch;
+.pres-notes::-webkit-scrollbar-thumb {
+  background: var(--ed-border);
+  border-radius: 3px;
 }
-.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;
+.pres-notes-empty {
+  color: var(--ed-text-faint);
 }
-@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;
-  }
+/* ── 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;
 }
-
-/* ── 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);
+.note-p:last-child {
+  margin-bottom: 0;
 }
-.speaker.flip .speaker-body {
-  order: 2;
+.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;
 }
-.speaker-body {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  gap: clamp(16px, 3vh, 30px);
-  padding-bottom: var(--gutter-y);
+.note-h:first-child,
+.note-wyg h3:first-child {
+  margin-top: 0;
 }
-.speaker-name {
-  font-size: clamp(38px, 5vw, 68px);
-  max-width: 14ch;
+.note-list,
+.note-wyg ul,
+.note-wyg ol {
+  margin: 0 0 0.8em;
+  padding-left: 1.25em;
 }
-.speaker-role {
-  margin-top: clamp(10px, 2vh, 18px);
-  line-height: 1.6;
+.note-list li,
+.note-wyg li {
+  margin-bottom: 0.35em;
 }
-.speaker-bio {
-  color: var(--fg-muted);
-  font-size: clamp(14px, 1.25vw, 18px);
-  line-height: 1.6;
-  max-width: 44ch;
+.note-list li::marker,
+.note-wyg li::marker {
+  color: var(--primary);
 }
-.speaker-media {
-  position: relative;
-  align-self: end;
-  overflow: hidden;
-  width: 100%;
-  height: 76%;
-  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
+.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;
 }
-.speaker-media img {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
+.note-quote p {
+  margin: 0;
 }
-@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;
-  }
+.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);
 }
 
-/* ── 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 {
+.note-wyg-wrap {
   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;
+  min-height: 0;
   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);
+  gap: 8px;
 }
-.qa-rows {
+/* 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;
-  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);
+  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;
 }
-.qa-q {
-  font-weight: 600;
+.note-wyg-bar::-webkit-scrollbar {
+  height: 0;
 }
-.qa-a {
-  color: var(--fg-muted);
+.note-wyg-bar > * {
+  flex: none;
 }
-.qa-q,
-.qa-a {
-  display: flex;
-  gap: 12px;
-  align-items: baseline;
-  font-size: clamp(14px, 1.3vw, 19px);
-  line-height: 1.5;
+/* draggable when it overflows — a mouse can pan it, no trackpad needed */
+.note-wyg-bar {
+  cursor: grab;
+  touch-action: pan-x;
 }
-.qa-mark {
-  flex-shrink: 0;
-  font-family: var(--font-mono);
-  font-size: 0.72em;
-  font-weight: 500;
-  color: var(--primary);
-  padding-top: 0.2em;
+.note-wyg-bar:active {
+  cursor: grabbing;
 }
-.qa-mark-a {
-  color: var(--fg-faint);
+.note-wyg-btn {
+  cursor: pointer;
 }
-@media (max-width: 720px) {
-  .qa-row {
-    grid-template-columns: 1fr;
-    gap: 6px;
-  }
+.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;
 }
-
-/* 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);
+.note-wyg-btn:hover {
+  background: rgba(255, 255, 255, 0.12);
+  color: #fff;
 }
-.qa-rows.large .qa-q,
-.qa-rows.large .qa-a {
-  font-size: clamp(17px, 1.85vw, 27px);
-  line-height: 1.45;
+.note-wyg-btn.on {
+  background: rgba(255, 255, 255, 0.14);
+  color: #fff;
 }
-.qa-rows.large + * {
-  margin-top: 0;
+.note-wyg-sep {
+  width: 1px;
+  height: 18px;
+  background: rgba(255, 255, 255, 0.14);
+  margin: 0 4px;
 }
 
-/* large Q&A also runs almost full width — the container cap lifts */
-.qa-wide .container {
-  max-width: none;
+/* colour + highlight palette, behind the A button */
+.note-wyg-pop-wrap {
+  position: relative;
+  display: flex;
 }
-
-/* ── Pillars: headline top-left, numbered columns anchored low. ── */
-.pillars {
+.note-wyg-pop {
+  position: fixed;
+  z-index: 120;
+  width: max-content;
   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;
+  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);
 }
-.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;
+@keyframes note-pop-in {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
   }
 }
-
-/* pillars large variant */
-.pillars.large .pillars-no {
-  font-size: clamp(18px, 2vw, 30px);
-}
-.pillars.large .pillars-head {
-  font-size: clamp(22px, 2.4vw, 36px);
+.note-wyg-pop-label {
+  font-size: 9.5px;
+  font-weight: 600;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: #8e8e93;
 }
-.pillars.large .pillars-body {
-  font-size: clamp(15px, 1.5vw, 23px);
-  max-width: 30ch;
+.note-wyg-pop-label:not(:first-child) {
+  margin-top: 4px;
 }
-
-/* ── table variants: corner labels + filled (inverted) header row ── */
-.tbl-labels {
+.note-wyg-pop-row {
   display: flex;
-  justify-content: space-between;
-  align-items: baseline;
-  gap: 24px;
-  max-width: 880px;
-  margin: 0 auto clamp(12px, 2.2vh, 20px);
-  width: 100%;
+  align-items: center;
+  gap: 6px;
 }
-.tbl-labels .kicker:last-child {
-  text-align: right;
+.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;
 }
-.tbl-filled .dtable thead th {
-  background: var(--accent);
-  color: var(--accent-ink);
-  border-bottom-color: transparent;
+.note-wyg-swatch:hover {
+  transform: scale(1.15);
 }
-.tbl-filled .dtable thead th.hl-col {
-  box-shadow: none;
-  color: var(--accent-ink);
+.note-wyg-swatch.is-accent-swatch {
   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);
+  border-color: rgba(255, 255, 255, 0.5);
 }
-.tbl-large .dtable td {
-  padding: clamp(13px, 1.6vw, 20px) clamp(16px, 1.8vw, 24px);
+.note-wyg-swatch.is-hl {
+  border-radius: 5px;
 }
-
-/* 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;
+.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);
 }
 
-/* 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);
+/* 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;
 }
-.figures-row.cards .figures-cell:first-child {
-  padding-left: clamp(20px, 2.2vw, 34px);
+.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;
 }
-.figures-row.cards .figures-cell:last-child {
-  padding-right: clamp(20px, 2.2vw, 34px);
+/* 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);
 }
-.figures-row.cards .figures-cell + .figures-cell {
-  border-left: 1px solid var(--hair);
+/* 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);
 }
 
-/* ── 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);
+.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);
 }
-.persona.flip .persona-media {
-  order: 2;
+.pres-pager {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
 }
-.persona-media {
-  position: relative;
+.pres-progress {
+  height: 4px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.1);
   overflow: hidden;
-  border-radius: var(--radius-lg);
 }
-.persona-media img {
-  position: absolute;
-  inset: 0;
-  width: 100%;
+.pres-progress-fill {
   height: 100%;
-  object-fit: cover;
-}
-.persona-body {
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-}
-.persona-title {
-  font-size: clamp(34px, 4.6vw, 62px);
-  max-width: 16ch;
+  border-radius: 999px;
+  background: var(--accent);
+  transition: width 0.35s cubic-bezier(0.32, 0.72, 0, 1);
 }
-.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;
+
+/* ── 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;
 }
-.persona-label {
-  margin-top: auto;
-  padding-top: clamp(16px, 3vh, 28px);
+.pres-timer,
+.pres-center,
+.pres-right {
+  min-width: 0;
 }
-@media (max-width: 860px) {
-  .persona {
+
+/* 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: auto minmax(0, 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;
   }
-  .persona-media {
-    min-height: 30vh;
-    order: 0;
+  .pres-timer,
+  .pres-right {
+    flex: 1;
+  }
+  .pres-right {
+    justify-content: flex-end;
+  }
+  .pres-clock {
+    display: none;
   }
-  .persona.flip .persona-media {
-    order: 0;
+  .pres-time {
+    font-size: 26px;
   }
 }
 
-/* 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;
+/* 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;
+  }
 }
 
-/* ── 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 */
+/* Annotation overlay + tool bar */
+.ann-canvas {
+  position: fixed;
+  inset: 0;
+  z-index: 88;
+  touch-action: none;
 }
-.insight-chart {
+.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;
-  flex-direction: column;
   align-items: center;
-  text-align: center;
-}
-.insight-title {
-  font-size: clamp(30px, 3.8vw, 52px);
-  max-width: 18ch;
-  margin-inline: auto;
+  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);
 }
-.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;
+.noir-dock-popover .ann-bar {
+  position: relative;
+  bottom: auto;
+  left: auto;
+  transform: none;
+  z-index: auto;
+  flex-wrap: nowrap;
+  max-width: none;
 }
-.insight-viz {
-  margin-top: clamp(20px, 4vh, 40px);
-  width: 100%;
+.ann-group {
   display: flex;
-  justify-content: center;
+  align-items: center;
+  gap: 3px;
 }
-.insight-viz > * {
-  width: 100%;
-  max-width: 560px;
+.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;
 }
-.insight-viz .ch-donut {
-  width: auto;
+.ann-btn svg {
+  width: 19px;
+  height: 19px;
 }
-.insight-points {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  gap: clamp(16px, 3vh, 28px);
+.ann-btn:hover:not(:disabled) {
+  background: rgba(255, 255, 255, 0.12);
 }
-.insight-heading {
-  margin: 0 0 clamp(4px, 1vh, 10px);
-  font-size: clamp(18px, 1.8vw, 26px);
-  letter-spacing: -0.015em;
+.ann-btn:disabled {
+  opacity: 0.3;
+  cursor: default;
 }
-.insight-point-label {
-  color: var(--primary);
-  margin-bottom: 6px;
+.ann-btn.on {
+  color: var(--ed-on-brand);
+  background: var(--ed-brand);
 }
-.insight-point-body {
-  color: var(--fg-muted);
-  font-size: clamp(13px, 1.2vw, 17px);
-  line-height: 1.6;
-  max-width: 42ch;
+.ann-bar :focus-visible,
+.ann-pop :focus-visible {
+  outline: 2px solid var(--ed-brand);
+  outline-offset: 2px;
 }
-@media (max-width: 860px) {
-  .insight {
-    grid-template-columns: 1fr;
-  }
+.ann-sep {
+  width: 1px;
+  height: 22px;
+  background: rgba(255, 255, 255, 0.12);
+  margin: 0 5px;
 }
 
-/* ── 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 {
+/* current colour + size, opening the style popover */
+.ann-style {
   position: relative;
-  width: 40px;
-  flex-shrink: 0;
+  display: flex;
 }
-.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;
+.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;
 }
-.gch-area {
-  position: relative;
-  flex: 1;
-  border-left: 1px solid var(--hair);
-  border-bottom: 1px solid var(--hair);
+.ann-swatch:hover,
+.ann-swatch.on {
+  background: rgba(255, 255, 255, 0.12);
 }
-.gch-grid {
-  position: absolute;
-  left: 0;
-  right: 0;
-  height: 1px;
-  background: var(--hair-2);
+.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;
 }
-.gch-groups {
+.ann-pop {
   position: absolute;
-  inset: 0;
+  bottom: calc(100% + 10px);
+  left: 50%;
+  transform: translateX(-50%);
   display: flex;
-  align-items: end;
-  justify-content: space-around;
+  flex-direction: column;
   gap: 8px;
-  padding: 0 3%;
+  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);
 }
-.gch-group {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  height: 100%;
-  justify-content: end;
-  min-width: 0;
-  flex: 1;
+@keyframes ann-pop-in {
+  from {
+    opacity: 0;
+    transform: translateX(-50%) translateY(4px);
+  }
 }
-.gch-bars {
+.ann-pop-row {
   display: flex;
-  align-items: end;
-  gap: 3px;
-  height: 100%;
-  width: 100%;
-  justify-content: center;
+  align-items: center;
+  gap: 8px;
 }
-.gch-bar {
-  width: clamp(8px, 1.4vw, 22px);
-  border-radius: 4px 4px 0 0;
+.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;
 }
-.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%;
+.ann-color:hover {
+  transform: scale(1.1);
 }
-.gch-group {
-  position: relative;
+.ann-color.on {
+  border-color: #fff;
+  transform: scale(1.1);
 }
-.gch-plot {
-  margin-bottom: 30px;
+.ann-pop-sizes {
+  justify-content: space-between;
 }
-
-/* ── small multiples: a row of mini line charts, independent scales ── */
-.lines-row {
+.ann-size {
+  width: 34px;
+  height: 30px;
   display: grid;
-  grid-auto-flow: column;
-  grid-auto-columns: minmax(0, 1fr);
-  gap: clamp(20px, 3vw, 48px);
+  place-items: center;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  border-radius: 9px;
+  transition: background 0.15s ease;
 }
-.lines-cell {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
+.ann-size span {
+  display: block;
+  border-radius: 50%;
 }
-.lines-label {
-  text-align: center;
-  color: var(--fg-muted);
-  font-size: clamp(12px, 1vw, 14.5px);
+.ann-size:hover {
+  background: rgba(255, 255, 255, 0.08);
+}
+.ann-size.on {
+  background: rgba(255, 255, 255, 0.14);
 }
 
-/* poster inset variant: the panel floats inside the gutters */
-.poster.inset {
-  padding: var(--gutter-y) var(--gutter);
-  gap: clamp(24px, 4vw, 64px);
+/* Hide / dim the UI (H key, or auto on idle in fullscreen) */
+.noir-dock.hidden {
+  opacity: 0 !important;
+  pointer-events: none;
 }
-.poster.inset .poster-body {
-  padding: 0;
+.noir-dock:not(.placed).hidden {
+  transform: translateX(-50%) translateY(18px);
 }
-.poster.inset .poster-media {
-  border-radius: var(--radius-lg);
-  overflow: hidden;
+.noir-dock.hidden:focus-within {
+  opacity: 1 !important;
+  pointer-events: auto;
 }
-
-/* single donut always sits dead-center */
-.chart-center {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
+.noir-dock:not(.placed).hidden:focus-within {
+  transform: translateX(-50%) translateY(0);
 }
-.ch-donut {
-  margin-inline: auto;
+.deck.nocursor,
+.deck.nocursor * {
+  cursor: 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;
+/* ── 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;
+  }
 }
-.ch-pt-val.shown {
-  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);
+  }
 }
-.gch-barwrap {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: end;
-  height: 100%;
+
+/* ── 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;
+  }
 }
-.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;
 }

From 949db0a6660fd2e0737a86a3fdb57a2a57b83fc9 Mon Sep 17 00:00:00 2001
From: inkko44 <do@inkko.ca>
Date: Tue, 29 Sep 2026 11:17:49 -0400
Subject: [PATCH 02/14] fix(bolt-slides): strip the house style so the agent
 designs each deck

The first pass removed the layout catalog but left the look behind: the
dark/blue token theme, the spotlight + grain + vignette atmosphere on every
slide, the fluid type atoms (.kicker/.headline/.accent-text), the Inter
@import, applyFont defaulting to Inter, and a skill example + seed slide
that used all of it. Bolt copied that and produced the same blue-on-black
text decks.

- base.css: atmosphere and type atoms removed; only reset, slide box,
  .cols and the ==accent== marker remain.
- tokens.css: reduced to the variables the shell reads (--bg, --fg,
  --accent, fonts, gutters) with neutral defaults.
- applyFont imposes nothing when deck.font is unset.
- Fallback slides and the seed slide use plain inline styles.
- SKILL.md: no-house-style contract, a design section (palette, type,
  imagery, composition are the agent's to decide per deck), example code
  without atoms. README and .bolt/prompt updated.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 bolt-slides/.bolt/prompt                 |   2 +-
 bolt-slides/.bolt/skills/slides/SKILL.md | 149 ++++++++++++-----------
 bolt-slides/README.md                    |  21 ++--
 bolt-slides/index.html                   |   2 +-
 bolt-slides/src/data/fonts.ts            |  14 ++-
 bolt-slides/src/slide/SlideView.tsx      |  17 ++-
 bolt-slides/src/slide/registry.tsx       |  11 +-
 bolt-slides/src/slides/welcome.tsx       |  40 ++++--
 bolt-slides/src/styles/base.css          | 132 +-------------------
 bolt-slides/src/styles/tokens.css        |  64 +++-------
 10 files changed, 170 insertions(+), 282 deletions(-)

diff --git a/bolt-slides/.bolt/prompt b/bolt-slides/.bolt/prompt
index 7548f03..e1bba7f 100644
--- a/bolt-slides/.bolt/prompt
+++ b/bolt-slides/.bolt/prompt
@@ -2,4 +2,4 @@ Import project modules with the `@/` path alias, which maps to `src/` (e.g. `@/d
 
 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 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`. Every slide must be responsive.
+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 49ab215..4a41a6e 100644
--- a/bolt-slides/.bolt/skills/slides/SKILL.md
+++ b/bolt-slides/.bolt/skills/slides/SKILL.md
@@ -2,15 +2,17 @@
 name: slides
 description: >-
   Author a slide deck in Bolt Slides. Each slide is a React component you
-  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
+  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 — write the slides, the studio does the rest
+# Slides — you design the slides, the studio does the rest
 
-This repo is a complete slide **studio**. You author the slides into it.
+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.
 
 - `/` — in the Bolt preview iframe (and local Vite): the studio. Side panel
   (S) and grid (G) reorder / duplicate / delete and pick the start slide;
@@ -19,26 +21,25 @@ This repo is a complete slide **studio**. You author the slides into it.
   put. The published site at `/` is the audience deck (notes stripped).
 - `/?presenter=1` — speaker view: current slide, up next, notes, timer.
 
-**Your job is the slides.** Three files matter:
+**What you write:**
 
 1. `src/slides/<name>.tsx` — one React component per slide (default
-   export). Free-form: any markup, inline styles, a `<style>` block, SVG,
-   motion. No new npm dependencies.
+   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`.
-3. `src/styles/tokens.css` — the theme (optional; see Theming).
 
 Everything else is the shell — `src/deck`, `src/studio`, `src/present`,
-`src/export`, `src/copy`, `src/data`, `src/slide`, `src/styles/base.css`,
-`src/styles/chrome*.css`, `vite.config.ts`. Leave it alone. If the user
-asks for a studio or engine change, say so and wait.
+`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 design rule: every slide is responsive
+## The one rule: every slide is responsive
 
 A slide is a full-viewport 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 look
-right at all of them.
+laptop, on a projector, and at 1280×720 in the PDF export. It must hold
+up at all of them.
 
 - **Fluid sizing.** `clamp()`, `%`, `vw`/`vh`, `rem`, `min()`/`max()`.
   No fixed pixel widths or heights on content. Media may be the only
@@ -53,38 +54,53 @@ right at all of them.
   at ≥1440px. The rail and grid render the real component, so they show
   breakage too.
 
-Content, structure, hierarchy, color, type, imagery and motion are yours to
-design for *this* deck and *this* brand. Nothing in the shell constrains
-them.
+## 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 and motion** — asymmetry, overlap, edge-to-edge, big
+  numbers, timelines, maps, whatever fits. `motion/react` is available.
+  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.
 
 ## Slide component contract
 
 ```tsx
-// src/slides/problem.tsx
-import Slide from '@/deck/Slide';
+// src/slides/opening.tsx
 import Reveal from '@/deck/Reveal';
 import Build from '@/deck/Build';
 import type { SlideComponent } from '@/slide/registry';
 
-const Problem: SlideComponent = ({ slide }) => (
-  <Slide>
-    <Reveal>
-      <div className="kicker">The problem</div>
-      <h2 className="headline">Forty dashboards, zero answers.</h2>
-    </Reveal>
-    <Build at={1}>
-      <p className="lead">Analysts spend the week answering the same question.</p>
-    </Build>
-  </Slide>
+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 Problem;
+export default Opening;
 ```
 
-- The component is rendered inside a box that fills the slide (100% ×
-  100% of the stage). `<Slide>` from `@/deck/Slide` is an optional root
-  that applies the theme gutters, `center` (centered stack) and `full`
-  (edge-to-edge, no padding). Any root element that fills the box works.
+- The component fills the slide box (100% × 100% of the stage). 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.
@@ -92,17 +108,11 @@ export default Problem;
 - 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), the theme tokens (`var(--bg)`, `--fg`, `--fg-muted`,
-  `--accent`, `--surface`, `--hair`, `--radius`, `--font-head`,
-  `--font-body`, `--gutter`), and the fluid type atoms in `base.css`
-  (`.display .headline .lead .subhead .kicker .foot .figure .accent-text`)
-  plus `.cols` (equal columns that wrap).
+  (draw-in on view).
 - 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.
-- Motion (`motion/react`) is already a dependency. Respect
-  `prefers-reduced-motion` for anything that loops.
 
 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
@@ -117,16 +127,16 @@ file; unused files in `src/slides/` are harmless — remove the seed
   "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",             // optional: inter | space | sora | manrope | dm | outfit | playfair | fraunces
-    "accent": "#1688FC"          // optional deck-wide accent (a solid color)
+    "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,             // 0-based order
-      "layout": "cover",         // src/slides/cover.tsx
+      "layout": "opening",       // src/slides/opening.tsx
       "props": {},               // free-form data for the component (may be empty)
       "animation": "cascade",    // cascade | rise | fade | zoom | none
       "transition": null,        // optional per-slide override of deck.transition
@@ -139,12 +149,14 @@ file; unused files in `src/slides/` are harmless — remove the seed
 }
 ```
 
-- **Always set `background`** on every slide. `{"type":"color","color":"var(--bg)"}`
-  is the theme surface; `{"type":"color","color":"#0b1020"}`,
+- **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 background is painted
-  under your component; the component decides what goes on top.
+  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.
@@ -164,28 +176,23 @@ 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 — topic, brand, facts,
-   numbers. Never invent a placeholder company for a real subject. Brand
-   given → derive colors / fonts from it and say what you used.
+1. Ground the deck in the user's real input; decide its visual identity.
 2. Bootstrap `boltSlidesId` (above).
-3. Theme if needed (`deck.accent` / `deck.font`, or `tokens.css`).
-4. Write one component per slide into `src/slides/`, then the matching
+3. Write one component per slide into `src/slides/`, then the matching
    `deck.json` entries, with speaker `notes` where they help.
-5. `npm run typecheck` and `npm run build` must pass. 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.
-
-## Theming (`src/styles/tokens.css`)
-
-Prefer the deck-level `accent` and `font` over editing tokens. For deeper
-theming, every `:root` value in `tokens.css` is yours to change — colors,
-surfaces, radius, shadows, fonts, motion, gutters. Change values, not
-variable names: the shell reads them (dock, thumbnails, atmosphere).
-`--accent` must be a color value (the atmosphere derives washes from it
-with `color-mix`). Dark is the default; for a light deck set `--bg` /
-`--fg` and `html { color-scheme: light }` in `base.css`. Deck-level
-`font` loads Google Fonts pairings automatically; for any other font, add
-its `@import` to `base.css` and set `--font-head` / `--font-body`.
+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 69febe5..2a89bad 100644
--- a/bolt-slides/README.md
+++ b/bolt-slides/README.md
@@ -4,9 +4,11 @@ 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.
 
 Each slide is a React component in `src/slides/`, listed in `deck.json`.
-There is no layout catalog: 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.
+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
@@ -48,7 +50,9 @@ Collaborate by sharing the Bolt project.
 - `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 theme (`:root` values).
+- `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
 
@@ -62,11 +66,12 @@ src/studio/             studio chrome
 src/present/            audience / speaker routes
 src/export/             PDF export
 src/copy/               rich text + in-place text edit persist
-src/styles/tokens.css   theme: edit :root values only
+src/styles/tokens.css   shell fallbacks (--bg, --fg, --accent, fonts, gutters)
 ```
 
 ## Theming
 
-Everything the shell paints derives from the `:root` tokens in
-`src/styles/tokens.css`. `--accent` must stay a color value (the
-atmosphere mixes from it).
+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/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/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/slide/SlideView.tsx b/bolt-slides/src/slide/SlideView.tsx
index fab71da..03490ca 100644
--- a/bolt-slides/src/slide/SlideView.tsx
+++ b/bolt-slides/src/slide/SlideView.tsx
@@ -57,7 +57,7 @@ function BackgroundLayer({ bg }: { bg: Background | undefined }) {
           style={{
             width: '100%',
             height: '100%',
-            background: 'var(--surface-2, #15161b)',
+            background: '#15161b',
           }}
         />
       )}
@@ -74,6 +74,13 @@ function BackgroundLayer({ bg }: { bg: Background | undefined }) {
 
 const STATIC_CTX = { clicks: 9999, isStatic: true };
 
+/* 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;
+
 class SlideBoundary extends Component<
   { children: RN },
   { err: string | null }
@@ -92,13 +99,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>
       );
     }
diff --git a/bolt-slides/src/slide/registry.tsx b/bolt-slides/src/slide/registry.tsx
index 2d02b94..47e5d84 100644
--- a/bolt-slides/src/slide/registry.tsx
+++ b/bolt-slides/src/slide/registry.tsx
@@ -1,5 +1,6 @@
 import type { ComponentType } from 'react';
 import type { SlideData } from '../data/types';
+import { FALLBACK } from './SlideView';
 
 /** A slide component: `src/slides/<name>.tsx`, default export. */
 export type SlideComponent = ComponentType<{ slide: SlideData }>;
@@ -35,12 +36,14 @@ export function RenderSlide({ slide }: { slide: SlideData }) {
 
   if (!Component) {
     return (
-      <div className="slide center">
-        <div className="kicker" style={{ marginBottom: 12 }}>
+      <div className="slide center" style={FALLBACK}>
+        <div style={{ opacity: 0.6, marginBottom: 12 }}>
           Missing slide component
         </div>
-        <h2 className="headline">“{name || '(empty)'}”</h2>
-        <p className="subhead" style={{ marginTop: 16 }}>
+        <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>
diff --git a/bolt-slides/src/slides/welcome.tsx b/bolt-slides/src/slides/welcome.tsx
index cdd7e35..94872be 100644
--- a/bolt-slides/src/slides/welcome.tsx
+++ b/bolt-slides/src/slides/welcome.tsx
@@ -1,23 +1,37 @@
-import Slide from '@/deck/Slide';
-import Reveal from '@/deck/Reveal';
 import type { SlideComponent } from '@/slide/registry';
 
-/* Seed slide. Delete this file once the deck has its own slides. */
+/* Seed slide. It has no design on purpose — delete it once the deck has
+   its own slides. */
 const Welcome: SlideComponent = () => (
-  <Slide center>
-    <Reveal>
-      <div className="kicker" style={{ marginBottom: 'clamp(12px, 2vh, 20px)' }}>
-        Bolt Slides
-      </div>
-      <h1 className="display">
-        Your deck <span className="accent-text">starts here.</span>
+  <div
+    style={{
+      width: '100%',
+      height: '100%',
+      display: 'grid',
+      placeItems: 'center',
+      padding: 'clamp(24px, 6vw, 96px)',
+      textAlign: 'center',
+      fontFamily: 'system-ui, sans-serif',
+    }}
+  >
+    <div>
+      <h1 style={{ fontSize: 'clamp(28px, 5vw, 64px)', fontWeight: 600 }}>
+        Your deck starts here.
       </h1>
-      <p className="subhead" style={{ marginTop: 'clamp(14px, 2.5vh, 24px)' }}>
+      <p
+        style={{
+          marginTop: '1em',
+          fontSize: 'clamp(15px, 1.8vw, 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>
-    </Reveal>
-  </Slide>
+    </div>
+  </div>
 );
 
 export default Welcome;
diff --git a/bolt-slides/src/styles/base.css b/bolt-slides/src/styles/base.css
index fd768ed..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,133 +92,18 @@ 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 {
-  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);
 }
 
 /* ── Responsive utilities ─────────────────────────────────────────── */
diff --git a/bolt-slides/src/styles/tokens.css b/bolt-slides/src/styles/tokens.css
index 0e3ee2f..3833857 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, 6vw, 96px);
+  --gutter-y: clamp(24px, 6vh, 72px);
 }

From 8b5c6d24c063ccea4b5225fe343323826a0cb674 Mon Sep 17 00:00:00 2001
From: inkko44 <do@inkko.ca>
Date: Tue, 29 Sep 2026 11:46:36 -0400
Subject: [PATCH 03/14] docs(bolt-slides): skill asks for wide text measures
 and smooth motion by default

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 bolt-slides/.bolt/skills/slides/SKILL.md | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/bolt-slides/.bolt/skills/slides/SKILL.md b/bolt-slides/.bolt/skills/slides/SKILL.md
index 4a41a6e..1c7048f 100644
--- a/bolt-slides/.bolt/skills/slides/SKILL.md
+++ b/bolt-slides/.bolt/skills/slides/SKILL.md
@@ -50,6 +50,12 @@ up at all of them.
 - **Nothing overflows or scrolls.** A paged slide cannot scroll; what
   doesn't fit is cut off. Size each slide's content to one screen at every
   viewport, and let long text wrap (`max-width` in `ch`, no `nowrap`).
+- **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 slide on wide
+  viewports (`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.
 - **Check narrow and wide.** Before you finish, look at ~390px wide and
   at ≥1440px. The rail and grid render the real component, so they show
   breakage too.
@@ -71,9 +77,13 @@ the right one. Build a visual identity for the subject and brand:
   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 and motion** — asymmetry, overlap, edge-to-edge, big
-  numbers, timelines, maps, whatever fits. `motion/react` is available.
-  Respect `prefers-reduced-motion` for anything that loops.
+- **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 →

From 9acc81a11676fed9dcd10f187403e502577251ea Mon Sep 17 00:00:00 2001
From: inkko44 <do@inkko.ca>
Date: Tue, 29 Sep 2026 12:12:02 -0400
Subject: [PATCH 04/14] docs(bolt-slides): skill asks slides to scale and
 compose for large screens

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 bolt-slides/.bolt/skills/slides/SKILL.md | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/bolt-slides/.bolt/skills/slides/SKILL.md b/bolt-slides/.bolt/skills/slides/SKILL.md
index 1c7048f..d203922 100644
--- a/bolt-slides/.bolt/skills/slides/SKILL.md
+++ b/bolt-slides/.bolt/skills/slides/SKILL.md
@@ -56,9 +56,21 @@ up at all of them.
   viewports (`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.
-- **Check narrow and wide.** Before you finish, look at ~390px wide and
-  at ≥1440px. The rail and grid render the real component, so they show
-  breakage too.
+- **Large screens too — scale, don't just stop.** The deck is also shown
+  on 27" monitors, ultrawides and projectors at 2000px+ wide. Content must
+  grow with the stage, not hit a cap and float in a void: size type,
+  spacing, cards and media in viewport terms (`clamp()` whose middle term
+  is `vw`/`vh` and whose upper bound keeps growing, or `min(Xvw, Yvh)` for
+  things tied to the stage), and compose the whole stage — distribute
+  content across the height, let grids and media fill, or center one
+  composed block. A headline pinned top-left, a row of small tiles far
+  below, and empty space between them is the failure. Not too wide either:
+  a single text column stays ≤ ~75ch, and a composition keeps proportions
+  (e.g. a centered frame at `min(100%, 88vw)`, tiles that grow taller as
+  they grow wider) instead of stretching a thin row edge to edge.
+- **Check narrow and wide.** Before you finish, look at ~390px wide, at
+  ~1440px, and at ≥2400px. The rail and grid render the real component, so
+  they show breakage too.
 
 ## Design it — for this deck
 

From dc48bea764eb4e6f6235942192bbb511a56add5b Mon Sep 17 00:00:00 2001
From: inkko44 <do@inkko.ca>
Date: Tue, 29 Sep 2026 13:55:29 -0400
Subject: [PATCH 05/14] docs(bolt-slides): skill bans the generic-AI card look
 and requires stage-centered alignment

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 bolt-slides/.bolt/skills/slides/SKILL.md | 33 ++++++++++++++++++++++++
 1 file changed, 33 insertions(+)

diff --git a/bolt-slides/.bolt/skills/slides/SKILL.md b/bolt-slides/.bolt/skills/slides/SKILL.md
index d203922..0d744c7 100644
--- a/bolt-slides/.bolt/skills/slides/SKILL.md
+++ b/bolt-slides/.bolt/skills/slides/SKILL.md
@@ -101,6 +101,39 @@ 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.
+
+### Alignment — it's a stage
+
+- **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.
+
 ## Slide component contract
 
 ```tsx

From 4a8000f633553fc8deeb7f742213ecf9bf9ff807 Mon Sep 17 00:00:00 2001
From: inkko44 <do@inkko.ca>
Date: Tue, 29 Sep 2026 14:02:55 -0400
Subject: [PATCH 06/14] feat(bolt-slides): scale the stage above 1600px;
 stage-relative units; data-viz and legibility rules

SlideView measures its own box: up to 1600px wide the slide reflows; above
that the whole slide is scaled up proportionally, so ultrawide screens show
the 1600px composition larger instead of stretched thin. The scaled box is
a CSS container named 'slide', so cqw/cqh and @container queries measure
the stage (also fixing thumbnails and the PDF, which never matched vw).

Skill: design for 390->1600 and fill the stage at 1600; use cqw/cqh and
@container instead of vw/vh and media queries; a data/charts section
(the number is the hero, charts at presentation scale, labels never inside
data-sized shapes, no dashboard furniture); kicker above headline; a
legibility floor to check before finishing.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 bolt-slides/.bolt/skills/slides/SKILL.md | 82 ++++++++++++++++++------
 bolt-slides/src/slide/SlideView.tsx      | 51 ++++++++++++++-
 bolt-slides/src/slides/welcome.tsx       |  6 +-
 bolt-slides/src/styles/tokens.css        |  4 +-
 4 files changed, 114 insertions(+), 29 deletions(-)

diff --git a/bolt-slides/.bolt/skills/slides/SKILL.md b/bolt-slides/.bolt/skills/slides/SKILL.md
index 0d744c7..e1c48a1 100644
--- a/bolt-slides/.bolt/skills/slides/SKILL.md
+++ b/bolt-slides/.bolt/skills/slides/SKILL.md
@@ -36,41 +36,52 @@ change, say so and wait.
 
 ## The one rule: every slide is responsive
 
-A slide is a full-viewport web layout, not a fixed canvas. The same
+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.
 
-- **Fluid sizing.** `clamp()`, `%`, `vw`/`vh`, `rem`, `min()`/`max()`.
+**The stage.** Your component fills a box called the stage. From phone
+width up to **1600px wide the stage is the window and the slide reflows**.
+Above 1600px the shell **scales the whole slide up proportionally** (a
+2900px screen shows the 1600px composition at 1.8×), so you never design
+for ultrawide — you design for 390→1600 and fill the stage at 1600.
+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.
+- **Container queries, not media queries.** `@container slide (max-width:
+  900px) { … }` for narrow layouts — in a `<style>` block in the
+  component, or via a small `useContainerWidth` you write. Media queries
+  react to the window, not the stage.
+- **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-viewport fallback (`@media (max-width: 900px)`).
+  narrow-stage fallback (`@container slide (max-width: 900px)`).
 - **Nothing overflows or scrolls.** A paged slide cannot scroll; what
   doesn't fit is cut off. Size each slide's content to one screen at every
   viewport, and let long text wrap (`max-width` in `ch`, no `nowrap`).
 - **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 slide on wide
-  viewports (`minmax(min(20rem, 100%), 1fr)` or `clamp(20rem, 45%, 40rem)`),
+  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.
-- **Large screens too — scale, don't just stop.** The deck is also shown
-  on 27" monitors, ultrawides and projectors at 2000px+ wide. Content must
-  grow with the stage, not hit a cap and float in a void: size type,
-  spacing, cards and media in viewport terms (`clamp()` whose middle term
-  is `vw`/`vh` and whose upper bound keeps growing, or `min(Xvw, Yvh)` for
-  things tied to the stage), and compose the whole stage — distribute
-  content across the height, let grids and media fill, or center one
-  composed block. A headline pinned top-left, a row of small tiles far
-  below, and empty space between them is the failure. Not too wide either:
-  a single text column stays ≤ ~75ch, and a composition keeps proportions
-  (e.g. a centered frame at `min(100%, 88vw)`, tiles that grow taller as
-  they grow wider) instead of stretching a thin row edge to edge.
-- **Check narrow and wide.** Before you finish, look at ~390px wide, at
-  ~1440px, and at ≥2400px. The rail and grid render the real component, so
-  they show breakage too.
+- **Fill the stage at 1600.** Because larger screens only magnify the
+  1600px layout, what looks sparse at 1600 looks sparse everywhere. Size
+  type, spacing and media so the composition uses the stage at 1600×900
+  (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.
+- **Check narrow and wide.** Before you finish, look at ~390px wide and at
+  ~1600px. The rail and grid render the real component, so they show
+  breakage too.
 
 ## Design it — for this deck
 
@@ -120,6 +131,24 @@ 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.
 
+### Data, charts and figures — presentation scale, not dashboard scale
+
+- **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` and
+  `width: 100%` so it scales with the stage; strokes, ticks and labels
+  sized to read from the back (labels ≥ 1.1cqw). 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.
+
 ### Alignment — it's a stage
 
 - **Vertically centered by default.** The composition sits in the middle
@@ -133,6 +162,16 @@ between the thing that matters and everything else.
 - **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).
+
+### Legibility floor — check every slide before you're done
+
+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, 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
 
@@ -152,7 +191,8 @@ const Opening: SlideComponent = ({ slide }) => (
 export default Opening;
 ```
 
-- The component fills the slide box (100% × 100% of the stage). Any root
+- 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.
diff --git a/bolt-slides/src/slide/SlideView.tsx b/bolt-slides/src/slide/SlideView.tsx
index 03490ca..2e88952 100644
--- a/bolt-slides/src/slide/SlideView.tsx
+++ b/bolt-slides/src/slide/SlideView.tsx
@@ -1,4 +1,4 @@
-import { Component, type ReactNode as RN } from 'react';
+import { Component, 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';
@@ -74,6 +74,39 @@ function BackgroundLayer({ bg }: { bg: Background | undefined }) {
 
 const STATIC_CTX = { clicks: 9999, isStatic: true };
 
+/* Reference stage width. Up to here a slide reflows responsively; on wider
+   stages the whole slide is scaled up proportionally, so a 2900px screen
+   shows the 1600px composition larger instead of stretched thin. */
+export const STAGE_REF_WIDTH = 1600;
+
+function useStageUpscale<T extends HTMLElement>() {
+  const ref = useRef<T>(null);
+  const [upscale, setUpscale] = useState(1);
+
+  useLayoutEffect(() => {
+    const el = ref.current;
+
+    if (!el) return;
+
+    const apply = (width: number) =>
+      setUpscale(width > STAGE_REF_WIDTH ? width / STAGE_REF_WIDTH : 1);
+
+    apply(el.clientWidth);
+
+    if (typeof ResizeObserver === 'undefined') return;
+
+    const ro = new ResizeObserver((entries) => {
+      for (const entry of entries) apply(entry.contentRect.width);
+    });
+
+    ro.observe(el);
+
+    return () => ro.disconnect();
+  }, []);
+
+  return { ref, upscale };
+}
+
 /* Shell fallback text (error / missing component) — deliberately plain. */
 export const FALLBACK = {
   fontFamily: 'system-ui, sans-serif',
@@ -131,8 +164,10 @@ export default function SlideView({
   const parent = useDeck();
   const live = !parent.isStatic;
   const mode = slide.animation ?? 'cascade';
-  const zoom =
+  const { ref: stageRef, upscale } = useStageUpscale<HTMLDivElement>();
+  const textScale =
     slide.props?.scale === 'xl' ? 1.3 : slide.props?.scale === 'lg' ? 1.15 : 1;
+  const zoom = textScale * upscale;
   let content: ReactNode = (
     <SlideBoundary>
       <RenderSlide slide={slide} />
@@ -162,9 +197,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
@@ -175,6 +216,10 @@ 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}
diff --git a/bolt-slides/src/slides/welcome.tsx b/bolt-slides/src/slides/welcome.tsx
index 94872be..3ced6ff 100644
--- a/bolt-slides/src/slides/welcome.tsx
+++ b/bolt-slides/src/slides/welcome.tsx
@@ -9,19 +9,19 @@ const Welcome: SlideComponent = () => (
       height: '100%',
       display: 'grid',
       placeItems: 'center',
-      padding: 'clamp(24px, 6vw, 96px)',
+      padding: 'clamp(24px, 6cqw, 96px)',
       textAlign: 'center',
       fontFamily: 'system-ui, sans-serif',
     }}
   >
     <div>
-      <h1 style={{ fontSize: 'clamp(28px, 5vw, 64px)', fontWeight: 600 }}>
+      <h1 style={{ fontSize: 'clamp(28px, 5cqw, 64px)', fontWeight: 600 }}>
         Your deck starts here.
       </h1>
       <p
         style={{
           marginTop: '1em',
-          fontSize: 'clamp(15px, 1.8vw, 22px)',
+          fontSize: 'clamp(15px, 1.8cqw, 22px)',
           opacity: 0.7,
           maxWidth: '40ch',
           marginInline: 'auto',
diff --git a/bolt-slides/src/styles/tokens.css b/bolt-slides/src/styles/tokens.css
index 3833857..ec385ba 100644
--- a/bolt-slides/src/styles/tokens.css
+++ b/bolt-slides/src/styles/tokens.css
@@ -19,6 +19,6 @@
 
   --ease: cubic-bezier(0.32, 0.72, 0, 1);
 
-  --gutter: clamp(24px, 6vw, 96px);
-  --gutter-y: clamp(24px, 6vh, 72px);
+  --gutter: clamp(24px, 6cqw, 96px);
+  --gutter-y: clamp(24px, 6cqh, 72px);
 }

From e8192de3c307cc5d485a080c40914ea95fb1e847 Mon Sep 17 00:00:00 2001
From: inkko44 <do@inkko.ca>
Date: Tue, 29 Sep 2026 14:46:39 -0400
Subject: [PATCH 07/14] feat(bolt-slides): dev-time out-of-view guard; skill
 treats overflow as a failure
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

SlideView measures every live slide after its entrance settles and logs a
console error naming the slide file and how far its content (text/media
elements only) leaves the stage. Bolt surfaces console errors to the agent,
so an overflowing slide becomes a failure to fix rather than advice to
follow. Thumbnails and export are not measured.

Skill: 'nothing out of view — ever', the error to look for, tactics in
order (cut copy, split the slide, use the width, shrink media before text),
and the shortest-stage budget; the legibility floor references the check.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 bolt-slides/.bolt/skills/slides/SKILL.md |  23 +++--
 bolt-slides/src/slide/SlideView.tsx      | 112 ++++++++++++++++++++++-
 2 files changed, 127 insertions(+), 8 deletions(-)

diff --git a/bolt-slides/.bolt/skills/slides/SKILL.md b/bolt-slides/.bolt/skills/slides/SKILL.md
index e1c48a1..03d09f5 100644
--- a/bolt-slides/.bolt/skills/slides/SKILL.md
+++ b/bolt-slides/.bolt/skills/slides/SKILL.md
@@ -63,9 +63,17 @@ Measure against the stage, not the window:
 - **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 overflows or scrolls.** A paged slide cannot scroll; what
-  doesn't fit is cut off. Size each slide's content to one screen at every
-  viewport, and let long text wrap (`max-width` in `ch`, no `nowrap`).
+- **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
@@ -168,10 +176,11 @@ between the thing that matters and everything else.
 ### Legibility floor — check every slide before you're done
 
 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, 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.
+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
 
diff --git a/bolt-slides/src/slide/SlideView.tsx b/bolt-slides/src/slide/SlideView.tsx
index 2e88952..ff37c74 100644
--- a/bolt-slides/src/slide/SlideView.tsx
+++ b/bolt-slides/src/slide/SlideView.tsx
@@ -1,4 +1,11 @@
-import { Component, useLayoutEffect, useRef, useState, 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';
@@ -154,6 +161,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,
 }: {
@@ -165,6 +273,8 @@ export default function SlideView({
   const live = !parent.isStatic;
   const mode = slide.animation ?? 'cascade';
   const { ref: stageRef, upscale } = useStageUpscale<HTMLDivElement>();
+
+  useOutOfViewGuard(stageRef, slide, live, upscale);
   const textScale =
     slide.props?.scale === 'xl' ? 1.3 : slide.props?.scale === 'lg' ? 1.15 : 1;
   const zoom = textScale * upscale;

From 0ec3bbf1fd21575557e4752ba58ed88a4fa1e65a Mon Sep 17 00:00:00 2001
From: inkko44 <do@inkko.ca>
Date: Tue, 29 Sep 2026 14:59:26 -0400
Subject: [PATCH 08/14] fix(bolt-slides): stage upscale uses the smaller of
 width/height ratios
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Width-only scaling shrank the inner stage's height whenever a window got
wider at a fixed height (2400x900 became a 1600x600 stage), pushing content
that fit at 900 tall out of view. The scale is now min(w/1600, h/900), so
the stage is never narrower than 1600 or shorter than 900; extra width is
room, not size. Stage constants and the fallback style move to
src/slide/stage.ts (Fast Refresh lint). Skill: height is the scarce axis —
tie vertical sizes to cqh, not cqw.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 bolt-slides/.bolt/skills/slides/SKILL.md | 30 ++++++++++++++----------
 bolt-slides/src/slide/SlideView.tsx      | 21 +++++------------
 bolt-slides/src/slide/registry.tsx       |  2 +-
 bolt-slides/src/slide/stage.ts           | 22 +++++++++++++++++
 4 files changed, 47 insertions(+), 28 deletions(-)
 create mode 100644 bolt-slides/src/slide/stage.ts

diff --git a/bolt-slides/.bolt/skills/slides/SKILL.md b/bolt-slides/.bolt/skills/slides/SKILL.md
index 03d09f5..a6eac4f 100644
--- a/bolt-slides/.bolt/skills/slides/SKILL.md
+++ b/bolt-slides/.bolt/skills/slides/SKILL.md
@@ -42,11 +42,13 @@ 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 **1600px wide the stage is the window and the slide reflows**.
-Above 1600px the shell **scales the whole slide up proportionally** (a
-2900px screen shows the 1600px composition at 1.8×), so you never design
-for ultrawide — you design for 390→1600 and fill the stage at 1600.
-Measure against the stage, not the window:
+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`:
@@ -80,13 +82,17 @@ Measure against the stage, not the window:
   (`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.** Because larger screens only magnify the
-  1600px layout, what looks sparse at 1600 looks sparse everywhere. Size
-  type, spacing and media so the composition uses the stage at 1600×900
-  (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.
+- **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.
 - **Check narrow and wide.** Before you finish, look at ~390px wide and at
   ~1600px. The rail and grid render the real component, so they show
   breakage too.
diff --git a/bolt-slides/src/slide/SlideView.tsx b/bolt-slides/src/slide/SlideView.tsx
index ff37c74..fc48e3d 100644
--- a/bolt-slides/src/slide/SlideView.tsx
+++ b/bolt-slides/src/slide/SlideView.tsx
@@ -13,6 +13,7 @@ import { effectiveImageDim, slideHasImage } from '../data/imageDim';
 import { DeckCtx, useDeck } from '../deck/DeckContext';
 import { SlideScope } from '../copy/SlideScope';
 import { RenderSlide } from './registry';
+import { FALLBACK, stageUpscale } from './stage';
 
 function BackgroundLayer({ bg }: { bg: Background | undefined }) {
   const base = { position: 'absolute', inset: 0, zIndex: 0 } as const;
@@ -81,11 +82,6 @@ function BackgroundLayer({ bg }: { bg: Background | undefined }) {
 
 const STATIC_CTX = { clicks: 9999, isStatic: true };
 
-/* Reference stage width. Up to here a slide reflows responsively; on wider
-   stages the whole slide is scaled up proportionally, so a 2900px screen
-   shows the 1600px composition larger instead of stretched thin. */
-export const STAGE_REF_WIDTH = 1600;
-
 function useStageUpscale<T extends HTMLElement>() {
   const ref = useRef<T>(null);
   const [upscale, setUpscale] = useState(1);
@@ -95,15 +91,16 @@ function useStageUpscale<T extends HTMLElement>() {
 
     if (!el) return;
 
-    const apply = (width: number) =>
-      setUpscale(width > STAGE_REF_WIDTH ? width / STAGE_REF_WIDTH : 1);
+    const apply = (width: number, height: number) =>
+      setUpscale(stageUpscale(width, height));
 
-    apply(el.clientWidth);
+    apply(el.clientWidth, el.clientHeight);
 
     if (typeof ResizeObserver === 'undefined') return;
 
     const ro = new ResizeObserver((entries) => {
-      for (const entry of entries) apply(entry.contentRect.width);
+      for (const entry of entries)
+        apply(entry.contentRect.width, entry.contentRect.height);
     });
 
     ro.observe(el);
@@ -114,12 +111,6 @@ function useStageUpscale<T extends HTMLElement>() {
   return { ref, upscale };
 }
 
-/* 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;
 
 class SlideBoundary extends Component<
   { children: RN },
diff --git a/bolt-slides/src/slide/registry.tsx b/bolt-slides/src/slide/registry.tsx
index 47e5d84..706bf36 100644
--- a/bolt-slides/src/slide/registry.tsx
+++ b/bolt-slides/src/slide/registry.tsx
@@ -1,6 +1,6 @@
 import type { ComponentType } from 'react';
 import type { SlideData } from '../data/types';
-import { FALLBACK } from './SlideView';
+import { FALLBACK } from './stage';
 
 /** A slide component: `src/slides/<name>.tsx`, default export. */
 export type SlideComponent = ComponentType<{ slide: SlideData }>;
diff --git a/bolt-slides/src/slide/stage.ts b/bolt-slides/src/slide/stage.ts
new file mode 100644
index 0000000..593e770
--- /dev/null
+++ b/bolt-slides/src/slide/stage.ts
@@ -0,0 +1,22 @@
+/* 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;
+
+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;

From def7e0a776f214d671f0442cedffd0b8db8848e6 Mon Sep 17 00:00:00 2001
From: inkko44 <do@inkko.ca>
Date: Tue, 29 Sep 2026 16:13:42 -0400
Subject: [PATCH 09/14] docs(bolt-slides): charts and media sized by height so
 wide stages cannot push content out of view

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 bolt-slides/.bolt/skills/slides/SKILL.md | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/bolt-slides/.bolt/skills/slides/SKILL.md b/bolt-slides/.bolt/skills/slides/SKILL.md
index a6eac4f..cc367aa 100644
--- a/bolt-slides/.bolt/skills/slides/SKILL.md
+++ b/bolt-slides/.bolt/skills/slides/SKILL.md
@@ -92,7 +92,11 @@ size. Measure against the stage, not the window:
 - **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.
+  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 narrow and wide.** Before you finish, look at ~390px wide and at
   ~1600px. The rail and grid render the real component, so they show
   breakage too.
@@ -150,11 +154,14 @@ between the thing that matters and everything else.
 - **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` and
-  `width: 100%` so it scales with the stage; strokes, ticks and labels
-  sized to read from the back (labels ≥ 1.1cqw). A chart takes real area
-  (half the stage or more) — never a widget inside a card inside the
-  slide.
+- **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

From 810b71e893671a9b8c02ac596a14fa1e65f13eba Mon Sep 17 00:00:00 2001
From: inkko44 <do@inkko.ca>
Date: Tue, 29 Sep 2026 16:59:44 -0400
Subject: [PATCH 10/14] feat(bolt-slides): useStage() hook; skill requires
 phones to reflow, not shrink

The shell never scales a slide down (upscale is clamped at 1), but the
skill's cqw-first sizing led the agent to shrink desktop compositions on
phones. SlideView now provides a StageCtx with the stage's width, height,
upscale and a narrow flag (< 700px); slide components read it with
useStage() from @/slide/stage to restack in JSX. Skill: below ~700px the
slide is a different one-column layout, clamp() minimums are real phone
reading sizes, and the narrow check must read like a phone page.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 bolt-slides/.bolt/skills/slides/SKILL.md | 27 +++++++++++++++------
 bolt-slides/src/slide/SlideView.tsx      | 31 ++++++++++++++++++------
 bolt-slides/src/slide/stage.ts           | 28 +++++++++++++++++++++
 3 files changed, 72 insertions(+), 14 deletions(-)

diff --git a/bolt-slides/.bolt/skills/slides/SKILL.md b/bolt-slides/.bolt/skills/slides/SKILL.md
index cc367aa..c7d2062 100644
--- a/bolt-slides/.bolt/skills/slides/SKILL.md
+++ b/bolt-slides/.bolt/skills/slides/SKILL.md
@@ -55,10 +55,21 @@ size. Measure against the stage, not the window:
   `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.
-- **Container queries, not media queries.** `@container slide (max-width:
-  900px) { … }` for narrow layouts — in a `<style>` block in the
-  component, or via a small `useContainerWidth` you write. Media queries
-  react to the window, not the stage.
+- **Phones reflow, they don't shrink.** Below ~700px of stage width the
+  slide is a different layout, like a responsive website — one column,
+  the hero first, secondary material dropped or shortened, charts and
+  images given their own full-width row — never the desktop composition
+  scaled down. Proportional `cqw` sizing alone produces a tiny desktop
+  slide; that is the failure. Restack with `@container slide
+  (max-width: 700px) { … }` in a `<style>` block, or in JSX with
+  `const { narrow } = useStage()` from `@/slide/stage` (also gives
+  `width`/`height` of the stage in your CSS pixels) to reorder, hide or
+  swap elements. Container queries and `useStage()` react to the stage;
+  media queries react to the window and are wrong here.
+- **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`).
@@ -98,8 +109,9 @@ size. Measure against the stage, not the window:
   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 narrow and wide.** Before you finish, look at ~390px wide and at
-  ~1600px. The rail and grid render the real component, so they show
-  breakage too.
+  ~1600px. At 390 the slide must read like a phone page (one column,
+  readable type, nothing out of view), not a miniature of the wide one.
+  The rail and grid render the real component, so they show breakage too.
 
 ## Design it — for this deck
 
@@ -225,7 +237,8 @@ export default Opening;
 - 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).
+  (draw-in on view), `useStage()` from `@/slide/stage` (`{ width,
+  height, narrow }` 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**`,
diff --git a/bolt-slides/src/slide/SlideView.tsx b/bolt-slides/src/slide/SlideView.tsx
index fc48e3d..08848e7 100644
--- a/bolt-slides/src/slide/SlideView.tsx
+++ b/bolt-slides/src/slide/SlideView.tsx
@@ -13,7 +13,14 @@ import { effectiveImageDim, slideHasImage } from '../data/imageDim';
 import { DeckCtx, useDeck } from '../deck/DeckContext';
 import { SlideScope } from '../copy/SlideScope';
 import { RenderSlide } from './registry';
-import { FALLBACK, stageUpscale } from './stage';
+import {
+  DEFAULT_STAGE,
+  FALLBACK,
+  NARROW_STAGE_WIDTH,
+  StageCtx,
+  stageUpscale,
+  type StageSize,
+} from './stage';
 
 function BackgroundLayer({ bg }: { bg: Background | undefined }) {
   const base = { position: 'absolute', inset: 0, zIndex: 0 } as const;
@@ -84,15 +91,24 @@ const STATIC_CTX = { clicks: 9999, isStatic: true };
 
 function useStageUpscale<T extends HTMLElement>() {
   const ref = useRef<T>(null);
-  const [upscale, setUpscale] = useState(1);
+  const [stage, setStage] = useState<StageSize>(DEFAULT_STAGE);
 
   useLayoutEffect(() => {
     const el = ref.current;
 
     if (!el) return;
 
-    const apply = (width: number, height: number) =>
-      setUpscale(stageUpscale(width, height));
+    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
+          : { width: w, height: h, upscale, narrow: w < NARROW_STAGE_WIDTH }
+      );
+    };
 
     apply(el.clientWidth, el.clientHeight);
 
@@ -108,7 +124,7 @@ function useStageUpscale<T extends HTMLElement>() {
     return () => ro.disconnect();
   }, []);
 
-  return { ref, upscale };
+  return { ref, stage };
 }
 
 
@@ -263,7 +279,8 @@ export default function SlideView({
   const parent = useDeck();
   const live = !parent.isStatic;
   const mode = slide.animation ?? 'cascade';
-  const { ref: stageRef, upscale } = useStageUpscale<HTMLDivElement>();
+  const { ref: stageRef, stage } = useStageUpscale<HTMLDivElement>();
+  const upscale = stage.upscale;
 
   useOutOfViewGuard(stageRef, slide, live, upscale);
   const textScale =
@@ -323,7 +340,7 @@ export default function SlideView({
             containerName: 'slide',
           }}
         >
-          {content}
+          <StageCtx.Provider value={stage}>{content}</StageCtx.Provider>
         </div>
       </div>
     </SlideScope.Provider>
diff --git a/bolt-slides/src/slide/stage.ts b/bolt-slides/src/slide/stage.ts
index 593e770..479da5c 100644
--- a/bolt-slides/src/slide/stage.ts
+++ b/bolt-slides/src/slide/stage.ts
@@ -1,3 +1,5 @@
+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
@@ -7,6 +9,32 @@
 export const STAGE_REF_WIDTH = 1600;
 export const STAGE_REF_HEIGHT = 900;
 
+/* Below this stage width a slide is "narrow" (phones, half-screen windows):
+   it must restack into one column, not shrink. */
+export const NARROW_STAGE_WIDTH = 700;
+
+/** 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 < NARROW_STAGE_WIDTH — restack for a phone. */
+  narrow: boolean;
+}
+
+export const DEFAULT_STAGE: StageSize = {
+  width: STAGE_REF_WIDTH,
+  height: STAGE_REF_HEIGHT,
+  upscale: 1,
+  narrow: false,
+};
+
+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,

From 86ff7c895b55179e9401b661d2be47a5453c721d Mon Sep 17 00:00:00 2001
From: inkko44 <do@inkko.ca>
Date: Tue, 29 Sep 2026 17:00:31 -0400
Subject: [PATCH 11/14] docs(bolt-slides): skill shows the text-beside-chart
 slide restacking on a narrow stage

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 bolt-slides/.bolt/skills/slides/SKILL.md | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/bolt-slides/.bolt/skills/slides/SKILL.md b/bolt-slides/.bolt/skills/slides/SKILL.md
index c7d2062..af423b8 100644
--- a/bolt-slides/.bolt/skills/slides/SKILL.md
+++ b/bolt-slides/.bolt/skills/slides/SKILL.md
@@ -66,6 +66,30 @@ size. Measure against the stage, not the window:
   `width`/`height` of the stage in your CSS pixels) 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 } = useStage();
+  <section
+    style={{
+      display: 'grid',
+      gridTemplateColumns: narrow ? '1fr' : 'minmax(20rem, 45%) 1fr',
+      gridTemplateRows: narrow ? 'auto 40cqh' : '1fr',
+      gap: narrow ? '4cqh' : '4cqw',
+      alignItems: 'center',
+      height: '100%',
+      padding: 'clamp(24px, 6cqw, 96px)',
+    }}
+  >
+    <div>…kicker, headline, body…</div>
+    <Chart style={{ width: '100%', height: narrow ? '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;

From d1ba2b167f643bc981455582ee737b5a1fd3f077 Mon Sep 17 00:00:00 2001
From: inkko44 <do@inkko.ca>
Date: Tue, 29 Sep 2026 17:01:21 -0400
Subject: [PATCH 12/14] feat(bolt-slides): stage tiers for tablets; portrait
 stages stack

useStage() now also reports compact (< 1100px, iPad portrait/landscape and
small windows) and portrait (taller than wide). Skill: phone, tablet and
portrait tiers each get a layout; the canonical text-beside-chart example
stacks on narrow or portrait stages; the self-check covers 390x844,
820x1180, 1180x820 and 1600x900.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 bolt-slides/.bolt/skills/slides/SKILL.md | 53 ++++++++++++++----------
 bolt-slides/src/slide/SlideView.tsx      |  4 +-
 bolt-slides/src/slide/stage.ts           | 39 +++++++++++++----
 3 files changed, 64 insertions(+), 32 deletions(-)

diff --git a/bolt-slides/.bolt/skills/slides/SKILL.md b/bolt-slides/.bolt/skills/slides/SKILL.md
index af423b8..ffd68a6 100644
--- a/bolt-slides/.bolt/skills/slides/SKILL.md
+++ b/bolt-slides/.bolt/skills/slides/SKILL.md
@@ -55,36 +55,44 @@ size. Measure against the stage, not the window:
   `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 reflow, they don't shrink.** Below ~700px of stage width the
-  slide is a different layout, like a responsive website — one column,
-  the hero first, secondary material dropped or shortened, charts and
-  images given their own full-width row — never the desktop composition
-  scaled down. Proportional `cqw` sizing alone produces a tiny desktop
-  slide; that is the failure. Restack with `@container slide
-  (max-width: 700px) { … }` in a `<style>` block, or in JSX with
-  `const { narrow } = useStage()` from `@/slide/stage` (also gives
-  `width`/`height` of the stage in your CSS pixels) to reorder, hide or
-  swap elements. Container queries and `useStage()` react to the stage;
-  media queries react to the window and are wrong here.
+- **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 } = useStage();
+  const { narrow, portrait } = useStage();
+  const stack = narrow || portrait;
   <section
     style={{
       display: 'grid',
-      gridTemplateColumns: narrow ? '1fr' : 'minmax(20rem, 45%) 1fr',
-      gridTemplateRows: narrow ? 'auto 40cqh' : '1fr',
-      gap: narrow ? '4cqh' : '4cqw',
+      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: narrow ? '100%' : '55cqh' }} />
+    <Chart style={{ width: '100%', height: stack ? '100%' : '55cqh' }} />
   </section>
   ```
 
@@ -132,10 +140,12 @@ size. Measure against the stage, not the window:
   `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 narrow and wide.** Before you finish, look at ~390px wide and at
-  ~1600px. At 390 the slide must read like a phone page (one column,
-  readable type, nothing out of view), not a miniature of the wide one.
-  The rail and grid render the real component, so they show breakage too.
+- **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
 
@@ -262,7 +272,8 @@ export default Opening;
   `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 }` of the stage the component is laid out in).
+  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**`,
diff --git a/bolt-slides/src/slide/SlideView.tsx b/bolt-slides/src/slide/SlideView.tsx
index 08848e7..9082a82 100644
--- a/bolt-slides/src/slide/SlideView.tsx
+++ b/bolt-slides/src/slide/SlideView.tsx
@@ -16,8 +16,8 @@ import { RenderSlide } from './registry';
 import {
   DEFAULT_STAGE,
   FALLBACK,
-  NARROW_STAGE_WIDTH,
   StageCtx,
+  describeStage,
   stageUpscale,
   type StageSize,
 } from './stage';
@@ -106,7 +106,7 @@ function useStageUpscale<T extends HTMLElement>() {
       setStage((prev) =>
         prev.width === w && prev.height === h && prev.upscale === upscale
           ? prev
-          : { width: w, height: h, upscale, narrow: w < NARROW_STAGE_WIDTH }
+          : describeStage(w, h, upscale)
       );
     };
 
diff --git a/bolt-slides/src/slide/stage.ts b/bolt-slides/src/slide/stage.ts
index 479da5c..3f3d244 100644
--- a/bolt-slides/src/slide/stage.ts
+++ b/bolt-slides/src/slide/stage.ts
@@ -9,9 +9,12 @@ import { createContext, useContext } from 'react';
 export const STAGE_REF_WIDTH = 1600;
 export const STAGE_REF_HEIGHT = 900;
 
-/* Below this stage width a slide is "narrow" (phones, half-screen windows):
-   it must restack into one column, not shrink. */
+/* 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 {
@@ -19,16 +22,34 @@ export interface StageSize {
   height: number;
   /** >1 only on stages larger than 1600×900 (the slide is magnified). */
   upscale: number;
-  /** width < NARROW_STAGE_WIDTH — restack for a phone. */
+  /** 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 const DEFAULT_STAGE: StageSize = {
-  width: STAGE_REF_WIDTH,
-  height: STAGE_REF_HEIGHT,
-  upscale: 1,
-  narrow: false,
-};
+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);
 

From fbb640d4fdc89f49401dd5f066d6fada6897ebeb Mon Sep 17 00:00:00 2001
From: inkko44 <do@inkko.ca>
Date: Tue, 29 Sep 2026 18:01:34 -0400
Subject: [PATCH 13/14] =?UTF-8?q?docs(bolt-slides):=20hard=20rule=20?=
 =?UTF-8?q?=E2=80=94=20never=20edit=20the=20shell=20unless=20the=20user=20?=
 =?UTF-8?q?names=20a=20shell=20change?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 bolt-slides/.bolt/prompt                 |  2 ++
 bolt-slides/.bolt/skills/slides/SKILL.md | 28 +++++++++++++++++++-----
 2 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/bolt-slides/.bolt/prompt b/bolt-slides/.bolt/prompt
index e1bba7f..e5e054c 100644
--- a/bolt-slides/.bolt/prompt
+++ b/bolt-slides/.bolt/prompt
@@ -3,3 +3,5 @@ Import project modules with the `@/` path alias, which maps to `src/` (e.g. `@/d
 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 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.
+
+The shell is off limits unless the user explicitly asks to change it. Shell = `src/deck`, `src/studio`, `src/present`, `src/export`, `src/copy`, `src/data`, `src/slide`, `src/styles/base.css`, `src/styles/chrome*.css`, `index.html`, `vite.config.ts`, `package.json`. A request for a deck, slides, a pitch, a redesign, more animation, better mobile, or a fix to a slide is never a request to touch the shell: do not add, remove or restyle controls, buttons, menus, shortcuts, routes, settings or export options, and do not "improve" the dock, rail, grid, presenter or studio. Only a request that names a studio / engine / control change unlocks those files, and then change only what was asked.
diff --git a/bolt-slides/.bolt/skills/slides/SKILL.md b/bolt-slides/.bolt/skills/slides/SKILL.md
index ffd68a6..ec3a583 100644
--- a/bolt-slides/.bolt/skills/slides/SKILL.md
+++ b/bolt-slides/.bolt/skills/slides/SKILL.md
@@ -21,7 +21,9 @@ Every visual decision in a deck is yours, made for this brief.
   put. The published site at `/` is the audience deck (notes stripped).
 - `/?presenter=1` — speaker view: current slide, up next, notes, timer.
 
-**What you write:**
+## Hard rule 0 — never touch the shell unless asked by name
+
+You write exactly two kinds of files:
 
 1. `src/slides/<name>.tsx` — one React component per slide (default
    export). Free-form: any markup, inline styles or a `<style>` block, SVG,
@@ -29,10 +31,26 @@ Every visual decision in a deck is yours, made for this brief.
 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.
+(`src/styles/tokens.css` and a Google Fonts `<link>` in `index.html` are
+the only other edits a deck may need.)
+
+Everything else is the **shell**: `src/deck`, `src/studio`, `src/present`,
+`src/export`, `src/copy`, `src/data`, `src/slide`, `src/styles/base.css`,
+`src/styles/chrome*.css`, `vite.config.ts`, `package.json`. It is finished
+software. A request for a deck, a pitch, slides, a redesign, more motion,
+better mobile, or a fix to one slide is **never** a request to change it:
+
+- Do not add, remove, move or restyle controls, buttons, menus, keyboard
+  shortcuts, routes, settings, panels or export options.
+- Do not "improve" the dock, rail, grid, presenter, notes or studio, and
+  do not change how slides are loaded, persisted, scaled or exported.
+- If a shell feature seems missing or broken, say so in one line of your
+  reply and carry on with the deck — don't fix it.
+
+Only a request that names a studio / engine / control change ("add a
+timer to the dock", "change the present shortcut") unlocks those files,
+and then change only what was named. On the first prompt of a project the
+shell is never edited.
 
 ## The one rule: every slide is responsive
 

From 1bf6c8d881574b0cbf3ec5117f00717ebdc9f0af Mon Sep 17 00:00:00 2001
From: inkko44 <do@inkko.ca>
Date: Tue, 29 Sep 2026 20:59:23 -0400
Subject: [PATCH 14/14] =?UTF-8?q?Revert=20"docs(bolt-slides):=20hard=20rul?=
 =?UTF-8?q?e=20=E2=80=94=20never=20edit=20the=20shell=20unless=20the=20use?=
 =?UTF-8?q?r=20names=20a=20shell=20change"?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This reverts commit fbb640d4fdc89f49401dd5f066d6fada6897ebeb.
---
 bolt-slides/.bolt/prompt                 |  2 --
 bolt-slides/.bolt/skills/slides/SKILL.md | 28 +++++-------------------
 2 files changed, 5 insertions(+), 25 deletions(-)

diff --git a/bolt-slides/.bolt/prompt b/bolt-slides/.bolt/prompt
index e5e054c..e1bba7f 100644
--- a/bolt-slides/.bolt/prompt
+++ b/bolt-slides/.bolt/prompt
@@ -3,5 +3,3 @@ Import project modules with the `@/` path alias, which maps to `src/` (e.g. `@/d
 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 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.
-
-The shell is off limits unless the user explicitly asks to change it. Shell = `src/deck`, `src/studio`, `src/present`, `src/export`, `src/copy`, `src/data`, `src/slide`, `src/styles/base.css`, `src/styles/chrome*.css`, `index.html`, `vite.config.ts`, `package.json`. A request for a deck, slides, a pitch, a redesign, more animation, better mobile, or a fix to a slide is never a request to touch the shell: do not add, remove or restyle controls, buttons, menus, shortcuts, routes, settings or export options, and do not "improve" the dock, rail, grid, presenter or studio. Only a request that names a studio / engine / control change unlocks those files, and then change only what was asked.
diff --git a/bolt-slides/.bolt/skills/slides/SKILL.md b/bolt-slides/.bolt/skills/slides/SKILL.md
index ec3a583..ffd68a6 100644
--- a/bolt-slides/.bolt/skills/slides/SKILL.md
+++ b/bolt-slides/.bolt/skills/slides/SKILL.md
@@ -21,9 +21,7 @@ Every visual decision in a deck is yours, made for this brief.
   put. The published site at `/` is the audience deck (notes stripped).
 - `/?presenter=1` — speaker view: current slide, up next, notes, timer.
 
-## Hard rule 0 — never touch the shell unless asked by name
-
-You write exactly two kinds of files:
+**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,
@@ -31,26 +29,10 @@ You write exactly two kinds of files:
 2. `deck.json` — the ordered list of slides. Each entry's `layout` is the
    component's filename without `.tsx`.
 
-(`src/styles/tokens.css` and a Google Fonts `<link>` in `index.html` are
-the only other edits a deck may need.)
-
-Everything else is the **shell**: `src/deck`, `src/studio`, `src/present`,
-`src/export`, `src/copy`, `src/data`, `src/slide`, `src/styles/base.css`,
-`src/styles/chrome*.css`, `vite.config.ts`, `package.json`. It is finished
-software. A request for a deck, a pitch, slides, a redesign, more motion,
-better mobile, or a fix to one slide is **never** a request to change it:
-
-- Do not add, remove, move or restyle controls, buttons, menus, keyboard
-  shortcuts, routes, settings, panels or export options.
-- Do not "improve" the dock, rail, grid, presenter, notes or studio, and
-  do not change how slides are loaded, persisted, scaled or exported.
-- If a shell feature seems missing or broken, say so in one line of your
-  reply and carry on with the deck — don't fix it.
-
-Only a request that names a studio / engine / control change ("add a
-timer to the dock", "change the present shortcut") unlocks those files,
-and then change only what was named. On the first prompt of a project the
-shell is never edited.
+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