diff --git a/.gitignore b/.gitignore
index a5f9c84..454fc71 100644
--- a/.gitignore
+++ b/.gitignore
@@ -37,3 +37,14 @@ deploy-courses/
 # Local template uploads
 *.imscc
 *.docx
+
+# Design scratch + internal references (not for the public repo)
+ClassBuild Redesign/
+public/ClassBuild Themes.zip
+public/gpt-image-2.md
+
+# Stale Gemini-era voice samples — app fetches previews from the ElevenLabs API
+public/voices/
+
+# Pitch scratch — not part of the app
+pitch/
diff --git a/CLAUDE.md b/CLAUDE.md
index b10f90d..b56a30f 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -108,7 +108,7 @@ public/                             # Static assets (hero, previews, course thum
 
 ```typescript
 // src/services/claude/client.ts
-opus:   'claude-opus-4-6'
+opus:   'claude-opus-4-8'
 sonnet: 'claude-sonnet-4-6'
 haiku:  'claude-haiku-4-5-20251001'
 ```
diff --git a/HANDOFF.md b/HANDOFF.md
new file mode 100644
index 0000000..8354f01
--- /dev/null
+++ b/HANDOFF.md
@@ -0,0 +1,143 @@
+# Course Redo Handoff — Tea is done, Puppy in progress
+
+## What we're doing
+
+Converting the 6 ClassBuild example courses to the new chapter themes (Press / Notebook / Almanac / Storybook / Studio / Terminal). Each course's **chapter text stays verbatim** (audio narration already exists for it and must keep matching), but we re-theme the chapter HTML, render fresh figures via OpenAI, and add interactive widgets that match the new theme.
+
+Image renders go through OpenAI gpt-image-2; everything else (text) is done by you (Claude) directly. The API key lives in `/Users/uqjtange/Documents/research/current_projects/classbuild-cli/.env.local` (gitignored via `*.local`). All scripts use `npx tsx --env-file=.env.local ...` to pick it up.
+
+## Theme map (locked in)
+
+| Course | Slug | Theme | Status |
+|---|---|---|---|
+| Science and Art of Tea | `science-and-art-of-tea` | **Press** | ✅ Complete — 6 chapters, original prose, figures, widgets, slides, weekly challenges |
+| Puppy School | `raising-a-puppy` | **Almanac** | 🟡 Ch1 + Ch2 done · Ch3–Ch8 pending |
+| Understanding Your Sleep | `understanding-your-sleep` | **Notebook** | ⏳ Not started |
+| Leadership through Crisis | `leadership-through-crisis` | **Studio** | ⏳ Not started |
+| Training for Your First Marathon | `training-for-your-first-marathon` | **Storybook** | ⏳ Not started |
+| The Strategy of Everything (Game Theory) | `game-theory` | **Terminal** | ⏳ Not started |
+
+## Workflow (per chapter)
+
+For each chapter that hasn't been redone:
+
+### 1. Extract the original prose
+
+```bash
+grep -nE "<h1|<h2>|<h3>|<p>|<li>|takeaway|<blockquote>|<cite>|<aside>" \
+  output/<slug>/chapters/0X_*.html | head -120
+```
+
+The original HTML has the old ocean-theme CSS that we throw away; we keep the prose only.
+
+### 2. Build the new chapter HTML
+
+- Create `output/<slug>/chapters-<theme>/0X_<slug-name>.html`
+- Copy the full CSS block from the existing template chapter (see "Templates" below)
+- Replace the article body with the original prose, marked up in the `.ch-*` contract
+- Add `<link rel="stylesheet" href="widgets-<theme>.css">` after the Google Fonts link
+- Add 2 `<figure class="ai-image" data-prompt="..." data-aspect="landscape">` placeholders in spots that fit the chapter's content. **Image idiom is clean modern editorial — NOT painterly:**
+  - When the subject is a real-world thing (puppy, person, food, environment, equipment): a clean editorial photograph (35mm/50mm/85mm prime, soft natural light, sharp focus, photoreal). Do NOT ask for watercolour, pen-and-ink, woodcut, field-guide plate, hand-lettered serif, lab-notebook on graph paper, taped sticky-notes, or any palette restated as paint pigments. If labels are essential (e.g. a 6-pose comparison grid), put them in a slim dark-grey caption strip beneath each frame in clean white sans-serif (Inter / Helvetica, all-caps).
+  - When the subject is abstract data or process (hypnogram, phase-response curve, dose-decay, flowchart, anatomy cross-section): a clean modern editorial data visualisation in the style of an NYT or Bloomberg science graphic — flat dark navy line, single dark-coral accent, modern sans-serif type, generous white space. No graph paper, no faux-handwriting, no taped sticky-notes, no faux-notebook patina.
+  - The theme controls the page chrome around the image (typography, layout, colour rules), not the image itself. The image should look like clean editorial photography or clean editorial design that could ship in The Atlantic, regardless of which theme the chapter is in.
+- If you're converting an older course that still uses painterly prompts, see "Re-photographing old courses" below.
+- Add 2–3 widgets per chapter from the syllabus widget specs (syllabus lives at `output/<slug>/syllabus.json`)
+
+### 3. Render the figures
+
+```bash
+cd /Users/uqjtange/Documents/research/current_projects/classbuild-cli
+npx tsx --env-file=.env.local scripts/render-ai-images.ts \
+  output/<slug>/chapters-<theme>/0X_<slug-name>.html
+```
+
+Background it with `run_in_background: true` — each figure takes 90–150s. Script is idempotent: it skips existing files, so you can re-run safely.
+
+### 4. (Optional) Slides JSON + weekly challenge JSON
+
+The Tea course has these in `slides-new/` and `weekly-challenge/`. For Puppy and onward, you can write them per the schemas in `classbuild/src/prompts/slides.ts` and `classbuild/src/prompts/weeklyChallenge.ts`. Slide images render via `scripts/render-slides.ts` with the same env-file flag.
+
+## Templates
+
+The cleanest reference templates to copy CSS + structure from:
+
+| Theme | Reference template |
+|---|---|
+| Press | `output/science-and-art-of-tea/chapters-press/01_one-leaf-a-thousand-mountains.html` |
+| Almanac | `output/raising-a-puppy/chapters-almanac/01_before-they-arrive.html` |
+| Notebook | (To be created — see `classbuild/src/themes/notebook.css` for the markup contract) |
+| Studio | (To be created — see `classbuild/src/themes/studio.css`) |
+| Storybook | (To be created — see `classbuild/src/themes/storybook.css`) |
+| Terminal | (To be created — see `classbuild/src/themes/terminal.css`) |
+
+Shared widget styles for each theme live next to the chapters as e.g. `chapters-press/widgets.css`, `chapters-almanac/widgets-almanac.css`. Create a new shared widget CSS file the first time you start a new theme.
+
+## Key paths
+
+```
+/Users/uqjtange/Documents/research/current_projects/classbuild-cli/
+├── .env.local                          ← OPENAI_API_KEY (gitignored)
+├── scripts/
+│   ├── render-ai-images.ts             ← renders <figure class="ai-image"> placeholders
+│   └── render-slides.ts                ← renders slides JSON to images
+└── output/
+    ├── science-and-art-of-tea/         ✅ DONE
+    ├── raising-a-puppy/                🟡 Ch1+Ch2 done
+    ├── understanding-your-sleep/
+    ├── leadership-through-crisis/
+    ├── training-for-your-first-marathon/
+    └── game-theory/
+
+/Users/uqjtange/Documents/research/current_projects/classbuild/src/themes/
+├── almanac.css                          ← theme spec reference
+├── notebook.css
+├── press.css
+├── storybook.css
+├── studio.css
+└── terminal.css
+```
+
+## What's stable / what's not
+
+- **Audio recordings** at `output/<slug>/audio/*.mp3` — DO NOT regenerate. They match the original chapter prose exactly. Keep them in place; make the new chapter HTML's prose match them.
+- **Transcripts** at `output/<slug>/audio/*_transcript.{md,docx}` — keep as-is.
+- **Practice quizzes, in-class quizzes, activities, discussion, research, infographic** — left untouched. They reference the chapter topics broadly and don't need updates.
+- **Old chapter HTML** at `output/<slug>/chapters/0X_*.html` — leave intact as the prose source. The new versions go alongside in `chapters-<theme>/`.
+- **course.json** at `output/<slug>/course.json` — the `themeId` field still says `"ocean"` (the legacy theme). Update to the new theme ID when you're ready to re-publish, OR leave it and have the publish step override it.
+
+## Resume prompt to paste in a fresh conversation
+
+> I'm resuming a multi-course theme conversion for ClassBuild. The full handoff doc is at `/Users/uqjtange/Documents/research/current_projects/classbuild-cli/HANDOFF.md` — please read it.
+>
+> Current state: Tea (Press) is fully complete. Puppy (Almanac) Ch1 and Ch2 are done. I need you to continue with Puppy Ch3 ("The Socialisation Window — A Once-in-a-Lifetime Window"), following the workflow in HANDOFF.md. Template to copy from: `output/raising-a-puppy/chapters-almanac/01_before-they-arrive.html`. Shared widget CSS: `output/raising-a-puppy/chapters-almanac/widgets-almanac.css`.
+>
+> The OpenAI API key is already in `.env.local`. Render commands should use `npx tsx --env-file=.env.local scripts/render-ai-images.ts <path>`.
+>
+> Please continue with Ch3 end-to-end (HTML + 2 figures + 2–3 widgets), background the figure renders, and proceed to Ch4 while they cook. When Ch3–Ch8 are done, move on to Sleep → Notebook. The theme map is in HANDOFF.md.
+
+## Re-photographing old courses
+
+The first wave of courses (Tea, Puppy, partial Sleep) shipped with painterly "field-guide watercolour" / "lab-notebook on graph paper" image prompts that came out as recognisable AI-slop sketches. The fix is to rewrite the existing `data-prompt` attributes in the chapter HTML (and `imagePrompt` strings in the slide JSONs) as clean editorial photography / clean modern data viz, then re-render.
+
+Mechanics:
+
+1. Read the existing prompts (`grep -oE 'data-prompt="[^"]*"' <chapter.html>` or `jq '.[].imagePrompt' <slides.json>`).
+2. Draft replacements in a Claude Code conversation — do NOT call the Anthropic API from a script (uses Max plan credits, not API).
+3. Put the replacements into a JSON sidecar at `tmp/rewrites/<course>-<ch>.json` keyed by figure index or slide index. Values are either `"new prompt"` strings or `{"prompt": "...", "caption": "..."}` objects when the figcaption also needs updating to drop illustration-language ("field-guide reference", "in one plate", "boundary colours").
+4. Apply with `scripts/rewrite-image-prompts.ts <target> --rewrites <sidecar.json>`. The script preserves a `.pre-photo-rewrite` backup on first touch, reverts rendered chapter `<figure class="ch-figure">` blocks back to `<figure class="ai-image">` placeholder form, and patches `imagePrompt` fields in slide JSONs in place.
+5. Re-render: `scripts/render-ai-images.ts <chapter.html>` for chapter figures, `scripts/render-slides.ts <slides.json> --force` for slide images (the `--force` flag bypasses the idempotent skip-if-jpeg-exists check).
+
+Puppy (Almanac) and Sleep (Notebook) have both been done this way. The applied rewrites and rendered images are checked into `output/<slug>/chapters-<theme>/` and `output/<slug>/slides-<theme>/img/<chN>/`. Each `.pre-photo-rewrite` backup retains the original painterly prompt in case you ever want to roll back.
+
+## Cost watch
+
+First-wave painterly: Tea cost roughly **$19** in OpenAI image renders (76 slide + 12 chapter figures at gpt-image-2 high quality).
+
+Editorial-photo re-render of Puppy + Sleep added ~**$50** on top (32 chapter figures + ~210 slide images at gpt-image-2 high quality). Each chapter is ~$0.80 for its 2 figures; each slide deck is ~$3 for 13–14 slide images. Budget ~$25/course if you also re-render slides.
+
+## Known issues / wishlist for later
+
+- Puppy Ch1 widgets render correctly but were not stress-tested with screen readers
+- Tea slides include a few historical anecdotes (Linnaeus, Robert Bruce, Lu Yu) not in the original chapter audio — students hearing the audio + clicking through slides will get them as bonus context. Could be tightened in a polish pass
+- The CLI's `course.json` schema still references `themeId: 'ocean'` for all courses — needs migration to the new theme IDs when re-publishing
+- `chapters-press/` etc. are sibling directories to the original `chapters/` — the publish pipeline at `classbuild-cli/deploy-courses/` may need an update to point at the new directory
diff --git a/README.md b/README.md
index bf211a0..ce06833 100644
--- a/README.md
+++ b/README.md
@@ -50,7 +50,8 @@ Open [localhost:5173](http://localhost:5173).
 | Anthropic Claude | LLM provider = Anthropic, **OR** research backend = Claude web search | Course-content generation; Claude's built-in web search for the Research stage |
 | Ollama Cloud | LLM provider = Ollama Cloud | Course-content generation. Free tier doesn't include cloud models — see ollama.com/settings/keys |
 | Tavily | Research backend = Tavily | Web search for the Research stage. Free tier covers ~1,000 searches/month |
-| Google Gemini | Advanced mode + you want infographics or audiobook narration | TTS + image generation (optional) |
+| OpenAI | Advanced mode + you want slide images / chapter figures | Image generation (gpt-image-2, optional) |
+| ElevenLabs | Advanced mode + you want audiobook narration | Text-to-speech (optional) |
 
 The Wikipedia research backend needs no key.
 
@@ -71,7 +72,7 @@ The upstream ClassBuild also produces:
 - Gamified practice quiz with confidence calibration
 - In-class quiz (5 shuffled versions + answer keys)
 - PowerPoint slides with speaker notes
-- AI-narrated audiobook (Gemini TTS)
+- AI-narrated audiobook (ElevenLabs)
 - AI-generated infographic (Gemini)
 - Weekly mastery challenge with 6 question types and SCORM 2004 wrapper
 - Discussion starters and classroom activities
@@ -96,9 +97,15 @@ across the instrumented modules (parser, exporters, research backends,
 services, setup components). Pages — `BuildPage`, `SyllabusPage`,
 `ExportPage`, `ResearchPage` — are not yet instrumented for unit tests.
 
+### The no-template Canvas export
+
+Without an uploaded template, "Export for Canvas (.imscc)" writes a **native Canvas course export** — the same file layout Canvas's own exporter produces (`module_meta.xml`, `wiki_content/` pages, `non_cc_assessments/` quizzes, `assessment_meta.xml`, `assignment_groups.xml`, syllabus). This matters: a package carrying Canvas's `course_settings/canvas_export.txt` marker is read by Canvas's *native* importer, which silently ignores plain Common Cartridge manifest content, so a "generic" cartridge with that marker imports with no modules, pages or quizzes.
+
+Check any cartridge offline with `python tools/validate-imscc.py file.imscc` (it flags exactly that class of problem). To test imports end to end you need a Canvas with Instructure's QTIMigrationTool installed, otherwise quizzes are skipped silently.
+
 Current coverage:
 - `tests/template-parser.test.ts` — module classification (verbatim / pattern / example-pattern), prefix detection (`Module N:`, `MN Instructor Notes:`, fully-locked `Module N Overview`), `(Example to Edit)` placeholder marker, `**EDIT**` markers, example-pattern content extraction.
-- `tests/imscc-exporter.test.ts` — manifest shape, course_settings extension files, reading webcontent, QTI 1.2 quiz emission (practice + in-class + weekly challenge), Canvas auto-publish sidecars, native discussion topics.
+- `tests/imscc-exporter.test.ts` — the native-Canvas cartridge (the no-template export): module_meta/manifest consistency, reading as a Canvas Page, both QTI flavours per quiz with correct answers, graded vs practice quizzes + assignment group, published discussions, syllabus, deterministic ids, HTML escaping, slide-deck rendering rules.
 - `tests/template-imscc-exporter.test.ts` — round-trip: build template fixture → emit IMSCC → re-parse → verify verbatim modules preserved, pattern modules replaced, `web_resources/` + `lti_resource_links/` pass through. Outline-field overrides on title / syllabus body / manifest LOM.
 - `tests/parse-outline-docx.test.ts` — outline-DOCX field extraction with the LLM mocked: clean JSON, code-fenced JSON, partial / empty / malformed responses, char-cap on long input, provider override forwarding.
 - `tests/generate-template-chapter.test.ts` — Canvas Module generation with the LLM mocked: parse success / failure / missing-required-field, few-shot exemplar embedding, no-example case, Ollama provider plumbing, Anthropic Sonnet default.
@@ -107,7 +114,6 @@ Current coverage:
 - `tests/components/TemplateTitleEditor.test.tsx` — locked-prefix display, save reassembles `Module N: <suffix>` with prefix intact, blanking the suffix preserves just the prefix, off-pattern titles get a synthesized prefix, Reset rolls drafts back.
 - `tests/research-wikipedia.test.ts` — Wikipedia backend with LLM + `fetch` both mocked: query gen → per-query API call → synthesis call ordering, URL builder + dedup, `<span class="searchmatch">` snippet stripping, per-query failure doesn't abort batch, progress phase transitions, fallback query when query-gen returns nothing parseable.
 - `tests/research-tavily.test.ts` — Tavily backend with LLM + `fetch` both mocked: missing-key throw, POST body shape (`max_results`, `search_depth`, `include_answer`) + bearer auth, cross-query dedup by URL, content snippets feed into synthesis prompt, hits without a URL are dropped, per-query failure doesn't abort batch, progress phase order, `published_date` preserved as `pageAge`.
-- `tests/components/ApiKeyPanel.test.tsx` — provider toggle (Claude/Ollama) writes to apiStore, research backend toggle (Claude / Tavily / Wikipedia), hint text changes per selection, Ollama model input visibility gated on `provider==='ollama' && key.trim() !== ''`, model edits write through, auto-validate on mount POSTs to the right endpoints with bearer auth (Ollama → `/api/ollama-proxy`, Tavily → `api.tavily.com/search`, Gemini → `googleapis.com/.../models?key=…`), non-2xx sets `keyValid=false`, no re-validation when already validated or key is blank.
 - `tests/research-anthropic.test.ts` — Anthropic research backend with `streamWithRetry` mocked: streamWithRetry called with the Claude key + `web_search_20250305` tool + forced `provider:'anthropic'`, progress phases emitted in `thinking → searching → compiling` order, queries appended via `appendQueries`, streamed text appended via `appendSynthesisText`, dedup by URL across batches, `setLatestSource` is the last fresh hit, valid JSON parses into a dossier, malformed text falls back to a dossier built from collected web results.
 
 ## Deploying to production
@@ -203,7 +209,7 @@ src/
 
 ## Built with
 
-React 19 · Vite 7 · TypeScript 5.9 · Tailwind CSS 4 · Zustand · JSZip · mammoth.js · Claude (Sonnet 4.6 / Opus 4.6 / Haiku 4.5) · Ollama Cloud · Tavily · Gemini
+React 19 · Vite 7 · TypeScript 5.9 · Tailwind CSS 4 · Zustand · JSZip · mammoth.js · Claude (Opus 4.8 / Sonnet 4.6 / Haiku 4.5) · Ollama Cloud · Tavily · OpenAI gpt-image-2 · ElevenLabs
 
 ## Contributing
 
diff --git a/index.html b/index.html
index f9e994d..1ad3d10 100644
--- a/index.html
+++ b/index.html
@@ -2,10 +2,19 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="icon" href="/favicon.ico" sizes="any" />
+    <link rel="icon" type="image/svg+xml" href="/svg/favicon.svg" />
+    <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96.png" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+    <link rel="mask-icon" href="/svg/safari-pinned-tab.svg" color="#6e1f24" />
+    <link rel="manifest" href="/site.webmanifest" />
+    <meta name="msapplication-TileColor" content="#f1ebdd" />
+    <meta name="msapplication-config" content="/browserconfig.xml" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="description" content="Generate complete, multimedia courses from a single topic description. Powered by Claude and built on evidence-based learning science." />
-    <meta name="theme-color" content="#e13f2a" />
+    <meta name="theme-color" content="#f1ebdd" />
 
     <!-- Open Graph -->
     <meta property="og:type" content="website" />
@@ -13,6 +22,8 @@
     <meta property="og:title" content="CanvasClassBuild — AI Course Generator" />
     <meta property="og:description" content="Generate complete, multimedia courses from a single topic description. Powered by Claude and built on evidence-based learning science." />
     <meta property="og:image" content="https://classbuild.ai/og-image.png" />
+    <meta property="og:image:width" content="1200" />
+    <meta property="og:image:height" content="630" />
 
     <!-- Twitter Card -->
     <meta name="twitter:card" content="summary_large_image" />
diff --git a/public/android-chrome-192.png b/public/android-chrome-192.png
new file mode 100644
index 0000000..cb674b3
Binary files /dev/null and b/public/android-chrome-192.png differ
diff --git a/public/android-chrome-512.png b/public/android-chrome-512.png
new file mode 100644
index 0000000..9a8adfa
Binary files /dev/null and b/public/android-chrome-512.png differ
diff --git a/public/apple-touch-icon-120.png b/public/apple-touch-icon-120.png
new file mode 100644
index 0000000..badc351
Binary files /dev/null and b/public/apple-touch-icon-120.png differ
diff --git a/public/apple-touch-icon-152.png b/public/apple-touch-icon-152.png
new file mode 100644
index 0000000..703737d
Binary files /dev/null and b/public/apple-touch-icon-152.png differ
diff --git a/public/apple-touch-icon-167.png b/public/apple-touch-icon-167.png
new file mode 100644
index 0000000..9dcba50
Binary files /dev/null and b/public/apple-touch-icon-167.png differ
diff --git a/public/apple-touch-icon-180.png b/public/apple-touch-icon-180.png
new file mode 100644
index 0000000..0c2198e
Binary files /dev/null and b/public/apple-touch-icon-180.png differ
diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png
new file mode 100644
index 0000000..0c2198e
Binary files /dev/null and b/public/apple-touch-icon.png differ
diff --git a/public/browserconfig.xml b/public/browserconfig.xml
new file mode 100644
index 0000000..e768d0d
--- /dev/null
+++ b/public/browserconfig.xml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+  <msapplication>
+    <tile>
+      <square150x150logo src="/mstile-150.png"/>
+      <TileColor>#f1ebdd</TileColor>
+    </tile>
+  </msapplication>
+</browserconfig>
\ No newline at end of file
diff --git a/public/classbuild-colophon-simple.svg b/public/classbuild-colophon-simple.svg
new file mode 100644
index 0000000..c2d3c05
--- /dev/null
+++ b/public/classbuild-colophon-simple.svg
@@ -0,0 +1,10 @@
+<svg width="100" height="120" viewBox="0 0 100 120" xmlns="http://www.w3.org/2000/svg">
+  <rect x="0.5" y="0.5" width="99" height="119"
+        fill="none" stroke="#1a1814" stroke-width="1"/>
+  <text x="50" y="52" text-anchor="middle"
+        font-family="Newsreader, Georgia, serif"
+        font-size="62" font-weight="500" fill="#1a1814">C</text>
+  <text x="50" y="108" text-anchor="middle"
+        font-family="Newsreader, Georgia, serif"
+        font-size="62" font-weight="500" fill="#1a1814">B</text>
+</svg>
diff --git a/public/classbuild-colophon-vespers.svg b/public/classbuild-colophon-vespers.svg
new file mode 100644
index 0000000..a17f3df
--- /dev/null
+++ b/public/classbuild-colophon-vespers.svg
@@ -0,0 +1,27 @@
+<svg width="106" height="128" viewBox="0 0 106 128" xmlns="http://www.w3.org/2000/svg">
+  <!-- frame -->
+  <rect x="0.75" y="0.75" width="98.5" height="118.5"
+        fill="none" stroke="#ebe1cb" stroke-width="1.5"/>
+
+  <!-- C -->
+  <text x="50" y="54.4" text-anchor="middle"
+        font-family="Newsreader, Georgia, serif"
+        font-size="62" font-weight="500" fill="#ebe1cb">C</text>
+
+  <!-- fleuron, warm gold -->
+  <g transform="translate(50, 60)"
+     fill="none" stroke="#c6924e" stroke-width="1">
+    <line x1="-21" y1="0" x2="-5" y2="0"/>
+    <line x1="5" y1="0" x2="21" y2="0"/>
+    <circle r="2"/>
+    <path d="M -4 0 Q -2.5 -2 0 -1.5 Q 2.5 -2 4 0 Q 2.5 2 0 1.5 Q -2.5 2 -4 0 Z"/>
+  </g>
+
+  <!-- B -->
+  <text x="50" y="107.4" text-anchor="middle"
+        font-family="Newsreader, Georgia, serif"
+        font-size="62" font-weight="500" fill="#ebe1cb">B</text>
+
+  <!-- warm-gold imprint dot, outside frame -->
+  <circle cx="100" cy="122" r="5" fill="#c6924e"/>
+</svg>
diff --git a/public/classbuild-colophon.svg b/public/classbuild-colophon.svg
new file mode 100644
index 0000000..c300b53
--- /dev/null
+++ b/public/classbuild-colophon.svg
@@ -0,0 +1,27 @@
+<svg width="106" height="128" viewBox="0 0 106 128" xmlns="http://www.w3.org/2000/svg">
+  <!-- frame -->
+  <rect x="0.75" y="0.75" width="98.5" height="118.5"
+        fill="none" stroke="#1a1814" stroke-width="1.5"/>
+
+  <!-- C  (baseline pushed down 2.4 to balance imprint dot below) -->
+  <text x="50" y="54.4" text-anchor="middle"
+        font-family="Newsreader, Georgia, serif"
+        font-size="62" font-weight="500" fill="#1a1814">C</text>
+
+  <!-- fleuron, gilt -->
+  <g transform="translate(50, 60)"
+     fill="none" stroke="#a8854a" stroke-width="1">
+    <line x1="-21" y1="0" x2="-5" y2="0"/>
+    <line x1="5" y1="0" x2="21" y2="0"/>
+    <circle r="2"/>
+    <path d="M -4 0 Q -2.5 -2 0 -1.5 Q 2.5 -2 4 0 Q 2.5 2 0 1.5 Q -2.5 2 -4 0 Z"/>
+  </g>
+
+  <!-- B  (matching downward shift) -->
+  <text x="50" y="107.4" text-anchor="middle"
+        font-family="Newsreader, Georgia, serif"
+        font-size="62" font-weight="500" fill="#1a1814">B</text>
+
+  <!-- oxblood imprint dot, outside frame -->
+  <circle cx="100" cy="122" r="5" fill="#6e1f24"/>
+</svg>
diff --git a/public/classbuild_hero.png b/public/classbuild_hero.png
new file mode 100644
index 0000000..fd7ca9c
Binary files /dev/null and b/public/classbuild_hero.png differ
diff --git a/public/courses/game-theory.jpg b/public/courses/game-theory.jpg
index bc15cb5..12485f8 100644
Binary files a/public/courses/game-theory.jpg and b/public/courses/game-theory.jpg differ
diff --git a/public/courses/leadership-through-crisis.jpg b/public/courses/leadership-through-crisis.jpg
index f2a7d12..47e34e5 100644
Binary files a/public/courses/leadership-through-crisis.jpg and b/public/courses/leadership-through-crisis.jpg differ
diff --git a/public/courses/raising-a-puppy.jpg b/public/courses/raising-a-puppy.jpg
index 9d9b288..e5fc154 100644
Binary files a/public/courses/raising-a-puppy.jpg and b/public/courses/raising-a-puppy.jpg differ
diff --git a/public/courses/science-and-art-of-tea.jpg b/public/courses/science-and-art-of-tea.jpg
index 2d50267..5cbe3ee 100644
Binary files a/public/courses/science-and-art-of-tea.jpg and b/public/courses/science-and-art-of-tea.jpg differ
diff --git a/public/courses/training-for-your-first-marathon.jpg b/public/courses/training-for-your-first-marathon.jpg
index 05f1b75..318c871 100644
Binary files a/public/courses/training-for-your-first-marathon.jpg and b/public/courses/training-for-your-first-marathon.jpg differ
diff --git a/public/courses/understanding-your-sleep.jpg b/public/courses/understanding-your-sleep.jpg
index 98e087d..5ea4636 100644
Binary files a/public/courses/understanding-your-sleep.jpg and b/public/courses/understanding-your-sleep.jpg differ
diff --git a/public/favicon-16.png b/public/favicon-16.png
new file mode 100644
index 0000000..eb446e8
Binary files /dev/null and b/public/favicon-16.png differ
diff --git a/public/favicon-32.png b/public/favicon-32.png
new file mode 100644
index 0000000..ed973c1
Binary files /dev/null and b/public/favicon-32.png differ
diff --git a/public/favicon-48.png b/public/favicon-48.png
new file mode 100644
index 0000000..667191b
Binary files /dev/null and b/public/favicon-48.png differ
diff --git a/public/favicon-96.png b/public/favicon-96.png
new file mode 100644
index 0000000..2853fb5
Binary files /dev/null and b/public/favicon-96.png differ
diff --git a/public/favicon.ico b/public/favicon.ico
new file mode 100644
index 0000000..afb7290
Binary files /dev/null and b/public/favicon.ico differ
diff --git a/public/favicon.svg b/public/favicon.svg
deleted file mode 100644
index 178276d..0000000
--- a/public/favicon.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40">
-  <rect width="40" height="40" rx="8" fill="#0f0f1a"/>
-  <rect x="2" y="28" width="10" height="10" rx="2.5" fill="#8b5cf6"/>
-  <rect x="15" y="17" width="10" height="10" rx="2.5" fill="#a78bfa"/>
-  <rect x="28" y="6" width="10" height="10" rx="2.5" fill="#c4b5fd"/>
-</svg>
diff --git a/public/hero-bg.jpg b/public/hero-bg.jpg
deleted file mode 100644
index e3df7cf..0000000
Binary files a/public/hero-bg.jpg and /dev/null differ
diff --git a/public/hero.png b/public/hero.png
deleted file mode 100644
index 3819edd..0000000
Binary files a/public/hero.png and /dev/null differ
diff --git a/public/maskable-icon-192.png b/public/maskable-icon-192.png
new file mode 100644
index 0000000..a739656
Binary files /dev/null and b/public/maskable-icon-192.png differ
diff --git a/public/maskable-icon-512.png b/public/maskable-icon-512.png
new file mode 100644
index 0000000..2d593b7
Binary files /dev/null and b/public/maskable-icon-512.png differ
diff --git a/public/mstile-150.png b/public/mstile-150.png
new file mode 100644
index 0000000..e22cf14
Binary files /dev/null and b/public/mstile-150.png differ
diff --git a/public/og-image-2x.png b/public/og-image-2x.png
new file mode 100644
index 0000000..50d9ee8
Binary files /dev/null and b/public/og-image-2x.png differ
diff --git a/public/og-image.png b/public/og-image.png
index 203aea9..f7b2140 100644
Binary files a/public/og-image.png and b/public/og-image.png differ
diff --git a/public/preview-activities.jpg b/public/preview-activities.jpg
deleted file mode 100644
index b459380..0000000
Binary files a/public/preview-activities.jpg and /dev/null differ
diff --git a/public/preview-chapter.jpg b/public/preview-chapter.jpg
deleted file mode 100644
index 36d5c5a..0000000
Binary files a/public/preview-chapter.jpg and /dev/null differ
diff --git a/public/preview-quiz.jpg b/public/preview-quiz.jpg
deleted file mode 100644
index 18a36c8..0000000
Binary files a/public/preview-quiz.jpg and /dev/null differ
diff --git a/public/preview-slides.jpg b/public/preview-slides.jpg
deleted file mode 100644
index 42c377c..0000000
Binary files a/public/preview-slides.jpg and /dev/null differ
diff --git a/public/preview-syllabus.jpg b/public/preview-syllabus.jpg
deleted file mode 100644
index 5730512..0000000
Binary files a/public/preview-syllabus.jpg and /dev/null differ
diff --git a/public/site.webmanifest b/public/site.webmanifest
new file mode 100644
index 0000000..0a76ac4
--- /dev/null
+++ b/public/site.webmanifest
@@ -0,0 +1,35 @@
+{
+  "name": "ClassBuild",
+  "short_name": "ClassBuild",
+  "description": "A university-style course generator. Open source, BYOK, runs in your browser.",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#f1ebdd",
+  "theme_color": "#f1ebdd",
+  "icons": [
+    {
+      "src": "/android-chrome-192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "/android-chrome-512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "/maskable-icon-192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "/maskable-icon-512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/public/svg/classbuild-colophon-square.svg b/public/svg/classbuild-colophon-square.svg
new file mode 100644
index 0000000..712531a
--- /dev/null
+++ b/public/svg/classbuild-colophon-square.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 144" width="144" height="144">
+  <rect width="144" height="144" fill="#f1ebdd"></rect>
+  <g transform="translate(22, 12)"><rect x="0.75" y="0.75" width="98.5" height="118.5" fill="none" stroke="#1a1814" stroke-width="1.5"></rect>
+       <text x="50" y="54.4" text-anchor="middle" font-family="Newsreader, Georgia, serif" font-size="62" font-weight="500" fill="#1a1814">C</text>
+       <g transform="translate(50, 60)" fill="none" stroke="#a8854a" stroke-width="1" stroke-linecap="round">
+         <line x1="-21" y1="0" x2="-5" y2="0"></line>
+         <line x1="5" y1="0" x2="21" y2="0"></line>
+         <circle r="2"></circle>
+         <path d="M -4 0 Q -2.5 -2 0 -1.5 Q 2.5 -2 4 0 Q 2.5 2 0 1.5 Q -2.5 2 -4 0 Z"></path>
+       </g>
+       <text x="50" y="107.4" text-anchor="middle" font-family="Newsreader, Georgia, serif" font-size="62" font-weight="500" fill="#1a1814">B</text>
+       <circle cx="100" cy="122" r="5" fill="#6e1f24"></circle></g>
+</svg>
\ No newline at end of file
diff --git a/public/svg/classbuild-colophon.svg b/public/svg/classbuild-colophon.svg
new file mode 100644
index 0000000..9fd0ee5
--- /dev/null
+++ b/public/svg/classbuild-colophon.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 120" width="100" height="120">
+  
+  <g transform="translate(0, 0)">
+    <rect x="0.75" y="0.75" width="98.5" height="118.5" fill="none" stroke="#1a1814" stroke-width="1.5"></rect>
+    <text x="50" y="54.4" text-anchor="middle" font-family="Newsreader, Georgia, serif" font-size="62" font-weight="500" fill="#1a1814">C</text>
+    <g transform="translate(50, 60)" fill="none" stroke="#a8854a" stroke-width="1" stroke-linecap="round">
+      <line x1="-21" y1="0" x2="-5" y2="0"></line>
+      <line x1="5" y1="0" x2="21" y2="0"></line>
+      <circle r="2"></circle>
+      <path d="M -4 0 Q -2.5 -2 0 -1.5 Q 2.5 -2 4 0 Q 2.5 2 0 1.5 Q -2.5 2 -4 0 Z"></path>
+    </g>
+    <text x="50" y="107.4" text-anchor="middle" font-family="Newsreader, Georgia, serif" font-size="62" font-weight="500" fill="#1a1814">B</text>
+    <circle cx="100" cy="122" r="5" fill="#6e1f24"></circle>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/public/svg/favicon.svg b/public/svg/favicon.svg
new file mode 100644
index 0000000..712531a
--- /dev/null
+++ b/public/svg/favicon.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 144" width="144" height="144">
+  <rect width="144" height="144" fill="#f1ebdd"></rect>
+  <g transform="translate(22, 12)"><rect x="0.75" y="0.75" width="98.5" height="118.5" fill="none" stroke="#1a1814" stroke-width="1.5"></rect>
+       <text x="50" y="54.4" text-anchor="middle" font-family="Newsreader, Georgia, serif" font-size="62" font-weight="500" fill="#1a1814">C</text>
+       <g transform="translate(50, 60)" fill="none" stroke="#a8854a" stroke-width="1" stroke-linecap="round">
+         <line x1="-21" y1="0" x2="-5" y2="0"></line>
+         <line x1="5" y1="0" x2="21" y2="0"></line>
+         <circle r="2"></circle>
+         <path d="M -4 0 Q -2.5 -2 0 -1.5 Q 2.5 -2 4 0 Q 2.5 2 0 1.5 Q -2.5 2 -4 0 Z"></path>
+       </g>
+       <text x="50" y="107.4" text-anchor="middle" font-family="Newsreader, Georgia, serif" font-size="62" font-weight="500" fill="#1a1814">B</text>
+       <circle cx="100" cy="122" r="5" fill="#6e1f24"></circle></g>
+</svg>
\ No newline at end of file
diff --git a/public/svg/og-image.svg b/public/svg/og-image.svg
new file mode 100644
index 0000000..9b46601
--- /dev/null
+++ b/public/svg/og-image.svg
@@ -0,0 +1,35 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 630" width="1200" height="630">
+  <rect width="1200" height="630" fill="#f1ebdd"></rect>
+
+  
+  <line x1="120" y1="540" x2="1080" y2="540" stroke="#1a1814" stroke-opacity="0.55" stroke-width="0.5"></line>
+  <text x="120" y="572" font-family="Newsreader, Georgia, serif" font-size="20" font-style="italic" fill="#5d574a">
+    A university-style course generator. Open source. BYOK.
+  </text>
+  <text x="1080" y="572" text-anchor="end" font-family="JetBrains Mono, ui-monospace, monospace" font-size="14" fill="#5d574a" letter-spacing="1">
+    v0.2 · MIT · 2026
+  </text>
+
+  
+  <g transform="translate(120, 180) scale(2.0)">
+    <rect x="0.75" y="0.75" width="98.5" height="118.5" fill="none" stroke="#1a1814" stroke-width="1.5"></rect>
+    <text x="50" y="54.4" text-anchor="middle" font-family="Newsreader, Georgia, serif" font-size="62" font-weight="500" fill="#1a1814">C</text>
+    <g transform="translate(50, 60)" fill="none" stroke="#a8854a" stroke-width="1" stroke-linecap="round">
+      <line x1="-21" y1="0" x2="-5" y2="0"></line>
+      <line x1="5" y1="0" x2="21" y2="0"></line>
+      <circle r="2"></circle>
+      <path d="M -4 0 Q -2.5 -2 0 -1.5 Q 2.5 -2 4 0 Q 2.5 2 0 1.5 Q -2.5 2 -4 0 Z"></path>
+    </g>
+    <text x="50" y="107.4" text-anchor="middle" font-family="Newsreader, Georgia, serif" font-size="62" font-weight="500" fill="#1a1814">B</text>
+    <circle cx="100" cy="122" r="5" fill="#6e1f24"></circle>
+  </g>
+
+  
+  <text x="400" y="330" font-family="Newsreader, Georgia, serif" font-style="italic" font-weight="500" font-size="160" fill="#1a1814" letter-spacing="-1">
+    ClassBuild<tspan fill="#6e1f24">.</tspan>
+  </text>
+  <text x="400" y="395" font-family="Newsreader, Georgia, serif" font-style="italic" font-size="36" fill="#5d574a">
+    A course, considered.
+  </text>
+</svg>
\ No newline at end of file
diff --git a/public/svg/safari-pinned-tab.svg b/public/svg/safari-pinned-tab.svg
new file mode 100644
index 0000000..f8865cf
--- /dev/null
+++ b/public/svg/safari-pinned-tab.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 120" width="100" height="120">
+  
+  <rect x="0.5" y="0.5" width="99" height="119" fill="none" stroke="#000" stroke-width="1.2"></rect>
+  <text x="50" y="52" text-anchor="middle" font-family="Newsreader, Georgia, serif" font-size="62" font-weight="500" fill="#000">C</text>
+  <text x="50" y="108" text-anchor="middle" font-family="Newsreader, Georgia, serif" font-size="62" font-weight="500" fill="#000">B</text>
+</svg>
\ No newline at end of file
diff --git a/public/voices/charon.wav b/public/voices/charon.wav
deleted file mode 100644
index bf60f3c..0000000
Binary files a/public/voices/charon.wav and /dev/null differ
diff --git a/public/voices/kore.wav b/public/voices/kore.wav
deleted file mode 100644
index 786f92d..0000000
Binary files a/public/voices/kore.wav and /dev/null differ
diff --git a/public/voices/leda.wav b/public/voices/leda.wav
deleted file mode 100644
index abbf127..0000000
Binary files a/public/voices/leda.wav and /dev/null differ
diff --git a/public/voices/puck.wav b/public/voices/puck.wav
deleted file mode 100644
index a333e30..0000000
Binary files a/public/voices/puck.wav and /dev/null differ
diff --git a/public/voices/rasalgethi.wav b/public/voices/rasalgethi.wav
deleted file mode 100644
index a902646..0000000
Binary files a/public/voices/rasalgethi.wav and /dev/null differ
diff --git a/public/voices/sulafat.wav b/public/voices/sulafat.wav
deleted file mode 100644
index f0ff893..0000000
Binary files a/public/voices/sulafat.wav and /dev/null differ
diff --git a/scripts/build-image-pptx.ts b/scripts/build-image-pptx.ts
new file mode 100644
index 0000000..a8a12f9
--- /dev/null
+++ b/scripts/build-image-pptx.ts
@@ -0,0 +1,84 @@
+/**
+ * Build a full-bleed IMAGE deck (.pptx) from already-rendered slide images.
+ *
+ * The new slide system renders each slide as a single editorial image
+ * (slides-<theme>/img/chNN/slide-MM.jpg). This packs those images — which
+ * already exist on disk — into a 16:9 .pptx where each slide is the full-bleed
+ * image plus the AI-written speaker notes. It does NOT call OpenAI; it reuses
+ * the rendered JPEGs, so it's fast and free.
+ *
+ *   npx tsx scripts/build-image-pptx.ts \
+ *     output/game-theory/slides-terminal/01_slides.json
+ *
+ * Image dir is inferred as <slides-dir>/img/ch<NN>/slide-<MM>.jpg.
+ * Output .pptx is written next to the JSON: <NN>_slides.pptx.
+ */
+import fs from 'node:fs/promises';
+import path from 'node:path';
+import PptxGenJS from 'pptxgenjs';
+
+interface Slide {
+  title?: string;
+  imagePrompt?: string;
+  speakerNotes?: string;
+}
+
+function pad(n: number): string {
+  return String(n).padStart(2, '0');
+}
+
+async function fileToDataUri(p: string): Promise<string | null> {
+  try {
+    const buf = await fs.readFile(p);
+    return `data:image/jpeg;base64,${buf.toString('base64')}`;
+  } catch {
+    return null;
+  }
+}
+
+export async function buildImagePptx(jsonPath: string): Promise<string> {
+  const abs = path.resolve(jsonPath);
+  const slidesDir = path.dirname(abs);
+  const stem = path.basename(abs, '.json').match(/^(\d+)/)?.[1] ?? '01';
+  const imgDir = path.join(slidesDir, 'img', `ch${stem}`);
+
+  const slides = JSON.parse(await fs.readFile(abs, 'utf8')) as Slide[];
+
+  // CJS/ESM interop guard (matches the repo's existing pptxExporter).
+  const Ctor = typeof PptxGenJS === 'function' ? PptxGenJS : (PptxGenJS as unknown as { default: typeof PptxGenJS }).default;
+  const pptx = new Ctor();
+  pptx.author = 'ClassBuild';
+  pptx.layout = 'LAYOUT_WIDE'; // 13.333 × 7.5in, 16:9
+  const W = 13.333, H = 7.5;
+
+  let withImg = 0, missing = 0;
+  for (let i = 0; i < slides.length; i++) {
+    const s = pptx.addSlide();
+    const imgPath = path.join(imgDir, `slide-${pad(i + 1)}.jpg`);
+    const dataUri = await fileToDataUri(imgPath);
+    if (dataUri) {
+      s.addImage({ data: dataUri, x: 0, y: 0, w: W, h: H, sizing: { type: 'cover', w: W, h: H } });
+      withImg++;
+    } else {
+      s.background = { color: 'FFF8E7' };
+      s.addText(slides[i].title ?? `Slide ${i + 1}`, {
+        x: 0.8, y: 0.8, w: W - 1.6, h: 1.4, fontSize: 34, fontFace: 'Georgia', color: '1C2F4A',
+      });
+      missing++;
+    }
+    if (slides[i].speakerNotes?.trim()) s.addNotes(slides[i].speakerNotes!.trim());
+  }
+
+  const outPath = path.join(slidesDir, `${stem}_slides.pptx`);
+  const blob = await pptx.write({ outputType: 'nodebuffer' }) as Buffer;
+  await fs.writeFile(outPath, blob);
+  console.log(`✓ ${path.basename(outPath)} — ${withImg} image slides${missing ? `, ${missing} text-fallback` : ''} (${(blob.length / 1024).toFixed(0)} KB)`);
+  return outPath;
+}
+
+// CLI entry: only run when invoked directly, not when imported.
+if (process.argv[1] && path.resolve(process.argv[1]) === path.resolve(import.meta.url.replace('file://', ''))) {
+  const jsonPath = process.argv.slice(2).find((a) => !a.startsWith('-'));
+  if (!jsonPath) { console.error('usage: tsx build-image-pptx.ts <slides.json>'); process.exit(2); }
+  buildImagePptx(jsonPath).catch((err) => { console.error(err); process.exit(1); });
+}
diff --git a/scripts/build-staging.ts b/scripts/build-staging.ts
new file mode 100644
index 0000000..0dc7bbf
--- /dev/null
+++ b/scripts/build-staging.ts
@@ -0,0 +1,94 @@
+/**
+ * Rebuild the 6 example-course bundles from their themed content (new editorial
+ * chapter figures + slide images) into a STAGING dir — tmp/staging-deploy/ —
+ * without touching the live deploy-courses/. Review staging, then promote.
+ *
+ *   npx tsx scripts/build-staging.ts              # all 6 courses
+ *   npx tsx scripts/build-staging.ts game-theory  # one course
+ *
+ * Per course: build full-bleed image PPTX decks from rendered slide images,
+ * assemble the publish package from the themed chapter/slide dirs (copying
+ * chapter figure images + slide images into the bundle), and copy the result
+ * into the staging tree. Finally copies the landing index.html + thumbnails.
+ */
+import { assemblePublishPackage } from './lib/publish';
+import { buildImagePptx } from './build-image-pptx';
+import { buildLandingHtml } from './lib/codexLandingTemplate';
+import { cp, rm, mkdir, readdir, access, writeFile } from 'node:fs/promises';
+import { join } from 'node:path';
+import { execSync } from 'node:child_process';
+
+interface Course { slug: string; theme: string; label: string; slidesSub: string; }
+
+const COURSES: Course[] = [
+  { slug: 'game-theory', theme: 'terminal', label: 'Terminal', slidesSub: 'slides-terminal' },
+  { slug: 'leadership-through-crisis', theme: 'studio', label: 'Studio', slidesSub: 'slides-studio' },
+  { slug: 'raising-a-puppy', theme: 'almanac', label: 'Almanac', slidesSub: 'slides-almanac' },
+  { slug: 'science-and-art-of-tea', theme: 'press', label: 'Press', slidesSub: 'slides-new' },
+  { slug: 'training-for-your-first-marathon', theme: 'storybook', label: 'Storybook', slidesSub: 'slides-storybook' },
+  { slug: 'understanding-your-sleep', theme: 'notebook', label: 'Notebook', slidesSub: 'slides-notebook' },
+];
+
+const THUMBS_DIR = '../classbuild/public/courses';
+
+const STAGING = 'tmp/staging-deploy';
+
+async function exists(p: string): Promise<boolean> {
+  try { await access(p); return true; } catch { return false; }
+}
+
+async function main() {
+  const only = process.argv.slice(2).find((a) => !a.startsWith('-'));
+
+  // Build themed practice-quiz + weekly-challenge HTML in each course's CHAPTER
+  // theme via the SPA templates (run under Vite so the theme ?raw CSS imports
+  // resolve). Codex is the viewer chrome only — never a downloadable output.
+  console.log('Rendering themed quiz + challenge HTML (SPA templates via Vite)…');
+  execSync(`node tools/render-themed-artifacts.mjs ${only ?? ''}`.trim(), {
+    cwd: '../classbuild',
+    stdio: 'inherit',
+  });
+
+  for (const c of COURSES) {
+    if (only && c.slug !== only) continue;
+    const outputDir = `output/${c.slug}`;
+    const chaptersDir = `${outputDir}/chapters-${c.theme}`;
+    const slidesDir = `${outputDir}/${c.slidesSub}`;
+    console.log(`\n======== ${c.slug} (${c.theme}) ========`);
+
+    // 1. Build full-bleed image PPTX for each deck from rendered slide images.
+    const deckFiles = (await readdir(slidesDir)).filter((f) => /^\d+_slides\.json$/.test(f)).sort();
+    for (const d of deckFiles) {
+      await buildImagePptx(join(slidesDir, d));
+    }
+
+    // 2. Assemble the Codex showcase package from themed content.
+    const publishDir = await assemblePublishPackage(outputDir, undefined, {
+      codex: true,
+      themeLabel: c.label,
+      chaptersDir,
+      slidesDir,
+      chapterImgDir: `${chaptersDir}/img`,
+      slideImgRootDir: `${slidesDir}/img`,
+      pptxSrcDir: slidesDir,
+    });
+
+    // 3. Copy into the staging tree (fresh).
+    const dest = `${STAGING}/${c.slug}`;
+    await rm(dest, { recursive: true, force: true });
+    await mkdir(dest, { recursive: true });
+    await cp(publishDir, dest, { recursive: true });
+    console.log(`→ staged ${dest}`);
+  }
+
+  // Codex landing page + new thumbnails.
+  await mkdir(STAGING, { recursive: true });
+  await writeFile(`${STAGING}/index.html`, buildLandingHtml(), 'utf8');
+  for (const c of COURSES) {
+    const thumb = `${THUMBS_DIR}/${c.slug}.jpg`;
+    if (await exists(thumb)) await cp(thumb, `${STAGING}/${c.slug}.jpg`);
+  }
+  console.log(`\nStaging tree ready at ${STAGING}/`);
+}
+
+main().catch((err) => { console.error(err); process.exit(1); });
diff --git a/scripts/gen-audio.ts b/scripts/gen-audio.ts
index fb48bc3..1c6f5ae 100644
--- a/scripts/gen-audio.ts
+++ b/scripts/gen-audio.ts
@@ -1,58 +1,39 @@
 #!/usr/bin/env node
 /**
- * One-off: generate Gemini TTS audiobooks for every chapter that has a
- * transcript but no audio file yet. Writes WAV, then transcodes to MP3 via
- * ffmpeg (if available).
+ * One-off: generate ElevenLabs audiobooks for every chapter that has a
+ * transcript but no audio file yet. Native MP3 output — no transcoding step.
  *
- * Usage: GEMINI_API_KEY=... npx tsx scripts/gen-audio.ts ./output/my-course [voiceName]
+ * Usage: ELEVENLABS_API_KEY=... npx tsx scripts/gen-audio.ts ./output/my-course [voiceId]
  */
-import { readFile, writeFile, unlink } from 'node:fs/promises';
+import { readFile, writeFile } from 'node:fs/promises';
 import { join } from 'node:path';
 import { existsSync, readdirSync } from 'node:fs';
-import { promisify } from 'node:util';
-import { execFile } from 'node:child_process';
-import { generateAudiobook } from '../src/services/gemini/tts';
+import { generateAudiobook } from '../src/services/elevenLabs/tts';
 import { getVoiceOption } from '../src/themes';
 
-const execFileAsync = promisify(execFile);
-
-const GEMINI_API_KEY = process.env.GEMINI_API_KEY;
-if (!GEMINI_API_KEY) {
-  console.error('Error: GEMINI_API_KEY environment variable is required');
+const ELEVENLABS_API_KEY = process.env.ELEVENLABS_API_KEY;
+if (!ELEVENLABS_API_KEY) {
+  console.error('Error: ELEVENLABS_API_KEY environment variable is required');
   process.exit(1);
 }
 
 const OUTPUT_DIR = process.argv[2] || './output/raising-a-puppy';
-const VOICE_NAME = process.argv[3] || undefined; // uses default (Kore) if not set
+const VOICE_ID = process.argv[3] || undefined;
 const AUDIO_DIR = join(OUTPUT_DIR, 'audio');
 
-async function wavToMp3(wavPath: string): Promise<string> {
-  const mp3Path = wavPath.replace(/\.wav$/, '.mp3');
-  try {
-    await execFileAsync('ffmpeg', ['-y', '-i', wavPath, '-codec:a', 'libmp3lame', '-qscale:a', '2', mp3Path]);
-    await unlink(wavPath);
-    return mp3Path;
-  } catch {
-    console.log('  Warning: ffmpeg not available — keeping WAV output');
-    try { await unlink(mp3Path); } catch { /* ignore */ }
-    return wavPath;
-  }
-}
-
 async function main() {
   const files = readdirSync(AUDIO_DIR)
     .filter((f: string) => f.endsWith('_transcript.md'))
     .sort();
 
   console.log(`Found ${files.length} transcripts in ${AUDIO_DIR}`);
-  if (VOICE_NAME) console.log(`Using voice: ${VOICE_NAME}`);
+  if (VOICE_ID) console.log(`Using voice id: ${VOICE_ID}`);
 
   for (const file of files) {
     const prefix = file.replace('_transcript.md', '');
     const mp3Path = join(AUDIO_DIR, `${prefix}.mp3`);
-    const wavPath = join(AUDIO_DIR, `${prefix}.wav`);
 
-    if (existsSync(mp3Path) || existsSync(wavPath)) {
+    if (existsSync(mp3Path)) {
       console.log(`  ${prefix}: audio already exists, skipping`);
       continue;
     }
@@ -62,19 +43,18 @@ async function main() {
 
     console.log(`  ${prefix}: Generating audio (${transcript.length} chars)...`);
     try {
-      const voice = getVoiceOption(VOICE_NAME);
-      const audioBlob = await generateAudiobook(transcript, GEMINI_API_KEY!, {
-        voiceName: voice.id,
-        accent: voice.accent,
-        onProgress: (current, total) => process.stdout.write(`    chunk ${current}/${total}\r`),
+      const voice = getVoiceOption(VOICE_ID);
+      const audioBlob = await generateAudiobook(transcript, ELEVENLABS_API_KEY!, {
+        voiceId: voice.id,
+        onProgress: (current, total) =>
+          process.stdout.write(`    chunk ${current}/${total}\r`),
       });
       console.log('');
 
       const arrayBuffer = await audioBlob.arrayBuffer();
-      await writeFile(wavPath, Buffer.from(arrayBuffer));
-      const finalPath = await wavToMp3(wavPath);
+      await writeFile(mp3Path, Buffer.from(arrayBuffer));
       const sizeMb = (arrayBuffer.byteLength / 1024 / 1024).toFixed(1);
-      console.log(`  ${prefix}: Saved ${finalPath.endsWith('.mp3') ? 'MP3' : 'WAV'} (${sizeMb} MB source)`);
+      console.log(`  ${prefix}: Saved MP3 (${sizeMb} MB)`);
     } catch (err) {
       console.error(`  ${prefix}: ERROR — ${err instanceof Error ? err.message : String(err)}`);
     }
@@ -83,4 +63,7 @@ async function main() {
   console.log('Done!');
 }
 
-main().catch(err => { console.error(err); process.exit(1); });
+main().catch((err) => {
+  console.error(err);
+  process.exit(1);
+});
diff --git a/scripts/generate-course.ts b/scripts/generate-course.ts
index a92a77d..1ca12b1 100644
--- a/scripts/generate-course.ts
+++ b/scripts/generate-course.ts
@@ -19,16 +19,15 @@
  *     --output ./output/prejudice
  */
 
-import { writeFile, mkdir, readFile, unlink } from 'node:fs/promises';
+import { writeFile, mkdir, readFile } from 'node:fs/promises';
 import { join } from 'node:path';
-import { parseArgs, promisify } from 'node:util';
-import { execFile } from 'node:child_process';
+import { parseArgs } from 'node:util';
 
 import { streamWithRetry } from '../src/services/claude/streaming';
 import { MODELS } from '../src/services/claude/client';
 import { buildSyllabusPrompt, parseSyllabusResponse } from '../src/prompts/syllabus';
 import { buildChapterPrompt, buildChapterUserPrompt } from '../src/prompts/chapter';
-import { replaceGeminiImagePlaceholdersNode } from './lib/node-image-placer';
+import { replaceAiImagePlaceholdersNode } from './lib/node-image-placer';
 import { buildPracticeQuizPrompt, buildPracticeQuizUserPrompt } from '../src/prompts/practiceQuiz';
 import { buildInClassQuizPrompt, buildInClassQuizUserPrompt } from '../src/prompts/inClassQuiz';
 import { buildDiscussionPrompt, buildDiscussionUserPrompt } from '../src/prompts/discussion';
@@ -38,15 +37,26 @@ import { buildSlidesPrompt, buildSlidesUserPrompt } from '../src/prompts/slides'
 import { buildInfographicMetaPrompt, buildInfographicMetaUserPrompt } from '../src/prompts/infographic';
 import { buildWeeklyChallengePrompt, buildWeeklyChallengeUserPrompt } from '../src/prompts/weeklyChallenge';
 import { RESEARCH_SYSTEM_PROMPT, buildResearchUserPrompt, parseResearchResponse } from '../src/prompts/research';
+import {
+  buildLearningObjectivesPrompt,
+  buildLearningObjectivesUserPrompt,
+  parseCurriculumMapResponse,
+} from '../src/prompts/learningObjectives';
+import {
+  buildOutcomesPage,
+  buildOutcomesCsv,
+  hashSyllabus,
+} from '../src/templates/outcomesTableTemplate';
 import { balancePracticeQuiz, balanceInClassQuiz } from '../src/services/quiz/answerBalancer';
 import { buildQuizHtml } from '../src/templates/quizTemplate';
 import { buildWeeklyChallengeHtml } from '../src/templates/weeklyChallengeTemplate';
 import { generateQuizDocPackage } from '../src/services/export/quizDocExporter';
 import { generatePptx } from '../src/services/export/pptxExporter';
-import { validateDois } from '../src/utils/doiValidator';
+import { enrichDossier } from '../src/services/academic';
 import { generateInfographicNode } from './lib/node-image';
 import { buildDiscussionDocx, buildActivitiesDocx, buildTranscriptDocx, buildResearchDocx, buildSyllabusDocx } from './lib/docx-helpers';
 import { slugify, extractHtml, parseJson } from '../src/utils/format';
+import { renderChapterHtml } from '../src/themes';
 
 import type {
   CourseSetup,
@@ -60,8 +70,6 @@ import type {
   WeeklyChallengeData,
 } from '../src/types/course';
 
-const execFileAsync = promisify(execFile);
-
 // ─── CLI Arg Parsing ──────────────────────────────────────────────
 
 const { values } = parseArgs({
@@ -70,7 +78,7 @@ const { values } = parseArgs({
     chapters: { type: 'string', default: '12' },
     level: { type: 'string', default: 'advanced-undergrad' },
     output: { type: 'string', default: './output' },
-    theme: { type: 'string', default: 'midnight' },
+    theme: { type: 'string', default: 'press' },
     length: { type: 'string', default: 'standard' },
     widgets: { type: 'string', default: '3' },
     cohort: { type: 'string', default: '60' },
@@ -96,7 +104,8 @@ if (!values.topic) {
 }
 
 const ANTHROPIC_API_KEY = process.env.ANTHROPIC_API_KEY;
-const GEMINI_API_KEY = process.env.GEMINI_API_KEY;
+const OPENAI_API_KEY = process.env.OPENAI_API_KEY;
+const ELEVENLABS_API_KEY = process.env.ELEVENLABS_API_KEY;
 
 if (!ANTHROPIC_API_KEY) {
   console.error('Error: ANTHROPIC_API_KEY environment variable is required');
@@ -175,25 +184,6 @@ async function runWithConcurrency<T>(tasks: Task<T>[], limit: number): Promise<P
   return results;
 }
 
-// ─── ffmpeg WAV → MP3 transcode ──────────────────────────────────
-
-/**
- * Transcode the given WAV file to MP3 and return the final file path.
- * Falls back to the source WAV if ffmpeg is not installed.
- */
-async function wavToMp3(wavPath: string): Promise<string> {
-  const mp3Path = wavPath.replace(/\.wav$/, '.mp3');
-  try {
-    await execFileAsync('ffmpeg', ['-y', '-i', wavPath, '-codec:a', 'libmp3lame', '-qscale:a', '2', mp3Path]);
-    await unlink(wavPath);
-    return mp3Path;
-  } catch {
-    log('    Warning: ffmpeg not available — keeping WAV (install ffmpeg for MP3 output)');
-    try { await unlink(mp3Path); } catch { /* ignore */ }
-    return wavPath;
-  }
-}
-
 // ─── Human-readable formatters ────────────────────────────────────
 
 function formatSyllabusMd(syllabus: Syllabus): string {
@@ -548,23 +538,21 @@ async function generateAudio(
     log(`    Ch ${prefix} Transcript DOCX error: ${err instanceof Error ? err.message : String(err)}`);
   }
 
-  // TTS if Gemini key available
-  if (GEMINI_API_KEY) {
-    log(`    Ch ${prefix} Synthesizing audio with Gemini TTS...`);
+  // TTS if ElevenLabs key available
+  if (ELEVENLABS_API_KEY) {
+    log(`    Ch ${prefix} Synthesizing audio with ElevenLabs...`);
     try {
-      const { generateAudiobook } = await import('../src/services/gemini/tts');
+      const { generateAudiobook } = await import('../src/services/elevenLabs/tts');
       const { getVoiceOption } = await import('../src/themes');
       const voice = getVoiceOption(setup.voiceId);
-      const audioBlob = await generateAudiobook(transcriptText, GEMINI_API_KEY, {
-        voiceName: voice.id,
-        accent: voice.accent,
+      const audioBlob = await generateAudiobook(transcriptText, ELEVENLABS_API_KEY, {
+        voiceId: voice.id,
         onProgress: (current, total) => log(`      Ch ${prefix} TTS chunk ${current}/${total}`),
       });
       const arrayBuffer = await audioBlob.arrayBuffer();
-      const wavPath = join(OUTPUT_DIR, 'audio', `${prefix}.wav`);
-      await save(wavPath, Buffer.from(arrayBuffer));
-      const finalPath = await wavToMp3(wavPath);
-      log(`    Ch ${prefix} Saved ${finalPath.endsWith('.mp3') ? 'MP3' : 'WAV'} audio`);
+      const mp3Path = join(OUTPUT_DIR, 'audio', `${prefix}.mp3`);
+      await save(mp3Path, Buffer.from(arrayBuffer));
+      log(`    Ch ${prefix} Saved MP3 audio (ElevenLabs)`);
     } catch (err) {
       log(`    Ch ${prefix} TTS error: ${err instanceof Error ? err.message : String(err)}`);
     }
@@ -582,7 +570,7 @@ async function generateSlides(
   const slidesText = await streamWithRetry(
     {
       apiKey: ANTHROPIC_API_KEY!,
-      system: buildSlidesPrompt(),
+      system: buildSlidesPrompt(setup.themeId),
       messages: [{
         role: 'user',
         content: buildSlidesUserPrompt(ch.title, ch.keyConcepts, chapterHtml),
@@ -598,8 +586,24 @@ async function generateSlides(
   await save(join(OUTPUT_DIR, 'slides', `${prefix}_slides.md`), formatSlidesMd(slides, ch.title));
   await save(join(OUTPUT_DIR, 'slides', `${prefix}_slides.json`), JSON.stringify(slides, null, 2));
 
+  if (!OPENAI_API_KEY) {
+    log(`    Ch ${prefix} Skipped PPTX render (no OPENAI_API_KEY for slide images)`);
+    return;
+  }
   try {
-    const pptxBlob = await generatePptx(slides, syllabus.courseTitle, ch.title, setup.themeId);
+    const { blob: pptxBlob } = await generatePptx(
+      slides,
+      syllabus.courseTitle,
+      ch.title,
+      setup.themeId,
+      OPENAI_API_KEY,
+      {
+        imageQuality: 'high',
+        imageSize: '3840x2160',
+        onProgress: (i, total, phase) =>
+          log(`      Ch ${prefix} slide ${phase} ${i}/${total}`),
+      },
+    );
     const pptxBuffer = Buffer.from(await pptxBlob.arrayBuffer());
     await save(join(OUTPUT_DIR, 'slides', `${prefix}_slides.pptx`), pptxBuffer);
     log(`    Ch ${prefix} Saved slides (+ PPTX)`);
@@ -613,7 +617,7 @@ async function generateInfographic(
   chapterHtml: string,
   prefix: string,
 ) {
-  if (!GEMINI_API_KEY) return;
+  if (!OPENAI_API_KEY) return;
 
   log(`  Ch ${prefix} Infographic...`);
   // Phase 1: generate the prompt
@@ -634,7 +638,10 @@ async function generateInfographic(
   console.log('');
 
   // Phase 2: generate the image
-  const { base64, mimeType } = await generateInfographicNode(promptText, GEMINI_API_KEY);
+  const { base64, mimeType } = await generateInfographicNode(promptText, OPENAI_API_KEY, {
+    size: '3840x2160',
+    quality: 'high',
+  });
   const ext = mimeType.includes('png') ? 'png' : 'jpg';
   await save(
     join(OUTPUT_DIR, 'infographic', `${prefix}.${ext}`),
@@ -665,7 +672,7 @@ async function generateChapterMaterials(
     { label: `Ch${prefix}-audio`, fn: () => generateAudio(ch, chapterHtml, syllabus, prefix) },
     { label: `Ch${prefix}-slides`, fn: () => generateSlides(ch, chapterHtml, syllabus, prefix) },
   ];
-  if (GEMINI_API_KEY) {
+  if (OPENAI_API_KEY) {
     sonnetTasks.push({ label: `Ch${prefix}-infographic`, fn: () => generateInfographic(ch, chapterHtml, prefix) });
   }
 
@@ -709,19 +716,19 @@ async function researchChapter(ch: ChapterSyllabus, syllabus: Syllabus): Promise
       };
     }
 
-    // Validate DOIs
-    const dois = dossier.sources.map(s => s.doi).filter((d): d is string => !!d);
-    if (dois.length > 0) {
+    // Verify + enrich sources against Semantic Scholar, Crossref, Unpaywall.
+    if (dossier.sources.length > 0) {
       try {
-        const validity = await validateDois(dois);
-        dossier.sources = dossier.sources.map(s => {
-          if (s.doi && validity.has(s.doi) && !validity.get(s.doi)) {
-            return { ...s, doi: undefined };
-          }
-          return s;
+        const { dossier: enriched, stats } = await enrichDossier(dossier, {
+          concurrency: 4,
         });
-      } catch {
-        // DOI validation failed — keep as-is
+        dossier = enriched;
+        const verified = stats.doiVerified + stats.doiResolved;
+        log(
+          `    ${verified}/${stats.total} verified · ${stats.oaFound} open access · ${stats.unverified} unverified`,
+        );
+      } catch (err) {
+        log(`    Verification failed: ${err instanceof Error ? err.message : String(err)}`);
       }
     }
 
@@ -765,7 +772,7 @@ async function main() {
   log(`Output directory: ${OUTPUT_DIR}`);
   log(`Models: Opus=${MODELS.opus}, Sonnet=${MODELS.sonnet}`);
   if (setup.learnerNotes) log(`Notes: ${setup.learnerNotes}`);
-  if (GEMINI_API_KEY) log('Gemini API key detected — infographics and TTS enabled');
+  if (OPENAI_API_KEY) log('OpenAI key detected — image gen enabled; add ELEVENLABS_API_KEY for TTS');
 
   await ensureDir(OUTPUT_DIR);
 
@@ -790,7 +797,7 @@ async function main() {
         model: MODELS.opus,
         system: syllabusSystem,
         messages: [{ role: 'user', content: syllabusUser }],
-        thinkingBudget: 'max',
+        thinkingBudget: 'high',
         maxTokens: 16000,
       },
       {
@@ -827,6 +834,46 @@ async function main() {
     return;
   }
 
+  // ── Stage 1b: Learning outcomes table ──────────────────────────
+  log('');
+  log('═══ Stage 1b: Learning Outcomes ═══');
+  let curriculumMap: import('../src/types/course').CurriculumMap | null = null;
+  try {
+    const loText = await streamWithRetry(
+      {
+        apiKey: ANTHROPIC_API_KEY,
+        model: MODELS.haiku,
+        system: buildLearningObjectivesPrompt(),
+        messages: [
+          { role: 'user', content: buildLearningObjectivesUserPrompt(syllabus) },
+        ],
+        maxTokens: 6000,
+      },
+      {},
+    );
+    curriculumMap = parseCurriculumMapResponse(loText);
+    if (curriculumMap) {
+      curriculumMap.syllabusHash = hashSyllabus(syllabus);
+      await save(
+        join(OUTPUT_DIR, 'curriculum-map.json'),
+        JSON.stringify(curriculumMap, null, 2),
+      );
+      await save(
+        join(OUTPUT_DIR, 'learning-outcomes.csv'),
+        buildOutcomesCsv(curriculumMap, syllabus),
+      );
+      await save(
+        join(OUTPUT_DIR, 'learning-outcomes.html'),
+        buildOutcomesPage(curriculumMap, syllabus, setup.themeId),
+      );
+      log(`  ${curriculumMap.objectives.length} objectives mapped to ${syllabus.chapters.length} chapters`);
+    } else {
+      log('  Warning: Could not parse learning-outcomes response.');
+    }
+  } catch (err) {
+    log(`  Learning-outcomes generation failed: ${err instanceof Error ? err.message : String(err)}`);
+  }
+
   // ── Stage 2: Research (3 chapters concurrently) ────────────────
   log('');
   log('═══ Stage 2: Research (3 concurrent) ═══');
@@ -858,7 +905,7 @@ async function main() {
   log('');
   log('═══ Stage 3: Building Course Materials ═══');
 
-  const hasGemini = !!GEMINI_API_KEY;
+  const hasImageGen = !!OPENAI_API_KEY;
 
   for (const ch of syllabus.chapters) {
     const prefix = pad(ch.number);
@@ -884,11 +931,13 @@ async function main() {
         {
           apiKey: ANTHROPIC_API_KEY,
           model: MODELS.opus,
-          system: buildChapterPrompt(setup.themeId, hasGemini),
+          system: buildChapterPrompt(setup.themeId, hasImageGen),
           messages: [{
             role: 'user',
             content: buildChapterUserPrompt(
-              syllabus.courseTitle, ch, setup.chapterLength, researchSources, hasGemini,
+              syllabus.courseTitle, ch, setup.chapterLength,
+              { educationLevel: setup.educationLevel, priorKnowledge: setup.priorKnowledge, learnerNotes: setup.learnerNotes },
+              researchSources, hasImageGen, setup.chapterLengthBrief,
             ),
           }],
           thinkingBudget: 'high',
@@ -903,12 +952,15 @@ async function main() {
       chapterHtml = extractHtml(chapterText);
 
       // Replace Gemini image placeholders with actual generated images
-      if (GEMINI_API_KEY) {
+      if (OPENAI_API_KEY) {
         log(`    Ch ${prefix} Replacing image placeholders...`);
-        chapterHtml = await replaceGeminiImagePlaceholdersNode(chapterHtml, GEMINI_API_KEY);
+        chapterHtml = await replaceAiImagePlaceholdersNode(chapterHtml, OPENAI_API_KEY);
       }
 
-      await save(join(OUTPUT_DIR, 'chapters', `${prefix}_${slug}.html`), chapterHtml);
+      await save(
+        join(OUTPUT_DIR, 'chapters', `${prefix}_${slug}.html`),
+        renderChapterHtml(chapterHtml, setup.themeId, ch.title),
+      );
       log(`    Ch ${prefix} Saved chapter HTML`);
     } catch (err) {
       log(`    Ch ${prefix} ERROR: ${err instanceof Error ? err.message : String(err)}`);
@@ -924,6 +976,7 @@ async function main() {
     setup,
     syllabus,
     researchDossiers: dossiers,
+    curriculumMap,
     generatedAt: new Date().toISOString(),
   };
   await save(join(OUTPUT_DIR, 'course.json'), JSON.stringify(course, null, 2));
diff --git a/scripts/lib/codexLandingTemplate.ts b/scripts/lib/codexLandingTemplate.ts
new file mode 100644
index 0000000..e1cb276
--- /dev/null
+++ b/scripts/lib/codexLandingTemplate.ts
@@ -0,0 +1,138 @@
+/**
+ * Codex landing page for courses.classbuild.ai — the parchment index that
+ * links to the six example courses. Matches the ClassBuild site design system
+ * (Newsreader prose, JetBrains Mono metadata, cream ground, maroon + gilt).
+ */
+
+interface LandingCourse {
+  slug: string;
+  name: string;
+  subtitle: string;
+  desc: string;
+  chapters: number;
+  audience: string;
+  theme: string; // chapter-theme label (Terminal, Almanac, …)
+}
+
+// Curated card copy (preserved from the prior landing), with correct theme tags.
+const COURSES: LandingCourse[] = [
+  { slug: 'raising-a-puppy', name: 'Puppy School', subtitle: 'Socialisation, House Training, and Surviving the First Year', desc: 'From the critical 3–16 week socialisation window to adolescent regression at 18 months — everything a first-time owner needs to know.', chapters: 8, audience: 'General public', theme: 'Almanac' },
+  { slug: 'game-theory', name: 'The Strategy of Everything', subtitle: 'Nash Equilibria, Auctions, and the Mathematics of Trust', desc: 'Penalty kicks, arms races, spectrum auctions, and evolution — twelve chapters from the prisoner’s dilemma to Arrow’s impossibility theorem.', chapters: 12, audience: 'Advanced undergrad', theme: 'Terminal' },
+  { slug: 'understanding-your-sleep', name: 'Understanding Your Sleep', subtitle: 'Circadian Rhythms, Sleep Architecture, and the Caffeine Equation', desc: 'Why morning light matters more than blue-light glasses, how sleep stages actually work, and where the evidence on eight hours gets overstated.', chapters: 7, audience: 'General public', theme: 'Notebook' },
+  { slug: 'leadership-through-crisis', name: 'Leadership through Crisis', subtitle: 'Grenfell Tower, Fukushima, and the Thai Cave Rescue', desc: 'Real case studies in high-stakes decision-making — from initial mobilisation under pressure to building a post-incident learning culture.', chapters: 8, audience: 'Professional', theme: 'Studio' },
+  { slug: 'science-and-art-of-tea', name: 'One Leaf, Ten Thousand Cups', subtitle: 'Chemistry, Culture, and Ceremony in Every Cup', desc: 'One plant becomes six types of tea. The oxidation science, brewing variables, and centuries of ritual behind the world’s most consumed drink.', chapters: 6, audience: 'General public', theme: 'Press' },
+  { slug: 'training-for-your-first-marathon', name: 'From Couch to Finish Line', subtitle: 'Training Science, Nutrition, and the Psychology of 42.2 km', desc: 'Evidence-based periodisation, race-day fuelling, and injury prevention — for people who aren’t sure they’re “a runner” yet.', chapters: 8, audience: 'General public', theme: 'Storybook' },
+];
+
+const FONTS_URL =
+  'https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;0,6..72,500;0,6..72,600;0,6..72,700;1,6..72,400;1,6..72,500;1,6..72,600&family=JetBrains+Mono:wght@400;500;600&display=swap';
+
+function esc(s: string): string {
+  return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+}
+
+export function buildLandingHtml(): string {
+  const cards = COURSES.map(
+    (c, i) => `
+      <a class="card" href="./${c.slug}/">
+        <div class="card-thumb"><img src="./${c.slug}.jpg" alt="${esc(c.name)}"${i === 0 ? ' fetchpriority="high"' : ' loading="lazy"'}></div>
+        <div class="card-body">
+          <h2>${esc(c.name)}</h2>
+          <p class="card-sub">${esc(c.subtitle)}</p>
+          <p class="card-desc">${esc(c.desc)}</p>
+          <div class="tags">
+            <span class="tag tag-em">${c.chapters} chapters</span>
+            <span class="tag">${esc(c.audience)}</span>
+            <span class="tag">${esc(c.theme)}</span>
+          </div>
+          <span class="explore">Explore course <span aria-hidden="true">&rarr;</span></span>
+        </div>
+      </a>`,
+  ).join('\n');
+
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<meta name="theme-color" content="#f1ebdd">
+<meta name="description" content="Six real courses built end-to-end by ClassBuild — chapters, quizzes, slides, audiobooks, and teaching packs, each generated from a single topic description.">
+<title>ClassBuild — Example Courses</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link rel="stylesheet" href="${FONTS_URL}">
+<style>
+  *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
+  :root{
+    --page:#f1ebdd; --canvas:#f8f3e6; --sunken:#e8dfc7;
+    --n1:#e8dfc7; --n2:#cfc6ad; --n3:#a89f88; --n4:#7c7464;
+    --ink:#1a1814; --muted:#5d574a; --subtle:#7c7464;
+    --maroon:#6e1f24; --maroon-hv:#842830; --gilt:#a8854a; --link:#1f2e4a;
+    --serif:"Newsreader","Source Serif 4",Georgia,serif;
+    --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace;
+    --rule:rgba(26,24,20,.10);
+    --shadow:0 1px 2px rgba(26,24,20,.05),0 10px 30px rgba(26,24,20,.07);
+    --shadow-hv:0 2px 6px rgba(26,24,20,.08),0 20px 50px rgba(26,24,20,.12);
+  }
+  html{background:var(--page)}
+  body{font-family:var(--serif);background:
+    radial-gradient(900px 480px at 50% -8%, rgba(168,133,74,.10), transparent 60%),
+    var(--page);color:var(--ink);min-height:100vh;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
+  .wrap{max-width:1080px;margin:0 auto;padding:5rem 2rem 6rem}
+
+  header{text-align:center;margin-bottom:4rem}
+  .eyebrow{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--maroon);border:1px solid var(--n2);border-radius:999px;padding:.4rem .9rem;background:var(--canvas)}
+  .eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gilt)}
+  h1{font-family:var(--serif);font-weight:600;font-size:clamp(2.6rem,6vw,4.2rem);line-height:1.08;letter-spacing:-.02em;margin:1.6rem 0 0}
+  h1 em{font-style:italic;color:var(--maroon)}
+  .lede{font-size:1.18rem;color:var(--muted);max-width:42ch;margin:1.3rem auto 0;line-height:1.6;font-style:italic}
+  .build-link{display:inline-block;margin-top:1.8rem;font-family:var(--mono);font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--link);text-decoration:none;border-bottom:1px solid var(--n2);padding-bottom:.2rem;transition:color .16s,border-color .16s}
+  .build-link:hover{color:var(--maroon);border-color:var(--maroon)}
+
+  .grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.6rem}
+  .card{display:flex;flex-direction:column;background:var(--canvas);border:1px solid var(--n1);border-radius:14px;overflow:hidden;text-decoration:none;color:inherit;box-shadow:var(--shadow);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
+  .card:hover{transform:translateY(-3px);box-shadow:var(--shadow-hv);border-color:var(--n2)}
+  .card-thumb{aspect-ratio:16/9;overflow:hidden;background:var(--sunken);border-bottom:1px solid var(--rule)}
+  .card-thumb img{width:100%;height:100%;object-fit:cover;display:block}
+  .card-body{padding:1.5rem 1.6rem 1.7rem;display:flex;flex-direction:column;flex:1}
+  .card-body h2{font-family:var(--serif);font-weight:600;font-size:1.5rem;line-height:1.2;letter-spacing:-.01em}
+  .card-sub{font-style:italic;color:var(--gilt);font-size:1rem;margin-top:.3rem;line-height:1.4}
+  .card-desc{color:var(--muted);font-size:.96rem;line-height:1.55;margin-top:.85rem}
+  .tags{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.1rem}
+  .tag{font-family:var(--mono);font-size:.68rem;letter-spacing:.05em;text-transform:uppercase;color:var(--n4);border:1px solid var(--n2);border-radius:999px;padding:.25rem .65rem}
+  .tag-em{color:var(--maroon);border-color:rgba(110,31,36,.3)}
+  .explore{margin-top:1.3rem;font-family:var(--mono);font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;color:var(--maroon);font-weight:600}
+  .card:hover .explore{color:var(--maroon-hv)}
+
+  footer{text-align:center;margin-top:4.5rem;font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;color:var(--subtle)}
+  footer a{color:var(--maroon);text-decoration:none}
+
+  @media (prefers-reduced-motion: reduce){
+    *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
+    .card:hover{transform:none}
+  }
+  @media(max-width:760px){
+    .grid{grid-template-columns:1fr}
+    .wrap{padding:3rem 1.25rem 3.5rem}
+    header{margin-bottom:2.6rem}
+    .lede{font-size:1.08rem}
+    .card-body{padding:1.25rem 1.3rem 1.45rem}
+  }
+</style>
+</head>
+<body>
+  <div class="wrap">
+    <header>
+      <span class="eyebrow">ClassBuild Example Courses</span>
+      <h1>See what ClassBuild <em>creates</em></h1>
+      <p class="lede">Six real courses, built end-to-end. Each one was generated from a single topic description — chapters, quizzes, slides, audiobooks, and teaching packs.</p>
+      <a class="build-link" href="https://classbuild.ai">Build your own at ClassBuild &rarr;</a>
+    </header>
+    <div class="grid">
+      ${cards}
+    </div>
+    <footer>Made with <a href="https://classbuild.ai">ClassBuild</a> · classbuild.ai</footer>
+  </div>
+</body>
+</html>`;
+}
diff --git a/scripts/lib/codexViewerTemplate.ts b/scripts/lib/codexViewerTemplate.ts
new file mode 100644
index 0000000..b79b78e
--- /dev/null
+++ b/scripts/lib/codexViewerTemplate.ts
@@ -0,0 +1,403 @@
+/**
+ * Codex course viewer — the published per-course index.html.
+ *
+ * Chrome (sidebar, tab bar, cards, welcome) is the ClassBuild "Codex" Parchment
+ * design system: cream ground, ink prose in Newsreader, maroon + gilt accents,
+ * JetBrains Mono metadata. Reading / Practice Quiz / Weekly Challenge load the
+ * already-themed course HTML in sandboxed iframes (so each course keeps its own
+ * Terminal/Studio/Almanac/… look). Slides, Audio, Discussion and Activities are
+ * rendered natively in Codex.
+ *
+ * Showcase tab order: Reading · Slides · Audio · Practice Quiz · Discussion ·
+ * Activities · Weekly Challenge. A tab appears only when its data exists.
+ */
+
+export interface SlideMeta { title?: string; }
+export interface DiscussionItem { prompt: string; hook: string; }
+export interface ActivityItem {
+  title: string; duration?: string; description?: string;
+  materials?: string; learningGoal?: string; scalingNotes?: string;
+}
+export interface DownloadLink { label: string; path: string; }
+
+export interface CodexChapterData {
+  number: number;
+  title: string;
+  narrative?: string;
+  chapterHtmlPath?: string;   // chapters/NN.html
+  quizHtmlPath?: string;      // quizzes/NN.html
+  challengeHtmlPath?: string; // challenges/NN.html
+  audioPath?: string;         // audio/NN.mp3
+  transcript?: string;
+  slides?: SlideMeta[];       // for captions; images by convention slides/chNN/slide-MM.jpg
+  discussion?: DiscussionItem[];
+  activities?: ActivityItem[];
+  downloadLinks?: DownloadLink[];
+}
+
+export interface CodexCourseMeta {
+  courseTitle: string;
+  courseOverview: string;
+  audience?: string;
+  themeLabel?: string; // e.g. "Terminal" — the chapter theme, for the sidebar tag
+}
+
+const FONTS_URL =
+  'https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;0,6..72,500;0,6..72,600;0,6..72,700;1,6..72,400;1,6..72,500;1,6..72,600&family=JetBrains+Mono:wght@400;500;600&display=swap';
+
+function esc(s: string): string {
+  return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+}
+function pad2(n: number): string { return String(n).padStart(2, '0'); }
+
+/** Clamp to ~n chars at a word boundary, adding an ellipsis when cut. */
+function clamp(s: string, n: number): string {
+  const str = s.trim();
+  if (str.length <= n) return str;
+  const cut = str.slice(0, n);
+  const lastSpace = cut.lastIndexOf(' ');
+  return (lastSpace > n * 0.6 ? cut.slice(0, lastSpace) : cut).trimEnd() + '…';
+}
+
+function transcriptToHtml(md: string): string {
+  // Light rendering: split on blank lines into paragraphs; strip basic md marks.
+  return md
+    .split(/\n{2,}/)
+    .map((para) => para.trim())
+    .filter(Boolean)
+    .map((para) => `<p>${esc(para.replace(/^#+\s*/, '').replace(/[*_`]/g, ''))}</p>`)
+    .join('\n');
+}
+
+export function buildCodexViewerHtml(course: CodexCourseMeta, chapters: CodexChapterData[]): string {
+  const sorted = [...chapters].sort((a, b) => a.number - b.number);
+
+  const navItems = sorted
+    .map(
+      (ch) =>
+        `<button class="nav-item" data-chapter="${ch.number}" onclick="showChapter(${ch.number})"><span class="nav-num">${pad2(ch.number)}</span><span class="nav-text">${esc(ch.title)}</span></button>`,
+    )
+    .join('\n          ');
+
+  const panels = sorted
+    .map((ch) => {
+      const tabs: Array<{ id: string; label: string }> = [];
+      const contents: string[] = [];
+
+      // Tab order mirrors the ClassBuild app: Reading · Practice · Challenge ·
+      // Discussion · Activities · Audio · Slides.
+
+      // Reading
+      if (ch.chapterHtmlPath) {
+        tabs.push({ id: 'reading', label: 'Reading' });
+        contents.push(
+          `<div class="tab-pane" data-pane="reading"><iframe class="frame" src="${ch.chapterHtmlPath}" sandbox="allow-scripts allow-same-origin" loading="lazy" onload="fit(this)"></iframe></div>`,
+        );
+      }
+      // Practice
+      if (ch.quizHtmlPath) {
+        tabs.push({ id: 'quiz', label: 'Practice' });
+        contents.push(
+          `<div class="tab-pane" data-pane="quiz"><iframe class="frame" src="${ch.quizHtmlPath}" sandbox="allow-scripts allow-same-origin" loading="lazy" onload="fit(this)"></iframe></div>`,
+        );
+      }
+      // Challenge
+      if (ch.challengeHtmlPath) {
+        tabs.push({ id: 'challenge', label: 'Challenge' });
+        contents.push(
+          `<div class="tab-pane" data-pane="challenge"><iframe class="frame" src="${ch.challengeHtmlPath}" sandbox="allow-scripts allow-same-origin" loading="lazy" onload="fit(this)"></iframe></div>`,
+        );
+      }
+      // Discussion
+      if (ch.discussion && ch.discussion.length > 0) {
+        tabs.push({ id: 'discussion', label: 'Discussion' });
+        const cards = ch.discussion
+          .map(
+            (d, i) =>
+              `<div class="card discussion-card"><div class="card-num">${i + 1}</div><div><p class="card-lead">${esc(d.prompt)}</p><p class="card-sub">${esc(d.hook)}</p></div></div>`,
+          )
+          .join('\n');
+        contents.push(`<div class="tab-pane" data-pane="discussion"><div class="card-list">${cards}</div></div>`);
+      }
+      // Activities
+      if (ch.activities && ch.activities.length > 0) {
+        tabs.push({ id: 'activities', label: 'Activities' });
+        const cards = ch.activities
+          .map((a) => {
+            const meta: string[] = [];
+            if (a.materials) meta.push(`<div class="act-row"><span class="act-key">Materials</span><span>${esc(a.materials)}</span></div>`);
+            if (a.learningGoal) meta.push(`<div class="act-row"><span class="act-key">Learning goal</span><span>${esc(a.learningGoal)}</span></div>`);
+            if (a.scalingNotes) meta.push(`<div class="act-row"><span class="act-key">Scaling</span><span>${esc(a.scalingNotes)}</span></div>`);
+            return `<div class="card activity-card"><div class="activity-head"><h3>${esc(a.title)}</h3>${a.duration ? `<span class="badge">${esc(a.duration)}</span>` : ''}</div>${a.description ? `<p class="card-lead">${esc(a.description)}</p>` : ''}${meta.length ? `<div class="act-meta">${meta.join('')}</div>` : ''}</div>`;
+          })
+          .join('\n');
+        contents.push(`<div class="tab-pane" data-pane="activities"><div class="card-list">${cards}</div></div>`);
+      }
+      // Audio
+      if (ch.audioPath) {
+        const transcript = ch.transcript
+          ? `<details class="transcript"><summary>Transcript</summary><div class="transcript-body">${transcriptToHtml(ch.transcript)}</div></details>`
+          : '';
+        tabs.push({ id: 'audio', label: 'Audio' });
+        contents.push(
+          `<div class="tab-pane" data-pane="audio"><div class="audio-wrap"><div class="audio-card"><div class="audio-eyebrow">Audiobook narration</div><audio controls preload="none" src="${ch.audioPath}"></audio></div>${transcript}</div></div>`,
+        );
+      }
+      // Slides
+      if (ch.slides && ch.slides.length > 0) {
+        tabs.push({ id: 'slides', label: 'Slides' });
+        const cards = ch.slides
+          .map((s, i) => {
+            const src = `slides/ch${pad2(ch.number)}/slide-${pad2(i + 1)}.jpg`;
+            return `<figure class="slide-card"><img loading="lazy" src="${src}" alt="${esc(s.title || `Slide ${i + 1}`)}" onerror="this.closest('.slide-card').style.display='none'"><figcaption><span class="slide-n">${pad2(i + 1)}</span>${esc(s.title || '')}</figcaption></figure>`;
+          })
+          .join('\n');
+        contents.push(`<div class="tab-pane" data-pane="slides"><div class="slide-grid">${cards}</div></div>`);
+      }
+
+      const downloads =
+        ch.downloadLinks && ch.downloadLinks.length > 0
+          ? `<div class="downloads">${ch.downloadLinks.map((d) => `<a class="pill" href="${d.path}" download>${esc(d.label)}</a>`).join('')}</div>`
+          : '';
+
+      const tabBar =
+        tabs.length > 1
+          ? `<div class="tab-bar">${tabs.map((t, i) => `<button class="tab${i === 0 ? ' active' : ''}" data-tab="${t.id}" onclick="showTab(this,'${t.id}')">${t.label}</button>`).join('')}</div>`
+          : '';
+
+      // Mark first pane active
+      const firstId = tabs[0]?.id;
+      const renderedContents = contents
+        .map((c) => (firstId && c.includes(`data-pane="${firstId}"`) ? c.replace('class="tab-pane"', 'class="tab-pane active"') : c))
+        .join('\n');
+
+      return `<section class="panel" data-chapter="${ch.number}" hidden>
+        <header class="panel-head">
+          <span class="eyebrow">Class ${pad2(ch.number)}</span>
+          <h2>${esc(ch.title)}</h2>
+          ${ch.narrative ? `<p class="panel-desc">${esc(clamp(ch.narrative, 220))}</p>` : ''}
+          ${downloads}
+        </header>
+        ${tabBar}
+        <div class="panes">${renderedContents}</div>
+      </section>`;
+    })
+    .join('\n');
+
+  const tag = course.themeLabel ? `<span class="tag">${esc(course.themeLabel)}</span>` : '';
+  const overview = course.courseOverview || '';
+
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<meta name="theme-color" content="#f1ebdd">
+<meta name="description" content="${esc(clamp(course.courseOverview || course.courseTitle, 155))}">
+<title>${esc(course.courseTitle)} — ClassBuild</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link rel="stylesheet" href="${FONTS_URL}">
+<style>
+  *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
+  :root{
+    --page:#f1ebdd; --canvas:#f8f3e6; --raised:#f8f3e6; --sunken:#e8dfc7;
+    --n1:#e8dfc7; --n2:#cfc6ad; --n3:#a89f88; --n4:#7c7464;
+    --ink:#1a1814; --muted:#5d574a; --subtle:#7c7464;
+    --maroon:#6e1f24; --maroon-hv:#842830; --gilt:#a8854a; --link:#1f2e4a;
+    --serif:"Newsreader","Source Serif 4",Georgia,serif;
+    --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace;
+    --rule:rgba(26,24,20,0.10); --rule-2:rgba(26,24,20,0.16);
+    --shadow:0 1px 2px rgba(26,24,20,.05),0 8px 24px rgba(26,24,20,.06);
+  }
+  html{background:var(--page)}
+  body{font-family:var(--serif);background:var(--page);color:var(--ink);min-height:100vh;display:flex;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-size:17px;line-height:1.6}
+
+  /* Sidebar */
+  .sidebar{width:312px;min-height:100vh;background:var(--canvas);border-right:1px solid var(--rule);display:flex;flex-direction:column;position:fixed;inset:0 auto 0 0;overflow-y:auto;z-index:10}
+  .side-head{padding:1.9rem 1.6rem 1.4rem;border-bottom:1px solid var(--rule)}
+  .brand{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--maroon);display:flex;align-items:center;gap:.5rem;margin-bottom:.8rem;text-decoration:none;transition:color .16s}
+  .brand::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gilt)}
+  .brand:hover{color:var(--maroon-hv)}
+  .brand-ext{font-size:.9em;opacity:.5;font-weight:500}
+  .back-link{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-decoration:none;margin-bottom:1.3rem;transition:color .16s}
+  .back-link:hover{color:var(--maroon)}
+  .back-arrow{font-size:1.05em;transition:transform .16s}
+  .back-link:hover .back-arrow{transform:translateX(-3px)}
+  .side-head h1{font-family:var(--serif);font-weight:600;font-size:1.4rem;line-height:1.2;letter-spacing:-.01em}
+  .side-head .tag{display:inline-block;margin-top:.85rem;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--n4);border:1px solid var(--n2);border-radius:999px;padding:.2rem .6rem}
+  .side-head p{font-size:.82rem;color:var(--muted);margin-top:.85rem;line-height:1.55;font-style:italic}
+  .nav{flex:1;padding:.9rem .6rem}
+  .nav-label{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--subtle);padding:.4rem .85rem .55rem;font-weight:600}
+  .nav-item{position:relative;display:flex;gap:.7rem;align-items:baseline;width:100%;padding:.6rem .85rem;text-align:left;background:none;border:none;border-radius:7px;color:var(--muted);font-family:var(--serif);font-size:.95rem;line-height:1.35;cursor:pointer;transition:background .16s,color .16s;margin-bottom:1px}
+  .nav-num{font-family:var(--mono);font-size:.72rem;color:var(--gilt);font-weight:600;flex-shrink:0}
+  .nav-item:hover{background:rgba(26,24,20,.04);color:var(--ink)}
+  .nav-item.active{background:rgba(110,31,36,.08);color:var(--ink);font-weight:600}
+  .nav-item.active::before{content:"";position:absolute;left:0;top:7px;bottom:7px;width:2px;background:var(--maroon);border-radius:0 2px 2px 0}
+  .side-foot{padding:1rem 1.5rem 1.25rem;border-top:1px solid var(--rule);font-family:var(--mono);font-size:.66rem;letter-spacing:.04em;color:var(--subtle);text-align:center}
+  .side-foot a{color:var(--maroon);text-decoration:none;font-weight:500}
+
+  /* Main */
+  /* min-width:0 defuses the flex min-content trap — without it the nowrap
+     tab bar widens .main past the viewport on phones. */
+  .main{flex:1;margin-left:312px;min-height:100vh;min-width:0}
+  .panel-head{padding:2.6rem 3rem 1.7rem;border-bottom:1px solid var(--rule);max-width:1180px}
+  .eyebrow{display:inline-block;font-family:var(--mono);font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.18em;color:var(--maroon);margin-bottom:.7rem}
+  .panel-head h2{font-family:var(--serif);font-size:2.5rem;font-weight:600;line-height:1.12;letter-spacing:-.015em}
+  .panel-desc{font-size:1.02rem;color:var(--muted);margin-top:.9rem;line-height:1.55;max-width:66ch}
+  .downloads{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.2rem}
+  .pill{font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;color:var(--link);text-decoration:none;border:1px solid var(--n2);border-radius:999px;padding:.35rem .8rem;transition:background .16s,border-color .16s}
+  .pill:hover{background:var(--sunken);border-color:var(--n3)}
+
+  /* Tab bar */
+  .tab-bar{display:flex;gap:.2rem;flex-wrap:wrap;padding:.9rem 3rem;border-bottom:1px solid var(--rule);background:var(--canvas);position:sticky;top:0;z-index:5}
+  .tab{padding:.5rem 1rem;font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;font-weight:500;border:none;border-radius:6px;cursor:pointer;background:none;color:var(--muted);transition:background .16s,color .16s}
+  .tab:hover{color:var(--ink);background:rgba(26,24,20,.04)}
+  .tab.active{background:var(--maroon);color:var(--canvas)}
+  .tab-pane{display:none}
+  .tab-pane.active{display:block}
+
+  /* Iframes */
+  .frame{width:100%;border:none;min-height:82vh;display:block;background:#fff}
+
+  /* Cards */
+  .card-list{padding:2.4rem 3rem;display:flex;flex-direction:column;gap:.9rem;max-width:920px}
+  .card{background:var(--raised);border:1px solid var(--n1);border-radius:10px;padding:1.4rem 1.5rem;box-shadow:var(--shadow)}
+  .discussion-card{display:flex;gap:1.1rem}
+  .card-num{width:2.1rem;height:2.1rem;border-radius:50%;background:rgba(110,31,36,.08);color:var(--maroon);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:.82rem;font-weight:600;flex-shrink:0}
+  .card-lead{font-size:1.02rem;color:var(--ink);line-height:1.55;font-weight:500}
+  .card-sub{font-size:.9rem;color:var(--muted);margin-top:.55rem;line-height:1.5;font-style:italic}
+  .activity-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:.5rem}
+  .activity-head h3{font-family:var(--serif);font-size:1.25rem;font-weight:600}
+  .badge{font-family:var(--mono);font-size:.68rem;letter-spacing:.05em;text-transform:uppercase;color:var(--gilt);border:1px solid var(--n2);border-radius:999px;padding:.2rem .6rem;white-space:nowrap}
+  .act-meta{margin-top:.9rem;border-top:1px solid var(--rule);padding-top:.8rem;display:flex;flex-direction:column;gap:.5rem}
+  .act-row{display:grid;grid-template-columns:128px 1fr;gap:.8rem;font-size:.9rem;color:var(--muted);line-height:1.5}
+  .act-key{font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--subtle);padding-top:.15rem}
+
+  /* Slides */
+  .slide-grid{padding:2.4rem 3rem;display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:1.4rem;max-width:1180px}
+  .slide-card{background:var(--raised);border:1px solid var(--n1);border-radius:10px;overflow:hidden;box-shadow:var(--shadow)}
+  .slide-card img{display:block;width:100%;height:auto;background:var(--sunken)}
+  .slide-card figcaption{padding:.7rem .9rem;font-size:.85rem;color:var(--muted);display:flex;gap:.5rem;align-items:baseline;border-top:1px solid var(--rule)}
+  .slide-n{font-family:var(--mono);font-size:.7rem;color:var(--gilt);font-weight:600}
+
+  /* Audio */
+  .audio-wrap{padding:2.4rem 3rem;max-width:880px}
+  .audio-card{background:var(--raised);border:1px solid var(--n1);border-radius:10px;padding:1.6rem;box-shadow:var(--shadow)}
+  .audio-eyebrow{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--maroon);margin-bottom:.9rem}
+  .audio-card audio{width:100%}
+  .transcript{margin-top:1.3rem;border-top:1px solid var(--rule);padding-top:1rem}
+  .transcript summary{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);cursor:pointer}
+  .transcript-body{margin-top:.9rem;color:var(--muted)}
+  .transcript-body p{margin-bottom:.8rem;line-height:1.65;font-size:.98rem}
+
+  /* Welcome */
+  .welcome{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;min-height:100svh;text-align:center;padding:2rem 1.5rem}
+  .welcome .eyebrow{margin-bottom:1.4rem}
+  .welcome h2{font-family:var(--serif);font-size:clamp(1.85rem,1rem + 3.4vw,2.7rem);font-weight:600;max-width:22ch;line-height:1.14;letter-spacing:-.015em;margin-bottom:1rem;overflow-wrap:break-word}
+  .welcome p{font-size:1.05rem;color:var(--muted);max-width:48ch;line-height:1.6;font-style:italic}
+  .welcome .rule{width:52px;height:2px;background:var(--gilt);margin-top:1.8rem}
+  .welcome-actions{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;margin-top:2rem}
+  .btn-begin{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--canvas);background:var(--maroon);border:1px solid var(--maroon);border-radius:8px;padding:.85rem 1.4rem;cursor:pointer;transition:background .16s}
+  .btn-begin:hover{background:var(--maroon-hv)}
+  .btn-browse{display:none;align-items:center;gap:.5rem;font-family:var(--mono);font-size:.78rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:none;border:1px solid var(--n2);border-radius:8px;padding:.85rem 1.4rem;cursor:pointer;transition:color .16s,border-color .16s}
+  .btn-browse:hover{color:var(--ink);border-color:var(--n3)}
+
+  .menu-toggle{display:none;position:fixed;top:1rem;left:1rem;z-index:30;background:var(--canvas);border:1px solid var(--n2);border-radius:7px;padding:.5rem .75rem;color:var(--ink);font-size:1.1rem;cursor:pointer;box-shadow:var(--shadow)}
+  .scrim{display:none;position:fixed;inset:0;background:rgba(26,24,20,.35);z-index:9;opacity:0;transition:opacity .25s ease;pointer-events:none}
+
+  @media (prefers-reduced-motion: reduce){
+    *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
+  }
+
+  @media(max-width:920px){
+    .menu-toggle{display:block}
+    .sidebar{transform:translateX(-100%);transition:transform .28s ease;box-shadow:0 0 30px rgba(26,24,20,.2);width:min(312px,86vw)}
+    .sidebar.open{transform:translateX(0)}
+    /* Clear the floating menu toggle so it never overlaps the brand. */
+    .side-head{padding-top:4.3rem}
+    .scrim{display:block}
+    body.nav-open .scrim{opacity:1;pointer-events:auto}
+    body.nav-open{overflow:hidden}
+    .main{margin-left:0}
+    .panel-head{padding:4.2rem 1.4rem 1.4rem}
+    .panel-head h2{font-size:clamp(1.6rem,1.05rem + 3.4vw,2.5rem)}
+    /* One swipeable row instead of a two-deep wrap — keeps the reading high. */
+    .tab-bar{padding:.7rem 1.4rem;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;-webkit-overflow-scrolling:touch}
+    .tab-bar::-webkit-scrollbar{display:none}
+    .tab{white-space:nowrap;flex-shrink:0}
+    .card-list,.slide-grid,.audio-wrap{padding:1.6rem 1.4rem}
+    .slide-grid{grid-template-columns:1fr}
+    .act-row{grid-template-columns:1fr;gap:.15rem}
+    .welcome-actions .btn-browse{display:inline-flex}
+  }
+</style>
+</head>
+<body>
+<button class="menu-toggle" onclick="toggleNav()" aria-label="Open class list" aria-expanded="false">&#9776;</button>
+<div class="scrim" onclick="setNav(false)" aria-hidden="true"></div>
+<nav class="sidebar">
+  <div class="side-head">
+    <a class="brand" href="https://classbuild.ai" target="_blank" rel="noopener">ClassBuild<span class="brand-ext" aria-hidden="true">↗</span></a>
+    <a class="back-link" href="/"><span class="back-arrow" aria-hidden="true">←</span>All example courses</a>
+    <h1>${esc(course.courseTitle)}</h1>
+    ${tag}
+    ${overview ? `<p>${esc(overview.slice(0, 150))}${overview.length > 150 ? '…' : ''}</p>` : ''}
+  </div>
+  <div class="nav">
+    <div class="nav-label">Classes</div>
+    ${navItems}
+  </div>
+  <div class="side-foot">Built with <a href="https://classbuild.ai" target="_blank" rel="noopener">ClassBuild</a></div>
+</nav>
+<main class="main">
+  <div class="welcome" id="welcome">
+    <span class="eyebrow">${sorted.length} ${sorted.length === 1 ? 'class' : 'classes'}</span>
+    <h2>${esc(course.courseTitle)}</h2>
+    ${overview ? `<p>${esc(overview.slice(0, 220))}${overview.length > 220 ? '…' : ''}</p>` : ''}
+    <div class="rule"></div>
+    ${sorted.length > 0 ? `<div class="welcome-actions">
+      <button class="btn-begin" onclick="showChapter(${sorted[0].number})">Begin Class ${pad2(sorted[0].number)} &rarr;</button>
+      <button class="btn-browse" onclick="setNav(true)">Browse all classes</button>
+    </div>` : ''}
+  </div>
+  ${panels}
+</main>
+<script>
+  var _sb=document.querySelector('.sidebar'),_tg=document.querySelector('.menu-toggle');
+  function setNav(open){
+    _sb.classList.toggle('open',open);
+    document.body.classList.toggle('nav-open',open);
+    _tg.innerHTML=open?'&#10005;':'&#9776;';
+    _tg.setAttribute('aria-expanded',open?'true':'false');
+    _tg.setAttribute('aria-label',open?'Close class list':'Open class list');
+  }
+  function toggleNav(){setNav(!_sb.classList.contains('open'));}
+  function fit(f){try{var d=f.contentDocument||f.contentWindow.document;var h=d.documentElement.scrollHeight;if(h>200)f.style.height=h+'px';}catch(e){}}
+  function showChapter(n){
+    var w=document.getElementById('welcome'); if(w)w.style.display='none';
+    document.querySelectorAll('.panel').forEach(function(p){p.hidden=(p.getAttribute('data-chapter')!=n);});
+    document.querySelectorAll('.nav-item').forEach(function(b){b.classList.toggle('active',b.getAttribute('data-chapter')==n);});
+    setNav(false);
+    var panel=document.querySelector('.panel[data-chapter="'+n+'"]');
+    if(panel){var tabs=panel.querySelectorAll('.tab');var panes=panel.querySelectorAll('.tab-pane');
+      if(tabs.length){tabs.forEach(function(t,i){t.classList.toggle('active',i===0);});}
+      panes.forEach(function(p,i){p.classList.toggle('active',i===0);});
+      // resize any iframe in the first (visible) pane
+      panel.querySelectorAll('.tab-pane.active iframe').forEach(function(f){fit(f);});
+    }
+    window.scrollTo(0,0);
+  }
+  function showTab(btn,id){
+    var panel=btn.closest('.panel');
+    panel.querySelectorAll('.tab').forEach(function(t){t.classList.remove('active');});
+    panel.querySelectorAll('.tab-pane').forEach(function(p){p.classList.remove('active');});
+    btn.classList.add('active');
+    var pane=panel.querySelector('.tab-pane[data-pane="'+id+'"]');
+    if(pane){pane.classList.add('active');pane.querySelectorAll('iframe').forEach(function(f){fit(f);});}
+  }
+  ${sorted.length === 1 ? `showChapter(${sorted[0].number});` : ''}
+</script>
+</body>
+</html>`;
+}
diff --git a/scripts/lib/coursePackageTemplate.ts b/scripts/lib/coursePackageTemplate.ts
index d984ef9..fac62d0 100644
--- a/scripts/lib/coursePackageTemplate.ts
+++ b/scripts/lib/coursePackageTemplate.ts
@@ -532,6 +532,16 @@ export function buildCoursePackageHtml(
       box-shadow: var(--card-hover-shadow);
     }
 
+    .slide-thumb {
+      display: block;
+      width: 100%;
+      height: auto;
+      margin: 0.85rem 0 0.25rem;
+      border-radius: 8px;
+      border: 1px solid var(--border);
+      background: var(--card);
+    }
+
     .card-num {
       display: inline-flex;
       align-items: center;
@@ -948,6 +958,7 @@ export function buildCoursePackageHtml(
           var html = '<div class="tab-content' + (tabs[0] && tabs[0].id === 'slides' ? ' active' : '') + '" data-tab-content="slides"><div class="card-list">';
           ch.slides.forEach(function(s, i) {
             html += '<div class="card"><span class="card-num">' + (i + 1) + '</span><h3>' + esc(s.title) + '</h3>';
+            html += '<img class="slide-thumb" loading="lazy" alt="" src="slides/ch' + (ch.number < 10 ? '0' : '') + ch.number + '/slide-' + ((i + 1) < 10 ? '0' : '') + (i + 1) + '.jpg" onerror="this.style.display=\\'none\\'">';
             if (s.layout) html += '<span class="badge">' + s.layout + '</span>';
             if (s.bodyText) html += '<p style="margin-top:0.5rem;font-weight:500">' + esc(s.bodyText) + '</p>';
             if (s.bullets && s.bullets.length > 0) {
diff --git a/scripts/lib/node-image-placer.ts b/scripts/lib/node-image-placer.ts
index 08c4f6e..5f3c6d6 100644
--- a/scripts/lib/node-image-placer.ts
+++ b/scripts/lib/node-image-placer.ts
@@ -1,56 +1,127 @@
 /**
- * Node-compatible version of src/services/gemini/imagePlacer.ts.
- * Replaces <figure class="gemini-image"> placeholders with actual Gemini-generated images.
- * Uses generateInfographicNode (raw base64) instead of browser canvas compression.
+ * Node-compatible counterpart of src/services/openai/imagePlacer.ts.
+ * Replaces <figure class="ai-image"> placeholders in chapter HTML with
+ * gpt-image-2 renders.
  */
-import { generateInfographicNode } from './node-image';
+import { generateImageNode } from './node-image';
+import { withSafetyClause } from '../../src/services/openai/safetyClause';
 
-async function generateWithRetry(prompt: string, apiKey: string, maxRetries = 3): Promise<string> {
+const ASPECT_TO_SIZE: Record<string, string> = {
+  square: '1024x1024',
+  portrait: '1024x1536',
+  landscape: '1536x1024',
+  'wide-landscape': '2048x1152',
+};
+
+interface PlaceholderMatch {
+  full: string;
+  prompt: string;
+  aspect: string;
+  caption: string;
+}
+
+function findPlaceholders(html: string): PlaceholderMatch[] {
+  const figureRegex =
+    /<figure\b[^>]*\bclass="ai-image"[^>]*>([\s\S]*?)<\/figure>/gi;
+  const matches: PlaceholderMatch[] = [];
+  let m: RegExpExecArray | null;
+  while ((m = figureRegex.exec(html)) !== null) {
+    const full = m[0];
+    const inner = m[1];
+    const promptMatch =
+      /data-prompt="([^"]+)"/i.exec(full) ??
+      /data-prompt='([^']+)'/i.exec(full);
+    const aspectMatch =
+      /data-aspect="([^"]+)"/i.exec(full) ??
+      /data-aspect='([^']+)'/i.exec(full);
+    const captionMatch = /<figcaption[^>]*>([\s\S]*?)<\/figcaption>/i.exec(inner);
+    if (!promptMatch) continue;
+    matches.push({
+      full,
+      prompt: promptMatch[1],
+      aspect: (aspectMatch?.[1] ?? 'landscape').toLowerCase(),
+      caption: captionMatch ? captionMatch[1].trim() : '',
+    });
+  }
+  return matches;
+}
+
+async function generateWithRetry(
+  prompt: string,
+  apiKey: string,
+  size: string,
+  maxRetries = 2,
+): Promise<string> {
+  const finalPrompt = withSafetyClause(prompt);
+  let lastErr: unknown;
   for (let attempt = 0; attempt <= maxRetries; attempt++) {
     try {
-      const { base64, mimeType } = await generateInfographicNode(prompt, apiKey);
+      const { base64, mimeType } = await generateImageNode(finalPrompt, apiKey, {
+        size,
+        quality: 'high',
+      });
       return `data:${mimeType};base64,${base64}`;
     } catch (err) {
+      lastErr = err;
       const msg = err instanceof Error ? err.message : String(err);
-      const isQuota = /quota|rate|429|resource.*exhausted/i.test(msg);
-      if (!isQuota || attempt === maxRetries) throw err;
-      // Exponential backoff: 5s, 10s, 20s
-      await new Promise(r => setTimeout(r, 5000 * Math.pow(2, attempt)));
+      const transient = /429|rate|quota|5\d\d/i.test(msg);
+      if (!transient || attempt === maxRetries) throw err;
+      await new Promise((r) => setTimeout(r, 4000 * Math.pow(2, attempt)));
     }
   }
-  throw new Error('Gemini retry exhausted');
+  throw lastErr;
 }
 
-export async function replaceGeminiImagePlaceholdersNode(html: string, apiKey: string): Promise<string> {
-  const placeholderRegex = /<figure\s+class="gemini-image"\s+data-prompt="([^"]+)">\s*<figcaption>([^<]*)<\/figcaption>\s*<\/figure>/g;
-  const matches: Array<{ full: string; prompt: string; caption: string }> = [];
-  let m: RegExpExecArray | null;
-  while ((m = placeholderRegex.exec(html)) !== null) {
-    matches.push({ full: m[0], prompt: m[1], caption: m[2] });
-  }
+export async function replaceAiImagePlaceholdersNode(
+  html: string,
+  apiKey: string,
+): Promise<string> {
+  const matches = findPlaceholders(html);
   if (matches.length === 0) return html;
 
-  // Generate images sequentially to avoid hitting Gemini rate limits
-  const results: Array<{ status: 'fulfilled'; value: string } | { status: 'rejected' }> = [];
-  for (const { prompt } of matches) {
+  const results: Array<string | null> = [];
+  for (const m of matches) {
+    const size = ASPECT_TO_SIZE[m.aspect] ?? ASPECT_TO_SIZE.landscape;
     try {
-      const value = await generateWithRetry(prompt, apiKey);
-      results.push({ status: 'fulfilled', value });
+      results.push(await generateWithRetry(m.prompt, apiKey, size));
     } catch {
-      results.push({ status: 'rejected' });
+      results.push(null);
     }
   }
 
-  let result = html;
+  let out = html;
   for (let i = 0; i < matches.length; i++) {
-    const r = results[i];
-    if (r.status === 'fulfilled') {
-      const replacement = `<figure style="margin:2rem 0;text-align:center"><img src="${r.value}" alt="${matches[i].caption}" style="max-width:100%;border-radius:12px;"><figcaption style="margin-top:0.5rem;font-size:0.85rem;color:#94a3b8;font-style:italic">${matches[i].caption}</figcaption></figure>`;
-      result = result.replace(matches[i].full, replacement);
+    const m = matches[i];
+    const dataUri = results[i];
+    // Strip a leading "Fig. N" the model sometimes includes despite the prompt
+    // telling it not to — otherwise we end up with "Fig. Fig. 1 …".
+    const rawCaption = (m.caption || '')
+      .replace(/^\s*(?:Fig(?:ure)?\.?\s*\d+[.:]?\s*)/i, '')
+      .trim();
+    const figNum = i + 1;
+    // Keep the original prompt + aspect on the rendered figure so the SPA's
+    // per-image refine flow can pick them up when the user opens the chapter
+    // later. (CLI-generated chapters don't refine in-CLI, but the SPA may
+    // load and refine them.)
+    const figureAttrs = `class="ch-figure" data-image-idx="${i}" data-prompt="${m.prompt.replace(/"/g, '&quot;')}" data-aspect="${m.aspect.replace(/"/g, '&quot;')}"`;
+    if (dataUri) {
+      // Theme CSS sets a fixed height on .ch-figbox for the empty-state
+      // placeholder; with a real image inside we let it grow to fit.
+      const replacement = `<figure ${figureAttrs}><div class="ch-figbox" style="height:auto;overflow:visible;"><img src="${dataUri}" alt="${rawCaption.replace(/"/g, '&quot;')}" data-image-idx="${i}" style="display:block;max-width:100%;max-height:75vh;height:auto;width:auto;margin:0 auto;cursor:pointer;"></div>${
+        rawCaption
+          ? `<figcaption><span class="ch-fig-num">Fig. ${figNum}</span> ${rawCaption}</figcaption>`
+          : ''
+      }</figure>`;
+      out = out.replace(m.full, replacement);
     } else {
-      const fallback = `<figure style="margin:2rem 0;text-align:center;padding:2rem;border:1px dashed #4a4a6a;border-radius:12px"><figcaption style="font-size:0.85rem;color:#94a3b8;font-style:italic">${matches[i].caption}</figcaption></figure>`;
-      result = result.replace(matches[i].full, fallback);
+      const fallback = `<figure ${figureAttrs}><div class="ch-figbox" style="display:flex;align-items:center;justify-content:center;"><span class="ch-figbox-tag">image unavailable</span></div>${
+        rawCaption ? `<figcaption><span class="ch-fig-num">Fig. ${figNum}</span> ${rawCaption}</figcaption>` : ''
+      }</figure>`;
+      out = out.replace(m.full, fallback);
     }
   }
-  return result;
+  return out;
 }
+
+// Backwards-compat alias so the older import name still works.
+export const replaceGeminiImagePlaceholdersNode = replaceAiImagePlaceholdersNode;
diff --git a/scripts/lib/node-image.ts b/scripts/lib/node-image.ts
index 886e438..7a03357 100644
--- a/scripts/lib/node-image.ts
+++ b/scripts/lib/node-image.ts
@@ -1,77 +1,60 @@
 /**
- * Node.js Gemini image generation — skips browser canvas compression,
- * saves raw PNG base64 directly.
+ * Node.js wrapper around OpenAI gpt-image-2 — returns raw base64 plus the
+ * mime type, leaving the data-URI assembly to the caller.
  */
 
-interface GeminiPart {
-  text?: string;
-  inlineData?: { mimeType: string; data: string };
-  thought?: boolean;
+interface ImageResponse {
+  data?: Array<{ b64_json?: string }>;
+  error?: { message?: string };
 }
 
-interface GeminiResponse {
-  candidates?: Array<{
-    content?: {
-      parts?: GeminiPart[];
-    };
-  }>;
-  error?: { message: string };
+export interface NodeImageOptions {
+  size?: string;
+  quality?: 'low' | 'medium' | 'high' | 'auto';
 }
 
-/**
- * Generate an infographic using Gemini's image generation model.
- * Returns raw base64 image data (no data URI prefix).
- */
-export async function generateInfographicNode(
+export async function generateImageNode(
   prompt: string,
   apiKey: string,
+  options: NodeImageOptions = {},
 ): Promise<{ base64: string; mimeType: string }> {
-  const model = 'gemini-3.1-flash-image-preview';
-  const url = `https://generativelanguage.googleapis.com/v1beta/models/${model}:generateContent?key=${apiKey}`;
-
   const body = {
-    contents: [{ parts: [{ text: prompt }] }],
-    generationConfig: {
-      responseModalities: ['TEXT', 'IMAGE'],
-    },
+    model: 'gpt-image-2',
+    prompt,
+    n: 1,
+    size: options.size ?? '1024x1024',
+    quality: options.quality ?? 'high',
+    output_format: 'jpeg',
+    output_compression: 90,
   };
 
-  const res = await fetch(url, {
+  const res = await fetch('https://api.openai.com/v1/images/generations', {
     method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
+    headers: {
+      'Content-Type': 'application/json',
+      Authorization: `Bearer ${apiKey}`,
+    },
     body: JSON.stringify(body),
   });
 
   if (!res.ok) {
-    const errBody = await res.text();
-    throw new Error(`Gemini API error (${res.status}): ${errBody.slice(0, 200)}`);
-  }
-
-  const data: GeminiResponse = await res.json();
-
-  if (data.error) {
-    throw new Error(`Gemini error: ${data.error.message}`);
-  }
-
-  const parts = data.candidates?.[0]?.content?.parts;
-  if (!parts || parts.length === 0) {
-    throw new Error('Gemini returned no content');
-  }
-
-  // Find the last non-thought image part
-  let imagePart: GeminiPart | undefined;
-  for (const part of parts) {
-    if (part.inlineData && !part.thought) {
-      imagePart = part;
+    let detail = '';
+    try {
+      const errBody = (await res.json()) as ImageResponse;
+      detail = errBody.error?.message ?? '';
+    } catch {
+      detail = await res.text().catch(() => '');
     }
+    throw new Error(`OpenAI image API ${res.status}: ${detail.slice(0, 300)}`);
   }
 
-  if (!imagePart?.inlineData) {
-    throw new Error('Gemini returned no image');
+  const json = (await res.json()) as ImageResponse;
+  const b64 = json.data?.[0]?.b64_json;
+  if (!b64) {
+    throw new Error('OpenAI returned no image data.');
   }
-
-  return {
-    base64: imagePart.inlineData.data,
-    mimeType: imagePart.inlineData.mimeType,
-  };
+  return { base64: b64, mimeType: 'image/jpeg' };
 }
+
+/** Backwards-compat alias for the previous helper name. */
+export const generateInfographicNode = generateImageNode;
diff --git a/scripts/lib/publish.ts b/scripts/lib/publish.ts
index bd99724..372e03e 100644
--- a/scripts/lib/publish.ts
+++ b/scripts/lib/publish.ts
@@ -5,7 +5,7 @@
  * builds index.html via coursePackageTemplate, and copies assets.
  */
 
-import { readFile, mkdir, copyFile, readdir, stat } from 'node:fs/promises';
+import { readFile, mkdir, copyFile, readdir, stat, cp } from 'node:fs/promises';
 import { writeFile } from 'node:fs/promises';
 import { join, extname } from 'node:path';
 
@@ -17,6 +17,8 @@ import type {
 } from '../../src/types/course';
 import { buildCoursePackageHtml } from './coursePackageTemplate';
 import type { ChapterPackageData } from './coursePackageTemplate';
+import { buildCodexViewerHtml } from './codexViewerTemplate';
+import type { CodexChapterData } from './codexViewerTemplate';
 
 function pad(n: number): string {
   return String(n).padStart(2, '0');
@@ -83,18 +85,52 @@ async function findFileAnyExt(dir: string, prefix: string, exts: string[]): Prom
   }
 }
 
+export interface AssembleOptions {
+  /** Themed chapter HTML dir (default: <outputDir>/chapters). */
+  chaptersDir?: string;
+  /** Themed slides JSON dir (default: <outputDir>/slides). */
+  slidesDir?: string;
+  /** Chapter figure images dir (default: <chaptersDir>/img). Copied to publish/chapters/img. */
+  chapterImgDir?: string;
+  /** Root of per-chapter slide images ch<NN>/slide-<MM>.jpg (default: <slidesDir>/img). */
+  slideImgRootDir?: string;
+  /** Dir holding regenerated <NN>_slides.pptx (default: <slidesDir>). */
+  pptxSrcDir?: string;
+  /** Dir holding weekly-challenge HTML (<NN>_challenge.html) (default: <outputDir>/weekly-challenge). */
+  challengeDir?: string;
+  /** Human label for the course's chapter theme, shown in the viewer sidebar (e.g. "Terminal"). */
+  themeLabel?: string;
+  /** Use the Codex showcase viewer instead of the legacy course package viewer. */
+  codex?: boolean;
+}
+
 export async function assemblePublishPackage(
   outputDir: string,
   themeId?: string,
+  opts: AssembleOptions = {},
 ): Promise<string> {
   const publishDir = join(outputDir, 'publish');
 
+  const chaptersDir = opts.chaptersDir ?? join(outputDir, 'chapters');
+  const slidesDir = opts.slidesDir ?? join(outputDir, 'slides');
+  const chapterImgDir = opts.chapterImgDir ?? join(chaptersDir, 'img');
+  const slideImgRootDir = opts.slideImgRootDir ?? join(slidesDir, 'img');
+  const pptxSrcDir = opts.pptxSrcDir ?? slidesDir;
+  const challengeDir = opts.challengeDir ?? join(outputDir, 'weekly-challenge');
+  const challengePaths: Record<number, string> = {};
+
   // Create directory structure
-  const subdirs = ['chapters', 'quizzes', 'audio', 'img', 'downloads'];
+  const subdirs = ['chapters', 'quizzes', 'audio', 'img', 'downloads', 'slides', 'challenges'];
   for (const sub of subdirs) {
     await mkdir(join(publishDir, sub), { recursive: true });
   }
 
+  // Copy chapter figure images. Chapter HTML references them as img/chNN-figMM.jpg;
+  // loaded in the viewer's iframe (base = chapters/NN.html) they resolve to chapters/img/.
+  if (await exists(chapterImgDir)) {
+    await cp(chapterImgDir, join(publishDir, 'chapters', 'img'), { recursive: true });
+  }
+
   // ── Load syllabus ──────────────────────────────────────────────
   let syllabus: Syllabus | null = null;
   let dossiers: ResearchDossier[] = [];
@@ -129,7 +165,7 @@ export async function assemblePublishPackage(
 
     // -- Chapter HTML --
     let chapterHtmlPath: string | undefined;
-    const chapterSrc = await findFile(join(outputDir, 'chapters'), prefix, '.html');
+    const chapterSrc = await findFile(chaptersDir, prefix, '.html');
     if (chapterSrc) {
       const destName = `${prefix}.html`;
       await copyHtmlWithResizeShim(chapterSrc, join(publishDir, 'chapters', destName));
@@ -145,6 +181,13 @@ export async function assemblePublishPackage(
       quizHtmlPath = `quizzes/${destName}`;
     }
 
+    // -- Weekly Challenge HTML --
+    const challengeSrc = await findFile(challengeDir, `${prefix}_challenge`, '.html');
+    if (challengeSrc) {
+      await copyFile(challengeSrc, join(publishDir, 'challenges', `${prefix}.html`));
+      challengePaths[ch.number] = `challenges/${prefix}.html`;
+    }
+
     // -- Audio MP3 --
     let audioPath: string | undefined;
     const audioSrc = await findFileAnyExt(join(outputDir, 'audio'), prefix, ['.mp3']);
@@ -183,9 +226,15 @@ export async function assemblePublishPackage(
 
     // -- Slides JSON --
     const slides = await readJson<SlideData[]>(
-      join(outputDir, 'slides', `${prefix}_slides.json`)
+      join(slidesDir, `${prefix}_slides.json`)
     );
 
+    // -- Slide images for viewer cards (slides/chNN/slide-MM.jpg, relative to index.html) --
+    const slideImgSrc = join(slideImgRootDir, `ch${prefix}`);
+    if (slides && await exists(slideImgSrc)) {
+      await cp(slideImgSrc, join(publishDir, 'slides', `ch${prefix}`), { recursive: true });
+    }
+
     // -- In-Class Quiz JSON --
     const inClassQuiz = await readJson<InClassQuizQuestion[]>(
       join(outputDir, 'quizzes', `${prefix}_inclass.json`)
@@ -196,7 +245,7 @@ export async function assemblePublishPackage(
 
     // -- Collect downloadable files --
     // Slides PPTX
-    const pptxSrc = await findFile(join(outputDir, 'slides'), `${prefix}_slides`, '.pptx');
+    const pptxSrc = await findFile(pptxSrcDir, `${prefix}_slides`, '.pptx');
     if (pptxSrc) {
       const destName = `${prefix}_slides.pptx`;
       await copyFile(pptxSrc, join(publishDir, 'downloads', destName));
@@ -282,7 +331,33 @@ export async function assemblePublishPackage(
   }
 
   // ── Build index.html ───────────────────────────────────────────
-  const html = buildCoursePackageHtml(syllabus, chaptersData, themeId);
+  let html: string;
+  if (opts.codex) {
+    const codexChapters: CodexChapterData[] = chaptersData.map((c) => ({
+      number: c.number,
+      title: c.title,
+      narrative: c.narrative,
+      chapterHtmlPath: c.chapterHtmlPath,
+      quizHtmlPath: c.quizHtmlPath,
+      challengeHtmlPath: challengePaths[c.number],
+      audioPath: c.audioPath,
+      transcript: c.transcript,
+      slides: c.slides,
+      discussion: c.discussion,
+      activities: c.activities,
+      downloadLinks: c.downloadLinks,
+    }));
+    html = buildCodexViewerHtml(
+      {
+        courseTitle: syllabus.courseTitle,
+        courseOverview: syllabus.courseOverview ?? '',
+        themeLabel: opts.themeLabel,
+      },
+      codexChapters,
+    );
+  } else {
+    html = buildCoursePackageHtml(syllabus, chaptersData, themeId);
+  }
   await writeFile(join(publishDir, 'index.html'), html);
 
   const sizeKb = Math.round(Buffer.byteLength(html) / 1024);
diff --git a/scripts/render-ai-images.ts b/scripts/render-ai-images.ts
new file mode 100644
index 0000000..e15769c
--- /dev/null
+++ b/scripts/render-ai-images.ts
@@ -0,0 +1,197 @@
+/**
+ * Render the <figure class="ai-image"> placeholders in a chapter HTML file
+ * using OpenAI gpt-image-2, then write the images out as JPEG files in an
+ * adjacent ./img/ directory and rewrite the placeholders to <img src="img/…">.
+ *
+ * Why files rather than base64-inline: the HTML stays small enough to edit
+ * by hand, the same images are reusable when we re-assemble the published
+ * course package, and the inline data URI versions blow chapter files past
+ * 1 MB once we have two or three figures.
+ *
+ *   OPENAI_API_KEY=sk-… npx tsx scripts/render-ai-images.ts \
+ *     output/science-and-art-of-tea/chapters-press/01_one-leaf-a-thousand-mountains.html
+ *
+ * Run with --dry to see what it would do without spending money.
+ */
+import fs from 'node:fs/promises';
+import path from 'node:path';
+
+const ENDPOINT = 'https://api.openai.com/v1/images/generations';
+const MODEL = 'gpt-image-2';
+
+const ASPECT_TO_SIZE: Record<string, string> = {
+  square: '1024x1024',
+  portrait: '1024x1536',
+  landscape: '1536x1024',
+  'wide-landscape': '2048x1152',
+};
+
+const SAFETY_CLAUSE =
+  ' Render only text, numbers, dates, names, and citations that appear verbatim earlier in this prompt. Do not invent values: no made-up axis numbers, percentages, sample sizes, dates, author names, or journal titles. If a chart or label would require data that is not in this prompt, omit the values entirely and render the visual as an unlabelled abstract trend.';
+
+interface Placeholder {
+  full: string;
+  prompt: string;
+  aspect: string;
+  caption: string;
+  imageIdx?: string; // when set, output filename uses this idx instead of document order
+}
+
+function findPlaceholders(html: string): Placeholder[] {
+  const re = /<figure\b[^>]*\bclass="ai-image"[^>]*>([\s\S]*?)<\/figure>/gi;
+  const out: Placeholder[] = [];
+  let m: RegExpExecArray | null;
+  while ((m = re.exec(html)) !== null) {
+    const full = m[0];
+    const inner = m[1];
+    const promptM = /data-prompt="([^"]+)"/i.exec(full);
+    const aspectM = /data-aspect="([^"]+)"/i.exec(full);
+    const capM = /<figcaption[^>]*>([\s\S]*?)<\/figcaption>/i.exec(inner);
+    const idxM = /data-image-idx="([^"]+)"/i.exec(full);
+    if (!promptM) continue;
+    out.push({
+      full,
+      prompt: decodeAttr(promptM[1]),
+      aspect: (aspectM?.[1] ?? 'landscape').toLowerCase(),
+      caption: capM ? capM[1].trim() : '',
+      imageIdx: idxM ? idxM[1] : undefined,
+    });
+  }
+  return out;
+}
+
+function decodeAttr(s: string): string {
+  return s.replace(/&quot;/g, '"').replace(/&amp;/g, '&').replace(/&lt;/g, '<').replace(/&gt;/g, '>');
+}
+
+function escapeAttr(s: string): string {
+  return s.replace(/&/g, '&amp;').replace(/"/g, '&quot;');
+}
+
+async function renderImageOnce(prompt: string, aspect: string, apiKey: string): Promise<Buffer> {
+  const body = {
+    model: MODEL,
+    prompt: prompt.trimEnd() + SAFETY_CLAUSE,
+    n: 1,
+    size: ASPECT_TO_SIZE[aspect] ?? ASPECT_TO_SIZE.landscape,
+    quality: 'high',
+    output_format: 'jpeg',
+    output_compression: 90,
+  };
+  const res = await fetch(ENDPOINT, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      Authorization: `Bearer ${apiKey}`,
+    },
+    body: JSON.stringify(body),
+  });
+  if (!res.ok) {
+    const text = await res.text();
+    const err = new Error(`OpenAI ${res.status}: ${text.slice(0, 400)}`) as Error & { status?: number };
+    err.status = res.status;
+    throw err;
+  }
+  const json = await res.json() as { data?: Array<{ b64_json?: string }>; error?: { message?: string } };
+  const b64 = json.data?.[0]?.b64_json;
+  if (!b64) throw new Error(`OpenAI returned no image: ${JSON.stringify(json).slice(0, 200)}`);
+  return Buffer.from(b64, 'base64');
+}
+
+async function renderImage(prompt: string, aspect: string, apiKey: string, maxRetries = 3): Promise<Buffer> {
+  let lastErr: unknown;
+  for (let attempt = 0; attempt <= maxRetries; attempt++) {
+    try {
+      return await renderImageOnce(prompt, aspect, apiKey);
+    } catch (err) {
+      lastErr = err;
+      const status = (err as { status?: number }).status;
+      const transient = status === undefined || status === 429 || (status >= 500 && status < 600);
+      if (!transient || attempt === maxRetries) throw err;
+      const wait = 4000 * Math.pow(2, attempt) + Math.floor(Math.random() * 1500);
+      await new Promise((r) => setTimeout(r, wait));
+    }
+  }
+  throw lastErr;
+}
+
+async function main() {
+  const args = process.argv.slice(2);
+  const dry = args.includes('--dry');
+  const htmlPath = args.find((a) => !a.startsWith('-'));
+  if (!htmlPath) {
+    console.error('usage: tsx render-ai-images.ts <chapter.html> [--dry]');
+    process.exit(2);
+  }
+  const apiKey = process.env.OPENAI_API_KEY;
+  if (!apiKey && !dry) {
+    console.error('OPENAI_API_KEY not set');
+    process.exit(2);
+  }
+
+  const abs = path.resolve(htmlPath);
+  const html = await fs.readFile(abs, 'utf8');
+  const placeholders = findPlaceholders(html);
+  console.log(`${placeholders.length} placeholder(s) in ${path.basename(abs)}`);
+
+  if (placeholders.length === 0) {
+    console.log('Nothing to render.');
+    return;
+  }
+
+  const chapterStem = path.basename(abs, '.html').match(/^(\d+)/)?.[1] ?? '01';
+  const imgDir = path.join(path.dirname(abs), 'img');
+  await fs.mkdir(imgDir, { recursive: true });
+
+  let out = html;
+  for (let i = 0; i < placeholders.length; i++) {
+    const p = placeholders[i];
+    // Prefer data-image-idx for filename numbering (so partial re-renders
+    // preserve their original ch01-fig02.jpg slot). Fall back to document order.
+    const figNum = p.imageIdx !== undefined ? parseInt(p.imageIdx, 10) + 1 : i + 1;
+    const filename = `ch${chapterStem}-fig${String(figNum).padStart(2, '0')}.jpg`;
+    const filePath = path.join(imgDir, filename);
+    const relPath = `img/${filename}`;
+    console.log(`\n[${i + 1}/${placeholders.length}] ${p.aspect}  → ${filename}`);
+    console.log(`  prompt: ${p.prompt.slice(0, 140)}…`);
+
+    if (dry) {
+      console.log('  (--dry, skipping render)');
+      continue;
+    }
+
+    const t0 = Date.now();
+    try {
+      const buf = await renderImage(p.prompt, p.aspect, apiKey!);
+      await fs.writeFile(filePath, buf);
+      const kb = (buf.length / 1024).toFixed(0);
+      const secs = ((Date.now() - t0) / 1000).toFixed(1);
+      console.log(`  ✓ ${kb} KB in ${secs}s`);
+    } catch (err: unknown) {
+      const msg = err instanceof Error ? err.message : String(err);
+      console.error(`  ✗ ${msg}`);
+      continue;
+    }
+
+    const writeIdx = p.imageIdx !== undefined ? parseInt(p.imageIdx, 10) : i;
+    const cleanCaption = p.caption.replace(/^\s*(?:Fig(?:ure)?\.?\s*\d+[.:]?\s*)/i, '').trim();
+    const replacement =
+      `<figure class="ch-figure" data-image-idx="${writeIdx}" data-prompt="${escapeAttr(p.prompt)}" data-aspect="${escapeAttr(p.aspect)}">` +
+      `<div class="ch-figbox" style="height:auto;overflow:visible;">` +
+      `<img src="${relPath}" alt="${escapeAttr(cleanCaption.replace(/<[^>]+>/g, ''))}" style="display:block;max-width:100%;max-height:75vh;height:auto;width:auto;margin:0 auto;">` +
+      `</div>` +
+      (cleanCaption ? `<figcaption><span class="ch-fig-num">Fig. ${figNum}</span> ${cleanCaption}</figcaption>` : '') +
+      `</figure>`;
+    out = out.replace(p.full, replacement);
+  }
+
+  if (!dry) {
+    await fs.writeFile(abs, out, 'utf8');
+    console.log(`\nWrote patched HTML: ${abs}`);
+  }
+}
+
+main().catch((err) => {
+  console.error(err);
+  process.exit(1);
+});
diff --git a/scripts/render-slides.ts b/scripts/render-slides.ts
new file mode 100644
index 0000000..fb8fc0e
--- /dev/null
+++ b/scripts/render-slides.ts
@@ -0,0 +1,152 @@
+/**
+ * Render every slide imagePrompt in a slides.json file via OpenAI gpt-image-2
+ * and write the JPEGs out as slide-NN.jpg into an adjacent ./img/ directory.
+ *
+ *   OPENAI_API_KEY=sk-… npx tsx scripts/render-slides.ts \
+ *     output/science-and-art-of-tea/slides-new/01_slides.json
+ *
+ * --dry prints the prompts without spending money. --concurrency=N runs N
+ * renders in flight at once (default 3 — OpenAI tolerates this politely).
+ */
+import fs from 'node:fs/promises';
+import path from 'node:path';
+
+const ENDPOINT = 'https://api.openai.com/v1/images/generations';
+const MODEL = 'gpt-image-2';
+const SLIDE_SIZE = '2048x1152'; // wide-landscape 16:9 — gpt-image-2's largest 16:9
+const SAFETY_CLAUSE =
+  ' Render only text, numbers, dates, names, and citations that appear verbatim earlier in this prompt. Do not invent values: no made-up axis numbers, percentages, sample sizes, dates, author names, or journal titles. If a chart or label would require data that is not in this prompt, omit the values entirely and render the visual as an unlabelled abstract trend.';
+
+interface Slide {
+  title: string;
+  imagePrompt: string;
+  speakerNotes: string;
+}
+
+async function renderImageOnce(prompt: string, apiKey: string): Promise<Buffer> {
+  const body = {
+    model: MODEL,
+    prompt: prompt.trimEnd() + SAFETY_CLAUSE,
+    n: 1,
+    size: SLIDE_SIZE,
+    quality: 'high',
+    output_format: 'jpeg',
+    output_compression: 90,
+  };
+  const res = await fetch(ENDPOINT, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${apiKey}` },
+    body: JSON.stringify(body),
+  });
+  if (!res.ok) {
+    const err = new Error(`OpenAI ${res.status}: ${(await res.text()).slice(0, 400)}`) as Error & { status?: number };
+    err.status = res.status;
+    throw err;
+  }
+  const json = await res.json() as { data?: Array<{ b64_json?: string }> };
+  const b64 = json.data?.[0]?.b64_json;
+  if (!b64) throw new Error('No image in response');
+  return Buffer.from(b64, 'base64');
+}
+
+/** Retry on transient 5xx / 429 / network blips with exponential backoff. */
+async function renderImage(prompt: string, apiKey: string, maxRetries = 3): Promise<Buffer> {
+  let lastErr: unknown;
+  for (let attempt = 0; attempt <= maxRetries; attempt++) {
+    try {
+      return await renderImageOnce(prompt, apiKey);
+    } catch (err) {
+      lastErr = err;
+      const status = (err as { status?: number }).status;
+      const transient = status === undefined || status === 429 || (status >= 500 && status < 600);
+      if (!transient || attempt === maxRetries) throw err;
+      const wait = 4000 * Math.pow(2, attempt) + Math.floor(Math.random() * 1500);
+      await new Promise((r) => setTimeout(r, wait));
+    }
+  }
+  throw lastErr;
+}
+
+async function runWithConcurrency<T>(tasks: Array<() => Promise<T>>, limit: number): Promise<T[]> {
+  const results: T[] = new Array(tasks.length);
+  let cursor = 0;
+  async function worker() {
+    while (cursor < tasks.length) {
+      const i = cursor++;
+      results[i] = await tasks[i]();
+    }
+  }
+  await Promise.all(Array.from({ length: Math.min(limit, tasks.length) }, worker));
+  return results;
+}
+
+async function main() {
+  const args = process.argv.slice(2);
+  const dry = args.includes('--dry');
+  const force = args.includes('--force');
+  const concArg = args.find((a) => a.startsWith('--concurrency='));
+  const concurrency = concArg ? Math.max(1, Math.min(6, parseInt(concArg.split('=')[1], 10) || 3)) : 3;
+  const jsonPath = args.find((a) => !a.startsWith('-'));
+  if (!jsonPath) {
+    console.error('usage: tsx render-slides.ts <slides.json> [--dry] [--concurrency=N]');
+    process.exit(2);
+  }
+  const apiKey = process.env.OPENAI_API_KEY;
+  if (!apiKey && !dry) { console.error('OPENAI_API_KEY not set'); process.exit(2); }
+
+  const abs = path.resolve(jsonPath);
+  const slides = JSON.parse(await fs.readFile(abs, 'utf8')) as Slide[];
+  const stem = path.basename(abs, '.json').match(/^(\d+)/)?.[1] ?? '01';
+  const imgDir = path.join(path.dirname(abs), 'img', `ch${stem}`);
+  await fs.mkdir(imgDir, { recursive: true });
+
+  console.log(`${slides.length} slide(s), concurrency=${concurrency}, size=${SLIDE_SIZE}`);
+  console.log(`output dir: ${imgDir}`);
+
+  const t0 = Date.now();
+  let done = 0;
+
+  const tasks = slides.map((slide, i) => async () => {
+    const n = String(i + 1).padStart(2, '0');
+    const filename = `slide-${n}.jpg`;
+    const filePath = path.join(imgDir, filename);
+    if (dry) {
+      console.log(`[${i + 1}/${slides.length}] DRY · ${slide.title}`);
+      return null;
+    }
+    // Idempotent: if the file already exists and is non-empty, skip it
+    // (unless --force was passed, e.g. to re-render after a prompt rewrite).
+    if (!force) {
+      try {
+        const st = await fs.stat(filePath);
+        if (st.size > 1000) {
+          done += 1;
+          console.log(`[${done}/${slides.length}] · ${filename} already rendered, skipping`);
+          return filename;
+        }
+      } catch { /* file doesn't exist, fall through to render */ }
+    }
+    const slideStart = Date.now();
+    try {
+      const buf = await renderImage(slide.imagePrompt, apiKey!);
+      await fs.writeFile(filePath, buf);
+      done += 1;
+      const secs = ((Date.now() - slideStart) / 1000).toFixed(1);
+      const kb = (buf.length / 1024).toFixed(0);
+      const elapsedMin = ((Date.now() - t0) / 60000).toFixed(1);
+      console.log(`[${done}/${slides.length}] ✓ ${filename} · ${kb} KB · ${secs}s · ${elapsedMin}min total`);
+      return filename;
+    } catch (err: unknown) {
+      const msg = err instanceof Error ? err.message : String(err);
+      console.error(`[${i + 1}/${slides.length}] ✗ ${slide.title} — ${msg}`);
+      return null;
+    }
+  });
+
+  await runWithConcurrency(tasks, concurrency);
+
+  const totalMin = ((Date.now() - t0) / 60000).toFixed(1);
+  console.log(`\nDone in ${totalMin} min · ${done}/${slides.length} successful`);
+}
+
+main().catch((err) => { console.error(err); process.exit(1); });
diff --git a/scripts/rewrite-image-prompts.ts b/scripts/rewrite-image-prompts.ts
new file mode 100644
index 0000000..e01f7b9
--- /dev/null
+++ b/scripts/rewrite-image-prompts.ts
@@ -0,0 +1,273 @@
+/**
+ * Apply a sidecar JSON of image-prompt rewrites to a chapter HTML or slides
+ * JSON file.
+ *
+ * Used to swap the painterly "field-guide watercolour" / "broadsheet pen-and-
+ * ink" prompts in our example courses for clean editorial photography prompts.
+ * The rewrites themselves are produced in a Claude Code conversation (so they
+ * don't burn API credits); this script just applies them deterministically and
+ * leaves a recoverable backup.
+ *
+ *   npx tsx --env-file=.env.local scripts/rewrite-image-prompts.ts \
+ *     output/raising-a-puppy/chapters-almanac/01_before-they-arrive.html \
+ *     --rewrites tmp/rewrites/puppy-ch01.json
+ *
+ *   npx tsx --env-file=.env.local scripts/rewrite-image-prompts.ts \
+ *     output/raising-a-puppy/slides-almanac/01_slides.json \
+ *     --rewrites tmp/rewrites/puppy-slides-01.json
+ *
+ * SIDECAR FORMAT for chapter HTML — value is either a string (just the new
+ * data-prompt) or an object {prompt, caption} when the figcaption text also
+ * needs updating because the original captioning language ("field-guide
+ * reference") would clash with a photographic image:
+ *   {
+ *     "0": "new prompt for figure index 0",
+ *     "1": { "prompt": "...", "caption": "new caption text without Fig. N prefix" }
+ *   }
+ *
+ * SIDECAR FORMAT for slides JSON — value is a string (the new imagePrompt):
+ *   { "0": "new prompt for slide 0", "3": "new prompt for slide 3" }
+ *
+ * --dry prints what would change without writing.
+ *
+ * Chapter HTMLs are reverted to <figure class="ai-image"> placeholder form so
+ * the existing render-ai-images.ts picks them up next run. The <figcaption>
+ * text is preserved; the rendered <img> is dropped.
+ *
+ * Slide JSONs have their imagePrompt fields patched in place.
+ *
+ * A .pre-photo-rewrite backup of the target file is created the first time
+ * this script touches it.
+ */
+import fs from 'node:fs/promises';
+import path from 'node:path';
+
+interface Options {
+  dry: boolean;
+  rewritesPath: string | null;
+}
+
+function parseArgs(argv: string[]): { target: string | null; opts: Options } {
+  let target: string | null = null;
+  let dry = false;
+  let rewritesPath: string | null = null;
+  for (let i = 0; i < argv.length; i++) {
+    const a = argv[i];
+    if (a === '--dry') dry = true;
+    else if (a === '--rewrites') rewritesPath = argv[++i] ?? null;
+    else if (a.startsWith('--rewrites=')) rewritesPath = a.split('=', 2)[1];
+    else if (!a.startsWith('-')) {
+      if (!target) target = a;
+      else throw new Error(`unexpected positional argument: ${a}`);
+    }
+  }
+  return { target, opts: { dry, rewritesPath } };
+}
+
+async function ensureBackup(filePath: string): Promise<void> {
+  const bak = `${filePath}.pre-photo-rewrite`;
+  try {
+    await fs.access(bak);
+    return; // backup already exists, leave it alone
+  } catch { /* fall through */ }
+  await fs.copyFile(filePath, bak);
+}
+
+function decodeAttr(s: string): string {
+  return s.replace(/&quot;/g, '"').replace(/&amp;/g, '&').replace(/&lt;/g, '<').replace(/&gt;/g, '>');
+}
+
+function escapeAttr(s: string): string {
+  return s.replace(/&/g, '&amp;').replace(/"/g, '&quot;');
+}
+
+/** Strip the leading "Fig. N" span (with optional bold/serif wrapping) and HTML tags. */
+function cleanCaptionText(raw: string): string {
+  return raw
+    .replace(/<span\s+class="ch-fig-num"[^>]*>[^<]*<\/span>\s*/i, '')
+    .replace(/<[^>]+>/g, '')
+    .replace(/^\s*Fig(?:ure)?\.?\s*\d+[.:]?\s*/i, '')
+    .trim();
+}
+
+interface ChapterFigure {
+  full: string;            // the original <figure>...</figure> block
+  prompt: string;
+  aspect: string;
+  caption: string;         // already cleaned of "Fig. N" prefix and inner tags
+  imageIdx?: string;       // data-image-idx from a previously-rendered ch-figure, if present
+}
+
+function findChapterFigures(html: string): ChapterFigure[] {
+  // Match either ai-image (un-rendered placeholder) or ch-figure (already-rendered)
+  // figures that carry a data-prompt attribute. Allow other classes alongside the
+  // identifying one.
+  const re = /<figure\b[^>]*\bclass="(?:ai-image|ch-figure)(?:[^"]*)?"[^>]*>[\s\S]*?<\/figure>/gi;
+  const out: ChapterFigure[] = [];
+  let m: RegExpExecArray | null;
+  while ((m = re.exec(html)) !== null) {
+    const full = m[0];
+    const promptM = /data-prompt="([^"]+)"/i.exec(full);
+    if (!promptM) continue;
+    const aspectM = /data-aspect="([^"]+)"/i.exec(full);
+    const capM = /<figcaption[^>]*>([\s\S]*?)<\/figcaption>/i.exec(full);
+    const idxM = /data-image-idx="([^"]+)"/i.exec(full);
+    out.push({
+      full,
+      prompt: decodeAttr(promptM[1]),
+      aspect: aspectM ? decodeAttr(aspectM[1]) : 'landscape',
+      caption: capM ? cleanCaptionText(capM[1]) : '',
+      imageIdx: idxM ? idxM[1] : undefined,
+    });
+  }
+  return out;
+}
+
+function buildPlaceholder(prompt: string, aspect: string, caption: string, imageIdx?: string): string {
+  const inner = caption ? `<figcaption>${caption}</figcaption>` : '';
+  const idxAttr = imageIdx !== undefined ? ` data-image-idx="${escapeAttr(imageIdx)}"` : '';
+  return `<figure class="ai-image"${idxAttr} data-prompt="${escapeAttr(prompt)}" data-aspect="${escapeAttr(aspect)}">${inner}</figure>`;
+}
+
+type ChapterRewriteValue = string | { prompt: string; caption?: string };
+type SlideRewriteValue = string;
+type RewriteValue = ChapterRewriteValue | SlideRewriteValue;
+
+async function loadRewrites(rewritesPath: string): Promise<Record<string, RewriteValue>> {
+  const txt = await fs.readFile(rewritesPath, 'utf8');
+  const obj = JSON.parse(txt);
+  if (typeof obj !== 'object' || obj === null || Array.isArray(obj)) {
+    throw new Error(`rewrites file must be a JSON object of {index: newPrompt | {prompt, caption?}}`);
+  }
+  return obj as Record<string, RewriteValue>;
+}
+
+function unpackChapterRewrite(v: RewriteValue): { prompt: string; caption?: string } | null {
+  if (typeof v === 'string') return { prompt: v };
+  if (v && typeof v === 'object' && typeof (v as { prompt?: unknown }).prompt === 'string') {
+    return { prompt: (v as { prompt: string }).prompt, caption: (v as { caption?: string }).caption };
+  }
+  return null;
+}
+
+async function processChapter(filePath: string, rewrites: Record<string, RewriteValue>, opts: Options): Promise<void> {
+  const html = await fs.readFile(filePath, 'utf8');
+  const figures = findChapterFigures(html);
+  if (figures.length === 0) {
+    console.log(`  no figures found in ${path.basename(filePath)}`);
+    return;
+  }
+  console.log(`  ${figures.length} figure(s) found; ${Object.keys(rewrites).length} rewrite(s) supplied`);
+
+  let touched = 0;
+  let out = html;
+  for (let i = 0; i < figures.length; i++) {
+    const rv = rewrites[String(i)];
+    if (rv === undefined) {
+      console.log(`    [${i}] (skipped — no rewrite supplied)`);
+      continue;
+    }
+    const unpacked = unpackChapterRewrite(rv);
+    if (!unpacked) {
+      console.warn(`    [${i}] (skipped — rewrite value must be string or {prompt, caption?})`);
+      continue;
+    }
+    const fig = figures[i];
+    const nextCaption = unpacked.caption ?? fig.caption;
+    console.log(`    [${i}] aspect=${fig.aspect}`);
+    console.log(`        BEFORE prompt (${fig.prompt.length} chars): ${fig.prompt.slice(0, 140)}…`);
+    console.log(`        AFTER  prompt (${unpacked.prompt.length} chars): ${unpacked.prompt.slice(0, 140)}…`);
+    if (unpacked.caption && unpacked.caption !== fig.caption) {
+      console.log(`        BEFORE caption: ${fig.caption.slice(0, 140)}${fig.caption.length > 140 ? '…' : ''}`);
+      console.log(`        AFTER  caption: ${nextCaption.slice(0, 140)}${nextCaption.length > 140 ? '…' : ''}`);
+    }
+    out = out.replace(fig.full, buildPlaceholder(unpacked.prompt, fig.aspect, nextCaption, fig.imageIdx ?? String(i)));
+    touched += 1;
+  }
+
+  if (touched === 0) {
+    console.log('  nothing to write');
+    return;
+  }
+  if (opts.dry) {
+    console.log(`  (dry) would rewrite ${touched} figure(s) in ${path.basename(filePath)}`);
+    return;
+  }
+  await ensureBackup(filePath);
+  await fs.writeFile(filePath, out, 'utf8');
+  console.log(`  ✓ wrote ${path.basename(filePath)} (${touched} figures reverted to ai-image placeholders)`);
+}
+
+interface SlideRecord {
+  title?: string;
+  imagePrompt?: string;
+  [k: string]: unknown;
+}
+
+async function processSlides(filePath: string, rewrites: Record<string, RewriteValue>, opts: Options): Promise<void> {
+  const json = await fs.readFile(filePath, 'utf8');
+  const slides = JSON.parse(json) as SlideRecord[];
+  if (!Array.isArray(slides)) {
+    console.error(`  ${path.basename(filePath)}: expected an array of slides`);
+    return;
+  }
+  console.log(`  ${slides.length} slide(s) in file; ${Object.keys(rewrites).length} rewrite(s) supplied`);
+
+  let touched = 0;
+  for (const key of Object.keys(rewrites)) {
+    const idx = parseInt(key, 10);
+    if (!Number.isInteger(idx) || idx < 0 || idx >= slides.length) {
+      console.warn(`    [${key}] (skipped — out of range)`);
+      continue;
+    }
+    const slide = slides[idx];
+    const before = (slide.imagePrompt as string | undefined) ?? '';
+    const rv = rewrites[key];
+    if (typeof rv !== 'string') {
+      console.warn(`    [${idx}] (skipped — slide rewrites must be plain strings)`);
+      continue;
+    }
+    console.log(`    [${idx}] ${slide.title?.slice(0, 60) ?? ''}`);
+    console.log(`        BEFORE (${before.length} chars): ${before.slice(0, 160)}…`);
+    console.log(`        AFTER  (${rv.length} chars): ${rv.slice(0, 160)}…`);
+    slides[idx].imagePrompt = rv;
+    touched += 1;
+  }
+
+  if (touched === 0) {
+    console.log('  nothing to write');
+    return;
+  }
+  if (opts.dry) {
+    console.log(`  (dry) would patch ${touched} imagePrompt(s) in ${path.basename(filePath)}`);
+    return;
+  }
+  await ensureBackup(filePath);
+  await fs.writeFile(filePath, JSON.stringify(slides, null, 2) + '\n', 'utf8');
+  console.log(`  ✓ wrote ${path.basename(filePath)} (${touched} imagePrompts patched)`);
+}
+
+async function main() {
+  const { target, opts } = parseArgs(process.argv.slice(2));
+  if (!target || !opts.rewritesPath) {
+    console.error('usage: tsx rewrite-image-prompts.ts <file.html|file.json> --rewrites <rewrites.json> [--dry]');
+    process.exit(2);
+  }
+  const abs = path.resolve(target);
+  const ext = path.extname(abs).toLowerCase();
+  const rewrites = await loadRewrites(opts.rewritesPath);
+  console.log(`→ ${path.relative(process.cwd(), abs) || abs}${opts.dry ? ' (DRY — no writes)' : ''}`);
+  if (ext === '.html') {
+    await processChapter(abs, rewrites, opts);
+  } else if (ext === '.json') {
+    await processSlides(abs, rewrites, opts);
+  } else {
+    console.error(`unrecognised extension: ${ext}`);
+    process.exit(2);
+  }
+}
+
+main().catch((err) => {
+  console.error(err);
+  process.exit(1);
+});
diff --git a/src/App.tsx b/src/App.tsx
index 029feee..dedc4aa 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,5 +1,6 @@
 import { useState, useEffect } from 'react';
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import { MotionConfig } from 'framer-motion';
 import { AppShell } from './components/layout/AppShell';
 import { LandingPage } from './pages/LandingPage';
 import { SetupPage } from './pages/SetupPage';
@@ -20,29 +21,61 @@ function App() {
 
   if (!hydrated) {
     return (
-      <div className="min-h-screen flex items-center justify-center bg-bg-primary">
-        <div className="flex items-center gap-3 text-text-muted text-sm">
-          <div className="w-5 h-5 border-2 border-violet-500 border-t-transparent rounded-full animate-spin" />
-          Loading course data...
+      <div
+        style={{
+          minHeight: '100vh',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          background: 'var(--cb-ground-page)',
+          fontFamily: 'var(--font-cb-serif)',
+        }}
+      >
+        <div
+          className="cb-italic"
+          style={{
+            fontSize: 15,
+            color: 'var(--cb-text-muted)',
+            display: 'flex',
+            alignItems: 'baseline',
+            gap: 10,
+          }}
+        >
+          <span
+            className="cb-sc cb-mono"
+            style={{
+              fontSize: 12,
+              letterSpacing: '0.14em',
+              color: 'var(--cb-accent-emphasis)',
+            }}
+          >
+            cb · loading
+          </span>
+          <span>fetching local course data…</span>
         </div>
       </div>
     );
   }
 
   return (
-    <BrowserRouter>
-      <Routes>
-        <Route element={<AppShell />}>
-          <Route path="/" element={<LandingPage />} />
-          <Route path="/setup" element={<SetupPage />} />
-          <Route path="/syllabus" element={<SyllabusPage />} />
-          <Route path="/research" element={<ResearchPage />} />
-          <Route path="/build" element={<BuildPage />} />
-          <Route path="/export" element={<ExportPage />} />
-          <Route path="/templates" element={<TemplatePreviewPage />} />
-        </Route>
-      </Routes>
-    </BrowserRouter>
+    // reducedMotion="user" disables framer-motion transforms for users with
+    // the OS "reduce motion" preference; the CSS side is handled by the
+    // prefers-reduced-motion block in index.css.
+    <MotionConfig reducedMotion="user">
+      <BrowserRouter>
+        <Routes>
+          <Route element={<AppShell />}>
+            <Route path="/" element={<LandingPage />} />
+            <Route path="/setup" element={<SetupPage />} />
+            <Route path="/syllabus" element={<SyllabusPage />} />
+            <Route path="/research" element={<ResearchPage />} />
+            <Route path="/build" element={<BuildPage />} />
+            <Route path="/export" element={<ExportPage />} />
+            <Route path="/templates" element={<TemplatePreviewPage />} />
+          </Route>
+        </Routes>
+      </BrowserRouter>
+    </MotionConfig>
   );
 }
 
diff --git a/src/components/build/ArtifactShell.tsx b/src/components/build/ArtifactShell.tsx
new file mode 100644
index 0000000..171288e
--- /dev/null
+++ b/src/components/build/ArtifactShell.tsx
@@ -0,0 +1,140 @@
+import type { ReactNode } from 'react';
+
+/**
+ * Canonical container for every per-chapter artefact in BuildPage.
+ *
+ * Each tab — Reading, Quiz, Audio, Slides, Discussion, etc. — should wrap its
+ * preview in this shell so the chrome reads as one design language: small
+ * uppercase kicker label on the left, italic title beside it, optional meta
+ * line in muted italic, and a right-aligned actions cluster. The body is a
+ * free-form children slot; an optional foot slot sits below for metadata
+ * strips or secondary controls.
+ *
+ * The shell is decoration only — generation state, downloads, refines, and
+ * all per-artefact behaviour stay with the calling tab. The shell just
+ * guarantees the *outside* of every artefact looks like every other.
+ */
+export interface ArtifactShellProps {
+  /** Small uppercase SC label, e.g. "Slides", "Reading", "Audio". */
+  kicker: string;
+  /** Plain-language title for what's inside (italic). */
+  title?: ReactNode;
+  /** Optional muted meta line — counts, status, etc. */
+  meta?: ReactNode;
+  /** Right-aligned action cluster (buttons, chips). */
+  actions?: ReactNode;
+  /** Optional foot rule + content (e.g. summary metrics). */
+  foot?: ReactNode;
+  /** Body content. */
+  children: ReactNode;
+  /** When true, render the body without a border-bordered card (useful for
+   *  full-bleed iframes or single-image previews). Header still renders. */
+  bodyless?: boolean;
+}
+
+export function ArtifactShell({
+  kicker,
+  title,
+  meta,
+  actions,
+  foot,
+  children,
+  bodyless,
+}: ArtifactShellProps) {
+  return (
+    <section
+      style={{
+        background: 'var(--cb-ground-page)',
+        border: '1px solid var(--cb-border-default)',
+        borderRadius: 2,
+        overflow: 'hidden',
+        fontFamily: 'var(--font-cb-serif)',
+      }}
+    >
+      <header
+        style={{
+          display: 'flex',
+          alignItems: 'flex-start',
+          justifyContent: 'space-between',
+          gap: 16,
+          padding: '14px 20px',
+          background: 'var(--cb-surface-sunken)',
+          borderBottom: '0.5px solid var(--cb-border-default)',
+        }}
+      >
+        <div style={{ minWidth: 0, flex: '1 1 auto' }}>
+          <div
+            className="cb-sc"
+            style={{
+              fontSize: 11,
+              letterSpacing: '0.14em',
+              color: 'var(--cb-text-muted)',
+              marginBottom: title ? 4 : 0,
+            }}
+          >
+            {kicker}
+          </div>
+          {title && (
+            <div
+              className="cb-italic"
+              style={{
+                fontSize: 16,
+                color: 'var(--cb-text-default)',
+                lineHeight: 1.3,
+                fontVariationSettings: '"opsz" 14',
+              }}
+            >
+              {title}
+            </div>
+          )}
+          {meta && (
+            <div
+              className="cb-italic"
+              style={{
+                fontSize: 12.5,
+                color: 'var(--cb-text-muted)',
+                marginTop: 4,
+                lineHeight: 1.4,
+              }}
+            >
+              {meta}
+            </div>
+          )}
+        </div>
+        {actions && (
+          <div
+            style={{
+              display: 'flex',
+              gap: 8,
+              alignItems: 'center',
+              flexShrink: 0,
+            }}
+          >
+            {actions}
+          </div>
+        )}
+      </header>
+      {bodyless ? (
+        children
+      ) : (
+        <div style={{ padding: '20px 22px' }}>{children}</div>
+      )}
+      {foot && (
+        <footer
+          style={{
+            padding: '12px 20px',
+            borderTop: '0.5px solid var(--cb-border-rule)',
+            background: 'var(--cb-surface-sunken)',
+            fontSize: 12.5,
+            color: 'var(--cb-text-muted)',
+            display: 'flex',
+            gap: 16,
+            flexWrap: 'wrap',
+          }}
+        >
+          {foot}
+        </footer>
+      )}
+    </section>
+  );
+}
diff --git a/src/components/build/ChapterImageRefineDrawer.tsx b/src/components/build/ChapterImageRefineDrawer.tsx
new file mode 100644
index 0000000..cac3e58
--- /dev/null
+++ b/src/components/build/ChapterImageRefineDrawer.tsx
@@ -0,0 +1,289 @@
+import { motion, AnimatePresence } from 'framer-motion';
+import { CodexButton as Button } from '../codex';
+
+/**
+ * Drawer that slides in from the right when the user clicks a chapter image.
+ * Shows a thumbnail of the current render, the original prompt (editable when
+ * an OpenAI key is present, read-only otherwise), and a Regenerate button that
+ * re-runs gpt-image-2 against just this one image.
+ */
+export function ChapterImageRefineDrawer({
+  state,
+  draft,
+  onDraftChange,
+  onClose,
+  onRefine,
+  isRefining,
+  hasOpenAiKey,
+  error,
+  onAddKey,
+}: {
+  state: { idx: number; prompt: string; aspect: string; src: string } | null;
+  draft: string;
+  onDraftChange: (text: string) => void;
+  onClose: () => void;
+  onRefine: () => void;
+  isRefining: boolean;
+  hasOpenAiKey: boolean;
+  error: string | null;
+  onAddKey: () => void;
+}) {
+  return (
+    <AnimatePresence>
+      {state && (
+        <>
+          {/* Scrim is interactive only when the render is idle. While
+              gpt-image-2 runs, we drop it to pointer-events:none so the user
+              can still scroll the chapter, switch tabs, or navigate — the
+              render keeps going regardless and the image swaps in when done. */}
+          <motion.div
+            key="scrim"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: isRefining ? 0 : 1 }}
+            exit={{ opacity: 0 }}
+            transition={{ duration: 0.18 }}
+            onClick={onClose}
+            style={{
+              position: 'fixed',
+              inset: 0,
+              background: 'rgba(20, 17, 13, 0.36)',
+              zIndex: 40,
+              cursor: 'pointer',
+              pointerEvents: isRefining ? 'none' : 'auto',
+            }}
+          />
+          <motion.aside
+            key="drawer"
+            initial={{ x: 480, opacity: 0 }}
+            animate={{ x: 0, opacity: 1 }}
+            exit={{ x: 480, opacity: 0 }}
+            transition={{ type: 'spring', stiffness: 280, damping: 32 }}
+            style={{
+              position: 'fixed',
+              top: 0,
+              right: 0,
+              bottom: 0,
+              width: 'min(480px, 92vw)',
+              background: 'var(--cb-ground-page)',
+              borderLeft: '1px solid var(--cb-border-default)',
+              boxShadow: '-12px 0 36px rgba(20,17,13,0.16)',
+              zIndex: 41,
+              display: 'flex',
+              flexDirection: 'column',
+              fontFamily: 'var(--font-cb-serif)',
+            }}
+          >
+            <header
+              style={{
+                padding: '20px 24px 16px',
+                borderBottom: '0.5px solid var(--cb-border-default)',
+                display: 'flex',
+                justifyContent: 'space-between',
+                alignItems: 'baseline',
+              }}
+            >
+              <div>
+                <div
+                  className="cb-sc"
+                  style={{
+                    fontSize: 11,
+                    letterSpacing: '0.16em',
+                    color: 'var(--cb-accent-emphasis)',
+                    marginBottom: 4,
+                  }}
+                >
+                  Refine image
+                </div>
+                <h2
+                  style={{
+                    margin: 0,
+                    fontSize: 22,
+                    fontWeight: 500,
+                    fontVariationSettings: '"opsz" 20',
+                    color: 'var(--cb-text-default)',
+                    lineHeight: 1.2,
+                  }}
+                >
+                  Figure {state.idx + 1}
+                </h2>
+              </div>
+              <button
+                onClick={onClose}
+                aria-label="Close"
+                style={{
+                  background: 'none',
+                  border: 0,
+                  padding: 6,
+                  cursor: 'pointer',
+                  color: 'var(--cb-text-muted)',
+                  fontSize: 18,
+                  lineHeight: 1,
+                }}
+                title={isRefining ? 'Close (render keeps going in the background)' : 'Close'}
+              >
+                ✕
+              </button>
+            </header>
+
+            <div style={{ padding: '18px 24px', overflowY: 'auto', flex: 1 }}>
+              <div
+                style={{
+                  marginBottom: 18,
+                  border: '0.5px solid var(--cb-border-default)',
+                  borderRadius: 2,
+                  overflow: 'hidden',
+                  background: 'var(--cb-surface-sunken)',
+                }}
+              >
+                <img
+                  src={state.src}
+                  alt={`Figure ${state.idx + 1} current render`}
+                  style={{
+                    display: 'block',
+                    width: '100%',
+                    height: 'auto',
+                    maxHeight: 280,
+                    objectFit: 'contain',
+                    opacity: isRefining ? 0.4 : 1,
+                    transition: 'opacity 240ms ease',
+                  }}
+                />
+              </div>
+
+              <div
+                className="cb-sc"
+                style={{
+                  fontSize: 11.5,
+                  letterSpacing: '0.14em',
+                  color: 'var(--cb-text-muted)',
+                  marginBottom: 6,
+                  display: 'flex',
+                  alignItems: 'baseline',
+                  justifyContent: 'space-between',
+                }}
+              >
+                <span>Image prompt · {state.aspect}</span>
+                {hasOpenAiKey && draft !== state.prompt && !isRefining && (
+                  <button
+                    type="button"
+                    onClick={() => onDraftChange(state.prompt)}
+                    className="cb-italic"
+                    style={{
+                      background: 'none',
+                      border: 0,
+                      cursor: 'pointer',
+                      padding: 0,
+                      fontSize: 11.5,
+                      color: 'var(--cb-text-muted)',
+                      textTransform: 'none',
+                      letterSpacing: 0,
+                    }}
+                  >
+                    ← reset
+                  </button>
+                )}
+              </div>
+              <textarea
+                value={draft}
+                onChange={(e) => onDraftChange(e.target.value)}
+                readOnly={!hasOpenAiKey}
+                disabled={isRefining}
+                rows={10}
+                spellCheck={false}
+                style={{
+                  width: '100%',
+                  padding: '12px 14px',
+                  fontFamily: 'var(--font-cb-mono)',
+                  fontSize: 13,
+                  lineHeight: 1.55,
+                  background: 'var(--cb-ground-canvas)',
+                  border: '0.5px solid var(--cb-border-default)',
+                  borderRadius: 2,
+                  color: 'var(--cb-text-default)',
+                  resize: 'vertical',
+                  outline: 'none',
+                  opacity: isRefining ? 0.6 : !hasOpenAiKey ? 0.85 : 1,
+                  cursor: !hasOpenAiKey ? 'default' : undefined,
+                }}
+              />
+              {!hasOpenAiKey && (
+                <p
+                  className="cb-italic"
+                  style={{
+                    margin: '10px 0 0',
+                    fontSize: 12.5,
+                    color: 'var(--cb-text-muted)',
+                    lineHeight: 1.5,
+                  }}
+                >
+                  This is the prompt that built the image above. Add an OpenAI key
+                  to edit it and regenerate just this one figure.
+                </p>
+              )}
+
+              {error && (
+                <p
+                  style={{
+                    margin: '12px 0 0',
+                    padding: '10px 12px',
+                    background: 'var(--cb-status-danger-bg, rgba(160, 53, 53, 0.08))',
+                    borderLeft: '2px solid var(--cb-status-danger, #a03535)',
+                    fontSize: 13,
+                    color: 'var(--cb-text-default)',
+                    lineHeight: 1.5,
+                  }}
+                >
+                  {error}
+                </p>
+              )}
+
+              {isRefining && (
+                <p
+                  className="cb-italic"
+                  style={{
+                    margin: '14px 0 0',
+                    fontSize: 13,
+                    color: 'var(--cb-text-muted)',
+                    lineHeight: 1.55,
+                  }}
+                >
+                  Rendering through gpt-image-2 — typically 30–60 seconds.
+                  Feel free to close this drawer and scroll around; we'll swap
+                  the image in place when it's ready.
+                </p>
+              )}
+            </div>
+
+            <footer
+              style={{
+                padding: '14px 24px 20px',
+                borderTop: '0.5px solid var(--cb-border-default)',
+                display: 'flex',
+                gap: 10,
+                justifyContent: 'flex-end',
+                alignItems: 'baseline',
+              }}
+            >
+              <Button variant="ghost" size="sm" onClick={onClose}>
+                {isRefining ? 'Close — keep rendering' : 'Cancel'}
+              </Button>
+              {!hasOpenAiKey ? (
+                <Button onClick={onAddKey} size="sm">
+                  Add OpenAI key →
+                </Button>
+              ) : (
+                <Button
+                  size="sm"
+                  onClick={onRefine}
+                  disabled={isRefining || !draft.trim()}
+                >
+                  {isRefining ? 'Rendering…' : 'Regenerate ↻'}
+                </Button>
+              )}
+            </footer>
+          </motion.aside>
+        </>
+      )}
+    </AnimatePresence>
+  );
+}
diff --git a/src/components/build/ChapterSidebar.tsx b/src/components/build/ChapterSidebar.tsx
index 2089c49..2587377 100644
--- a/src/components/build/ChapterSidebar.tsx
+++ b/src/components/build/ChapterSidebar.tsx
@@ -1,6 +1,5 @@
-import { motion } from 'framer-motion';
-import { useCourseStore } from '../../store/courseStore';
 import { useApiStore } from '../../store/apiStore';
+import { useCourseStore } from '../../store/courseStore';
 
 interface ChapterSidebarProps {
   selectedChapterNum: number;
@@ -9,105 +8,264 @@ interface ChapterSidebarProps {
   batchCurrentChapter: number | null;
 }
 
-function countReady(ch: { htmlContent: string; practiceQuizData?: string; inClassQuizData?: unknown[]; weeklyChallengeData?: unknown; discussionData?: unknown[]; activityData?: unknown[]; audioTranscript?: string; slidesJson?: unknown[]; infographicDataUri?: string }, hasGemini: boolean): number {
+const ROMAN_UPPER = [
+  'I', 'II', 'III', 'IV', 'V', 'VI', 'VII', 'VIII', 'IX', 'X',
+  'XI', 'XII', 'XIII', 'XIV', 'XV', 'XVI', 'XVII', 'XVIII', 'XIX', 'XX',
+];
+
+interface MaterialCount {
+  ready: number;
+  total: number;
+}
+
+function countReady(
+  ch: {
+    htmlContent: string;
+    practiceQuizData?: string;
+    inClassQuizData?: unknown[];
+    weeklyChallengeData?: unknown;
+    discussionData?: unknown[];
+    activityData?: unknown[];
+    audioTranscript?: string;
+    slidesJson?: unknown[];
+  },
+  advanced: boolean,
+): MaterialCount {
+  // Canvas-focused mode only surfaces four materials (the other tabs are
+  // hidden), so only those count toward "fully drafted".
   let count = 0;
   if (ch.htmlContent) count++;
   if (ch.practiceQuizData) count++;
   if (ch.inClassQuizData && ch.inClassQuizData.length > 0) count++;
-  if (ch.weeklyChallengeData) count++;
   if (ch.discussionData && ch.discussionData.length > 0) count++;
-  if (ch.activityData && ch.activityData.length > 0) count++;
-  if (ch.audioTranscript) count++;
-  if (ch.slidesJson && ch.slidesJson.length > 0) count++;
-  if (hasGemini && ch.infographicDataUri) count++;
-  return count;
+  if (advanced) {
+    if (ch.weeklyChallengeData) count++;
+    if (ch.activityData && ch.activityData.length > 0) count++;
+    if (ch.audioTranscript) count++;
+    if (ch.slidesJson && ch.slidesJson.length > 0) count++;
+  }
+  return { ready: count, total: advanced ? 8 : 4 };
 }
 
-export function ChapterSidebar({ selectedChapterNum, onSelectChapter, disabled, batchCurrentChapter }: ChapterSidebarProps) {
+export function ChapterSidebar({
+  selectedChapterNum,
+  onSelectChapter,
+  disabled,
+  batchCurrentChapter,
+}: ChapterSidebarProps) {
   const { syllabus, chapters, researchDossiers } = useCourseStore();
-  const { geminiApiKey } = useApiStore();
-  const hasGemini = !!geminiApiKey;
-  const totalOutputs = hasGemini ? 9 : 8;
+  const advancedMode = useApiStore((st) => st.advancedMode);
 
   if (!syllabus) return null;
 
   return (
-    <div className="w-[260px] shrink-0 border-r border-violet-500/10 overflow-y-auto pr-2">
-      <div className="px-3 py-2 mb-1">
-        <p className="text-xs text-text-muted font-medium uppercase tracking-wider">Classes</p>
+    <aside
+      data-build-sidebar
+      style={{
+        width: 280,
+        flexShrink: 0,
+        overflowY: 'auto',
+        borderRight: '0.5px solid var(--cb-border-default)',
+        background: 'var(--cb-surface-sunken)',
+        fontFamily: 'var(--font-cb-serif)',
+      }}
+    >
+      <div
+        style={{
+          padding: '20px 18px 12px',
+          borderBottom: '0.5px solid var(--cb-border-default)',
+        }}
+      >
+        <div
+          className="cb-sc"
+          style={{
+            fontSize: 13,
+            color: 'var(--cb-text-muted)',
+            letterSpacing: '0.14em',
+          }}
+        >
+          Chapters
+        </div>
       </div>
-      <div className="space-y-1">
-        {syllabus.chapters.map((ch) => {
-          const generated = chapters.find(c => c.number === ch.number);
-          const dossier = researchDossiers.find(d => d.chapterNumber === ch.number);
-          const readyCount = generated ? countReady(generated, hasGemini) : 0;
+
+      <div style={{ display: 'flex', flexDirection: 'column' }}>
+        {syllabus.chapters.map((ch, idx) => {
+          const generated = chapters.find((c) => c.number === ch.number);
+          const dossier = researchDossiers.find(
+            (d) => d.chapterNumber === ch.number,
+          );
+          const counts = generated
+            ? countReady(generated, advancedMode)
+            : { ready: 0, total: advancedMode ? 8 : 4 };
           const isSelected = ch.number === selectedChapterNum;
           const isBatchCurrent = batchCurrentChapter === ch.number;
-          const progress = readyCount / totalOutputs;
+          const fullyReady = counts.ready === counts.total && counts.ready > 0;
+          const roman = ROMAN_UPPER[idx] ?? String(ch.number);
 
           return (
             <button
               key={ch.number}
+              type="button"
               onClick={() => !disabled && onSelectChapter(ch.number)}
               disabled={disabled}
-              className={`w-full text-left px-3 py-2.5 rounded-lg transition-all border-0 ${
-                disabled ? 'cursor-default' : 'cursor-pointer'
-              } ${
-                isSelected
-                  ? 'bg-violet-500/15 border-l-2 border-l-violet-500'
-                  : 'bg-transparent hover:bg-bg-elevated'
-              }`}
+              className="cb-focus"
+              style={{
+                position: 'relative',
+                textAlign: 'left',
+                padding: '14px 16px 14px 18px',
+                background: isSelected
+                  ? 'var(--cb-accent-emphasis-quiet)'
+                  : 'transparent',
+                border: 'none',
+                borderTop:
+                  idx === 0
+                    ? 'none'
+                    : '0.5px solid var(--cb-border-subtle)',
+                cursor: disabled ? 'default' : 'pointer',
+                fontFamily: 'inherit',
+                color: 'var(--cb-text-default)',
+                transition:
+                  'background-color 200ms cubic-bezier(0.32,0.04,0.32,1)',
+              }}
             >
-              <div className="flex items-center gap-2 mb-1">
-                {isBatchCurrent && (
-                  <motion.span
-                    className="w-2 h-2 rounded-full bg-violet-500 shrink-0"
-                    animate={{ opacity: [1, 0.3, 1] }}
-                    transition={{ duration: 1.2, repeat: Infinity }}
-                  />
-                )}
-                <span className={`text-sm font-medium truncate ${isSelected ? 'text-violet-400' : 'text-text-primary'}`}>
-                  {ch.number}. {ch.title}
+              {/* Selected left rule */}
+              {isSelected && (
+                <span
+                  aria-hidden
+                  style={{
+                    position: 'absolute',
+                    left: 0,
+                    top: 0,
+                    bottom: 0,
+                    width: 2,
+                    background: 'var(--cb-accent-emphasis)',
+                  }}
+                />
+              )}
+
+              {/* Roman + title row */}
+              <div
+                style={{
+                  display: 'grid',
+                  gridTemplateColumns: '32px 1fr',
+                  alignItems: 'baseline',
+                  gap: 10,
+                }}
+              >
+                <span
+                  className="cb-italic"
+                  style={{
+                    fontSize: 17,
+                    color: fullyReady
+                      ? 'var(--cb-accent-emphasis)'
+                      : counts.ready > 0
+                      ? 'var(--cb-accent-emphasis)'
+                      : 'var(--cb-text-subtle)',
+                    lineHeight: 1,
+                  }}
+                >
+                  {roman}
+                </span>
+                <span
+                  style={{
+                    fontSize: 14.5,
+                    lineHeight: 1.3,
+                    color: 'var(--cb-text-default)',
+                    fontWeight: isSelected ? 500 : 400,
+                    overflow: 'hidden',
+                    display: '-webkit-box',
+                    WebkitLineClamp: 2,
+                    WebkitBoxOrient: 'vertical',
+                  }}
+                >
+                  {ch.title}
                 </span>
               </div>
 
-              {/* Status line */}
-              <div className="flex items-center gap-2 pl-0.5">
-                {readyCount > 0 ? (
+              {/* Single status line — one status per card. */}
+              <div
+                style={{
+                  display: 'flex',
+                  alignItems: 'baseline',
+                  gap: 8,
+                  marginTop: 6,
+                  paddingLeft: 42,
+                }}
+              >
+                {isBatchCurrent ? (
                   <>
-                    <div className="flex-1 h-1 bg-bg-elevated rounded-full overflow-hidden">
-                      <div
-                        className={`h-full rounded-full transition-all duration-500 ${
-                          readyCount >= totalOutputs ? 'bg-success' : 'bg-violet-500'
-                        }`}
-                        style={{ width: `${progress * 100}%` }}
+                    <span
+                      aria-hidden
+                      style={{
+                        display: 'inline-block',
+                        width: 28,
+                        height: 1,
+                        background: 'var(--cb-border-default)',
+                        position: 'relative',
+                        overflow: 'hidden',
+                        verticalAlign: 'middle',
+                        flexShrink: 0,
+                      }}
+                    >
+                      <span
+                        style={{
+                          position: 'absolute',
+                          inset: 0,
+                          background: 'var(--cb-accent-emphasis)',
+                          animation:
+                            'cb-pen 1.4s cubic-bezier(0.32,0.04,0.32,1) infinite',
+                        }}
                       />
-                    </div>
-                    <span className="text-[11px] text-text-muted tabular-nums shrink-0">
-                      {readyCount}/{totalOutputs}
+                    </span>
+                    <span
+                      className="cb-italic"
+                      style={{
+                        fontSize: 12.5,
+                        color: 'var(--cb-accent-emphasis)',
+                      }}
+                    >
+                      drafting
                     </span>
                   </>
+                ) : fullyReady ? (
+                  <span
+                    className="cb-italic"
+                    style={{ fontSize: 12.5, color: 'var(--cb-text-muted)' }}
+                  >
+                    — complete
+                  </span>
+                ) : counts.ready > 0 ? (
+                  <span
+                    className="cb-italic"
+                    style={{ fontSize: 12.5, color: 'var(--cb-accent-emphasis)' }}
+                  >
+                    — {counts.ready} of {counts.total} drafted
+                  </span>
                 ) : (
-                  <span className="text-[11px] text-text-muted">Not started</span>
+                  <span
+                    className="cb-italic"
+                    style={{ fontSize: 12.5, color: 'var(--cb-text-muted)' }}
+                  >
+                    — awaiting
+                  </span>
                 )}
-              </div>
-
-              {/* Research badge */}
-              {dossier && dossier.sources.length > 0 ? (
-                <div className="mt-1 pl-0.5">
-                  <span className="text-[10px] text-violet-400/70">
-                    {dossier.sources.length} source{dossier.sources.length !== 1 ? 's' : ''}
+                {dossier && dossier.sources.length > 0 && counts.ready === 0 && (
+                  <span
+                    className="cb-italic"
+                    style={{
+                      fontSize: 12,
+                      color: 'var(--cb-text-subtle)',
+                    }}
+                  >
+                    · {dossier.sources.length}{' '}
+                    {dossier.sources.length === 1 ? 'source' : 'sources'}
                   </span>
-                </div>
-              ) : (
-                <div className="mt-1 pl-0.5">
-                  <span className="text-[10px] text-amber-400/60">No research</span>
-                </div>
-              )}
+                )}
+              </div>
             </button>
           );
         })}
       </div>
-    </div>
+    </aside>
   );
 }
diff --git a/src/components/build/ResearchPanel.tsx b/src/components/build/ResearchPanel.tsx
index 2a60454..f28e0c1 100644
--- a/src/components/build/ResearchPanel.tsx
+++ b/src/components/build/ResearchPanel.tsx
@@ -1,82 +1,91 @@
-import { useState } from 'react';
-import { motion, AnimatePresence } from 'framer-motion';
+import { useNavigate } from 'react-router-dom';
 import { useCourseStore } from '../../store/courseStore';
-import { isSafeHttpUrl } from '../../utils/url';
+import { CodexBadge } from '../codex';
 
 interface ResearchPanelProps {
   chapterNum: number;
 }
 
+/**
+ * Slim one-line reference to the research dossier for this chapter. The
+ * full dossier lives on /research — this is just a pointer.
+ */
 export function ResearchPanel({ chapterNum }: ResearchPanelProps) {
-  const [expanded, setExpanded] = useState(false);
+  const navigate = useNavigate();
   const { researchDossiers } = useCourseStore();
-  const dossier = researchDossiers.find(d => d.chapterNumber === chapterNum);
+  const dossier = researchDossiers.find((d) => d.chapterNumber === chapterNum);
 
   if (!dossier || dossier.sources.length === 0) return null;
 
+  const unverifiedCount = dossier.sources.filter(
+    (s) => s.isVerified === false,
+  ).length;
+
   return (
-    <div className="mb-4 border border-violet-500/10 rounded-xl overflow-hidden bg-bg-card">
-      <button
-        onClick={() => setExpanded(v => !v)}
-        className="w-full flex items-center justify-between px-5 py-3 bg-transparent border-0 cursor-pointer hover:bg-violet-500/5 transition-colors"
+    <div
+      style={{
+        display: 'flex',
+        alignItems: 'baseline',
+        justifyContent: 'space-between',
+        gap: 14,
+        marginBottom: 18,
+        paddingBottom: 12,
+        borderBottom: '0.5px solid var(--cb-border-subtle)',
+        fontFamily: 'var(--font-cb-serif)',
+      }}
+    >
+      <span
+        style={{
+          display: 'inline-flex',
+          alignItems: 'baseline',
+          gap: 10,
+          flexWrap: 'wrap',
+          minWidth: 0,
+        }}
       >
-        <div className="flex items-center gap-2">
-          <svg className="w-4 h-4 text-violet-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-            <circle cx="11" cy="11" r="8" /><line x1="21" y1="21" x2="16.65" y2="16.65" />
-          </svg>
-          <span className="text-sm font-medium text-text-primary">
-            Research — {dossier.sources.length} source{dossier.sources.length !== 1 ? 's' : ''}
-          </span>
-        </div>
-        <svg
-          className={`w-4 h-4 text-text-muted transition-transform ${expanded ? 'rotate-180' : ''}`}
-          viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"
+        <span
+          className="cb-italic"
+          style={{
+            fontSize: 13,
+            color: 'var(--cb-text-muted)',
+            lineHeight: 1.5,
+          }}
         >
-          <polyline points="6 9 12 15 18 9" />
-        </svg>
-      </button>
-
-      <AnimatePresence>
-        {expanded && (
-          <motion.div
-            initial={{ height: 0, opacity: 0 }}
-            animate={{ height: 'auto', opacity: 1 }}
-            exit={{ height: 0, opacity: 0 }}
-            transition={{ duration: 0.25 }}
-            className="overflow-hidden"
-          >
-            <div className="px-5 pb-4 space-y-2.5 border-t border-violet-500/10 pt-3">
-              {dossier.sources.map((source, i) => (
-                <div key={i} className="bg-bg-elevated rounded-lg p-3">
-                  <p className="text-sm font-medium text-text-primary">{source.title}</p>
-                  {source.authors && (
-                    <p className="text-xs text-text-muted mt-0.5">
-                      {source.authors}{source.year ? ` (${source.year})` : ''}
-                    </p>
-                  )}
-                  {isSafeHttpUrl(source.url) && (
-                    <a
-                      href={source.url}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="text-xs text-violet-400 hover:underline mt-1 block truncate"
-                    >
-                      {source.url}
-                    </a>
-                  )}
-                </div>
-              ))}
-
-              {dossier.synthesisNotes && (
-                <div className="pt-2 border-t border-violet-500/10">
-                  <p className="text-xs font-medium text-text-muted uppercase tracking-wider mb-1">Synthesis</p>
-                  <p className="text-sm text-text-secondary leading-relaxed">{dossier.synthesisNotes}</p>
-                </div>
-              )}
-            </div>
-          </motion.div>
+          Drafted from{' '}
+          <span style={{ color: 'var(--cb-text-default)', fontStyle: 'normal' }}>
+            {dossier.sources.length}
+          </span>{' '}
+          {dossier.sources.length === 1 ? 'cited source' : 'cited sources'}.
+        </span>
+        {unverifiedCount > 0 && (
+          <span title="AI-cited — verify this reference before teaching from it.">
+            <CodexBadge tone="warning">
+              {unverifiedCount} unverified
+            </CodexBadge>
+          </span>
         )}
-      </AnimatePresence>
+      </span>
+      <button
+        type="button"
+        onClick={() => navigate('/research')}
+        className="cb-focus"
+        style={{
+          background: 'transparent',
+          border: 0,
+          padding: 0,
+          cursor: 'pointer',
+          fontFamily: 'inherit',
+          fontSize: 13,
+          fontStyle: 'italic',
+          color: 'var(--cb-accent-link)',
+          textDecoration: 'underline',
+          textDecorationThickness: '0.5px',
+          textUnderlineOffset: 3,
+          whiteSpace: 'nowrap',
+        }}
+      >
+        view dossier ↗
+      </button>
     </div>
   );
 }
diff --git a/src/components/build/ShortcutsHelpOverlay.tsx b/src/components/build/ShortcutsHelpOverlay.tsx
new file mode 100644
index 0000000..aba90ad
--- /dev/null
+++ b/src/components/build/ShortcutsHelpOverlay.tsx
@@ -0,0 +1,135 @@
+import { useEffect } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+
+const SHORTCUTS: Array<{ keys: string; label: string }> = [
+  { keys: '1 … 8',  label: 'Switch tab (Reading / Quizzes / Slides / …)' },
+  { keys: 'J',      label: 'Next chapter' },
+  { keys: 'K',      label: 'Previous chapter' },
+  { keys: 'G',      label: 'Generate all materials for this chapter' },
+  { keys: '⌘ S',    label: 'Already auto-saved — friendly reminder' },
+  { keys: '?',      label: 'Show / hide this help' },
+  { keys: 'Esc',    label: 'Close drawer / dialog' },
+];
+
+/** Modal overlay listing the keyboard shortcuts. Toggled by `?`. Dismisses
+ *  with Escape, scrim click, or any external close trigger. */
+export function ShortcutsHelpOverlay({
+  open,
+  onClose,
+}: {
+  open: boolean;
+  onClose: () => void;
+}) {
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose();
+    };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [open, onClose]);
+
+  return (
+    <AnimatePresence>
+      {open && (
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          transition={{ duration: 0.16 }}
+          onClick={onClose}
+          style={{
+            position: 'fixed',
+            inset: 0,
+            zIndex: 60,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            background: 'rgba(20,17,13,0.42)',
+            padding: 16,
+          }}
+        >
+          <motion.div
+            initial={{ opacity: 0, y: 6 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: 6 }}
+            transition={{ duration: 0.2 }}
+            onClick={(e) => e.stopPropagation()}
+            style={{
+              background: 'var(--cb-surface-raised, var(--cb-ground-page))',
+              border: '1px solid var(--cb-border-default)',
+              borderRadius: 3,
+              padding: '28px 32px 24px',
+              width: 'min(520px, 100%)',
+              fontFamily: 'var(--font-cb-serif)',
+              boxShadow: 'var(--cb-shadow-modal, 0 24px 60px rgba(20,17,13,0.18))',
+            }}
+          >
+            <div
+              className="cb-sc"
+              style={{
+                fontSize: 13,
+                letterSpacing: '0.16em',
+                color: 'var(--cb-accent-emphasis)',
+                marginBottom: 4,
+              }}
+            >
+              Keyboard
+            </div>
+            <h3
+              style={{
+                margin: '0 0 18px',
+                fontSize: 22,
+                fontWeight: 500,
+                fontVariationSettings: '"opsz" 20',
+                letterSpacing: '-0.005em',
+                color: 'var(--cb-text-default)',
+              }}
+            >
+              Shortcuts
+            </h3>
+            <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 14.5 }}>
+              <tbody>
+                {SHORTCUTS.map((s, i) => (
+                  <tr
+                    key={i}
+                    style={{
+                      borderTop: i === 0 ? 'none' : '0.5px solid var(--cb-border-subtle)',
+                    }}
+                  >
+                    <td
+                      className="cb-mono"
+                      style={{
+                        padding: '10px 14px 10px 0',
+                        fontSize: 13,
+                        color: 'var(--cb-accent-emphasis)',
+                        whiteSpace: 'nowrap',
+                        width: 80,
+                      }}
+                    >
+                      {s.keys}
+                    </td>
+                    <td style={{ padding: '10px 0', color: 'var(--cb-text-default)', lineHeight: 1.45 }}>
+                      {s.label}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+            <p
+              className="cb-italic"
+              style={{
+                margin: '18px 0 0',
+                fontSize: 12.5,
+                color: 'var(--cb-text-muted)',
+                lineHeight: 1.55,
+              }}
+            >
+              Shortcuts only fire when you're not typing in a field. Esc or click outside to dismiss.
+            </p>
+          </motion.div>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+}
diff --git a/src/components/build/TransientToast.tsx b/src/components/build/TransientToast.tsx
new file mode 100644
index 0000000..67b5463
--- /dev/null
+++ b/src/components/build/TransientToast.tsx
@@ -0,0 +1,40 @@
+import { motion, AnimatePresence } from 'framer-motion';
+
+/**
+ * Small bottom-right toast for short-lived feedback (e.g., catching Cmd+S
+ * with "no need to save — auto-saved"). Parent controls visibility by
+ * passing `message` (string) or `null`; auto-dismissal lives in the parent.
+ */
+export function TransientToast({ message }: { message: string | null }) {
+  return (
+    <AnimatePresence>
+      {message && (
+        <motion.div
+          initial={{ opacity: 0, y: 12 }}
+          animate={{ opacity: 1, y: 0 }}
+          exit={{ opacity: 0, y: 6 }}
+          transition={{ duration: 0.22 }}
+          role="status"
+          aria-live="polite"
+          style={{
+            position: 'fixed',
+            bottom: 24,
+            right: 24,
+            zIndex: 55,
+            padding: '10px 16px',
+            background: 'var(--cb-text-default)',
+            color: 'var(--cb-ground-page)',
+            borderRadius: 3,
+            fontFamily: 'var(--font-cb-serif)',
+            fontSize: 14,
+            lineHeight: 1.45,
+            maxWidth: 360,
+            boxShadow: '0 14px 32px rgba(20,17,13,0.24)',
+          }}
+        >
+          {message}
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+}
diff --git a/src/components/build/artifactHelpers.tsx b/src/components/build/artifactHelpers.tsx
new file mode 100644
index 0000000..c464d2f
--- /dev/null
+++ b/src/components/build/artifactHelpers.tsx
@@ -0,0 +1,414 @@
+import type { ReactNode } from 'react';
+import { motion } from 'framer-motion';
+import { CodexButton as Button } from '../codex';
+
+/**
+ * Shared chrome for per-chapter artefacts on BuildPage tabs. Three roles:
+ *
+ *   - ArtifactPreviewFrame — bordered card with mono-labelled head + optional
+ *     download button + body slot. Used for iframe-based previews (Quiz,
+ *     Reading, etc.).
+ *   - ArtifactStatusLine — the "drafting…" pen-stroke status row that shows
+ *     while a particular artefact is generating.
+ *   - ArtifactEmpty — the "nothing here yet" empty state with a primary CTA
+ *     and optional secondary action.
+ *   - KeyRequiredEmpty — heavier weight empty state for tabs gated by a
+ *     missing API key (OpenAI for Slides, ElevenLabs for Audio narration).
+ *   - KeyMissingBanner — compact inline banner above a partially-usable
+ *     artefact, with an "Add key →" CTA.
+ *
+ * Lived in BuildPage.tsx; pulled out so each extracted tab component can
+ * import what it needs without touching the page file.
+ */
+
+export function ArtifactPreviewFrame({
+  title,
+  downloadLabel,
+  onDownload,
+  children,
+}: {
+  title: string;
+  downloadLabel?: string;
+  onDownload?: () => void;
+  children: ReactNode;
+}) {
+  return (
+    <div
+      style={{
+        background: 'var(--cb-ground-page)',
+        border: '1px solid var(--cb-border-default)',
+        borderRadius: 2,
+        overflow: 'hidden',
+      }}
+    >
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'baseline',
+          justifyContent: 'space-between',
+          padding: '12px 18px',
+          background: 'var(--cb-surface-sunken)',
+          borderBottom: '0.5px solid var(--cb-border-default)',
+          gap: 16,
+        }}
+      >
+        <span
+          className="cb-mono"
+          style={{
+            fontSize: 12.5,
+            color: 'var(--cb-text-muted)',
+            letterSpacing: '0.04em',
+          }}
+        >
+          {title}
+        </span>
+        {onDownload && (
+          <Button size="sm" variant="ghost" onClick={onDownload}>
+            {downloadLabel ?? 'Download ↓'}
+          </Button>
+        )}
+      </div>
+      {children}
+    </div>
+  );
+}
+
+export function ArtifactStatusLine({
+  children,
+  onStop,
+}: {
+  children: ReactNode;
+  /** When provided, renders a quiet "stop" control that cancels the
+   *  generation this line reports on. */
+  onStop?: () => void;
+}) {
+  return (
+    <div
+      role="status"
+      aria-live="polite"
+      style={{
+        display: 'flex',
+        gap: 14,
+        alignItems: 'baseline',
+        padding: '20px 22px',
+        background: 'var(--cb-surface-sunken)',
+        border: '1px solid var(--cb-border-default)',
+        borderRadius: 2,
+      }}
+    >
+      <span
+        aria-hidden
+        style={{
+          display: 'inline-block',
+          width: 48,
+          height: 1,
+          background: 'var(--cb-border-default)',
+          position: 'relative',
+          overflow: 'hidden',
+          flexShrink: 0,
+        }}
+      >
+        <span
+          style={{
+            position: 'absolute',
+            inset: 0,
+            background: 'var(--cb-accent-emphasis)',
+            animation: 'cb-pen 1.4s cubic-bezier(0.32,0.04,0.32,1) infinite',
+          }}
+        />
+      </span>
+      <span
+        className="cb-italic"
+        style={{
+          fontSize: 14.5,
+          color: 'var(--cb-text-muted)',
+          lineHeight: 1.55,
+          flex: 1,
+          minWidth: 0,
+        }}
+      >
+        {children}
+      </span>
+      {onStop && (
+        <button
+          type="button"
+          onClick={onStop}
+          className="cb-mono"
+          title="Stop generating — nothing is saved from a stopped draft"
+          style={{
+            flexShrink: 0,
+            background: 'none',
+            border: '0.5px solid var(--cb-border-default)',
+            borderRadius: 2,
+            padding: '3px 10px',
+            fontSize: 11,
+            letterSpacing: '0.08em',
+            color: 'var(--cb-text-muted)',
+            cursor: 'pointer',
+          }}
+        >
+          stop
+        </button>
+      )}
+    </div>
+  );
+}
+
+export function ArtifactEmpty({
+  kicker,
+  title,
+  body,
+  cta,
+  onCta,
+  disabled,
+  secondaryCta,
+  onSecondaryCta,
+}: {
+  kicker: string;
+  title: string;
+  body: string;
+  cta: string;
+  onCta: () => void;
+  disabled?: boolean;
+  secondaryCta?: string;
+  onSecondaryCta?: () => void;
+}) {
+  return (
+    <div
+      style={{
+        padding: '32px 28px',
+        background: 'var(--cb-ground-page)',
+        border: '1px solid var(--cb-border-default)',
+        borderRadius: 2,
+      }}
+    >
+      <div
+        className="cb-sc"
+        style={{
+          fontSize: 11,
+          color: 'var(--cb-text-muted)',
+          letterSpacing: '0.14em',
+        }}
+      >
+        {kicker}
+      </div>
+      <h3
+        style={{
+          margin: '6px 0 10px',
+          fontSize: 22,
+          fontWeight: 500,
+          fontVariationSettings: '"opsz" 20',
+          letterSpacing: '-0.005em',
+          color: 'var(--cb-text-default)',
+          lineHeight: 1.25,
+        }}
+      >
+        {title}
+      </h3>
+      <p
+        className="cb-italic"
+        style={{
+          margin: '0 0 20px',
+          fontSize: 14.5,
+          color: 'var(--cb-text-muted)',
+          lineHeight: 1.55,
+          maxWidth: '72ch',
+        }}
+      >
+        {body}
+      </p>
+      <div style={{ display: 'flex', gap: 10 }}>
+        <Button onClick={onCta} disabled={disabled}>
+          {cta}
+        </Button>
+        {secondaryCta && onSecondaryCta && (
+          <Button variant="ghost" onClick={onSecondaryCta} disabled={disabled}>
+            {secondaryCta}
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export function KeyRequiredEmpty({
+  kicker,
+  title,
+  body,
+  primaryLabel,
+  onPrimary,
+  secondaryLabel,
+  onSecondary,
+  secondaryDisabled,
+}: {
+  kicker: string;
+  title: string;
+  body: string;
+  primaryLabel: string;
+  onPrimary: () => void;
+  secondaryLabel?: string;
+  onSecondary?: () => void;
+  secondaryDisabled?: boolean;
+}) {
+  return (
+    <div
+      style={{
+        padding: '28px 28px 24px',
+        background: 'var(--cb-ground-page)',
+        border: '1px solid var(--cb-border-default)',
+        borderRadius: 2,
+      }}
+    >
+      <div
+        className="cb-sc"
+        style={{
+          fontSize: 11,
+          color: 'var(--cb-text-muted)',
+          letterSpacing: '0.14em',
+        }}
+      >
+        {kicker} · key required
+      </div>
+      <h3
+        style={{
+          margin: '6px 0 10px',
+          fontSize: 22,
+          fontWeight: 500,
+          fontVariationSettings: '"opsz" 20',
+          letterSpacing: '-0.005em',
+          color: 'var(--cb-text-default)',
+          lineHeight: 1.25,
+        }}
+      >
+        {title}
+      </h3>
+      <p
+        style={{
+          margin: '0 0 18px',
+          padding: '12px 14px',
+          background: 'var(--cb-accent-emphasis-quiet)',
+          borderLeft: '2px solid var(--cb-accent-emphasis)',
+          borderRadius: 2,
+          fontSize: 14.5,
+          color: 'var(--cb-text-default)',
+          lineHeight: 1.55,
+          maxWidth: '72ch',
+        }}
+      >
+        {body}
+      </p>
+      <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
+        <Button onClick={onPrimary}>{primaryLabel}</Button>
+        {secondaryLabel && onSecondary && (
+          <Button variant="ghost" onClick={onSecondary} disabled={secondaryDisabled}>
+            {secondaryLabel}
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export function KeyMissingBanner({
+  tone,
+  text,
+  ctaLabel,
+  onCta,
+}: {
+  tone: 'recommended' | 'optional';
+  text: ReactNode;
+  ctaLabel: string;
+  onCta: () => void;
+}) {
+  const hard = tone === 'recommended';
+  return (
+    <div
+      style={{
+        padding: '12px 14px',
+        background: hard
+          ? 'var(--cb-accent-emphasis-quiet)'
+          : 'var(--cb-surface-sunken)',
+        border: `0.5px solid ${hard ? 'var(--cb-accent-emphasis)' : 'var(--cb-border-default)'}`,
+        borderLeft: `2px solid ${hard ? 'var(--cb-accent-emphasis)' : 'var(--cb-text-muted)'}`,
+        borderRadius: 2,
+        display: 'flex',
+        alignItems: 'flex-start',
+        gap: 14,
+        flexWrap: 'wrap',
+      }}
+    >
+      <div
+        style={{
+          flex: '1 1 320px',
+          minWidth: 0,
+          fontSize: 14,
+          color: 'var(--cb-text-default)',
+          lineHeight: 1.55,
+        }}
+      >
+        {text}
+      </div>
+      <Button size="sm" variant={hard ? 'primary' : 'secondary'} onClick={onCta}>
+        {ctaLabel}
+      </Button>
+    </div>
+  );
+}
+
+/**
+ * One-time inline hint strip surfaced when a new affordance becomes relevant
+ * for the first time. Dismisses with × or via a parent timer. Persistence
+ * to localStorage is the parent's responsibility — this component renders.
+ */
+export function DiscoveryHint({
+  text,
+  onDismiss,
+}: {
+  text: string;
+  onDismiss: () => void;
+}) {
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: -4 }}
+      animate={{ opacity: 1, y: 0 }}
+      exit={{ opacity: 0, y: -4 }}
+      transition={{ duration: 0.24 }}
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: 10,
+        padding: '10px 14px',
+        margin: '0 0 12px',
+        background: 'var(--cb-accent-emphasis-quiet)',
+        border: '0.5px solid var(--cb-accent-emphasis)',
+        borderLeft: '2px solid var(--cb-accent-emphasis)',
+        borderRadius: 2,
+        fontFamily: 'var(--font-cb-serif)',
+        fontSize: 13.5,
+        color: 'var(--cb-text-default)',
+        lineHeight: 1.5,
+      }}
+    >
+      <span style={{ flex: 1 }}>{text}</span>
+      <button
+        type="button"
+        onClick={onDismiss}
+        aria-label="Dismiss hint"
+        title="Dismiss"
+        style={{
+          background: 'none',
+          border: 0,
+          padding: 4,
+          margin: 0,
+          fontSize: 13,
+          lineHeight: 1,
+          color: 'var(--cb-text-muted)',
+          cursor: 'pointer',
+          flexShrink: 0,
+        }}
+      >
+        ✕
+      </button>
+    </motion.div>
+  );
+}
diff --git a/src/components/build/chapterImageHelpers.ts b/src/components/build/chapterImageHelpers.ts
new file mode 100644
index 0000000..28ab28e
--- /dev/null
+++ b/src/components/build/chapterImageHelpers.ts
@@ -0,0 +1,95 @@
+/**
+ * Pure helpers + the in-iframe click shim for per-image chapter refine.
+ * Pulled out of BuildPage.tsx so the ReadingTab component (and any future
+ * consumer) can use them without dragging the whole page module.
+ */
+
+export const CHAPTER_ASPECT_TO_SIZE: Record<string, string> = {
+  square: '1024x1024',
+  portrait: '1024x1536',
+  landscape: '1536x1024',
+  'wide-landscape': '2048x1152',
+};
+
+/** Pull the `<img src>` for the chapter image at the given idx, so the
+ *  refine drawer can show a thumbnail without round-tripping to the iframe. */
+export function getChapterImageSrc(html: string, idx: number): string | null {
+  const re = new RegExp(
+    `<figure[^>]*\\bdata-image-idx="${idx}"[^>]*>[\\s\\S]*?<img[^>]*?\\bsrc="([^"]*)"`,
+    'i',
+  );
+  const m = html.match(re);
+  return m ? m[1] : null;
+}
+
+/** Replace one chapter image's prompt + src in place. Targets the figure
+ *  by data-image-idx and rewrites just the figure's data-prompt attribute
+ *  and the inner img's src attribute — leaves the rest of the chapter HTML
+ *  untouched. */
+export function swapChapterImage(
+  html: string,
+  idx: number,
+  newPrompt: string,
+  newDataUri: string,
+): string {
+  const figureRe = new RegExp(
+    `(<figure[^>]*\\bdata-image-idx="${idx}"[^>]*>[\\s\\S]*?<\\/figure>)`,
+    'i',
+  );
+  const m = html.match(figureRe);
+  if (!m) return html;
+  const escapedPrompt = newPrompt.replace(/&/g, '&amp;').replace(/"/g, '&quot;');
+  let block = m[1];
+  if (/data-prompt="[^"]*"/i.test(block)) {
+    block = block.replace(/data-prompt="[^"]*"/i, `data-prompt="${escapedPrompt}"`);
+  } else {
+    block = block.replace(
+      /(<figure[^>]*?)>/i,
+      `$1 data-prompt="${escapedPrompt}">`,
+    );
+  }
+  block = block.replace(/(<img[^>]*?\bsrc=)"[^"]*"/i, `$1"${newDataUri}"`);
+  return html.replace(m[1], block);
+}
+
+/** Tiny script appended to the chapter iframe srcdoc on BuildPage so that
+ *  clicks on rendered images bubble to the parent as postMessages. */
+export const CHAPTER_IMAGE_CLICK_SHIM = `<script>(function(){
+  function onClick(e){
+    var t = e.target;
+    if (!t || !t.closest) return;
+    var img = t.closest('img[data-image-idx]');
+    if (!img) return;
+    var fig = img.closest('figure.ch-figure');
+    if (!fig) return;
+    var idxStr = fig.getAttribute('data-image-idx');
+    var idx = idxStr == null ? NaN : parseInt(idxStr, 10);
+    if (isNaN(idx)) return;
+    e.preventDefault();
+    try {
+      parent.postMessage({
+        __cbImageClick: 1,
+        idx: idx,
+        prompt: fig.getAttribute('data-prompt') || '',
+        aspect: fig.getAttribute('data-aspect') || 'landscape'
+      }, '*');
+    } catch(err) {}
+  }
+  document.addEventListener('click', onClick);
+  var s = document.createElement('style');
+  s.textContent = 'figure.ch-figure img[data-image-idx]{transition:outline 160ms ease, box-shadow 160ms ease;outline:2px solid transparent;outline-offset:4px;}figure.ch-figure img[data-image-idx]:hover{outline-color:#6e1f24;box-shadow:0 0 0 1px rgba(110,31,36,0.15);}figure.ch-figure img[data-image-idx]::after{}figure.ch-figure{position:relative;}figure.ch-figure:hover::after{content:"✎ refine";position:absolute;top:8px;right:8px;background:#6e1f24;color:#fff;font-family:ui-monospace,monospace;font-size:10px;letter-spacing:0.1em;text-transform:uppercase;padding:3px 7px;border-radius:2px;opacity:0.92;pointer-events:none;}';
+  document.head && document.head.appendChild(s);
+})();</script>`;
+
+export function withImageClickShim(html: string): string {
+  if (html.includes('</body>')) {
+    return html.replace('</body>', `${CHAPTER_IMAGE_CLICK_SHIM}</body>`);
+  }
+  return html + CHAPTER_IMAGE_CLICK_SHIM;
+}
+
+/** Does this chapter contain at least one rendered image with `data-image-idx`?
+ *  Used to decide whether the "Hover any image to refine it" hint is relevant. */
+export function chapterHasRefinableImages(html: string): boolean {
+  return /<figure[^>]*\bdata-image-idx="\d+"/i.test(html);
+}
diff --git a/src/components/build/tabs/ActivitiesTab.tsx b/src/components/build/tabs/ActivitiesTab.tsx
new file mode 100644
index 0000000..91e6f13
--- /dev/null
+++ b/src/components/build/tabs/ActivitiesTab.tsx
@@ -0,0 +1,285 @@
+import { motion, AnimatePresence } from 'framer-motion';
+import { ArtifactStatusLine, ArtifactEmpty } from '../artifactHelpers';
+import type { ActivityDetail } from '../../../types/course';
+import { normalizeActivityDetail } from '../../../utils/activityDetail';
+
+export interface Activity {
+  title: string;
+  duration: string;
+  description: string;
+  materials: string;
+  learningGoal: string;
+  scalingNotes: string;
+}
+
+export interface ActivitiesTabProps {
+  activities: Activity[];
+  expandedActivities: Record<number, ActivityDetail>;
+  expandingActivity: number | null;
+  copiedLabel: string;
+  isGenerating: boolean;
+  canGenerate: boolean;
+  onGenerate: () => void;
+  /** Cancels the in-flight generation this tab reports on. */
+  onStop: () => void;
+  onCopy: (text: string, label: string) => void;
+  onFleshOut: (i: number) => void;
+  onCollapse: (i: number) => void;
+  formatActivitiesText: () => string;
+}
+
+export function ActivitiesTab({
+  activities,
+  expandedActivities,
+  expandingActivity,
+  copiedLabel,
+  isGenerating,
+  canGenerate,
+  onGenerate,
+  onStop,
+  onCopy,
+  onFleshOut,
+  onCollapse,
+  formatActivitiesText,
+}: ActivitiesTabProps) {
+  if (activities.length === 0) {
+    if (isGenerating) {
+      return (
+        <ArtifactStatusLine onStop={onStop}>
+          Drafting in-class activities — four to six with timing and scaling notes
+          for different cohort sizes.
+        </ArtifactStatusLine>
+      );
+    }
+    return (
+      <ArtifactEmpty
+        kicker="Activities"
+        title="Four to six in-class activities"
+        body="Ready-to-run exercises for your class session — each one tells you how long it takes, what you need on hand, and how to adapt it for a small seminar or a large lecture."
+        cta="Generate activities"
+        onCta={onGenerate}
+        disabled={!canGenerate}
+      />
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-end gap-2">
+        <button
+          onClick={() => onCopy(formatActivitiesText(), 'activities')}
+          className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium bg-cb-accent-emphasis-quiet text-cb-accent-emphasis hover:bg-cb-accent-emphasis-quiet transition-colors cursor-pointer"
+        >
+          {copiedLabel === 'activities' ? (
+            <>
+              <svg className="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><polyline points="20 6 9 17 4 12" /></svg>
+              Copied!
+            </>
+          ) : (
+            <>
+              <svg className="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                <rect x="9" y="9" width="13" height="13" rx="2" ry="2" /><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+              </svg>
+              Copy All
+            </>
+          )}
+        </button>
+      </div>
+      {activities.map((a, i) => {
+        const detail = normalizeActivityDetail(expandedActivities[i]);
+        const isExpanding = expandingActivity === i;
+        const isExpanded = !!detail;
+
+        return (
+          <motion.div
+            key={i}
+            initial={{ opacity: 0, y: 10 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ delay: i * 0.08 }}
+            className="bg-cb-ground-page border border-cb-border-default rounded-xl overflow-hidden"
+          >
+            <div className="p-5">
+              <div className="flex items-start justify-between gap-3 mb-2">
+                <h3 className="text-base font-semibold">{a.title}</h3>
+                <div className="flex items-center gap-2 shrink-0">
+                  <button
+                    onClick={() => {
+                      const d = detail;
+                      let text = `${a.title}  (${a.duration})\n\n${a.description}\n\nMaterials: ${a.materials}\nLearning Goal: ${a.learningGoal}\nScaling: ${a.scalingNotes}`;
+                      if (d) {
+                        text += '\n\nStep-by-Step Guide:\n' + d.steps.map(s => `  [${s.timing}] ${s.instruction}${s.studentAction ? `\n    → Students: ${s.studentAction}` : ''}`).join('\n');
+                        if (d.facilitationTips.length) text += '\n\nFacilitation Tips:\n' + d.facilitationTips.map(t => `  • ${t}`).join('\n');
+                        if (d.commonPitfalls.length) text += '\n\nCommon Pitfalls:\n' + d.commonPitfalls.map(p => `  • ${p}`).join('\n');
+                        text += `\n\nDebrief Guide:\n  ${d.debriefGuide}`;
+                        if (d.variations.length) text += '\n\nVariations:\n' + d.variations.map(v => `  • ${v}`).join('\n');
+                        if (d.assessmentIdeas) text += `\n\nAssessment Ideas:\n  ${d.assessmentIdeas}`;
+                      }
+                      onCopy(text, `activity-${i}`);
+                    }}
+                    className="p-1.5 rounded-md text-cb-text-muted hover:text-cb-accent-emphasis hover:bg-cb-accent-emphasis-quiet transition-colors cursor-pointer"
+                    title="Copy activity"
+                  >
+                    {copiedLabel === `activity-${i}` ? (
+                      <svg className="w-3.5 h-3.5 text-cb-status-success" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><polyline points="20 6 9 17 4 12" /></svg>
+                    ) : (
+                      <svg className="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                        <rect x="9" y="9" width="13" height="13" rx="2" ry="2" /><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+                      </svg>
+                    )}
+                  </button>
+                  <span className="text-xs px-2 py-0.5 rounded-full bg-cb-status-warning-bg text-cb-status-warning">
+                    {a.duration}
+                  </span>
+                </div>
+              </div>
+              <p className="text-sm text-cb-text-default mb-3 leading-relaxed">{a.description}</p>
+              <div className="grid grid-cols-3 gap-3 text-xs mb-3">
+                <div>
+                  <span className="text-cb-text-muted font-medium block mb-0.5">Materials</span>
+                  <span className="text-cb-text-default">{a.materials}</span>
+                </div>
+                <div>
+                  <span className="text-cb-text-muted font-medium block mb-0.5">Learning Goal</span>
+                  <span className="text-cb-text-default">{a.learningGoal}</span>
+                </div>
+                <div>
+                  <span className="text-cb-text-muted font-medium block mb-0.5">Scaling</span>
+                  <span className="text-cb-text-default">{a.scalingNotes}</span>
+                </div>
+              </div>
+
+              {!isExpanded && !isExpanding && (
+                <button
+                  onClick={() => onFleshOut(i)}
+                  disabled={expandingActivity !== null}
+                  className="text-xs text-cb-accent-emphasis hover:text-cb-accent-emphasis transition-colors flex items-center gap-1.5 cursor-pointer disabled:opacity-40 disabled:cursor-default"
+                >
+                  <svg className="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                    <circle cx="12" cy="12" r="10" />
+                    <line x1="12" y1="8" x2="12" y2="16" />
+                    <line x1="8" y1="12" x2="16" y2="12" />
+                  </svg>
+                  Expand to full guide
+                </button>
+              )}
+              {isExpanding && (
+                <div className="flex items-center gap-2">
+                  <div className="flex gap-1">
+                    {[0, 1, 2].map(j => (
+                      <motion.div
+                        key={j}
+                        className="w-1.5 h-1.5 rounded-full bg-cb-accent-emphasis"
+                        animate={{ scale: [1, 1.4, 1], opacity: [0.4, 1, 0.4] }}
+                        transition={{ duration: 0.8, delay: j * 0.12, repeat: Infinity }}
+                      />
+                    ))}
+                  </div>
+                  <span className="text-xs text-cb-accent-emphasis">Expanding guide...</span>
+                </div>
+              )}
+              {isExpanded && (
+                <button
+                  onClick={() => onCollapse(i)}
+                  className="text-xs text-cb-text-muted hover:text-cb-text-default transition-colors flex items-center gap-1.5 cursor-pointer"
+                >
+                  <svg className="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                    <circle cx="12" cy="12" r="10" />
+                    <line x1="8" y1="12" x2="16" y2="12" />
+                  </svg>
+                  Collapse
+                </button>
+              )}
+            </div>
+
+            <AnimatePresence>
+              {detail && (
+                <motion.div
+                  initial={{ height: 0, opacity: 0 }}
+                  animate={{ height: 'auto', opacity: 1 }}
+                  exit={{ height: 0, opacity: 0 }}
+                  transition={{ duration: 0.3 }}
+                  className="border-t border-cb-border-default"
+                >
+                  <div className="p-5 space-y-5 bg-cb-surface-sunken">
+                    <div>
+                      <h4 className="text-sm font-semibold text-cb-accent-emphasis mb-3 flex items-center gap-2">
+                        <svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                          <circle cx="12" cy="12" r="10" /><polyline points="12 6 12 12 16 14" />
+                        </svg>
+                        Step-by-Step Guide
+                      </h4>
+                      <div className="space-y-3">
+                        {detail.steps.map((s) => (
+                          <div key={s.step} className="flex gap-3">
+                            <div className="shrink-0 w-16 text-xs text-cb-status-warning font-mono pt-0.5">{s.timing}</div>
+                            <div className="flex-1 border-l-2 border-cb-border-default pl-3">
+                              <p className="text-sm text-cb-text-default">{s.instruction}</p>
+                              {s.studentAction && (
+                                <p className="text-xs text-cb-text-muted mt-1 italic">Students: {s.studentAction}</p>
+                              )}
+                            </div>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                      <div className="bg-cb-ground-page rounded-lg p-4 border border-cb-border-default">
+                        <h4 className="text-xs font-semibold text-cb-status-success mb-2">Facilitation Tips</h4>
+                        <ul className="space-y-1.5">
+                          {detail.facilitationTips.map((tip, j) => (
+                            <li key={j} className="text-xs text-cb-text-default flex items-start gap-2">
+                              <span className="w-1 h-1 rounded-full bg-cb-status-success shrink-0 mt-1.5" />
+                              {tip}
+                            </li>
+                          ))}
+                        </ul>
+                      </div>
+                      <div className="bg-cb-ground-page rounded-lg p-4 border border-cb-border-default">
+                        <h4 className="text-xs font-semibold text-cb-status-warning mb-2">Common Pitfalls</h4>
+                        <ul className="space-y-1.5">
+                          {detail.commonPitfalls.map((pitfall, j) => (
+                            <li key={j} className="text-xs text-cb-text-default flex items-start gap-2">
+                              <span className="w-1 h-1 rounded-full bg-cb-status-warning shrink-0 mt-1.5" />
+                              {pitfall}
+                            </li>
+                          ))}
+                        </ul>
+                      </div>
+                    </div>
+
+                    <div className="bg-cb-ground-page rounded-lg p-4 border border-cb-border-default">
+                      <h4 className="text-xs font-semibold text-cb-accent-emphasis mb-2">Debrief Guide</h4>
+                      <p className="text-xs text-cb-text-default leading-relaxed">{detail.debriefGuide}</p>
+                    </div>
+
+                    {detail.variations.length > 0 && (
+                      <div>
+                        <h4 className="text-xs font-semibold text-cb-text-muted mb-2">Variations</h4>
+                        <ul className="space-y-1.5">
+                          {detail.variations.map((v, j) => (
+                            <li key={j} className="text-xs text-cb-text-default flex items-start gap-2">
+                              <span className="w-1 h-1 rounded-full bg-cb-accent-emphasis shrink-0 mt-1.5" />
+                              {v}
+                            </li>
+                          ))}
+                        </ul>
+                      </div>
+                    )}
+
+                    {detail.assessmentIdeas && (
+                      <div className="bg-cb-ground-page rounded-lg p-4 border border-cb-border-default">
+                        <h4 className="text-xs font-semibold text-cb-text-muted mb-2">Assessment Ideas</h4>
+                        <p className="text-xs text-cb-text-default leading-relaxed">{detail.assessmentIdeas}</p>
+                      </div>
+                    )}
+                  </div>
+                </motion.div>
+              )}
+            </AnimatePresence>
+          </motion.div>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/src/components/build/tabs/AudioTab.tsx b/src/components/build/tabs/AudioTab.tsx
new file mode 100644
index 0000000..49241e2
--- /dev/null
+++ b/src/components/build/tabs/AudioTab.tsx
@@ -0,0 +1,312 @@
+import { useState } from 'react';
+import { motion } from 'framer-motion';
+import { CodexButton as Button } from '../../codex';
+import { slugify } from '../../../utils/format';
+import {
+  ArtifactStatusLine,
+  ArtifactEmpty,
+  KeyMissingBanner,
+} from '../artifactHelpers';
+
+export interface AudioTabProps {
+  audioTranscript: string;
+  audioUrl: string;
+  audioError: string;
+  /** Non-error notice: audio plays now but exceeded the persistable size cap. */
+  audioPersistNote: string;
+  audioPhase: 'transcript' | 'synthesizing' | null;
+  audioChunkProgress: { current: number; total: number } | null;
+  chapterNum: number;
+  chapterTitle: string;
+  isGenerating: boolean;
+  canGenerate: boolean;
+  hasElevenLabsKey: boolean;
+  onGenerate: () => void;
+  onRetry: () => void;
+  onAddKey: () => void;
+  /** Cancels the in-flight transcript draft / synthesis. */
+  onStop: () => void;
+  /** Persist an edited transcript back to the chapter. */
+  onSaveTranscript: (text: string) => void;
+}
+
+export function AudioTab({
+  audioTranscript,
+  audioUrl,
+  audioError,
+  audioPersistNote,
+  audioPhase,
+  audioChunkProgress,
+  chapterNum,
+  chapterTitle,
+  isGenerating,
+  canGenerate,
+  hasElevenLabsKey,
+  onGenerate,
+  onRetry,
+  onAddKey,
+  onStop,
+  onSaveTranscript,
+}: AudioTabProps) {
+  if (audioTranscript) {
+    return (
+      <div className="space-y-4">
+        {audioUrl && (
+          <div className="bg-cb-ground-page border border-cb-border-default rounded-xl p-5">
+            <div className="flex items-center gap-3 mb-3">
+              <div className="w-10 h-10 rounded-full bg-cb-accent-emphasis-quiet flex items-center justify-center">
+                <svg className="w-5 h-5 text-cb-accent-emphasis" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                  <path d="M9 18V5l12-2v13" /><circle cx="6" cy="18" r="3" /><circle cx="18" cy="16" r="3" />
+                </svg>
+              </div>
+              <div className="flex-1">
+                <p className="text-sm font-medium">Class Audiobook</p>
+                <p className="text-xs text-cb-text-muted">Generated with ElevenLabs</p>
+              </div>
+              <Button
+                size="sm"
+                onClick={() => {
+                  const a = document.createElement('a');
+                  a.href = audioUrl;
+                  a.download = `audio-${chapterNum}-${slugify(chapterTitle || 'chapter')}.mp3`;
+                  a.click();
+                }}
+              >
+                <svg className="mr-1.5 w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                  <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+                  <polyline points="7 10 12 15 17 10" />
+                  <line x1="12" y1="15" x2="12" y2="3" />
+                </svg>
+                Download .mp3
+              </Button>
+            </div>
+            <audio controls className="w-full" src={audioUrl}>
+              Your browser does not support the audio element.
+            </audio>
+            {audioPersistNote && (
+              <p className="mt-3 mb-0 text-xs italic text-cb-text-muted leading-relaxed">
+                {audioPersistNote}
+              </p>
+            )}
+          </div>
+        )}
+        {!audioUrl && hasElevenLabsKey && audioError && (
+          <div className="bg-cb-status-warning-bg border border-cb-status-warning rounded-xl p-4">
+            <p className="text-cb-status-warning text-sm mb-1">
+              Audio synthesis failed: {audioError}
+            </p>
+            <Button size="sm" variant="secondary" className="mt-2" onClick={onRetry} disabled={isGenerating}>
+              Retry Audio
+            </Button>
+          </div>
+        )}
+        {!audioUrl && hasElevenLabsKey && !audioError && (
+          <div className="bg-cb-ground-page border border-cb-border-default rounded-xl p-4 text-center">
+            {isGenerating ? (
+              <div className="flex flex-col items-center gap-3">
+                <div className="flex gap-1">
+                  {[0, 1, 2].map(i => (
+                    <motion.div
+                      key={i}
+                      className="w-2 h-2 rounded-full bg-cb-accent-emphasis"
+                      animate={{ scale: [1, 1.4, 1], opacity: [0.4, 1, 0.4] }}
+                      transition={{ duration: 0.8, delay: i * 0.12, repeat: Infinity }}
+                    />
+                  ))}
+                </div>
+                <span className="text-cb-text-default text-sm">
+                  {audioChunkProgress
+                    ? `Synthesizing audio: chunk ${audioChunkProgress.current} of ${audioChunkProgress.total}...`
+                    : 'Synthesizing audio...'}
+                </span>
+                {audioChunkProgress && (
+                  <div className="w-48">
+                    <div className="h-1.5 bg-cb-surface-sunken rounded-full overflow-hidden">
+                      <div
+                        className="h-full bg-cb-accent-emphasis rounded-full transition-all duration-500"
+                        style={{ width: `${(audioChunkProgress.current / audioChunkProgress.total) * 100}%` }}
+                      />
+                    </div>
+                  </div>
+                )}
+                <Button size="sm" variant="ghost" onClick={onStop}>
+                  Stop
+                </Button>
+              </div>
+            ) : (
+              <>
+                <p className="text-cb-text-default text-sm mb-1">Transcript ready — click below to generate audio.</p>
+                <Button size="sm" variant="secondary" className="mt-2" onClick={onRetry} disabled={isGenerating}>
+                  Generate Audio
+                </Button>
+              </>
+            )}
+          </div>
+        )}
+        {!audioUrl && !hasElevenLabsKey && (
+          <KeyMissingBanner
+            tone="optional"
+            text={
+              <>
+                <strong>Transcript ready.</strong> Add an ElevenLabs key to narrate
+                it as a class audiobook — or skip and keep the transcript text only.
+              </>
+            }
+            ctaLabel="Add ElevenLabs key →"
+            onCta={onAddKey}
+          />
+        )}
+        <TranscriptPanel
+          transcript={audioTranscript}
+          chapterNum={chapterNum}
+          chapterTitle={chapterTitle}
+          hasAudio={!!audioUrl}
+          editable={!isGenerating}
+          onSave={onSaveTranscript}
+        />
+      </div>
+    );
+  }
+
+  if (isGenerating) {
+    return (
+      <ArtifactStatusLine onStop={onStop}>
+        {audioPhase === 'transcript'
+          ? 'Adapting chapter for spoken delivery…'
+          : audioChunkProgress
+          ? `Synthesising audio · chunk ${audioChunkProgress.current} of ${audioChunkProgress.total}…`
+          : 'Preparing audio synthesis…'}
+      </ArtifactStatusLine>
+    );
+  }
+
+  return (
+    <ArtifactEmpty
+      kicker="Audio"
+      title="Narrated chapter audio"
+      body={
+        hasElevenLabsKey
+          ? 'A spoken-word transcript adapted from the chapter text, synthesised through ElevenLabs into a single audio file.'
+          : 'A spoken-word transcript adapted from the chapter text — and optionally narrated as a class audiobook through ElevenLabs. Without an ElevenLabs key you still get the transcript text.'
+      }
+      cta="Generate audio"
+      onCta={onGenerate}
+      disabled={!canGenerate}
+      secondaryCta={!hasElevenLabsKey ? 'Add ElevenLabs key →' : undefined}
+      onSecondaryCta={!hasElevenLabsKey ? onAddKey : undefined}
+    />
+  );
+}
+
+// ─── TranscriptPanel ──────────────────────────────────────────────────
+//
+// The narration script itself — readable (and editable) before any
+// ElevenLabs credits are spent, and kept alongside the player afterwards.
+
+function TranscriptPanel({
+  transcript,
+  chapterNum,
+  chapterTitle,
+  hasAudio,
+  editable,
+  onSave,
+}: {
+  transcript: string;
+  chapterNum: number;
+  chapterTitle: string;
+  hasAudio: boolean;
+  editable: boolean;
+  onSave: (text: string) => void;
+}) {
+  const [editing, setEditing] = useState(false);
+  // Seeded from the live transcript when the Edit button is pressed; while
+  // not editing the view renders `transcript` directly, so no sync effect
+  // is needed (and an in-progress edit is never clobbered by external
+  // transcript changes).
+  const [draft, setDraft] = useState(transcript);
+
+  const words = transcript.trim() ? transcript.trim().split(/\s+/).length : 0;
+  // ~155 wpm is a comfortable narration pace.
+  const minutes = Math.max(1, Math.round(words / 155));
+  const changed = draft.trim() !== transcript.trim();
+
+  return (
+    <div className="bg-cb-ground-page border border-cb-border-default rounded-xl overflow-hidden">
+      <div className="flex items-baseline justify-between gap-3 px-5 py-3 bg-cb-surface-sunken border-b border-cb-border-default">
+        <span className="font-mono text-xs text-cb-text-muted tracking-wide">
+          transcript · {words.toLocaleString()} words · ≈ {minutes} min narrated
+        </span>
+        <div className="flex gap-2 shrink-0">
+          {!editing && (
+            <Button
+              size="sm"
+              variant="ghost"
+              disabled={!editable}
+              onClick={() => {
+                setDraft(transcript);
+                setEditing(true);
+              }}
+            >
+              Edit
+            </Button>
+          )}
+          <Button
+            size="sm"
+            variant="ghost"
+            onClick={() => {
+              const a = document.createElement('a');
+              a.href = URL.createObjectURL(new Blob([transcript], { type: 'text/plain' }));
+              a.download = `transcript-${chapterNum}-${slugify(chapterTitle || 'chapter')}.txt`;
+              a.click();
+            }}
+          >
+            Download .txt
+          </Button>
+        </div>
+      </div>
+      {editing ? (
+        <div className="p-5">
+          <textarea
+            value={draft}
+            onChange={(e) => setDraft(e.target.value)}
+            rows={14}
+            className="w-full text-sm leading-relaxed text-cb-text-default bg-cb-ground-canvas border border-cb-border-default rounded p-3 resize-y outline-none"
+          />
+          <div className="flex items-baseline gap-2 mt-3 flex-wrap">
+            <Button
+              size="sm"
+              disabled={!draft.trim() || !changed}
+              onClick={() => {
+                onSave(draft.trim());
+                setEditing(false);
+              }}
+            >
+              Save transcript
+            </Button>
+            <Button
+              size="sm"
+              variant="ghost"
+              onClick={() => {
+                setEditing(false);
+                setDraft(transcript);
+              }}
+            >
+              Cancel
+            </Button>
+            {hasAudio && changed && (
+              <span className="text-xs italic text-cb-text-muted">
+                Saving won’t change the existing audio — re-narrate to update it.
+              </span>
+            )}
+          </div>
+        </div>
+      ) : (
+        <div className="px-5 py-4 max-h-96 overflow-y-auto">
+          <p className="m-0 text-sm leading-relaxed text-cb-text-default whitespace-pre-wrap">
+            {transcript}
+          </p>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/build/tabs/DiscussionTab.tsx b/src/components/build/tabs/DiscussionTab.tsx
new file mode 100644
index 0000000..2e573e0
--- /dev/null
+++ b/src/components/build/tabs/DiscussionTab.tsx
@@ -0,0 +1,152 @@
+import { motion } from 'framer-motion';
+import { ArtifactShell } from '../ArtifactShell';
+import { ArtifactStatusLine, ArtifactEmpty } from '../artifactHelpers';
+
+export interface DiscussionPrompt {
+  prompt: string;
+  hook: string;
+}
+
+export interface DiscussionTabProps {
+  discussions: DiscussionPrompt[];
+  isGenerating: boolean;
+  canGenerate: boolean;
+  onGenerate: () => void;
+  /** Cancels the in-flight generation this tab reports on. */
+  onStop: () => void;
+  onCopy: (text: string, label: string) => void;
+  copiedLabel: string;
+  formatDiscussionsText: () => string;
+}
+
+export function DiscussionTab({
+  discussions,
+  isGenerating,
+  canGenerate,
+  onGenerate,
+  onStop,
+  onCopy,
+  copiedLabel,
+  formatDiscussionsText,
+}: DiscussionTabProps) {
+  if (discussions.length === 0) {
+    if (isGenerating) {
+      return (
+        <ArtifactStatusLine onStop={onStop}>
+          Drafting conversation starters — five or six prompts students can read off
+          a slide as they walk in.
+        </ArtifactStatusLine>
+      );
+    }
+    return (
+      <ArtifactEmpty
+        kicker="Discussion"
+        title="Five or six provocative prompts"
+        body="Conversation starters designed to display on a slide as students arrive. Each prompt comes with a one-line hook for you to read aloud."
+        cta="Generate prompts"
+        onCta={onGenerate}
+        disabled={!canGenerate}
+      />
+    );
+  }
+
+  return (
+    <ArtifactShell
+      kicker="Discussion"
+      title={`${discussions.length} conversation prompts`}
+      meta="Designed to display on a slide as students arrive."
+      actions={
+        <button
+          onClick={() => onCopy(formatDiscussionsText(), 'discussions')}
+          className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium bg-cb-accent-emphasis-quiet text-cb-accent-emphasis hover:bg-cb-accent-emphasis-quiet transition-colors cursor-pointer shrink-0"
+        >
+          {copiedLabel === 'discussions' ? (
+            <>
+              <svg
+                className="w-3.5 h-3.5"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2.5"
+                strokeLinecap="round"
+              >
+                <polyline points="20 6 9 17 4 12" />
+              </svg>
+              Copied
+            </>
+          ) : (
+            <>
+              <svg
+                className="w-3.5 h-3.5"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              >
+                <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
+                <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+              </svg>
+              Copy all ↓
+            </>
+          )}
+        </button>
+      }
+    >
+      <div className="space-y-3">
+        {discussions.map((d, i) => (
+          <motion.div
+            key={i}
+            initial={{ opacity: 0, y: 10 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ delay: i * 0.08 }}
+            className="bg-cb-ground-page border border-cb-border-default rounded-xl p-6"
+          >
+            <div className="flex items-start justify-between gap-3">
+              <div>
+                <span className="text-xs px-2.5 py-1 rounded-full bg-cb-accent-emphasis-quiet text-cb-accent-emphasis font-medium inline-block mb-3">
+                  {d.hook}
+                </span>
+                <p className="text-base text-cb-text-default leading-relaxed">
+                  {d.prompt}
+                </p>
+              </div>
+              <button
+                onClick={() => onCopy(d.prompt, `discussion-${i}`)}
+                className="shrink-0 p-1.5 rounded-md text-cb-text-muted hover:text-cb-accent-emphasis hover:bg-cb-accent-emphasis-quiet transition-colors cursor-pointer"
+                title="Copy prompt"
+              >
+                {copiedLabel === `discussion-${i}` ? (
+                  <svg
+                    className="w-4 h-4 text-cb-status-success"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="2.5"
+                    strokeLinecap="round"
+                  >
+                    <polyline points="20 6 9 17 4 12" />
+                  </svg>
+                ) : (
+                  <svg
+                    className="w-4 h-4"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  >
+                    <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
+                    <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+                  </svg>
+                )}
+              </button>
+            </div>
+          </motion.div>
+        ))}
+      </div>
+    </ArtifactShell>
+  );
+}
diff --git a/src/components/build/tabs/InClassQuizTab.tsx b/src/components/build/tabs/InClassQuizTab.tsx
new file mode 100644
index 0000000..83ec522
--- /dev/null
+++ b/src/components/build/tabs/InClassQuizTab.tsx
@@ -0,0 +1,139 @@
+import { motion } from 'framer-motion';
+import { CodexButton as Button } from '../../codex';
+import { ArtifactStatusLine, ArtifactEmpty } from '../artifactHelpers';
+import type { InClassQuizQuestion } from '../../../types/course';
+
+export interface InClassQuizTabProps {
+  questions: InClassQuizQuestion[];
+  courseTitle: string;
+  chapterTitle: string;
+  isGenerating: boolean;
+  canGenerate: boolean;
+  onGenerate: () => void;
+  /** Cancels the in-flight generation this tab reports on. */
+  onStop: () => void;
+  onError: (message: string) => void;
+}
+
+export function InClassQuizTab({
+  questions,
+  courseTitle,
+  chapterTitle,
+  isGenerating,
+  canGenerate,
+  onGenerate,
+  onStop,
+  onError,
+}: InClassQuizTabProps) {
+  if (questions.length === 0) {
+    if (isGenerating) {
+      return (
+        <ArtifactStatusLine onStop={onStop}>
+          Drafting in-class quiz — ten questions, five shuffled versions, answer key.
+        </ArtifactStatusLine>
+      );
+    }
+    return (
+      <ArtifactEmpty
+        kicker="In-class quiz"
+        title="Ten questions · five shuffled versions"
+        body="Multiple-choice with distractor-level feedback. Exports as a ZIP containing five Word docs (A–E) and a single answer key."
+        cta="Generate in-class quiz"
+        onCta={onGenerate}
+        disabled={!canGenerate}
+      />
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between">
+        <p className="text-xs text-cb-text-muted">
+          {questions.length} questions — 5 shuffled versions (A-E) + answer key
+        </p>
+        <Button
+          size="sm"
+          onClick={async () => {
+            try {
+              const { generateQuizDocPackage } = await import(
+                '../../../services/export/quizDocExporter'
+              );
+              const blob = await generateQuizDocPackage(
+                questions,
+                courseTitle,
+                chapterTitle,
+              );
+              const url = URL.createObjectURL(blob);
+              const a = document.createElement('a');
+              a.href = url;
+              a.download = `quiz-${chapterTitle
+                .toLowerCase()
+                .replace(/[^a-z0-9]+/g, '-')
+                .slice(0, 40)}.zip`;
+              a.click();
+              URL.revokeObjectURL(url);
+            } catch (err) {
+              onError(err instanceof Error ? err.message : 'Quiz export failed.');
+            }
+          }}
+        >
+          <svg
+            className="mr-1.5 w-4 h-4"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+            <polyline points="7 10 12 15 17 10" />
+            <line x1="12" y1="15" x2="12" y2="3" />
+          </svg>
+          Download Quiz Pack (.zip)
+        </Button>
+      </div>
+      {questions.map((q, i) => (
+        <motion.div
+          key={i}
+          initial={{ opacity: 0, y: 10 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: i * 0.05 }}
+          className="bg-cb-ground-page border border-cb-border-default rounded-xl p-5"
+        >
+          <div className="flex items-start gap-3 mb-3">
+            <span className="shrink-0 w-7 h-7 rounded-lg bg-cb-accent-emphasis-quiet flex items-center justify-center text-xs font-bold text-cb-accent-emphasis">
+              {i + 1}
+            </span>
+            <p className="text-sm font-medium leading-relaxed">{q.question}</p>
+          </div>
+          <div className="ml-10 space-y-1.5">
+            <div className="flex items-start gap-2 text-sm">
+              <span className="text-cb-status-success text-xs font-medium mt-0.5 shrink-0">a)</span>
+              <span className="text-cb-status-success">{q.correctAnswer}</span>
+            </div>
+            {q.distractors.map((d, j) => (
+              <div key={j} className="flex items-start gap-2 text-sm">
+                <span className="text-cb-text-muted text-xs font-medium mt-0.5 shrink-0">
+                  {String.fromCharCode(98 + j)})
+                </span>
+                <span className="text-cb-text-default">{d.text}</span>
+              </div>
+            ))}
+          </div>
+          <div className="ml-10 mt-3 pt-3 border-t border-cb-border-subtle">
+            <p className="text-xs text-cb-status-success mb-1.5">
+              <span className="font-medium">Correct:</span> {q.correctFeedback}
+            </p>
+            {q.distractors.map((d, j) => (
+              <p key={j} className="text-xs text-cb-text-muted mb-1">
+                <span className="font-medium text-cb-status-danger">"{d.text}":</span>{' '}
+                {d.feedback}
+              </p>
+            ))}
+          </div>
+        </motion.div>
+      ))}
+    </div>
+  );
+}
diff --git a/src/components/build/tabs/QuizTab.tsx b/src/components/build/tabs/QuizTab.tsx
new file mode 100644
index 0000000..e96bd0c
--- /dev/null
+++ b/src/components/build/tabs/QuizTab.tsx
@@ -0,0 +1,67 @@
+import { downloadFile } from '../../../utils/download';
+import { slugify } from '../../../utils/format';
+import {
+  ArtifactPreviewFrame,
+  ArtifactStatusLine,
+  ArtifactEmpty,
+} from '../artifactHelpers';
+
+export interface QuizTabProps {
+  quizHtml: string;
+  chapterNum: number;
+  chapterTitle: string;
+  isGenerating: boolean;
+  canGenerate: boolean;
+  onGenerate: () => void;
+  /** Cancels the in-flight generation this tab reports on. */
+  onStop: () => void;
+}
+
+export function QuizTab({
+  quizHtml,
+  chapterNum,
+  chapterTitle,
+  isGenerating,
+  canGenerate,
+  onGenerate,
+  onStop,
+}: QuizTabProps) {
+  if (quizHtml) {
+    return (
+      <ArtifactPreviewFrame
+        title={`quiz-${chapterNum}.html · preview`}
+        downloadLabel="Download .html ↓"
+        onDownload={() =>
+          downloadFile(
+            quizHtml,
+            `quiz-${chapterNum}-${slugify(chapterTitle || 'chapter')}.html`,
+          )
+        }
+      >
+        <iframe
+          srcDoc={quizHtml}
+          style={{ width: '100%', height: '80vh', border: 0, display: 'block' }}
+          title="Practice quiz preview"
+          sandbox="allow-scripts"
+        />
+      </ArtifactPreviewFrame>
+    );
+  }
+  if (isGenerating) {
+    return (
+      <ArtifactStatusLine onStop={onStop}>
+        Drafting practice quiz — multiple choice and short response, twelve questions.
+      </ArtifactStatusLine>
+    );
+  }
+  return (
+    <ArtifactEmpty
+      kicker="Practice quiz"
+      title="A self-paced practice quiz"
+      body="Twelve questions students can work through on their own, with instant feedback after each answer. Designed for retrieval practice, not assessment — scores stay with the student and aren't sent back to you."
+      cta="Generate practice quiz"
+      onCta={onGenerate}
+      disabled={!canGenerate}
+    />
+  );
+}
diff --git a/src/components/build/tabs/ReadingTab.tsx b/src/components/build/tabs/ReadingTab.tsx
new file mode 100644
index 0000000..5ad46dc
--- /dev/null
+++ b/src/components/build/tabs/ReadingTab.tsx
@@ -0,0 +1,413 @@
+import { motion, AnimatePresence } from 'framer-motion';
+import { CodexButton as Button } from '../../codex';
+import { downloadFile } from '../../../utils/download';
+import { slugify } from '../../../utils/format';
+import { renderChapterHtml } from '../../../themes';
+import {
+  chapterHasRefinableImages,
+  withImageClickShim,
+} from '../chapterImageHelpers';
+import { DiscoveryHint } from '../artifactHelpers';
+
+function formatElapsed(sec: number): string {
+  if (sec < 60) return `${sec}s`;
+  const m = Math.floor(sec / 60);
+  const s = sec % 60;
+  return `${m}m ${s}s`;
+}
+
+export interface ReadingTabProps {
+  chapterHtml: string;
+  chapterNum: number;
+  chapterTitle: string;
+  themeId: string | undefined;
+
+  isGenerating: boolean;
+  isRefining: boolean;
+  streamingText: string;
+  thinkingText: string;
+  elapsedSec: number;
+  /** Cancels the in-flight chapter draft/refine. */
+  onStop: () => void;
+
+  showImageHint: boolean;
+  onDismissImageHint: () => void;
+
+  refineFeedback: string;
+  onRefineFeedbackChange: (text: string) => void;
+  showRefineConfirm: boolean;
+  onShowRefineConfirm: (v: boolean) => void;
+  refineAutoRegen: boolean;
+  onRefineAutoRegenChange: (v: boolean) => void;
+  onRefine: (feedback: string) => void;
+  dependents: string[];
+}
+
+export function ReadingTab(props: ReadingTabProps) {
+  const {
+    chapterHtml,
+    chapterNum,
+    chapterTitle,
+    themeId,
+    isGenerating,
+    isRefining,
+    streamingText,
+    thinkingText,
+    elapsedSec,
+    onStop,
+    showImageHint,
+    onDismissImageHint,
+    refineFeedback,
+    onRefineFeedbackChange,
+    showRefineConfirm,
+    onShowRefineConfirm,
+    refineAutoRegen,
+    onRefineAutoRegenChange,
+    onRefine,
+    dependents,
+  } = props;
+
+  return (
+    <div
+      key="chapter"
+      style={{
+        background: 'var(--cb-ground-page)',
+        border: '1px solid var(--cb-border-default)',
+        borderRadius: 2,
+        overflow: 'hidden',
+      }}
+    >
+      {(isGenerating && !chapterHtml) || isRefining ? (
+        <div style={{ padding: '24px 26px' }}>
+          <div style={{ display: 'flex', alignItems: 'baseline', gap: 12 }}>
+            <span
+              aria-hidden
+              style={{
+                display: 'inline-block',
+                width: 48,
+                height: 1,
+                background: 'var(--cb-border-default)',
+                position: 'relative',
+                overflow: 'hidden',
+              }}
+            >
+              <span
+                style={{
+                  position: 'absolute',
+                  inset: 0,
+                  background: 'var(--cb-accent-emphasis)',
+                  animation: 'cb-pen 1.4s cubic-bezier(0.32,0.04,0.32,1) infinite',
+                }}
+              />
+            </span>
+            <span
+              className="cb-italic"
+              style={{ fontSize: 14.5, color: 'var(--cb-text-muted)' }}
+            >
+              {streamingText
+                ? `${isRefining ? 'Refining' : 'Drafting'} chapter ${chapterNum} · ${Math.round(streamingText.split(/\s+/).length).toLocaleString()} words · ${formatElapsed(elapsedSec)}`
+                : thinkingText
+                ? `${isRefining ? 'Reasoning on the revision' : 'Reasoning through the dossier'} · ${formatElapsed(elapsedSec)}`
+                : `${isRefining ? 'Preparing the revision' : 'Warming up Opus'} · ${formatElapsed(elapsedSec)}`}
+            </span>
+            <button
+              type="button"
+              onClick={onStop}
+              className="cb-mono"
+              title="Stop drafting — nothing is saved from a stopped draft"
+              style={{
+                marginLeft: 'auto',
+                flexShrink: 0,
+                background: 'none',
+                border: '0.5px solid var(--cb-border-default)',
+                borderRadius: 2,
+                padding: '3px 10px',
+                fontSize: 11,
+                letterSpacing: '0.08em',
+                color: 'var(--cb-text-muted)',
+                cursor: 'pointer',
+              }}
+            >
+              stop
+            </button>
+          </div>
+          {!streamingText && elapsedSec >= 30 && !isRefining && (
+            <p
+              className="cb-italic"
+              style={{
+                margin: '12px 0 0',
+                fontSize: 13,
+                lineHeight: 1.55,
+                color: 'var(--cb-text-muted)',
+                maxWidth: '72ch',
+              }}
+            >
+              Opus extended-thinking can take up to a minute or two before any text streams — Claude is reading the dossier, planning the chapter structure, and weaving in citations. You can click away; we'll keep going.
+            </p>
+          )}
+          {isRefining && (
+            <p
+              className="cb-italic"
+              style={{
+                margin: '14px 0 0',
+                fontSize: 13.5,
+                lineHeight: 1.55,
+                color: 'var(--cb-text-muted)',
+                maxWidth: '72ch',
+              }}
+            >
+              Working through your feedback, rewriting the reading, and queuing fresh
+              figures to replace the originals. Settle in — this takes several minutes.
+              You can click away; we'll keep going in the background.
+            </p>
+          )}
+          {thinkingText && (
+            <div
+              style={{
+                marginTop: 16,
+                position: 'relative',
+                maxHeight: streamingText ? 120 : 220,
+                overflow: 'hidden',
+                transition: 'max-height 320ms ease',
+              }}
+            >
+              <pre
+                className="cb-mono"
+                style={{
+                  margin: 0,
+                  fontSize: 11.5,
+                  lineHeight: 1.7,
+                  color: 'var(--cb-text-muted)',
+                  whiteSpace: 'pre-wrap',
+                  maxWidth: '80ch',
+                }}
+              >
+                {thinkingText.slice(streamingText ? -500 : -900)}
+              </pre>
+              <div
+                aria-hidden
+                style={{
+                  position: 'absolute',
+                  inset: 0,
+                  background:
+                    'linear-gradient(to bottom, transparent 30%, var(--cb-ground-page))',
+                  pointerEvents: 'none',
+                }}
+              />
+            </div>
+          )}
+        </div>
+      ) : chapterHtml ? (
+        <>
+          <div
+            style={{
+              display: 'flex',
+              alignItems: 'baseline',
+              justifyContent: 'space-between',
+              padding: '12px 18px',
+              background: 'var(--cb-surface-sunken)',
+              borderBottom: '0.5px solid var(--cb-border-default)',
+              gap: 16,
+            }}
+          >
+            <span
+              className="cb-mono"
+              style={{
+                fontSize: 12.5,
+                color: 'var(--cb-text-muted)',
+                letterSpacing: '0.04em',
+              }}
+            >
+              chapter-{chapterNum}.html · preview
+            </span>
+            <Button
+              size="sm"
+              variant="ghost"
+              onClick={() =>
+                downloadFile(
+                  renderChapterHtml(chapterHtml, themeId, chapterTitle),
+                  `chapter-${chapterNum}-${slugify(chapterTitle || 'chapter')}.html`,
+                )
+              }
+            >
+              Download .html ↓
+            </Button>
+          </div>
+          {showImageHint && chapterHasRefinableImages(chapterHtml) && (
+            <DiscoveryHint
+              text="Hover any image in the chapter — click to refine just that one figure."
+              onDismiss={onDismissImageHint}
+            />
+          )}
+          <iframe
+            srcDoc={withImageClickShim(
+              renderChapterHtml(chapterHtml, themeId, chapterTitle),
+            )}
+            style={{
+              width: '100%',
+              height: '70vh',
+              border: 0,
+              display: 'block',
+              background: 'var(--cb-ground-page)',
+            }}
+            title={`Chapter ${chapterNum} reading`}
+            sandbox="allow-scripts"
+          />
+          {/* Refine chapter section */}
+          {!isGenerating && (
+            <div
+              style={{
+                borderTop: '0.5px solid var(--cb-border-default)',
+                padding: '18px 22px',
+                background: 'var(--cb-surface-sunken)',
+              }}
+            >
+              <div
+                className="cb-sc"
+                style={{
+                  fontSize: 11,
+                  color: 'var(--cb-text-muted)',
+                  letterSpacing: '0.14em',
+                  marginBottom: 10,
+                }}
+              >
+                Refine the chapter
+              </div>
+              <div style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
+                <textarea
+                  value={refineFeedback}
+                  onChange={(e) => onRefineFeedbackChange(e.target.value)}
+                  placeholder="e.g. expand the section on X · simplify the introduction · add more examples for Y."
+                  rows={2}
+                  style={{
+                    flex: 1,
+                    padding: '10px 12px',
+                    background: 'var(--cb-ground-canvas)',
+                    border: '1px solid var(--cb-border-default)',
+                    borderRadius: 1.5,
+                    color: 'var(--cb-text-default)',
+                    fontFamily: 'var(--font-cb-serif)',
+                    fontSize: 15,
+                    lineHeight: 1.55,
+                    resize: 'vertical',
+                    outline: 'none',
+                    transition: 'border-color 200ms cubic-bezier(0.32,0.04,0.32,1)',
+                  }}
+                  onFocus={(e) => {
+                    e.currentTarget.style.borderColor = 'var(--cb-accent-link)';
+                  }}
+                  onBlur={(e) => {
+                    e.currentTarget.style.borderColor = 'var(--cb-border-default)';
+                  }}
+                />
+                <Button
+                  size="sm"
+                  variant="secondary"
+                  disabled={!refineFeedback.trim()}
+                  onClick={() => onShowRefineConfirm(true)}
+                >
+                  Refine
+                </Button>
+              </div>
+
+              <AnimatePresence>
+                {showRefineConfirm && (
+                  <motion.div
+                    initial={{ opacity: 0 }}
+                    animate={{ opacity: 1 }}
+                    exit={{ opacity: 0 }}
+                    transition={{ duration: 0.16 }}
+                    style={{
+                      marginTop: 14,
+                      padding: '14px 16px',
+                      background: 'var(--cb-status-warning-bg)',
+                      borderLeft: '2px solid var(--cb-status-warning)',
+                    }}
+                  >
+                    <p
+                      className="cb-italic"
+                      style={{
+                        margin: '0 0 8px',
+                        fontSize: 13.5,
+                        color: 'var(--cb-text-default)',
+                        lineHeight: 1.55,
+                      }}
+                    >
+                      {dependents.length > 0
+                        ? 'Refining rewrites the chapter reading. The materials below were drafted from the current version and will be cleared:'
+                        : 'Refining rewrites the chapter reading. Nothing else has been generated yet, so only the reading will change.'}
+                    </p>
+                    {dependents.length > 0 && (
+                      <ul
+                        style={{
+                          margin: '0 0 14px',
+                          paddingLeft: 18,
+                          fontSize: 13,
+                          lineHeight: 1.7,
+                          color: 'var(--cb-text-muted)',
+                        }}
+                      >
+                        {dependents.map((d) => (
+                          <li key={d}>{d}</li>
+                        ))}
+                      </ul>
+                    )}
+                    {dependents.length > 0 && (
+                      <label
+                        style={{
+                          display: 'flex',
+                          alignItems: 'flex-start',
+                          gap: 8,
+                          marginBottom: 14,
+                          cursor: 'pointer',
+                          fontFamily: 'var(--font-cb-serif)',
+                          fontSize: 13.5,
+                          lineHeight: 1.55,
+                          color: 'var(--cb-text-default)',
+                        }}
+                      >
+                        <input
+                          type="checkbox"
+                          checked={refineAutoRegen}
+                          onChange={(e) => onRefineAutoRegenChange(e.target.checked)}
+                          style={{
+                            marginTop: 4,
+                            accentColor: 'var(--cb-accent-emphasis)',
+                            flexShrink: 0,
+                          }}
+                        />
+                        <span>
+                          Rebuild those materials automatically once the new reading is
+                          ready.{' '}
+                          <span
+                            className="cb-italic"
+                            style={{ color: 'var(--cb-text-muted)' }}
+                          >
+                            Recommended — otherwise the cleared tabs stay empty until
+                            you regenerate each by hand.
+                          </span>
+                        </span>
+                      </label>
+                    )}
+                    <div style={{ display: 'flex', gap: 8 }}>
+                      <Button size="sm" onClick={() => onRefine(refineFeedback)}>
+                        Refine reading
+                      </Button>
+                      <Button
+                        size="sm"
+                        variant="ghost"
+                        onClick={() => onShowRefineConfirm(false)}
+                      >
+                        Cancel
+                      </Button>
+                    </div>
+                  </motion.div>
+                )}
+              </AnimatePresence>
+            </div>
+          )}
+        </>
+      ) : null}
+    </div>
+  );
+}
diff --git a/src/components/build/tabs/SlidesTab.tsx b/src/components/build/tabs/SlidesTab.tsx
new file mode 100644
index 0000000..bae9b26
--- /dev/null
+++ b/src/components/build/tabs/SlidesTab.tsx
@@ -0,0 +1,506 @@
+import { useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { CodexButton as Button } from '../../codex';
+import type { SlideData } from '../../../types/course';
+import type { SlidesRenderState } from '../../../store/uiStore';
+import {
+  ArtifactStatusLine,
+  ArtifactEmpty,
+  KeyMissingBanner,
+  KeyRequiredEmpty,
+  DiscoveryHint,
+} from '../artifactHelpers';
+
+export interface SlidesTabProps {
+  slides: SlideData[];
+  chapterNum: number;
+  isGenerating: boolean;
+  canGenerate: boolean;
+  hasOpenAiKey: boolean;
+  showImageHint: boolean;
+  onDismissImageHint: () => void;
+  onGenerate: () => void;
+  /** Cancels the in-flight generation this tab reports on. */
+  onStop: () => void;
+  onDownloadDeck: () => void;
+  onAddKey: () => void;
+
+  slidesRender: SlidesRenderState | null;
+
+  // Per-slide refine state + handlers
+  editedSlidePrompts: Record<number, string>;
+  onSlidePromptDraftChange: (slideIndex: number, text: string) => void;
+  onSlidePromptDraftReset: (slideIndex: number) => void;
+  refiningSlideIdx: number | null;
+  slideRefineError: string | null;
+  onRefineSlide: (slideIndex: number) => void;
+}
+
+export function SlidesTab(props: SlidesTabProps) {
+  const {
+    slides,
+    chapterNum,
+    isGenerating,
+    canGenerate,
+    hasOpenAiKey,
+    showImageHint,
+    onDismissImageHint,
+    onGenerate,
+    onStop,
+    onDownloadDeck,
+    onAddKey,
+    slidesRender,
+    editedSlidePrompts,
+    onSlidePromptDraftChange,
+    onSlidePromptDraftReset,
+    refiningSlideIdx,
+    slideRefineError,
+    onRefineSlide,
+  } = props;
+
+  const [expandedSlideNotes, setExpandedSlideNotes] = useState<Set<number>>(new Set());
+
+  if (slides.length === 0) {
+    if (isGenerating) {
+      return (
+        <ArtifactStatusLine onStop={onStop}>
+          Drafting lecture slides with speaker notes…
+        </ArtifactStatusLine>
+      );
+    }
+    if (!hasOpenAiKey) {
+      return (
+        <KeyRequiredEmpty
+          kicker="Slides"
+          title="A twelve-slide deck, ready to teach"
+          body="Every slide is a full-bleed 4K editorial image rendered through OpenAI's gpt-image-2 — the chapter's argument as visuals in your chosen theme, plus speaker notes. Without an OpenAI key the deck is locked: Claude can draft the slide titles, captions, and speaker notes, but the images can't be rendered and the PowerPoint export won't open."
+          primaryLabel="Add OpenAI key →"
+          onPrimary={onAddKey}
+          secondaryLabel="Skip — draft titles and speaker notes only"
+          onSecondary={onGenerate}
+          secondaryDisabled={!canGenerate}
+        />
+      );
+    }
+    return (
+      <ArtifactEmpty
+        kicker="Slides"
+        title="A twelve-slide deck, ready to teach"
+        body="Every slide is a full-bleed 4K image — the chapter's argument rendered as editorial visuals in your chosen theme, with speaker notes for each slide. Downloads as a PowerPoint file you can drop straight into class."
+        cta="Generate slides"
+        onCta={onGenerate}
+        disabled={!canGenerate}
+      />
+    );
+  }
+
+  const isMyRender = slidesRender?.chapterNum === chapterNum;
+  const someoneElseRendering = !!slidesRender && !isMyRender;
+  const renderedCount = slides.filter((s) => s.imageDataUri).length;
+  const allRendered = renderedCount > 0 && renderedCount === slides.length;
+
+  return (
+    <div className="space-y-4">
+      {!hasOpenAiKey && (
+        <KeyMissingBanner
+          tone="recommended"
+          text={
+            <>
+              Slide titles and speaker notes are drafted, but{' '}
+              <strong>each slide image and the PowerPoint export need an OpenAI key</strong>.
+              Without one the deck is text-only and won't display correctly.
+            </>
+          }
+          ctaLabel="Add OpenAI key →"
+          onCta={onAddKey}
+        />
+      )}
+      {showImageHint && (
+        <DiscoveryHint
+          text="Click any slide below — you can edit its image prompt and regenerate just that one slide."
+          onDismiss={onDismissImageHint}
+        />
+      )}
+      <div className="bg-cb-ground-page border border-cb-border-default rounded-xl p-6 flex items-center justify-between">
+        <div className="flex items-center gap-4">
+          <div className="w-12 h-12 rounded-xl bg-cb-accent-emphasis-quiet flex items-center justify-center">
+            <svg className="w-6 h-6 text-cb-accent-emphasis" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <rect x="2" y="3" width="20" height="14" rx="2" ry="2" />
+              <line x1="8" y1="21" x2="16" y2="21" />
+              <line x1="12" y1="17" x2="12" y2="21" />
+            </svg>
+          </div>
+          <div>
+            <p className="text-sm font-semibold">{slides.length} slides with speaker notes</p>
+            <p className="text-xs text-cb-text-muted mt-0.5">Each slide rendered as a 4K editorial image via gpt-image-2</p>
+          </div>
+        </div>
+        <Button
+          disabled={!hasOpenAiKey || slidesRender !== null}
+          title={
+            !hasOpenAiKey
+              ? 'Add an OpenAI API key in Setup to render slides.'
+              : someoneElseRendering
+              ? `Another deck (Class ${slidesRender!.chapterNum}) is rendering. Please wait.`
+              : undefined
+          }
+          onClick={onDownloadDeck}
+        >
+          {isMyRender ? (
+            slidesRender!.phase === 'packing'
+              ? 'Packing deck…'
+              : `Rendering ${slidesRender!.current} / ${slidesRender!.total} …`
+          ) : someoneElseRendering ? (
+            `Class ${slidesRender!.chapterNum} rendering · ${slidesRender!.current}/${slidesRender!.total}`
+          ) : (
+            <>
+              <svg
+                className="mr-1.5 w-4 h-4"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              >
+                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+                <polyline points="7 10 12 15 17 10" />
+                <line x1="12" y1="15" x2="12" y2="3" />
+              </svg>
+              {allRendered ? 'Re-download .pptx' : 'Download .pptx'}
+            </>
+          )}
+        </Button>
+      </div>
+
+      {hasOpenAiKey && !slidesRender && renderedCount < slides.length && (
+        <p className="m-0 text-[12.5px] italic text-cb-text-muted leading-relaxed">
+          {renderedCount === 0
+            ? `No slide images in this session — rendered images aren't kept across reloads (titles, notes, and image prompts are). Downloading the deck renders all ${slides.length} images on your OpenAI key, ≈ 30–60s each.`
+            : `${renderedCount} of ${slides.length} slide images are rendered in this session — downloading the deck renders the rest on your OpenAI key.`}
+        </p>
+      )}
+
+      {isMyRender && slidesRender!.phase === 'rendering' && (
+        <div
+          style={{
+            padding: '12px 16px',
+            border: '0.5px solid var(--cb-border-default)',
+            background: 'var(--cb-ground-canvas)',
+            borderRadius: 4,
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 8,
+          }}
+        >
+          <div
+            style={{
+              display: 'flex',
+              justifyContent: 'space-between',
+              alignItems: 'baseline',
+              fontFamily: 'var(--font-cb-mono)',
+              fontSize: 11.5,
+              color: 'var(--cb-text-muted)',
+              letterSpacing: '0.06em',
+            }}
+          >
+            <span>rendering slide images · gpt-image-2 · 4K</span>
+            <span>{slidesRender!.current} of {slidesRender!.total}</span>
+          </div>
+          <div style={{ height: 2, background: 'var(--cb-border-default)', overflow: 'hidden' }}>
+            <div
+              style={{
+                height: '100%',
+                width: `${(slidesRender!.current / Math.max(1, slidesRender!.total)) * 100}%`,
+                background: 'var(--cb-accent-emphasis)',
+                transition: 'width 320ms cubic-bezier(0.32,0.04,0.32,1)',
+              }}
+            />
+          </div>
+        </div>
+      )}
+
+      <div>
+        <h3 className="text-xs font-medium text-cb-text-muted uppercase tracking-wider mb-3">Speaker Notes</h3>
+        <div className="space-y-1">
+          {slides.map((slide, i) => {
+            const isExpanded = expandedSlideNotes.has(i);
+            const hasNotes = !!slide.speakerNotes;
+            return (
+              <div key={i} className="border border-cb-border-default rounded-lg overflow-hidden">
+                <button
+                  onClick={() => {
+                    if (!hasNotes) return;
+                    setExpandedSlideNotes((prev) => {
+                      const next = new Set(prev);
+                      if (next.has(i)) next.delete(i);
+                      else next.add(i);
+                      return next;
+                    });
+                  }}
+                  className={`w-full flex items-center gap-3 px-4 py-3 text-left bg-transparent border-0 transition-colors ${
+                    hasNotes ? 'cursor-pointer hover:bg-cb-accent-emphasis-quiet' : 'cursor-default opacity-60'
+                  }`}
+                >
+                  <span className="text-xs text-cb-text-muted font-mono w-5 shrink-0 text-right">{i + 1}</span>
+                  <span
+                    aria-hidden
+                    className="w-11 h-[25px] shrink-0 rounded-[2px] border border-cb-border-default overflow-hidden bg-cb-surface-sunken flex items-center justify-center"
+                  >
+                    {slide.imageDataUri ? (
+                      <img src={slide.imageDataUri} alt="" className="w-full h-full object-cover" />
+                    ) : (
+                      <span className="block w-5 h-px bg-cb-border-default" />
+                    )}
+                  </span>
+                  <span className="text-sm text-cb-text-default truncate flex-1">{slide.title}</span>
+                  {hasNotes && (
+                    <svg
+                      className={`w-3.5 h-3.5 text-cb-text-muted shrink-0 transition-transform ${isExpanded ? 'rotate-180' : ''}`}
+                      viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"
+                    >
+                      <polyline points="6 9 12 15 18 9" />
+                    </svg>
+                  )}
+                </button>
+                <AnimatePresence>
+                  {isExpanded && hasNotes && (
+                    <motion.div
+                      initial={{ height: 0, opacity: 0 }}
+                      animate={{ height: 'auto', opacity: 1 }}
+                      exit={{ height: 0, opacity: 0 }}
+                      transition={{ duration: 0.2 }}
+                      className="overflow-hidden"
+                    >
+                      <div className="px-4 pb-4 pl-12">
+                        <p className="text-sm text-cb-text-default leading-relaxed whitespace-pre-line">{slide.speakerNotes}</p>
+                        <SlideImageRefine
+                          slide={slide}
+                          slideIndex={i}
+                          draft={editedSlidePrompts[i]}
+                          onDraftChange={(text) => onSlidePromptDraftChange(i, text)}
+                          onResetDraft={() => onSlidePromptDraftReset(i)}
+                          onRefine={() => onRefineSlide(i)}
+                          isRefining={refiningSlideIdx === i}
+                          anyRefining={refiningSlideIdx !== null}
+                          hasOpenAiKey={hasOpenAiKey}
+                          error={refiningSlideIdx === i ? slideRefineError : null}
+                          onAddKey={onAddKey}
+                        />
+                      </div>
+                    </motion.div>
+                  )}
+                </AnimatePresence>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ─── SlideImageRefine ─────────────────────────────────────────────────
+//
+// Refine one slide's image prompt. Used inside the expanded slide row.
+
+function SlideImageRefine({
+  slide,
+  slideIndex,
+  draft,
+  onDraftChange,
+  onResetDraft,
+  onRefine,
+  isRefining,
+  anyRefining,
+  hasOpenAiKey,
+  error,
+  onAddKey,
+}: {
+  slide: SlideData;
+  slideIndex: number;
+  draft: string | undefined;
+  onDraftChange: (text: string) => void;
+  onResetDraft: () => void;
+  onRefine: () => void;
+  isRefining: boolean;
+  anyRefining: boolean;
+  hasOpenAiKey: boolean;
+  error: string | null;
+  onAddKey: () => void;
+}) {
+  const currentPrompt = slide.imagePrompt ?? '';
+  const value = draft ?? currentPrompt;
+  const hasEdit = draft !== undefined && draft !== currentPrompt;
+  const trimmed = value.trim();
+
+  return (
+    <div
+      style={{
+        marginTop: 16,
+        paddingTop: 14,
+        borderTop: '0.5px solid var(--cb-border-default)',
+        display: 'grid',
+        gridTemplateColumns: slide.imageDataUri ? '180px 1fr' : '1fr',
+        gap: 16,
+        alignItems: 'start',
+      }}
+    >
+      {slide.imageDataUri && (
+        <div>
+          <div
+            className="cb-sc"
+            style={{
+              fontSize: 10,
+              color: 'var(--cb-text-muted)',
+              letterSpacing: '0.14em',
+              marginBottom: 6,
+            }}
+          >
+            Slide {slideIndex + 1}
+          </div>
+          <img
+            src={slide.imageDataUri}
+            alt={`Slide ${slideIndex + 1} preview`}
+            style={{
+              width: '100%',
+              aspectRatio: '16 / 9',
+              objectFit: 'cover',
+              borderRadius: 2,
+              border: '0.5px solid var(--cb-border-default)',
+              display: 'block',
+              opacity: isRefining ? 0.45 : 1,
+              transition: 'opacity 220ms',
+            }}
+          />
+        </div>
+      )}
+
+      <div style={{ minWidth: 0 }}>
+        <div
+          className="cb-sc"
+          style={{
+            fontSize: 10,
+            color: 'var(--cb-text-muted)',
+            letterSpacing: '0.14em',
+            marginBottom: 6,
+            display: 'flex',
+            alignItems: 'baseline',
+            justifyContent: 'space-between',
+          }}
+        >
+          <span>
+            {hasOpenAiKey
+              ? 'Image prompt — refine this one slide'
+              : 'Image prompt — view only'}
+          </span>
+          {hasOpenAiKey && hasEdit && !isRefining && (
+            <button
+              type="button"
+              onClick={onResetDraft}
+              className="cb-italic"
+              style={{
+                background: 'none',
+                border: 0,
+                cursor: 'pointer',
+                padding: 0,
+                fontSize: 11.5,
+                color: 'var(--cb-text-muted)',
+                textTransform: 'none',
+                letterSpacing: 0,
+              }}
+            >
+              ← reset
+            </button>
+          )}
+        </div>
+        <textarea
+          value={value}
+          onChange={(e) => onDraftChange(e.target.value)}
+          readOnly={!hasOpenAiKey}
+          disabled={isRefining}
+          rows={5}
+          spellCheck={false}
+          style={{
+            width: '100%',
+            padding: '10px 12px',
+            fontFamily: 'var(--font-cb-mono)',
+            fontSize: 12.5,
+            lineHeight: 1.55,
+            background: 'var(--cb-ground-page)',
+            border: '0.5px solid var(--cb-border-default)',
+            borderRadius: 2,
+            color: 'var(--cb-text-default)',
+            resize: 'vertical',
+            outline: 'none',
+            opacity: isRefining ? 0.6 : !hasOpenAiKey ? 0.85 : 1,
+            cursor: !hasOpenAiKey ? 'default' : undefined,
+          }}
+        />
+        {!hasOpenAiKey && (
+          <p
+            className="cb-italic"
+            style={{
+              margin: '8px 0 0',
+              fontSize: 12,
+              color: 'var(--cb-text-muted)',
+              lineHeight: 1.5,
+            }}
+          >
+            Add an OpenAI key to edit this prompt and regenerate just this slide.
+          </p>
+        )}
+        <div
+          style={{
+            display: 'flex',
+            gap: 8,
+            marginTop: 10,
+            alignItems: 'baseline',
+            flexWrap: 'wrap',
+          }}
+        >
+          {!hasOpenAiKey ? (
+            <Button size="sm" variant="primary" onClick={onAddKey}>
+              Add OpenAI key →
+            </Button>
+          ) : (
+            <Button
+              size="sm"
+              onClick={onRefine}
+              disabled={!trimmed || isRefining || anyRefining}
+              title={
+                !trimmed
+                  ? 'Prompt is empty.'
+                  : anyRefining && !isRefining
+                  ? 'Another slide is regenerating. Please wait.'
+                  : undefined
+              }
+            >
+              {isRefining ? 'Rendering…' : slide.imageDataUri ? 'Regenerate image ↻' : 'Render image →'}
+            </Button>
+          )}
+          {isRefining && (
+            <span
+              className="cb-italic"
+              style={{ fontSize: 12.5, color: 'var(--cb-text-muted)' }}
+            >
+              gpt-image-2 typically takes 30–60 seconds.
+            </span>
+          )}
+        </div>
+        {error && (
+          <p
+            style={{
+              margin: '10px 0 0',
+              fontSize: 12.5,
+              color: 'var(--cb-status-danger)',
+              lineHeight: 1.5,
+            }}
+          >
+            {error}
+          </p>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/build/tabs/TemplateModuleTab.tsx b/src/components/build/tabs/TemplateModuleTab.tsx
new file mode 100644
index 0000000..792589c
--- /dev/null
+++ b/src/components/build/tabs/TemplateModuleTab.tsx
@@ -0,0 +1,145 @@
+import { ArtifactShell } from '../ArtifactShell';
+import { ArtifactStatusLine, ArtifactEmpty } from '../artifactHelpers';
+import { CodexButton } from '../../codex';
+import type { TemplateChapterContent } from '../../../types/course';
+
+export interface TemplateModuleTabProps {
+  chapterNum: number;
+  content: TemplateChapterContent | undefined;
+  isGenerating: boolean;
+  canGenerate: boolean;
+  onGenerate: () => void;
+  /** Cancels the in-flight generation this tab reports on. */
+  onStop: () => void;
+  elapsedLabel?: string;
+}
+
+const proseStyle = {
+  fontFamily: 'var(--font-cb-serif)',
+  fontSize: 15,
+  lineHeight: 1.6,
+  color: 'var(--cb-text-default)',
+} as const;
+
+const labelStyle = {
+  fontSize: 13,
+  letterSpacing: '0.12em',
+  color: 'var(--cb-text-muted)',
+  marginBottom: 8,
+} as const;
+
+const cardStyle = {
+  background: 'var(--cb-ground-page)',
+  border: '1px solid var(--cb-border-default)',
+  borderRadius: 2,
+  padding: 16,
+} as const;
+
+export function TemplateModuleTab({
+  chapterNum,
+  content,
+  isGenerating,
+  canGenerate,
+  onGenerate,
+  onStop,
+  elapsedLabel,
+}: TemplateModuleTabProps) {
+  if (!content) {
+    if (isGenerating) {
+      return (
+        <ArtifactStatusLine onStop={onStop}>
+          Drafting the Canvas module for class {chapterNum}
+          {elapsedLabel ? ` · ${elapsedLabel}` : ''}
+        </ArtifactStatusLine>
+      );
+    }
+    return (
+      <ArtifactEmpty
+        kicker="Canvas module"
+        title="Overview, instructor notes, discussion"
+        body="One Module Overview page, one or more Instructor Notes pages, and one Discussion — written to slot into your Canvas template. The locked page-title prefixes are kept verbatim."
+        cta="Generate Canvas module"
+        onCta={onGenerate}
+        disabled={!canGenerate}
+      />
+    );
+  }
+
+  const noteCount = content.instructorNotes.length;
+
+  return (
+    <ArtifactShell
+      kicker="Canvas module"
+      title={`Module ${chapterNum}`}
+      meta={`Overview · ${noteCount} instructor note${noteCount === 1 ? '' : 's'} · 1 discussion`}
+      actions={
+        <CodexButton
+          size="sm"
+          variant="secondary"
+          onClick={onGenerate}
+          disabled={!canGenerate || isGenerating}
+        >
+          {isGenerating ? 'Regenerating…' : 'Regenerate'}
+        </CodexButton>
+      }
+      foot={
+        <span className="cb-italic" style={{ fontSize: 13, color: 'var(--cb-text-muted)' }}>
+          The locked <code>M{chapterNum} Instructor Notes:</code> /{' '}
+          <code>M{chapterNum} Discussion:</code> prefixes are applied on export.
+        </span>
+      }
+    >
+      <div style={{ display: 'grid', gap: 24 }}>
+        <section>
+          <div className="cb-sc" style={labelStyle}>
+            Module {chapterNum} Overview
+          </div>
+          <div
+            style={{ ...cardStyle, ...proseStyle }}
+            dangerouslySetInnerHTML={{ __html: content.moduleOverviewHtml }}
+          />
+        </section>
+
+        <section>
+          <div className="cb-sc" style={labelStyle}>
+            Instructor Notes ({noteCount} page{noteCount === 1 ? '' : 's'})
+          </div>
+          <div style={{ display: 'grid', gap: 10 }}>
+            {content.instructorNotes.map((note, i) => (
+              <details key={i} open={i === 0} style={cardStyle}>
+                <summary style={{ cursor: 'pointer', ...proseStyle }}>
+                  <code style={{ color: 'var(--cb-accent-emphasis)' }}>
+                    M{chapterNum} Instructor Notes:
+                  </code>{' '}
+                  {note.title}
+                </summary>
+                <div
+                  style={{ ...proseStyle, marginTop: 12 }}
+                  dangerouslySetInnerHTML={{ __html: note.htmlContent }}
+                />
+              </details>
+            ))}
+          </div>
+        </section>
+
+        <section>
+          <div className="cb-sc" style={labelStyle}>
+            Discussion
+          </div>
+          <div style={cardStyle}>
+            <p style={{ ...proseStyle, margin: '0 0 10px' }}>
+              <code style={{ color: 'var(--cb-accent-emphasis)' }}>
+                M{chapterNum} Discussion:
+              </code>{' '}
+              <strong>{content.discussion.title}</strong>
+            </p>
+            <div
+              style={proseStyle}
+              dangerouslySetInnerHTML={{ __html: content.discussion.promptHtml }}
+            />
+          </div>
+        </section>
+      </div>
+    </ArtifactShell>
+  );
+}
diff --git a/src/components/build/tabs/WeeklyChallengeTab.tsx b/src/components/build/tabs/WeeklyChallengeTab.tsx
new file mode 100644
index 0000000..3747e0a
--- /dev/null
+++ b/src/components/build/tabs/WeeklyChallengeTab.tsx
@@ -0,0 +1,67 @@
+import { downloadFile } from '../../../utils/download';
+import { slugify } from '../../../utils/format';
+import {
+  ArtifactPreviewFrame,
+  ArtifactStatusLine,
+  ArtifactEmpty,
+} from '../artifactHelpers';
+
+export interface WeeklyChallengeTabProps {
+  challengeHtml: string;
+  chapterNum: number;
+  chapterTitle: string;
+  isGenerating: boolean;
+  canGenerate: boolean;
+  onGenerate: () => void;
+  /** Cancels the in-flight generation this tab reports on. */
+  onStop: () => void;
+}
+
+export function WeeklyChallengeTab({
+  challengeHtml,
+  chapterNum,
+  chapterTitle,
+  isGenerating,
+  canGenerate,
+  onGenerate,
+  onStop,
+}: WeeklyChallengeTabProps) {
+  if (challengeHtml) {
+    return (
+      <ArtifactPreviewFrame
+        title={`mastery-${chapterNum}.html · preview`}
+        downloadLabel="Download .html ↓"
+        onDownload={() =>
+          downloadFile(
+            challengeHtml,
+            `mastery-${chapterNum}-${slugify(chapterTitle || 'chapter')}.html`,
+          )
+        }
+      >
+        <iframe
+          srcDoc={challengeHtml}
+          style={{ width: '100%', height: '80vh', border: 0, display: 'block' }}
+          title="Mastery challenge preview"
+          sandbox="allow-scripts"
+        />
+      </ArtifactPreviewFrame>
+    );
+  }
+  if (isGenerating) {
+    return (
+      <ArtifactStatusLine onStop={onStop}>
+        Drafting the mastery challenge — ten to twelve questions in mixed formats.
+      </ArtifactStatusLine>
+    );
+  }
+  return (
+    <ArtifactEmpty
+      kicker="Mastery challenge"
+      title="An end-of-chapter mastery check"
+      body="A short assessment that pushes students past simple recall — multiple choice mixed with confidence ratings, two-stage reasoning, and slider estimates. Downloads as a SCORM package, ready to drop into Canvas, Moodle, Blackboard, or any standards-compliant LMS."
+      cta="Generate mastery challenge"
+      onCta={onGenerate}
+      disabled={!canGenerate}
+    />
+  );
+}
diff --git a/src/components/build/useChapterMaterials.ts b/src/components/build/useChapterMaterials.ts
new file mode 100644
index 0000000..39ddbbb
--- /dev/null
+++ b/src/components/build/useChapterMaterials.ts
@@ -0,0 +1,931 @@
+import { useCallback, useEffect, useState } from 'react';
+import type React from 'react';
+import { streamWithRetry } from '../../services/claude/streaming';
+import { MODELS } from '../../services/claude/client';
+import { buildPracticeQuizPrompt, buildPracticeQuizUserPrompt } from '../../prompts/practiceQuiz';
+import { buildInClassQuizPrompt, buildInClassQuizUserPrompt } from '../../prompts/inClassQuiz';
+import { buildDiscussionPrompt, buildDiscussionUserPrompt } from '../../prompts/discussion';
+import {
+  buildActivitiesPrompt,
+  buildActivitiesUserPrompt,
+  buildActivityDetailPrompt,
+  buildActivityDetailUserPrompt,
+} from '../../prompts/activities';
+import {
+  buildAudioTranscriptPrompt,
+  buildAudioTranscriptUserPrompt,
+} from '../../prompts/audioTranscript';
+import { buildSlidesPrompt, buildSlidesUserPrompt } from '../../prompts/slides';
+import { friendlyError, isAbortError } from '../../utils/errors';
+import { beginAbortable, endAbortable, materialAbortKey } from '../../services/abortRegistry';
+import { parseJson } from '../../utils/format';
+import { normalizeActivityDetail } from '../../utils/activityDetail';
+import { persistableAudioDataUri } from '../../utils/audio';
+import { getVoiceOption } from '../../themes';
+import type {
+  Syllabus,
+  ChapterSyllabus,
+  GeneratedChapter,
+  CourseSetup,
+  InClassQuizQuestion,
+  SlideData,
+  ActivityDetail,
+  WeeklyChallengeData,
+} from '../../types/course';
+
+/**
+ * useChapterMaterials — single hook that owns every piece of per-chapter
+ * material state on BuildPage, plus the seven generation handlers and the
+ * two adjacent helpers (retryAudio, fleshOutActivity).
+ *
+ * Why this exists:
+ *
+ *   - BuildPage had ~700 lines of generation logic that all followed the
+ *     same shape (begin → stream → parse → updateChapter → finish).
+ *     Inlining seven copies of that pattern made the page hard to scan and
+ *     hard to change in one place. This hook centralises the lifecycle
+ *     (`runGenerationLifecycle`) and reads as seven small recipes.
+ *   - The per-chapter local state (quizHtml, slidesData, audioUrl, …) was
+ *     scattered across the page and reset by a single sprawling useEffect.
+ *     Co-locating state, reset, and generators here means a future change
+ *     to "what does the Audio tab know about itself" lives in one file.
+ *
+ * BuildPage still owns: the chapter HTML itself (chapterHtml), refine
+ * flows, batch generation, image refine drawer, navigation, layout.
+ * Anything that's about a *single material's lifecycle* lives here.
+ */
+
+export type DiscussionPrompt = { prompt: string; hook: string };
+export type Activity = {
+  title: string;
+  duration: string;
+  description: string;
+  materials: string;
+  learningGoal: string;
+  scalingNotes: string;
+};
+
+export interface UseChapterMaterialsParams {
+  syllabus: Syllabus | null;
+  currentChapter: GeneratedChapter | undefined;
+  syllabusChapter: ChapterSyllabus | undefined;
+  selectedChapterNum: number;
+  /** Ref to the live selectedChapterNum so async completions can verify the
+   *  user hasn't switched to a different chapter before committing local state. */
+  selectedChapterRef: React.RefObject<number>;
+  claudeApiKey: string;
+  elevenLabsApiKey: string;
+  setup: CourseSetup;
+  updateChapter: (num: number, updates: Partial<GeneratedChapter>) => void;
+  /** Global error toast — used by fleshOutActivity (it has no tab-error slot). */
+  setError: (msg: string) => void;
+  // uiStore in-flight setters, mirrored so the cross-page Header chips
+  // and the in-tab "drafting…" states stay in sync.
+  setGeneratingQuiz: (n: number | null) => void;
+  setGeneratingInClassQuiz: (n: number | null) => void;
+  setGeneratingWeeklyChallenge: (n: number | null) => void;
+  setGeneratingDiscussion: (n: number | null) => void;
+  setGeneratingActivities: (n: number | null) => void;
+  setGeneratingAudio: (n: number | null) => void;
+  setGeneratingSlides: (n: number | null) => void;
+}
+
+export interface UseChapterMaterialsResult {
+  quizHtml: string;
+  inClassQuizData: InClassQuizQuestion[];
+  weeklyChallengeHtml: string;
+  discussions: DiscussionPrompt[];
+  activities: Activity[];
+  audioTranscript: string;
+  audioUrl: string;
+  audioError: string;
+  /** Non-error notice: synthesized audio exceeded the persistable size cap. */
+  audioPersistNote: string;
+  audioPhase: 'transcript' | 'synthesizing' | null;
+  audioChunkProgress: { current: number; total: number } | null;
+  slidesData: SlideData[];
+  setSlidesData: React.Dispatch<React.SetStateAction<SlideData[]>>;
+  expandedActivities: Record<number, ActivityDetail>;
+  setExpandedActivities: React.Dispatch<React.SetStateAction<Record<number, ActivityDetail>>>;
+  expandingActivity: number | null;
+  tabErrors: Record<string, string>;
+  setTabError: (kind: string, msg: string) => void;
+  clearTabError: (kind: string) => void;
+
+  generateQuiz: () => Promise<void>;
+  generateInClassQuiz: () => Promise<void>;
+  generateWeeklyChallenge: () => Promise<void>;
+  generateDiscussion: () => Promise<void>;
+  generateActivities: () => Promise<void>;
+  generateAudio: () => Promise<void>;
+  generateSlides: () => Promise<void>;
+  retryAudio: () => Promise<void>;
+  fleshOutActivity: (index: number) => Promise<void>;
+}
+
+/**
+ * Wrap the common begin/end pattern shared by all seven generators:
+ *
+ *   setGenerating(chapterNum)
+ *   clearTabError(kind)
+ *   try { await run() }
+ *   catch (err) { setTabError(kind, friendlyError(...)) }
+ *   finally { setGenerating(null) }
+ *
+ * Each generator just provides its own `run` with the prompt + side effects.
+ */
+async function runGenerationLifecycle({
+  kind,
+  chapterNum,
+  setGenerating,
+  setTabError,
+  clearTabError,
+  errorPrefix,
+  run,
+}: {
+  kind: string;
+  chapterNum: number;
+  setGenerating: (n: number | null) => void;
+  setTabError: (kind: string, msg: string) => void;
+  clearTabError: (kind: string) => void;
+  errorPrefix: string;
+  run: (signal: AbortSignal) => Promise<void>;
+}): Promise<void> {
+  // Register an AbortController so a Stop button anywhere in the app can
+  // cancel this generation (abortInFlight(materialAbortKey(kind, chapter))).
+  const abortKey = materialAbortKey(kind, chapterNum);
+  const controller = beginAbortable(abortKey);
+  setGenerating(chapterNum);
+  clearTabError(kind);
+  try {
+    await run(controller.signal);
+  } catch (err) {
+    // A user-initiated Stop is a silent cancel, never an error banner.
+    if (!isAbortError(err) && !controller.signal.aborted) {
+      setTabError(kind, friendlyError(err, errorPrefix));
+    }
+  } finally {
+    endAbortable(abortKey, controller);
+    setGenerating(null);
+  }
+}
+
+/** Shown when a synthesized narration exceeds the persistable size cap — it
+ *  plays fine now, but won't survive a reload, and silence about that read as
+ *  data loss. */
+const AUDIO_OVER_CAP_NOTE =
+  'This narration is too large to keep across sessions — it plays now, but after a ' +
+  'reload you’ll need to re-narrate it from the transcript (which is kept).';
+
+// An ElevenLabsTtsError with no HTTP status = the request never reached the API
+// (the local-block / rejected-fetch path in tts.ts); its message is already
+// actionable, so surface it verbatim. Errors carrying a status (401/429/5xx)
+// still go through friendlyError for the mapped copy ("API key rejected", etc.).
+function ttsErrorMessage(err: unknown): string {
+  if (
+    err instanceof Error &&
+    err.name === 'ElevenLabsTtsError' &&
+    (err as { status?: number }).status == null
+  ) {
+    return err.message;
+  }
+  return friendlyError(err, 'Audio synthesis failed.');
+}
+
+export function useChapterMaterials(params: UseChapterMaterialsParams): UseChapterMaterialsResult {
+  const {
+    syllabus,
+    currentChapter,
+    syllabusChapter,
+    selectedChapterNum,
+    selectedChapterRef,
+    claudeApiKey,
+    elevenLabsApiKey,
+    setup,
+    updateChapter,
+    setError,
+    setGeneratingQuiz,
+    setGeneratingInClassQuiz,
+    setGeneratingWeeklyChallenge,
+    setGeneratingDiscussion,
+    setGeneratingActivities,
+    setGeneratingAudio,
+    setGeneratingSlides,
+  } = params;
+
+  // ── State ──────────────────────────────────────────────────────────
+  const [quizHtml, setQuizHtml] = useState('');
+  const [inClassQuizData, setInClassQuizData] = useState<InClassQuizQuestion[]>([]);
+  const [weeklyChallengeHtml, setWeeklyChallengeHtml] = useState('');
+  const [discussions, setDiscussions] = useState<DiscussionPrompt[]>([]);
+  const [activities, setActivities] = useState<Activity[]>([]);
+  const [audioTranscript, setAudioTranscript] = useState('');
+  const [audioUrl, setAudioUrl] = useState('');
+  const [audioError, setAudioError] = useState('');
+  const [audioPersistNote, setAudioPersistNote] = useState('');
+  const [audioPhase, setAudioPhase] = useState<'transcript' | 'synthesizing' | null>(null);
+  const [audioChunkProgress, setAudioChunkProgress] = useState<{ current: number; total: number } | null>(null);
+  const [slidesData, setSlidesData] = useState<SlideData[]>([]);
+  const [expandedActivities, setExpandedActivities] = useState<Record<number, ActivityDetail>>({});
+  const [expandingActivity, setExpandingActivity] = useState<number | null>(null);
+  const [tabErrors, setTabErrors] = useState<Record<string, string>>({});
+
+  // ── Tab error helpers ──────────────────────────────────────────────
+  const setTabError = useCallback((tab: string, msg: string) => {
+    setTabErrors((prev) => ({ ...prev, [tab]: msg }));
+  }, []);
+
+  const clearTabError = useCallback((tab: string) => {
+    setTabErrors((prev) => {
+      if (!prev[tab]) return prev;
+      const next = { ...prev };
+      delete next[tab];
+      return next;
+    });
+  }, []);
+
+  // ── Chapter-switch reset + rehydrate ───────────────────────────────
+  // When the user switches chapters (or the persisted chapter appears
+  // from courseStore), reset all per-material state and re-hydrate from
+  // the new chapter if it has prior data.
+  useEffect(() => {
+    setQuizHtml('');
+    setInClassQuizData([]);
+    setDiscussions([]);
+    setActivities([]);
+    setAudioTranscript('');
+    setAudioUrl('');
+    setSlidesData([]);
+    setWeeklyChallengeHtml('');
+    setExpandedActivities({});
+    setExpandingActivity(null);
+    setAudioChunkProgress(null);
+    setAudioError('');
+    setAudioPersistNote('');
+    setTabErrors({});
+
+    if (!currentChapter) return;
+    const ch = currentChapter;
+    if (ch.inClassQuizData && ch.inClassQuizData.length > 0) setInClassQuizData(ch.inClassQuizData);
+    if (ch.discussionData && ch.discussionData.length > 0) setDiscussions(ch.discussionData);
+    if (ch.activityData && ch.activityData.length > 0) setActivities(ch.activityData);
+    if (ch.activityDetails) setExpandedActivities(ch.activityDetails);
+    if (ch.audioTranscript) setAudioTranscript(ch.audioTranscript);
+    const audioSrc = ch.audioUrl ?? ch.audioDataUri;
+    if (audioSrc) setAudioUrl(audioSrc);
+    if (ch.slidesJson && ch.slidesJson.length > 0) setSlidesData(ch.slidesJson);
+    if (ch.practiceQuizData && syllabus) {
+      const syllCh = syllabus.chapters.find((sc) => sc.number === selectedChapterNum);
+      (async () => {
+        try {
+          const { buildQuizHtml } = await import('../../templates/quizTemplate');
+          const html = buildQuizHtml(
+            `${syllCh?.title || ch.title} — Practice Quiz`,
+            ch.practiceQuizData!,
+            syllabus.courseTitle,
+            setup.themeId,
+          );
+          setQuizHtml(html);
+        } catch {
+          /* template failed */
+        }
+      })();
+    }
+    if (ch.weeklyChallengeData && syllabus) {
+      const syllCh = syllabus.chapters.find((sc) => sc.number === selectedChapterNum);
+      (async () => {
+        try {
+          const { buildWeeklyChallengeHtml } = await import('../../templates/weeklyChallengeTemplate');
+          const html = buildWeeklyChallengeHtml(
+            `Week ${selectedChapterNum} Challenge — ${syllCh?.title || ch.title}`,
+            ch.weeklyChallengeData!,
+            syllabus.courseTitle,
+            setup.themeId,
+          );
+          setWeeklyChallengeHtml(html);
+        } catch {
+          /* template failed */
+        }
+      })();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedChapterNum, currentChapter]);
+
+  // ── Generators ─────────────────────────────────────────────────────
+
+  const generateQuiz = useCallback(async () => {
+    if (!syllabus || !currentChapter || !syllabusChapter) return;
+    const chapterNum = selectedChapterNum;
+    await runGenerationLifecycle({
+      kind: 'quiz',
+      chapterNum,
+      setGenerating: setGeneratingQuiz,
+      setTabError,
+      clearTabError,
+      errorPrefix: 'Quiz generation failed.',
+      run: async (signal) => {
+        const fullText = await streamWithRetry(
+          {
+            apiKey: claudeApiKey,
+            model: MODELS.opus,
+            system: buildPracticeQuizPrompt(),
+            signal,
+            messages: [
+              {
+                role: 'user',
+                content: buildPracticeQuizUserPrompt(
+                  syllabusChapter.title,
+                  syllabusChapter.narrative,
+                  syllabusChapter.keyConcepts,
+                  currentChapter.htmlContent?.slice(0, 3000),
+                ),
+              },
+            ],
+            thinkingBudget: 'high',
+            maxTokens: 8000,
+          },
+          {},
+        );
+
+        const { balancePracticeQuiz } = await import('../../services/quiz/answerBalancer');
+        const balancedText = await balancePracticeQuiz(fullText, claudeApiKey);
+        updateChapter(chapterNum, { practiceQuizData: balancedText });
+
+        if (selectedChapterRef.current === chapterNum) {
+          try {
+            const { buildQuizHtml } = await import('../../templates/quizTemplate');
+            const html = buildQuizHtml(
+              `${syllabusChapter.title} — Practice Quiz`,
+              balancedText,
+              syllabus.courseTitle,
+              setup.themeId,
+            );
+            setQuizHtml(html);
+          } catch {
+            const fallbackHtml = `<!DOCTYPE html><html><head><style>
+              body { background: #0f0f1a; color: #f1f5f9; font-family: system-ui; padding: 2rem; line-height: 1.8; }
+              strong { color: #a78bfa; }
+              hr { border-color: #252540; margin: 1.5rem 0; }
+            </style></head><body><pre style="white-space:pre-wrap">${fullText.replace(/</g, '&lt;')}</pre></body></html>`;
+            setQuizHtml(fallbackHtml);
+          }
+        }
+      },
+    });
+  }, [
+    syllabus,
+    currentChapter,
+    syllabusChapter,
+    selectedChapterNum,
+    selectedChapterRef,
+    claudeApiKey,
+    setup.themeId,
+    updateChapter,
+    setGeneratingQuiz,
+    setTabError,
+    clearTabError,
+  ]);
+
+  const generateInClassQuiz = useCallback(async () => {
+    if (!syllabus || !currentChapter || !syllabusChapter) return;
+    const chapterNum = selectedChapterNum;
+    await runGenerationLifecycle({
+      kind: 'inclassquiz',
+      chapterNum,
+      setGenerating: setGeneratingInClassQuiz,
+      setTabError,
+      clearTabError,
+      errorPrefix: 'In-class quiz generation failed.',
+      run: async (signal) => {
+        const fullText = await streamWithRetry(
+          {
+            apiKey: claudeApiKey,
+            model: MODELS.opus,
+            system: buildInClassQuizPrompt(),
+            signal,
+            messages: [
+              {
+                role: 'user',
+                content: buildInClassQuizUserPrompt(
+                  syllabusChapter.title,
+                  syllabusChapter.narrative,
+                  syllabusChapter.keyConcepts,
+                  currentChapter.htmlContent?.slice(0, 3000),
+                ),
+              },
+            ],
+            thinkingBudget: 'high',
+            maxTokens: 8000,
+          },
+          {},
+        );
+
+        try {
+          const parsed = parseJson(fullText) as InClassQuizQuestion[];
+          const { balanceInClassQuiz } = await import('../../services/quiz/answerBalancer');
+          const balanced = await balanceInClassQuiz(parsed, claudeApiKey);
+          if (selectedChapterRef.current === chapterNum) setInClassQuizData(balanced);
+          updateChapter(chapterNum, { inClassQuizData: balanced });
+        } catch {
+          setTabError('inclassquiz', 'Failed to parse in-class quiz data');
+        }
+      },
+    });
+  }, [
+    syllabus,
+    currentChapter,
+    syllabusChapter,
+    selectedChapterNum,
+    selectedChapterRef,
+    claudeApiKey,
+    updateChapter,
+    setGeneratingInClassQuiz,
+    setTabError,
+    clearTabError,
+  ]);
+
+  const generateWeeklyChallenge = useCallback(async () => {
+    if (!syllabus || !currentChapter || !syllabusChapter) return;
+    const chapterNum = selectedChapterNum;
+    await runGenerationLifecycle({
+      kind: 'weeklychallenge',
+      chapterNum,
+      setGenerating: setGeneratingWeeklyChallenge,
+      setTabError,
+      clearTabError,
+      errorPrefix: 'Weekly challenge generation failed.',
+      run: async (signal) => {
+        const priorChapters = (syllabusChapter.spacingConnections || [])
+          .map((n) => syllabus.chapters.find((c) => c.number === n))
+          .filter((c): c is NonNullable<typeof c> => !!c)
+          .map((c) => ({ number: c.number, title: c.title, keyConcepts: c.keyConcepts }));
+
+        const { buildWeeklyChallengePrompt, buildWeeklyChallengeUserPrompt } = await import(
+          '../../prompts/weeklyChallenge'
+        );
+
+        const fullText = await streamWithRetry(
+          {
+            apiKey: claudeApiKey,
+            model: MODELS.opus,
+            system: buildWeeklyChallengePrompt(),
+            signal,
+            messages: [
+              {
+                role: 'user',
+                content: buildWeeklyChallengeUserPrompt(
+                  syllabusChapter.title,
+                  syllabusChapter.narrative,
+                  syllabusChapter.keyConcepts,
+                  currentChapter.htmlContent?.slice(0, 3000),
+                  syllabusChapter.number,
+                  priorChapters,
+                ),
+              },
+            ],
+            thinkingBudget: 'high',
+            maxTokens: 10000,
+          },
+          {},
+        );
+
+        try {
+          const parsed = parseJson(fullText, '{') as WeeklyChallengeData;
+          updateChapter(chapterNum, { weeklyChallengeData: parsed });
+
+          if (selectedChapterRef.current === chapterNum) {
+            try {
+              const { buildWeeklyChallengeHtml } = await import('../../templates/weeklyChallengeTemplate');
+              const html = buildWeeklyChallengeHtml(
+                `Week ${chapterNum} Challenge — ${syllabusChapter.title}`,
+                parsed,
+                syllabus.courseTitle,
+                setup.themeId,
+              );
+              setWeeklyChallengeHtml(html);
+            } catch (templateErr) {
+              // Surface (don't swallow) — a swallowed throw here is exactly why
+              // the challenge silently reverted to the button for so long.
+              setTabError(
+                'weeklychallenge',
+                `Challenge generated, but rendering the preview failed: ${
+                  templateErr instanceof Error ? templateErr.message : String(templateErr)
+                }`,
+              );
+            }
+          }
+        } catch {
+          setTabError('weeklychallenge', 'Failed to parse weekly challenge data');
+        }
+      },
+    });
+  }, [
+    syllabus,
+    currentChapter,
+    syllabusChapter,
+    selectedChapterNum,
+    selectedChapterRef,
+    claudeApiKey,
+    setup.themeId,
+    updateChapter,
+    setGeneratingWeeklyChallenge,
+    setTabError,
+    clearTabError,
+  ]);
+
+  const generateDiscussion = useCallback(async () => {
+    if (!syllabus || !syllabusChapter) return;
+    const chapterNum = selectedChapterNum;
+    await runGenerationLifecycle({
+      kind: 'discussion',
+      chapterNum,
+      setGenerating: setGeneratingDiscussion,
+      setTabError,
+      clearTabError,
+      errorPrefix: 'Discussion generation failed.',
+      run: async (signal) => {
+        const fullText = await streamWithRetry(
+          {
+            apiKey: claudeApiKey,
+            system: buildDiscussionPrompt(),
+            signal,
+            messages: [
+              {
+                role: 'user',
+                content: buildDiscussionUserPrompt(
+                  syllabusChapter.title,
+                  syllabusChapter.keyConcepts,
+                  setup.cohortSize,
+                  setup.teachingEnvironment,
+                ),
+              },
+            ],
+            thinkingBudget: 'medium',
+            maxTokens: 4000,
+          },
+          {},
+        );
+
+        try {
+          const parsed = parseJson(fullText) as DiscussionPrompt[];
+          if (selectedChapterRef.current === chapterNum) setDiscussions(parsed);
+          updateChapter(chapterNum, { discussionData: parsed });
+        } catch {
+          setTabError('discussion', 'Failed to parse discussion prompts');
+        }
+      },
+    });
+  }, [
+    syllabus,
+    syllabusChapter,
+    selectedChapterNum,
+    selectedChapterRef,
+    claudeApiKey,
+    setup.cohortSize,
+    setup.teachingEnvironment,
+    updateChapter,
+    setGeneratingDiscussion,
+    setTabError,
+    clearTabError,
+  ]);
+
+  const generateActivities = useCallback(async () => {
+    if (!syllabus || !syllabusChapter) return;
+    const chapterNum = selectedChapterNum;
+    await runGenerationLifecycle({
+      kind: 'activities',
+      chapterNum,
+      setGenerating: setGeneratingActivities,
+      setTabError,
+      clearTabError,
+      errorPrefix: 'Activities generation failed.',
+      run: async (signal) => {
+        const fullText = await streamWithRetry(
+          {
+            apiKey: claudeApiKey,
+            system: buildActivitiesPrompt(),
+            signal,
+            messages: [
+              {
+                role: 'user',
+                content: buildActivitiesUserPrompt(
+                  syllabusChapter.title,
+                  syllabusChapter.keyConcepts,
+                  setup.cohortSize,
+                  setup.teachingEnvironment,
+                  setup.environmentNotes,
+                ),
+              },
+            ],
+            thinkingBudget: 'medium',
+            maxTokens: 4000,
+          },
+          {},
+        );
+
+        try {
+          const parsed = parseJson(fullText) as Activity[];
+          if (selectedChapterRef.current === chapterNum) setActivities(parsed);
+          updateChapter(chapterNum, { activityData: parsed });
+        } catch {
+          setTabError('activities', 'Failed to parse activities');
+        }
+      },
+    });
+  }, [
+    syllabus,
+    syllabusChapter,
+    selectedChapterNum,
+    selectedChapterRef,
+    claudeApiKey,
+    setup.cohortSize,
+    setup.teachingEnvironment,
+    setup.environmentNotes,
+    updateChapter,
+    setGeneratingActivities,
+    setTabError,
+    clearTabError,
+  ]);
+
+  const fleshOutActivity = useCallback(
+    async (index: number) => {
+      if (!syllabusChapter || expandingActivity !== null) return;
+      const activity = activities[index];
+      if (!activity) return;
+
+      setExpandingActivity(index);
+      try {
+        const fullText = await streamWithRetry(
+          {
+            apiKey: claudeApiKey,
+            model: MODELS.haiku,
+            system: buildActivityDetailPrompt(),
+            messages: [
+              {
+                role: 'user',
+                content: buildActivityDetailUserPrompt(
+                  activity,
+                  syllabusChapter.title,
+                  setup.cohortSize,
+                  setup.teachingEnvironment,
+                  setup.environmentNotes,
+                ),
+              },
+            ],
+            thinkingBudget: 'low',
+            maxTokens: 8000,
+          },
+          {},
+        );
+
+        try {
+          const parsed = normalizeActivityDetail(
+            parseJson(fullText, '{') as Partial<ActivityDetail>,
+          );
+          if (parsed) {
+            setExpandedActivities((prev) => {
+              const updated = { ...prev, [index]: parsed };
+              updateChapter(selectedChapterNum, { activityDetails: updated });
+              return updated;
+            });
+          }
+        } catch (parseErr) {
+          setError(
+            `Failed to parse activity details: ${
+              parseErr instanceof Error ? parseErr.message : String(parseErr)
+            }`,
+          );
+        }
+      } catch (err) {
+        setError(friendlyError(err, 'Activity detail generation failed.'));
+      } finally {
+        setExpandingActivity(null);
+      }
+    },
+    [
+      activities,
+      syllabusChapter,
+      claudeApiKey,
+      setup.cohortSize,
+      setup.teachingEnvironment,
+      setup.environmentNotes,
+      expandingActivity,
+      setError,
+      selectedChapterNum,
+      updateChapter,
+    ],
+  );
+
+  const generateAudio = useCallback(async () => {
+    if (!currentChapter || !syllabus) return;
+    const chapterNum = selectedChapterNum;
+    await runGenerationLifecycle({
+      kind: 'audio',
+      chapterNum,
+      setGenerating: setGeneratingAudio,
+      setTabError,
+      clearTabError,
+      errorPrefix: 'Audio transcript generation failed.',
+      run: async (signal) => {
+        setAudioPhase('transcript');
+        setAudioError('');
+        try {
+          const transcript = await streamWithRetry(
+            {
+              apiKey: claudeApiKey,
+              system: buildAudioTranscriptPrompt(),
+              signal,
+              messages: [
+                {
+                  role: 'user',
+                  content: buildAudioTranscriptUserPrompt(
+                    currentChapter.title,
+                    currentChapter.htmlContent,
+                  ),
+                },
+              ],
+              thinkingBudget: 'medium',
+              maxTokens: 8000,
+            },
+            {},
+          );
+
+          if (selectedChapterRef.current === chapterNum) setAudioTranscript(transcript);
+          updateChapter(chapterNum, { audioTranscript: transcript });
+
+          if (elevenLabsApiKey) {
+            setAudioPhase('synthesizing');
+            setAudioChunkProgress(null);
+            try {
+              const { generateAudiobook } = await import('../../services/elevenLabs/tts');
+              const voice = getVoiceOption(setup.voiceId);
+              const blob = await generateAudiobook(transcript, elevenLabsApiKey, {
+                voiceId: voice.id,
+                signal,
+                onProgress: (current, total) => setAudioChunkProgress({ current, total }),
+              });
+              const url = URL.createObjectURL(blob);
+              if (selectedChapterRef.current === chapterNum) setAudioUrl(url);
+              // Persist a (size-capped) data URI too — the blob URL above is
+              // stripped on save and dies on reload; the data URI survives.
+              const audioDataUri = await persistableAudioDataUri(blob);
+              if (selectedChapterRef.current === chapterNum) {
+                setAudioPersistNote(audioDataUri ? '' : AUDIO_OVER_CAP_NOTE);
+              }
+              updateChapter(chapterNum, { audioUrl: url, audioDataUri });
+            } catch (err) {
+              if (isAbortError(err)) throw err;
+              const msg = ttsErrorMessage(err);
+              console.error('ElevenLabs TTS failed:', err);
+              if (selectedChapterRef.current === chapterNum) setAudioError(msg);
+            }
+          }
+        } finally {
+          setAudioPhase(null);
+          setAudioChunkProgress(null);
+        }
+      },
+    });
+  }, [
+    currentChapter,
+    syllabus,
+    selectedChapterNum,
+    selectedChapterRef,
+    claudeApiKey,
+    elevenLabsApiKey,
+    setup.voiceId,
+    updateChapter,
+    setGeneratingAudio,
+    setTabError,
+    clearTabError,
+  ]);
+
+  const retryAudio = useCallback(async () => {
+    if (!audioTranscript || !elevenLabsApiKey) return;
+    const abortKey = materialAbortKey('audio', selectedChapterNum);
+    const controller = beginAbortable(abortKey);
+    setGeneratingAudio(selectedChapterNum);
+    setAudioPhase('synthesizing');
+    setAudioError('');
+    setAudioChunkProgress(null);
+
+    try {
+      const { generateAudiobook } = await import('../../services/elevenLabs/tts');
+      const voice = getVoiceOption(setup.voiceId);
+      const blob = await generateAudiobook(audioTranscript, elevenLabsApiKey, {
+        voiceId: voice.id,
+        signal: controller.signal,
+        onProgress: (current, total) => setAudioChunkProgress({ current, total }),
+      });
+      const url = URL.createObjectURL(blob);
+      setAudioUrl(url);
+      const audioDataUri = await persistableAudioDataUri(blob);
+      setAudioPersistNote(audioDataUri ? '' : AUDIO_OVER_CAP_NOTE);
+      updateChapter(selectedChapterNum, { audioUrl: url, audioDataUri });
+    } catch (err) {
+      if (!isAbortError(err)) {
+        const msg = ttsErrorMessage(err);
+        console.error('ElevenLabs TTS retry failed:', err);
+        setAudioError(msg);
+      }
+    } finally {
+      endAbortable(abortKey, controller);
+      setGeneratingAudio(null);
+      setAudioPhase(null);
+      setAudioChunkProgress(null);
+    }
+  }, [
+    audioTranscript,
+    elevenLabsApiKey,
+    selectedChapterNum,
+    setup.voiceId,
+    updateChapter,
+    setGeneratingAudio,
+  ]);
+
+  const generateSlides = useCallback(async () => {
+    if (!currentChapter || !syllabus || !syllabusChapter) return;
+    const chapterNum = selectedChapterNum;
+    await runGenerationLifecycle({
+      kind: 'slides',
+      chapterNum,
+      setGenerating: setGeneratingSlides,
+      setTabError,
+      clearTabError,
+      errorPrefix: 'Slides generation failed.',
+      run: async (signal) => {
+        const fullText = await streamWithRetry(
+          {
+            apiKey: claudeApiKey,
+            system: buildSlidesPrompt(setup.themeId),
+            signal,
+            messages: [
+              {
+                role: 'user',
+                content: buildSlidesUserPrompt(
+                  syllabusChapter.title,
+                  syllabusChapter.keyConcepts,
+                  currentChapter.htmlContent,
+                ),
+              },
+            ],
+            thinkingBudget: 'medium',
+            maxTokens: 4000,
+          },
+          {},
+        );
+
+        try {
+          const parsed = parseJson(fullText) as SlideData[];
+          if (selectedChapterRef.current === chapterNum) setSlidesData(parsed);
+          updateChapter(chapterNum, { slidesJson: parsed });
+        } catch {
+          setTabError('slides', 'Failed to parse slide data from response');
+        }
+      },
+    });
+  }, [
+    currentChapter,
+    syllabus,
+    syllabusChapter,
+    selectedChapterNum,
+    selectedChapterRef,
+    claudeApiKey,
+    setup.themeId,
+    updateChapter,
+    setGeneratingSlides,
+    setTabError,
+    clearTabError,
+  ]);
+
+  return {
+    quizHtml,
+    inClassQuizData,
+    weeklyChallengeHtml,
+    discussions,
+    activities,
+    audioTranscript,
+    audioUrl,
+    audioError,
+    audioPersistNote,
+    audioPhase,
+    audioChunkProgress,
+    slidesData,
+    setSlidesData,
+    expandedActivities,
+    setExpandedActivities,
+    expandingActivity,
+    tabErrors,
+    setTabError,
+    clearTabError,
+    generateQuiz,
+    generateInClassQuiz,
+    generateWeeklyChallenge,
+    generateDiscussion,
+    generateActivities,
+    generateAudio,
+    generateSlides,
+    retryAudio,
+    fleshOutActivity,
+  };
+}
diff --git a/src/components/codex/Badge.tsx b/src/components/codex/Badge.tsx
new file mode 100644
index 0000000..0efd7bc
--- /dev/null
+++ b/src/components/codex/Badge.tsx
@@ -0,0 +1,40 @@
+import type { ReactNode } from 'react';
+
+export type CodexBadgeTone = 'neutral' | 'info' | 'success' | 'warning' | 'danger' | 'emphasis';
+
+interface CodexBadgeProps {
+  tone?: CodexBadgeTone;
+  children: ReactNode;
+}
+
+const TONE: Record<CodexBadgeTone, { fg: string; bg: string }> = {
+  neutral: { fg: 'var(--cb-text-muted)', bg: 'transparent' },
+  info: { fg: 'var(--cb-status-info)', bg: 'var(--cb-status-info-bg)' },
+  success: { fg: 'var(--cb-status-success)', bg: 'var(--cb-status-success-bg)' },
+  warning: { fg: 'var(--cb-status-warning)', bg: 'var(--cb-status-warning-bg)' },
+  danger: { fg: 'var(--cb-status-danger)', bg: 'var(--cb-status-danger-bg)' },
+  emphasis: { fg: 'var(--cb-accent-emphasis)', bg: 'var(--cb-accent-emphasis-quiet)' },
+};
+
+export function CodexBadge({ tone = 'neutral', children }: CodexBadgeProps) {
+  const t = TONE[tone];
+  return (
+    <span
+      className="cb-sc"
+      style={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        padding: '2px 8px',
+        background: t.bg,
+        color: t.fg,
+        border: tone === 'neutral' ? '0.5px solid var(--cb-border-default)' : 'none',
+        fontSize: 12,
+        letterSpacing: '0.12em',
+        borderRadius: 1.5,
+        whiteSpace: 'nowrap',
+      }}
+    >
+      {children}
+    </span>
+  );
+}
diff --git a/src/components/codex/Button.tsx b/src/components/codex/Button.tsx
new file mode 100644
index 0000000..b674298
--- /dev/null
+++ b/src/components/codex/Button.tsx
@@ -0,0 +1,154 @@
+import type { ButtonHTMLAttributes, CSSProperties, ReactNode } from 'react';
+
+type Variant = 'primary' | 'secondary' | 'ghost' | 'destructive' | 'link';
+type Size = 'sm' | 'md' | 'lg';
+
+interface CodexButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'style'> {
+  variant?: Variant;
+  size?: Size;
+  loading?: boolean;
+  iconLeft?: ReactNode;
+  iconRight?: ReactNode;
+  style?: CSSProperties;
+}
+
+const SIZE: Record<Size, { h: number; px: number; fz: number }> = {
+  sm: { h: 30, px: 12, fz: 14.5 },
+  md: { h: 36, px: 16, fz: 15 },
+  lg: { h: 44, px: 22, fz: 17 },
+};
+
+const VARIANT_BG: Record<Variant, string> = {
+  primary: 'var(--cb-accent-emphasis)',
+  secondary: 'transparent',
+  ghost: 'transparent',
+  destructive: 'var(--cb-status-danger)',
+  link: 'transparent',
+};
+
+const VARIANT_BG_HOVER: Record<Variant, string> = {
+  primary: 'var(--cb-accent-emphasis-hover)',
+  secondary: 'var(--cb-surface-sunken)',
+  ghost: 'var(--cb-surface-sunken)',
+  destructive: 'var(--cb-accent-emphasis-hover)',
+  link: 'transparent',
+};
+
+function variantStyle(variant: Variant): CSSProperties {
+  switch (variant) {
+    case 'primary':
+      return { background: VARIANT_BG.primary, color: 'var(--cb-text-inverse)' };
+    case 'secondary':
+      return {
+        background: VARIANT_BG.secondary,
+        color: 'var(--cb-text-default)',
+        borderColor: 'var(--cb-border-strong)',
+      };
+    case 'ghost':
+      return { background: VARIANT_BG.ghost, color: 'var(--cb-text-default)' };
+    case 'destructive':
+      return { background: VARIANT_BG.destructive, color: '#f8f3e6' };
+    case 'link':
+      return {
+        background: 'transparent',
+        color: 'var(--cb-accent-link)',
+        textDecoration: 'underline',
+        textDecorationThickness: '0.5px',
+        textUnderlineOffset: '3px',
+        height: 'auto',
+        padding: 0,
+      };
+  }
+}
+
+export function CodexButton({
+  variant = 'primary',
+  size = 'md',
+  loading = false,
+  disabled = false,
+  iconLeft,
+  iconRight,
+  children,
+  style,
+  onMouseEnter,
+  onMouseLeave,
+  ...props
+}: CodexButtonProps) {
+  const sz = SIZE[size];
+  const base: CSSProperties = {
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 8,
+    padding: variant === 'link' ? 0 : `0 ${sz.px}px`,
+    height: variant === 'link' ? 'auto' : sz.h,
+    fontFamily: 'var(--font-cb-serif)',
+    fontSize: sz.fz,
+    fontWeight: 500,
+    fontVariationSettings: '"opsz" 14',
+    letterSpacing: '0.005em',
+    borderRadius: 1.5,
+    border: '1px solid transparent',
+    cursor: disabled || loading ? 'default' : 'pointer',
+    transition:
+      'background-color var(--cb-duration-2) var(--cb-ease-paper), color var(--cb-duration-2), border-color var(--cb-duration-2)',
+    userSelect: 'none',
+    whiteSpace: 'nowrap',
+    opacity: disabled ? 0.45 : 1,
+    pointerEvents: disabled ? 'none' : 'auto',
+  };
+
+  return (
+    <button
+      {...props}
+      disabled={disabled || loading}
+      className={`cb-focus ${props.className ?? ''}`}
+      style={{ ...base, ...variantStyle(variant), ...style }}
+      onMouseEnter={(e) => {
+        if (!disabled && !loading) {
+          e.currentTarget.style.background = VARIANT_BG_HOVER[variant];
+        }
+        onMouseEnter?.(e);
+      }}
+      onMouseLeave={(e) => {
+        e.currentTarget.style.background = VARIANT_BG[variant];
+        onMouseLeave?.(e);
+      }}
+    >
+      {loading ? (
+        <LoadingRule width={sz.fz * 2.5} />
+      ) : (
+        <>
+          {iconLeft}
+          {children}
+          {iconRight}
+        </>
+      )}
+    </button>
+  );
+}
+
+function LoadingRule({ width }: { width: number }) {
+  return (
+    <span
+      style={{
+        display: 'inline-block',
+        height: 1,
+        width,
+        background: 'currentColor',
+        opacity: 0.7,
+        position: 'relative',
+        overflow: 'hidden',
+      }}
+    >
+      <span
+        style={{
+          position: 'absolute',
+          inset: 0,
+          background: 'currentColor',
+          animation: 'cb-pen 1.2s cubic-bezier(0.32,0.04,0.32,1) infinite',
+        }}
+      />
+    </span>
+  );
+}
diff --git a/src/components/codex/Checkbox.tsx b/src/components/codex/Checkbox.tsx
new file mode 100644
index 0000000..174221b
--- /dev/null
+++ b/src/components/codex/Checkbox.tsx
@@ -0,0 +1,82 @@
+import type { ChangeEvent, ReactNode } from 'react';
+
+interface CodexCheckboxProps {
+  checked: boolean;
+  onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+  label: ReactNode;
+  sub?: ReactNode;
+  disabled?: boolean;
+}
+
+export function CodexCheckbox({ checked, onChange, label, sub, disabled }: CodexCheckboxProps) {
+  return (
+    <label
+      style={{
+        display: 'flex',
+        gap: 12,
+        alignItems: 'flex-start',
+        cursor: disabled ? 'default' : 'pointer',
+        opacity: disabled ? 0.5 : 1,
+        position: 'relative',
+      }}
+    >
+      {/* Hidden native input first so the focus ring can reach the drawn box
+          via an adjacent-sibling selector. It is absolutely positioned
+          (inset: 0), so it takes no part in the flex layout. */}
+      <input
+        type="checkbox"
+        checked={checked}
+        onChange={onChange}
+        disabled={disabled}
+        className="cb-focus cb-checkbox-native"
+        style={{ position: 'absolute', opacity: 0, pointerEvents: 'none', inset: 0 }}
+      />
+      <span
+        aria-hidden
+        className="cb-checkbox-box"
+        style={{
+          flex: '0 0 auto',
+          width: 18,
+          height: 18,
+          marginTop: 2,
+          border: `1px solid ${checked ? 'var(--cb-accent-emphasis)' : 'var(--cb-border-strong)'}`,
+          borderRadius: 1.5,
+          background: checked ? 'var(--cb-accent-emphasis)' : 'var(--cb-ground-canvas)',
+          display: 'inline-flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          transition: 'background-color 200ms, border-color 200ms',
+        }}
+      >
+        {checked && (
+          <span
+            style={{
+              display: 'block',
+              width: 10,
+              height: 6,
+              borderLeft: '1.5px solid var(--cb-text-inverse)',
+              borderBottom: '1.5px solid var(--cb-text-inverse)',
+              transform: 'rotate(-45deg) translate(1px,-1px)',
+            }}
+          />
+        )}
+      </span>
+      <div>
+        <div style={{ fontSize: 15, color: 'var(--cb-text-default)', lineHeight: 1.45 }}>{label}</div>
+        {sub && (
+          <div className="cb-italic" style={{ fontSize: 13.5, color: 'var(--cb-text-muted)', marginTop: 2 }}>
+            {sub}
+          </div>
+        )}
+      </div>
+      {/* The native input is opacity: 0, which also hides its own focus
+          outline — mirror the keyboard focus ring onto the drawn box. */}
+      <style>{`
+        .cb-checkbox-native:focus-visible + .cb-checkbox-box {
+          outline: 2px solid var(--cb-focus-ring);
+          outline-offset: 2px;
+        }
+      `}</style>
+    </label>
+  );
+}
diff --git a/src/components/codex/ChoicePill.tsx b/src/components/codex/ChoicePill.tsx
new file mode 100644
index 0000000..e06fb0e
--- /dev/null
+++ b/src/components/codex/ChoicePill.tsx
@@ -0,0 +1,78 @@
+import type { ReactNode } from 'react';
+
+interface ChoicePillProps {
+  selected: boolean;
+  onClick: () => void;
+  label: ReactNode;
+  sub?: ReactNode;
+  disabled?: boolean;
+  /** When true, lays out the pill as a square-ish numeric chip. */
+  compact?: boolean;
+}
+
+/**
+ * A two-line selectable pill. Codex equivalent of the legacy "card-style"
+ * radio used in AudienceSelector and ChapterConfig. Selection is signalled
+ * by border-color (Oxblood) and a faint emphasis-quiet wash — never by
+ * shadow or scale.
+ */
+export function ChoicePill({
+  selected,
+  onClick,
+  label,
+  sub,
+  disabled,
+  compact = false,
+}: ChoicePillProps) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      disabled={disabled}
+      className="cb-focus"
+      style={{
+        textAlign: 'left',
+        padding: compact ? '6px 0' : '10px 12px',
+        background: selected ? 'var(--cb-accent-emphasis-quiet)' : 'var(--cb-ground-canvas)',
+        border: `1px solid ${selected ? 'var(--cb-accent-emphasis)' : 'var(--cb-border-default)'}`,
+        borderRadius: 1.5,
+        cursor: disabled ? 'default' : 'pointer',
+        opacity: disabled ? 0.5 : 1,
+        color: 'var(--cb-text-default)',
+        fontFamily: 'var(--font-cb-serif)',
+        transition:
+          'background-color 200ms cubic-bezier(0.32,0.04,0.32,1), border-color 200ms',
+        width: '100%',
+        minHeight: compact ? 32 : undefined,
+        display: 'flex',
+        flexDirection: 'column',
+        gap: compact ? 0 : 2,
+        alignItems: compact ? 'center' : 'flex-start',
+        justifyContent: 'center',
+      }}
+    >
+      <span
+        style={{
+          fontSize: compact ? 13 : 14,
+          fontWeight: selected ? 500 : 400,
+          color: selected ? 'var(--cb-accent-emphasis)' : 'var(--cb-text-default)',
+          lineHeight: 1.3,
+        }}
+      >
+        {label}
+      </span>
+      {sub && (
+        <span
+          className="cb-italic"
+          style={{
+            fontSize: 13.5,
+            color: 'var(--cb-text-muted)',
+            lineHeight: 1.4,
+          }}
+        >
+          {sub}
+        </span>
+      )}
+    </button>
+  );
+}
diff --git a/src/components/codex/Colophon.tsx b/src/components/codex/Colophon.tsx
new file mode 100644
index 0000000..91a9b79
--- /dev/null
+++ b/src/components/codex/Colophon.tsx
@@ -0,0 +1,39 @@
+import type { CSSProperties } from 'react';
+
+type Mode = 'parchment' | 'vespers';
+
+interface Props {
+  size?: number;
+  mode?: Mode;
+  style?: CSSProperties;
+}
+
+const FLEURON_THRESHOLD = 32;
+
+export function Colophon({ size = 48, mode = 'parchment', style }: Props) {
+  const useFull = size >= FLEURON_THRESHOLD;
+  const src = useFull
+    ? mode === 'vespers'
+      ? '/classbuild-colophon-vespers.svg'
+      : '/classbuild-colophon.svg'
+    : '/classbuild-colophon-simple.svg';
+
+  const height = useFull ? size * (128 / 106) : size * (120 / 100);
+
+  return (
+    <img
+      src={src}
+      width={size}
+      height={height}
+      alt="ClassBuild"
+      draggable={false}
+      style={{
+        width: `${size}px`,
+        height: `${height}px`,
+        display: 'block',
+        flexShrink: 0,
+        ...style,
+      }}
+    />
+  );
+}
diff --git a/src/components/codex/CourseStylePicker.tsx b/src/components/codex/CourseStylePicker.tsx
new file mode 100644
index 0000000..36769d8
--- /dev/null
+++ b/src/components/codex/CourseStylePicker.tsx
@@ -0,0 +1,321 @@
+import { useEffect, useState } from 'react';
+import {
+  CHAPTER_THEMES,
+  DEFAULT_CHAPTER_THEME_ID,
+  FONTS_URL,
+  type ChapterTheme,
+  type ChapterThemeId,
+} from '../../themes';
+import { ThemePreviewOverlay } from '../export/ThemePreviewOverlay';
+
+interface CourseStylePickerProps {
+  value: ChapterThemeId | string | undefined;
+  onChange: (id: ChapterThemeId) => void;
+}
+
+/**
+ * Six tangible theme sample cards. Each card is a real micro-chapter rendered
+ * in the theme's actual fonts and palette — chapter eyebrow, italic title, a
+ * paragraph of body, and a small meta strip. No iframes, no JS, just CSS
+ * variables.
+ *
+ * Fonts for all six themes are loaded on mount via a single Google Fonts link
+ * so type renders correctly the first time the card paints. (They're not in
+ * the global index.css to keep the initial bundle lean — only the chrome
+ * fonts ship by default.)
+ */
+export function CourseStylePicker({ value, onChange }: CourseStylePickerProps) {
+  const [overlayId, setOverlayId] = useState<ChapterThemeId | null>(null);
+  const selected =
+    CHAPTER_THEMES.find((t) => t.id === value) ??
+    CHAPTER_THEMES.find((t) => t.id === DEFAULT_CHAPTER_THEME_ID)!;
+
+  // Lazy-load all six themes' fonts on mount so the sample cards render
+  // correctly the moment the user opens this section. ~18 KB on the wire,
+  // cached afterwards.
+  useEffect(() => {
+    const id = 'cb-theme-sample-fonts';
+    if (document.getElementById(id)) return;
+    const link = document.createElement('link');
+    link.id = id;
+    link.rel = 'stylesheet';
+    link.href = FONTS_URL;
+    document.head.appendChild(link);
+    // Don't remove on unmount — leave cached for the rest of the session.
+  }, []);
+
+  return (
+    <div>
+      <div
+        className="cb-sc"
+        style={{
+          fontSize: 13,
+          color: 'var(--cb-text-muted)',
+          letterSpacing: '0.12em',
+          marginBottom: 6,
+        }}
+      >
+        Course style
+      </div>
+
+      <div
+        className="cb-italic"
+        style={{
+          fontSize: 13.5,
+          color: 'var(--cb-text-muted)',
+          lineHeight: 1.45,
+          marginBottom: 12,
+          maxWidth: '64ch',
+        }}
+      >
+        How exported chapters and slides look. Each card below is a real
+        micro-chapter rendered in the theme's actual fonts and palette — what
+        you see is what your readers will see. You can change this on Export.
+      </div>
+
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))',
+          gap: 14,
+        }}
+      >
+        {CHAPTER_THEMES.map((t) => {
+          const isSelected = selected.id === t.id;
+          const accent = t.palette[2];
+          return (
+            <button
+              key={t.id}
+              type="button"
+              onClick={() => onChange(t.id)}
+              className="cb-focus"
+              aria-pressed={isSelected}
+              aria-label={`Course style: ${t.name}`}
+              style={{
+                display: 'flex',
+                flexDirection: 'column',
+                padding: 0,
+                background: 'var(--cb-ground-page)',
+                border: isSelected ? `1.5px solid ${accent}` : '1px solid var(--cb-border-default)',
+                borderRadius: 3,
+                cursor: 'pointer',
+                fontFamily: 'var(--font-cb-serif)',
+                color: 'var(--cb-text-default)',
+                textAlign: 'left',
+                overflow: 'hidden',
+                transition: 'border-color 160ms ease, transform 160ms ease',
+                position: 'relative',
+              }}
+              onMouseEnter={(e) => {
+                if (!isSelected) {
+                  e.currentTarget.style.borderColor = 'var(--cb-border-strong)';
+                }
+              }}
+              onMouseLeave={(e) => {
+                if (!isSelected) {
+                  e.currentTarget.style.borderColor = 'var(--cb-border-default)';
+                }
+              }}
+            >
+              {/* Card head — Codex chrome */}
+              <div
+                style={{
+                  padding: '10px 14px 9px',
+                  borderBottom: '0.5px solid var(--cb-border-default)',
+                  background: 'var(--cb-surface-sunken)',
+                  display: 'flex',
+                  alignItems: 'baseline',
+                  justifyContent: 'space-between',
+                  gap: 10,
+                }}
+              >
+                <span
+                  className="cb-italic"
+                  style={{
+                    fontSize: 14.5,
+                    color: 'var(--cb-text-default)',
+                    fontVariationSettings: '"opsz" 14',
+                  }}
+                >
+                  {t.name}
+                </span>
+                <span
+                  className="cb-italic"
+                  style={{
+                    fontSize: 11.5,
+                    color: 'var(--cb-text-muted)',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    whiteSpace: 'nowrap',
+                    maxWidth: '60%',
+                  }}
+                  title={t.pitch}
+                >
+                  {firstClause(t.pitch)}
+                </span>
+              </div>
+
+              {/* Sample — themed typography on themed background */}
+              <SampleBlock theme={t} />
+
+              {/* Foot — palette swatches */}
+              <div
+                style={{
+                  display: 'flex',
+                  borderTop: '0.5px solid var(--cb-border-default)',
+                }}
+                aria-hidden
+              >
+                {t.palette.slice(0, 5).map((c, i) => (
+                  <span
+                    key={i}
+                    style={{
+                      flex: 1,
+                      height: 10,
+                      background: c,
+                      display: 'inline-block',
+                    }}
+                  />
+                ))}
+              </div>
+
+              {isSelected && (
+                <span
+                  aria-hidden
+                  style={{
+                    position: 'absolute',
+                    top: 8,
+                    right: 8,
+                    width: 8,
+                    height: 8,
+                    background: accent,
+                    borderRadius: '50%',
+                    boxShadow: '0 0 0 3px var(--cb-ground-page)',
+                  }}
+                />
+              )}
+            </button>
+          );
+        })}
+      </div>
+
+      {/* Full preview link */}
+      <div style={{ marginTop: 14 }}>
+        <button
+          type="button"
+          onClick={() => setOverlayId(selected.id)}
+          className="cb-mono cb-focus"
+          style={{
+            background: 'transparent',
+            border: 0,
+            padding: 0,
+            cursor: 'pointer',
+            fontSize: 11,
+            letterSpacing: '0.14em',
+            textTransform: 'uppercase',
+            color: 'var(--cb-text-muted)',
+          }}
+        >
+          full {selected.name} preview ↗
+        </button>
+      </div>
+
+      <ThemePreviewOverlay
+        themeId={overlayId}
+        onClose={() => setOverlayId(null)}
+        onPick={(id) => onChange(id)}
+      />
+    </div>
+  );
+}
+
+/**
+ * A tiny "real" chapter rendered in the theme's actual fonts and palette.
+ * Lives inside the theme-coloured background, no chrome leaks in.
+ */
+function SampleBlock({ theme }: { theme: ChapterTheme }) {
+  const [bg, text, accent, , surface] = theme.palette;
+  return (
+    <div
+      style={{
+        background: bg,
+        color: text,
+        padding: '16px 18px 14px',
+        minHeight: 168,
+        position: 'relative',
+        overflow: 'hidden',
+      }}
+    >
+      <div
+        style={{
+          fontFamily: theme.monoFont,
+          fontSize: 9.5,
+          letterSpacing: '0.18em',
+          textTransform: 'uppercase',
+          color: accent,
+          marginBottom: 10,
+        }}
+      >
+        {theme.sample.eyebrow}
+      </div>
+      <div
+        style={{
+          fontFamily: theme.displayFont,
+          fontSize: 22,
+          lineHeight: 1.15,
+          letterSpacing: '-0.005em',
+          color: text,
+          marginBottom: 10,
+          fontStyle: theme.id === 'studio' ? 'italic' : 'normal',
+        }}
+      >
+        {theme.sample.title}
+      </div>
+      <p
+        style={{
+          fontFamily: theme.bodyFont,
+          fontSize: 11.5,
+          lineHeight: 1.55,
+          color: text,
+          margin: 0,
+          opacity: 0.78,
+          maxWidth: '34ch',
+        }}
+      >
+        The earliest record dates to <em style={{ color: accent, fontStyle: 'italic' }}>1547</em>, when the practice
+        spread north from the Italian peninsula and reshaped the way scholars
+        catalogued the new continent's flora.
+      </p>
+      {/* Decorative accent rule */}
+      <span
+        aria-hidden
+        style={{
+          position: 'absolute',
+          bottom: 12,
+          left: 18,
+          width: 24,
+          height: 1,
+          background: accent,
+        }}
+      />
+      <span
+        aria-hidden
+        style={{
+          position: 'absolute',
+          top: 0,
+          right: 0,
+          bottom: 0,
+          width: 28,
+          background: surface,
+          opacity: 0.5,
+        }}
+      />
+    </div>
+  );
+}
+
+function firstClause(pitch: string): string {
+  const idx = pitch.indexOf('.');
+  if (idx === -1) return pitch;
+  return pitch.slice(0, idx + 1);
+}
diff --git a/src/components/codex/Input.tsx b/src/components/codex/Input.tsx
new file mode 100644
index 0000000..c0a3d53
--- /dev/null
+++ b/src/components/codex/Input.tsx
@@ -0,0 +1,164 @@
+import { useId, type CSSProperties, type InputHTMLAttributes, type ReactNode } from 'react';
+
+type Size = 'sm' | 'md' | 'lg';
+
+interface CodexInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix'> {
+  label?: string;
+  hint?: ReactNode;
+  error?: ReactNode;
+  prefix?: ReactNode;
+  suffix?: ReactNode;
+  size?: Size;
+  style?: CSSProperties;
+}
+
+const SIZE: Record<Size, { h: number; px: number; fz: number }> = {
+  sm: { h: 30, px: 10, fz: 14.5 },
+  md: { h: 38, px: 12, fz: 15 },
+  lg: { h: 44, px: 14, fz: 17 },
+};
+
+export function CodexInput({
+  label,
+  hint,
+  error,
+  prefix,
+  suffix,
+  size = 'md',
+  id,
+  required,
+  disabled,
+  style,
+  'aria-describedby': ariaDescribedBy,
+  'aria-invalid': ariaInvalid,
+  ...props
+}: CodexInputProps) {
+  const reactId = useId();
+  const inputId = id ?? reactId;
+  const hintId = `${reactId}-hint`;
+  const errorId = `${reactId}-error`;
+  const isError = Boolean(error);
+  const describedBy =
+    [ariaDescribedBy, !isError && hint ? hintId : null, isError ? errorId : null]
+      .filter(Boolean)
+      .join(' ') || undefined;
+  const sz = SIZE[size];
+
+  return (
+    <label htmlFor={inputId} style={{ display: 'block', ...style }}>
+      {label && (
+        <div
+          className="cb-sc"
+          style={{
+            fontSize: 13,
+            color: 'var(--cb-text-muted)',
+            letterSpacing: '0.12em',
+            marginBottom: 8,
+          }}
+        >
+          {label}
+          {required && <span style={{ color: 'var(--cb-accent-emphasis)' }}> *</span>}
+        </div>
+      )}
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          background: 'var(--cb-ground-canvas)',
+          border: `1px solid ${error ? 'var(--cb-status-danger)' : 'var(--cb-border-default)'}`,
+          borderRadius: 1.5,
+          height: sz.h,
+          transition: 'border-color 200ms cubic-bezier(0.32,0.04,0.32,1)',
+          opacity: disabled ? 0.55 : 1,
+        }}
+        onFocus={(e) => {
+          if (!error) (e.currentTarget as HTMLDivElement).style.borderColor = 'var(--cb-accent-link)';
+        }}
+        onBlur={(e) => {
+          if (!error) (e.currentTarget as HTMLDivElement).style.borderColor = 'var(--cb-border-default)';
+        }}
+      >
+        {prefix && (
+          <span
+            className="cb-mono"
+            style={{
+              padding: `0 0 0 ${sz.px}px`,
+              color: 'var(--cb-text-muted)',
+              fontSize: sz.fz - 1,
+              flex: '0 0 auto',
+              whiteSpace: 'nowrap',
+              letterSpacing: '0.02em',
+            }}
+          >
+            {prefix}
+          </span>
+        )}
+        <input
+          id={inputId}
+          disabled={disabled}
+          required={required}
+          {...props}
+          aria-describedby={describedBy}
+          aria-invalid={isError ? true : ariaInvalid}
+          style={{
+            border: 0,
+            outline: 'none',
+            background: 'transparent',
+            font: 'inherit',
+            fontFamily: 'var(--font-cb-serif)',
+            fontSize: sz.fz,
+            color: 'var(--cb-text-default)',
+            width: '100%',
+            height: '100%',
+            padding: `0 ${sz.px}px`,
+          }}
+        />
+        {suffix && (
+          <span
+            className="cb-mono"
+            style={{
+              padding: `0 ${sz.px}px 0 6px`,
+              color: 'var(--cb-text-muted)',
+              fontSize: sz.fz - 2,
+              flex: '0 0 auto',
+              whiteSpace: 'nowrap',
+              letterSpacing: '0.02em',
+            }}
+          >
+            {suffix}
+          </span>
+        )}
+      </div>
+      {isError ? (
+        <div
+          key="error"
+          id={errorId}
+          role="alert"
+          className="cb-italic"
+          style={{
+            fontSize: 13.5,
+            marginTop: 8,
+            lineHeight: 1.45,
+            color: 'var(--cb-status-danger)',
+          }}
+        >
+          {error}
+        </div>
+      ) : hint ? (
+        <div
+          key="hint"
+          id={hintId}
+          className="cb-italic"
+          style={{
+            fontSize: 13.5,
+            marginTop: 8,
+            lineHeight: 1.45,
+            color: 'var(--cb-text-muted)',
+          }}
+        >
+          {hint}
+        </div>
+      ) : null}
+    </label>
+  );
+}
diff --git a/src/components/codex/Modal.tsx b/src/components/codex/Modal.tsx
new file mode 100644
index 0000000..a257a6b
--- /dev/null
+++ b/src/components/codex/Modal.tsx
@@ -0,0 +1,170 @@
+import { useEffect, useRef, type ReactNode } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+
+interface CodexModalProps {
+  open: boolean;
+  onClose: () => void;
+  /** Small-caps overline (e.g. "confirm", "settings"). */
+  kicker?: string;
+  /** Display heading. */
+  title: ReactNode;
+  /** Italic subhead under the title. */
+  sub?: ReactNode;
+  /** Footer slot — typically a CodexButton row. Right-aligned. */
+  actions?: ReactNode;
+  /** Body content. */
+  children: ReactNode;
+  /** Max-width of the modal in px. Default 480. */
+  width?: number;
+}
+
+/**
+ * Codex modal. Flat 42% dim — no backdrop-blur. Square-ish radius. Sheet
+ * shadow. Escape closes. Overlay click closes. Focus moves into the modal
+ * on open.
+ */
+export function CodexModal({
+  open,
+  onClose,
+  kicker,
+  title,
+  sub,
+  actions,
+  children,
+  width = 480,
+}: CodexModalProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  // Callers usually pass an inline arrow for onClose, so its identity changes
+  // on every parent render. Keep it in a ref so the open/focus effect below
+  // runs once per open — not on every keystroke, which would re-focus the
+  // dialog and steal focus from whichever input the user is typing in.
+  const onCloseRef = useRef(onClose);
+  useEffect(() => {
+    onCloseRef.current = onClose;
+  });
+
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onCloseRef.current();
+    };
+    window.addEventListener('keydown', onKey);
+    // Move focus into the modal so the screen reader and keyboard land here.
+    ref.current?.focus();
+    // Lock body scroll while modal is open.
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+    return () => {
+      window.removeEventListener('keydown', onKey);
+      document.body.style.overflow = prev;
+    };
+  }, [open]);
+
+  return (
+    <AnimatePresence>
+      {open && (
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          transition={{ duration: 0.12 }}
+          style={{
+            position: 'fixed',
+            inset: 0,
+            zIndex: 100,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            background: 'rgba(26,24,20,0.42)',
+            padding: 16,
+          }}
+          onClick={onClose}
+          role="presentation"
+        >
+          <motion.div
+            ref={ref}
+            tabIndex={-1}
+            role="dialog"
+            aria-modal="true"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={{ duration: 0.16 }}
+            style={{
+              background: 'var(--cb-surface-raised)',
+              border: '1px solid var(--cb-border-default)',
+              borderRadius: 3,
+              padding: '28px 32px',
+              // Never wider than the viewport (phones) — the configured
+              // width only applies when there's room for it.
+              maxWidth: `min(${width}px, calc(100vw - 28px))`,
+              width: '100%',
+              maxHeight: 'calc(100vh - 32px)',
+              overflowY: 'auto',
+              boxShadow: 'var(--cb-shadow-modal)',
+              fontFamily: 'var(--font-cb-serif)',
+              color: 'var(--cb-text-default)',
+              outline: 'none',
+            }}
+            onClick={(e) => e.stopPropagation()}
+          >
+            {kicker && (
+              <div
+                className="cb-sc"
+                style={{
+                  fontSize: 13,
+                  letterSpacing: '0.16em',
+                  color: 'var(--cb-accent-emphasis)',
+                  marginBottom: 6,
+                }}
+              >
+                {kicker}
+              </div>
+            )}
+            <h3
+              style={{
+                margin: '0 0 10px',
+                fontSize: 24,
+                fontWeight: 500,
+                fontVariationSettings: '"opsz" 20',
+                letterSpacing: '-0.005em',
+                color: 'var(--cb-text-default)',
+                lineHeight: 1.2,
+              }}
+            >
+              {title}
+            </h3>
+            {sub && (
+              <p
+                style={{
+                  margin: '0 0 18px',
+                  fontSize: 15,
+                  lineHeight: 1.55,
+                  color: 'var(--cb-text-muted)',
+                  fontStyle: 'italic',
+                }}
+              >
+                {sub}
+              </p>
+            )}
+            <div>{children}</div>
+            {actions && (
+              <div
+                style={{
+                  display: 'flex',
+                  justifyContent: 'flex-end',
+                  gap: 10,
+                  marginTop: 22,
+                  paddingTop: 18,
+                  borderTop: '0.5px solid var(--cb-border-default)',
+                }}
+              >
+                {actions}
+              </div>
+            )}
+          </motion.div>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+}
diff --git a/src/components/codex/Radio.tsx b/src/components/codex/Radio.tsx
new file mode 100644
index 0000000..07f8753
--- /dev/null
+++ b/src/components/codex/Radio.tsx
@@ -0,0 +1,93 @@
+import type { ChangeEvent, ReactNode } from 'react';
+
+interface CodexRadioProps {
+  name: string;
+  value: string;
+  checked: boolean;
+  onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+  label: ReactNode;
+  sub?: ReactNode;
+  disabled?: boolean;
+}
+
+export function CodexRadio({
+  name,
+  value,
+  checked,
+  onChange,
+  label,
+  sub,
+  disabled,
+}: CodexRadioProps) {
+  return (
+    <label
+      style={{
+        display: 'flex',
+        gap: 12,
+        alignItems: 'flex-start',
+        cursor: disabled ? 'default' : 'pointer',
+        opacity: disabled ? 0.5 : 1,
+        position: 'relative',
+      }}
+    >
+      {/* Hidden native input first so the focus ring can reach the drawn dot
+          via an adjacent-sibling selector. It is absolutely positioned
+          (inset: 0), so it takes no part in the flex layout. */}
+      <input
+        type="radio"
+        name={name}
+        value={value}
+        checked={checked}
+        onChange={onChange}
+        disabled={disabled}
+        className="cb-focus cb-radio-native"
+        style={{ position: 'absolute', opacity: 0, pointerEvents: 'none', inset: 0 }}
+      />
+      <span
+        aria-hidden
+        className="cb-radio-box"
+        style={{
+          flex: '0 0 auto',
+          width: 18,
+          height: 18,
+          marginTop: 2,
+          border: `1px solid ${checked ? 'var(--cb-accent-emphasis)' : 'var(--cb-border-strong)'}`,
+          borderRadius: 999,
+          background: 'var(--cb-ground-canvas)',
+          display: 'inline-flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          transition: 'border-color 200ms',
+        }}
+      >
+        {checked && (
+          <span
+            style={{
+              display: 'block',
+              width: 9,
+              height: 9,
+              borderRadius: 999,
+              background: 'var(--cb-accent-emphasis)',
+            }}
+          />
+        )}
+      </span>
+      <div>
+        <div style={{ fontSize: 15, color: 'var(--cb-text-default)', lineHeight: 1.45 }}>{label}</div>
+        {sub && (
+          <div className="cb-italic" style={{ fontSize: 13.5, color: 'var(--cb-text-muted)', marginTop: 2 }}>
+            {sub}
+          </div>
+        )}
+      </div>
+      {/* The native input is opacity: 0, which also hides its own focus
+          outline — mirror the keyboard focus ring onto the drawn dot. */}
+      <style>{`
+        .cb-radio-native:focus-visible + .cb-radio-box {
+          outline: 2px solid var(--cb-focus-ring);
+          outline-offset: 2px;
+        }
+      `}</style>
+    </label>
+  );
+}
diff --git a/src/components/codex/SectionMarker.tsx b/src/components/codex/SectionMarker.tsx
new file mode 100644
index 0000000..b22703e
--- /dev/null
+++ b/src/components/codex/SectionMarker.tsx
@@ -0,0 +1,47 @@
+import type { ReactNode } from 'react';
+
+interface SectionMarkerProps {
+  /** Small-caps label. */
+  label: string;
+  /** Optional italic subhead to the right of the label. */
+  sub?: ReactNode;
+}
+
+/**
+ * Label-only form-group overline. Renders the label in small-caps muted ink
+ * with a hairline rule beneath. The rule is the section break — no § symbol.
+ */
+export function SectionMarker({ label, sub }: SectionMarkerProps) {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        alignItems: 'baseline',
+        gap: 12,
+        paddingBottom: 10,
+        marginBottom: 18,
+        borderBottom: '0.5px solid var(--cb-border-rule)',
+      }}
+    >
+      <span
+        className="cb-sc"
+        style={{
+          fontSize: 13.5,
+          color: 'var(--cb-text-muted)',
+          letterSpacing: '0.14em',
+        }}
+      >
+        {label}
+      </span>
+      {sub && (
+        <span
+          className="cb-italic"
+          style={{ fontSize: 14.5, color: 'var(--cb-text-muted)' }}
+        >
+          {sub}
+        </span>
+      )}
+      <span style={{ flex: 1 }} />
+    </div>
+  );
+}
diff --git a/src/components/codex/Select.tsx b/src/components/codex/Select.tsx
new file mode 100644
index 0000000..5b91041
--- /dev/null
+++ b/src/components/codex/Select.tsx
@@ -0,0 +1,114 @@
+import { useId, type CSSProperties, type ReactNode, type SelectHTMLAttributes } from 'react';
+
+export interface CodexSelectOption {
+  value: string;
+  label: string;
+}
+
+interface CodexSelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'style'> {
+  label?: string;
+  hint?: ReactNode;
+  options: CodexSelectOption[];
+  style?: CSSProperties;
+}
+
+export function CodexSelect({
+  label,
+  hint,
+  options,
+  id,
+  style,
+  'aria-describedby': ariaDescribedBy,
+  ...props
+}: CodexSelectProps) {
+  const reactId = useId();
+  const selectId = id ?? reactId;
+  const hintId = `${reactId}-hint`;
+  const describedBy =
+    [ariaDescribedBy, hint ? hintId : null].filter(Boolean).join(' ') || undefined;
+
+  return (
+    <label htmlFor={selectId} style={{ display: 'block', ...style }}>
+      {label && (
+        <div
+          className="cb-sc"
+          style={{
+            fontSize: 13,
+            color: 'var(--cb-text-muted)',
+            letterSpacing: '0.12em',
+            marginBottom: 8,
+          }}
+        >
+          {label}
+        </div>
+      )}
+      <div
+        style={{
+          position: 'relative',
+          background: 'var(--cb-ground-canvas)',
+          border: '1px solid var(--cb-border-default)',
+          borderRadius: 1.5,
+          height: 38,
+        }}
+      >
+        <select
+          id={selectId}
+          {...props}
+          aria-describedby={describedBy}
+          style={{
+            appearance: 'none',
+            WebkitAppearance: 'none',
+            MozAppearance: 'none',
+            background: 'transparent',
+            border: 0,
+            outline: 'none',
+            width: '100%',
+            height: '100%',
+            padding: '0 36px 0 12px',
+            font: 'inherit',
+            fontFamily: 'var(--font-cb-serif)',
+            fontSize: 15,
+            color: 'var(--cb-text-default)',
+            cursor: 'pointer',
+          }}
+        >
+          {options.map((o) => (
+            <option key={o.value} value={o.value}>
+              {o.label}
+            </option>
+          ))}
+        </select>
+        <span
+          aria-hidden
+          style={{
+            position: 'absolute',
+            right: 12,
+            top: '50%',
+            transform: 'translateY(-50%)',
+            color: 'var(--cb-text-muted)',
+            fontSize: 13,
+            fontFamily: 'serif',
+            pointerEvents: 'none',
+            fontStyle: 'italic',
+          }}
+        >
+          ▾
+        </span>
+      </div>
+      {hint && (
+        <div
+          id={hintId}
+          className="cb-italic"
+          style={{
+            fontSize: 13.5,
+            marginTop: 8,
+            color: 'var(--cb-text-muted)',
+            lineHeight: 1.45,
+          }}
+        >
+          {hint}
+        </div>
+      )}
+    </label>
+  );
+}
diff --git a/src/components/codex/Slider.tsx b/src/components/codex/Slider.tsx
new file mode 100644
index 0000000..182af26
--- /dev/null
+++ b/src/components/codex/Slider.tsx
@@ -0,0 +1,156 @@
+import { useId, type ChangeEvent, type CSSProperties } from 'react';
+
+interface CodexSliderProps {
+  label?: string;
+  value: number;
+  min?: number;
+  max?: number;
+  step?: number;
+  onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+  showTicks?: boolean;
+  suffix?: string;
+}
+
+export function CodexSlider({
+  label,
+  value,
+  min = 1,
+  max = 24,
+  step = 1,
+  onChange,
+  showTicks = true,
+  suffix,
+}: CodexSliderProps) {
+  const sliderId = useId();
+  const pct = ((value - min) / (max - min)) * 100;
+  const ticks = max - min + 1;
+
+  const sliderStyle = {
+    '--cb-slider-pct': `${pct}%`,
+  } as CSSProperties;
+
+  return (
+    <div>
+      {label && (
+        <div
+          style={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'baseline',
+            marginBottom: 10,
+          }}
+        >
+          <label
+            htmlFor={sliderId}
+            className="cb-sc"
+            style={{
+              fontSize: 13,
+              color: 'var(--cb-text-muted)',
+              letterSpacing: '0.12em',
+            }}
+          >
+            {label}
+          </label>
+          <span
+            className="cb-mono"
+            style={{ fontSize: 15, color: 'var(--cb-text-default)', fontWeight: 500 }}
+          >
+            {value}
+            {suffix ? ` ${suffix}` : ''}
+          </span>
+        </div>
+      )}
+      <div style={{ position: 'relative', height: 24 }}>
+        {/* Ticks — centered vertically on the track */}
+        {showTicks && (
+          <div
+            aria-hidden
+            style={{
+              position: 'absolute',
+              left: 0,
+              right: 0,
+              top: '50%',
+              transform: 'translateY(-50%)',
+              display: 'flex',
+              justifyContent: 'space-between',
+              pointerEvents: 'none',
+            }}
+          >
+            {Array.from({ length: ticks }).map((_, i) => (
+              <span
+                key={i}
+                style={{
+                  width: 1,
+                  height: 7,
+                  background: 'var(--cb-border-strong)',
+                }}
+              />
+            ))}
+          </div>
+        )}
+        <input
+          id={sliderId}
+          type="range"
+          min={min}
+          max={max}
+          step={step}
+          value={value}
+          onChange={onChange}
+          aria-valuetext={suffix ? `${value} ${suffix}` : undefined}
+          className="cb-slider cb-focus"
+          style={{
+            ...sliderStyle,
+            position: 'absolute',
+            inset: 0,
+            zIndex: 1,
+            width: '100%',
+            height: '100%',
+            appearance: 'none',
+            WebkitAppearance: 'none',
+            background: 'transparent',
+            margin: 0,
+            padding: 0,
+          }}
+        />
+        <style>{`
+          .cb-slider::-webkit-slider-runnable-track {
+            height: 1px;
+            border: 0;
+            background: linear-gradient(
+              to right,
+              var(--cb-accent-emphasis) 0,
+              var(--cb-accent-emphasis) var(--cb-slider-pct, 0%),
+              var(--cb-border-strong) var(--cb-slider-pct, 0%),
+              var(--cb-border-strong) 100%
+            );
+          }
+          .cb-slider::-moz-range-track {
+            height: 1px;
+            border: 0;
+            background: var(--cb-border-strong);
+          }
+          .cb-slider::-moz-range-progress {
+            height: 1px;
+            background: var(--cb-accent-emphasis);
+          }
+          .cb-slider::-webkit-slider-thumb {
+            -webkit-appearance: none; appearance: none;
+            width: 16px; height: 16px; border-radius: 999px;
+            background: var(--cb-accent-emphasis);
+            border: 2px solid var(--cb-ground-canvas);
+            cursor: pointer;
+            box-shadow: 0 0 0 1px var(--cb-accent-emphasis);
+            margin-top: -8px;
+          }
+          .cb-slider::-moz-range-thumb {
+            width: 16px; height: 16px; border-radius: 999px;
+            background: var(--cb-accent-emphasis);
+            border: 2px solid var(--cb-ground-canvas);
+            cursor: pointer;
+            box-shadow: 0 0 0 1px var(--cb-accent-emphasis);
+          }
+        `}</style>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/codex/Textarea.tsx b/src/components/codex/Textarea.tsx
new file mode 100644
index 0000000..6c2c7f1
--- /dev/null
+++ b/src/components/codex/Textarea.tsx
@@ -0,0 +1,109 @@
+import { useId, type CSSProperties, type ReactNode, type TextareaHTMLAttributes } from 'react';
+
+interface CodexTextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'style' | 'size'> {
+  label?: string;
+  hint?: ReactNode;
+  error?: ReactNode;
+  /** 'md' (default body, 15px) or 'lg' (body-lg, 20px — for marquee inputs). */
+  size?: 'md' | 'lg';
+  style?: CSSProperties;
+}
+
+export function CodexTextarea({
+  label,
+  hint,
+  error,
+  id,
+  rows = 4,
+  size = 'md',
+  style,
+  'aria-describedby': ariaDescribedBy,
+  'aria-invalid': ariaInvalid,
+  ...props
+}: CodexTextareaProps) {
+  const reactId = useId();
+  const textareaId = id ?? reactId;
+  const hintId = `${reactId}-hint`;
+  const errorId = `${reactId}-error`;
+  const isError = Boolean(error);
+  const describedBy =
+    [ariaDescribedBy, !isError && hint ? hintId : null, isError ? errorId : null]
+      .filter(Boolean)
+      .join(' ') || undefined;
+
+  return (
+    <label htmlFor={textareaId} style={{ display: 'block', ...style }}>
+      {label && (
+        <div
+          className="cb-sc"
+          style={{
+            fontSize: 13,
+            color: 'var(--cb-text-muted)',
+            letterSpacing: '0.12em',
+            marginBottom: 8,
+          }}
+        >
+          {label}
+        </div>
+      )}
+      <textarea
+        id={textareaId}
+        rows={rows}
+        {...props}
+        aria-describedby={describedBy}
+        aria-invalid={isError ? true : ariaInvalid}
+        style={{
+          width: '100%',
+          padding: '10px 12px',
+          background: 'var(--cb-ground-canvas)',
+          border: `1px solid ${error ? 'var(--cb-status-danger)' : 'var(--cb-border-default)'}`,
+          borderRadius: 1.5,
+          color: 'var(--cb-text-default)',
+          font: 'inherit',
+          fontFamily: 'var(--font-cb-serif)',
+          fontSize: size === 'lg' ? 20 : 15,
+          lineHeight: 1.55,
+          resize: 'vertical',
+          outline: 'none',
+          transition: 'border-color 200ms cubic-bezier(0.32,0.04,0.32,1)',
+        }}
+        onFocus={(e) => {
+          if (!error) e.currentTarget.style.borderColor = 'var(--cb-accent-link)';
+        }}
+        onBlur={(e) => {
+          if (!error) e.currentTarget.style.borderColor = 'var(--cb-border-default)';
+        }}
+      />
+      {isError ? (
+        <div
+          key="error"
+          id={errorId}
+          role="alert"
+          className="cb-italic"
+          style={{
+            fontSize: 13.5,
+            marginTop: 8,
+            color: 'var(--cb-status-danger)',
+            lineHeight: 1.45,
+          }}
+        >
+          {error}
+        </div>
+      ) : hint ? (
+        <div
+          key="hint"
+          id={hintId}
+          className="cb-italic"
+          style={{
+            fontSize: 13.5,
+            marginTop: 8,
+            color: 'var(--cb-text-muted)',
+            lineHeight: 1.45,
+          }}
+        >
+          {hint}
+        </div>
+      ) : null}
+    </label>
+  );
+}
diff --git a/src/components/codex/VoicePicker.tsx b/src/components/codex/VoicePicker.tsx
new file mode 100644
index 0000000..0a7d374
--- /dev/null
+++ b/src/components/codex/VoicePicker.tsx
@@ -0,0 +1,248 @@
+import { useEffect, useRef, useState } from 'react';
+import { VOICE_OPTIONS, DEFAULT_VOICE_ID, type VoiceOption } from '../../themes';
+import { useApiStore } from '../../store/apiStore';
+
+interface VoicePickerProps {
+  value: string | undefined;
+  onChange: (voiceId: string) => void;
+}
+
+/**
+ * 8-tile voice picker with a preview player. Every voice in VOICE_OPTIONS is
+ * an ElevenLabs premade voice — automatically available in every user's
+ * library, no manual add step required. The picker tries the static CDN URL
+ * first; if it has rotated, it falls back to `/v1/voices/{voice_id}` using
+ * the user's API key to resolve the canonical preview, then caches.
+ */
+export function VoicePicker({ value, onChange }: VoicePickerProps) {
+  const selectedId = value ?? DEFAULT_VOICE_ID;
+  const { elevenLabsApiKey } = useApiStore();
+  const [previewingId, setPreviewingId] = useState<string | null>(null);
+  const [resolvedUrls, setResolvedUrls] = useState<Record<string, string>>({});
+  const [resolvingId, setResolvingId] = useState<string | null>(null);
+  const audioRef = useRef<HTMLAudioElement | null>(null);
+
+  useEffect(
+    () => () => {
+      const a = audioRef.current;
+      if (a) {
+        a.pause();
+        a.src = '';
+      }
+    },
+    [],
+  );
+
+  async function fetchCanonicalPreviewUrl(
+    voiceId: string,
+  ): Promise<string | null> {
+    if (!elevenLabsApiKey?.trim()) return null;
+    try {
+      const res = await fetch(
+        `https://api.elevenlabs.io/v1/voices/${encodeURIComponent(voiceId)}`,
+        { headers: { 'xi-api-key': elevenLabsApiKey.trim() } },
+      );
+      if (!res.ok) return null;
+      const data = (await res.json()) as { preview_url?: string };
+      return data.preview_url ?? null;
+    } catch {
+      return null;
+    }
+  }
+
+  async function playUrl(voiceId: string, url: string): Promise<boolean> {
+    const audio = audioRef.current ?? new Audio();
+    audioRef.current = audio;
+    return new Promise((resolve) => {
+      let settled = false;
+      const onPlaying = () => {
+        if (settled) return;
+        settled = true;
+        audio.removeEventListener('playing', onPlaying);
+        audio.removeEventListener('error', onError);
+        resolve(true);
+      };
+      const onError = () => {
+        if (settled) return;
+        settled = true;
+        audio.removeEventListener('playing', onPlaying);
+        audio.removeEventListener('error', onError);
+        resolve(false);
+      };
+      audio.addEventListener('playing', onPlaying);
+      audio.addEventListener('error', onError);
+      audio.onended = () => setPreviewingId((id) => (id === voiceId ? null : id));
+      audio.src = url;
+      void audio.play().catch(() => onError());
+    });
+  }
+
+  async function togglePreview(voice: VoiceOption) {
+    const isCurrent = previewingId === voice.id;
+    if (audioRef.current) {
+      audioRef.current.pause();
+      audioRef.current.currentTime = 0;
+    }
+    if (isCurrent) {
+      setPreviewingId(null);
+      return;
+    }
+    setPreviewingId(voice.id);
+
+    // Try cached resolved URL, then static URL.
+    const candidates = [resolvedUrls[voice.id], voice.previewUrl].filter(
+      (u): u is string => !!u,
+    );
+    for (const url of candidates) {
+      const ok = await playUrl(voice.id, url);
+      if (ok) return;
+    }
+
+    // Fall back to the ElevenLabs API resolver.
+    setResolvingId(voice.id);
+    const canonical = await fetchCanonicalPreviewUrl(voice.id);
+    setResolvingId((id) => (id === voice.id ? null : id));
+    if (!canonical) {
+      setPreviewingId(null);
+      return;
+    }
+    setResolvedUrls((prev) => ({ ...prev, [voice.id]: canonical }));
+    const ok = await playUrl(voice.id, canonical);
+    if (!ok) setPreviewingId(null);
+  }
+
+  return (
+    <div>
+      <div
+        className="cb-sc"
+        style={{
+          fontSize: 12.5,
+          color: 'var(--cb-text-muted)',
+          letterSpacing: '0.14em',
+          marginBottom: 6,
+        }}
+      >
+        Narrator
+      </div>
+      <p
+        className="cb-italic"
+        style={{
+          margin: '0 0 10px',
+          fontSize: 13,
+          lineHeight: 1.45,
+          color: 'var(--cb-text-muted)',
+        }}
+      >
+        Used for chapter audiobooks when an ElevenLabs key is set. Tap{' '}
+        <span style={{ fontFamily: 'var(--font-cb-mono)' }}>▷</span> to hear a sample.
+      </p>
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateColumns: 'repeat(2, 1fr)',
+          gap: 6,
+        }}
+      >
+        {VOICE_OPTIONS.map((voice) => {
+          const isSelected = voice.id === selectedId;
+          const isPreviewing = previewingId === voice.id;
+          const isResolving = resolvingId === voice.id;
+          return (
+            <div
+              key={voice.id}
+              role="button"
+              tabIndex={0}
+              onClick={() => onChange(voice.id)}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                  e.preventDefault();
+                  onChange(voice.id);
+                }
+              }}
+              className="cb-focus"
+              style={{
+                display: 'grid',
+                gridTemplateColumns: '1fr auto',
+                alignItems: 'baseline',
+                gap: 10,
+                padding: '10px 12px',
+                background: 'var(--cb-ground-page)',
+                border: isSelected
+                  ? '1.5px solid var(--cb-accent-emphasis)'
+                  : '1px solid var(--cb-border-default)',
+                borderRadius: 2,
+                cursor: 'pointer',
+                fontFamily: 'var(--font-cb-serif)',
+                transition: 'border-color 160ms ease',
+              }}
+              aria-pressed={isSelected}
+              aria-label={`Pick ${voice.label}`}
+            >
+              <div style={{ minWidth: 0 }}>
+                <div
+                  className="cb-italic"
+                  style={{
+                    fontSize: 15,
+                    fontVariationSettings: '"opsz" 14',
+                    color: 'var(--cb-text-default)',
+                  }}
+                >
+                  {voice.label}
+                </div>
+                <div
+                  className="cb-italic"
+                  style={{
+                    fontSize: 11.5,
+                    lineHeight: 1.4,
+                    color: 'var(--cb-text-muted)',
+                    marginTop: 2,
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    display: '-webkit-box',
+                    WebkitLineClamp: 2,
+                    WebkitBoxOrient: 'vertical',
+                  }}
+                  title={voice.desc}
+                >
+                  {voice.desc}
+                </div>
+              </div>
+              <button
+                type="button"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  void togglePreview(voice);
+                }}
+                className="cb-focus"
+                aria-label={
+                  isPreviewing
+                    ? `Pause ${voice.label} preview`
+                    : `Play ${voice.label} preview`
+                }
+                style={{
+                  width: 28,
+                  height: 28,
+                  borderRadius: 999,
+                  border: '1px solid var(--cb-border-strong)',
+                  background: isPreviewing
+                    ? 'var(--cb-accent-emphasis)'
+                    : 'transparent',
+                  color: isPreviewing ? '#fff' : 'var(--cb-text-muted)',
+                  cursor: 'pointer',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  fontSize: 12,
+                  lineHeight: 1,
+                  padding: 0,
+                }}
+              >
+                {isResolving ? '⋯' : isPreviewing ? '■' : '▷'}
+              </button>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/codex/index.ts b/src/components/codex/index.ts
new file mode 100644
index 0000000..9e64687
--- /dev/null
+++ b/src/components/codex/index.ts
@@ -0,0 +1,16 @@
+export { CodexButton } from './Button';
+export { CodexInput } from './Input';
+export { CodexTextarea } from './Textarea';
+export { CodexSelect } from './Select';
+export type { CodexSelectOption } from './Select';
+export { CodexCheckbox } from './Checkbox';
+export { CodexRadio } from './Radio';
+export { CodexSlider } from './Slider';
+export { CodexBadge } from './Badge';
+export type { CodexBadgeTone } from './Badge';
+export { SectionMarker } from './SectionMarker';
+export { ChoicePill } from './ChoicePill';
+export { CodexModal } from './Modal';
+export { Colophon } from './Colophon';
+export { CourseStylePicker } from './CourseStylePicker';
+export { VoicePicker } from './VoicePicker';
diff --git a/src/components/export/ThemePicker.tsx b/src/components/export/ThemePicker.tsx
new file mode 100644
index 0000000..fa7b332
--- /dev/null
+++ b/src/components/export/ThemePicker.tsx
@@ -0,0 +1,268 @@
+import { useMemo, useState } from 'react';
+import {
+  CHAPTER_THEMES,
+  type ChapterThemeId,
+  wrapChapterHtml,
+} from '../../themes';
+import { buildPreviewHeaderFragment } from './themePreviewSample';
+import { ThemePreviewOverlay } from './ThemePreviewOverlay';
+
+interface ThemePickerProps {
+  selectedId: ChapterThemeId;
+  onSelect: (id: ChapterThemeId) => void;
+}
+
+export function ThemePicker({ selectedId, onSelect }: ThemePickerProps) {
+  const [overlayId, setOverlayId] = useState<ChapterThemeId | null>(null);
+
+  // Build mini-preview HTML once per theme — they don't change.
+  const cardHtml = useMemo(
+    () =>
+      Object.fromEntries(
+        CHAPTER_THEMES.map((t) => [
+          t.id,
+          wrapChapterHtml(
+            buildPreviewHeaderFragment(t.sample.eyebrow, t.sample.title),
+            t.id,
+            t.sample.title,
+          ),
+        ]),
+      ) as Record<ChapterThemeId, string>,
+    [],
+  );
+
+  return (
+    <section
+      style={{
+        marginBottom: 32,
+        padding: '24px 28px',
+        background: 'var(--cb-ground-canvas)',
+        border: '0.5px solid var(--cb-border-default)',
+        borderRadius: 3,
+        fontFamily: 'var(--font-cb-serif)',
+        color: 'var(--cb-text-default)',
+      }}
+    >
+      <div style={{ marginBottom: 18 }}>
+        <div
+          className="cb-sc"
+          style={{
+            fontSize: 12,
+            letterSpacing: '0.16em',
+            color: 'var(--cb-accent-emphasis)',
+          }}
+        >
+          Course theme
+        </div>
+        <h2
+          style={{
+            margin: '4px 0 6px',
+            fontSize: 24,
+            fontWeight: 500,
+            letterSpacing: '-0.005em',
+            fontVariationSettings: '"opsz" 22',
+          }}
+        >
+          Choose how the readings <em>look</em>.
+        </h2>
+        <p
+          className="cb-italic"
+          style={{
+            margin: 0,
+            fontSize: 13.5,
+            color: 'var(--cb-text-muted)',
+            lineHeight: 1.45,
+          }}
+        >
+          Set in Setup; change here if you want to try another.
+        </p>
+      </div>
+
+      <div
+        className="cb-theme-grid"
+        style={{
+          display: 'grid',
+          // Six themes, two symmetric rows of three. Forced — auto-fit would
+          // pack 4 onto row 1 at the page's typical width and leave the
+          // final two stranded on row 2. (Phones drop to 2×3 via .cb-theme-grid.)
+          gridTemplateColumns: 'repeat(3, minmax(0, 1fr))',
+          gap: 14,
+        }}
+      >
+        {CHAPTER_THEMES.map((t) => {
+          const isSelected = t.id === selectedId;
+          const accent = t.palette[2];
+          return (
+            <article
+              key={t.id}
+              style={{
+                background: 'var(--cb-ground-page)',
+                border: isSelected ? `1.5px solid ${accent}` : '0.5px solid var(--cb-border-default)',
+                borderRadius: 3,
+                overflow: 'hidden',
+                cursor: 'pointer',
+                transition: 'border-color 200ms ease, transform 200ms ease',
+                position: 'relative',
+              }}
+              onClick={() => onSelect(t.id)}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                  e.preventDefault();
+                  onSelect(t.id);
+                }
+              }}
+              tabIndex={0}
+              role="button"
+              aria-pressed={isSelected}
+              aria-label={`Select ${t.name} theme`}
+            >
+              {/* Mini-preview iframe — 16:9 reads more like a slide thumb than
+                  a chapter book; matches the content density better than 4:3. */}
+              <div
+                style={{
+                  position: 'relative',
+                  width: '100%',
+                  aspectRatio: '16 / 9',
+                  overflow: 'hidden',
+                  background: t.palette[0],
+                  pointerEvents: 'none',
+                }}
+              >
+                <iframe
+                  srcDoc={cardHtml[t.id]}
+                  title={`${t.name} preview`}
+                  sandbox="allow-same-origin"
+                  scrolling="no"
+                  style={{
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    width: '250%',
+                    height: '250%',
+                    border: 0,
+                    transformOrigin: 'top left',
+                    transform: 'scale(0.4)',
+                  }}
+                />
+              </div>
+
+              {/* Card foot */}
+              <div
+                style={{
+                  padding: '9px 11px 10px',
+                  borderTop: '0.5px solid var(--cb-border-default)',
+                  background: 'var(--cb-ground-canvas)',
+                }}
+              >
+                <div
+                  style={{
+                    display: 'flex',
+                    alignItems: 'baseline',
+                    justifyContent: 'space-between',
+                    marginBottom: 3,
+                    gap: 6,
+                    flexWrap: 'wrap',
+                  }}
+                >
+                  <span
+                    style={{
+                      fontSize: 14,
+                      fontWeight: 500,
+                      color: 'var(--cb-text-default)',
+                      fontVariationSettings: '"opsz" 13',
+                    }}
+                  >
+                    {t.name}
+                  </span>
+                  <button
+                    type="button"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      setOverlayId(t.id);
+                    }}
+                    className="cb-mono cb-focus"
+                    style={{
+                      background: 'transparent',
+                      border: 0,
+                      padding: 0,
+                      cursor: 'pointer',
+                      fontSize: 9.5,
+                      letterSpacing: '0.12em',
+                      textTransform: 'uppercase',
+                      color: 'var(--cb-text-muted)',
+                      whiteSpace: 'nowrap',
+                      flexShrink: 0,
+                    }}
+                    aria-label={`Preview full chapter in ${t.name}`}
+                  >
+                    preview ↗
+                  </button>
+                </div>
+                <p
+                  className="cb-italic"
+                  style={{
+                    margin: '0 0 7px',
+                    fontSize: 11.5,
+                    lineHeight: 1.35,
+                    color: 'var(--cb-text-muted)',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    display: '-webkit-box',
+                    WebkitLineClamp: 1,
+                    WebkitBoxOrient: 'vertical',
+                  }}
+                  title={t.pitch}
+                >
+                  {t.pitch}
+                </p>
+                <div style={{ display: 'flex', gap: 3 }}>
+                  {t.palette.map((c, i) => (
+                    <span
+                      key={i}
+                      title={c}
+                      style={{
+                        width: 10,
+                        height: 10,
+                        background: c,
+                        border: '0.5px solid rgba(0,0,0,0.18)',
+                        borderRadius: 2,
+                        display: 'inline-block',
+                      }}
+                    />
+                  ))}
+                </div>
+              </div>
+
+              {isSelected && (
+                <span
+                  className="cb-mono"
+                  style={{
+                    position: 'absolute',
+                    top: 6,
+                    right: 6,
+                    background: accent,
+                    color: '#fff',
+                    fontSize: 8.5,
+                    letterSpacing: '0.14em',
+                    textTransform: 'uppercase',
+                    padding: '2px 6px',
+                    borderRadius: 2,
+                    zIndex: 1,
+                  }}
+                >
+                  selected
+                </span>
+              )}
+            </article>
+          );
+        })}
+      </div>
+
+      <ThemePreviewOverlay
+        themeId={overlayId}
+        onClose={() => setOverlayId(null)}
+        onPick={onSelect}
+      />
+    </section>
+  );
+}
diff --git a/src/components/export/ThemePreviewOverlay.tsx b/src/components/export/ThemePreviewOverlay.tsx
new file mode 100644
index 0000000..fb85c24
--- /dev/null
+++ b/src/components/export/ThemePreviewOverlay.tsx
@@ -0,0 +1,156 @@
+import { useEffect, useMemo } from 'react';
+import {
+  CHAPTER_THEMES,
+  type ChapterThemeId,
+  wrapChapterHtml,
+} from '../../themes';
+import { PREVIEW_CHAPTER_FRAGMENT } from './themePreviewSample';
+
+interface ThemePreviewOverlayProps {
+  /** Which theme to render the sample chapter in. Mount the overlay only
+   *  when this is set; pass `null` to keep it unmounted. */
+  themeId: ChapterThemeId | null;
+  /** Close the overlay (Esc, outside-click, or the close button). */
+  onClose: () => void;
+  /** Persist the currently-previewed theme as the picked theme. */
+  onPick: (id: ChapterThemeId) => void;
+}
+
+/**
+ * Shared full-bleed preview overlay. Used by both the Export picker
+ * (3×2 card grid) and the Setup picker (compact 6-tile row) — single source
+ * of truth for what a chapter looks like in each theme.
+ */
+export function ThemePreviewOverlay({
+  themeId,
+  onClose,
+  onPick,
+}: ThemePreviewOverlayProps) {
+  const previewHtml = useMemo(() => {
+    if (!themeId) return '';
+    return wrapChapterHtml(PREVIEW_CHAPTER_FRAGMENT, themeId, 'Preview');
+  }, [themeId]);
+
+  useEffect(() => {
+    if (!themeId) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose();
+    };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [themeId, onClose]);
+
+  if (!themeId) return null;
+  const theme = CHAPTER_THEMES.find((t) => t.id === themeId);
+
+  return (
+    <div
+      role="dialog"
+      aria-modal="true"
+      onClick={onClose}
+      style={{
+        position: 'fixed',
+        inset: 0,
+        background: 'rgba(20, 17, 13, 0.78)',
+        display: 'flex',
+        alignItems: 'stretch',
+        justifyContent: 'center',
+        padding: 24,
+        zIndex: 200,
+        backdropFilter: 'blur(4px)',
+      }}
+    >
+      <div
+        onClick={(e) => e.stopPropagation()}
+        style={{
+          position: 'relative',
+          width: '100%',
+          maxWidth: 1100,
+          display: 'flex',
+          flexDirection: 'column',
+          background: 'var(--cb-ground-page)',
+          boxShadow: 'var(--cb-shadow-modal)',
+          borderRadius: 4,
+          overflow: 'hidden',
+        }}
+      >
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'baseline',
+            justifyContent: 'space-between',
+            padding: '12px 18px',
+            borderBottom: '0.5px solid var(--cb-border-default)',
+            background: 'var(--cb-ground-canvas)',
+            fontFamily: 'var(--font-cb-serif)',
+          }}
+        >
+          <span
+            className="cb-sc"
+            style={{
+              fontSize: 11,
+              letterSpacing: '0.16em',
+              color: 'var(--cb-text-muted)',
+            }}
+          >
+            preview · {theme?.name ?? themeId}
+          </span>
+          <div style={{ display: 'flex', gap: 14, alignItems: 'baseline' }}>
+            <button
+              type="button"
+              onClick={() => {
+                onPick(themeId);
+                onClose();
+              }}
+              className="cb-mono cb-focus"
+              style={{
+                background: 'var(--cb-accent-emphasis)',
+                color: '#fff',
+                border: 0,
+                padding: '6px 14px',
+                borderRadius: 2,
+                fontSize: 11,
+                letterSpacing: '0.12em',
+                textTransform: 'uppercase',
+                cursor: 'pointer',
+              }}
+            >
+              use this theme
+            </button>
+            <button
+              type="button"
+              onClick={onClose}
+              className="cb-mono cb-focus"
+              style={{
+                background: 'transparent',
+                border: 0,
+                padding: 0,
+                cursor: 'pointer',
+                fontSize: 11,
+                letterSpacing: '0.12em',
+                textTransform: 'uppercase',
+                color: 'var(--cb-text-muted)',
+              }}
+              aria-label="Close preview"
+            >
+              close · esc
+            </button>
+          </div>
+        </div>
+        <iframe
+          srcDoc={previewHtml}
+          title={`Full chapter preview — ${themeId}`}
+          sandbox="allow-scripts allow-same-origin"
+          style={{
+            flex: 1,
+            width: '100%',
+            minHeight: 0,
+            border: 0,
+            display: 'block',
+            background: 'var(--cb-ground-page)',
+          }}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/export/themePreviewSample.ts b/src/components/export/themePreviewSample.ts
new file mode 100644
index 0000000..387075a
--- /dev/null
+++ b/src/components/export/themePreviewSample.ts
@@ -0,0 +1,154 @@
+/**
+ * Sample chapter fragment used by the ExportPage theme picker overlay. Same
+ * content across all six themes — only the wrapping body class changes — so a
+ * reviewer can see what their actual export will feel like at full length.
+ *
+ * Sourced from the brief's reference chapter-template.html and stripped of
+ * the dev theme switcher.
+ */
+export const PREVIEW_CHAPTER_FRAGMENT = `
+<article class="ch">
+  <header class="ch-head">
+    <div class="ch-eyebrow">Class 1 · Module One</div>
+    <h1 class="ch-title">One Leaf, <em>a Thousand</em> Mountains</h1>
+    <p class="ch-subtitle">How a single species became every tea on Earth — and why the mountain where it grows matters as much as the hands that shape it.</p>
+    <div class="ch-meta">
+      <span>12 min read</span>
+      <span class="ch-meta-dot"></span>
+      <span>8 cited sources</span>
+    </div>
+  </header>
+
+  <section class="ch-hook">
+    <p><span class="ch-dropcap">D</span>eep in the Xishuangbanna Prefecture of southern Yunnan, there are tea trees that were already old when the Ming Dynasty fell. Their trunks are thick enough that a person cannot wrap their arms around them, and their canopies stretch ten meters skyward — a far cry from the waist-high hedgerows most people picture when they think of a tea garden.</p>
+    <p>Now fly six thousand kilometers east to Shizuoka, where the same species — the very same <em>Camellia sinensis</em> — has been pruned into immaculate green rows along volcanic hillsides. Same species. Radically different cup. How is this possible?</p>
+  </section>
+
+  <section class="ch-section">
+    <h2>The Plant Behind the Cup</h2>
+    <p>Every tea you have ever tasted — every jasmine pearl, every smoky Lapsang Souchong, every frothy bowl of matcha — comes from the same botanical species: <span class="ch-key">Camellia sinensis</span>. The genus <em>Camellia</em> contains some 200-plus species, but only one has been cultivated for drinking on a global scale.</p>
+
+    <h3>Two Varieties, One Species</h3>
+    <p>Within this single species, two major botanical varieties dominate the world's tea gardens. <span class="ch-key">var. sinensis</span> — the &ldquo;Chinese variety&rdquo; — is a smaller-leafed, cold-tolerant bush that thrives at higher elevations. <span class="ch-key">var. assamica</span> — the &ldquo;Assam variety&rdquo; — is larger-leafed, heat-loving, and built the British tea industry in India.</p>
+
+    <aside class="ch-callout">
+      <div class="ch-callout-label">Think About It</div>
+      <p>If all tea comes from the same species, why did such different traditions emerge in China and India? Consider the variety available in each region, the climate, and the colonial history.</p>
+    </aside>
+  </section>
+
+  <hr class="ch-divider">
+
+  <section class="ch-section">
+    <h2>Terroir: The Taste of Place</h2>
+    <p>Wine lovers have long spoken of <span class="ch-key">terroir</span> — the French concept that a product's flavor reflects its environment in ways that cannot be replicated elsewhere. Tea drinkers deserve the same vocabulary.</p>
+
+    <div class="ch-widget">
+      <div class="ch-widget-head">
+        <div class="ch-widget-label">Interactive</div>
+        <div class="ch-widget-title">Terroir Explorer</div>
+      </div>
+      <p class="ch-widget-sub">Select a region to see how altitude, rainfall, and soil shape the cup.</p>
+      <div class="ch-widget-row">
+        <div class="ch-widget-field">
+          <span class="ch-widget-fieldlabel">Region</span>
+          <select class="ch-widget-select"><option>Darjeeling, India</option></select>
+        </div>
+        <div class="ch-widget-field">
+          <span class="ch-widget-fieldlabel">Compare with</span>
+          <select class="ch-widget-select"><option>Uji, Japan</option></select>
+        </div>
+      </div>
+      <div class="ch-widget-meters">
+        <div class="ch-meter">
+          <span class="ch-meter-label">Sweetness</span>
+          <span class="ch-meter-bar"><span style="width:70%"></span></span>
+          <span class="ch-meter-num">7</span>
+        </div>
+        <div class="ch-meter">
+          <span class="ch-meter-label">Astringency</span>
+          <span class="ch-meter-bar"><span style="width:40%"></span></span>
+          <span class="ch-meter-num">4</span>
+        </div>
+        <div class="ch-meter">
+          <span class="ch-meter-label">Aroma</span>
+          <span class="ch-meter-bar"><span style="width:90%"></span></span>
+          <span class="ch-meter-num">9</span>
+        </div>
+        <div class="ch-meter">
+          <span class="ch-meter-label">Umami</span>
+          <span class="ch-meter-bar"><span style="width:30%"></span></span>
+          <span class="ch-meter-num">3</span>
+        </div>
+      </div>
+      <button class="ch-widget-btn">Why does this matter?</button>
+    </div>
+  </section>
+
+  <figure class="ch-figure">
+    <div class="ch-figbox">
+      <span class="ch-figbox-tag">photograph · two cultivars, side by side</span>
+    </div>
+    <figcaption>
+      <span class="ch-fig-num">Fig. 1</span> <em>Camellia sinensis</em> var. <em>sinensis</em> (left) shows smaller, glossy leaves; var. <em>assamica</em> (right) has the long, soft leaves of the lowland tropics.
+    </figcaption>
+  </figure>
+
+  <blockquote class="ch-quote">
+    <p>The leaf does not decide what it will become. The mountain, the weather, and the tea maker's hands decide together.</p>
+    <cite>Traditional saying — Wuyi Mountain tea producers</cite>
+  </blockquote>
+
+  <section class="ch-takeaways">
+    <h2>Key Takeaways</h2>
+    <ul>
+      <li>All tea comes from a single species, <em>Camellia sinensis</em>, whose genetic flexibility produces enormous diversity in the cup.</li>
+      <li>The two major varieties — <em>sinensis</em> and <em>assamica</em> — represent two poles of a continuum, with many cultivars blending traits from both.</li>
+      <li>Terroir shapes which compounds a leaf produces and in what concentration; geography is a determinant of flavor.</li>
+    </ul>
+  </section>
+
+  <section class="ch-lookahead">
+    <div class="ch-lookahead-label">Looking Ahead</div>
+    <p>In <em>Chapter 2 — From Garden to Withering Trough</em>, we follow the freshly plucked leaf through its first transformation, and ask why the first hours of processing set the trajectory for everything that follows.</p>
+  </section>
+
+  <section class="ch-refs">
+    <h2>References</h2>
+    <p>Banerjee, B. (1992). Botanical classification of tea. In K. C. Willson &amp; M. N. Clifford (Eds.), <em>Tea: Cultivation to consumption</em> (pp. 25–51). Springer.</p>
+    <p>Zhang, X. et al. (2021). Haplotype-resolved genome assembly provides insights into evolutionary history of the tea plant <em>Camellia sinensis</em>. <em>Nature Genetics, 53</em>(8), 1250–1259.</p>
+  </section>
+
+  <footer class="ch-foot">
+    <span class="ch-foot-mark">¶</span>
+    <span class="ch-foot-meta">ClassBuild · Chapter 1 of 4</span>
+  </footer>
+</article>
+`;
+
+/**
+ * The card mini-preview shows only the header, using each theme's sample
+ * eyebrow + title from CHAPTER_THEMES so the six cards aren't confusable at
+ * thumbnail size. This builds that header fragment.
+ */
+export function buildPreviewHeaderFragment(eyebrow: string, title: string): string {
+  // Allow <em>...</em> mid-title in the sample data for themes that lean on
+  // partial-italic display.
+  return `
+<article class="ch">
+  <header class="ch-head">
+    <div class="ch-eyebrow">${eyebrow}</div>
+    <h1 class="ch-title">${title}</h1>
+    <p class="ch-subtitle">A sample subtitle — short enough to fit a thumbnail.</p>
+    <div class="ch-meta">
+      <span>12 min read</span>
+      <span class="ch-meta-dot"></span>
+      <span>8 cited sources</span>
+    </div>
+  </header>
+  <section class="ch-hook">
+    <p><span class="ch-dropcap">A</span> one-paragraph opener so the dropcap and body face come through in the thumbnail.</p>
+  </section>
+</article>
+`;
+}
diff --git a/src/components/layout/AppShell.tsx b/src/components/layout/AppShell.tsx
index c015f63..bbd3f6f 100644
--- a/src/components/layout/AppShell.tsx
+++ b/src/components/layout/AppShell.tsx
@@ -1,44 +1,39 @@
+import { useEffect } from 'react';
 import { Outlet, useLocation } from 'react-router-dom';
 import { Header } from './Header';
 import { StageIndicator } from './StageIndicator';
 import { ErrorBoundary } from '../shared/ErrorBoundary';
+import { useUiStore } from '../../store/uiStore';
 
 export function AppShell() {
   const location = useLocation();
   const isLanding = location.pathname === '/';
+  const setError = useUiStore((s) => s.setError);
+
+  // Clear the transient error banner when navigating between stages, so a
+  // failure on one page (e.g. a SCORM export on Export) doesn't haunt the next
+  // page. Errors raised while you stay on a page are unaffected.
+  useEffect(() => {
+    setError(null);
+  }, [location.pathname, setError]);
 
   return (
-    <div className="min-h-screen bg-bg-primary flex flex-col">
+    <div
+      style={{
+        minHeight: '100vh',
+        background: 'var(--cb-ground-page)',
+        color: 'var(--cb-text-default)',
+      }}
+    >
       <Header />
-      <main className="pt-16 flex-1">
-        {!isLanding && (
-          <div className="max-w-7xl mx-auto px-6 pt-4">
-            <StageIndicator />
-          </div>
-        )}
+      <main style={{ paddingTop: 64 }}>
+        {!isLanding && <StageIndicator />}
         <div className="max-w-7xl mx-auto px-6 pb-12">
           <ErrorBoundary key={location.pathname}>
             <Outlet />
           </ErrorBoundary>
         </div>
       </main>
-      <footer className="border-t border-violet-500/10 px-6 py-4 text-center text-xs text-text-muted space-y-1">
-        <p>
-          Built on{' '}
-          <a
-            href="https://github.com/jtangen/classbuild"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="text-violet-400 hover:underline"
-          >
-            ClassBuild
-          </a>{' '}
-          by Jason Tangen — open-source under MIT.
-        </p>
-        <p>
-          Compatible with Canvas LMS — not affiliated with Instructure, Inc. Canvas® is a registered trademark of Instructure, Inc.
-        </p>
-      </footer>
     </div>
   );
 }
diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
index 9aaff78..281103c 100644
--- a/src/components/layout/Header.tsx
+++ b/src/components/layout/Header.tsx
@@ -1,18 +1,64 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Link, useLocation, useNavigate } from 'react-router-dom';
 import { motion, AnimatePresence } from 'framer-motion';
 import { useUiStore } from '../../store/uiStore';
+import type { MaterialKind } from '../../store/uiStore';
 import { useCourseStore } from '../../store/courseStore';
-import { Logo } from '../shared/Logo';
+import { CodexButton } from '../codex/Button';
+import { Colophon } from '../codex/Colophon';
+
+const ROMAN_LOWER = [
+  'i', 'ii', 'iii', 'iv', 'v', 'vi', 'vii', 'viii', 'ix', 'x',
+  'xi', 'xii', 'xiii', 'xiv', 'xv', 'xvi', 'xvii', 'xviii', 'xix', 'xx',
+];
+
+const MATERIAL_LABELS: Record<MaterialKind, { label: string; tab: string }> = {
+  quiz: { label: 'practice quiz', tab: 'quiz' },
+  inclassquiz: { label: 'in-class', tab: 'inclassquiz' },
+  weeklychallenge: { label: 'challenge', tab: 'weeklychallenge' },
+  discussion: { label: 'discussion', tab: 'discussion' },
+  activities: { label: 'activities', tab: 'activities' },
+  audio: { label: 'audio', tab: 'audio' },
+  slides: { label: 'slides', tab: 'slides' },
+};
+
+function formatSavedAgo(savedAt: number, now: number): string {
+  const diff = Math.max(0, Math.floor((now - savedAt) / 1000));
+  if (diff < 5) return 'just now';
+  if (diff < 60) return `${diff}s ago`;
+  if (diff < 3600) return `${Math.floor(diff / 60)}m ago`;
+  if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`;
+  return `${Math.floor(diff / 86400)}d ago`;
+}
 
 export function Header() {
   const location = useLocation();
   const navigate = useNavigate();
   const isLanding = location.pathname === '/';
-  const { isGenerating, persistError, setPersistError } = useUiStore();
+  const {
+    isGenerating,
+    lastSavedAt,
+    persistError,
+    inFlight,
+    slidesRender,
+    batchGenerating,
+    batchCurrentChapter,
+    batchMaterial,
+    setActiveTab,
+    setSelectedChapterNum,
+  } = useUiStore();
   const { reset, currentStage } = useCourseStore();
   const [showConfirm, setShowConfirm] = useState(false);
 
+  // Re-tick the relative "Saved · Xs ago" label. Once per 5s is plenty:
+  // the label only changes every 5s/1m boundary.
+  const [now, setNow] = useState(() => Date.now());
+  useEffect(() => {
+    if (lastSavedAt === null) return;
+    const id = setInterval(() => setNow(Date.now()), 5000);
+    return () => clearInterval(id);
+  }, [lastSavedAt]);
+
   const hasProgress = currentStage !== 'landing' && currentStage !== 'setup';
 
   const handleNewCourse = () => {
@@ -32,121 +78,419 @@ export function Header() {
 
   return (
     <>
-    <motion.header
-      initial={{ y: -20, opacity: 0 }}
-      animate={{ y: 0, opacity: 1 }}
-      className="fixed top-0 left-0 right-0 z-50 backdrop-blur-xl bg-bg-primary/80 border-b border-violet-500/10"
-    >
-      {/* Generating progress shimmer */}
-      {isGenerating && (
-        <motion.div
-          className="absolute bottom-0 left-0 h-0.5 bg-gradient-to-r from-transparent via-violet-500 to-transparent"
-          animate={{ left: ['-30%', '100%'] }}
-          transition={{ duration: 1.5, repeat: Infinity, ease: 'linear' }}
-          style={{ width: '30%' }}
-        />
-      )}
-      <div className="max-w-7xl mx-auto px-6 h-16 flex items-center justify-between">
-        <Link to="/" className="no-underline">
-          <Logo size={28} />
-        </Link>
-
-        <div className="flex items-center gap-4">
-          {/* Save status indicator */}
-          {!isLanding && (
-            persistError ? (
+      <header
+        style={{
+          position: 'fixed',
+          top: 0,
+          left: 0,
+          right: 0,
+          zIndex: 50,
+          background: 'var(--cb-ground-page)',
+          borderBottom: '0.5px solid var(--cb-border-rule)',
+          fontFamily: 'var(--font-cb-serif)',
+        }}
+      >
+        {/* In-flight pen-stroke — replaces the violet gradient shimmer. */}
+        {isGenerating && (
+          <span
+            aria-hidden
+            style={{
+              position: 'absolute',
+              left: 0,
+              right: 0,
+              bottom: 0,
+              height: 1,
+              overflow: 'hidden',
+            }}
+          >
+            <span
+              style={{
+                position: 'absolute',
+                inset: 0,
+                background: 'var(--cb-accent-emphasis)',
+                animation: 'cb-pen 1.2s cubic-bezier(0.32,0.04,0.32,1) infinite',
+              }}
+            />
+          </span>
+        )}
+
+        <div
+          className="cb-header-inner"
+          style={{
+            maxWidth: 1280,
+            margin: '0 auto',
+            height: 64,
+            padding: '0 28px',
+            display: 'flex',
+            alignItems: 'center',
+            gap: 28,
+          }}
+        >
+          {/* Colophon mark + wordmark. */}
+          <Link
+            to="/"
+            style={{
+              display: 'inline-flex',
+              alignItems: 'center',
+              gap: 14,
+              textDecoration: 'none',
+            }}
+          >
+            <Colophon size={36} />
+            <span
+              className="cb-italic"
+              style={{
+                fontSize: 24,
+                color: 'var(--cb-text-default)',
+                fontVariationSettings: '"opsz" 22',
+                letterSpacing: '-0.01em',
+                fontWeight: 500,
+              }}
+            >
+              ClassBuild
+              <span style={{ color: 'var(--cb-accent-emphasis)' }}>.</span>
+            </span>
+          </Link>
+
+          {/* In-flight strip — visible across all pages so users can see what
+              is generating in the background and jump back to that chapter. */}
+          <InFlightStrip
+            inFlight={inFlight}
+            slidesRender={slidesRender}
+            batchGenerating={batchGenerating}
+            batchCurrentChapter={batchCurrentChapter}
+            batchMaterial={batchMaterial}
+            onJump={(chapterNum, tab) => {
+              setSelectedChapterNum(chapterNum);
+              setActiveTab(tab);
+              if (location.pathname !== '/build') {
+                navigate('/build');
+              }
+            }}
+          />
+
+          <span style={{ flex: 1 }} />
+
+          {/* Right side: a quiet "Saved · Xs ago" reassurance + nav. */}
+          <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
+            {isGenerating && (
+              <span
+                className="cb-sc cb-mono"
+                style={{
+                  fontSize: 12,
+                  letterSpacing: '0.14em',
+                  color: 'var(--cb-accent-emphasis)',
+                }}
+              >
+                drafting
+              </span>
+            )}
+
+            {!isLanding && !isGenerating && lastSavedAt !== null && !persistError && (
+              <span
+                className="cb-mono"
+                title={`Auto-saved to this browser at ${new Date(lastSavedAt).toLocaleTimeString()}`}
+                style={{
+                  display: 'inline-flex',
+                  alignItems: 'center',
+                  gap: 6,
+                  fontSize: 11.5,
+                  color: 'var(--cb-text-muted)',
+                  letterSpacing: '0.04em',
+                  userSelect: 'none',
+                }}
+              >
+                <span
+                  aria-hidden
+                  style={{
+                    display: 'inline-block',
+                    width: 6,
+                    height: 6,
+                    borderRadius: '50%',
+                    background: 'var(--cb-status-success, #3d5c33)',
+                    opacity: 0.85,
+                  }}
+                />
+                Saved · {formatSavedAgo(lastSavedAt, now)}
+              </span>
+            )}
+
+            {!isLanding && persistError && (
               <button
-                onClick={() => setPersistError(null)}
-                className="flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-error/10 border border-error/20 text-xs text-error cursor-pointer border-0 bg-transparent"
-                title="Click to dismiss"
+                type="button"
+                className="cb-mono cb-focus"
+                title={`${persistError} — click to retry the save.`}
+                onClick={() => {
+                  // A no-op set re-runs the persist middleware, which
+                  // re-serializes the FULL current state; success clears
+                  // this banner via idbStorage.
+                  useCourseStore.setState({});
+                }}
+                style={{
+                  display: 'inline-flex',
+                  alignItems: 'center',
+                  gap: 6,
+                  fontSize: 11.5,
+                  color: 'var(--cb-status-danger, #a03535)',
+                  letterSpacing: '0.04em',
+                  background: 'transparent',
+                  border: '0.5px solid var(--cb-status-danger, #a03535)',
+                  borderRadius: 2,
+                  padding: '3px 9px 4px',
+                  cursor: 'pointer',
+                }}
               >
-                <div className="w-1.5 h-1.5 rounded-full bg-error shrink-0" />
-                Save failed
+                <span
+                  aria-hidden
+                  style={{
+                    display: 'inline-block',
+                    width: 6,
+                    height: 6,
+                    borderRadius: '50%',
+                    background: 'var(--cb-status-danger, #a03535)',
+                  }}
+                />
+                Save failed — retry
               </button>
-            ) : hasProgress ? (
-              <span className="flex items-center gap-1.5 text-xs text-text-muted">
-                <div className="w-1.5 h-1.5 rounded-full bg-success shrink-0" />
-                Saved
-              </span>
-            ) : null
-          )}
-          {isGenerating && (
-            <motion.div
-              initial={{ opacity: 0, scale: 0.9 }}
-              animate={{ opacity: 1, scale: 1 }}
-              className="flex items-center gap-2 px-3 py-1.5 rounded-full bg-violet-500/10 border border-violet-500/20"
-            >
-              <motion.div
-                className="w-2 h-2 rounded-full bg-violet-500"
-                animate={{ scale: [1, 1.3, 1], opacity: [1, 0.5, 1] }}
-                transition={{ duration: 1, repeat: Infinity }}
-              />
-              <span className="text-xs text-violet-400 font-medium">Generating</span>
-            </motion.div>
-          )}
-          {!isLanding && !isGenerating && (
-            <button
-              onClick={handleNewCourse}
-              className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs text-text-muted hover:text-text-secondary hover:bg-bg-elevated transition cursor-pointer bg-transparent border-0"
-            >
-              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                <line x1="12" y1="5" x2="12" y2="19" />
-                <line x1="5" y1="12" x2="19" y2="12" />
-              </svg>
-              New Course
-            </button>
-          )}
+            )}
+
+            {!isLanding && !isGenerating && (
+              <CodexButton variant="ghost" size="sm" onClick={handleNewCourse}>
+                + new course
+              </CodexButton>
+            )}
+          </div>
         </div>
-      </div>
-
-    </motion.header>
-    <AnimatePresence>
-      {showConfirm && (
-        <ResetConfirmDialog
-          onConfirm={confirmReset}
-          onCancel={() => setShowConfirm(false)}
-        />
-      )}
-    </AnimatePresence>
+      </header>
+
+      <AnimatePresence>
+        {showConfirm && (
+          <ResetConfirmDialog
+            onConfirm={confirmReset}
+            onCancel={() => setShowConfirm(false)}
+          />
+        )}
+      </AnimatePresence>
     </>
   );
 }
 
-function ResetConfirmDialog({ onConfirm, onCancel }: { onConfirm: () => void; onCancel: () => void }) {
+function ResetConfirmDialog({
+  onConfirm,
+  onCancel,
+}: {
+  onConfirm: () => void;
+  onCancel: () => void;
+}) {
   return (
     <motion.div
       initial={{ opacity: 0 }}
       animate={{ opacity: 1 }}
       exit={{ opacity: 0 }}
-      className="fixed inset-0 z-[100] flex items-center justify-center bg-black/60 backdrop-blur-sm"
+      transition={{ duration: 0.12 }}
+      style={{
+        position: 'fixed',
+        inset: 0,
+        zIndex: 100,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        background: 'rgba(26,24,20,0.42)',
+        padding: 16,
+      }}
       onClick={onCancel}
     >
       <motion.div
-        initial={{ scale: 0.95, opacity: 0 }}
-        animate={{ scale: 1, opacity: 1 }}
-        exit={{ scale: 0.95, opacity: 0 }}
-        className="bg-bg-card border border-violet-500/20 rounded-xl p-6 max-w-sm mx-4 shadow-2xl"
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        exit={{ opacity: 0 }}
+        transition={{ duration: 0.16 }}
+        style={{
+          background: 'var(--cb-surface-raised)',
+          border: '1px solid var(--cb-border-default)',
+          borderRadius: 3,
+          padding: '28px 32px',
+          maxWidth: 440,
+          width: '100%',
+          boxShadow: 'var(--cb-shadow-modal)',
+          fontFamily: 'var(--font-cb-serif)',
+          color: 'var(--cb-text-default)',
+        }}
         onClick={(e) => e.stopPropagation()}
       >
-        <h3 className="text-lg font-semibold mb-2">Start a new course?</h3>
-        <p className="text-sm text-text-secondary mb-5">
-          This will clear your current course data including the syllabus, research, and any generated classes.
+        <div
+          className="cb-sc"
+          style={{
+            fontSize: 13,
+            letterSpacing: '0.16em',
+            color: 'var(--cb-accent-emphasis)',
+          }}
+        >
+          confirm
+        </div>
+        <h3
+          style={{
+            margin: '6px 0 10px',
+            fontSize: 24,
+            fontWeight: 500,
+            fontVariationSettings: '"opsz" 20',
+            letterSpacing: '-0.005em',
+            color: 'var(--cb-text-default)',
+          }}
+        >
+          Start a <span className="cb-italic">new</span> course?
+        </h3>
+        <p
+          style={{
+            margin: 0,
+            fontSize: 15,
+            lineHeight: 1.55,
+            color: 'var(--cb-text-muted)',
+            fontStyle: 'italic',
+          }}
+        >
+          This will clear your current syllabus, research, and any generated classes.
+          Local-only — nothing is sent anywhere. To keep a copy first, download a
+          project file from the Export page.
         </p>
-        <div className="flex gap-3 justify-end">
-          <button
-            onClick={onCancel}
-            className="px-4 py-2 rounded-lg bg-bg-elevated text-text-secondary text-sm font-medium hover:bg-bg-card transition cursor-pointer border-0"
-          >
+        <div
+          style={{
+            display: 'flex',
+            justifyContent: 'flex-end',
+            gap: 10,
+            marginTop: 22,
+          }}
+        >
+          <CodexButton variant="ghost" onClick={onCancel}>
             Cancel
-          </button>
-          <button
-            onClick={onConfirm}
-            className="px-4 py-2 rounded-lg bg-violet-500 text-white text-sm font-medium hover:bg-violet-600 transition cursor-pointer border-0"
-          >
-            Start New Course
-          </button>
+          </CodexButton>
+          <CodexButton variant="destructive" onClick={onConfirm}>
+            Start new course
+          </CodexButton>
         </div>
       </motion.div>
     </motion.div>
   );
 }
+
+// ─── InFlightStrip ───────────────────────────────────────────────────────
+//
+// Small chip strip in the Header showing what is currently generating across
+// the whole app — per-material in-flight items, the in-flight slide-deck
+// render, and the batch "Generate all" progress. Click any chip to jump
+// back to that chapter+tab on the Build page.
+
+function InFlightStrip({
+  inFlight,
+  slidesRender,
+  batchGenerating,
+  batchCurrentChapter,
+  batchMaterial,
+  onJump,
+}: {
+  inFlight: Partial<Record<MaterialKind, number>>;
+  slidesRender: { chapterNum: number; current: number; total: number; phase: string } | null;
+  batchGenerating: boolean;
+  batchCurrentChapter: number | null;
+  batchMaterial: string | null;
+  onJump: (chapterNum: number, tab: string) => void;
+}) {
+  // Collect inFlight entries (sorted by chapter then tab name for stability).
+  const items: Array<{ chapter: number; tab: string; label: string }> = [];
+
+  if (batchGenerating && batchCurrentChapter != null) {
+    items.push({
+      chapter: batchCurrentChapter,
+      tab: 'chapter',
+      label: `batch · ${batchMaterial ?? '…'}`,
+    });
+  }
+
+  if (slidesRender) {
+    items.push({
+      chapter: slidesRender.chapterNum,
+      tab: 'slides',
+      label: `deck ${slidesRender.current}/${slidesRender.total}`,
+    });
+  }
+
+  for (const [kind, chapter] of Object.entries(inFlight) as Array<[MaterialKind, number]>) {
+    if (chapter == null) continue;
+    // Don't double-list a slide that's also being rendered.
+    if (slidesRender?.chapterNum === chapter && kind === 'slides') continue;
+    const meta = MATERIAL_LABELS[kind];
+    if (!meta) continue;
+    items.push({ chapter, tab: meta.tab, label: meta.label });
+  }
+
+  if (items.length === 0) return null;
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        gap: 6,
+        flexWrap: 'nowrap',
+        alignItems: 'center',
+        overflow: 'hidden',
+        maxWidth: '50vw',
+        marginLeft: 18,
+      }}
+    >
+      {items.slice(0, 5).map((it, i) => {
+        const roman = ROMAN_LOWER[it.chapter - 1] ?? String(it.chapter);
+        return (
+          <button
+            key={`${it.chapter}-${it.tab}-${i}`}
+            type="button"
+            onClick={() => onJump(it.chapter, it.tab)}
+            className="cb-focus cb-mono"
+            title={`Class ${it.chapter} · ${it.label} (click to view)`}
+            style={{
+              display: 'inline-flex',
+              alignItems: 'center',
+              gap: 6,
+              padding: '4px 9px 5px',
+              background: 'var(--cb-accent-emphasis-quiet)',
+              border: '0.5px solid var(--cb-accent-emphasis)',
+              borderRadius: 2,
+              fontSize: 10.5,
+              letterSpacing: '0.06em',
+              color: 'var(--cb-accent-emphasis)',
+              cursor: 'pointer',
+              fontFamily: 'var(--font-cb-mono)',
+              flexShrink: 0,
+              whiteSpace: 'nowrap',
+            }}
+          >
+            <span
+              aria-hidden
+              style={{
+                width: 5,
+                height: 5,
+                borderRadius: '50%',
+                background: 'var(--cb-accent-emphasis)',
+                animation: 'cb-pulse 1.4s ease-in-out infinite',
+              }}
+            />
+            <span className="cb-italic" style={{ fontStyle: 'italic' }}>{roman}</span>
+            <span>{it.label}</span>
+          </button>
+        );
+      })}
+      {items.length > 5 && (
+        <span
+          className="cb-mono"
+          style={{
+            fontSize: 10.5,
+            color: 'var(--cb-text-muted)',
+            letterSpacing: '0.06em',
+            whiteSpace: 'nowrap',
+          }}
+        >
+          +{items.length - 5}
+        </span>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/layout/StageIndicator.tsx b/src/components/layout/StageIndicator.tsx
index 62b1016..40e45fa 100644
--- a/src/components/layout/StageIndicator.tsx
+++ b/src/components/layout/StageIndicator.tsx
@@ -1,4 +1,3 @@
-import { motion } from 'framer-motion';
 import { useNavigate, useLocation } from 'react-router-dom';
 import { STAGES } from '../../types/course';
 import { useCourseStore } from '../../store/courseStore';
@@ -7,71 +6,147 @@ export function StageIndicator() {
   const navigate = useNavigate();
   const location = useLocation();
   const { currentStage, completedStages, chapters } = useCourseStore();
-  const currentIndex = STAGES.findIndex((s) => s.id === currentStage);
   const hasChapters = chapters.length > 0;
+  // Treat the route the user is actually on as the current stage — covers
+  // the case where the store still says 'landing' but the user has navigated
+  // straight to /setup.
+  const routeStage = STAGES.find((s) => s.path === location.pathname)?.id;
+  const effectiveCurrent = routeStage ?? currentStage;
+  const currentIndex = STAGES.findIndex((s) => s.id === effectiveCurrent);
+  // The journey's high-water mark from the store. The route decides which
+  // cell reads "— here —", but anything the flow has already reached stays
+  // clickable — otherwise stepping back to Setup while a syllabus drafts
+  // strands you with no way back except the destructive Begin button.
+  const storeIndex = STAGES.findIndex((s) => s.id === currentStage);
 
   return (
-    <div className="flex items-center justify-center gap-1 py-4">
+    <div
+      className="cb-stage-strip"
+      style={{
+        display: 'grid',
+        // minmax(0,1fr) lets cells shrink below their label's min-content
+        // width — without it the five labels force ~514px on a phone.
+        gridTemplateColumns: `repeat(${STAGES.length}, minmax(0, 1fr))`,
+        borderTop: '0.5px solid var(--cb-border-rule)',
+        borderBottom: '0.5px solid var(--cb-border-rule)',
+        background: 'var(--cb-ground-page)',
+        fontFamily: 'var(--font-cb-serif)',
+      }}
+    >
       {STAGES.map((stage, i) => {
         const isComplete = completedStages.includes(stage.id);
-        const isCurrent = stage.id === currentStage;
+        const isCurrent = stage.id === effectiveCurrent;
         const isPast = i < currentIndex;
         const isOnThisPage = location.pathname === stage.path;
-        // Allow Generate/Export once any chapter exists (partial export)
-        const isUnlockedByContent = hasChapters && (stage.id === 'build' || stage.id === 'export');
-        const isClickable = !isOnThisPage && (isComplete || isPast || isCurrent || isUnlockedByContent);
+        const isUnlockedByContent =
+          hasChapters && (stage.id === 'build' || stage.id === 'export');
+        const isReached = storeIndex >= 0 && i <= storeIndex;
+        const isClickable =
+          !isOnThisPage &&
+          (isComplete || isPast || isCurrent || isUnlockedByContent || isReached);
+        // The stage the flow is actually at, viewed from another page —
+        // e.g. a syllabus drafting in the background while you re-read Setup.
+        const isReturnTarget = stage.id === currentStage && !isCurrent;
+
+        const state: 'done' | 'current' | 'upcoming' = isCurrent
+          ? 'current'
+          : isComplete || isPast
+          ? 'done'
+          : 'upcoming';
+
+        const labelColor =
+          state === 'upcoming' && !isReached
+            ? 'var(--cb-text-subtle)'
+            : 'var(--cb-text-default)';
 
         return (
-          <div key={stage.id} className="flex items-center">
-            <button
-              className={`flex flex-col items-center gap-1 bg-transparent border-0 p-0 ${isClickable ? 'cursor-pointer' : 'cursor-default'}`}
-              onClick={() => isClickable && navigate(stage.path)}
-              disabled={!isClickable}
+          <button
+            key={stage.id}
+            type="button"
+            onClick={() => isClickable && navigate(stage.path)}
+            disabled={!isClickable}
+            className="cb-focus cb-stage-cell"
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+              gap: 2,
+              padding: '14px 22px',
+              minWidth: 0,
+              borderLeft:
+                i === 0 ? 'none' : '0.5px solid var(--cb-border-default)',
+              background:
+                state === 'current' ? 'var(--cb-accent-emphasis-quiet)' : 'transparent',
+              border: 'none',
+              cursor: isClickable ? 'pointer' : 'default',
+              textAlign: 'left',
+              transition: 'background-color 200ms cubic-bezier(0.32,0.04,0.32,1)',
+              fontFamily: 'inherit',
+            }}
+            onMouseEnter={(e) => {
+              if (isClickable && state !== 'current') {
+                e.currentTarget.style.background = 'var(--cb-surface-sunken)';
+              }
+            }}
+            onMouseLeave={(e) => {
+              e.currentTarget.style.background =
+                state === 'current' ? 'var(--cb-accent-emphasis-quiet)' : 'transparent';
+            }}
+          >
+            <span
+              className="cb-stage-label"
+              style={{
+                fontSize: 15.5,
+                fontWeight: state === 'current' ? 500 : 400,
+                color: labelColor,
+                display: 'inline-flex',
+                alignItems: 'baseline',
+                gap: 6,
+              }}
+            >
+              {state === 'done' && (
+                <span
+                  aria-hidden
+                  style={{
+                    display: 'inline-flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    width: 14,
+                    height: 14,
+                    borderRadius: '50%',
+                    background: 'var(--cb-accent-emphasis)',
+                    color: '#fff',
+                    fontSize: 9,
+                    lineHeight: 1,
+                    flexShrink: 0,
+                    transform: 'translateY(-1px)',
+                  }}
+                >
+                  ✓
+                </span>
+              )}
+              {stage.label}
+            </span>
+            <span
+              className="cb-italic cb-stage-sub"
+              style={{
+                fontSize: 13,
+                color:
+                  state === 'current' || isReturnTarget
+                    ? 'var(--cb-accent-emphasis)'
+                    : 'var(--cb-text-muted)',
+              }}
             >
-              <motion.div
-                className={`w-9 h-9 rounded-full flex items-center justify-center text-sm font-medium transition-all duration-300 ${
-                  isCurrent
-                    ? 'bg-violet-500 text-white shadow-lg shadow-violet-500/30'
-                    : isComplete
-                    ? 'bg-violet-500/20 text-violet-400 border border-violet-500/30'
-                    : isPast || isUnlockedByContent
-                    ? 'bg-violet-500/15 text-violet-400'
-                    : 'bg-bg-elevated text-text-muted'
-                }`}
-                animate={isCurrent ? { scale: [1, 1.05, 1] } : {}}
-                transition={{ duration: 2, repeat: Infinity }}
-                whileHover={isClickable && !isCurrent ? { scale: 1.1 } : {}}
-              >
-                {isComplete ? (
-                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
-                    <polyline points="20 6 9 17 4 12" />
-                  </svg>
-                ) : (
-                  stage.number
-                )}
-              </motion.div>
-              <span
-                className={`text-xs transition-colors ${
-                  isCurrent ? 'text-violet-400 font-medium' : isClickable ? 'text-text-secondary' : 'text-text-muted'
-                }`}
-              >
-                {stage.label}
-              </span>
-            </button>
-            {i < STAGES.length - 1 && (
-              <div className="relative w-10 mx-0.5 mb-5">
-                <div className="h-px bg-bg-elevated w-full" />
-                {(isPast || isComplete) && (
-                  <motion.div
-                    className="absolute top-0 left-0 h-px bg-gradient-to-r from-violet-500/60 to-violet-500/30"
-                    initial={{ width: 0 }}
-                    animate={{ width: '100%' }}
-                    transition={{ duration: 0.5, delay: i * 0.1 }}
-                  />
-                )}
-              </div>
-            )}
-          </div>
+              {state === 'done'
+                ? isClickable
+                  ? '↵ revisit'
+                  : 'done'
+                : state === 'current'
+                ? '— here —'
+                : isReturnTarget
+                ? '↵ return'
+                : 'awaiting'}
+            </span>
+          </button>
         );
       })}
     </div>
diff --git a/src/components/setup/ApiKeyPanel.tsx b/src/components/setup/ApiKeyPanel.tsx
deleted file mode 100644
index 9eb73a3..0000000
--- a/src/components/setup/ApiKeyPanel.tsx
+++ /dev/null
@@ -1,285 +0,0 @@
-import { useCallback, useEffect, useRef } from 'react';
-import { useApiStore } from '../../store/apiStore';
-import { MODELS } from '../../services/claude/client';
-import { ProviderCard } from './ProviderCard';
-import { CLAUDE_CONFIG, GEMINI_CONFIG, OLLAMA_CONFIG, TAVILY_CONFIG } from './providerConfigs';
-
-export function ApiKeyPanel() {
-  const {
-    provider,
-    researchBackend,
-    claudeApiKey, geminiApiKey, ollamaApiKey, ollamaModel, tavilyApiKey,
-    claudeKeyValid, geminiKeyValid, ollamaKeyValid, tavilyKeyValid,
-    isValidatingClaude, isValidatingGemini, isValidatingOllama, isValidatingTavily,
-    setProvider, setResearchBackend,
-    setClaudeApiKey, setGeminiApiKey, setOllamaApiKey, setOllamaModel, setTavilyApiKey,
-    setClaudeKeyValid, setGeminiKeyValid, setOllamaKeyValid, setTavilyKeyValid,
-    setIsValidatingClaude, setIsValidatingGemini, setIsValidatingOllama, setIsValidatingTavily,
-  } = useApiStore();
-
-  const validateClaude = useCallback(async () => {
-    if (!claudeApiKey.trim()) return;
-    setIsValidatingClaude(true);
-    try {
-      const { default: Anthropic } = await import('@anthropic-ai/sdk');
-      const client = new Anthropic({
-        apiKey: claudeApiKey.trim(),
-        dangerouslyAllowBrowser: true,
-      });
-      await client.messages.create({
-        model: MODELS.haiku,
-        max_tokens: 10,
-        messages: [{ role: 'user', content: 'Hi' }],
-      });
-      setClaudeKeyValid(true);
-    } catch {
-      setClaudeKeyValid(false);
-    } finally {
-      setIsValidatingClaude(false);
-    }
-  }, [claudeApiKey, setClaudeKeyValid, setIsValidatingClaude]);
-
-  const validateGemini = useCallback(async () => {
-    if (!geminiApiKey.trim()) return;
-    setIsValidatingGemini(true);
-    try {
-      const res = await fetch(
-        `https://generativelanguage.googleapis.com/v1beta/models?key=${geminiApiKey.trim()}`,
-      );
-      setGeminiKeyValid(res.ok);
-    } catch {
-      setGeminiKeyValid(false);
-    } finally {
-      setIsValidatingGemini(false);
-    }
-  }, [geminiApiKey, setGeminiKeyValid, setIsValidatingGemini]);
-
-  const validateOllama = useCallback(async () => {
-    if (!ollamaApiKey.trim()) return;
-    setIsValidatingOllama(true);
-    try {
-      // Same proxy URL the runtime uses — vite.config.ts forwards it in
-      // dev, api/ollama-proxy.ts forwards it in prod.
-      const res = await fetch('/api/ollama-proxy', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          Authorization: `Bearer ${ollamaApiKey.trim()}`,
-        },
-        body: JSON.stringify({
-          model: ollamaModel,
-          messages: [{ role: 'user', content: 'ping' }],
-          stream: false,
-        }),
-      });
-      setOllamaKeyValid(res.ok);
-      if (!res.ok) {
-        const detail = await res.text().catch(() => '');
-         
-        console.warn('Ollama validation failed', res.status, detail);
-      }
-    } catch (err) {
-       
-      console.warn('Ollama validation error (likely CORS or network):', err);
-      setOllamaKeyValid(false);
-    } finally {
-      setIsValidatingOllama(false);
-    }
-  }, [ollamaApiKey, ollamaModel, setOllamaKeyValid, setIsValidatingOllama]);
-
-  const validateTavily = useCallback(async () => {
-    if (!tavilyApiKey.trim()) return;
-    setIsValidatingTavily(true);
-    try {
-      const res = await fetch('https://api.tavily.com/search', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          Authorization: `Bearer ${tavilyApiKey.trim()}`,
-        },
-        body: JSON.stringify({ query: 'ping', max_results: 1, search_depth: 'basic' }),
-      });
-      setTavilyKeyValid(res.ok);
-      if (!res.ok) {
-        const detail = await res.text().catch(() => '');
-         
-        console.warn('Tavily validation failed', res.status, detail);
-      }
-    } catch (err) {
-       
-      console.warn('Tavily validation error:', err);
-      setTavilyKeyValid(false);
-    } finally {
-      setIsValidatingTavily(false);
-    }
-  }, [tavilyApiKey, setTavilyKeyValid, setIsValidatingTavily]);
-
-  // Auto-validate stored keys on mount
-  const mountedRef = useRef(false);
-  useEffect(() => {
-    if (mountedRef.current) return;
-    mountedRef.current = true;
-    if (claudeApiKey.trim() && claudeKeyValid === null) validateClaude();
-    if (geminiApiKey.trim() && geminiKeyValid === null) validateGemini();
-    if (ollamaApiKey.trim() && ollamaKeyValid === null) validateOllama();
-    if (tavilyApiKey.trim() && tavilyKeyValid === null) validateTavily();
-  }, []); // eslint-disable-line react-hooks/exhaustive-deps
-
-  const researchHint =
-    researchBackend === 'anthropic'
-      ? 'Uses Claude’s built-in web search. Requires the Claude key.'
-      : researchBackend === 'tavily'
-        ? 'Sends queries to Tavily, then synthesizes results with the active LLM. Requires the Tavily key.'
-        : 'Searches Wikipedia, then synthesizes with the active LLM. No extra key needed.';
-
-  return (
-    <div className="space-y-5">
-      <h3 className="text-sm font-medium text-text-primary">
-        Connect Your Services
-      </h3>
-
-      <div className="flex items-start gap-2.5 rounded-lg bg-emerald-500/5 border border-emerald-500/15 px-3.5 py-3">
-        <svg className="w-4 h-4 text-emerald-400 shrink-0 mt-0.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-          <rect x="3" y="11" width="18" height="11" rx="2" ry="2" /><path d="M7 11V7a5 5 0 0 1 10 0v4" />
-        </svg>
-        <div>
-          <p className="text-xs font-medium text-emerald-400 mb-0.5">Your keys never leave your computer</p>
-          <p className="text-xs text-text-muted leading-relaxed">
-            CanvasClassBuild has no server and no accounts. Everything happens right here in your browser — we never see, store, or have access to your keys.
-          </p>
-        </div>
-      </div>
-
-      {/* LLM provider segmented control */}
-      <div className="space-y-1.5">
-        <p className="text-xs font-medium text-text-secondary">Course-content provider</p>
-        <div className="inline-flex rounded-lg border border-violet-500/15 bg-bg-card p-1 text-xs">
-          <button
-            type="button"
-            className={`px-3 py-1.5 rounded-md transition ${
-              provider === 'anthropic'
-                ? 'bg-violet-500/15 text-violet-300 font-medium'
-                : 'text-text-muted hover:text-text-primary'
-            }`}
-            onClick={() => setProvider('anthropic')}
-          >
-            Claude
-          </button>
-          <button
-            type="button"
-            className={`px-3 py-1.5 rounded-md transition ${
-              provider === 'ollama'
-                ? 'bg-violet-500/15 text-violet-300 font-medium'
-                : 'text-text-muted hover:text-text-primary'
-            }`}
-            onClick={() => setProvider('ollama')}
-          >
-            Ollama Cloud
-          </button>
-        </div>
-        <p className="text-xs text-text-muted">
-          {provider === 'anthropic'
-            ? 'Claude writes syllabus and chapter content. Best quality.'
-            : 'Open-weight alternative. Used for syllabus and chapter content; the research stage uses whichever backend you pick below.'}
-        </p>
-      </div>
-
-      {/* Research backend segmented control */}
-      <div className="space-y-1.5">
-        <p className="text-xs font-medium text-text-secondary">Research backend</p>
-        <div className="inline-flex rounded-lg border border-violet-500/15 bg-bg-card p-1 text-xs">
-          <button
-            type="button"
-            className={`px-3 py-1.5 rounded-md transition ${
-              researchBackend === 'anthropic'
-                ? 'bg-violet-500/15 text-violet-300 font-medium'
-                : 'text-text-muted hover:text-text-primary'
-            }`}
-            onClick={() => setResearchBackend('anthropic')}
-          >
-            Claude web search
-          </button>
-          <button
-            type="button"
-            className={`px-3 py-1.5 rounded-md transition ${
-              researchBackend === 'tavily'
-                ? 'bg-violet-500/15 text-violet-300 font-medium'
-                : 'text-text-muted hover:text-text-primary'
-            }`}
-            onClick={() => setResearchBackend('tavily')}
-          >
-            Tavily
-          </button>
-          <button
-            type="button"
-            className={`px-3 py-1.5 rounded-md transition ${
-              researchBackend === 'wikipedia'
-                ? 'bg-violet-500/15 text-violet-300 font-medium'
-                : 'text-text-muted hover:text-text-primary'
-            }`}
-            onClick={() => setResearchBackend('wikipedia')}
-          >
-            Wikipedia
-          </button>
-        </div>
-        <p className="text-xs text-text-muted">{researchHint}</p>
-      </div>
-
-      <ProviderCard
-        config={CLAUDE_CONFIG}
-        apiKey={claudeApiKey}
-        keyValid={claudeKeyValid}
-        isValidating={isValidatingClaude}
-        setKey={setClaudeApiKey}
-        validate={validateClaude}
-        defaultExpanded={!claudeApiKey && (provider === 'anthropic' || researchBackend === 'anthropic')}
-      />
-
-      <ProviderCard
-        config={OLLAMA_CONFIG}
-        apiKey={ollamaApiKey}
-        keyValid={ollamaKeyValid}
-        isValidating={isValidatingOllama}
-        setKey={setOllamaApiKey}
-        validate={validateOllama}
-        defaultExpanded={!ollamaApiKey && provider === 'ollama'}
-      />
-
-      {provider === 'ollama' && ollamaApiKey.trim() && (
-        <div className="rounded-lg border border-violet-500/15 bg-bg-card px-3.5 py-3 space-y-1.5">
-          <label htmlFor="ollama-model-input" className="block text-xs font-medium text-text-secondary">Ollama model</label>
-          <input
-            id="ollama-model-input"
-            type="text"
-            value={ollamaModel}
-            onChange={(e) => setOllamaModel(e.target.value)}
-            placeholder="gpt-oss:120b-cloud"
-            className="w-full rounded-md bg-bg-base border border-violet-500/10 px-3 py-1.5 text-sm font-mono"
-          />
-          <p className="text-xs text-text-muted">
-            Browse models at <a className="text-violet-400 hover:underline" href="https://ollama.com/search?c=cloud" target="_blank" rel="noreferrer">ollama.com/search?c=cloud</a>.
-          </p>
-        </div>
-      )}
-
-      <ProviderCard
-        config={TAVILY_CONFIG}
-        apiKey={tavilyApiKey}
-        keyValid={tavilyKeyValid}
-        isValidating={isValidatingTavily}
-        setKey={setTavilyApiKey}
-        validate={validateTavily}
-        defaultExpanded={!tavilyApiKey && researchBackend === 'tavily'}
-      />
-
-      <ProviderCard
-        config={GEMINI_CONFIG}
-        apiKey={geminiApiKey}
-        keyValid={geminiKeyValid}
-        isValidating={isValidatingGemini}
-        setKey={setGeminiApiKey}
-        validate={validateGemini}
-      />
-    </div>
-  );
-}
diff --git a/src/components/setup/AudienceSelector.tsx b/src/components/setup/AudienceSelector.tsx
deleted file mode 100644
index d8217b3..0000000
--- a/src/components/setup/AudienceSelector.tsx
+++ /dev/null
@@ -1,164 +0,0 @@
-import { useEffect } from 'react';
-import { useCourseStore } from '../../store/courseStore';
-import type { EducationLevel, PriorKnowledge, TeachingEnvironment } from '../../types/course';
-
-const educationLevels: { value: EducationLevel; label: string }[] = [
-  { value: 'high-school', label: 'High School' },
-  { value: 'first-year', label: 'First-year Undergraduate' },
-  { value: 'advanced-undergrad', label: 'Advanced Undergraduate' },
-  { value: 'postgraduate', label: 'Postgraduate' },
-  { value: 'professional', label: 'Professional Development' },
-  { value: 'general-public', label: 'General Public' },
-];
-
-const priorKnowledgeLevels: { value: PriorKnowledge; label: string; desc: string }[] = [
-  { value: 'none', label: 'No prior knowledge', desc: 'Complete beginners' },
-  { value: 'some', label: 'Some foundation', desc: 'Basic concepts understood' },
-  { value: 'significant', label: 'Significant background', desc: 'Ready for advanced material' },
-];
-
-const cohortSizes: { value: number; label: string; desc: string }[] = [
-  { value: 25, label: 'Small', desc: 'Under 30' },
-  { value: 65, label: 'Medium', desc: '30–100' },
-  { value: 200, label: 'Large', desc: '100–300' },
-  { value: 400, label: 'Very Large', desc: '300+' },
-];
-
-const teachingEnvironments: { value: TeachingEnvironment; label: string; desc: string }[] = [
-  { value: 'lecture-theatre', label: 'Lecture Theatre', desc: 'Tiered / fixed seating' },
-  { value: 'collaborative', label: 'Collaborative', desc: 'Group tables' },
-  { value: 'flat-classroom', label: 'Flat Classroom', desc: 'Moveable desks / rows' },
-  { value: 'online', label: 'Online / Hybrid', desc: 'Breakout rooms & shared docs' },
-];
-
-const VALID_COHORT_VALUES = new Set(cohortSizes.map(s => s.value));
-
-export function AudienceSelector() {
-  const { setup, updateSetup } = useCourseStore();
-
-  // Snap stale cohortSize values (e.g. old default of 100) to nearest valid pill
-  useEffect(() => {
-    if (!VALID_COHORT_VALUES.has(setup.cohortSize)) {
-      updateSetup({ cohortSize: 65 });
-    }
-  }, [setup.cohortSize, updateSetup]);
-
-  return (
-    <div className="space-y-5">
-      <h3 className="text-sm font-medium text-text-primary">
-        Your Class <span className="text-error">*</span>
-      </h3>
-
-      {/* Education Level */}
-      <label className="block">
-        <span className="text-xs text-text-secondary mb-1.5 block">Education level</span>
-        <select
-          value={setup.educationLevel}
-          onChange={(e) => updateSetup({ educationLevel: e.target.value as EducationLevel })}
-          className="w-full bg-bg-elevated border border-violet-500/20 rounded-lg px-4 py-2.5 text-sm text-text-primary focus:outline-none focus:border-violet-500/50 transition-all appearance-none cursor-pointer"
-        >
-          {educationLevels.map((l) => (
-            <option key={l.value} value={l.value}>{l.label}</option>
-          ))}
-        </select>
-      </label>
-
-      {/* Prior Knowledge */}
-      <div>
-        <span className="text-xs text-text-secondary mb-2 block">Prior knowledge of this topic</span>
-        <div className="grid grid-cols-3 gap-2">
-          {priorKnowledgeLevels.map((level) => (
-            <button
-              key={level.value}
-              type="button"
-              onClick={() => updateSetup({ priorKnowledge: level.value })}
-              className={`p-3 rounded-lg border text-left transition-all cursor-pointer ${
-                setup.priorKnowledge === level.value
-                  ? 'border-violet-500/50 bg-violet-500/10 text-violet-400'
-                  : 'border-white/[0.08] hover:border-violet-500/25 text-text-secondary'
-              }`}
-            >
-              <div className="text-sm font-medium">{level.label}</div>
-              <div className="text-xs text-text-muted mt-0.5">{level.desc}</div>
-            </button>
-          ))}
-        </div>
-      </div>
-
-      {/* Cohort Size */}
-      <div>
-        <span className="text-xs text-text-secondary mb-2 block">Approximate cohort size</span>
-        <div className="grid grid-cols-4 gap-2">
-          {cohortSizes.map((size) => (
-            <button
-              key={size.value}
-              type="button"
-              onClick={() => updateSetup({ cohortSize: size.value })}
-              className={`p-3 rounded-lg border text-left transition-all cursor-pointer ${
-                setup.cohortSize === size.value
-                  ? 'border-violet-500/50 bg-violet-500/10 text-violet-400'
-                  : 'border-white/[0.08] hover:border-violet-500/25 text-text-secondary'
-              }`}
-            >
-              <div className="text-sm font-medium">{size.label}</div>
-              <div className="text-xs text-text-muted mt-0.5">{size.desc}</div>
-            </button>
-          ))}
-        </div>
-      </div>
-
-      {/* Learner Notes */}
-      <label className="block">
-        <span className="text-xs text-text-secondary mb-1.5 block">
-          Anything else about your learners? (optional)
-        </span>
-        <input
-          type="text"
-          value={setup.learnerNotes || ''}
-          onChange={(e) => updateSetup({ learnerNotes: e.target.value })}
-          placeholder="e.g., English is their second language, mixed maths backgrounds"
-          className="w-full bg-bg-elevated border border-violet-500/15 rounded-lg px-4 py-2.5 text-sm text-text-primary placeholder:text-text-muted focus:outline-none focus:border-violet-500/40 transition-all"
-        />
-      </label>
-
-      {/* Teaching Environment */}
-      <div>
-        <span className="text-xs text-text-secondary mb-2 block">Teaching environment (optional)</span>
-        <div className="grid grid-cols-4 gap-2">
-          {teachingEnvironments.map((env) => (
-            <button
-              key={env.value}
-              type="button"
-              onClick={() => updateSetup({
-                teachingEnvironment: setup.teachingEnvironment === env.value ? '' : env.value,
-              })}
-              className={`p-3 rounded-lg border text-left transition-all cursor-pointer ${
-                setup.teachingEnvironment === env.value
-                  ? 'border-violet-500/50 bg-violet-500/10 text-violet-400'
-                  : 'border-white/[0.08] hover:border-violet-500/25 text-text-secondary'
-              }`}
-            >
-              <div className="text-sm font-medium">{env.label}</div>
-              <div className="text-xs text-text-muted mt-0.5">{env.desc}</div>
-            </button>
-          ))}
-        </div>
-      </div>
-
-      {setup.teachingEnvironment && (
-        <label className="block">
-          <span className="text-xs text-text-secondary mb-1.5 block">
-            Room details (optional)
-          </span>
-          <input
-            type="text"
-            value={setup.environmentNotes || ''}
-            onChange={(e) => updateSetup({ environmentNotes: e.target.value })}
-            placeholder="e.g., 6 seats per table, no whiteboard, dual projectors"
-            className="w-full bg-bg-elevated border border-violet-500/15 rounded-lg px-4 py-2.5 text-sm text-text-primary placeholder:text-text-muted focus:outline-none focus:border-violet-500/40 transition-all"
-          />
-        </label>
-      )}
-    </div>
-  );
-}
diff --git a/src/components/setup/ChapterConfig.tsx b/src/components/setup/ChapterConfig.tsx
deleted file mode 100644
index 8261623..0000000
--- a/src/components/setup/ChapterConfig.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import { useCourseStore } from '../../store/courseStore';
-import type { ChapterLength } from '../../types/course';
-
-const lengthOptions: { value: ChapterLength; label: string; time: string; widgets: string }[] = [
-  { value: 'concise', label: 'Concise', time: '~10 min · ~2,000 words', widgets: '1 widget' },
-  { value: 'standard', label: 'Standard', time: '~20 min · ~4,000 words', widgets: '2 widgets' },
-  { value: 'comprehensive', label: 'Comprehensive', time: '~30 min · ~6,000 words', widgets: '3 widgets' },
-];
-
-const WIDGETS_FOR_LENGTH: Record<ChapterLength, number> = {
-  concise: 1,
-  standard: 2,
-  comprehensive: 3,
-};
-
-const CLASS_COUNTS = Array.from({ length: 13 }, (_, i) => i + 4); // 4..16
-
-export function ChapterConfig() {
-  const { setup, updateSetup } = useCourseStore();
-
-  return (
-    <div className="space-y-5">
-      <h3 className="text-sm font-medium text-text-primary">
-        Course Structure <span className="text-error">*</span>
-      </h3>
-
-      {/* Number of classes — compact pills */}
-      <div>
-        <span className="text-xs text-text-secondary mb-2 block">Number of classes</span>
-        <div className="flex flex-wrap gap-1">
-          {CLASS_COUNTS.map((n) => (
-            <button
-              key={n}
-              type="button"
-              onClick={() => updateSetup({ numChapters: n })}
-              className={`w-9 h-9 rounded-md text-[13px] font-medium transition-all cursor-pointer ${
-                setup.numChapters === n
-                  ? 'bg-violet-500/20 text-violet-400'
-                  : 'text-text-muted hover:text-text-secondary hover:bg-white/[0.03]'
-              }`}
-            >
-              {n}
-            </button>
-          ))}
-        </div>
-      </div>
-
-      {/* Reading length */}
-      <div>
-        <span className="text-xs text-text-secondary mb-2 block">Reading length</span>
-        <div className="grid grid-cols-3 gap-2">
-          {lengthOptions.map((opt) => (
-            <button
-              key={opt.value}
-              type="button"
-              onClick={() => updateSetup({ chapterLength: opt.value, widgetsPerChapter: WIDGETS_FOR_LENGTH[opt.value] })}
-              className={`p-3 rounded-lg border text-left transition-all cursor-pointer ${
-                setup.chapterLength === opt.value
-                  ? 'border-violet-500/50 bg-violet-500/10'
-                  : 'border-white/[0.08] hover:border-violet-500/25'
-              }`}
-            >
-              <div className={`text-sm font-medium ${
-                setup.chapterLength === opt.value ? 'text-violet-400' : 'text-text-secondary'
-              }`}>
-                {opt.label}
-              </div>
-              <div className="text-xs text-text-muted mt-0.5">{opt.time}</div>
-              <div className="text-xs text-text-muted">{opt.widgets}</div>
-            </button>
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/src/components/setup/ProviderCard.tsx b/src/components/setup/ProviderCard.tsx
deleted file mode 100644
index 96eb7a0..0000000
--- a/src/components/setup/ProviderCard.tsx
+++ /dev/null
@@ -1,311 +0,0 @@
-import { useState, useRef, useEffect, useCallback } from 'react';
-import { motion, AnimatePresence } from 'framer-motion';
-import type { ProviderConfig } from './providerConfigs';
-import { Button } from '../shared/Button';
-
-interface ProviderCardProps {
-  config: ProviderConfig;
-  apiKey: string;
-  keyValid: boolean | null;
-  isValidating: boolean;
-  setKey: (key: string) => void;
-  validate: () => Promise<void>;
-  defaultExpanded?: boolean;
-}
-
-function maskKey(key: string): string {
-  if (key.length <= 12) return '\u2022'.repeat(key.length);
-  return key.slice(0, 7) + '\u2022\u2022\u2022\u2022' + key.slice(-4);
-}
-
-export function ProviderCard({
-  config,
-  apiKey,
-  keyValid,
-  isValidating,
-  setKey,
-  validate,
-  defaultExpanded = false,
-}: ProviderCardProps) {
-  const [showGuide, setShowGuide] = useState(defaultExpanded);
-  const [showKey, setShowKey] = useState(false);
-  const [confirmingDisconnect, setConfirmingDisconnect] = useState(false);
-  const pastedRef = useRef(false);
-
-  // Auto-validate on paste
-  const handlePaste = useCallback(() => {
-    pastedRef.current = true;
-  }, []);
-
-  useEffect(() => {
-    if (pastedRef.current && apiKey.trim()) {
-      pastedRef.current = false;
-      const timer = setTimeout(() => {
-        validate();
-      }, 100);
-      return () => clearTimeout(timer);
-    }
-  }, [apiKey, validate]);
-
-  const isConnected = keyValid === true && apiKey.trim().length > 0;
-
-  const handleDisconnect = () => {
-    setKey('');
-    setConfirmingDisconnect(false);
-    setShowKey(false);
-  };
-
-  // Connected state
-  if (isConnected) {
-    return (
-      <div className="border border-emerald-500/30 bg-emerald-500/5 rounded-xl p-5">
-        <div className="flex items-start justify-between gap-3">
-          <div className="min-w-0">
-            <div className="flex items-center gap-2.5 mb-1">
-              <svg
-                width="16"
-                height="16"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                strokeWidth="3"
-                strokeLinecap="round"
-                className="text-emerald-400 shrink-0"
-              >
-                <polyline points="20 6 9 17 4 12" />
-              </svg>
-              <span className="text-sm font-medium text-text-primary">
-                {config.connectedHeading}
-              </span>
-              {config.required ? (
-                <span className="text-[10px] uppercase tracking-wider font-semibold px-2 py-0.5 rounded-full bg-violet-500/15 text-violet-400">
-                  Required
-                </span>
-              ) : (
-                <span className="text-[10px] uppercase tracking-wider font-semibold px-2 py-0.5 rounded-full bg-bg-hover text-text-muted">
-                  Optional
-                </span>
-              )}
-            </div>
-            <p className="text-xs text-text-muted mb-2">{config.tagline}</p>
-            <span className="text-xs font-mono text-text-muted">
-              {maskKey(apiKey)}
-            </span>
-          </div>
-
-          <div className="shrink-0">
-            {!confirmingDisconnect ? (
-              <button
-                type="button"
-                onClick={() => setConfirmingDisconnect(true)}
-                className="text-xs text-text-muted hover:text-error transition-colors cursor-pointer"
-              >
-                Disconnect
-              </button>
-            ) : (
-              <div className="flex flex-col items-end gap-1.5">
-                <span className="text-xs text-text-muted text-right max-w-[200px]">
-                  Remove this key? You'll need to paste it again to reconnect.
-                </span>
-                <div className="flex gap-2">
-                  <button
-                    type="button"
-                    onClick={() => setConfirmingDisconnect(false)}
-                    className="text-xs text-text-muted hover:text-text-secondary transition-colors cursor-pointer"
-                  >
-                    Cancel
-                  </button>
-                  <button
-                    type="button"
-                    onClick={handleDisconnect}
-                    className="text-xs text-error hover:text-error/80 transition-colors cursor-pointer"
-                  >
-                    Remove
-                  </button>
-                </div>
-              </div>
-            )}
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  // Disconnected state
-  return (
-    <div className="bg-bg-elevated/50 border border-violet-500/15 rounded-xl p-5">
-      {/* Header */}
-      <div className="flex items-start justify-between gap-3 mb-1">
-        <span className="text-sm font-medium text-text-primary">
-          {config.heading}
-        </span>
-        {config.required ? (
-          <span className="text-[10px] uppercase tracking-wider font-semibold px-2 py-0.5 rounded-full bg-violet-500/15 text-violet-400 shrink-0">
-            Required
-          </span>
-        ) : (
-          <span className="text-[10px] uppercase tracking-wider font-semibold px-2 py-0.5 rounded-full bg-bg-hover text-text-muted shrink-0">
-            Optional
-          </span>
-        )}
-      </div>
-      <p className="text-xs text-text-muted mb-4">{config.tagline}</p>
-
-      {/* Collapsible guide */}
-      <button
-        type="button"
-        onClick={() => setShowGuide(!showGuide)}
-        className="flex items-center gap-2 text-sm text-text-secondary hover:text-violet-400 transition-colors cursor-pointer mb-3"
-      >
-        <motion.svg
-          width="16"
-          height="16"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          strokeWidth="2"
-          animate={{ rotate: showGuide ? 90 : 0 }}
-        >
-          <polyline points="9 18 15 12 9 6" />
-        </motion.svg>
-        How to get your key
-      </button>
-
-      <AnimatePresence>
-        {showGuide && (
-          <motion.div
-            initial={{ height: 0, opacity: 0 }}
-            animate={{ height: 'auto', opacity: 1 }}
-            exit={{ height: 0, opacity: 0 }}
-            className="overflow-hidden"
-          >
-            <div className="space-y-3 mb-4">
-              {/* Cost note */}
-              <p className="text-xs text-text-secondary">
-                <span className="font-medium text-text-primary">Cost:</span>{' '}
-                {config.costNote}
-              </p>
-
-              {/* Numbered steps */}
-              <ol className="space-y-1.5">
-                {config.steps.map((step, i) => (
-                  <li key={i} className="flex gap-2 text-xs text-text-secondary">
-                    <span className="text-violet-400 font-medium shrink-0">
-                      {i + 1}.
-                    </span>
-                    {step.text}
-                  </li>
-                ))}
-              </ol>
-
-              {/* Deep link button */}
-              <a
-                href={config.deepLink}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium rounded-lg bg-bg-elevated hover:bg-bg-hover text-text-primary border border-violet-500/20 hover:border-violet-500/40 transition-all"
-              >
-                {config.deepLinkLabel}
-                <svg
-                  width="14"
-                  height="14"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  strokeWidth="2"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                >
-                  <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
-                  <polyline points="15 3 21 3 21 9" />
-                  <line x1="10" y1="14" x2="21" y2="3" />
-                </svg>
-              </a>
-
-              {/* Warnings */}
-              {config.warnings.map((warning, i) => (
-                <div
-                  key={i}
-                  className={`text-xs p-3 rounded-lg ${
-                    warning.type === 'alert'
-                      ? 'bg-amber-500/5 border border-amber-500/15 text-amber-400'
-                      : 'bg-violet-500/5 border border-violet-500/10 text-text-secondary'
-                  }`}
-                >
-                  {warning.text}
-                </div>
-              ))}
-            </div>
-          </motion.div>
-        )}
-      </AnimatePresence>
-
-      {/* Key input */}
-      <div className="flex gap-2">
-        <div className="relative flex-1">
-          <input
-            type={showKey ? 'text' : 'password'}
-            value={apiKey}
-            onChange={(e) => setKey(e.target.value)}
-            onPaste={handlePaste}
-            placeholder={config.placeholder}
-            className="w-full bg-bg-elevated border border-violet-500/20 rounded-lg px-4 py-2.5 text-sm text-text-primary placeholder:text-text-muted focus:outline-none focus:border-violet-500/50 pr-10 transition-all font-mono"
-          />
-          <button
-            type="button"
-            onClick={() => setShowKey(!showKey)}
-            className="absolute right-3 top-1/2 -translate-y-1/2 text-text-muted hover:text-text-secondary cursor-pointer"
-          >
-            <svg
-              width="16"
-              height="16"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="2"
-              strokeLinecap="round"
-            >
-              {showKey ? (
-                <>
-                  <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94" />
-                  <path d="M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19" />
-                  <line x1="1" y1="1" x2="23" y2="23" />
-                </>
-              ) : (
-                <>
-                  <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
-                  <circle cx="12" cy="12" r="3" />
-                </>
-              )}
-            </svg>
-          </button>
-        </div>
-        <Button
-          type="button"
-          variant="secondary"
-          size="sm"
-          onClick={validate}
-          disabled={!apiKey.trim()}
-          isLoading={isValidating}
-        >
-          Check
-        </Button>
-      </div>
-
-      <p className="text-[11px] text-text-muted mt-2">
-        Stored in your browser only. Sent directly to {config.id === 'claude' ? 'Anthropic' : 'Google'}.
-      </p>
-
-      {/* Validation error */}
-      {keyValid === false && apiKey.trim() && (
-        <motion.div
-          initial={{ opacity: 0, y: -4 }}
-          animate={{ opacity: 1, y: 0 }}
-          className="mt-3 p-3 rounded-lg bg-error/10 border border-error/20 text-error text-xs"
-        >
-          Connection failed. {config.validationFailHint}
-        </motion.div>
-      )}
-    </div>
-  );
-}
diff --git a/src/components/setup/StyleSelector.tsx b/src/components/setup/StyleSelector.tsx
deleted file mode 100644
index ae55d37..0000000
--- a/src/components/setup/StyleSelector.tsx
+++ /dev/null
@@ -1,200 +0,0 @@
-import { useState, useRef, useEffect, useCallback } from 'react';
-import { useCourseStore } from '../../store/courseStore';
-import { useApiStore } from '../../store/apiStore';
-import { THEMES, VOICE_OPTIONS, DEFAULT_VOICE_ID, type Theme } from '../../themes';
-
-function ThemePreviewCard({ theme, selected, onClick }: { theme: Theme; selected: boolean; onClick: () => void }) {
-  return (
-    <button
-      type="button"
-      onClick={onClick}
-      className="text-left transition-all cursor-pointer rounded-xl overflow-hidden"
-      style={{
-        border: selected ? `2.5px solid ${theme.accent}` : `1.5px solid ${theme.isDark ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.1)'}`,
-        boxShadow: selected
-          ? `0 0 0 1px ${theme.accent}40, 0 4px 20px ${theme.accent}20`
-          : '0 2px 8px rgba(0,0,0,0.15)',
-      }}
-    >
-      <div
-        className="px-5 py-4"
-        style={{ background: theme.pageBg }}
-      >
-        <div
-          className="text-[15px] font-bold mb-2.5 leading-tight"
-          style={{ color: theme.textPrimary, fontFamily: theme.headingFont }}
-        >
-          {theme.name}
-        </div>
-        <p
-          className="text-[12.5px] leading-[1.65]"
-          style={{ color: theme.textSecondary, fontFamily: theme.bodyFont }}
-        >
-          Learn how <strong style={{ color: theme.textPrimary, fontWeight: 600 }}>retrieval practice</strong> strengthens memory. Concepts like{' '}
-          <span style={{ color: theme.accent, fontWeight: 500 }}>spaced repetition</span>{' '}
-          make learning stick.
-        </p>
-        <div className="flex items-center gap-2 mt-3">
-          <div
-            className="h-[3px] flex-1 rounded-full"
-            style={{ background: `linear-gradient(to right, ${theme.accent}, ${theme.accentLight})` }}
-          />
-          <div className="w-1.5 h-1.5 rounded-full" style={{ background: theme.warmAccent }} />
-        </div>
-      </div>
-    </button>
-  );
-}
-
-function VoiceCard({
-  voice,
-  selected,
-  playing,
-  onSelect,
-  onPlay,
-}: {
-  voice: typeof VOICE_OPTIONS[number];
-  selected: boolean;
-  playing: boolean;
-  onSelect: () => void;
-  onPlay: () => void;
-}) {
-  return (
-    <div
-      className={`rounded-lg border transition-all ${
-        selected
-          ? 'border-violet-500/50 bg-violet-500/10'
-          : 'border-violet-500/15 bg-bg-elevated hover:border-violet-500/30'
-      }`}
-    >
-      <button
-        type="button"
-        onClick={onSelect}
-        className="w-full p-2.5 pb-0 text-left cursor-pointer bg-transparent border-0"
-      >
-        <div className={`text-xs font-medium ${
-          selected ? 'text-violet-400' : 'text-text-secondary'
-        }`}>
-          {voice.label}
-        </div>
-        <div className="text-xs text-text-muted mt-0.5">{voice.desc}</div>
-      </button>
-
-      <div className="px-2.5 pb-2 pt-1.5">
-        <button
-          type="button"
-          onClick={(e) => {
-            e.stopPropagation();
-            onPlay();
-          }}
-          className={`flex items-center gap-1.5 text-[11px] cursor-pointer bg-transparent border-0 transition-colors ${
-            playing ? 'text-violet-400' : 'text-text-muted hover:text-text-secondary'
-          }`}
-        >
-          {playing ? (
-            <>
-              <div className="flex items-end gap-[2px] h-3 w-3">
-                {[0, 1, 2].map(i => (
-                  <div
-                    key={i}
-                    className="w-[3px] rounded-full bg-violet-400"
-                    style={{
-                      animation: `voiceBar 0.8s ease-in-out ${i * 0.15}s infinite alternate`,
-                    }}
-                  />
-                ))}
-              </div>
-              Playing...
-            </>
-          ) : (
-            <>
-              <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" stroke="none">
-                <polygon points="6 3 20 12 6 21" />
-              </svg>
-              Preview
-            </>
-          )}
-        </button>
-      </div>
-    </div>
-  );
-}
-
-export function StyleSelector() {
-  const { setup, updateSetup } = useCourseStore();
-  const { geminiApiKey } = useApiStore();
-  const selectedTheme = setup.themeId || 'midnight';
-  const storedVoice = setup.voiceId;
-  // Old persisted state may hold ElevenLabs voice IDs; fall back to the Gemini default in that case.
-  const selectedVoice = VOICE_OPTIONS.some(v => v.id === storedVoice) ? storedVoice : DEFAULT_VOICE_ID;
-
-  const [playingId, setPlayingId] = useState<string | null>(null);
-  const audioRef = useRef<HTMLAudioElement | null>(null);
-
-  const handlePlay = useCallback((voiceId: string) => {
-    if (playingId === voiceId) {
-      audioRef.current?.pause();
-      audioRef.current = null;
-      setPlayingId(null);
-      return;
-    }
-    audioRef.current?.pause();
-
-    const audio = new Audio(`/voices/${voiceId.toLowerCase()}.wav`);
-    audioRef.current = audio;
-    setPlayingId(voiceId);
-
-    audio.onended = () => { setPlayingId(null); audioRef.current = null; };
-    audio.onerror = () => { setPlayingId(null); audioRef.current = null; };
-    audio.play().catch(() => { setPlayingId(null); audioRef.current = null; });
-  }, [playingId]);
-
-  useEffect(() => {
-    return () => { audioRef.current?.pause(); };
-  }, []);
-
-  return (
-    <div className="space-y-5">
-      <style>{`
-        @keyframes voiceBar {
-          0% { height: 3px; }
-          100% { height: 12px; }
-        }
-      `}</style>
-
-      <h3 className="text-sm font-medium text-text-primary">Visual Theme</h3>
-
-      <div className="grid grid-cols-2 gap-3">
-        {THEMES.map((theme) => (
-          <ThemePreviewCard
-            key={theme.id}
-            theme={theme}
-            selected={selectedTheme === theme.id}
-            onClick={() => updateSetup({ themeId: theme.id })}
-          />
-        ))}
-      </div>
-
-      {geminiApiKey && (
-        <div className="pt-4 border-t border-violet-500/10">
-          <h3 className="text-sm font-medium text-text-primary mb-1">Narrator Voice</h3>
-          <p className="text-xs text-text-muted mb-3">
-            Gemini text-to-speech voice used for chapter audiobooks.
-          </p>
-          <div className="grid grid-cols-2 gap-2">
-            {VOICE_OPTIONS.map((voice) => (
-              <VoiceCard
-                key={voice.id}
-                voice={voice}
-                selected={selectedVoice === voice.id}
-                playing={playingId === voice.id}
-                onSelect={() => updateSetup({ voiceId: voice.id })}
-                onPlay={() => handlePlay(voice.id)}
-              />
-            ))}
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
diff --git a/src/components/setup/TopicInput.tsx b/src/components/setup/TopicInput.tsx
deleted file mode 100644
index 64672f8..0000000
--- a/src/components/setup/TopicInput.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-import { useState } from 'react';
-import { motion, AnimatePresence } from 'framer-motion';
-import { useCourseStore } from '../../store/courseStore';
-
-export function TopicInput() {
-  const { setup, updateSetup } = useCourseStore();
-  const [showAdvanced, setShowAdvanced] = useState(false);
-
-  return (
-    <div className="space-y-4">
-      <label className="block">
-        <span className="text-sm font-medium text-text-primary mb-2 block">
-          What course do you want to build? <span className="text-error">*</span>
-        </span>
-        <textarea
-          value={setup.topic}
-          onChange={(e) => updateSetup({ topic: e.target.value })}
-          placeholder="A second-year university course on research methods and statistics"
-          className="w-full bg-bg-elevated border border-violet-500/20 rounded-lg px-4 py-3 text-text-primary placeholder:text-text-muted focus:outline-none focus:border-violet-500/50 focus:ring-1 focus:ring-violet-500/30 resize-none transition-all"
-          rows={3}
-        />
-      </label>
-
-      <button
-        type="button"
-        onClick={() => setShowAdvanced(!showAdvanced)}
-        className="flex items-center gap-2 text-sm text-text-secondary hover:text-violet-400 transition-colors cursor-pointer"
-      >
-        <motion.svg
-          width="16"
-          height="16"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          strokeWidth="2"
-          animate={{ rotate: showAdvanced ? 90 : 0 }}
-        >
-          <polyline points="9 18 15 12 9 6" />
-        </motion.svg>
-        Additional details (optional)
-      </button>
-
-      <AnimatePresence>
-        {showAdvanced && (
-          <motion.div
-            initial={{ height: 0, opacity: 0 }}
-            animate={{ height: 'auto', opacity: 1 }}
-            exit={{ height: 0, opacity: 0 }}
-            className="overflow-hidden space-y-3"
-          >
-            <label className="block">
-              <span className="text-xs text-text-secondary mb-1 block">
-                Any specific topics that must be covered?
-              </span>
-              <input
-                type="text"
-                value={setup.specificTopics || ''}
-                onChange={(e) => updateSetup({ specificTopics: e.target.value })}
-                placeholder="e.g., ANOVA, regression, effect sizes"
-                className="w-full bg-bg-elevated border border-violet-500/15 rounded-lg px-4 py-2.5 text-sm text-text-primary placeholder:text-text-muted focus:outline-none focus:border-violet-500/40 transition-all"
-              />
-            </label>
-            <label className="block">
-              <span className="text-xs text-text-secondary mb-1 block">
-                Any topics you want to avoid?
-              </span>
-              <input
-                type="text"
-                value={setup.avoidTopics || ''}
-                onChange={(e) => updateSetup({ avoidTopics: e.target.value })}
-                placeholder="e.g., Bayesian statistics, qualitative methods"
-                className="w-full bg-bg-elevated border border-violet-500/15 rounded-lg px-4 py-2.5 text-sm text-text-primary placeholder:text-text-muted focus:outline-none focus:border-violet-500/40 transition-all"
-              />
-            </label>
-            <label className="block">
-              <span className="text-xs text-text-secondary mb-1 block">
-                Is there a textbook or resource you typically follow?
-              </span>
-              <input
-                type="text"
-                value={setup.textbookReference || ''}
-                onChange={(e) => updateSetup({ textbookReference: e.target.value })}
-                placeholder="e.g., Field (2024) Discovering Statistics Using R"
-                className="w-full bg-bg-elevated border border-violet-500/15 rounded-lg px-4 py-2.5 text-sm text-text-primary placeholder:text-text-muted focus:outline-none focus:border-violet-500/40 transition-all"
-              />
-            </label>
-          </motion.div>
-        )}
-      </AnimatePresence>
-    </div>
-  );
-}
diff --git a/src/components/setup/WidgetConfig.tsx b/src/components/setup/WidgetConfig.tsx
deleted file mode 100644
index 421aa60..0000000
--- a/src/components/setup/WidgetConfig.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { useCourseStore } from '../../store/courseStore';
-
-export function WidgetConfig() {
-  const { setup, updateSetup } = useCourseStore();
-
-  const max = setup.chapterLength === 'concise' ? 2 : setup.chapterLength === 'standard' ? 3 : 4;
-
-  return (
-    <div className="space-y-3">
-      <h3 className="text-sm font-medium text-text-primary">Interactive Widgets</h3>
-      <label className="block">
-        <span className="text-xs text-text-secondary mb-1.5 block">
-          Widgets per class
-        </span>
-        <div className="flex items-center gap-4">
-          <input
-            type="range"
-            min={0}
-            max={max}
-            value={setup.widgetsPerChapter}
-            onChange={(e) => updateSetup({ widgetsPerChapter: parseInt(e.target.value) })}
-            className="flex-1 accent-violet-500"
-          />
-          <span className="text-lg font-semibold text-violet-400 w-8 text-center">
-            {setup.widgetsPerChapter}
-          </span>
-        </div>
-        <p className="text-xs text-text-muted mt-1">
-          Interactive HTML/JS widgets embedded in classes — simulations, visualizations, and demonstrations that illustrate key concepts.
-        </p>
-      </label>
-    </div>
-  );
-}
diff --git a/src/components/setup/providerConfigs.ts b/src/components/setup/providerConfigs.ts
deleted file mode 100644
index a6b6eaf..0000000
--- a/src/components/setup/providerConfigs.ts
+++ /dev/null
@@ -1,144 +0,0 @@
-export interface ProviderConfig {
-  id: 'claude' | 'gemini' | 'ollama' | 'tavily';
-  heading: string;
-  connectedHeading: string;
-  tagline: string;
-  required: boolean;
-  costNote: string;
-  deepLink: string;
-  deepLinkLabel: string;
-  steps: { text: string }[];
-  placeholder: string;
-  warnings: { type: 'alert' | 'info'; text: string }[];
-  validationFailHint: string;
-}
-
-export const CLAUDE_COST_NOTE =
-  'Pay-as-you-go \u2014 a full course typically costs around $20\u201330, depending on length.';
-
-export const GEMINI_COST_NOTE =
-  'Free to start \u2014 Google gives you $300 in trial credits. Covers infographics plus voice narration.';
-
-export const CLAUDE_CONFIG: ProviderConfig = {
-  id: 'claude',
-  heading: 'Connect to Claude',
-  connectedHeading: 'Connected to Claude',
-  tagline:
-    'Claude writes your course content, quizzes, and activities. This connection is required.',
-  required: true,
-  costNote: CLAUDE_COST_NOTE,
-  deepLink: 'https://console.anthropic.com/settings/keys',
-  deepLinkLabel: 'Open Anthropic Console',
-  steps: [
-    { text: 'Create a free account at console.anthropic.com' },
-    { text: 'Add at least $5 in API credits (Settings \u2192 Billing)' },
-    { text: 'Create an API key and paste it below' },
-  ],
-  placeholder: 'sk-ant-...',
-  warnings: [
-    {
-      type: 'alert',
-      text: 'A Claude Pro subscription is not the same as API access. You need API credits from the Anthropic Console.',
-    },
-    {
-      type: 'info',
-      text: 'Your API key is only shown once when created \u2014 save it somewhere safe.',
-    },
-  ],
-  validationFailHint:
-    'Check that you copied the full key from console.anthropic.com and that your account has API credits.',
-};
-
-export const GEMINI_CONFIG: ProviderConfig = {
-  id: 'gemini',
-  heading: 'Add infographics & voice narration',
-  connectedHeading: 'Infographics & voice connected',
-  tagline:
-    'Generate custom illustrations for each chapter and a full spoken audiobook from your transcripts.',
-  required: false,
-  costNote: GEMINI_COST_NOTE,
-  deepLink: 'https://aistudio.google.com/apikey',
-  deepLinkLabel: 'Open Google AI Studio',
-  steps: [
-    { text: 'Sign in to Google AI Studio with your Google account' },
-    { text: 'Click "Create API Key" and copy it' },
-    { text: 'Enable Cloud billing if prompted (free trial works)' },
-  ],
-  placeholder: 'AIza...',
-  warnings: [
-    {
-      type: 'info',
-      text: 'School/university Google accounts may block AI Studio. Use a personal Google account if needed.',
-    },
-    {
-      type: 'info',
-      text: 'Image generation requires Cloud billing to be enabled, but the $300 free trial covers it.',
-    },
-  ],
-  validationFailHint:
-    'Check that you copied the full key from AI Studio and that your Google account has API access enabled.',
-};
-
-export const OLLAMA_COST_NOTE =
-  'Pay-as-you-go on ollama.com — cheaper per-token than Claude. Quality on the rich JSON outputs (slides, weekly challenge) will be lumpier than Claude.';
-
-export const OLLAMA_CONFIG: ProviderConfig = {
-  id: 'ollama',
-  heading: 'Connect to Ollama Cloud',
-  connectedHeading: 'Connected to Ollama Cloud',
-  tagline:
-    'Open-weight alternative to Claude. Generates the same text outputs but cannot run the Research step (no built-in web search).',
-  required: false,
-  costNote: OLLAMA_COST_NOTE,
-  deepLink: 'https://ollama.com/settings/keys',
-  deepLinkLabel: 'Open Ollama Settings',
-  steps: [
-    { text: 'Sign in at ollama.com and open Settings → Keys' },
-    { text: 'Click "Create key" and copy it' },
-    { text: 'Paste it below and switch the provider toggle to Ollama' },
-  ],
-  placeholder: 'e.g. 0c5b33c8fe21440b955d5af824e3a5b2.mJroz...',
-  warnings: [
-    {
-      type: 'info',
-      text: 'Defaults to gpt-oss:120b-cloud. Other cloud-only models (qwen3-coder, deepseek-v3.1) can be selected after pasting the key.',
-    },
-    {
-      type: 'info',
-      text: 'Research step is disabled on Ollama — it relies on Claude’s built-in web search. Switch to Claude for that stage if you need it.',
-    },
-  ],
-  validationFailHint:
-    'Check that you copied the full key from ollama.com/settings/keys and that your account has cloud access enabled.',
-};
-
-export const TAVILY_COST_NOTE =
-  'Free tier — 1,000 searches/month. Used by the Tavily research backend to surface academic sources.';
-
-export const TAVILY_CONFIG: ProviderConfig = {
-  id: 'tavily',
-  heading: 'Connect to Tavily',
-  connectedHeading: 'Connected to Tavily',
-  tagline:
-    'Web search for the research stage. Required only when Tavily is the selected research backend.',
-  required: false,
-  costNote: TAVILY_COST_NOTE,
-  deepLink: 'https://tavily.com/',
-  deepLinkLabel: 'Open Tavily',
-  steps: [
-    { text: 'Sign up at tavily.com (free tier covers ~1,000 searches/month)' },
-    { text: 'Create an API key from the dashboard' },
-    { text: 'Paste it below and select Tavily as the research backend' },
-  ],
-  placeholder: 'tvly-...',
-  warnings: [
-    {
-      type: 'info',
-      text: 'Only needed when the research backend is set to Tavily. Wikipedia and Anthropic backends do not require this key.',
-    },
-  ],
-  validationFailHint:
-    'Check that you copied the full key from the Tavily dashboard and that you have remaining free-tier quota.',
-};
-
-export const PROVIDER_CONFIGS = [CLAUDE_CONFIG, OLLAMA_CONFIG, TAVILY_CONFIG, GEMINI_CONFIG] as const;
diff --git a/src/components/shared/ErrorBoundary.tsx b/src/components/shared/ErrorBoundary.tsx
index 1f05cb3..f50d32f 100644
--- a/src/components/shared/ErrorBoundary.tsx
+++ b/src/components/shared/ErrorBoundary.tsx
@@ -1,5 +1,5 @@
 import { Component } from 'react';
-import type { ReactNode, ErrorInfo } from 'react';
+import type { ReactNode, ErrorInfo, CSSProperties } from 'react';
 import { useUiStore } from '../../store/uiStore';
 
 interface Props {
@@ -24,7 +24,6 @@ export class ErrorBoundary extends Component<Props, State> {
 
   componentDidCatch(error: Error, info: ErrorInfo) {
     console.error('ErrorBoundary caught:', error, info.componentStack);
-    // Reset generating state so the header indicator doesn't get stuck
     useUiStore.getState().setIsGenerating(false);
   }
 
@@ -32,34 +31,106 @@ export class ErrorBoundary extends Component<Props, State> {
     if (this.state.hasError) {
       if (this.props.fallback) return this.props.fallback;
 
+      const wrapStyle: CSSProperties = {
+        maxWidth: 640,
+        margin: '0 auto',
+        padding: '80px 24px',
+        fontFamily: 'var(--font-cb-serif)',
+        color: 'var(--cb-text-default)',
+        textAlign: 'center',
+      };
+
       return (
-        <div className="max-w-xl mx-auto py-20 px-6 text-center">
-          <div className="w-16 h-16 mx-auto mb-6 rounded-2xl bg-error/10 flex items-center justify-center">
-            <svg className="w-8 h-8 text-error" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-              <circle cx="12" cy="12" r="10" />
-              <line x1="12" y1="8" x2="12" y2="12" />
-              <line x1="12" y1="16" x2="12.01" y2="16" />
-            </svg>
+        <div style={wrapStyle}>
+          <div
+            className="cb-sc"
+            style={{
+              fontSize: 12,
+              letterSpacing: '0.18em',
+              color: 'var(--cb-accent-emphasis)',
+              marginBottom: 6,
+            }}
+          >
+            something gave way
           </div>
-          <h2 className="text-xl font-bold mb-2">Something went wrong</h2>
-          <p className="text-text-secondary text-sm mb-2">
+          <h2
+            className="cb-italic"
+            style={{
+              margin: '0 0 10px',
+              fontSize: 34,
+              fontWeight: 500,
+              lineHeight: 1.1,
+              fontVariationSettings: '"opsz" 28',
+            }}
+          >
+            We caught it before it tipped over.
+          </h2>
+          <p
+            className="cb-italic"
+            style={{
+              margin: '0 auto 4px',
+              fontSize: 16,
+              lineHeight: 1.55,
+              color: 'var(--cb-text-muted)',
+              maxWidth: 520,
+            }}
+          >
             {this.state.error?.message || 'An unexpected error occurred.'}
           </p>
-          <p className="text-text-muted text-xs mb-6">
-            Your course data has been saved. You can safely reload.
+          <p
+            style={{
+              margin: '0 auto 28px',
+              fontSize: 13.5,
+              color: 'var(--cb-text-subtle)',
+              maxWidth: 520,
+              fontStyle: 'italic',
+            }}
+          >
+            Your course data is saved locally — reload is safe.
           </p>
-          <div className="flex items-center justify-center gap-3">
+          <div
+            style={{
+              display: 'flex',
+              justifyContent: 'center',
+              gap: 10,
+              flexWrap: 'wrap',
+            }}
+          >
             <button
+              type="button"
               onClick={() => this.setState({ hasError: false, error: null })}
-              className="px-4 py-2 rounded-lg bg-violet-500 text-white text-sm font-medium hover:bg-violet-600 transition cursor-pointer"
+              className="cb-mono cb-focus"
+              style={{
+                background: 'var(--cb-accent-emphasis)',
+                color: '#fff',
+                border: 0,
+                padding: '8px 16px',
+                borderRadius: 2,
+                fontSize: 12,
+                letterSpacing: '0.12em',
+                textTransform: 'uppercase',
+                cursor: 'pointer',
+              }}
             >
-              Try Again
+              Try again
             </button>
             <button
+              type="button"
               onClick={() => window.location.reload()}
-              className="px-4 py-2 rounded-lg bg-bg-elevated text-text-secondary text-sm font-medium hover:bg-bg-card transition cursor-pointer"
+              className="cb-mono cb-focus"
+              style={{
+                background: 'transparent',
+                color: 'var(--cb-text-muted)',
+                border: '1px solid var(--cb-border-default)',
+                padding: '8px 16px',
+                borderRadius: 2,
+                fontSize: 12,
+                letterSpacing: '0.12em',
+                textTransform: 'uppercase',
+                cursor: 'pointer',
+              }}
             >
-              Reload Page
+              Reload page
             </button>
           </div>
         </div>
diff --git a/src/components/syllabus/ChapterCard.tsx b/src/components/syllabus/ChapterCard.tsx
deleted file mode 100644
index c5da221..0000000
--- a/src/components/syllabus/ChapterCard.tsx
+++ /dev/null
@@ -1,164 +0,0 @@
-import { useState } from 'react';
-import { motion, AnimatePresence } from 'framer-motion';
-import type { ChapterSyllabus, SciencePrinciple } from '../../types/course';
-
-const scienceColors: Record<SciencePrinciple, { bg: string; text: string; label: string }> = {
-  spacing: { bg: 'bg-science-spacing/15', text: 'text-science-spacing', label: 'Spacing' },
-  interleaving: { bg: 'bg-science-interleaving/15', text: 'text-science-interleaving', label: 'Interleaving' },
-  retrieval: { bg: 'bg-science-retrieval/15', text: 'text-science-retrieval', label: 'Retrieval' },
-  examples: { bg: 'bg-science-examples/15', text: 'text-science-examples', label: 'Examples' },
-  'dual-coding': { bg: 'bg-science-dual-coding/15', text: 'text-science-dual-coding', label: 'Dual Coding' },
-};
-
-interface ChapterCardProps {
-  chapter: ChapterSyllabus;
-  showScience: boolean;
-}
-
-export function ChapterCard({ chapter, showScience }: ChapterCardProps) {
-  const [expanded, setExpanded] = useState(false);
-
-  return (
-    <div
-      className="bg-bg-card border border-violet-500/10 rounded-xl p-5 hover:border-violet-500/25 transition-colors cursor-pointer"
-      onClick={() => setExpanded(!expanded)}
-    >
-      <div className="flex items-start justify-between gap-4">
-        <div className="flex-1 min-w-0">
-          <div className="flex items-center gap-2 mb-1">
-            <span className="text-xs font-medium text-violet-400">
-              Class {chapter.number}
-            </span>
-            {chapter.spacingConnections.length > 0 && showScience && (
-              <span className="text-xs text-science-spacing">
-                ← Class {chapter.spacingConnections.join(', ')}
-              </span>
-            )}
-          </div>
-          <h3 className="text-lg font-semibold mb-2">{chapter.title}</h3>
-
-          <div className="flex flex-wrap gap-1.5 mb-3">
-            {chapter.keyConcepts.map((concept) => (
-              <span
-                key={concept}
-                className="px-2 py-0.5 text-xs rounded-full bg-bg-elevated text-text-secondary"
-              >
-                {concept}
-              </span>
-            ))}
-          </div>
-
-          {/* Science annotations */}
-          <AnimatePresence>
-            {showScience && (
-              <motion.div
-                initial={{ opacity: 0, height: 0 }}
-                animate={{ opacity: 1, height: 'auto' }}
-                exit={{ opacity: 0, height: 0 }}
-                className="flex flex-wrap gap-1.5 mb-3"
-              >
-                {chapter.scienceAnnotations.map((ann, i) => {
-                  const fallback = { bg: 'bg-violet-500/15', text: 'text-violet-400', label: ann.principle };
-                  const colors = scienceColors[ann.principle] || fallback;
-                  return (
-                    <motion.span
-                      key={i}
-                      initial={{ scale: 0 }}
-                      animate={{ scale: 1 }}
-                      transition={{ delay: i * 0.1 }}
-                      className={`px-2 py-0.5 text-xs rounded-full ${colors.bg} ${colors.text} cursor-help`}
-                      title={ann.description}
-                    >
-                      {colors.label}
-                      {ann.relatedChapters && ann.relatedChapters.length > 0 && (
-                        <span className="opacity-70"> → Class {ann.relatedChapters.join(', ')}</span>
-                      )}
-                    </motion.span>
-                  );
-                })}
-              </motion.div>
-            )}
-          </AnimatePresence>
-        </div>
-
-        <motion.svg
-          width="20"
-          height="20"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          strokeWidth="2"
-          className="text-text-muted shrink-0 mt-1"
-          animate={{ rotate: expanded ? 180 : 0 }}
-        >
-          <polyline points="6 9 12 15 18 9" />
-        </motion.svg>
-      </div>
-
-      <AnimatePresence>
-        {expanded && (
-          <motion.div
-            initial={{ opacity: 0, height: 0 }}
-            animate={{ opacity: 1, height: 'auto' }}
-            exit={{ opacity: 0, height: 0 }}
-            className="overflow-hidden"
-          >
-            <div className="pt-3 mt-3 border-t border-violet-500/10 space-y-4">
-              <p className="text-sm text-text-secondary leading-relaxed whitespace-pre-line">
-                {chapter.narrative}
-              </p>
-
-              {chapter.widgets.length > 0 && (
-                <div>
-                  <h4 className="text-xs font-medium text-text-muted uppercase tracking-wider mb-2">
-                    Interactive Widgets
-                  </h4>
-                  <div className="space-y-2">
-                    {chapter.widgets.map((widget, i) => (
-                      <div
-                        key={i}
-                        className="bg-bg-elevated rounded-lg p-3"
-                      >
-                        <div className="text-sm font-medium text-violet-400">
-                          {widget.title}
-                        </div>
-                        <div className="text-xs text-text-secondary mt-1">
-                          {widget.description}
-                        </div>
-                        <div className="text-xs text-text-muted mt-1 italic">
-                          Concept: {widget.concept} — {widget.rationale}
-                        </div>
-                      </div>
-                    ))}
-                  </div>
-                </div>
-              )}
-
-              {showScience && chapter.scienceAnnotations.length > 0 && (
-                <div>
-                  <h4 className="text-xs font-medium text-text-muted uppercase tracking-wider mb-2">
-                    Learning Science
-                  </h4>
-                  <div className="space-y-1.5">
-                    {chapter.scienceAnnotations.map((ann, i) => {
-                      const fallback = { bg: 'bg-violet-500/15', text: 'text-violet-400', label: ann.principle };
-                      const colors = scienceColors[ann.principle] || fallback;
-                      return (
-                        <div key={i} className="flex items-start gap-2 text-xs">
-                          <span className={`px-1.5 py-0.5 rounded ${colors.bg} ${colors.text} shrink-0`}>
-                            {colors.label}
-                          </span>
-                          <span className="text-text-secondary">{ann.description}</span>
-                        </div>
-                      );
-                    })}
-                  </div>
-                </div>
-              )}
-            </div>
-          </motion.div>
-        )}
-      </AnimatePresence>
-    </div>
-  );
-}
diff --git a/src/components/syllabus/CurriculumMapPanel.tsx b/src/components/syllabus/CurriculumMapPanel.tsx
deleted file mode 100644
index e8b0b7e..0000000
--- a/src/components/syllabus/CurriculumMapPanel.tsx
+++ /dev/null
@@ -1,217 +0,0 @@
-import { useState, useCallback } from 'react';
-import { motion } from 'framer-motion';
-import { useCourseStore } from '../../store/courseStore';
-import { useApiStore } from '../../store/apiStore';
-import { streamMessage } from '../../services/claude/streaming';
-import {
-  buildLearningObjectivesPrompt,
-  buildLearningObjectivesUserPrompt,
-  parseCurriculumMapResponse,
-} from '../../prompts/learningObjectives';
-import { Button } from '../shared/Button';
-import type { AlignmentLevel } from '../../types/course';
-import { friendlyError } from '../../utils/errors';
-
-const ALIGNMENT_STYLES: Record<AlignmentLevel, { label: string; bg: string; text: string }> = {
-  introduced: { label: 'I', bg: 'bg-blue-500/15', text: 'text-blue-400' },
-  developed: { label: 'D', bg: 'bg-violet-500/15', text: 'text-violet-400' },
-  mastered: { label: 'M', bg: 'bg-amber-500/15', text: 'text-amber-400' },
-};
-
-const BLOOM_COLORS: Record<string, string> = {
-  remember: 'bg-slate-500/15 text-slate-400',
-  understand: 'bg-blue-500/15 text-blue-400',
-  apply: 'bg-emerald-500/15 text-emerald-400',
-  analyze: 'bg-violet-500/15 text-violet-400',
-  evaluate: 'bg-amber-500/15 text-amber-400',
-  create: 'bg-rose-500/15 text-rose-400',
-};
-
-export function CurriculumMapPanel() {
-  const { syllabus, curriculumMap, setCurriculumMap } = useCourseStore();
-  const { claudeApiKey } = useApiStore();
-  const [isGenerating, setIsGenerating] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  const handleGenerate = useCallback(async () => {
-    if (!syllabus || !claudeApiKey) return;
-    setIsGenerating(true);
-    setError(null);
-
-    try {
-      const fullText = await streamMessage(
-        {
-          apiKey: claudeApiKey,
-          system: buildLearningObjectivesPrompt(),
-          messages: [{ role: 'user', content: buildLearningObjectivesUserPrompt(syllabus) }],
-          thinkingBudget: 'medium',
-          maxTokens: 4000,
-        },
-        { onError: (err) => setError(err.message) }
-      );
-
-      const parsed = parseCurriculumMapResponse(fullText);
-      if (parsed) {
-        setCurriculumMap(parsed);
-      } else {
-        setError('Failed to parse curriculum map. Try regenerating.');
-      }
-    } catch (err) {
-      setError(friendlyError(err, 'Curriculum map generation failed.'));
-    } finally {
-      setIsGenerating(false);
-    }
-  }, [syllabus, claudeApiKey, setCurriculumMap]);
-
-  if (!syllabus) return null;
-
-  const chapterNumbers = syllabus.chapters.map((ch) => ch.number);
-
-  // Not yet generated
-  if (!curriculumMap && !isGenerating) {
-    return (
-      <motion.div
-        initial={{ opacity: 0, y: 10 }}
-        animate={{ opacity: 1, y: 0 }}
-        exit={{ opacity: 0, y: 10 }}
-        className="mt-8 bg-bg-card border border-violet-500/15 rounded-xl p-6"
-      >
-        <div className="flex items-center gap-2 mb-3">
-          <svg className="w-4 h-4 text-violet-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-            <rect x="3" y="3" width="7" height="7" rx="1" />
-            <rect x="14" y="3" width="7" height="7" rx="1" />
-            <rect x="3" y="14" width="7" height="7" rx="1" />
-            <rect x="14" y="14" width="7" height="7" rx="1" />
-          </svg>
-          <h3 className="text-sm font-semibold text-text-primary">Curriculum Alignment Matrix</h3>
-        </div>
-        <p className="text-sm text-text-secondary mb-4">
-          Generate a curriculum map that aligns learning objectives to chapters using Bloom&apos;s taxonomy.
-          Each objective is tracked as Introduced (I), Developed (D), and Mastered (M) across the course.
-        </p>
-        {error && (
-          <div className="mb-4 p-3 rounded-lg bg-error/10 border border-error/20 text-error text-sm">{error}</div>
-        )}
-        <Button size="sm" onClick={handleGenerate}>
-          Generate Curriculum Map
-        </Button>
-      </motion.div>
-    );
-  }
-
-  // Generating
-  if (isGenerating) {
-    return (
-      <motion.div
-        initial={{ opacity: 0, y: 10 }}
-        animate={{ opacity: 1, y: 0 }}
-        exit={{ opacity: 0, y: 10 }}
-        className="mt-8 bg-bg-card border border-violet-500/15 rounded-xl p-6"
-      >
-        <div className="flex items-center gap-3">
-          <div className="relative">
-            <div className="w-3 h-3 rounded-full bg-violet-500" />
-            <div className="absolute inset-0 w-3 h-3 rounded-full bg-violet-500 animate-ping" />
-          </div>
-          <span className="text-sm font-medium text-violet-400">
-            Generating curriculum map...
-          </span>
-        </div>
-      </motion.div>
-    );
-  }
-
-  // Generated — show matrix
-  const objectives = curriculumMap!.objectives;
-
-  return (
-    <motion.div
-      initial={{ opacity: 0, y: 10 }}
-      animate={{ opacity: 1, y: 0 }}
-      exit={{ opacity: 0, y: 10 }}
-      className="mt-8 bg-bg-card border border-violet-500/15 rounded-xl p-6"
-    >
-      {/* Header */}
-      <div className="flex items-center justify-between mb-5">
-        <h3 className="text-sm font-semibold text-text-primary flex items-center gap-2">
-          <svg className="w-4 h-4 text-violet-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-            <rect x="3" y="3" width="7" height="7" rx="1" />
-            <rect x="14" y="3" width="7" height="7" rx="1" />
-            <rect x="3" y="14" width="7" height="7" rx="1" />
-            <rect x="14" y="14" width="7" height="7" rx="1" />
-          </svg>
-          Curriculum Alignment Matrix
-        </h3>
-        <div className="flex items-center gap-3">
-          <span className="text-xs text-text-muted">
-            {objectives.length} objectives &middot; {chapterNumbers.length} chapters
-          </span>
-          <Button size="sm" variant="secondary" onClick={handleGenerate} disabled={isGenerating}>
-            Regenerate
-          </Button>
-        </div>
-      </div>
-
-      {error && (
-        <div className="mb-4 p-3 rounded-lg bg-error/10 border border-error/20 text-error text-sm">{error}</div>
-      )}
-
-      {/* Matrix table */}
-      <div className="overflow-x-auto">
-        <table className="w-full text-xs border-collapse">
-          <thead>
-            <tr className="border-b border-violet-500/10">
-              <th className="text-left py-2 pr-3 font-medium text-text-muted sticky left-0 bg-bg-card z-10 w-16">Bloom</th>
-              <th className="text-left py-2 pr-3 font-medium text-text-muted sticky left-16 bg-bg-card z-10 max-w-[280px]">Objective</th>
-              {chapterNumbers.map((num) => (
-                <th key={num} className="py-2 font-medium text-text-muted text-center w-9">{num}</th>
-              ))}
-            </tr>
-          </thead>
-          <tbody>
-            {objectives.map((obj) => (
-              <tr key={obj.id} className="border-b border-violet-500/5 hover:bg-violet-500/5 transition-colors">
-                <td className="py-2 pr-3 sticky left-0 bg-bg-card z-10">
-                  <span className={`inline-block px-1.5 py-0.5 rounded text-[10px] font-medium capitalize ${BLOOM_COLORS[obj.bloomLevel] || ''}`}>
-                    {obj.bloomLevel}
-                  </span>
-                </td>
-                <td className="py-2 pr-3 sticky left-16 bg-bg-card z-10 max-w-[280px] truncate text-text-secondary" title={obj.text}>
-                  {obj.text}
-                </td>
-                {chapterNumbers.map((num) => {
-                  const level = obj.alignments[num];
-                  if (!level) return <td key={num} className="py-2 text-center" />;
-                  const style = ALIGNMENT_STYLES[level];
-                  return (
-                    <td key={num} className="py-2 text-center">
-                      <span className={`inline-flex items-center justify-center w-6 h-6 rounded text-[10px] font-bold ${style.bg} ${style.text}`}>
-                        {style.label}
-                      </span>
-                    </td>
-                  );
-                })}
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
-
-      {/* Legend */}
-      <div className="flex items-center gap-4 mt-4 pt-3 border-t border-violet-500/10">
-        <span className="text-xs text-text-muted">Legend:</span>
-        {(['introduced', 'developed', 'mastered'] as AlignmentLevel[]).map((level) => {
-          const style = ALIGNMENT_STYLES[level];
-          return (
-            <div key={level} className="flex items-center gap-1.5">
-              <span className={`inline-flex items-center justify-center w-5 h-5 rounded text-[10px] font-bold ${style.bg} ${style.text}`}>
-                {style.label}
-              </span>
-              <span className="text-xs text-text-muted capitalize">{level}</span>
-            </div>
-          );
-        })}
-      </div>
-    </motion.div>
-  );
-}
diff --git a/src/components/syllabus/InlineFeedback.tsx b/src/components/syllabus/InlineFeedback.tsx
deleted file mode 100644
index fd212b2..0000000
--- a/src/components/syllabus/InlineFeedback.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import { useState } from 'react';
-import { motion } from 'framer-motion';
-import { Button } from '../shared/Button';
-
-interface InlineFeedbackProps {
-  onSubmit: (feedback: string) => void;
-  isLoading: boolean;
-}
-
-export function InlineFeedback({ onSubmit, isLoading }: InlineFeedbackProps) {
-  const [feedback, setFeedback] = useState('');
-  const [isOpen, setIsOpen] = useState(false);
-
-  const handleSubmit = () => {
-    if (feedback.trim()) {
-      onSubmit(feedback.trim());
-      setFeedback('');
-    }
-  };
-
-  if (!isOpen) {
-    return (
-      <motion.div
-        initial={{ opacity: 0 }}
-        animate={{ opacity: 1 }}
-        className="text-center"
-      >
-        <Button variant="ghost" onClick={() => setIsOpen(true)}>
-          <svg className="mr-2 w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-            <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
-            <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
-          </svg>
-          Refine this syllabus
-        </Button>
-      </motion.div>
-    );
-  }
-
-  return (
-    <motion.div
-      initial={{ opacity: 0, y: 10 }}
-      animate={{ opacity: 1, y: 0 }}
-      className="bg-bg-card border border-violet-500/15 rounded-xl p-5"
-    >
-      <h3 className="text-sm font-medium text-text-primary mb-3">
-        What would you like to change?
-      </h3>
-      <textarea
-        value={feedback}
-        onChange={(e) => setFeedback(e.target.value)}
-        placeholder="e.g., Move the statistics chapter earlier, add more focus on qualitative methods, make the widget descriptions more specific..."
-        className="w-full bg-bg-elevated border border-violet-500/20 rounded-lg px-4 py-3 text-sm text-text-primary placeholder:text-text-muted focus:outline-none focus:border-violet-500/50 resize-none transition-all"
-        rows={3}
-      />
-      <div className="flex items-center justify-between mt-3">
-        <button
-          type="button"
-          onClick={() => { setIsOpen(false); setFeedback(''); }}
-          className="text-sm text-text-muted hover:text-text-secondary cursor-pointer"
-        >
-          Cancel
-        </button>
-        <Button
-          size="sm"
-          onClick={handleSubmit}
-          isLoading={isLoading}
-          disabled={!feedback.trim()}
-        >
-          Regenerate Syllabus
-        </Button>
-      </div>
-    </motion.div>
-  );
-}
diff --git a/src/components/syllabus/ScienceOverlay.tsx b/src/components/syllabus/ScienceOverlay.tsx
deleted file mode 100644
index ba94e20..0000000
--- a/src/components/syllabus/ScienceOverlay.tsx
+++ /dev/null
@@ -1,100 +0,0 @@
-import { motion } from 'framer-motion';
-import type { ChapterSyllabus, SciencePrinciple } from '../../types/course';
-import { SpacingArcs } from './SpacingArcs';
-
-const legendItems: { principle: SciencePrinciple; color: string; label: string; description: string }[] = [
-  { principle: 'spacing', color: '#8b5cf6', label: 'Spacing', description: 'Key concepts reappear across chapters' },
-  { principle: 'interleaving', color: '#06b6d4', label: 'Interleaving', description: 'Related topics mixed across practice' },
-  { principle: 'retrieval', color: '#f59e0b', label: 'Retrieval Practice', description: 'Built-in opportunities to test recall' },
-  { principle: 'examples', color: '#22c55e', label: 'Concrete Examples', description: 'Abstract theories grounded in reality' },
-  { principle: 'dual-coding', color: '#3b82f6', label: 'Dual Coding', description: 'Verbal + visual presentation' },
-];
-
-interface ScienceOverlayProps {
-  chapters: ChapterSyllabus[];
-}
-
-export function ScienceOverlay({ chapters }: ScienceOverlayProps) {
-  const counts = new Map<SciencePrinciple, number>();
-  let totalAnnotations = 0;
-  for (const ch of chapters) {
-    for (const ann of ch.scienceAnnotations) {
-      counts.set(ann.principle, (counts.get(ann.principle) || 0) + 1);
-      totalAnnotations++;
-    }
-  }
-
-  return (
-    <motion.div
-      initial={{ opacity: 0, y: 10 }}
-      animate={{ opacity: 1, y: 0 }}
-      exit={{ opacity: 0, y: 10 }}
-      className="mt-8 bg-bg-card border border-violet-500/15 rounded-xl p-6"
-    >
-      {/* Header */}
-      <div className="flex items-center justify-between mb-5">
-        <h3 className="text-sm font-semibold text-text-primary flex items-center gap-2">
-          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-            <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
-          </svg>
-          Learning Science Architecture
-        </h3>
-        <span className="text-xs text-text-muted">
-          {totalAnnotations} annotations across {chapters.length} chapters
-        </span>
-      </div>
-
-      {/* Principle counters */}
-      <div className="grid grid-cols-5 gap-3 mb-6">
-        {legendItems.map((item, i) => {
-          const count = counts.get(item.principle) || 0;
-          const percentage = totalAnnotations > 0 ? Math.round((count / totalAnnotations) * 100) : 0;
-          return (
-            <motion.div
-              key={item.principle}
-              initial={{ opacity: 0, y: 10 }}
-              animate={{ opacity: 1, y: 0 }}
-              transition={{ delay: i * 0.08 }}
-              className="text-center"
-            >
-              <div className="relative mx-auto mb-2 w-12 h-12">
-                {/* Background ring */}
-                <svg className="w-12 h-12 -rotate-90" viewBox="0 0 36 36">
-                  <circle cx="18" cy="18" r="15" fill="none" stroke={`${item.color}15`} strokeWidth="3" />
-                  <motion.circle
-                    cx="18" cy="18" r="15" fill="none"
-                    stroke={item.color}
-                    strokeWidth="3"
-                    strokeDasharray={`${percentage} ${100 - percentage}`}
-                    strokeLinecap="round"
-                    initial={{ strokeDasharray: '0 100' }}
-                    animate={{ strokeDasharray: `${percentage} ${100 - percentage}` }}
-                    transition={{ duration: 1, delay: i * 0.1, ease: 'easeOut' }}
-                  />
-                </svg>
-                <div
-                  className="absolute inset-0 flex items-center justify-center text-sm font-bold"
-                  style={{ color: item.color }}
-                >
-                  {count}
-                </div>
-              </div>
-              <div className="text-xs font-medium" style={{ color: item.color }}>
-                {item.label}
-              </div>
-              <div className="text-[10px] text-text-muted mt-0.5">{item.description}</div>
-            </motion.div>
-          );
-        })}
-      </div>
-
-      {/* Spacing arcs visualization */}
-      <div className="border-t border-violet-500/10 pt-5">
-        <h4 className="text-xs font-medium text-text-muted uppercase tracking-wider mb-2">
-          Spacing Connections — concepts revisited across chapters
-        </h4>
-        <SpacingArcs chapters={chapters} />
-      </div>
-    </motion.div>
-  );
-}
diff --git a/src/components/syllabus/SpacingArcs.tsx b/src/components/syllabus/SpacingArcs.tsx
deleted file mode 100644
index 6a58ab5..0000000
--- a/src/components/syllabus/SpacingArcs.tsx
+++ /dev/null
@@ -1,131 +0,0 @@
-import { motion } from 'framer-motion';
-import type { ChapterSyllabus } from '../../types/course';
-
-interface SpacingArcsProps {
-  chapters: ChapterSyllabus[];
-}
-
-/**
- * SVG visualization of spacing connections between chapters.
- * Draws curved arcs from each chapter to the chapters it references,
- * creating a visual web showing how concepts are revisited.
- */
-export function SpacingArcs({ chapters }: SpacingArcsProps) {
-  // Collect all connections
-  const connections: { from: number; to: number }[] = [];
-  for (const ch of chapters) {
-    for (const target of ch.spacingConnections) {
-      connections.push({ from: ch.number, to: target });
-    }
-  }
-
-  if (connections.length === 0) return null;
-
-  const totalChapters = chapters.length;
-  const nodeSpacing = 72;
-  const svgWidth = totalChapters * nodeSpacing;
-  const maxArcHeight = 80;
-  const nodeY = maxArcHeight + 30;
-  const svgHeight = nodeY + 40;
-
-  function getX(chapterNum: number): number {
-    return (chapterNum - 1) * nodeSpacing + nodeSpacing / 2;
-  }
-
-  function getArcPath(from: number, to: number): string {
-    const x1 = getX(Math.min(from, to));
-    const x2 = getX(Math.max(from, to));
-    const span = Math.abs(from - to);
-    const arcHeight = Math.min(maxArcHeight, 20 + span * 12);
-    const midX = (x1 + x2) / 2;
-    const midY = nodeY - arcHeight;
-
-    return `M ${x1} ${nodeY} Q ${midX} ${midY} ${x2} ${nodeY}`;
-  }
-
-  return (
-    <div className="overflow-x-auto mt-6 pb-2">
-      <svg
-        width={svgWidth}
-        height={svgHeight}
-        viewBox={`0 0 ${svgWidth} ${svgHeight}`}
-        className="mx-auto"
-      >
-        {/* Connection arcs */}
-        {connections.map(({ from, to }, i) => (
-          <motion.path
-            key={`${from}-${to}`}
-            d={getArcPath(from, to)}
-            fill="none"
-            stroke="#8b5cf6"
-            strokeWidth="1.5"
-            strokeOpacity="0.4"
-            strokeDasharray="4 3"
-            initial={{ pathLength: 0, opacity: 0 }}
-            animate={{ pathLength: 1, opacity: 1 }}
-            transition={{ duration: 0.8, delay: i * 0.15, ease: 'easeOut' }}
-          />
-        ))}
-
-        {/* Chapter nodes */}
-        {chapters.map((ch, i) => {
-          const x = getX(ch.number);
-          const hasConnections = connections.some(
-            c => c.from === ch.number || c.to === ch.number
-          );
-          return (
-            <motion.g
-              key={ch.number}
-              initial={{ opacity: 0, scale: 0 }}
-              animate={{ opacity: 1, scale: 1 }}
-              transition={{ delay: i * 0.05, duration: 0.3 }}
-            >
-              {/* Node glow */}
-              {hasConnections && (
-                <circle
-                  cx={x}
-                  cy={nodeY}
-                  r="14"
-                  fill="#8b5cf6"
-                  fillOpacity="0.1"
-                />
-              )}
-              {/* Node circle */}
-              <circle
-                cx={x}
-                cy={nodeY}
-                r="10"
-                fill={hasConnections ? '#1a1a2e' : '#252540'}
-                stroke={hasConnections ? '#8b5cf6' : '#64748b'}
-                strokeWidth={hasConnections ? '2' : '1'}
-              />
-              {/* Chapter number */}
-              <text
-                x={x}
-                y={nodeY + 4}
-                textAnchor="middle"
-                fill={hasConnections ? '#a78bfa' : '#94a3b8'}
-                fontSize="10"
-                fontWeight="600"
-                fontFamily="Inter, system-ui, sans-serif"
-              >
-                {ch.number}
-              </text>
-              {/* Label */}
-              <text
-                x={x}
-                y={nodeY + 28}
-                textAnchor="middle"
-                fill="#64748b"
-                fontSize="8"
-                fontFamily="Inter, system-ui, sans-serif"
-              >
-                {ch.title.length > 10 ? ch.title.slice(0, 10) + '...' : ch.title}
-              </text>
-            </motion.g>
-          );
-        })}
-      </svg>
-    </div>
-  );
-}
diff --git a/src/components/syllabus/SyllabusTimeline.tsx b/src/components/syllabus/SyllabusTimeline.tsx
deleted file mode 100644
index 36dab99..0000000
--- a/src/components/syllabus/SyllabusTimeline.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import { motion } from 'framer-motion';
-import type { ChapterSyllabus } from '../../types/course';
-import { ChapterCard } from './ChapterCard';
-
-interface SyllabusTimelineProps {
-  chapters: ChapterSyllabus[];
-  showScience: boolean;
-}
-
-export function SyllabusTimeline({ chapters, showScience }: SyllabusTimelineProps) {
-  return (
-    <motion.div
-      initial={{ opacity: 0 }}
-      animate={{ opacity: 1 }}
-      className="relative"
-    >
-      {/* Timeline line */}
-      <div className="absolute left-6 top-0 bottom-0 w-px bg-gradient-to-b from-violet-500/40 via-violet-500/20 to-transparent" />
-
-      <div className="space-y-6">
-        {chapters.map((chapter, i) => (
-          <motion.div
-            key={chapter.number}
-            initial={{ opacity: 0, x: -20 }}
-            animate={{ opacity: 1, x: 0 }}
-            transition={{ delay: i * 0.08, duration: 0.4 }}
-            className="relative pl-16"
-          >
-            {/* Timeline node */}
-            <div className="absolute left-3.5 top-6 w-5 h-5 rounded-full bg-bg-primary border-2 border-violet-500 z-10">
-              <motion.div
-                className="absolute inset-1 rounded-full bg-violet-500"
-                initial={{ scale: 0 }}
-                animate={{ scale: 1 }}
-                transition={{ delay: i * 0.08 + 0.2 }}
-              />
-            </div>
-
-            <ChapterCard chapter={chapter} showScience={showScience} />
-          </motion.div>
-        ))}
-      </div>
-    </motion.div>
-  );
-}
diff --git a/src/index.css b/src/index.css
index 06eee61..d0eeafd 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,53 +1,214 @@
+/* Codex fonts — Newsreader for prose, JetBrains Mono for code/metadata,
+   Noto Serif JP as CJK fallback. Must precede @import "tailwindcss". */
+@import url("https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;0,6..72,500;0,6..72,600;0,6..72,700;1,6..72,400;1,6..72,500;1,6..72,600&family=JetBrains+Mono:wght@300;400;500;600&family=Noto+Serif+JP:wght@300;400;500;600;700&display=swap");
 @import "tailwindcss";
 
 @theme {
-  /* Background */
+  /* ───────── Codex (SPA chrome) — Parchment defaults ───────── */
+  --color-cb-ground-page:        #f1ebdd;
+  --color-cb-ground-canvas:      #f8f3e6;
+  --color-cb-surface-default:    #f1ebdd;
+  --color-cb-surface-raised:     #f8f3e6;
+  --color-cb-surface-sunken:     #e8dfc7;
+  --color-cb-surface-well:       #ddd1b3;
+  --color-cb-neutral-1:          #e8dfc7;
+  --color-cb-neutral-2:          #cfc6ad;
+  --color-cb-neutral-3:          #a89f88;
+  --color-cb-neutral-4:          #7c7464;
+  --color-cb-neutral-5:          #5d574a;
+  --color-cb-neutral-6:          #3e3a32;
+  --color-cb-neutral-7:          #25221d;
+  --color-cb-text-default:       #1a1814;
+  --color-cb-text-muted:         #5d574a;
+  --color-cb-text-subtle:        #7c7464;
+  --color-cb-text-inverse:       #f8f3e6;
+  --color-cb-accent-emphasis:    #c72a26;
+  --color-cb-accent-emphasis-hv: #a92218;
+  --color-cb-accent-emphasis-ac: #8a1b12;
+  --color-cb-accent-emphasis-quiet: rgba(199,42,38,0.10);
+  --color-cb-accent-link:        #1f2e4a;
+  --color-cb-accent-link-hv:     #2a4068;
+  --color-cb-accent-gilt:        #a8854a;
+  --color-cb-status-success:     #3d5c33;
+  --color-cb-status-warning:     #b07a1f;
+  --color-cb-status-danger:      #a8332b;
+  --color-cb-status-info:        #1f2e4a;
+  --color-cb-focus-ring:         #1f2e4a;
+
+  --font-cb-serif: "Newsreader", "Source Serif 4", Georgia, serif;
+  --font-cb-mono:  "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
+  --font-cb-cjk:   "Noto Serif JP", "Newsreader", serif;
+
+  /* Type scale (px). Bumped from the original Codex spec for real-world reading.
+     opsz values track each step so the type stays optically tuned across sizes. */
+  --text-cb-display-2xl: 96px;
+  --text-cb-display-xl:  72px;
+  --text-cb-display-lg:  60px;
+  --text-cb-h1:          46px;
+  --text-cb-h2:          34px;
+  --text-cb-h3:          26px;
+  --text-cb-h4:          22px;
+  --text-cb-h5:          19px;
+  --text-cb-overline:    13px;
+  --text-cb-body-lg:     20px;
+  --text-cb-body:        17px;
+  --text-cb-body-sm:     15px;
+  --text-cb-caption:     14.5px;
+  --text-cb-mono-lg:     15px;
+  --text-cb-mono:        13.5px;
+  --text-cb-mono-sm:     12px;
+
+  /* ───────── Legacy — retained while other pages still render in the
+     previous violet/dark scheme. Removed once those pages adopt Codex. */
   --color-bg-primary: #0f0f1a;
   --color-bg-card: #1a1a2e;
   --color-bg-elevated: #252540;
   --color-bg-hover: #2a2a4a;
 
-  /* Accent — Canvas LMS palette. Token names kept as `violet-*` to avoid a
-     codebase-wide class rename; values render as Canvas red/orange so the UI
-     visually aligns with Instructure's signature accent. */
-  --color-violet-400: #ee6c4d; /* hover / highlight */
-  --color-violet-500: #e13f2a; /* primary CTA / brand */
-  --color-violet-600: #c72a26; /* active / pressed */
-  --color-violet-700: #a92218; /* focus ring / deepest */
+  --color-violet-400: #ee6c4d;
+  --color-violet-500: #e13f2a;
+  --color-violet-600: #c72a26;
+  --color-violet-700: #a92218;
 
-  /* Warm accent - Amber */
   --color-amber-400: #fbbf24;
   --color-amber-500: #f59e0b;
 
-  /* Science overlay colors */
   --color-science-spacing: #8b5cf6;
   --color-science-interleaving: #06b6d4;
   --color-science-retrieval: #f59e0b;
   --color-science-examples: #22c55e;
   --color-science-dual-coding: #3b82f6;
 
-  /* Text */
   --color-text-primary: #f1f5f9;
   --color-text-secondary: #94a3b8;
   --color-text-muted: #64748b;
 
-  /* Status */
   --color-success: #22c55e;
   --color-error: #ef4444;
   --color-warning: #f59e0b;
 
-  /* Fonts */
   --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
   --font-serif: 'Source Serif 4', 'Georgia', serif;
 }
 
+/* ───────── Codex CSS variables — referenced by inline styles in
+   src/components/codex/*. Kept in sync with the @theme block above. */
+:root,
+[data-codex-mode="parchment"] {
+  --cb-ground-page:       #f1ebdd;
+  --cb-ground-canvas:     #f8f3e6;
+  --cb-surface-default:   #f1ebdd;
+  --cb-surface-raised:    #f8f3e6;
+  --cb-surface-sunken:    #e8dfc7;
+  --cb-surface-well:      #ddd1b3;
+  --cb-neutral-1: #e8dfc7;
+  --cb-neutral-2: #cfc6ad;
+  --cb-neutral-3: #a89f88;
+  --cb-neutral-4: #7c7464;
+  --cb-neutral-5: #5d574a;
+  --cb-neutral-6: #3e3a32;
+  --cb-neutral-7: #25221d;
+  --cb-text-default: #1a1814;
+  --cb-text-muted:   #5d574a;
+  /* Darkened from #7c7464 (3.9:1 on parchment) to clear WCAG AA 4.5:1
+     for the small text that uses it. */
+  --cb-text-subtle:  #6e6757;
+  --cb-text-inverse: #f8f3e6;
+  --cb-border-subtle:  rgba(26,24,20,0.08);
+  --cb-border-default: rgba(26,24,20,0.14);
+  --cb-border-strong:  rgba(26,24,20,0.35);
+  --cb-border-rule:    rgba(26,24,20,0.55);
+  --cb-accent-emphasis:        #c72a26;
+  --cb-accent-emphasis-hover:  #a92218;
+  --cb-accent-emphasis-active: #8a1b12;
+  --cb-accent-emphasis-quiet:  rgba(199,42,38,0.10);
+  --cb-accent-link:            #1f2e4a;
+  --cb-accent-link-hover:      #2a4068;
+  --cb-accent-link-visited:    #4a3a68;
+  --cb-accent-gilt:            #a8854a;
+  --cb-status-success:    #3d5c33;
+  --cb-status-success-bg: rgba(61,92,51,0.10);
+  --cb-status-warning:    #b07a1f;
+  --cb-status-warning-bg: rgba(176,122,31,0.12);
+  --cb-status-danger:     #a8332b;
+  --cb-status-danger-bg:  rgba(168,51,43,0.10);
+  --cb-status-info:       #1f2e4a;
+  --cb-status-info-bg:    rgba(31,46,74,0.08);
+  --cb-focus-ring:        #1f2e4a;
+  --cb-focus-ring-offset: #f1ebdd;
+  --cb-shadow-sheet: 0 1px 0 rgba(26,24,20,0.04), 0 18px 50px -28px rgba(26,24,20,0.32);
+  --cb-shadow-modal: 0 2px 0 rgba(26,24,20,0.06), 0 28px 80px -32px rgba(26,24,20,0.42);
+
+  --cb-duration-1: 120ms;
+  --cb-duration-2: 200ms;
+  --cb-duration-3: 320ms;
+  --cb-duration-4: 500ms;
+  --cb-ease-paper: cubic-bezier(0.32, 0.04, 0.32, 1);
+  --cb-ease-quick: cubic-bezier(0.4, 0, 0.2, 1);
+  --cb-ease-out:   cubic-bezier(0, 0, 0.22, 1);
+}
+
+[data-codex-mode="vespers"] {
+  --cb-ground-page:       #1c1a16;
+  --cb-ground-canvas:     #16140f;
+  --cb-surface-default:   #1c1a16;
+  --cb-surface-raised:    #272320;
+  --cb-surface-sunken:    #100e0a;
+  --cb-surface-well:      #0a0907;
+  --cb-neutral-1: #272320;
+  --cb-neutral-2: #3a3530;
+  --cb-neutral-3: #524c43;
+  --cb-neutral-4: #756d5e;
+  --cb-neutral-5: #9a9080;
+  --cb-neutral-6: #b6ad9a;
+  --cb-neutral-7: #d6cbb5;
+  --cb-text-default: #ebe1cb;
+  --cb-text-muted:   #9a9080;
+  /* Lightened from #756d5e (3.4:1 on the vespers ground) to clear AA. */
+  --cb-text-subtle:  #8c8373;
+  --cb-text-inverse: #1a1814;
+  --cb-border-subtle:  rgba(235,225,203,0.08);
+  --cb-border-default: rgba(235,225,203,0.14);
+  --cb-border-strong:  rgba(235,225,203,0.32);
+  --cb-border-rule:    rgba(235,225,203,0.55);
+  --cb-accent-emphasis:        #ee6c4d;
+  --cb-accent-emphasis-hover:  #f58468;
+  --cb-accent-emphasis-active: #e13f2a;
+  --cb-accent-emphasis-quiet:  rgba(238,108,77,0.14);
+  --cb-accent-link:            #9bb4d6;
+  --cb-accent-link-hover:      #b3c6e0;
+  --cb-accent-link-visited:    #b09cd1;
+  --cb-accent-gilt:            #a8854a;
+  --cb-status-success:    #86a574;
+  --cb-status-success-bg: rgba(134,165,116,0.14);
+  --cb-status-warning:    #d4a04e;
+  --cb-status-warning-bg: rgba(212,160,78,0.14);
+  --cb-status-danger:     #d97070;
+  --cb-status-danger-bg:  rgba(217,112,112,0.14);
+  --cb-status-info:       #9bb4d6;
+  --cb-status-info-bg:    rgba(155,180,214,0.10);
+  --cb-focus-ring:        #c6924e;
+  --cb-focus-ring-offset: #1c1a16;
+  --cb-shadow-sheet: 0 1px 0 rgba(0,0,0,0.30), 0 18px 50px -22px rgba(0,0,0,0.65);
+  --cb-shadow-modal: 0 2px 0 rgba(0,0,0,0.40), 0 28px 80px -28px rgba(0,0,0,0.78);
+}
+
+/* The chrome (header + page background) lives on the Codex Parchment ground
+   even when route-specific content is still in the legacy palette. Individual
+   pages can override `[data-codex-page]` on their root to apply the parchment
+   page treatment; until they do, they keep their legacy backgrounds. */
 @layer base {
   html {
-    background-color: var(--color-bg-primary);
-    color: var(--color-text-primary);
-    font-family: var(--font-sans);
+    background-color: var(--cb-ground-page);
+    color: var(--cb-text-default);
+    font-family: var(--font-cb-serif);
+    font-feature-settings: "kern", "liga", "calt";
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizeLegibility;
+    /* Anchored links (e.g. landing "See example courses ↓") glide; the
+       prefers-reduced-motion block below restores instant jumps. */
+    scroll-behavior: smooth;
   }
 
   body {
@@ -55,21 +216,264 @@
     margin: 0;
   }
 
+  /* CJK locale fallback */
+  :lang(ja),
+  :lang(zh) {
+    font-family: var(--font-cb-cjk);
+  }
+
+  /* Editorial selection — quiet, not loud */
   ::selection {
-    background-color: color-mix(in srgb, var(--color-violet-500) 40%, transparent);
+    background-color: var(--cb-accent-emphasis-quiet);
+    color: var(--cb-text-default);
   }
 
+  /* Scrollbars in the Codex palette */
   ::-webkit-scrollbar {
-    width: 8px;
+    width: 10px;
+    height: 10px;
   }
   ::-webkit-scrollbar-track {
-    background: var(--color-bg-primary);
+    background: var(--cb-surface-sunken);
   }
   ::-webkit-scrollbar-thumb {
-    background: var(--color-bg-elevated);
-    border-radius: 4px;
+    background: var(--cb-neutral-3);
+    border: 2px solid var(--cb-surface-sunken);
+    border-radius: 6px;
   }
   ::-webkit-scrollbar-thumb:hover {
-    background: var(--color-violet-500);
+    background: var(--cb-neutral-4);
+  }
+}
+
+/* ───────── Codex utility classes used by primitives & pages ───────── */
+.cb-sc {
+  font-variant-caps: all-small-caps;
+  letter-spacing: 0.14em;
+}
+
+.cb-italic {
+  font-style: italic;
+}
+
+.cb-mono {
+  font-family: var(--font-cb-mono);
+}
+
+/* Focus ring — only on keyboard navigation. */
+.cb-focus:focus-visible,
+.cb-focus :focus-visible {
+  outline: 2px solid var(--cb-focus-ring);
+  outline-offset: 2px;
+}
+
+/* Pen-stroke animation for in-flight states. */
+@keyframes cb-pen {
+  0%   { transform: translateX(-100%); }
+  100% { transform: translateX(100%); }
+}
+
+/* Pulsing dot for in-flight chip indicators. */
+@keyframes cb-pulse {
+  0%, 100% { opacity: 0.55; transform: scale(0.9); }
+  50%      { opacity: 1;    transform: scale(1.15); }
+}
+
+/* Honour the OS motion preference: collapse every CSS animation/transition
+   (cb-pen sweeps, cb-pulse dots, hover transitions) to a near-instant frame.
+   Framer-motion animations are handled separately by <MotionConfig
+   reducedMotion="user"> at the app root. */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+/* ── Mobile reflow ─────────────────────────────────────────────────────
+ * ClassBuild is laptop-first; these breakpoints keep things from snapping
+ * catastrophically on a narrow viewport rather than committing to a full
+ * mobile-first redesign. The BuildPage layout stacks (sidebar → top), the
+ * sidebar relaxes its fixed width, and pill-grid columns collapse to a
+ * single column when there's no room for the chip text. */
+@media (max-width: 900px) {
+  .cb-build-layout {
+    flex-direction: column !important;
+    height: auto !important;
+  }
+  .cb-build-layout > [data-build-sidebar] {
+    width: 100% !important;
+    max-height: 280px;
+    overflow-y: auto;
+    border-right: none !important;
+    border-bottom: 0.5px solid var(--cb-border-default);
+  }
+  .cb-build-content {
+    padding: 18px 16px !important;
+  }
+  .cb-research-grid,
+  .cb-syllabus-grid {
+    grid-template-columns: 1fr !important;
+    gap: 28px !important;
+  }
+}
+
+@media (max-width: 640px) {
+  .cb-build-content {
+    padding: 14px 12px !important;
+  }
+}
+
+/* ── Landing page reflow ───────────────────────────────────────────────
+ * The landing markup is inline-styled for the 1100px reading column;
+ * these rules restack its grids on the way down. Wide → narrow:
+ * hero panel drops below the hero copy, three-up rows become two then
+ * one, the footer collapses, and section rhythm tightens. */
+@media (max-width: 1020px) {
+  .cb-land-hero {
+    grid-template-columns: 1fr !important;
+    gap: 40px !important;
+    align-items: start !important;
   }
+  /* Stacked hero panel shouldn't stretch to the full reading column. */
+  .cb-land-hero aside {
+    max-width: 520px;
+  }
+  .cb-land-grid-deliv {
+    grid-template-columns: repeat(2, 1fr) !important;
+  }
+  .cb-land-footer {
+    grid-template-columns: 1fr 1fr !important;
+    row-gap: 28px !important;
+  }
+  .cb-land-footer-brand {
+    grid-column: 1 / -1;
+  }
+}
+
+@media (max-width: 860px) {
+  .cb-land-grid-cli {
+    grid-template-columns: 1fr !important;
+    gap: 20px !important;
+  }
+  .cb-land-grid-3steps {
+    grid-template-columns: 1fr !important;
+    gap: 28px !important;
+  }
+}
+
+/* Course cards hold two-up down to small-tablet width — they're designed
+ * narrow — and go single-column only on phones. */
+@media (max-width: 640px) {
+  .cb-land-grid-courses {
+    grid-template-columns: 1fr !important;
+  }
+}
+
+@media (max-width: 720px) {
+  .cb-land-hero-section {
+    padding: 40px 0 44px !important;
+  }
+  .cb-land-section {
+    padding: 44px 0 !important;
+  }
+  .cb-land-cta-row {
+    justify-content: center !important;
+  }
+  .cb-land-grid-deliv {
+    grid-template-columns: 1fr !important;
+  }
+  /* Principle rows: numeral + label on one line, description beneath. */
+  .cb-land-principle {
+    grid-template-columns: 28px 1fr !important;
+    gap: 4px 12px !important;
+  }
+  .cb-land-principle-desc {
+    grid-column: 2;
+  }
+  .cb-land-footer {
+    grid-template-columns: 1fr !important;
+    row-gap: 24px !important;
+  }
+  .cb-land-brief-dl {
+    grid-template-columns: 100px 1fr !important;
+  }
+  .cb-header-inner {
+    padding: 0 18px !important;
+    gap: 14px !important;
+  }
+  /* Stage strip: five compact, centred cells — labels only, status via the
+     check mark + current-cell tint; the italic sub-line needs more room
+     than a phone has. */
+  .cb-stage-cell {
+    padding: 10px 2px !important;
+    align-items: center !important;
+  }
+  .cb-stage-label {
+    font-size: 12px !important;
+  }
+  .cb-stage-sub {
+    display: none !important;
+  }
+  /* Page banners (Syllabus/Build): title above, actions wrapping below. */
+  .cb-page-head {
+    grid-template-columns: 1fr !important;
+    align-items: start !important;
+    gap: 14px !important;
+  }
+  /* Build tab strip: one swipeable row, scrolling inside its own bar. */
+  .cb-build-tabs {
+    overflow-x: auto;
+    flex-wrap: nowrap;
+    scrollbar-width: none;
+    -webkit-overflow-scrolling: touch;
+  }
+  .cb-build-tabs::-webkit-scrollbar {
+    display: none;
+  }
+  .cb-build-tabs button {
+    white-space: nowrap;
+    flex-shrink: 0;
+  }
+  /* Pill/choice grids (audience tiles, what-comes-next): two-up beats five
+     mid-word-clipped slivers. Starter-brief cards stack outright. */
+  .cb-pill-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
+  }
+  .cb-starter-grid {
+    grid-template-columns: 1fr !important;
+  }
+  /* Export: theme cards two-up (the preview chip clips at three-up);
+     artifact rows let the class label take natural width so titles breathe. */
+  .cb-theme-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
+  }
+  .cb-artifact-row {
+    grid-template-columns: auto minmax(0, 1fr) !important;
+    gap: 6px 12px !important;
+  }
+  .cb-artifact-row > :last-child {
+    grid-column: 1 / -1;
+  }
+  /* Keyboard-shortcut affordance is meaningless on touch — and it floats
+     over content at phone sizes. */
+  .cb-shortcuts-chip {
+    display: none !important;
+  }
+}
+
+/* Folio — foot rule + centred italic page number. */
+.cb-folio {
+  text-align: center;
+  padding-top: 14px;
+  margin-top: 28px;
+  border-top: 0.5px solid var(--cb-border-rule);
+  font-style: italic;
+  font-size: 15px;
+  color: var(--cb-text-muted);
+  font-variation-settings: "opsz" 12;
 }
diff --git a/src/pages/BuildPage.tsx b/src/pages/BuildPage.tsx
index 86d19c1..db82719 100644
--- a/src/pages/BuildPage.tsx
+++ b/src/pages/BuildPage.tsx
@@ -1,26 +1,51 @@
 import { useEffect, useState, useCallback, useRef } from 'react';
+import { downloadFile } from '../utils/download';
+import { normalizeActivityDetail } from '../utils/activityDetail';
+import { persistableAudioDataUri } from '../utils/audio';
+import { KeyMissingBanner } from '../components/build/artifactHelpers';
+import { QuizTab } from '../components/build/tabs/QuizTab';
+import { WeeklyChallengeTab } from '../components/build/tabs/WeeklyChallengeTab';
+import { InClassQuizTab } from '../components/build/tabs/InClassQuizTab';
+import { DiscussionTab } from '../components/build/tabs/DiscussionTab';
+import { ActivitiesTab } from '../components/build/tabs/ActivitiesTab';
+import { AudioTab } from '../components/build/tabs/AudioTab';
+import { ReadingTab } from '../components/build/tabs/ReadingTab';
+import { SlidesTab } from '../components/build/tabs/SlidesTab';
+import { TemplateModuleTab } from '../components/build/tabs/TemplateModuleTab';
+import { useChapterMaterials } from '../components/build/useChapterMaterials';
+import { ChapterImageRefineDrawer } from '../components/build/ChapterImageRefineDrawer';
+import { ShortcutsHelpOverlay } from '../components/build/ShortcutsHelpOverlay';
+import { TransientToast } from '../components/build/TransientToast';
+import {
+  CHAPTER_ASPECT_TO_SIZE,
+  getChapterImageSrc,
+  swapChapterImage,
+  chapterHasRefinableImages,
+} from '../components/build/chapterImageHelpers';
 import { useNavigate } from 'react-router-dom';
 import { motion, AnimatePresence } from 'framer-motion';
 import { useCourseStore } from '../store/courseStore';
 import { useApiStore } from '../store/apiStore';
-import { useUiStore } from '../store/uiStore';
 import { useTemplateStore } from '../store/templateStore';
+import { useUiStore } from '../store/uiStore';
 import { streamMessage, streamWithRetry } from '../services/claude/streaming';
 import { MODELS } from '../services/claude/client';
 import { buildChapterPrompt, buildChapterUserPrompt } from '../prompts/chapter';
 import { buildPracticeQuizPrompt, buildPracticeQuizUserPrompt } from '../prompts/practiceQuiz';
 import { buildDiscussionPrompt, buildDiscussionUserPrompt } from '../prompts/discussion';
-import { buildActivitiesPrompt, buildActivitiesUserPrompt, buildActivityDetailPrompt, buildActivityDetailUserPrompt } from '../prompts/activities';
+import { buildActivitiesPrompt, buildActivitiesUserPrompt } from '../prompts/activities';
 import { buildInClassQuizPrompt, buildInClassQuizUserPrompt } from '../prompts/inClassQuiz';
 import { buildAudioTranscriptPrompt, buildAudioTranscriptUserPrompt } from '../prompts/audioTranscript';
 import { buildSlidesPrompt, buildSlidesUserPrompt } from '../prompts/slides';
-import { Button } from '../components/shared/Button';
+import { CodexButton as Button } from '../components/codex';
 import { ChapterSidebar } from '../components/build/ChapterSidebar';
 import { ResearchPanel } from '../components/build/ResearchPanel';
-import type { SlideData, InClassQuizQuestion, ActivityDetail, WeeklyChallengeData } from '../types/course';
+import type { SlideData, InClassQuizQuestion, WeeklyChallengeData } from '../types/course';
 import { getVoiceOption } from '../themes';
 import { slugify, extractHtml, parseJson } from '../utils/format';
-import { friendlyError } from '../utils/errors';
+import { friendlyError, isAbortError } from '../utils/errors';
+import { beginAbortable, endAbortable, abortInFlight, materialAbortKey } from '../services/abortRegistry';
+import type { BatchFailure } from '../store/uiStore';
 
 interface DiscussionPrompt {
   prompt: string;
@@ -36,76 +61,323 @@ interface Activity {
   scalingNotes: string;
 }
 
-function downloadFile(content: string | Blob, filename: string, type = 'text/html') {
-  const blob = content instanceof Blob ? content : new Blob([content], { type });
-  const url = URL.createObjectURL(blob);
-  const a = document.createElement('a');
-  a.href = url;
-  a.download = filename;
-  a.click();
-  URL.revokeObjectURL(url);
-}
-
-function formatElapsed(sec: number): string {
-  if (sec < 60) return `${sec}s`;
-  const m = Math.floor(sec / 60);
-  const s = sec % 60;
-  return `${m}m ${s}s`;
-}
+// downloadFile moved to src/utils/download.ts (imported below).
 
+// formatElapsed moved to ReadingTab (only place it was used).
 // slugify, extractHtml, parseJson moved to src/utils/format.ts
 
-async function replaceGeminiPlaceholders(html: string, apiKey: string): Promise<string> {
-  const { replaceGeminiImagePlaceholders } = await import('../services/gemini/imagePlacer');
-  return replaceGeminiImagePlaceholders(html, apiKey);
+async function replaceAiPlaceholders(html: string, apiKey: string): Promise<string> {
+  const { replaceAiImagePlaceholders } = await import('../services/openai/imagePlacer');
+  return replaceAiImagePlaceholders(html, apiKey);
+}
+
+// Chapter image helpers moved to src/components/build/chapterImageHelpers.ts
+
+/** One-time-hint state, persisted to localStorage so it stays dismissed
+ *  across sessions per-browser. */
+const LS_HINT_PREFIX = 'cb:ui:hintSeen:';
+function readHintSeen(key: string): boolean {
+  if (typeof window === 'undefined') return true;
+  try {
+    return localStorage.getItem(LS_HINT_PREFIX + key) === '1';
+  } catch {
+    return true;
+  }
+}
+function writeHintSeen(key: string): void {
+  if (typeof window === 'undefined') return;
+  try {
+    localStorage.setItem(LS_HINT_PREFIX + key, '1');
+  } catch { /* ignore */ }
 }
 
 export function BuildPage() {
   const navigate = useNavigate();
-  const { syllabus, researchDossiers, chapters, addChapter, updateChapter, setup, setStage, completeStage } = useCourseStore();
-  const { claudeApiKey, geminiApiKey, advancedMode } = useApiStore();
+  const { syllabus, researchDossiers, chapters, addChapter, updateChapter, setSlideImage, updateSlide, setup, setStage, completeStage } = useCourseStore();
+  const { claudeApiKey, openaiApiKey, elevenLabsApiKey, advancedMode } = useApiStore();
   const { templates } = useTemplateStore();
   const activeTemplate = setup.templateId ? templates.find((t) => t.id === setup.templateId) : undefined;
   const examplePatternContent = activeTemplate?.examplePatternContent;
-  const { isGenerating, setIsGenerating, streamingText, setStreamingText, appendStreamingText, error, setError, activeTab, setActiveTab, batchGenerating, batchCurrentChapter, batchPhase, batchMaterial, setBatchGenerating, setBatchCurrentChapter, setBatchPhase, setBatchMaterial } = useUiStore();
+  const [generatingTemplateContent, setGeneratingTemplateContent] = useState<number | null>(null);
+  const { isGenerating, setIsGenerating, streamingText, setStreamingText, appendStreamingText, error, setError, activeTab, setActiveTab, selectedChapterNum, setSelectedChapterNum, batchGenerating, batchCurrentChapter, batchPhase, batchMaterial, setBatchGenerating, setBatchCurrentChapter, setBatchPhase, setBatchMaterial, batchIndex, batchTotal, batchChapterMs, setBatchProgress, pushBatchChapterMs, resetBatchChapterMs, batchSummary, setBatchSummary, slidesRender, setSlidesRender, inFlight, setInFlight, setOpenKeysOnNextSetupVisit } = useUiStore();
 
-  const [selectedChapterNum, setSelectedChapterNum] = useState(1);
+  // Navigate to /setup with the keys modal auto-opening. Used by inline
+  // "Add OpenAI key →" / "Add ElevenLabs key →" CTAs on the Slides and Audio
+  // tabs when the relevant key is missing.
+  const openKeysModal = useCallback(() => {
+    setOpenKeysOnNextSetupVisit(true);
+    navigate('/setup');
+  }, [navigate, setOpenKeysOnNextSetupVisit]);
+
+  // selectedChapterNum now lives in uiStore so it survives reload.
   const [chapterHtml, setChapterHtml] = useState('');
-  const [quizHtml, setQuizHtml] = useState('');
-  const [discussions, setDiscussions] = useState<DiscussionPrompt[]>([]);
-  const [activities, setActivities] = useState<Activity[]>([]);
-  const [inClassQuizData, setInClassQuizData] = useState<InClassQuizQuestion[]>([]);
-  const [generatingQuiz, setGeneratingQuiz] = useState<number | null>(null);
-  const [generatingInClassQuiz, setGeneratingInClassQuiz] = useState<number | null>(null);
-  const [generatingDiscussion, setGeneratingDiscussion] = useState<number | null>(null);
-  const [generatingActivities, setGeneratingActivities] = useState<number | null>(null);
-  const [generatingAudio, setGeneratingAudio] = useState<number | null>(null);
-  const [generatingSlides, setGeneratingSlides] = useState<number | null>(null);
-  const [audioTranscript, setAudioTranscript] = useState('');
-  const [audioUrl, setAudioUrl] = useState('');
-  const [audioPhase, setAudioPhase] = useState<'transcript' | 'synthesizing' | null>(null);
-  const [audioError, setAudioError] = useState('');
-  const [audioChunkProgress, setAudioChunkProgress] = useState<{ current: number; total: number } | null>(null);
-  const [slidesData, setSlidesData] = useState<SlideData[]>([]);
+  // Per-artifact "currently generating" state — mirrored from uiStore so
+  // navigating away from /build and back keeps the drafting UI and disabled
+  // CTAs accurate, and the cross-page Header chips stay live.
+  const generatingQuiz = inFlight.quiz ?? null;
+  const generatingInClassQuiz = inFlight.inclassquiz ?? null;
+  const generatingDiscussion = inFlight.discussion ?? null;
+  const generatingActivities = inFlight.activities ?? null;
+  const generatingAudio = inFlight.audio ?? null;
+  const generatingSlides = inFlight.slides ?? null;
+  const generatingWeeklyChallenge = inFlight.weeklychallenge ?? null;
+  const setGeneratingQuiz = useCallback((v: number | null) => setInFlight('quiz', v), [setInFlight]);
+  const setGeneratingInClassQuiz = useCallback((v: number | null) => setInFlight('inclassquiz', v), [setInFlight]);
+  const setGeneratingDiscussion = useCallback((v: number | null) => setInFlight('discussion', v), [setInFlight]);
+  const setGeneratingActivities = useCallback((v: number | null) => setInFlight('activities', v), [setInFlight]);
+  const setGeneratingAudio = useCallback((v: number | null) => setInFlight('audio', v), [setInFlight]);
+  const setGeneratingSlides = useCallback((v: number | null) => setInFlight('slides', v), [setInFlight]);
+  const setGeneratingWeeklyChallenge = useCallback((v: number | null) => setInFlight('weeklychallenge', v), [setInFlight]);
+
   const [thinkingText, setThinkingText] = useState('');
   const [refineFeedback, setRefineFeedback] = useState('');
   const [showRefineConfirm, setShowRefineConfirm] = useState(false);
-  const [expandedActivities, setExpandedActivities] = useState<Record<number, ActivityDetail>>({});
-  const [expandedSlideNotes, setExpandedSlideNotes] = useState<Set<number>>(new Set());
-  const [expandingActivity, setExpandingActivity] = useState<number | null>(null);
+  /** Which chapter (if any) is currently in the chapter-drafting pipeline.
+   *  Distinct from uiStore.isGenerating (which is global). Lets ReadingTab
+   *  show the drafting UI ONLY on the chapter that's actually being drafted,
+   *  not whichever chapter the user has clicked to. */
+  const [chapterDraftingFor, setChapterDraftingFor] = useState<number | null>(null);
+  /** True while a refine is in flight — drives the streaming UI to show
+   *  "Refining…" feedback instead of the old iframe. */
+  const [isRefining, setIsRefining] = useState(false);
+  /** Confirm-panel checkbox: when a refine clears dependent materials,
+   *  should we automatically regenerate them once the new reading lands? */
+  const [refineAutoRegen, setRefineAutoRegen] = useState(true);
+  /** Ref to the latest generateAllOutputs callback so refineChapter can
+   *  schedule a post-refine regen using the *new* chapter content (the
+   *  callback recreates after updateChapter fires). */
+  const generateAllOutputsRef = useRef<() => Promise<void>>(() => Promise.resolve());
+  // Per-slide image refine state. Edited prompts live here until the user
+  // either regenerates (commits) or hits Reset. `refiningSlideIdx` is the
+  // index currently being rendered through gpt-image-2.
+  const [editedSlidePrompts, setEditedSlidePrompts] = useState<Record<number, string>>({});
+  const [refiningSlideIdx, setRefiningSlideIdx] = useState<number | null>(null);
+  const [slideRefineError, setSlideRefineError] = useState<string | null>(null);
+
+  // Per-image chapter refine. When the user clicks an image inside the chapter
+  // iframe, the shim postMessages here and we open a drawer with the original
+  // prompt + the rendered image. Edits commit only when Regenerate succeeds.
+  const [chapterImageRefine, setChapterImageRefine] = useState<
+    { idx: number; prompt: string; aspect: string; src: string } | null
+  >(null);
+  const [chapterImageDraft, setChapterImageDraft] = useState('');
+  const [chapterImageRefining, setChapterImageRefining] = useState(false);
+  const [chapterImageRefineError, setChapterImageRefineError] = useState<string | null>(null);
+  // One-time discoverability hints — surfaced inline until the user dismisses
+  // or auto-dismissed after 12s once the relevant artifact has rendered.
+  const [showChapterImageHint, setShowChapterImageHint] = useState<boolean>(() => !readHintSeen('chapter-image-refine'));
+  const [showSlideImageHint, setShowSlideImageHint] = useState<boolean>(() => !readHintSeen('slide-image-refine'));
   const [copiedLabel, setCopiedLabel] = useState('');
-  const [infographicDataUri, setInfographicDataUri] = useState('');
-  const [generatingInfographic, setGeneratingInfographic] = useState<number | null>(null);
-  const [weeklyChallengeHtml, setWeeklyChallengeHtml] = useState('');
-  const [generatingWeeklyChallenge, setGeneratingWeeklyChallenge] = useState<number | null>(null);
-  const [generatingTemplateContent, setGeneratingTemplateContent] = useState<number | null>(null);
-  const [tabErrors, setTabErrors] = useState<Record<string, string>>({});
   const [showBatchConfirm, setShowBatchConfirm] = useState(false);
   const [elapsedSec, setElapsedSec] = useState(0);
   const autoGenStarted = useRef(false);
   const selectedChapterRef = useRef(selectedChapterNum);
   const batchCancelRef = useRef(false);
 
+  // Derived: the chapter currently in view from courseStore.
+  const currentChapterEarly = chapters.find((c) => c.number === selectedChapterNum);
+  const syllabusChapterEarly = syllabus?.chapters.find((c) => c.number === selectedChapterNum);
+
+  // ── All per-chapter material state + generation handlers ─────────────
+  // Quiz, in-class quiz, weekly challenge, discussion, activities, audio,
+  // slides — plus retryAudio + fleshOutActivity — all live in a single
+  // hook. BuildPage gets the read-only state values back and wires them
+  // into the tab components.
+  const materials = useChapterMaterials({
+    syllabus,
+    currentChapter: currentChapterEarly,
+    syllabusChapter: syllabusChapterEarly,
+    selectedChapterNum,
+    selectedChapterRef,
+    claudeApiKey,
+    elevenLabsApiKey,
+    setup,
+    updateChapter,
+    setError,
+    setGeneratingQuiz,
+    setGeneratingInClassQuiz,
+    setGeneratingWeeklyChallenge,
+    setGeneratingDiscussion,
+    setGeneratingActivities,
+    setGeneratingAudio,
+    setGeneratingSlides,
+  });
+  const {
+    quizHtml,
+    inClassQuizData,
+    weeklyChallengeHtml,
+    discussions,
+    activities,
+    audioTranscript,
+    audioUrl,
+    audioError,
+    audioPersistNote,
+    audioPhase,
+    audioChunkProgress,
+    slidesData,
+    setSlidesData,
+    expandedActivities,
+    setExpandedActivities,
+    expandingActivity,
+    tabErrors,
+    setTabError,
+    clearTabError,
+    generateQuiz,
+    generateInClassQuiz,
+    generateWeeklyChallenge: generateWeeklyChallengeContent,
+    generateDiscussion,
+    generateActivities,
+    generateAudio,
+    generateSlides,
+    retryAudio,
+    fleshOutActivity,
+  } = materials;
+
+  // Clamp the persisted selectedChapterNum if the new syllabus is shorter
+  // than the chapter index we last saved (e.g. user starts a smaller course).
+  useEffect(() => {
+    if (!syllabus) return;
+    const max = syllabus.chapters.length;
+    if (selectedChapterNum < 1 || selectedChapterNum > max) {
+      setSelectedChapterNum(1);
+    }
+  }, [syllabus, selectedChapterNum, setSelectedChapterNum]);
+
+  // Auto-dismiss the chapter-image hint 12s after it becomes relevant.
+  useEffect(() => {
+    if (!showChapterImageHint) return;
+    if (!chapterHtml || !chapterHasRefinableImages(chapterHtml)) return;
+    const id = setTimeout(() => {
+      setShowChapterImageHint(false);
+      writeHintSeen('chapter-image-refine');
+    }, 12000);
+    return () => clearTimeout(id);
+  }, [showChapterImageHint, chapterHtml]);
+
+  // Dismiss the chapter-image hint as soon as the user opens the refine drawer.
+  useEffect(() => {
+    if (chapterImageRefine && showChapterImageHint) {
+      setShowChapterImageHint(false);
+      writeHintSeen('chapter-image-refine');
+    }
+  }, [chapterImageRefine, showChapterImageHint]);
+
+  // Auto-dismiss the slide-image hint after 12s of slidesData being populated.
+  useEffect(() => {
+    if (!showSlideImageHint) return;
+    if (slidesData.length === 0) return;
+    const id = setTimeout(() => {
+      setShowSlideImageHint(false);
+      writeHintSeen('slide-image-refine');
+    }, 12000);
+    return () => clearTimeout(id);
+  }, [showSlideImageHint, slidesData.length]);
+
+  // Dismiss the slide-image hint as soon as the user starts a refine.
+  useEffect(() => {
+    if (refiningSlideIdx !== null && showSlideImageHint) {
+      setShowSlideImageHint(false);
+      writeHintSeen('slide-image-refine');
+    }
+  }, [refiningSlideIdx, showSlideImageHint]);
+
+  const dismissChapterImageHint = useCallback(() => {
+    setShowChapterImageHint(false);
+    writeHintSeen('chapter-image-refine');
+  }, []);
+  const dismissSlideImageHint = useCallback(() => {
+    setShowSlideImageHint(false);
+    writeHintSeen('slide-image-refine');
+  }, []);
+
+  // ── Keyboard shortcuts ──────────────────────────────────────────────
+  //
+  // Bound to the document so they fire from anywhere on the Build page,
+  // except when the user is typing in an input/textarea. Skipped entirely
+  // while batch generation is running so accidental keystrokes can't
+  // disrupt a multi-chapter run.
+  const [shortcutsHelpOpen, setShortcutsHelpOpen] = useState(false);
+  const [transientToast, setTransientToast] = useState<string | null>(null);
+  useEffect(() => {
+    if (!transientToast) return;
+    const id = setTimeout(() => setTransientToast(null), 2400);
+    return () => clearTimeout(id);
+  }, [transientToast]);
+
+  // Static list of tab IDs in display order — drives the 1..8 shortcut.
+  // Note: this stays in sync with the `tabs` array assembled inside the JSX.
+  const SHORTCUT_TAB_IDS = [
+    ...(setup.templateId ? ['template-module'] : []),
+    'chapter', 'quiz', 'inclassquiz', 'discussion',
+    ...(advancedMode ? ['weeklychallenge', 'activities', 'audio', 'slides'] : []),
+  ];
+
+  useEffect(() => {
+    function onKey(e: KeyboardEvent) {
+      const target = e.target as HTMLElement | null;
+      // Don't intercept while the user is typing.
+      if (
+        target?.tagName === 'INPUT' ||
+        target?.tagName === 'TEXTAREA' ||
+        target?.isContentEditable
+      ) {
+        return;
+      }
+      // Don't intercept during batch — keystrokes could derail a multi-min run.
+      if (batchGenerating) return;
+
+      // Cmd/Ctrl + S → catch the save instinct with a reassurance toast.
+      if ((e.metaKey || e.ctrlKey) && (e.key === 's' || e.key === 'S')) {
+        e.preventDefault();
+        setTransientToast('No need to save — every change is auto-saved to this browser.');
+        return;
+      }
+      // ? → toggle the help overlay.
+      if (e.key === '?') {
+        e.preventDefault();
+        setShortcutsHelpOpen((v) => !v);
+        return;
+      }
+
+      // No other modifier-required shortcuts.
+      if (e.metaKey || e.ctrlKey || e.altKey) return;
+
+      // 1..8 → switch tab.
+      if (/^[1-8]$/.test(e.key)) {
+        const idx = Number(e.key) - 1;
+        if (SHORTCUT_TAB_IDS[idx]) {
+          e.preventDefault();
+          setActiveTab(SHORTCUT_TAB_IDS[idx]);
+        }
+        return;
+      }
+      // J / K → next / previous chapter.
+      if (e.key === 'j' || e.key === 'J') {
+        if (syllabus && selectedChapterNum < syllabus.chapters.length) {
+          e.preventDefault();
+          setSelectedChapterNum(selectedChapterNum + 1);
+        }
+        return;
+      }
+      if (e.key === 'k' || e.key === 'K') {
+        if (selectedChapterNum > 1) {
+          e.preventDefault();
+          setSelectedChapterNum(selectedChapterNum - 1);
+        }
+        return;
+      }
+      // G → generate all materials for the current chapter.
+      if (e.key === 'g' || e.key === 'G') {
+        e.preventDefault();
+        void generateAllOutputsRef.current();
+        return;
+      }
+    }
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [batchGenerating, syllabus, selectedChapterNum, setActiveTab, setSelectedChapterNum, setup.templateId, advancedMode]);
+
   // Tick elapsed seconds while a single-chapter generation is running so the
   // "Thinking..." phase (~30-90s on Opus) shows observable progress.
   useEffect(() => {
@@ -137,8 +409,8 @@ export function BuildPage() {
   // Derived state
   const currentChapter = chapters.find(c => c.number === selectedChapterNum);
   const syllabusChapter = syllabus?.chapters.find(c => c.number === selectedChapterNum);
-  const anyLocalGenerating = !!(generatingQuiz || generatingInClassQuiz || generatingDiscussion || generatingActivities || generatingAudio || generatingSlides || generatingInfographic || generatingWeeklyChallenge || generatingTemplateContent);
-  const anyBusy = isGenerating || anyLocalGenerating || batchGenerating;
+  const anyLocalGenerating = !!(generatingQuiz || generatingInClassQuiz || generatingDiscussion || generatingActivities || generatingAudio || generatingSlides || generatingWeeklyChallenge);
+  const anyBusy = isGenerating || anyLocalGenerating || batchGenerating || generatingTemplateContent !== null;
 
   const tabGenerating: Record<string, boolean> = {
     quiz: generatingQuiz === selectedChapterNum,
@@ -147,23 +419,11 @@ export function BuildPage() {
     activities: generatingActivities === selectedChapterNum,
     audio: generatingAudio === selectedChapterNum,
     slides: generatingSlides === selectedChapterNum,
-    infographic: generatingInfographic === selectedChapterNum,
     weeklychallenge: generatingWeeklyChallenge === selectedChapterNum,
     'template-module': generatingTemplateContent === selectedChapterNum,
   };
 
-  const setTabError = useCallback((tab: string, msg: string) => {
-    setTabErrors(prev => ({ ...prev, [tab]: msg }));
-  }, []);
-
-  const clearTabError = useCallback((tab: string) => {
-    setTabErrors(prev => {
-      if (!prev[tab]) return prev;
-      const next = { ...prev };
-      delete next[tab];
-      return next;
-    });
-  }, []);
+  // setTabError + clearTabError moved into useChapterMaterials.
 
   const copyToClipboard = useCallback(async (text: string, label: string) => {
     await navigator.clipboard.writeText(text);
@@ -193,7 +453,7 @@ export function BuildPage() {
       lines.push(`Learning Goal: ${a.learningGoal}`);
       lines.push(`Scaling: ${a.scalingNotes}`);
 
-      const detail = expandedActivities[i];
+      const detail = normalizeActivityDetail(expandedActivities[i]);
       if (detail) {
         lines.push('');
         lines.push(`--- Step-by-Step Guide ---`);
@@ -230,74 +490,18 @@ export function BuildPage() {
     return lines.join('\n');
   }, [activities, expandedActivities, syllabusChapter]);
 
-  // Restore local state when switching chapters or when chapter data appears
+  // Reset BuildPage-owned local state on chapter switch, then hydrate
+  // chapterHtml from the courseStore-persisted chapter (if any). All material
+  // state (quiz/discussion/audio/slides/etc.) is managed inside
+  // useChapterMaterials; its own effect handles reset + rehydrate.
   useEffect(() => {
     setChapterHtml('');
-    setQuizHtml('');
-    setInClassQuizData([]);
-    setDiscussions([]);
-    setActivities([]);
-    setAudioTranscript('');
-    setAudioUrl('');
-    setSlidesData([]);
-    setInfographicDataUri('');
-    setWeeklyChallengeHtml('');
     setThinkingText('');
     setRefineFeedback('');
     setShowRefineConfirm(false);
-    setExpandedActivities({});
-    setExpandingActivity(null);
-    setAudioChunkProgress(null);
-    setAudioError('');
-    setTabErrors({});
-
-    const ch = chapters.find(c => c.number === selectedChapterNum);
-    if (ch) {
-      setChapterHtml(ch.htmlContent);
-      if (ch.inClassQuizData && ch.inClassQuizData.length > 0) setInClassQuizData(ch.inClassQuizData);
-      if (ch.discussionData && ch.discussionData.length > 0) setDiscussions(ch.discussionData);
-      if (ch.activityData && ch.activityData.length > 0) setActivities(ch.activityData);
-      if (ch.activityDetails) setExpandedActivities(ch.activityDetails);
-      if (ch.audioTranscript) setAudioTranscript(ch.audioTranscript);
-      if (ch.audioUrl) setAudioUrl(ch.audioUrl);
-      if (ch.slidesJson && ch.slidesJson.length > 0) setSlidesData(ch.slidesJson);
-      if (ch.infographicDataUri) setInfographicDataUri(ch.infographicDataUri);
-      if (ch.practiceQuizData && syllabus) {
-        const syllCh = syllabus.chapters.find(sc => sc.number === selectedChapterNum);
-        (async () => {
-          try {
-            const { buildQuizHtml } = await import('../templates/quizTemplate');
-            const html = buildQuizHtml(
-              `${syllCh?.title || ch.title} — Practice Quiz`,
-              ch.practiceQuizData!,
-              syllabus.courseTitle,
-              setup.themeId,
-            );
-            setQuizHtml(html);
-          } catch {
-            // Quiz template failed to load
-          }
-        })();
-      }
-      if (ch.weeklyChallengeData && syllabus) {
-        const syllCh = syllabus.chapters.find(sc => sc.number === selectedChapterNum);
-        (async () => {
-          try {
-            const { buildWeeklyChallengeHtml } = await import('../templates/weeklyChallengeTemplate');
-            const html = buildWeeklyChallengeHtml(
-              `Week ${selectedChapterNum} Challenge — ${syllCh?.title || ch.title}`,
-              ch.weeklyChallengeData!,
-              syllabus.courseTitle,
-              setup.themeId,
-            );
-            setWeeklyChallengeHtml(html);
-          } catch {
-            // Weekly challenge template failed to load
-          }
-        })();
-      }
-    }
-  }, [selectedChapterNum, chapters, syllabus]);
+    const ch = chapters.find((c) => c.number === selectedChapterNum);
+    if (ch) setChapterHtml(ch.htmlContent);
+  }, [selectedChapterNum, chapters]);
 
   // Auto-generate chapter 1 on first mount if not already generated and has research
   useEffect(() => {
@@ -314,7 +518,10 @@ export function BuildPage() {
     const ch = syllabus.chapters.find(c => c.number === chapterNum);
     if (!ch) return;
 
+    const abortKey = materialAbortKey('reading', chapterNum);
+    const controller = beginAbortable(abortKey);
     setIsGenerating(true);
+    setChapterDraftingFor(chapterNum);
     setStreamingText('');
     setThinkingText('');
 
@@ -329,35 +536,37 @@ export function BuildPage() {
         doi: s.doi,
       }));
 
-      const hasGemini = !!geminiApiKey;
+      const hasImageGen = !!openaiApiKey;
       const fullText = await streamMessage(
         {
           apiKey: claudeApiKey,
           model: MODELS.opus,
-          system: buildChapterPrompt(setup.themeId, hasGemini),
+          system: buildChapterPrompt(setup.themeId, hasImageGen),
           messages: [{
             role: 'user',
             content: buildChapterUserPrompt(
               syllabus.courseTitle,
               ch,
               setup.chapterLength,
+              { educationLevel: setup.educationLevel, priorKnowledge: setup.priorKnowledge, learnerNotes: setup.learnerNotes },
               researchSources,
-              hasGemini,
+              hasImageGen,
+              setup.chapterLengthBrief,
             ),
           }],
           thinkingBudget: 'high',
           maxTokens: 16000,
+          signal: controller.signal,
         },
         {
           onThinking: (text) => setThinkingText(prev => prev + text),
           onText: (text) => appendStreamingText(text),
-          onError: (err) => setError(err.message),
         }
       );
 
       let html = extractHtml(fullText);
-      if (hasGemini) {
-        html = await replaceGeminiPlaceholders(html, geminiApiKey);
+      if (hasImageGen) {
+        html = await replaceAiPlaceholders(html, openaiApiKey);
       }
 
       if (selectedChapterRef.current === chapterNum) setChapterHtml(html);
@@ -367,12 +576,15 @@ export function BuildPage() {
         htmlContent: html,
       });
     } catch (err) {
-      setError(friendlyError(err, 'Chapter generation failed.'));
+      // A user Stop is a silent cancel — the partial stream is discarded.
+      if (!isAbortError(err)) setError(friendlyError(err, 'Chapter generation failed.'));
     } finally {
+      endAbortable(abortKey, controller);
       setIsGenerating(false);
+      setChapterDraftingFor(null);
       setThinkingText('');
     }
-  }, [syllabus, claudeApiKey, geminiApiKey, researchDossiers, setup.chapterLength, addChapter, setIsGenerating, setStreamingText, appendStreamingText, setError]);
+  }, [syllabus, claudeApiKey, openaiApiKey, researchDossiers, setup.chapterLength, addChapter, setIsGenerating, setStreamingText, appendStreamingText, setError]);
 
   const refineChapter = useCallback(async (feedback: string) => {
     if (!syllabus || !currentChapter || !syllabusChapter) return;
@@ -387,18 +599,16 @@ export function BuildPage() {
       audioUrl: undefined,
       slidesJson: undefined,
     });
-    setQuizHtml('');
-    setInClassQuizData([]);
-    setDiscussions([]);
-    setActivities([]);
-    setAudioTranscript('');
-    setAudioUrl('');
-    setSlidesData([]);
-    setExpandedActivities({});
+    // updateChapter above cleared dependent materials in courseStore;
+    // useChapterMaterials' reset effect will wipe the local mirrors.
     setRefineFeedback('');
     setShowRefineConfirm(false);
 
+    const abortKey = materialAbortKey('reading', selectedChapterNum);
+    const controller = beginAbortable(abortKey);
+    setIsRefining(true);
     setIsGenerating(true);
+    setChapterDraftingFor(selectedChapterNum);
     setStreamingText('');
     setThinkingText('');
 
@@ -409,548 +619,319 @@ export function BuildPage() {
         summary: s.summary, url: s.url, doi: s.doi,
       }));
 
-      const hasGemini = !!geminiApiKey;
+      const hasImageGen = !!openaiApiKey;
+      // Single-turn refine. Folding the existing chapter into the user message
+      // (rather than replaying it as a prior assistant turn) keeps the request
+      // compatible with extended thinking, which otherwise requires every
+      // prior assistant turn to carry its original thinking block.
+      //
+      // Strip inline image base64 — each rendered <img src="data:..."> can be
+      // 100K+ tokens, and a chapter with two or three of them blows past
+      // Claude's 1M context window. The model doesn't need the pixels to
+      // revise prose; it just needs to see where the figures sit.
+      const sanitizedHtml = currentChapter.htmlContent
+        .replace(/src="data:[^;]+;base64,[^"]+"/gi, 'src="[ai-generated-image]"')
+        .replace(/src='data:[^;]+;base64,[^']+'/gi, "src='[ai-generated-image]'");
+
+      const originalPrompt = buildChapterUserPrompt(
+        syllabus.courseTitle,
+        syllabusChapter,
+        setup.chapterLength,
+        { educationLevel: setup.educationLevel, priorKnowledge: setup.priorKnowledge, learnerNotes: setup.learnerNotes },
+        researchSources,
+        hasImageGen,
+        setup.chapterLengthBrief,
+      );
+      const refinePrompt = `${originalPrompt}
+
+A draft of this chapter already exists. Revise it to address the feedback below — keep the same \`<article class="ch">…</article>\` markup contract, the same class names, and the same interactive widgets. Re-emit \`<figure class="ai-image" data-prompt="…" data-aspect="…">\` placeholders for any images (don't try to reproduce existing image bytes — they were stripped from the input to save context). Output ONLY the revised article (plus any widget \`<script>\` tags), exactly as the contract specifies.
+
+Existing draft to revise (image bytes stripped to \`[ai-generated-image]\`):
+\`\`\`html
+${sanitizedHtml}
+\`\`\`
+
+Teacher feedback: "${feedback}"`;
+
       const fullText = await streamMessage(
         {
           apiKey: claudeApiKey,
           model: MODELS.opus,
-          system: buildChapterPrompt(setup.themeId, hasGemini),
-          messages: [
-            {
-              role: 'user',
-              content: buildChapterUserPrompt(
-                syllabus.courseTitle,
-                syllabusChapter,
-                setup.chapterLength,
-                researchSources,
-                hasGemini,
-              ),
-            },
-            {
-              role: 'assistant',
-              content: currentChapter.htmlContent,
-            },
-            {
-              role: 'user',
-              content: `Please revise this chapter based on the following feedback. Maintain the same HTML structure, design system, and interactive widgets. Output ONLY the complete revised HTML.\n\nFeedback: "${feedback}"`,
-            },
-          ],
+          system: buildChapterPrompt(setup.themeId, hasImageGen),
+          messages: [{ role: 'user', content: refinePrompt }],
           thinkingBudget: 'high',
           maxTokens: 16000,
+          signal: controller.signal,
         },
         {
           onThinking: (text) => setThinkingText(prev => prev + text),
           onText: (text) => appendStreamingText(text),
-          onError: (err) => setError(err.message),
         }
       );
 
       let html = extractHtml(fullText);
-      if (hasGemini) {
-        html = await replaceGeminiPlaceholders(html, geminiApiKey);
+      if (hasImageGen) {
+        html = await replaceAiPlaceholders(html, openaiApiKey);
       }
       setChapterHtml(html);
       updateChapter(selectedChapterNum, { htmlContent: html });
+
+      // If the user opted in, automatically rebuild quizzes/discussion/etc.
+      // against the new reading. The setTimeout lets React flush the chapter
+      // state update so the refreshed generateAllOutputs callback reads from
+      // the new content, not the pre-refine snapshot.
+      if (refineAutoRegen) {
+        setTimeout(() => {
+          void generateAllOutputsRef.current();
+        }, 250);
+      }
     } catch (err) {
-      setError(friendlyError(err, 'Chapter refinement failed.'));
+      if (isAbortError(err)) {
+        // User stopped the refine — old reading is untouched; cleared
+        // materials stay cleared (the confirm warned about that).
+      } else {
+        // Surface the raw API error to the console so we can diagnose what
+        // Anthropic actually rejected. The user-visible toast stays friendly.
+        console.error('Chapter refinement failed:', err);
+        if (err && typeof err === 'object') {
+          const anyErr = err as { status?: number; message?: string; error?: unknown };
+          if (anyErr.status !== undefined) console.error('  status:', anyErr.status);
+          if (anyErr.error) console.error('  error body:', anyErr.error);
+        }
+        setError(friendlyError(err, 'Chapter refinement failed.'));
+      }
     } finally {
+      endAbortable(abortKey, controller);
       setIsGenerating(false);
+      setIsRefining(false);
+      setChapterDraftingFor(null);
       setThinkingText('');
     }
-  }, [syllabus, currentChapter, syllabusChapter, selectedChapterNum, claudeApiKey, geminiApiKey, researchDossiers, setup.chapterLength, updateChapter, setIsGenerating, setStreamingText, appendStreamingText, setError]);
-
-  const generateQuiz = useCallback(async () => {
-    if (!syllabus || !currentChapter || !syllabusChapter) return;
-    const capturedChapter = selectedChapterNum;
-    setGeneratingQuiz(capturedChapter);
-    clearTabError('quiz');
-
-    try {
-      const fullText = await streamWithRetry(
-        {
-          apiKey: claudeApiKey,
-          model: MODELS.opus,
-          system: buildPracticeQuizPrompt(),
-          messages: [{
-            role: 'user',
-            content: buildPracticeQuizUserPrompt(syllabusChapter.title, syllabusChapter.narrative, syllabusChapter.keyConcepts, currentChapter.htmlContent?.slice(0, 3000)),
-          }],
-          thinkingBudget: 'max',
-          maxTokens: 8000,
-        },
-        {}
-      );
-
-      // Balance answer lengths (silent post-processing)
-      const { balancePracticeQuiz } = await import('../services/quiz/answerBalancer');
-      const balancedText = await balancePracticeQuiz(fullText, claudeApiKey);
-
-      updateChapter(capturedChapter, { practiceQuizData: balancedText });
-
-      if (selectedChapterRef.current === capturedChapter) {
-        try {
-          const { buildQuizHtml } = await import('../templates/quizTemplate');
-          const html = buildQuizHtml(
-            `${syllabusChapter.title} — Practice Quiz`,
-            balancedText,
-            syllabus.courseTitle,
-            setup.themeId,
-          );
-          setQuizHtml(html);
-        } catch {
-          const fallbackHtml = `<!DOCTYPE html><html><head><style>
-            body { background: #0f0f1a; color: #f1f5f9; font-family: system-ui; padding: 2rem; line-height: 1.8; }
-            strong { color: #a78bfa; }
-            hr { border-color: #252540; margin: 1.5rem 0; }
-          </style></head><body><pre style="white-space:pre-wrap">${fullText.replace(/</g, '&lt;')}</pre></body></html>`;
-          setQuizHtml(fallbackHtml);
-        }
+  }, [syllabus, currentChapter, syllabusChapter, selectedChapterNum, claudeApiKey, openaiApiKey, researchDossiers, setup.chapterLength, updateChapter, setIsGenerating, setStreamingText, appendStreamingText, setError]);
+
+  // 7 generators + retryAudio + fleshOutActivity moved to useChapterMaterials hook.
+
+
+  // ── Per-slide image refine ──────────────────────────────────────────
+  //
+  // Refine one slide's image without disturbing the rest of the deck.
+  // The user edits the imagePrompt textarea in-place; on Regenerate we call
+  // gpt-image-2 with the new prompt, atomically update slidesJson[i] in
+  // courseStore (both prompt and image), and mirror the change into the
+  // local slidesData state so the row's "rendered" chip and any later deck
+  // download pick up the new render.
+  const refineSlideImage = useCallback(
+    async (idx: number) => {
+      if (!openaiApiKey || refiningSlideIdx !== null) return;
+      const slide = slidesData[idx];
+      if (!slide) return;
+      const draft = editedSlidePrompts[idx];
+      const newPrompt = (draft ?? slide.imagePrompt ?? '').trim();
+      if (!newPrompt) {
+        setSlideRefineError('Image prompt is empty.');
+        return;
       }
-    } catch (err) {
-      setTabError('quiz', friendlyError(err, 'Quiz generation failed.'));
-    } finally {
-      setGeneratingQuiz(null);
-    }
-  }, [syllabus, currentChapter, syllabusChapter, selectedChapterNum, claudeApiKey, updateChapter, setTabError, clearTabError]);
-
-  const generateInClassQuiz = useCallback(async () => {
-    if (!syllabus || !currentChapter || !syllabusChapter) return;
-    const capturedChapter = selectedChapterNum;
-    setGeneratingInClassQuiz(capturedChapter);
-    clearTabError('inclassquiz');
-
-    try {
-      const fullText = await streamWithRetry(
-        {
-          apiKey: claudeApiKey,
-          model: MODELS.opus,
-          system: buildInClassQuizPrompt(),
-          messages: [{
-            role: 'user',
-            content: buildInClassQuizUserPrompt(syllabusChapter.title, syllabusChapter.narrative, syllabusChapter.keyConcepts, currentChapter.htmlContent?.slice(0, 3000)),
-          }],
-          thinkingBudget: 'max',
-          maxTokens: 8000,
-        },
-        {}
-      );
-
+      setRefiningSlideIdx(idx);
+      setSlideRefineError(null);
       try {
-        const parsed = parseJson(fullText) as InClassQuizQuestion[];
-        const { balanceInClassQuiz } = await import('../services/quiz/answerBalancer');
-        const balanced = await balanceInClassQuiz(parsed, claudeApiKey);
-        if (selectedChapterRef.current === capturedChapter) setInClassQuizData(balanced);
-        updateChapter(capturedChapter, { inClassQuizData: balanced });
-      } catch {
-        setTabError('inclassquiz', 'Failed to parse in-class quiz data');
+        const [{ generateImageWithRetry }, { withSafetyClause }] = await Promise.all([
+          import('../services/openai/imageGen'),
+          import('../services/openai/safetyClause'),
+        ]);
+        const dataUri = await generateImageWithRetry(
+          withSafetyClause(newPrompt),
+          openaiApiKey,
+          { size: '3840x2160', quality: 'high', compression: 88 },
+        );
+        // Mirror to local state so the row immediately reflects the new render.
+        setSlidesData((prev) =>
+          prev.map((s, i) =>
+            i === idx ? { ...s, imagePrompt: newPrompt, imageDataUri: dataUri } : s,
+          ),
+        );
+        // Persist atomically — both prompt and image — so a tab-switch /
+        // refresh never loses the edited prompt.
+        updateSlide(selectedChapterNum, idx, {
+          imagePrompt: newPrompt,
+          imageDataUri: dataUri,
+        });
+        // Clear this slide's draft now that it's committed.
+        setEditedSlidePrompts((prev) => {
+          const next = { ...prev };
+          delete next[idx];
+          return next;
+        });
+      } catch (err) {
+        setSlideRefineError(friendlyError(err, 'Slide image regeneration failed.'));
+      } finally {
+        setRefiningSlideIdx(null);
       }
-    } catch (err) {
-      setTabError('inclassquiz', friendlyError(err, 'In-class quiz generation failed.'));
-    } finally {
-      setGeneratingInClassQuiz(null);
-    }
-  }, [syllabus, currentChapter, syllabusChapter, selectedChapterNum, claudeApiKey, updateChapter, setTabError, clearTabError]);
-
-  const generateWeeklyChallengeContent = useCallback(async () => {
-    if (!syllabus || !currentChapter || !syllabusChapter) return;
-    const capturedChapter = selectedChapterNum;
-    setGeneratingWeeklyChallenge(capturedChapter);
-    clearTabError('weeklychallenge');
-
-    try {
-      const priorChapters = (syllabusChapter.spacingConnections || [])
-        .map(n => syllabus.chapters.find(c => c.number === n))
-        .filter((c): c is NonNullable<typeof c> => !!c)
-        .map(c => ({ number: c.number, title: c.title, keyConcepts: c.keyConcepts }));
-
-      const { buildWeeklyChallengePrompt, buildWeeklyChallengeUserPrompt } = await import('../prompts/weeklyChallenge');
-
-      const fullText = await streamWithRetry(
-        {
-          apiKey: claudeApiKey,
-          model: MODELS.opus,
-          system: buildWeeklyChallengePrompt(),
-          messages: [{
-            role: 'user',
-            content: buildWeeklyChallengeUserPrompt(
-              syllabusChapter.title,
-              syllabusChapter.narrative,
-              syllabusChapter.keyConcepts,
-              currentChapter.htmlContent?.slice(0, 3000),
-              syllabusChapter.number,
-              priorChapters,
-            ),
-          }],
-          thinkingBudget: 'high',
-          maxTokens: 10000,
-        },
-        {}
-      );
-
-      try {
-        const parsed = parseJson(fullText, '{') as WeeklyChallengeData;
-        updateChapter(capturedChapter, { weeklyChallengeData: parsed });
+    },
+    [
+      openaiApiKey,
+      refiningSlideIdx,
+      slidesData,
+      editedSlidePrompts,
+      updateSlide,
+      selectedChapterNum,
+    ],
+  );
 
-        if (selectedChapterRef.current === capturedChapter) {
-          try {
-            const { buildWeeklyChallengeHtml } = await import('../templates/weeklyChallengeTemplate');
-            const html = buildWeeklyChallengeHtml(
-              `Week ${capturedChapter} Challenge — ${syllabusChapter.title}`,
-              parsed,
-              syllabus.courseTitle,
-              setup.themeId,
-            );
-            setWeeklyChallengeHtml(html);
-          } catch {
-            // Template failed
-          }
-        }
-      } catch {
-        setTabError('weeklychallenge', 'Failed to parse weekly challenge data');
-      }
-    } catch (err) {
-      setTabError('weeklychallenge', friendlyError(err, 'Weekly challenge generation failed.'));
-    } finally {
-      setGeneratingWeeklyChallenge(null);
+  // ── Slide deck render + download ────────────────────────────────────
+  // Renders any unrendered slide images through gpt-image-2 (with bounded
+  // concurrency) and packs the lot into a .pptx. Tracks progress through
+  // uiStore.slidesRender so a tab switch keeps the in-flight render visible.
+  const downloadSlideDeck = useCallback(async () => {
+    if (slidesRender) return; // already in flight
+    if (!openaiApiKey) {
+      setError('Add an OpenAI API key in Setup to render the slide images.');
+      return;
     }
-  }, [syllabus, currentChapter, syllabusChapter, selectedChapterNum, claudeApiKey, setup.themeId, updateChapter, setTabError, clearTabError]);
-
-  const generateDiscussion = useCallback(async () => {
     if (!syllabus || !syllabusChapter) return;
-    const capturedChapter = selectedChapterNum;
-    setGeneratingDiscussion(capturedChapter);
-    clearTabError('discussion');
 
+    setSlidesRender({
+      chapterNum: selectedChapterNum,
+      current: 0,
+      total: slidesData.length,
+      phase: 'rendering',
+    });
     try {
-      const fullText = await streamWithRetry(
+      const { generatePptx } = await import('../services/export/pptxExporter');
+      const { blob } = await generatePptx(
+        slidesData,
+        syllabus.courseTitle,
+        syllabusChapter.title,
+        setup.themeId,
+        openaiApiKey,
         {
-          apiKey: claudeApiKey,
-          system: buildDiscussionPrompt(),
-          messages: [{
-            role: 'user',
-            content: buildDiscussionUserPrompt(syllabusChapter.title, syllabusChapter.keyConcepts, setup.cohortSize, setup.teachingEnvironment),
-          }],
-          thinkingBudget: 'medium',
-          maxTokens: 4000,
+          imageQuality: 'high',
+          imageSize: '3840x2160',
+          onProgress: (current, total, phase) =>
+            setSlidesRender({
+              chapterNum: selectedChapterNum,
+              current,
+              total,
+              phase,
+            }),
+          onSlideRendered: (i, dataUri) => {
+            // Atomic write to courseStore — safe even with parallel workers.
+            setSlideImage(selectedChapterNum, i, dataUri);
+            // Mirror to local state so the "rendered" chip updates live.
+            setSlidesData((prev) =>
+              prev.map((s, idx) => (idx === i ? { ...s, imageDataUri: dataUri } : s)),
+            );
+          },
+          preRendered: Object.fromEntries(
+            slidesData
+              .map((s, i) =>
+                s.imageDataUri ? ([i, s.imageDataUri] as [number, string]) : null,
+              )
+              .filter((x): x is [number, string] => x !== null),
+          ),
         },
-        {}
       );
-
-      try {
-        const parsed = parseJson(fullText) as DiscussionPrompt[];
-        if (selectedChapterRef.current === capturedChapter) setDiscussions(parsed);
-        updateChapter(capturedChapter, { discussionData: parsed });
-      } catch {
-        setTabError('discussion', 'Failed to parse discussion prompts');
-      }
-    } catch (err) {
-      setTabError('discussion', friendlyError(err, 'Discussion generation failed.'));
-    } finally {
-      setGeneratingDiscussion(null);
-    }
-  }, [syllabus, syllabusChapter, selectedChapterNum, claudeApiKey, setup.cohortSize, setup.teachingEnvironment, updateChapter, setTabError, clearTabError]);
-
-  const generateActivities = useCallback(async () => {
-    if (!syllabus || !syllabusChapter) return;
-    const capturedChapter = selectedChapterNum;
-    setGeneratingActivities(capturedChapter);
-    clearTabError('activities');
-
-    try {
-      const fullText = await streamWithRetry(
-        {
-          apiKey: claudeApiKey,
-          system: buildActivitiesPrompt(),
-          messages: [{
-            role: 'user',
-            content: buildActivitiesUserPrompt(syllabusChapter.title, syllabusChapter.keyConcepts, setup.cohortSize, setup.teachingEnvironment, setup.environmentNotes),
-          }],
-          thinkingBudget: 'medium',
-          maxTokens: 4000,
-        },
-        {}
+      downloadFile(
+        blob,
+        `slides-${selectedChapterNum}-${slugify(syllabusChapter.title || 'chapter')}.pptx`,
       );
-
-      try {
-        const parsed = parseJson(fullText) as Activity[];
-        if (selectedChapterRef.current === capturedChapter) setActivities(parsed);
-        updateChapter(capturedChapter, { activityData: parsed });
-      } catch {
-        setTabError('activities', 'Failed to parse activities');
-      }
     } catch (err) {
-      setTabError('activities', friendlyError(err, 'Activities generation failed.'));
+      setError(friendlyError(err, 'Slides export failed.'));
     } finally {
-      setGeneratingActivities(null);
+      setSlidesRender(null);
     }
-  }, [syllabus, syllabusChapter, selectedChapterNum, claudeApiKey, setup.cohortSize, setup.teachingEnvironment, setup.environmentNotes, updateChapter, setTabError, clearTabError]);
-
-  const generateTemplateContent = useCallback(async () => {
-    if (!syllabus || !syllabusChapter) return;
-    const capturedChapter = selectedChapterNum;
-    setGeneratingTemplateContent(capturedChapter);
-    clearTabError('template-module');
-
-    try {
-      const { generateTemplateChapter } = await import('../services/template/generateChapter');
-      const { content } = await generateTemplateChapter({
-        apiKey: claudeApiKey,
-        setup,
-        chapter: syllabusChapter,
-        courseTitle: syllabus.courseTitle,
-        courseOverview: syllabus.courseOverview,
-        examplePatternContent,
-      });
-      updateChapter(capturedChapter, { templateContent: content });
-    } catch (err) {
-      setTabError('template-module', friendlyError(err, 'Canvas module generation failed.'));
-    } finally {
-      setGeneratingTemplateContent(null);
-    }
-  }, [syllabus, syllabusChapter, selectedChapterNum, claudeApiKey, setup, examplePatternContent, updateChapter, setTabError, clearTabError]);
-
-  const generateAllCanvasModules = useCallback(async () => {
-    if (!syllabus) return;
-    setBatchGenerating(true);
-    setBatchMaterial('Canvas module');
-    batchCancelRef.current = false;
-
-    try {
-      const pending = syllabus.chapters.filter((ch) => {
-        const generated = chapters.find((c) => c.number === ch.number);
-        return !generated?.templateContent;
+  }, [
+    slidesRender,
+    openaiApiKey,
+    syllabus,
+    syllabusChapter,
+    selectedChapterNum,
+    slidesData,
+    setup.themeId,
+    setSlidesRender,
+    setSlideImage,
+    setError,
+  ]);
+
+  // ── Per-image chapter refine: iframe shim + message listener ─────────
+  //
+  // The chapter iframe srcdoc gets a tiny click-handler shim appended so that
+  // clicks on rendered images bubble out to the parent as postMessages. The
+  // parent (this page) opens an ImageRefineDrawer with the original prompt.
+  useEffect(() => {
+    function onMessage(e: MessageEvent) {
+      const data = e?.data as { __cbImageClick?: number; idx?: number; prompt?: string; aspect?: string } | undefined;
+      if (!data || data.__cbImageClick !== 1) return;
+      if (typeof data.idx !== 'number') return;
+      const src = getChapterImageSrc(chapterHtml, data.idx);
+      if (!src) return;
+      setChapterImageRefine({
+        idx: data.idx,
+        prompt: data.prompt ?? '',
+        aspect: data.aspect ?? 'landscape',
+        src,
       });
-
-      const { generateTemplateChapter } = await import('../services/template/generateChapter');
-
-      for (const ch of pending) {
-        if (batchCancelRef.current) break;
-        setBatchCurrentChapter(ch.number);
-        setBatchPhase('thinking');
-        try {
-          const { content } = await generateTemplateChapter({
-            apiKey: claudeApiKey,
-            setup,
-            chapter: ch,
-            courseTitle: syllabus.courseTitle,
-            courseOverview: syllabus.courseOverview,
-            examplePatternContent,
-            onText: () => setBatchPhase('writing'),
-          });
-          updateChapter(ch.number, { templateContent: content });
-        } catch (err) {
-          setError(
-            friendlyError(err, `Canvas module generation failed for Class ${ch.number}.`),
-          );
-          // Move on to the next chapter rather than aborting the batch — one
-          // bad chapter shouldn't block the rest.
-        }
-      }
-    } finally {
-      batchCancelRef.current = false;
-      setBatchCurrentChapter(null);
-      setBatchPhase(null);
-      setBatchMaterial(null);
-      setBatchGenerating(false);
+      setChapterImageDraft(data.prompt ?? '');
+      setChapterImageRefineError(null);
     }
-  }, [syllabus, chapters, claudeApiKey, setup, examplePatternContent, updateChapter, setError, setBatchGenerating, setBatchCurrentChapter, setBatchPhase, setBatchMaterial]);
-
-  const fleshOutActivity = useCallback(async (index: number) => {
-    if (!syllabusChapter || expandingActivity !== null) return;
-    const activity = activities[index];
-    if (!activity) return;
-
-    setExpandingActivity(index);
-
-    try {
-      const fullText = await streamWithRetry(
-        {
-          apiKey: claudeApiKey,
-          model: MODELS.haiku,
-          system: buildActivityDetailPrompt(),
-          messages: [{
-            role: 'user',
-            content: buildActivityDetailUserPrompt(activity, syllabusChapter.title, setup.cohortSize, setup.teachingEnvironment, setup.environmentNotes),
-          }],
-          thinkingBudget: 'low',
-          maxTokens: 8000,
-        },
-        {}
-      );
+    window.addEventListener('message', onMessage);
+    return () => window.removeEventListener('message', onMessage);
+  }, [chapterHtml]);
+
+  const closeChapterImageRefine = useCallback(() => {
+    // Closing during a render is fine — the async swap-in keeps running
+    // and the new image lands in the iframe when complete. We just hide
+    // the drawer so the user can interact with the rest of the page.
+    setChapterImageRefine(null);
+    setChapterImageRefineError(null);
+  }, []);
 
-      try {
-        const parsed = parseJson(fullText, '{') as ActivityDetail;
-        setExpandedActivities(prev => {
-          const updated = { ...prev, [index]: parsed };
-          updateChapter(selectedChapterNum, { activityDetails: updated });
-          return updated;
-        });
-      } catch (parseErr) {
-        setError(`Failed to parse activity details: ${parseErr instanceof Error ? parseErr.message : String(parseErr)}`);
-      }
-    } catch (err) {
-      setError(friendlyError(err, 'Activity detail generation failed.'));
-    } finally {
-      setExpandingActivity(null);
+  const refineChapterImage = useCallback(async () => {
+    if (!chapterImageRefine || !openaiApiKey || chapterImageRefining) return;
+    const newPrompt = chapterImageDraft.trim();
+    if (!newPrompt) {
+      setChapterImageRefineError('Image prompt is empty.');
+      return;
     }
-  }, [activities, syllabusChapter, claudeApiKey, setup.cohortSize, setup.teachingEnvironment, setup.environmentNotes, expandingActivity, setError]);
-
-  const generateAudio = useCallback(async () => {
-    if (!currentChapter || !syllabus) return;
-    const capturedChapter = selectedChapterNum;
-    setGeneratingAudio(capturedChapter);
-    clearTabError('audio');
-    setAudioPhase('transcript');
-    setAudioError('');
-
+    setChapterImageRefining(true);
+    setChapterImageRefineError(null);
     try {
-      const transcript = await streamWithRetry(
-        {
-          apiKey: claudeApiKey,
-          system: buildAudioTranscriptPrompt(),
-          messages: [{
-            role: 'user',
-            content: buildAudioTranscriptUserPrompt(currentChapter.title, currentChapter.htmlContent),
-          }],
-          thinkingBudget: 'medium',
-          maxTokens: 8000,
-        },
-        {}
+      const [{ generateImageWithRetry }, { withSafetyClause }] = await Promise.all([
+        import('../services/openai/imageGen'),
+        import('../services/openai/safetyClause'),
+      ]);
+      const size =
+        CHAPTER_ASPECT_TO_SIZE[chapterImageRefine.aspect] ?? CHAPTER_ASPECT_TO_SIZE.landscape;
+      const newDataUri = await generateImageWithRetry(
+        withSafetyClause(newPrompt),
+        openaiApiKey,
+        { size, quality: 'high' },
       );
-
-      if (selectedChapterRef.current === capturedChapter) setAudioTranscript(transcript);
-      updateChapter(capturedChapter, { audioTranscript: transcript });
-
-      if (geminiApiKey) {
-        setAudioPhase('synthesizing');
-        setAudioChunkProgress(null);
-        try {
-          const { generateAudiobook } = await import('../services/gemini/tts');
-          const voice = getVoiceOption(setup.voiceId);
-          const blob = await generateAudiobook(transcript, geminiApiKey, {
-            voiceName: voice.id,
-            accent: voice.accent,
-            onProgress: (current, total) => setAudioChunkProgress({ current, total }),
-          });
-          const url = URL.createObjectURL(blob);
-          if (selectedChapterRef.current === capturedChapter) setAudioUrl(url);
-          updateChapter(capturedChapter, { audioUrl: url });
-        } catch (err) {
-          const msg = friendlyError(err, 'Audio synthesis failed.');
-          console.error('Gemini TTS failed:', err);
-          if (selectedChapterRef.current === capturedChapter) setAudioError(msg);
-        }
-      }
-    } catch (err) {
-      setTabError('audio', friendlyError(err, 'Audio transcript generation failed.'));
-    } finally {
-      setGeneratingAudio(null);
-      setAudioPhase(null);
-      setAudioChunkProgress(null);
-    }
-  }, [currentChapter, syllabus, selectedChapterNum, claudeApiKey, geminiApiKey, updateChapter, setTabError, clearTabError]);
-
-  const retryAudio = useCallback(async () => {
-    if (!audioTranscript || !geminiApiKey) return;
-    setGeneratingAudio(selectedChapterNum);
-    setAudioPhase('synthesizing');
-    setAudioError('');
-    setAudioChunkProgress(null);
-
-    try {
-      const { generateAudiobook } = await import('../services/gemini/tts');
-      const voice = getVoiceOption(setup.voiceId);
-      const blob = await generateAudiobook(audioTranscript, geminiApiKey, {
-        voiceName: voice.id,
-        accent: voice.accent,
-        onProgress: (current, total) => setAudioChunkProgress({ current, total }),
-      });
-      const url = URL.createObjectURL(blob);
-      setAudioUrl(url);
-      updateChapter(selectedChapterNum, { audioUrl: url });
-    } catch (err) {
-      const msg = friendlyError(err, 'Audio synthesis failed.');
-      console.error('Gemini TTS retry failed:', err);
-      setAudioError(msg);
-    } finally {
-      setGeneratingAudio(null);
-      setAudioPhase(null);
-      setAudioChunkProgress(null);
-    }
-  }, [audioTranscript, geminiApiKey, selectedChapterNum, updateChapter]);
-
-  const generateSlides = useCallback(async () => {
-    if (!currentChapter || !syllabus || !syllabusChapter) return;
-    const capturedChapter = selectedChapterNum;
-    setGeneratingSlides(capturedChapter);
-    clearTabError('slides');
-
-    try {
-      const fullText = await streamWithRetry(
-        {
-          apiKey: claudeApiKey,
-          system: buildSlidesPrompt(),
-          messages: [{
-            role: 'user',
-            content: buildSlidesUserPrompt(syllabusChapter.title, syllabusChapter.keyConcepts, currentChapter.htmlContent),
-          }],
-          thinkingBudget: 'medium',
-          maxTokens: 4000,
-        },
-        {}
+      const updatedHtml = swapChapterImage(
+        chapterHtml,
+        chapterImageRefine.idx,
+        newPrompt,
+        newDataUri,
       );
-
-      try {
-        const parsed = parseJson(fullText) as SlideData[];
-        if (selectedChapterRef.current === capturedChapter) setSlidesData(parsed);
-        updateChapter(capturedChapter, { slidesJson: parsed });
-      } catch {
-        setTabError('slides', 'Failed to parse slide data from response');
+      setChapterHtml(updatedHtml);
+      if (currentChapter) {
+        updateChapter(selectedChapterNum, { htmlContent: updatedHtml });
       }
+      setChapterImageRefine(null);
     } catch (err) {
-      setTabError('slides', friendlyError(err, 'Slides generation failed.'));
+      setChapterImageRefineError(friendlyError(err, 'Chapter image regeneration failed.'));
     } finally {
-      setGeneratingSlides(null);
+      setChapterImageRefining(false);
     }
-  }, [currentChapter, syllabus, syllabusChapter, selectedChapterNum, claudeApiKey, updateChapter, setTabError, clearTabError]);
-
-  const generateInfographic = useCallback(async () => {
-    if (!currentChapter || !syllabusChapter || !geminiApiKey) return;
-    const capturedChapter = selectedChapterNum;
-    setGeneratingInfographic(capturedChapter);
-    setInfographicDataUri('');
-    clearTabError('infographic');
-
-    try {
-      const { buildInfographicMetaPrompt, buildInfographicMetaUserPrompt } = await import('../prompts/infographic');
-      const promptText = await streamWithRetry(
-        {
-          apiKey: claudeApiKey,
-          model: MODELS.opus,
-          system: buildInfographicMetaPrompt(setup.themeId),
-          messages: [{
-            role: 'user',
-            content: buildInfographicMetaUserPrompt(syllabusChapter.title, syllabusChapter.keyConcepts, currentChapter.htmlContent),
-          }],
-          thinkingBudget: 'medium',
-          maxTokens: 2000,
-        },
-        {}
-      );
-
-      updateChapter(capturedChapter, { infographicPrompt: promptText });
-
-      const { generateInfographic: genImg } = await import('../services/gemini/imageGen');
-      const dataUri = await genImg(promptText, geminiApiKey);
-
-      if (selectedChapterRef.current === capturedChapter) setInfographicDataUri(dataUri);
-      updateChapter(capturedChapter, { infographicDataUri: dataUri });
-    } catch (err) {
-      setTabError('infographic', friendlyError(err, 'Infographic generation failed.'));
-    } finally {
-      setGeneratingInfographic(null);
-    }
-  }, [currentChapter, syllabusChapter, selectedChapterNum, claudeApiKey, geminiApiKey, setup.themeId, updateChapter, setTabError, clearTabError]);
+  }, [
+    chapterImageRefine,
+    openaiApiKey,
+    chapterImageRefining,
+    chapterImageDraft,
+    chapterHtml,
+    currentChapter,
+    selectedChapterNum,
+    updateChapter,
+  ]);
 
   // Generate all outputs for the currently selected chapter.
   // Each generate* already sets tab errors internally; this outer catch only
@@ -964,473 +945,481 @@ export function BuildPage() {
     if (!quizHtml) tasks.push(generateQuiz().catch(logFailure('quiz')));
     if (inClassQuizData.length === 0) tasks.push(generateInClassQuiz().catch(logFailure('inclass-quiz')));
     if (discussions.length === 0) tasks.push(generateDiscussion().catch(logFailure('discussion')));
-    if (activities.length === 0) tasks.push(generateActivities().catch(logFailure('activities')));
-    if (slidesData.length === 0) tasks.push(generateSlides().catch(logFailure('slides')));
-    if (!audioTranscript) tasks.push(generateAudio().catch(logFailure('audio')));
-    if (geminiApiKey && !infographicDataUri) tasks.push(generateInfographic().catch(logFailure('infographic')));
-    await Promise.allSettled(tasks);
-  }, [currentChapter, syllabusChapter, syllabus, quizHtml, inClassQuizData, discussions, activities, slidesData, audioTranscript, infographicDataUri, geminiApiKey, generateQuiz, generateInClassQuiz, generateDiscussion, generateActivities, generateSlides, generateAudio, generateInfographic]);
-
-  // ─── Batch generation (from GeneratePage) ───
-  const generateAllClasses = useCallback(async () => {
-    if (!syllabus) return;
-    setBatchGenerating(true);
-    batchCancelRef.current = false;
-
-    try {
-    const chaptersToGenerate = syllabus.chapters.filter(
-      ch => !chapters.find(c => c.number === ch.number)
-        && researchDossiers.some(d => d.chapterNumber === ch.number && d.sources.length > 0)
-    );
-
-    for (const ch of chaptersToGenerate) {
-      if (batchCancelRef.current) break;
-      setBatchCurrentChapter(ch.number);
-      setBatchPhase('thinking');
-
-      try {
-        const dossier = researchDossiers.find(d => d.chapterNumber === ch.number);
-        const researchSources = dossier?.sources.map(s => ({
-          title: s.title, authors: s.authors, year: s.year,
-          summary: s.summary, url: s.url, doi: s.doi,
-        }));
-
-        const hasGemini = !!geminiApiKey;
-        const fullText = await streamMessage(
-          {
-            apiKey: claudeApiKey,
-            model: MODELS.opus,
-            system: buildChapterPrompt(setup.themeId, hasGemini),
-            messages: [{
-              role: 'user',
-              content: buildChapterUserPrompt(
-                syllabus.courseTitle, ch, setup.chapterLength, researchSources, hasGemini,
-              ),
-            }],
-            thinkingBudget: 'high',
-            maxTokens: 16000,
-          },
-          {
-            onThinking: () => setBatchPhase('thinking'),
-            onText: () => setBatchPhase('writing'),
-            onError: (err) => setError(err.message),
-          }
-        );
-
-        let html = extractHtml(fullText);
-        if (hasGemini) {
-          setBatchPhase('writing');
-          html = await replaceGeminiPlaceholders(html, geminiApiKey);
-        }
-        addChapter({ number: ch.number, title: ch.title, htmlContent: html });
-
-        // Generate practice quiz
-        setBatchPhase('thinking');
-        try {
-          const quizText = await streamMessage(
-            {
-              apiKey: claudeApiKey,
-              model: MODELS.opus,
-              system: buildPracticeQuizPrompt(),
-              messages: [{
-                role: 'user',
-                content: buildPracticeQuizUserPrompt(ch.title, ch.narrative, ch.keyConcepts, html.slice(0, 3000)),
-              }],
-              thinkingBudget: 'high',
-              maxTokens: 8000,
-            },
-            { onError: (err) => setError(err.message) }
-          );
-          const { balancePracticeQuiz } = await import('../services/quiz/answerBalancer');
-          const balancedQuiz = await balancePracticeQuiz(quizText, claudeApiKey);
-          updateChapter(ch.number, { practiceQuizData: balancedQuiz });
-        } catch {
-          // Quiz generation failed, continue
-        }
-
-        // Generate in-class quiz
-        try {
-          const inClassText = await streamMessage(
-            {
-              apiKey: claudeApiKey,
-              model: MODELS.opus,
-              system: buildInClassQuizPrompt(),
-              messages: [{
-                role: 'user',
-                content: buildInClassQuizUserPrompt(ch.title, ch.narrative, ch.keyConcepts, html.slice(0, 3000)),
-              }],
-              thinkingBudget: 'high',
-              maxTokens: 8000,
-            },
-            { onError: (err) => setError(err.message) }
-          );
-          try {
-            const parsed = parseJson(inClassText) as InClassQuizQuestion[];
-            const { balanceInClassQuiz } = await import('../services/quiz/answerBalancer');
-            const balanced = await balanceInClassQuiz(parsed, claudeApiKey);
-            if (balanced) updateChapter(ch.number, { inClassQuizData: balanced });
-          } catch {
-            // Parse failed, continue
-          }
-        } catch {
-          // In-class quiz generation failed, continue
-        }
-
-        // Generate weekly challenge
-        try {
-          const priorChapters = (ch.spacingConnections || [])
-            .map(n => syllabus.chapters.find(sc => sc.number === n))
-            .filter((sc): sc is NonNullable<typeof sc> => !!sc)
-            .map(sc => ({ number: sc.number, title: sc.title, keyConcepts: sc.keyConcepts }));
-          const { buildWeeklyChallengePrompt, buildWeeklyChallengeUserPrompt } = await import('../prompts/weeklyChallenge');
-          const challengeText = await streamMessage(
-            {
-              apiKey: claudeApiKey,
-              model: MODELS.opus,
-              system: buildWeeklyChallengePrompt(),
-              messages: [{
-                role: 'user',
-                content: buildWeeklyChallengeUserPrompt(ch.title, ch.narrative, ch.keyConcepts, html.slice(0, 3000), ch.number, priorChapters),
-              }],
-              thinkingBudget: 'high',
-              maxTokens: 10000,
-            },
-            { onError: (err) => setError(err.message) }
-          );
-          try {
-            const parsed = parseJson(challengeText, '{') as WeeklyChallengeData;
-            updateChapter(ch.number, { weeklyChallengeData: parsed });
-          } catch {
-            // Parse failed, continue
-          }
-        } catch {
-          // Weekly challenge generation failed, continue
-        }
-      } catch (err) {
-        setError(`Class ${ch.number}: ${friendlyError(err, 'generation failed.')}`);
-      }
-    }
-
-    } finally {
-      setBatchCurrentChapter(null);
-      setBatchPhase(null);
-      setBatchGenerating(false);
+    // Advanced-only materials (hidden tabs) are not generated — and not paid
+    // for — unless "Everything" is on.
+    if (advancedMode) {
+      if (activities.length === 0) tasks.push(generateActivities().catch(logFailure('activities')));
+      if (slidesData.length === 0) tasks.push(generateSlides().catch(logFailure('slides')));
+      if (!audioTranscript) tasks.push(generateAudio().catch(logFailure('audio')));
+      if (!currentChapter.weeklyChallengeData) tasks.push(generateWeeklyChallengeContent().catch(logFailure('weekly-challenge')));
     }
-  }, [syllabus, chapters, claudeApiKey, geminiApiKey, researchDossiers, setup.chapterLength, setup.themeId, addChapter, updateChapter, setError, setBatchGenerating, setBatchCurrentChapter, setBatchPhase]);
+    await Promise.allSettled(tasks);
+  }, [advancedMode, currentChapter, syllabusChapter, syllabus, quizHtml, inClassQuizData, discussions, activities, slidesData, audioTranscript, generateQuiz, generateInClassQuiz, generateDiscussion, generateActivities, generateSlides, generateAudio, generateWeeklyChallengeContent]);
 
-  // ─── Full batch generation (all materials for all chapters) ───
-  const generateEverything = useCallback(async () => {
+  // Keep the ref pointing at the latest generateAllOutputs so refineChapter
+  // can fire a post-refine regen *after* the new chapter content has been
+  // committed (closures captured at refine-call-time would otherwise point
+  // at the stale callback).
+  useEffect(() => {
+    generateAllOutputsRef.current = generateAllOutputs;
+  }, [generateAllOutputs]);
+
+  // ─── Batch generation ───
+  //
+  // One engine for both batch modes. Every material is guarded by "does it
+  // already exist?", so re-running after a partial failure — or pressing
+  // "Retry failed" on the end-of-run summary — fills only the holes and
+  // never regenerates work that already landed.
+  //
+  //   'classes'    → reading + practice quiz + in-class quiz (+ weekly challenge)
+  //   'everything' → the above plus discussion (+ activities, audio, slides)
+  //
+  // Weekly challenge, activities, audio and slides are advanced-only: in the
+  // Canvas-focused mode their tabs are hidden, so the batch must not
+  // generate (and bill for) them either.
+  const runBatch = useCallback(async (mode: 'everything' | 'classes') => {
     if (!syllabus) return;
     setBatchGenerating(true);
+    setBatchSummary(null);
+    resetBatchChapterMs();
     batchCancelRef.current = false;
+    // One controller for the whole run — Stop aborts the in-flight call
+    // immediately instead of waiting for the next loop checkpoint.
+    const controller = beginAbortable('batch');
+    const signal = controller.signal;
+    const failures: BatchFailure[] = [];
+    let chaptersCompleted = 0;
 
     try {
-    const chaptersWithResearch = syllabus.chapters.filter(
-      ch => researchDossiers.some(d => d.chapterNumber === ch.number && d.sources.length > 0)
-    );
-
-    for (const ch of chaptersWithResearch) {
-      if (batchCancelRef.current) break;
-      setBatchCurrentChapter(ch.number);
-
-      // Fresh read — chapter may already exist from a previous partial run
-      let existing = useCourseStore.getState().chapters.find(c => c.number === ch.number);
-
-      // ─── Phase 1: Sequential Opus calls ───
-      // 1a. Chapter HTML
-      if (!existing?.htmlContent) {
-        setBatchMaterial('Reading');
-        setBatchPhase('thinking');
-        try {
-          const dossier = researchDossiers.find(d => d.chapterNumber === ch.number);
-          const researchSources = dossier?.sources.map(s => ({
-            title: s.title, authors: s.authors, year: s.year,
-            summary: s.summary, url: s.url, doi: s.doi,
-          }));
-          const hasGemini = !!geminiApiKey;
-          const fullText = await streamMessage(
-            {
-              apiKey: claudeApiKey,
-              model: MODELS.opus,
-              system: buildChapterPrompt(setup.themeId, hasGemini),
-              messages: [{
-                role: 'user',
-                content: buildChapterUserPrompt(
-                  syllabus.courseTitle, ch, setup.chapterLength, researchSources, hasGemini,
-                ),
-              }],
-              thinkingBudget: 'high',
-              maxTokens: 16000,
-            },
-            {
-              onThinking: () => setBatchPhase('thinking'),
-              onText: () => setBatchPhase('writing'),
-              onError: (err) => setError(err.message),
-            }
-          );
-          let html = extractHtml(fullText);
-          if (hasGemini) {
-            setBatchPhase('writing');
-            html = await replaceGeminiPlaceholders(html, geminiApiKey);
-          }
-          addChapter({ number: ch.number, title: ch.title, htmlContent: html });
-        } catch (err) {
-          setError(`Class ${ch.number}: ${friendlyError(err, 'generation failed.')}`);
-          continue; // Skip entire chapter if reading fails
-        }
-      }
-
-      // Re-read after possible addChapter
-      existing = useCourseStore.getState().chapters.find(c => c.number === ch.number);
-      if (!existing?.htmlContent) continue;
-      const html = existing.htmlContent;
-
-      // 1b. Practice Quiz
-      if (!existing.practiceQuizData) {
-        setBatchMaterial('Practice Quiz');
-        setBatchPhase('thinking');
-        try {
-          const quizText = await streamMessage(
-            {
-              apiKey: claudeApiKey,
-              model: MODELS.opus,
-              system: buildPracticeQuizPrompt(),
-              messages: [{
-                role: 'user',
-                content: buildPracticeQuizUserPrompt(ch.title, ch.narrative, ch.keyConcepts, html.slice(0, 3000)),
-              }],
-              thinkingBudget: 'high',
-              maxTokens: 8000,
-            },
-            { onError: (err) => setError(err.message) }
-          );
-          const { balancePracticeQuiz } = await import('../services/quiz/answerBalancer');
-          const balancedQuiz = await balancePracticeQuiz(quizText, claudeApiKey);
-          updateChapter(ch.number, { practiceQuizData: balancedQuiz });
-        } catch {
-          // Quiz failed, continue
-        }
-      }
-
-      // 1c. In-Class Quiz
-      existing = useCourseStore.getState().chapters.find(c => c.number === ch.number);
-      if (!existing?.inClassQuizData || existing.inClassQuizData.length === 0) {
-        setBatchMaterial('In-Class Quiz');
-        setBatchPhase('thinking');
-        try {
-          const inClassText = await streamMessage(
-            {
-              apiKey: claudeApiKey,
-              model: MODELS.opus,
-              system: buildInClassQuizPrompt(),
-              messages: [{
-                role: 'user',
-                content: buildInClassQuizUserPrompt(ch.title, ch.narrative, ch.keyConcepts, html.slice(0, 3000)),
-              }],
-              thinkingBudget: 'high',
-              maxTokens: 8000,
-            },
-            { onError: (err) => setError(err.message) }
-          );
-          try {
-            const parsed = parseJson(inClassText) as InClassQuizQuestion[];
-            const { balanceInClassQuiz } = await import('../services/quiz/answerBalancer');
-            const balanced = await balanceInClassQuiz(parsed, claudeApiKey);
-            if (balanced) updateChapter(ch.number, { inClassQuizData: balanced });
-          } catch {
-            // Parse failed
-          }
-        } catch {
-          // In-class quiz failed, continue
+      // Queue = researched chapters that still have work to do in this mode.
+      const queue = syllabus.chapters.filter((ch) => {
+        if (!researchDossiers.some(d => d.chapterNumber === ch.number && d.sources.length > 0)) return false;
+        const ex = useCourseStore.getState().chapters.find(c => c.number === ch.number);
+        if (!ex?.htmlContent || !ex.practiceQuizData || !(ex.inClassQuizData && ex.inClassQuizData.length > 0)) return true;
+        if (advancedMode && !ex.weeklyChallengeData) return true;
+        if (mode === 'everything') {
+          return !(ex.discussionData && ex.discussionData.length > 0)
+            || (advancedMode && (
+              !(ex.activityData && ex.activityData.length > 0)
+              || !ex.audioTranscript
+              || !(ex.slidesJson && ex.slidesJson.length > 0)
+            ));
         }
-      }
-
-      // 1d. Weekly Challenge
-      existing = useCourseStore.getState().chapters.find(c => c.number === ch.number);
-      if (!existing?.weeklyChallengeData) {
-        setBatchMaterial('Weekly Challenge');
-        setBatchPhase('thinking');
-        try {
-          const priorChapters = (ch.spacingConnections || [])
-            .map(n => syllabus.chapters.find(sc => sc.number === n))
-            .filter((sc): sc is NonNullable<typeof sc> => !!sc)
-            .map(sc => ({ number: sc.number, title: sc.title, keyConcepts: sc.keyConcepts }));
-
-          const { buildWeeklyChallengePrompt, buildWeeklyChallengeUserPrompt } = await import('../prompts/weeklyChallenge');
-          const challengeText = await streamMessage(
-            {
-              apiKey: claudeApiKey,
-              model: MODELS.opus,
-              system: buildWeeklyChallengePrompt(),
-              messages: [{
-                role: 'user',
-                content: buildWeeklyChallengeUserPrompt(ch.title, ch.narrative, ch.keyConcepts, html.slice(0, 3000), ch.number, priorChapters),
-              }],
-              thinkingBudget: 'high',
-              maxTokens: 10000,
-            },
-            { onError: (err) => setError(err.message) }
-          );
-          try {
-            const parsed = parseJson(challengeText, '{') as WeeklyChallengeData;
-            updateChapter(ch.number, { weeklyChallengeData: parsed });
-          } catch {
-            // Parse failed
-          }
-        } catch {
-          // Weekly challenge generation failed, continue
-        }
-      }
+        return false;
+      });
+      setBatchProgress(0, queue.length);
 
-      // ─── Phase 2: Parallel Haiku/Gemini calls ───
-      setBatchMaterial('Extras');
-      setBatchPhase('writing');
-      existing = useCourseStore.getState().chapters.find(c => c.number === ch.number);
+      for (let qi = 0; qi < queue.length; qi++) {
+        const ch = queue[qi];
+        if (batchCancelRef.current || signal.aborted) break;
+        setBatchProgress(qi + 1, queue.length);
+        setBatchCurrentChapter(ch.number);
+        const chapterStart = Date.now();
 
-      const parallelTasks: Promise<void>[] = [];
+        // Fresh read — chapter may already exist from a previous partial run
+        let existing = useCourseStore.getState().chapters.find(c => c.number === ch.number);
 
-      // Discussion
-      if (!existing?.discussionData || existing.discussionData.length === 0) {
-        parallelTasks.push((async () => {
+        // ─── Phase 1: Sequential Opus calls ───
+        // 1a. Chapter HTML
+        if (!existing?.htmlContent) {
+          setBatchMaterial('Reading');
+          setBatchPhase('thinking');
           try {
-            const fullText = await streamWithRetry(
+            const dossier = researchDossiers.find(d => d.chapterNumber === ch.number);
+            const researchSources = dossier?.sources.map(s => ({
+              title: s.title, authors: s.authors, year: s.year,
+              summary: s.summary, url: s.url, doi: s.doi,
+            }));
+            const hasImageGen = !!openaiApiKey;
+            const fullText = await streamMessage(
               {
                 apiKey: claudeApiKey,
-                system: buildDiscussionPrompt(),
+                model: MODELS.opus,
+                system: buildChapterPrompt(setup.themeId, hasImageGen),
+                signal,
                 messages: [{
                   role: 'user',
-                  content: buildDiscussionUserPrompt(ch.title, ch.keyConcepts, setup.cohortSize, setup.teachingEnvironment),
+                  content: buildChapterUserPrompt(
+                    syllabus.courseTitle, ch, setup.chapterLength,
+                    { educationLevel: setup.educationLevel, priorKnowledge: setup.priorKnowledge, learnerNotes: setup.learnerNotes },
+                    researchSources, hasImageGen, setup.chapterLengthBrief,
+                  ),
                 }],
-                thinkingBudget: 'medium',
-                maxTokens: 4000,
+                thinkingBudget: 'high',
+                maxTokens: 16000,
               },
-              {}
+              {
+                onThinking: () => setBatchPhase('thinking'),
+                onText: () => setBatchPhase('writing'),
+              }
             );
-            const parsed = parseJson(fullText) as DiscussionPrompt[];
-            updateChapter(ch.number, { discussionData: parsed });
-          } catch { /* continue */ }
-        })());
-      }
+            let html = extractHtml(fullText);
+            if (hasImageGen) {
+              setBatchPhase('writing');
+              html = await replaceAiPlaceholders(html, openaiApiKey);
+            }
+            addChapter({ number: ch.number, title: ch.title, htmlContent: html });
+          } catch (err) {
+            if (isAbortError(err) || signal.aborted) break;
+            failures.push({ chapter: ch.number, material: 'Reading', message: friendlyError(err, 'Drafting failed.') });
+            continue; // everything else needs the reading
+          }
+        }
 
-      // Activities
-      if (!existing?.activityData || existing.activityData.length === 0) {
-        parallelTasks.push((async () => {
+        // Re-read after possible addChapter
+        existing = useCourseStore.getState().chapters.find(c => c.number === ch.number);
+        if (!existing?.htmlContent) continue;
+        const html = existing.htmlContent;
+
+        // 1b. Practice Quiz
+        if (!existing.practiceQuizData) {
+          setBatchMaterial('Practice Quiz');
+          setBatchPhase('thinking');
           try {
-            const fullText = await streamWithRetry(
+            const quizText = await streamMessage(
               {
                 apiKey: claudeApiKey,
-                system: buildActivitiesPrompt(),
+                model: MODELS.opus,
+                system: buildPracticeQuizPrompt(),
+                signal,
                 messages: [{
                   role: 'user',
-                  content: buildActivitiesUserPrompt(ch.title, ch.keyConcepts, setup.cohortSize, setup.teachingEnvironment, setup.environmentNotes),
+                  content: buildPracticeQuizUserPrompt(ch.title, ch.narrative, ch.keyConcepts, html.slice(0, 3000)),
                 }],
-                thinkingBudget: 'medium',
-                maxTokens: 4000,
+                thinkingBudget: 'high',
+                maxTokens: 8000,
               },
               {}
             );
-            const parsed = parseJson(fullText) as Activity[];
-            updateChapter(ch.number, { activityData: parsed });
-          } catch { /* continue */ }
-        })());
-      }
+            const { balancePracticeQuiz } = await import('../services/quiz/answerBalancer');
+            const balancedQuiz = await balancePracticeQuiz(quizText, claudeApiKey);
+            updateChapter(ch.number, { practiceQuizData: balancedQuiz });
+          } catch (err) {
+            if (isAbortError(err) || signal.aborted) break;
+            failures.push({ chapter: ch.number, material: 'Practice quiz', message: friendlyError(err, 'Generation failed.') });
+          }
+        }
 
-      // Audio transcript (+TTS)
-      if (!existing?.audioTranscript) {
-        parallelTasks.push((async () => {
+        // 1c. In-Class Quiz
+        existing = useCourseStore.getState().chapters.find(c => c.number === ch.number);
+        if (!existing?.inClassQuizData || existing.inClassQuizData.length === 0) {
+          setBatchMaterial('In-Class Quiz');
+          setBatchPhase('thinking');
           try {
-            const transcript = await streamWithRetry(
+            const inClassText = await streamMessage(
               {
                 apiKey: claudeApiKey,
-                system: buildAudioTranscriptPrompt(),
+                model: MODELS.opus,
+                system: buildInClassQuizPrompt(),
+                signal,
                 messages: [{
                   role: 'user',
-                  content: buildAudioTranscriptUserPrompt(ch.title, html),
+                  content: buildInClassQuizUserPrompt(ch.title, ch.narrative, ch.keyConcepts, html.slice(0, 3000)),
                 }],
-                thinkingBudget: 'medium',
+                thinkingBudget: 'high',
                 maxTokens: 8000,
               },
               {}
             );
-            updateChapter(ch.number, { audioTranscript: transcript });
-
-            if (geminiApiKey) {
-              try {
-                const { generateAudiobook } = await import('../services/gemini/tts');
-                const batchVoice = getVoiceOption(setup.voiceId);
-                const blob = await generateAudiobook(transcript, geminiApiKey, { voiceName: batchVoice.id, accent: batchVoice.accent });
-                const url = URL.createObjectURL(blob);
-                updateChapter(ch.number, { audioUrl: url });
-              } catch {
-                // TTS failed, transcript is still saved
-              }
+            try {
+              const parsed = parseJson(inClassText) as InClassQuizQuestion[];
+              const { balanceInClassQuiz } = await import('../services/quiz/answerBalancer');
+              const balanced = await balanceInClassQuiz(parsed, claudeApiKey);
+              if (balanced) updateChapter(ch.number, { inClassQuizData: balanced });
+            } catch {
+              failures.push({ chapter: ch.number, material: 'In-class quiz', message: 'The model returned unparseable quiz data — a retry usually fixes this.' });
             }
-          } catch { /* continue */ }
-        })());
-      }
+          } catch (err) {
+            if (isAbortError(err) || signal.aborted) break;
+            failures.push({ chapter: ch.number, material: 'In-class quiz', message: friendlyError(err, 'Generation failed.') });
+          }
+        }
 
-      // Slides
-      if (!existing?.slidesJson || existing.slidesJson.length === 0) {
-        parallelTasks.push((async () => {
+        // 1d. Weekly Challenge
+        existing = useCourseStore.getState().chapters.find(c => c.number === ch.number);
+        if (advancedMode && !existing?.weeklyChallengeData) {
+          setBatchMaterial('Weekly Challenge');
+          setBatchPhase('thinking');
           try {
-            const fullText = await streamWithRetry(
-              {
-                apiKey: claudeApiKey,
-                system: buildSlidesPrompt(),
-                messages: [{
-                  role: 'user',
-                  content: buildSlidesUserPrompt(ch.title, ch.keyConcepts, html),
-                }],
-                thinkingBudget: 'medium',
-                maxTokens: 4000,
-              },
-              {}
-            );
-            const parsed = parseJson(fullText) as SlideData[];
-            updateChapter(ch.number, { slidesJson: parsed });
-          } catch { /* continue */ }
-        })());
-      }
+            const priorChapters = (ch.spacingConnections || [])
+              .map(n => syllabus.chapters.find(sc => sc.number === n))
+              .filter((sc): sc is NonNullable<typeof sc> => !!sc)
+              .map(sc => ({ number: sc.number, title: sc.title, keyConcepts: sc.keyConcepts }));
 
-      // Infographic (requires Gemini)
-      if (geminiApiKey && !existing?.infographicDataUri) {
-        parallelTasks.push((async () => {
-          try {
-            const { buildInfographicMetaPrompt, buildInfographicMetaUserPrompt } = await import('../prompts/infographic');
-            const promptText = await streamWithRetry(
+            const { buildWeeklyChallengePrompt, buildWeeklyChallengeUserPrompt } = await import('../prompts/weeklyChallenge');
+            const challengeText = await streamMessage(
               {
                 apiKey: claudeApiKey,
                 model: MODELS.opus,
-                system: buildInfographicMetaPrompt(setup.themeId),
+                system: buildWeeklyChallengePrompt(),
+                signal,
                 messages: [{
                   role: 'user',
-                  content: buildInfographicMetaUserPrompt(ch.title, ch.keyConcepts, html),
+                  content: buildWeeklyChallengeUserPrompt(ch.title, ch.narrative, ch.keyConcepts, html.slice(0, 3000), ch.number, priorChapters),
                 }],
-                thinkingBudget: 'medium',
-                maxTokens: 2000,
+                thinkingBudget: 'high',
+                maxTokens: 10000,
               },
               {}
             );
-            updateChapter(ch.number, { infographicPrompt: promptText });
-            const { generateInfographic: genImg } = await import('../services/gemini/imageGen');
-            const dataUri = await genImg(promptText, geminiApiKey);
-            updateChapter(ch.number, { infographicDataUri: dataUri });
-          } catch { /* continue */ }
-        })());
+            try {
+              const parsed = parseJson(challengeText, '{') as WeeklyChallengeData;
+              updateChapter(ch.number, { weeklyChallengeData: parsed });
+            } catch {
+              failures.push({ chapter: ch.number, material: 'Weekly challenge', message: 'The model returned unparseable challenge data — a retry usually fixes this.' });
+            }
+          } catch (err) {
+            if (isAbortError(err) || signal.aborted) break;
+            failures.push({ chapter: ch.number, material: 'Weekly challenge', message: friendlyError(err, 'Generation failed.') });
+          }
+        }
+
+        // ─── Phase 2: Parallel extras — 'everything' mode only ───
+        if (mode === 'everything') {
+          setBatchMaterial('Extras');
+          setBatchPhase('writing');
+          existing = useCourseStore.getState().chapters.find(c => c.number === ch.number);
+
+          const parallelTasks: Promise<void>[] = [];
+
+          // Discussion
+          if (!existing?.discussionData || existing.discussionData.length === 0) {
+            parallelTasks.push((async () => {
+              try {
+                const fullText = await streamWithRetry(
+                  {
+                    apiKey: claudeApiKey,
+                    system: buildDiscussionPrompt(),
+                    signal,
+                    messages: [{
+                      role: 'user',
+                      content: buildDiscussionUserPrompt(ch.title, ch.keyConcepts, setup.cohortSize, setup.teachingEnvironment),
+                    }],
+                    thinkingBudget: 'medium',
+                    maxTokens: 4000,
+                  },
+                  {}
+                );
+                const parsed = parseJson(fullText) as DiscussionPrompt[];
+                updateChapter(ch.number, { discussionData: parsed });
+              } catch (err) {
+                if (!isAbortError(err)) failures.push({ chapter: ch.number, material: 'Discussion', message: friendlyError(err, 'Generation failed.') });
+              }
+            })());
+          }
+
+          // Activities (advanced only)
+          if (advancedMode && (!existing?.activityData || existing.activityData.length === 0)) {
+            parallelTasks.push((async () => {
+              try {
+                const fullText = await streamWithRetry(
+                  {
+                    apiKey: claudeApiKey,
+                    system: buildActivitiesPrompt(),
+                    signal,
+                    messages: [{
+                      role: 'user',
+                      content: buildActivitiesUserPrompt(ch.title, ch.keyConcepts, setup.cohortSize, setup.teachingEnvironment, setup.environmentNotes),
+                    }],
+                    thinkingBudget: 'medium',
+                    maxTokens: 4000,
+                  },
+                  {}
+                );
+                const parsed = parseJson(fullText) as Activity[];
+                updateChapter(ch.number, { activityData: parsed });
+              } catch (err) {
+                if (!isAbortError(err)) failures.push({ chapter: ch.number, material: 'Activities', message: friendlyError(err, 'Generation failed.') });
+              }
+            })());
+          }
+
+          // Audio transcript (+TTS) (advanced only)
+          if (advancedMode && !existing?.audioTranscript) {
+            parallelTasks.push((async () => {
+              try {
+                const transcript = await streamWithRetry(
+                  {
+                    apiKey: claudeApiKey,
+                    system: buildAudioTranscriptPrompt(),
+                    signal,
+                    messages: [{
+                      role: 'user',
+                      content: buildAudioTranscriptUserPrompt(ch.title, html),
+                    }],
+                    thinkingBudget: 'medium',
+                    maxTokens: 8000,
+                  },
+                  {}
+                );
+                updateChapter(ch.number, { audioTranscript: transcript });
+
+                if (elevenLabsApiKey) {
+                  try {
+                    const { generateAudiobook } = await import('../services/elevenLabs/tts');
+                    const batchVoice = getVoiceOption(setup.voiceId);
+                    const blob = await generateAudiobook(transcript, elevenLabsApiKey, { voiceId: batchVoice.id, signal });
+                    const url = URL.createObjectURL(blob);
+                    const audioDataUri = await persistableAudioDataUri(blob);
+                    updateChapter(ch.number, { audioUrl: url, audioDataUri });
+                  } catch (err) {
+                    // The transcript is saved either way.
+                    if (!isAbortError(err)) failures.push({ chapter: ch.number, material: 'Audio narration', message: friendlyError(err, 'Synthesis failed — the transcript is saved.') });
+                  }
+                }
+              } catch (err) {
+                if (!isAbortError(err)) failures.push({ chapter: ch.number, material: 'Audio transcript', message: friendlyError(err, 'Generation failed.') });
+              }
+            })());
+          }
+
+          // Slides (advanced only)
+          if (advancedMode && (!existing?.slidesJson || existing.slidesJson.length === 0)) {
+            parallelTasks.push((async () => {
+              try {
+                const fullText = await streamWithRetry(
+                  {
+                    apiKey: claudeApiKey,
+                    system: buildSlidesPrompt(setup.themeId),
+                    signal,
+                    messages: [{
+                      role: 'user',
+                      content: buildSlidesUserPrompt(ch.title, ch.keyConcepts, html),
+                    }],
+                    thinkingBudget: 'medium',
+                    maxTokens: 4000,
+                  },
+                  {}
+                );
+                const parsed = parseJson(fullText) as SlideData[];
+                updateChapter(ch.number, { slidesJson: parsed });
+              } catch (err) {
+                if (!isAbortError(err)) failures.push({ chapter: ch.number, material: 'Slides', message: friendlyError(err, 'Generation failed.') });
+              }
+            })());
+          }
+
+          if (parallelTasks.length > 0) {
+            await Promise.allSettled(parallelTasks);
+          }
+        }
+
+        if (!batchCancelRef.current && !signal.aborted) {
+          pushBatchChapterMs(Date.now() - chapterStart);
+          chaptersCompleted++;
+        }
+      }
+    } finally {
+      endAbortable('batch', controller);
+      setBatchSummary({
+        mode,
+        chaptersCompleted,
+        failures,
+        cancelled: batchCancelRef.current || signal.aborted,
+      });
+      setBatchProgress(null, null);
+      setBatchCurrentChapter(null);
+      setBatchPhase(null);
+      setBatchMaterial(null);
+      setBatchGenerating(false);
+    }
+  }, [advancedMode, syllabus, claudeApiKey, openaiApiKey, elevenLabsApiKey, researchDossiers, setup, addChapter, updateChapter, setBatchGenerating, setBatchCurrentChapter, setBatchPhase, setBatchMaterial, setBatchProgress, pushBatchChapterMs, resetBatchChapterMs, setBatchSummary]);
+
+  const generateAllClasses = useCallback(() => runBatch('classes'), [runBatch]);
+  const generateEverything = useCallback(() => runBatch('everything'), [runBatch]);
+
+  // ─── Canvas module generation (template mode) ───
+  const generateTemplateContent = useCallback(async () => {
+    if (!syllabus || !syllabusChapter) return;
+    const capturedChapter = selectedChapterNum;
+    setGeneratingTemplateContent(capturedChapter);
+    clearTabError('template-module');
+    const abortKey = materialAbortKey('template-module', capturedChapter);
+    const controller = beginAbortable(abortKey);
+
+    try {
+      const { generateTemplateChapter } = await import('../services/template/generateChapter');
+      const { content } = await generateTemplateChapter({
+        apiKey: claudeApiKey,
+        setup,
+        chapter: syllabusChapter,
+        courseTitle: syllabus.courseTitle,
+        courseOverview: syllabus.courseOverview,
+        examplePatternContent,
+        signal: controller.signal,
+      });
+      // The chapter record may not exist yet in template mode.
+      if (!useCourseStore.getState().chapters.some((c) => c.number === capturedChapter)) {
+        addChapter({ number: capturedChapter, title: syllabusChapter.title, htmlContent: '' });
       }
-
-      if (parallelTasks.length > 0) {
-        await Promise.allSettled(parallelTasks);
+      updateChapter(capturedChapter, { templateContent: content });
+    } catch (err) {
+      // A user-initiated Stop is a silent cancel, not a failure.
+      if (!isAbortError(err)) {
+        setTabError('template-module', friendlyError(err, 'Canvas module generation failed.'));
       }
+    } finally {
+      endAbortable(abortKey, controller);
+      setGeneratingTemplateContent(null);
     }
+  }, [syllabus, syllabusChapter, selectedChapterNum, claudeApiKey, setup, examplePatternContent, addChapter, updateChapter, setTabError, clearTabError]);
+
+  const generateAllCanvasModules = useCallback(async () => {
+    if (!syllabus) return;
+    setBatchGenerating(true);
+    setBatchMaterial('Canvas module');
+    batchCancelRef.current = false;
+    const controller = beginAbortable('batch');
+
+    try {
+      const pending = syllabus.chapters.filter((ch) => {
+        const generated = useCourseStore.getState().chapters.find((c) => c.number === ch.number);
+        return !generated?.templateContent;
+      });
 
+      const { generateTemplateChapter } = await import('../services/template/generateChapter');
+
+      for (const ch of pending) {
+        if (batchCancelRef.current || controller.signal.aborted) break;
+        setBatchCurrentChapter(ch.number);
+        setBatchPhase('thinking');
+        try {
+          const { content } = await generateTemplateChapter({
+            apiKey: claudeApiKey,
+            setup,
+            chapter: ch,
+            courseTitle: syllabus.courseTitle,
+            courseOverview: syllabus.courseOverview,
+            examplePatternContent,
+            signal: controller.signal,
+            onText: () => setBatchPhase('writing'),
+          });
+          // The chapter record may not exist yet in template mode — create it
+          // so templateContent has somewhere to live.
+          if (!useCourseStore.getState().chapters.some((c) => c.number === ch.number)) {
+            addChapter({ number: ch.number, title: ch.title, htmlContent: '' });
+          }
+          updateChapter(ch.number, { templateContent: content });
+        } catch (err) {
+          if (isAbortError(err)) break;
+          setError(
+            friendlyError(err, `Canvas module generation failed for Class ${ch.number}.`),
+          );
+          // Move on rather than aborting the batch — one bad chapter
+          // shouldn't block the rest.
+        }
+      }
     } finally {
+      endAbortable('batch', controller);
+      batchCancelRef.current = false;
       setBatchCurrentChapter(null);
       setBatchPhase(null);
       setBatchMaterial(null);
       setBatchGenerating(false);
     }
-  }, [syllabus, claudeApiKey, geminiApiKey, researchDossiers, setup, addChapter, updateChapter, setError, setBatchGenerating, setBatchCurrentChapter, setBatchPhase, setBatchMaterial]);
+  }, [syllabus, claudeApiKey, setup, examplePatternContent, addChapter, updateChapter, setError, setBatchGenerating, setBatchCurrentChapter, setBatchPhase, setBatchMaterial]);
+
+  const templateContent = currentChapter?.templateContent;
 
   const handleProceed = () => {
     if (anyBusy) {
@@ -1443,10 +1432,26 @@ export function BuildPage() {
 
   if (!syllabus) {
     return (
-      <div className="text-center py-20">
-        <p className="text-text-secondary">No syllabus available. Please complete earlier stages.</p>
-        <Button variant="secondary" className="mt-4" onClick={() => navigate('/syllabus')}>
-          Back to Syllabus
+      <div
+        style={{
+          fontFamily: 'var(--font-cb-serif)',
+          padding: '64px 0',
+          textAlign: 'center',
+          color: 'var(--cb-text-default)',
+        }}
+      >
+        <p
+          className="cb-italic"
+          style={{
+            fontSize: 16,
+            color: 'var(--cb-text-muted)',
+            marginBottom: 18,
+          }}
+        >
+          No syllabus generated yet. Step back to the syllabus stage to start.
+        </p>
+        <Button variant="secondary" onClick={() => navigate('/syllabus')}>
+          ← Back to syllabus
         </Button>
       </div>
     );
@@ -1454,67 +1459,197 @@ export function BuildPage() {
 
   const totalChapters = syllabus.chapters.length;
   const generatedCount = chapters.length;
-  const overallProgress = totalChapters > 0 ? (generatedCount / totalChapters) * 100 : 0;
 
-  const templateContent = currentChapter?.templateContent;
   const tabs = [
     ...(setup.templateId
       ? [{ id: 'template-module', label: 'Canvas Module', ready: !!templateContent }]
       : []),
     { id: 'chapter', label: 'Reading', ready: !!chapterHtml },
-    { id: 'quiz', label: 'Practice Quiz', ready: !!quizHtml },
-    { id: 'inclassquiz', label: 'In-Class Quiz', ready: inClassQuizData.length > 0 },
+    { id: 'quiz', label: 'Practice', ready: !!quizHtml },
+    { id: 'inclassquiz', label: 'Quizzes', ready: inClassQuizData.length > 0 },
     { id: 'discussion', label: 'Discussion', ready: discussions.length > 0 },
     // Advanced-only artifacts. Hidden by default to keep the Canvas-focused
-    // surface tight; instructors who want multimedia can flip the toggle on
-    // the Setup page.
+    // surface tight; instructors who want multimedia flip the toggle in the
+    // API keys modal on the Setup page.
     ...(advancedMode
       ? [
-          { id: 'weeklychallenge', label: 'Weekly Challenge', ready: !!weeklyChallengeHtml },
+          { id: 'weeklychallenge', label: 'Challenge', ready: !!weeklyChallengeHtml },
           { id: 'activities', label: 'Activities', ready: activities.length > 0 },
-          { id: 'audio', label: 'Audiobook', ready: !!audioTranscript },
+          { id: 'audio', label: 'Audio', ready: !!audioTranscript },
           { id: 'slides', label: 'Slides', ready: slidesData.length > 0 },
         ]
       : []),
-    ...(advancedMode && geminiApiKey
-      ? [{ id: 'infographic', label: 'Infographic', ready: !!infographicDataUri }]
-      : []),
   ];
 
+  // Rolling ETA from completed chapters this run — only meaningful once at
+  // least one chapter has finished.
+  const batchEtaLabel = (() => {
+    if (!batchGenerating || !batchTotal || !batchIndex || batchChapterMs.length === 0) return '';
+    const avg = batchChapterMs.reduce((a, b) => a + b, 0) / batchChapterMs.length;
+    const mins = Math.max(1, Math.round((avg * (batchTotal - batchIndex + 1)) / 60000));
+    return `~${mins} min left`;
+  })();
+
+  // Per-tab retry targets for the tab-error banner. The reading tab routes
+  // errors through the global banner, so it has no entry here.
+  const tabRetryHandlers: Record<string, (() => void) | undefined> = {
+    quiz: () => void generateQuiz(),
+    inclassquiz: () => void generateInClassQuiz(),
+    weeklychallenge: () => void generateWeeklyChallengeContent(),
+    discussion: () => void generateDiscussion(),
+    activities: () => void generateActivities(),
+    audio: () => void generateAudio(),
+    slides: () => void generateSlides(),
+  };
+
   return (
-    <motion.div
-      initial={{ opacity: 0 }}
-      animate={{ opacity: 1 }}
-      className="max-w-[1400px] mx-auto py-4"
+    <div
+      style={{
+        fontFamily: 'var(--font-cb-serif)',
+        color: 'var(--cb-text-default)',
+        padding: '24px 0 32px',
+      }}
     >
-      {/* ─── Sticky header ─── */}
-      <div className="flex items-center justify-between mb-4">
-        <div className="flex items-center gap-4">
-          <h1 className="text-2xl font-bold">Build</h1>
-          <div className="flex items-center gap-3">
-            <div className="w-32 h-1.5 bg-bg-elevated rounded-full overflow-hidden">
-              <motion.div
-                className="h-full bg-gradient-to-r from-violet-600 to-violet-400 rounded-full"
-                animate={{ width: `${overallProgress}%` }}
-                transition={{ duration: 0.5 }}
-              />
-            </div>
-            <span className="text-xs text-text-muted tabular-nums">{generatedCount}/{totalChapters} classes</span>
+      {/* ─── Codex slim banner ─── */}
+      <header
+        className="cb-page-head"
+        style={{
+          display: 'grid',
+          gridTemplateColumns: '1fr auto',
+          gap: 24,
+          alignItems: 'flex-end',
+          paddingBottom: 14,
+          marginBottom: 18,
+          borderBottom: '0.5px solid var(--cb-border-rule)',
+        }}
+      >
+        <div style={{ minWidth: 0 }}>
+          <div
+            className="cb-sc"
+            style={{
+              fontSize: 13,
+              color: 'var(--cb-accent-emphasis)',
+              letterSpacing: '0.16em',
+            }}
+          >
+            Building the course
+          </div>
+          <h1
+            style={{
+              margin: '4px 0 6px',
+              fontSize: 26,
+              lineHeight: 1.25,
+              fontWeight: 500,
+              fontVariationSettings: '"opsz" 22',
+              letterSpacing: '-0.005em',
+              color: 'var(--cb-text-default)',
+            }}
+          >
+            {syllabus?.courseTitle || 'Build'}
+          </h1>
+          <div
+            style={{
+              display: 'flex',
+              alignItems: 'baseline',
+              gap: 10,
+              fontSize: 14.5,
+              lineHeight: 1.5,
+              color: 'var(--cb-text-muted)',
+            }}
+          >
+            {batchGenerating && (
+              <span
+                aria-hidden
+                style={{
+                  display: 'inline-block',
+                  width: 48,
+                  height: 1,
+                  background: 'var(--cb-border-default)',
+                  position: 'relative',
+                  overflow: 'hidden',
+                  verticalAlign: 'middle',
+                }}
+              >
+                <span
+                  style={{
+                    position: 'absolute',
+                    inset: 0,
+                    background: 'var(--cb-accent-emphasis)',
+                    animation:
+                      'cb-pen 1.4s cubic-bezier(0.32,0.04,0.32,1) infinite',
+                  }}
+                />
+              </span>
+            )}
+            <span className="cb-italic">
+              {batchGenerating
+                ? [
+                    batchIndex && batchTotal ? `Class ${batchIndex} of ${batchTotal}` : '',
+                    batchMaterial
+                      ? `drafting ${batchMaterial.toLowerCase()} for chapter ${batchCurrentChapter}…`
+                      : `drafting chapter ${batchCurrentChapter}…`,
+                    batchEtaLabel,
+                  ]
+                    .filter(Boolean)
+                    .join(' · ')
+                : generatedCount === totalChapters && totalChapters > 0
+                ? `— ${totalChapters} ${totalChapters === 1 ? 'chapter' : 'chapters'} built.`
+                : `${generatedCount} of ${totalChapters} ${totalChapters === 1 ? 'chapter' : 'chapters'} built.`}
+            </span>
           </div>
         </div>
-        <div className="flex gap-2">
-          {!batchGenerating && generatedCount < totalChapters && (
-            <Button
-              size="sm"
-              variant="secondary"
-              onClick={() => setShowBatchConfirm(true)}
-              disabled={anyBusy}
+
+        <div
+          className="cb-page-head-actions"
+          style={{
+            display: 'flex',
+            gap: 10,
+            flexShrink: 0,
+            alignItems: 'baseline',
+            flexWrap: 'wrap',
+          }}
+        >
+          {batchGenerating ? (
+            <button
+              type="button"
+              onClick={() => {
+                batchCancelRef.current = true;
+                abortInFlight('batch');
+              }}
+              className="cb-focus"
+              title="Stops now — the in-flight call is cancelled; finished materials are kept."
+              style={{
+                background: 'transparent',
+                border: 0,
+                padding: 0,
+                cursor: 'pointer',
+                fontFamily: 'inherit',
+                fontSize: 13,
+                fontStyle: 'italic',
+                color: 'var(--cb-status-warning)',
+                textDecoration: 'underline',
+                textDecorationThickness: '0.5px',
+                textUnderlineOffset: 3,
+              }}
             >
-              {generatedCount > 0 ? 'Generate Remaining Classes' : 'Generate All Classes'}
-            </Button>
+              Stop
+            </button>
+          ) : (
+            generatedCount < totalChapters && (
+              <Button
+                size="sm"
+                variant="secondary"
+                onClick={() => setShowBatchConfirm(true)}
+                disabled={anyBusy}
+              >
+                {generatedCount > 0 ? 'Draft remaining chapters' : 'Draft all chapters'}
+              </Button>
+            )
           )}
-          {!batchGenerating && setup.templateId && chapters.length > 0 && (() => {
-            const missing = chapters.filter((c) => !c.templateContent).length;
+          {!batchGenerating && setup.templateId && (() => {
+            const missing = syllabus.chapters.filter(
+              (ch) => !chapters.find((c) => c.number === ch.number)?.templateContent,
+            ).length;
             if (missing === 0) return null;
             return (
               <Button
@@ -1523,56 +1658,38 @@ export function BuildPage() {
                 onClick={generateAllCanvasModules}
                 disabled={anyBusy}
               >
-                {missing === chapters.length
-                  ? 'Generate All Canvas Modules'
-                  : `Generate ${missing} Remaining Canvas ${missing === 1 ? 'Module' : 'Modules'}`}
+                {missing === syllabus.chapters.length
+                  ? 'Generate all Canvas modules'
+                  : `Generate ${missing} remaining Canvas ${missing === 1 ? 'module' : 'modules'}`}
               </Button>
             );
           })()}
-          {batchGenerating && (
-            <div className="flex items-center gap-3">
-              <span className="flex items-center gap-2 text-xs text-violet-400">
-                <motion.div
-                  className="w-4 h-4 border-2 border-violet-500 border-t-transparent rounded-full"
-                  animate={{ rotate: 360 }}
-                  transition={{ duration: 1, repeat: Infinity, ease: 'linear' }}
-                />
-                {batchMaterial
-                  ? `Class ${batchCurrentChapter}: ${batchMaterial}`
-                  : 'Batch generating...'}
-              </span>
-              <button
-                onClick={() => { batchCancelRef.current = true; }}
-                className="text-xs text-amber-400 hover:text-amber-300 bg-transparent border-0 cursor-pointer underline"
-              >
-                Stop After Current
-              </button>
-            </div>
-          )}
           <Button
             size="sm"
-            variant="secondary"
             onClick={handleProceed}
             disabled={chapters.length === 0}
           >
-            Go to Export
-            <svg className="ml-1.5 w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-              <line x1="5" y1="12" x2="19" y2="12" />
-              <polyline points="12 5 19 12 12 19" />
-            </svg>
+            Go to Export →
           </Button>
         </div>
-      </div>
+      </header>
 
       {/* Batch generation confirmation dialog */}
       <AnimatePresence>
         {showBatchConfirm && (() => {
-          const remaining = totalChapters - generatedCount;
-          const researched = syllabus.chapters.filter(
+          // Chapters with research that still need core materials — matches
+          // runBatch's own fill-the-holes queue, so the count is honest.
+          const researched = syllabus.chapters.filter((ch) => {
+            if (!researchDossiers.some(d => d.chapterNumber === ch.number && d.sources.length > 0)) return false;
+            const ex = chapters.find(c => c.number === ch.number);
+            return !ex?.htmlContent || !ex.practiceQuizData
+              || !(ex.inClassQuizData && ex.inClassQuizData.length > 0)
+              || (advancedMode && !ex.weeklyChallengeData);
+          }).length;
+          const unresearched = syllabus.chapters.filter(
             ch => !chapters.find(c => c.number === ch.number)
-              && researchDossiers.some(d => d.chapterNumber === ch.number && d.sources.length > 0)
+              && !researchDossiers.some(d => d.chapterNumber === ch.number && d.sources.length > 0)
           ).length;
-          const unresearched = remaining - researched;
           return (
             <motion.div
               initial={{ opacity: 0, height: 0 }}
@@ -1583,15 +1700,15 @@ export function BuildPage() {
               aria-modal="true"
               aria-labelledby="batch-confirm-title"
             >
-              <div className="p-5 rounded-xl bg-amber-500/5 border border-amber-500/20">
-                <h3 id="batch-confirm-title" className="text-sm font-semibold text-amber-400 mb-2">
+              <div className="p-5 rounded-xl bg-cb-status-warning-bg border border-cb-status-warning">
+                <h3 id="batch-confirm-title" className="text-sm font-semibold text-cb-status-warning mb-2">
                   Generate {researched} class{researched !== 1 ? 'es' : ''} at once?
                 </h3>
-                <p className="text-sm text-text-secondary mb-3 leading-relaxed">
+                <p className="text-sm text-cb-text-default mb-3 leading-relaxed">
                   This will use a meaningful amount of your API key balance.
                 </p>
                 {unresearched > 0 && (
-                  <p className="text-xs text-amber-400/80 mb-3 leading-relaxed">
+                  <p className="text-xs text-cb-status-warning mb-3 leading-relaxed">
                     {unresearched} class{unresearched !== 1 ? 'es' : ''} without research will be skipped. Go to Research to add them.
                   </p>
                 )}
@@ -1599,21 +1716,25 @@ export function BuildPage() {
                   <button
                     onClick={() => { setShowBatchConfirm(false); generateEverything(); }}
                     disabled={researched === 0}
-                    className="p-3 rounded-lg border border-violet-500/30 bg-violet-500/10 hover:bg-violet-500/20 transition-colors text-left disabled:opacity-40 disabled:cursor-default cursor-pointer"
+                    className="p-3 rounded-lg border border-cb-border-strong bg-cb-accent-emphasis-quiet hover:bg-cb-accent-emphasis-quiet transition-colors text-left disabled:opacity-40 disabled:cursor-default cursor-pointer"
                   >
-                    <div className="text-sm font-semibold text-violet-300 mb-1">Build Everything</div>
-                    <p className="text-xs text-text-muted leading-relaxed">
-                      All materials — reading, quizzes, weekly challenge, discussion, activities, audiobook, slides{geminiApiKey ? ', infographic' : ''}.
+                    <div className="text-sm font-semibold text-cb-accent-emphasis mb-1">
+                      {advancedMode ? 'Build Everything' : 'Build All Canvas Materials'}
+                    </div>
+                    <p className="text-xs text-cb-text-muted leading-relaxed">
+                      {advancedMode
+                        ? 'All materials — reading, quizzes, weekly challenge, discussion, activities, audiobook, slides.'
+                        : 'Reading, quizzes, and discussion. Turn on "Everything" in the API keys modal on Setup to also draft challenge, activities, audio and slides.'}
                       {researched >= 6 ? ' Possibly 1-2 hours.' : researched >= 3 ? ' Possibly 30-60 min.' : ' Takes a while.'}
                     </p>
                   </button>
                   <button
                     onClick={() => { setShowBatchConfirm(false); generateAllClasses(); }}
                     disabled={researched === 0}
-                    className="p-3 rounded-lg border border-violet-500/10 bg-bg-elevated hover:bg-bg-card transition-colors text-left disabled:opacity-40 disabled:cursor-default cursor-pointer"
+                    className="p-3 rounded-lg border border-cb-border-default bg-cb-surface-sunken hover:bg-cb-ground-page transition-colors text-left disabled:opacity-40 disabled:cursor-default cursor-pointer"
                   >
-                    <div className="text-sm font-semibold text-text-secondary mb-1">Classes + Quizzes Only</div>
-                    <p className="text-xs text-text-muted leading-relaxed">
+                    <div className="text-sm font-semibold text-cb-text-default mb-1">Classes + Quizzes Only</div>
+                    <p className="text-xs text-cb-text-muted leading-relaxed">
                       Reading, Practice Quiz, and In-Class Quiz for each class.
                       {researched >= 6 ? ' Possibly 30+ min.' : researched >= 3 ? ' Possibly 10-15 min.' : ''}
                     </p>
@@ -1630,12 +1751,115 @@ export function BuildPage() {
         })()}
       </AnimatePresence>
 
+      {/* End-of-batch report — what landed, what failed, one-click retry. */}
+      {batchSummary && !batchGenerating && (
+        <div
+          role="status"
+          style={{
+            marginBottom: 20,
+            padding: '14px 16px',
+            background: batchSummary.failures.length
+              ? 'var(--cb-status-warning-bg)'
+              : 'var(--cb-surface-sunken)',
+            borderLeft: `2px solid ${
+              batchSummary.failures.length
+                ? 'var(--cb-status-warning)'
+                : 'var(--cb-status-success)'
+            }`,
+            fontSize: 14,
+            lineHeight: 1.55,
+            color: 'var(--cb-text-default)',
+          }}
+        >
+          <div
+            style={{
+              display: 'flex',
+              justifyContent: 'space-between',
+              alignItems: 'baseline',
+              gap: 16,
+              flexWrap: 'wrap',
+            }}
+          >
+            <span>
+              <strong>{batchSummary.cancelled ? 'Batch stopped.' : 'Batch finished.'}</strong>{' '}
+              {batchSummary.chaptersCompleted}{' '}
+              {batchSummary.chaptersCompleted === 1 ? 'chapter' : 'chapters'} processed
+              {batchSummary.failures.length > 0
+                ? ` · ${batchSummary.failures.length} ${
+                    batchSummary.failures.length === 1 ? 'material' : 'materials'
+                  } failed:`
+                : ' — every material drafted.'}
+            </span>
+            <span style={{ display: 'flex', gap: 8, flexShrink: 0 }}>
+              {batchSummary.failures.length > 0 && (
+                <Button
+                  size="sm"
+                  variant="secondary"
+                  onClick={() => {
+                    const mode = batchSummary.mode;
+                    setBatchSummary(null);
+                    void runBatch(mode);
+                  }}
+                >
+                  Retry failed ({batchSummary.failures.length})
+                </Button>
+              )}
+              <Button size="sm" variant="ghost" onClick={() => setBatchSummary(null)}>
+                Dismiss
+              </Button>
+            </span>
+          </div>
+          {batchSummary.failures.length > 0 && (
+            <ul
+              style={{
+                margin: '10px 0 0',
+                paddingLeft: 18,
+                fontSize: 13,
+                lineHeight: 1.7,
+                color: 'var(--cb-text-muted)',
+              }}
+            >
+              {batchSummary.failures.slice(0, 8).map((f, i) => (
+                <li key={i}>
+                  Chapter {f.chapter} · {f.material} — {f.message}
+                </li>
+              ))}
+              {batchSummary.failures.length > 8 && (
+                <li>…and {batchSummary.failures.length - 8} more</li>
+              )}
+            </ul>
+          )}
+        </div>
+      )}
+
       {error && (
-        <div className="mb-4 p-4 rounded-lg bg-error/10 border border-error/20 text-error text-sm">{error}</div>
+        <div
+          style={{
+            marginBottom: 20,
+            padding: '12px 14px',
+            background: 'var(--cb-status-danger-bg)',
+            borderLeft: '2px solid var(--cb-status-danger)',
+            fontSize: 14,
+            lineHeight: 1.55,
+            color: 'var(--cb-text-default)',
+          }}
+        >
+          {error}
+        </div>
       )}
 
-      {/* ─── Two-panel layout ─── */}
-      <div className="flex gap-0" style={{ height: 'calc(100vh - 180px)' }}>
+      {/* ─── Codex two-panel layout — sidebar + content ─── */}
+      <div
+        className="cb-build-layout"
+        style={{
+          display: 'flex',
+          gap: 0,
+          height: 'calc(100vh - 220px)',
+          border: '1px solid var(--cb-border-default)',
+          borderRadius: 2,
+          overflow: 'hidden',
+        }}
+      >
         {/* Left: Chapter Sidebar */}
         <ChapterSidebar
           selectedChapterNum={selectedChapterNum}
@@ -1645,25 +1869,33 @@ export function BuildPage() {
         />
 
         {/* Right: Content area */}
-        <div className="flex-1 overflow-y-auto pl-4">
+        <div
+          className="cb-build-content"
+          style={{
+            flex: 1,
+            overflowY: 'auto',
+            padding: '22px 28px',
+            background: 'var(--cb-ground-page)',
+          }}
+        >
           {/* Batch progress panel — shown during batch mode */}
           {batchGenerating && (
-            <div className="mb-4 bg-bg-card border border-violet-500/10 rounded-xl p-5">
+            <div className="mb-4 bg-cb-ground-page border border-cb-border-default rounded-xl p-5">
               <div className="flex items-center justify-between mb-4">
-                <h3 className="text-sm font-semibold text-violet-400">Batch Generation</h3>
-                <span className="text-xs text-text-muted">
+                <h3 className="text-sm font-semibold text-cb-accent-emphasis">Batch Generation</h3>
+                <span className="text-xs text-cb-text-muted">
                   {generatedCount} of {totalChapters} complete
                 </span>
               </div>
               <div className="relative">
-                <div className="absolute left-5 top-0 bottom-0 w-px bg-gradient-to-b from-violet-500/30 via-violet-500/10 to-transparent" />
+                <div className="absolute left-5 top-0 bottom-0 w-px bg-cb-border-default" />
                 <div className="space-y-1">
                   {syllabus.chapters.map((ch) => {
                     const generated = chapters.find(c => c.number === ch.number);
                     const isCurrent = batchCurrentChapter === ch.number;
                     // Count completed materials for this chapter
                     let matCount = 0;
-                    const maxMat = geminiApiKey ? 8 : 7;
+                    const maxMat = 7;
                     if (generated) {
                       if (generated.htmlContent) matCount++;
                       if (generated.practiceQuizData) matCount++;
@@ -1672,25 +1904,24 @@ export function BuildPage() {
                       if (generated.activityData && generated.activityData.length > 0) matCount++;
                       if (generated.audioTranscript) matCount++;
                       if (generated.slidesJson && generated.slidesJson.length > 0) matCount++;
-                      if (geminiApiKey && generated.infographicDataUri) matCount++;
                     }
                     return (
                       <div key={ch.number} className="relative flex items-center gap-4 pl-0">
                         <div className="relative z-10 shrink-0">
                           <div className={`w-10 h-10 rounded-full flex items-center justify-center text-sm font-medium border-2 transition-all duration-300 ${
                             generated && matCount === maxMat
-                              ? 'bg-success/10 border-success/30 text-success'
+                              ? 'bg-cb-status-success border-cb-status-success text-cb-status-success'
                               : generated
-                              ? 'bg-violet-500/10 border-violet-500/30 text-violet-400'
+                              ? 'bg-cb-accent-emphasis-quiet border-cb-border-strong text-cb-accent-emphasis'
                               : isCurrent
-                              ? 'bg-violet-500/20 border-violet-500/50 text-violet-400'
-                              : 'bg-bg-card border-violet-500/10 text-text-muted'
+                              ? 'bg-cb-accent-emphasis-quiet border-cb-border-strong text-cb-accent-emphasis'
+                              : 'bg-cb-ground-page border-cb-border-default text-cb-text-muted'
                           }`}>
                             {generated && matCount === maxMat ? (
                               <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><polyline points="20 6 9 17 4 12" /></svg>
                             ) : isCurrent ? (
                               <motion.div
-                                className="w-3 h-3 rounded-full bg-violet-500"
+                                className="w-3 h-3 rounded-full bg-cb-accent-emphasis"
                                 animate={{ scale: [1, 1.3, 1] }}
                                 transition={{ duration: 1, repeat: Infinity }}
                               />
@@ -1700,10 +1931,10 @@ export function BuildPage() {
                           </div>
                         </div>
                         <div className={`flex-1 py-2 px-3 rounded-xl transition-all ${
-                          isCurrent ? 'bg-violet-500/5 border border-violet-500/20' : generated ? 'bg-bg-card/50' : ''
+                          isCurrent ? 'bg-cb-accent-emphasis-quiet border border-cb-border-default' : generated ? 'bg-cb-ground-page/50' : ''
                         }`}>
                           <div className="text-sm font-medium truncate">{ch.title}</div>
-                          <div className="text-xs text-text-muted mt-0.5">
+                          <div className="text-xs text-cb-text-muted mt-0.5">
                             {generated
                               ? `${matCount}/${maxMat} materials`
                               : isCurrent
@@ -1715,7 +1946,7 @@ export function BuildPage() {
                         </div>
                         {isCurrent && (
                           <motion.div
-                            className="w-5 h-5 border-2 border-violet-500 border-t-transparent rounded-full shrink-0"
+                            className="w-5 h-5 border-2 border-cb-accent-emphasis border-t-transparent rounded-full shrink-0"
                             animate={{ rotate: 360 }}
                             transition={{ duration: 1, repeat: Infinity, ease: 'linear' }}
                           />
@@ -1734,296 +1965,428 @@ export function BuildPage() {
           )}
 
           {/* Generate all outputs for current class */}
-          {!batchGenerating && currentChapter && !isGenerating && (
-            <div className="flex items-center gap-3 mb-4">
-              <button
-                onClick={generateAllOutputs}
-                disabled={anyLocalGenerating}
-                className="flex items-center gap-1.5 text-xs text-text-muted hover:text-violet-400 transition-colors cursor-pointer disabled:opacity-40 disabled:cursor-default"
-              >
-                <svg className="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                  <polygon points="5 3 19 12 5 21 5 3" />
-                </svg>
-                Generate all outputs
-              </button>
-              {anyLocalGenerating && (
-                <span className="text-xs text-text-muted">
-                  Generating... rate limits may cause automatic retries
-                </span>
-              )}
-            </div>
-          )}
+          {!batchGenerating && currentChapter && !isGenerating && (() => {
+            const missing = [
+              !quizHtml,
+              inClassQuizData.length === 0,
+              discussions.length === 0,
+              ...(advancedMode
+                ? [
+                    activities.length === 0,
+                    slidesData.length === 0,
+                    !audioTranscript,
+                    !currentChapter.weeklyChallengeData,
+                  ]
+                : []),
+            ].filter(Boolean).length;
+            return (
+              <div className="flex items-baseline gap-3 mb-4 flex-wrap">
+                {missing > 0 ? (
+                  <>
+                    <Button
+                      size="sm"
+                      variant="secondary"
+                      onClick={() => void generateAllOutputs()}
+                      disabled={anyLocalGenerating}
+                      title={
+                        anyLocalGenerating
+                          ? 'Generation is already running for this chapter.'
+                          : undefined
+                      }
+                    >
+                      ▸ Generate all materials for this chapter
+                    </Button>
+                    <span className="text-xs italic text-cb-text-muted">
+                      {anyLocalGenerating
+                        ? 'Generating… rate limits may cause automatic retries'
+                        : `${missing} of 7 remaining · a few minutes, on your keys`}
+                    </span>
+                  </>
+                ) : (
+                  <span className="text-xs italic text-cb-text-muted">
+                    All seven materials are drafted for this chapter.
+                  </span>
+                )}
+              </div>
+            );
+          })()}
 
           {/* Generate chapter button when chapter not yet generated */}
           {!batchGenerating && !currentChapter && !isGenerating && (() => {
             const hasResearch = researchDossiers.some(d => d.chapterNumber === selectedChapterNum && d.sources.length > 0);
+            const romanIdx = selectedChapterNum - 1;
+            const roman = ['I','II','III','IV','V','VI','VII','VIII','IX','X','XI','XII','XIII','XIV','XV','XVI','XVII','XVIII','XIX','XX'][romanIdx] ?? String(selectedChapterNum);
             return (
-              <div className="bg-bg-card border border-violet-500/10 rounded-xl p-8 text-center mb-4">
-                <div className="w-12 h-12 mx-auto mb-4 rounded-xl bg-violet-500/10 flex items-center justify-center">
-                  <svg className="w-6 h-6 text-violet-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
-                    <polyline points="14 2 14 8 20 8" />
-                  </svg>
+              <section
+                style={{
+                  padding: '32px 28px',
+                  background: 'var(--cb-ground-page)',
+                  border: '1px solid var(--cb-border-default)',
+                  borderRadius: 2,
+                  marginBottom: 20,
+                }}
+              >
+                <div
+                  className="cb-sc"
+                  style={{
+                    fontSize: 11,
+                    color: 'var(--cb-text-muted)',
+                    letterSpacing: '0.14em',
+                  }}
+                >
+                  Chapter dossier
+                </div>
+                <div
+                  style={{
+                    display: 'flex',
+                    alignItems: 'baseline',
+                    gap: 16,
+                    marginTop: 6,
+                    marginBottom: 14,
+                  }}
+                >
+                  <span
+                    className="cb-italic"
+                    style={{
+                      fontSize: 28,
+                      color: 'var(--cb-accent-emphasis)',
+                      lineHeight: 1,
+                    }}
+                  >
+                    {roman}
+                  </span>
+                  <span
+                    style={{
+                      fontSize: 22,
+                      fontWeight: 500,
+                      fontVariationSettings: '"opsz" 20',
+                      color: 'var(--cb-text-default)',
+                      lineHeight: 1.25,
+                    }}
+                  >
+                    {syllabusChapter?.title}
+                  </span>
                 </div>
-                <p className="text-text-secondary mb-1">Class {selectedChapterNum}: {syllabusChapter?.title}</p>
                 {hasResearch ? (
                   <>
-                    <p className="text-text-muted text-xs mb-4">This class hasn't been generated yet.</p>
+                    <p
+                      className="cb-italic"
+                      style={{
+                        margin: '0 0 18px',
+                        fontSize: 14.5,
+                        color: 'var(--cb-text-muted)',
+                        lineHeight: 1.55,
+                        maxWidth: '72ch',
+                      }}
+                    >
+                      Research is in. Drafting a chapter takes several minutes — Claude
+                      reasons through the dossier, writes the prose, and weaves in
+                      citations. Settle in or grab a coffee; we'll keep going in the
+                      background if you click away.
+                    </p>
+                    {!openaiApiKey && (
+                      <div style={{ marginBottom: 18, maxWidth: '72ch' }}>
+                        <KeyMissingBanner
+                          tone="recommended"
+                          text={
+                            <>
+                              <strong>Heads up.</strong> Without an OpenAI key, this chapter
+                              will draft as text-only — no editorial figures inside the
+                              reading, and the slide deck for this chapter will be locked
+                              when you reach the slides tab.
+                            </>
+                          }
+                          ctaLabel="Add OpenAI key →"
+                          onCta={openKeysModal}
+                        />
+                      </div>
+                    )}
                     <Button onClick={() => generateChapter(selectedChapterNum)}>
-                      Generate This Class
+                      Draft this chapter →
                     </Button>
                   </>
                 ) : (
                   <>
-                    <p className="text-amber-400/80 text-xs mb-2">No research has been conducted for this class.</p>
-                    <p className="text-text-muted text-xs mb-4">Generating without research may include made-up references that don't exist.</p>
-                    <div className="flex gap-2 justify-center">
-                      <Button onClick={() => navigate('/research')}>Go to Research</Button>
-                      <Button variant="ghost" onClick={() => generateChapter(selectedChapterNum)}>Generate Anyway</Button>
+                    <p
+                      className="cb-italic"
+                      style={{
+                        margin: '0 0 6px',
+                        fontSize: 14.5,
+                        color: 'var(--cb-status-warning)',
+                        lineHeight: 1.55,
+                      }}
+                    >
+                      No research yet for this chapter.
+                    </p>
+                    <p
+                      className="cb-italic"
+                      style={{
+                        margin: '0 0 18px',
+                        fontSize: 13.5,
+                        color: 'var(--cb-text-muted)',
+                        lineHeight: 1.55,
+                        maxWidth: '72ch',
+                      }}
+                    >
+                      Drafting without research may include unverified references. Better
+                      to go back and research first; or proceed anyway and verify by hand.
+                    </p>
+                    <div style={{ display: 'flex', gap: 10 }}>
+                      <Button onClick={() => navigate('/research')}>
+                        Go to Research
+                      </Button>
+                      <Button variant="ghost" onClick={() => generateChapter(selectedChapterNum)}>
+                        Draft anyway
+                      </Button>
                     </div>
                   </>
                 )}
-              </div>
+              </section>
             );
           })()}
 
           {/* Tabs — only show when chapter exists or is generating */}
           {!batchGenerating && (currentChapter || isGenerating) && (
             <>
-              <div className="flex gap-1 mb-4 p-1 bg-bg-card rounded-lg border border-violet-500/10 w-fit">
-                {tabs.map((tab) => (
-                  <button
-                    key={tab.id}
-                    onClick={() => setActiveTab(tab.id)}
-                    className={`px-4 py-2 text-sm rounded-md transition-all cursor-pointer flex items-center gap-2 ${
-                      activeTab === tab.id
-                        ? 'bg-violet-500 text-white'
-                        : 'text-text-muted hover:text-text-secondary'
-                    }`}
-                  >
-                    {tab.label}
-                    {tabGenerating[tab.id] ? (
-                      <motion.span
-                        className="w-1.5 h-1.5 rounded-full bg-violet-400"
-                        animate={{ opacity: [0.4, 1, 0.4] }}
-                        transition={{ duration: 1, repeat: Infinity }}
-                      />
-                    ) : tabErrors[tab.id] ? (
-                      <span className="w-1.5 h-1.5 rounded-full bg-error" />
-                    ) : tab.ready ? (
-                      <span className="w-1.5 h-1.5 rounded-full bg-success" />
-                    ) : null}
-                  </button>
-                ))}
+              <div
+                role="tablist"
+                aria-label="Chapter materials"
+                className="cb-build-tabs"
+                onKeyDown={(e) => {
+                  if (e.key !== 'ArrowRight' && e.key !== 'ArrowLeft') return;
+                  e.preventDefault();
+                  const idx = tabs.findIndex((t) => t.id === activeTab);
+                  const next =
+                    e.key === 'ArrowRight'
+                      ? (idx + 1) % tabs.length
+                      : (idx - 1 + tabs.length) % tabs.length;
+                  setActiveTab(tabs[next].id);
+                }}
+                style={{
+                  display: 'flex',
+                  gap: 0,
+                  marginBottom: 24,
+                  borderBottom: '0.5px solid var(--cb-border-rule)',
+                  fontFamily: 'var(--font-cb-serif)',
+                }}
+              >
+                {tabs.map((tab) => {
+                  const isActive = activeTab === tab.id;
+                  return (
+                    <button
+                      key={tab.id}
+                      type="button"
+                      role="tab"
+                      aria-selected={isActive}
+                      onClick={() => setActiveTab(tab.id)}
+                      className="cb-focus"
+                      style={{
+                        background: 'transparent',
+                        border: 'none',
+                        borderBottom: isActive
+                          ? '2px solid var(--cb-accent-emphasis)'
+                          : '2px solid transparent',
+                        marginBottom: -0.5,
+                        padding: '12px 16px',
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: 8,
+                        cursor: 'pointer',
+                        fontFamily: 'inherit',
+                        fontSize: 15,
+                        lineHeight: 1,
+                        fontWeight: isActive ? 500 : 400,
+                        color: isActive
+                          ? 'var(--cb-text-default)'
+                          : 'var(--cb-text-muted)',
+                        transition:
+                          'color 200ms cubic-bezier(0.32,0.04,0.32,1), border-color 200ms',
+                      }}
+                      onMouseEnter={(e) => {
+                        if (!isActive) {
+                          e.currentTarget.style.color = 'var(--cb-text-default)';
+                        }
+                      }}
+                      onMouseLeave={(e) => {
+                        if (!isActive) {
+                          e.currentTarget.style.color = 'var(--cb-text-muted)';
+                        }
+                      }}
+                    >
+                      {tab.label}
+                      {tabGenerating[tab.id] ? (
+                        <span
+                          aria-hidden
+                          style={{
+                            width: 6,
+                            height: 6,
+                            borderRadius: 999,
+                            background: 'var(--cb-accent-emphasis)',
+                            animation: 'cb-pen 1.2s ease-in-out infinite',
+                          }}
+                        />
+                      ) : tabErrors[tab.id] ? (
+                        <span
+                          aria-hidden
+                          style={{
+                            width: 6,
+                            height: 6,
+                            borderRadius: 999,
+                            background: 'var(--cb-status-danger)',
+                          }}
+                        />
+                      ) : tab.ready ? (
+                        <span
+                          aria-hidden
+                          style={{
+                            width: 6,
+                            height: 6,
+                            borderRadius: 999,
+                            background: 'var(--cb-status-success)',
+                          }}
+                        />
+                      ) : null}
+                    </button>
+                  );
+                })}
               </div>
 
               {/* Per-tab error */}
               {tabErrors[activeTab] && (
-                <div className="mb-4 p-3 rounded-lg bg-error/10 border border-error/20 text-error text-sm flex items-center justify-between">
+                <div
+                  style={{
+                    marginBottom: 20,
+                    padding: '12px 14px',
+                    background: 'var(--cb-status-danger-bg)',
+                    borderLeft: '2px solid var(--cb-status-danger)',
+                    fontSize: 14,
+                    lineHeight: 1.55,
+                    color: 'var(--cb-text-default)',
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'baseline',
+                    gap: 16,
+                  }}
+                >
                   <span>{tabErrors[activeTab]}</span>
-                  <button onClick={() => clearTabError(activeTab)} className="text-xs text-error/60 hover:text-error ml-3 shrink-0 cursor-pointer">Dismiss</button>
+                  <span style={{ display: 'flex', gap: 14, flexShrink: 0 }}>
+                    {tabRetryHandlers[activeTab] && (
+                      <button
+                        onClick={() => {
+                          const retry = tabRetryHandlers[activeTab];
+                          clearTabError(activeTab);
+                          retry?.();
+                        }}
+                        className="cb-focus"
+                        style={{
+                          background: 'transparent',
+                          border: 0,
+                          padding: 0,
+                          cursor: 'pointer',
+                          fontSize: 13,
+                          fontStyle: 'italic',
+                          color: 'var(--cb-accent-emphasis)',
+                          textDecoration: 'underline',
+                          textDecorationThickness: '0.5px',
+                          textUnderlineOffset: 3,
+                          whiteSpace: 'nowrap',
+                          fontFamily: 'inherit',
+                        }}
+                      >
+                        retry
+                      </button>
+                    )}
+                    <button
+                      onClick={() => clearTabError(activeTab)}
+                      className="cb-focus"
+                      style={{
+                        background: 'transparent',
+                        border: 0,
+                        padding: 0,
+                        cursor: 'pointer',
+                        fontSize: 13,
+                        fontStyle: 'italic',
+                        color: 'var(--cb-accent-link)',
+                        textDecoration: 'underline',
+                        textDecorationThickness: '0.5px',
+                        textUnderlineOffset: 3,
+                        whiteSpace: 'nowrap',
+                        fontFamily: 'inherit',
+                      }}
+                    >
+                      dismiss
+                    </button>
+                  </span>
                 </div>
               )}
 
               {/* Content */}
               <AnimatePresence mode="wait">
-                {activeTab === 'chapter' && (
+                {activeTab === 'template-module' && setup.templateId && (
                   <motion.div
-                    key="chapter"
+                    key="template-module"
                     initial={{ opacity: 0, y: 5 }}
                     animate={{ opacity: 1, y: 0 }}
                     exit={{ opacity: 0 }}
-                    className="bg-bg-card border border-violet-500/10 rounded-xl overflow-hidden"
                   >
-                    {isGenerating && !chapterHtml ? (
-                      <div className="p-6">
-                        {thinkingText && (
-                          <div className="mb-4">
-                            <div className="flex items-center gap-2 mb-2">
-                              <div className="flex gap-1">
-                                {[0, 1, 2].map(i => (
-                                  <motion.div
-                                    key={i}
-                                    className="w-1.5 h-1.5 rounded-full bg-violet-500"
-                                    animate={{ scale: [1, 1.4, 1], opacity: [0.4, 1, 0.4] }}
-                                    transition={{ duration: 0.8, delay: i * 0.12, repeat: Infinity }}
-                                  />
-                                ))}
-                              </div>
-                              <span className="text-violet-400 text-xs font-medium">Thinking... {formatElapsed(elapsedSec)}</span>
-                            </div>
-                            <div className="relative max-h-24 overflow-hidden">
-                              <pre className="text-xs text-text-muted/50 whitespace-pre-wrap font-mono leading-relaxed">
-                                {thinkingText.slice(-400)}
-                              </pre>
-                              <div className="absolute inset-0 bg-gradient-to-b from-bg-card via-transparent to-bg-card pointer-events-none" />
-                            </div>
-                          </div>
-                        )}
-                        {streamingText && (
-                          <div className="flex items-center gap-3 mb-4">
-                            <div className="w-3 h-3 rounded-full bg-violet-500 animate-pulse" />
-                            <span className="text-text-secondary text-sm">Writing Class {selectedChapterNum}... ({Math.round(streamingText.split(/\s+/).length).toLocaleString()} words, {formatElapsed(elapsedSec)})</span>
-                          </div>
-                        )}
-                        {!streamingText && !thinkingText && (
-                          <div className="flex items-center gap-3">
-                            <div className="w-3 h-3 rounded-full bg-violet-500 animate-pulse" />
-                            <span className="text-text-secondary text-sm">Generating Class {selectedChapterNum}... {formatElapsed(elapsedSec)}</span>
-                          </div>
-                        )}
-                      </div>
-                    ) : chapterHtml ? (
-                      <>
-                        <div className="flex items-center justify-between px-5 py-3 border-b border-violet-500/10">
-                          <p className="text-xs text-text-muted">Class {selectedChapterNum} reading</p>
-                          <Button
-                            size="sm"
-                            onClick={() => downloadFile(chapterHtml, `chapter-${selectedChapterNum}-${slugify(syllabusChapter?.title || 'chapter')}.html`)}
-                          >
-                            <svg className="mr-1.5 w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                              <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
-                              <polyline points="7 10 12 15 17 10" />
-                              <line x1="12" y1="15" x2="12" y2="3" />
-                            </svg>
-                            Download .html
-                          </Button>
-                        </div>
-                        <iframe
-                          srcDoc={chapterHtml}
-                          className="w-full border-0"
-                          style={{ height: '80vh' }}
-                          title={`Class ${selectedChapterNum} Reading`}
-                          sandbox="allow-scripts"
-                        />
-                        {/* Refine chapter section */}
-                        {!isGenerating && (
-                          <div className="border-t border-violet-500/10 p-5">
-                            <div className="flex items-start gap-3">
-                              <div className="flex-1">
-                                <textarea
-                                  value={refineFeedback}
-                                  onChange={(e) => setRefineFeedback(e.target.value)}
-                                  placeholder="Describe what you'd like changed (e.g., 'Expand the section on X', 'Simplify the introduction', 'Add more examples for Y')..."
-                                  className="w-full bg-bg-elevated border border-violet-500/10 rounded-lg px-4 py-3 text-sm text-text-primary placeholder-text-muted resize-none focus:outline-none focus:border-violet-500/30 transition-colors"
-                                  rows={2}
-                                />
-                              </div>
-                              <Button
-                                size="sm"
-                                variant="secondary"
-                                disabled={!refineFeedback.trim()}
-                                onClick={() => setShowRefineConfirm(true)}
-                              >
-                                Refine
-                              </Button>
-                            </div>
-
-                            <AnimatePresence>
-                              {showRefineConfirm && (
-                                <motion.div
-                                  initial={{ opacity: 0, height: 0 }}
-                                  animate={{ opacity: 1, height: 'auto' }}
-                                  exit={{ opacity: 0, height: 0 }}
-                                  className="mt-3 p-4 rounded-lg bg-amber-500/5 border border-amber-500/20"
-                                >
-                                  <p className="text-sm text-amber-400 font-medium mb-2">This will clear all dependent content:</p>
-                                  <ul className="text-xs text-text-muted space-y-1 mb-3">
-                                    {quizHtml && <li className="flex items-center gap-2"><span className="w-1 h-1 rounded-full bg-amber-400" />Practice Quiz</li>}
-                                    {inClassQuizData.length > 0 && <li className="flex items-center gap-2"><span className="w-1 h-1 rounded-full bg-amber-400" />In-Class Quiz</li>}
-                                    {weeklyChallengeHtml && <li className="flex items-center gap-2"><span className="w-1 h-1 rounded-full bg-amber-400" />Weekly Challenge</li>}
-                                    {discussions.length > 0 && <li className="flex items-center gap-2"><span className="w-1 h-1 rounded-full bg-amber-400" />Discussion Prompts</li>}
-                                    {activities.length > 0 && <li className="flex items-center gap-2"><span className="w-1 h-1 rounded-full bg-amber-400" />Activities</li>}
-                                    {audioTranscript && <li className="flex items-center gap-2"><span className="w-1 h-1 rounded-full bg-amber-400" />Audiobook</li>}
-                                    {slidesData.length > 0 && <li className="flex items-center gap-2"><span className="w-1 h-1 rounded-full bg-amber-400" />Slides</li>}
-                                    {!quizHtml && inClassQuizData.length === 0 && !weeklyChallengeHtml && discussions.length === 0 && activities.length === 0 && !audioTranscript && slidesData.length === 0 && (
-                                      <li className="text-text-muted italic">No dependent content to clear</li>
-                                    )}
-                                  </ul>
-                                  <div className="flex gap-2">
-                                    <Button size="sm" onClick={() => refineChapter(refineFeedback)}>
-                                      Refine Reading
-                                    </Button>
-                                    <Button size="sm" variant="ghost" onClick={() => setShowRefineConfirm(false)}>
-                                      Cancel
-                                    </Button>
-                                  </div>
-                                </motion.div>
-                              )}
-                            </AnimatePresence>
-                          </div>
-                        )}
-                      </>
-                    ) : null}
+                    <TemplateModuleTab
+                      chapterNum={selectedChapterNum}
+                      content={templateContent}
+                      isGenerating={generatingTemplateContent === selectedChapterNum}
+                      canGenerate={!!syllabusChapter && generatingTemplateContent === null}
+                      onGenerate={generateTemplateContent}
+                      onStop={() => abortInFlight(materialAbortKey('template-module', selectedChapterNum))}
+                    />
                   </motion.div>
                 )}
 
+                {activeTab === 'chapter' && (
+                  <ReadingTab
+                    chapterHtml={chapterHtml}
+                    chapterNum={selectedChapterNum}
+                    chapterTitle={syllabusChapter?.title ?? ''}
+                    themeId={setup.themeId}
+                    isGenerating={isGenerating && chapterDraftingFor === selectedChapterNum}
+                    isRefining={isRefining}
+                    streamingText={streamingText}
+                    thinkingText={thinkingText}
+                    elapsedSec={elapsedSec}
+                    onStop={() => abortInFlight(materialAbortKey('reading', selectedChapterNum))}
+                    showImageHint={showChapterImageHint}
+                    onDismissImageHint={dismissChapterImageHint}
+                    refineFeedback={refineFeedback}
+                    onRefineFeedbackChange={setRefineFeedback}
+                    showRefineConfirm={showRefineConfirm}
+                    onShowRefineConfirm={setShowRefineConfirm}
+                    refineAutoRegen={refineAutoRegen}
+                    onRefineAutoRegenChange={setRefineAutoRegen}
+                    onRefine={refineChapter}
+                    dependents={(() => {
+                      const d: string[] = [];
+                      if (quizHtml) d.push('Practice quiz');
+                      if (inClassQuizData.length > 0) d.push('In-class quiz');
+                      if (weeklyChallengeHtml) d.push('Mastery challenge');
+                      if (discussions.length > 0) d.push('Discussion prompts');
+                      if (activities.length > 0) d.push('In-class activities');
+                      if (audioTranscript) d.push('Narrated audio');
+                      if (slidesData.length > 0) d.push('Slides');
+                      return d;
+                    })()}
+                  />
+                )}
+
                 {activeTab === 'quiz' && (
-                  <motion.div
-                    key="quiz"
-                    initial={{ opacity: 0, y: 5 }}
-                    animate={{ opacity: 1, y: 0 }}
-                    exit={{ opacity: 0 }}
-                  >
-                    {quizHtml ? (
-                      <div className="bg-bg-card border border-violet-500/10 rounded-xl overflow-hidden">
-                        <div className="flex items-center justify-between px-5 py-3 border-b border-violet-500/10">
-                          <p className="text-xs text-text-muted">Gamified practice quiz with calibration scoring</p>
-                          <Button
-                            size="sm"
-                            onClick={() => downloadFile(quizHtml, `quiz-${selectedChapterNum}-${slugify(syllabusChapter?.title || 'chapter')}.html`)}
-                          >
-                            <svg className="mr-1.5 w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                              <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
-                              <polyline points="7 10 12 15 17 10" />
-                              <line x1="12" y1="15" x2="12" y2="3" />
-                            </svg>
-                            Download .html
-                          </Button>
-                        </div>
-                        <iframe
-                          srcDoc={quizHtml}
-                          className="w-full border-0"
-                          style={{ height: '80vh' }}
-                          title="Practice Quiz Preview"
-                          sandbox="allow-scripts"
-                        />
-                      </div>
-                    ) : (
-                      <div className="bg-bg-card border border-violet-500/10 rounded-xl p-8 text-center">
-                        {generatingQuiz ? (
-                          <div className="flex flex-col items-center gap-3">
-                            <div className="flex gap-1">
-                              {[0, 1, 2].map(i => (
-                                <motion.div
-                                  key={i}
-                                  className="w-2 h-2 rounded-full bg-violet-500"
-                                  animate={{ scale: [1, 1.4, 1], opacity: [0.4, 1, 0.4] }}
-                                  transition={{ duration: 0.8, delay: i * 0.12, repeat: Infinity }}
-                                />
-                              ))}
-                            </div>
-                            <span className="text-text-secondary text-sm">Generating gamified practice quiz with extended thinking...</span>
-                            <p className="text-xs text-text-muted mt-1">This uses maximum thinking for psychometric quality. May take a minute.</p>
-                          </div>
-                        ) : (
-                          <>
-                            <div className="w-12 h-12 mx-auto mb-4 rounded-xl bg-violet-500/10 flex items-center justify-center">
-                              <svg className="w-6 h-6 text-violet-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                                <path d="M9 11l3 3L22 4" />
-                                <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11" />
-                              </svg>
-                            </div>
-                            <p className="text-text-secondary mb-1">Gamified Practice Quiz</p>
-                            <p className="text-text-muted text-xs mb-4">12 questions with calibration scoring, achievements, and confetti</p>
-                            <Button onClick={generateQuiz} disabled={!currentChapter || !!generatingQuiz}>
-                              Generate Practice Quiz
-                            </Button>
-                          </>
-                        )}
-                      </div>
-                    )}
-                  </motion.div>
+                  <div key="quiz">
+                    <QuizTab
+                      quizHtml={quizHtml}
+                      chapterNum={selectedChapterNum}
+                      chapterTitle={syllabusChapter?.title ?? ''}
+                      isGenerating={generatingQuiz === selectedChapterNum}
+                      canGenerate={!!currentChapter && !generatingQuiz}
+                      onGenerate={generateQuiz}
+                      onStop={() => abortInFlight(materialAbortKey('quiz', selectedChapterNum))}
+                    />
+                  </div>
                 )}
 
                 {activeTab === 'inclassquiz' && (
@@ -2033,116 +2396,16 @@ export function BuildPage() {
                     animate={{ opacity: 1, y: 0 }}
                     exit={{ opacity: 0 }}
                   >
-                    {inClassQuizData.length > 0 ? (
-                      <div className="space-y-4">
-                        <div className="flex items-center justify-between">
-                          <p className="text-xs text-text-muted">
-                            {inClassQuizData.length} questions — 5 shuffled versions (A-E) + answer key
-                          </p>
-                          <Button
-                            size="sm"
-                            onClick={async () => {
-                              try {
-                                const { generateQuizDocPackage } = await import('../services/export/quizDocExporter');
-                                const blob = await generateQuizDocPackage(
-                                  inClassQuizData,
-                                  syllabus!.courseTitle,
-                                  syllabusChapter!.title,
-                                );
-                                const url = URL.createObjectURL(blob);
-                                const a = document.createElement('a');
-                                a.href = url;
-                                a.download = `quiz-${syllabusChapter!.title.toLowerCase().replace(/[^a-z0-9]+/g, '-').slice(0, 40)}.zip`;
-                                a.click();
-                                URL.revokeObjectURL(url);
-                              } catch (err) {
-                                setError(friendlyError(err, 'Quiz export failed.'));
-                              }
-                            }}
-                          >
-                            <svg className="mr-1.5 w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                              <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
-                              <polyline points="7 10 12 15 17 10" />
-                              <line x1="12" y1="15" x2="12" y2="3" />
-                            </svg>
-                            Download Quiz Pack (.zip)
-                          </Button>
-                        </div>
-                        {inClassQuizData.map((q, i) => (
-                          <motion.div
-                            key={i}
-                            initial={{ opacity: 0, y: 10 }}
-                            animate={{ opacity: 1, y: 0 }}
-                            transition={{ delay: i * 0.05 }}
-                            className="bg-bg-card border border-violet-500/10 rounded-xl p-5"
-                          >
-                            <div className="flex items-start gap-3 mb-3">
-                              <span className="shrink-0 w-7 h-7 rounded-lg bg-violet-500/10 flex items-center justify-center text-xs font-bold text-violet-400">
-                                {i + 1}
-                              </span>
-                              <p className="text-sm font-medium leading-relaxed">{q.question}</p>
-                            </div>
-                            <div className="ml-10 space-y-1.5">
-                              <div className="flex items-start gap-2 text-sm">
-                                <span className="text-success text-xs font-medium mt-0.5 shrink-0">a)</span>
-                                <span className="text-success">{q.correctAnswer}</span>
-                              </div>
-                              {q.distractors.map((d, j) => (
-                                <div key={j} className="flex items-start gap-2 text-sm">
-                                  <span className="text-text-muted text-xs font-medium mt-0.5 shrink-0">{String.fromCharCode(98 + j)})</span>
-                                  <span className="text-text-secondary">{d.text}</span>
-                                </div>
-                              ))}
-                            </div>
-                            <div className="ml-10 mt-3 pt-3 border-t border-violet-500/5">
-                              <p className="text-xs text-success/80 mb-1.5">
-                                <span className="font-medium">Correct:</span> {q.correctFeedback}
-                              </p>
-                              {q.distractors.map((d, j) => (
-                                <p key={j} className="text-xs text-text-muted mb-1">
-                                  <span className="font-medium text-error/60">"{d.text}":</span> {d.feedback}
-                                </p>
-                              ))}
-                            </div>
-                          </motion.div>
-                        ))}
-                      </div>
-                    ) : (
-                      <div className="bg-bg-card border border-violet-500/10 rounded-xl p-8 text-center">
-                        {generatingInClassQuiz ? (
-                          <div className="flex flex-col items-center gap-3">
-                            <div className="flex gap-1">
-                              {[0, 1, 2].map(i => (
-                                <motion.div
-                                  key={i}
-                                  className="w-2 h-2 rounded-full bg-violet-500"
-                                  animate={{ scale: [1, 1.4, 1], opacity: [0.4, 1, 0.4] }}
-                                  transition={{ duration: 0.8, delay: i * 0.12, repeat: Infinity }}
-                                />
-                              ))}
-                            </div>
-                            <span className="text-text-secondary text-sm">Generating in-class quiz with extended thinking...</span>
-                            <p className="text-xs text-text-muted mt-1">10 rigorous questions with detailed feedback. May take a minute.</p>
-                          </div>
-                        ) : (
-                          <>
-                            <div className="w-12 h-12 mx-auto mb-4 rounded-xl bg-violet-500/10 flex items-center justify-center">
-                              <svg className="w-6 h-6 text-violet-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                                <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
-                                <polyline points="14 2 14 8 20 8" />
-                                <line x1="16" y1="13" x2="8" y2="13" />
-                                <line x1="16" y1="17" x2="8" y2="17" />
-                              </svg>
-                            </div>
-                            <p className="text-text-secondary mb-1">In-Class Quiz</p>
-                            <p className="text-text-muted text-xs mb-4">10 questions exported as 5 shuffled Word doc versions (A-E) + answer key</p>
-                            <Button onClick={generateInClassQuiz} disabled={!currentChapter || !!generatingInClassQuiz}>
-                              Generate In-Class Quiz
-                            </Button>
-                          </>
-                        )}
-                      </div>
-                    )}
+                    <InClassQuizTab
+                      questions={inClassQuizData}
+                      courseTitle={syllabus?.courseTitle ?? ''}
+                      chapterTitle={syllabusChapter?.title ?? ''}
+                      isGenerating={generatingInClassQuiz === selectedChapterNum}
+                      canGenerate={!!currentChapter && !generatingInClassQuiz}
+                      onGenerate={generateInClassQuiz}
+                      onStop={() => abortInFlight(materialAbortKey('inclassquiz', selectedChapterNum))}
+                      onError={(msg) => setError(friendlyError(msg, 'Quiz export failed.'))}
+                    />
                   </motion.div>
                 )}
 
@@ -2153,61 +2416,15 @@ export function BuildPage() {
                     animate={{ opacity: 1, y: 0 }}
                     exit={{ opacity: 0 }}
                   >
-                    {weeklyChallengeHtml ? (
-                      <div className="bg-bg-card border border-violet-500/10 rounded-xl overflow-hidden">
-                        <div className="flex items-center justify-between px-5 py-3 border-b border-violet-500/10">
-                          <p className="text-xs text-text-muted">Mastery challenge with mixed question types &amp; SCORM 2004</p>
-                          <Button
-                            size="sm"
-                            onClick={() => downloadFile(weeklyChallengeHtml, `weekly-challenge-${selectedChapterNum}-${slugify(syllabusChapter?.title || 'chapter')}.html`)}
-                          >
-                            <svg className="mr-1.5 w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                              <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
-                              <polyline points="7 10 12 15 17 10" />
-                              <line x1="12" y1="15" x2="12" y2="3" />
-                            </svg>
-                            Download .html
-                          </Button>
-                        </div>
-                        <iframe
-                          srcDoc={weeklyChallengeHtml}
-                          className="w-full border-0"
-                          style={{ height: '80vh' }}
-                          title="Weekly Challenge Preview"
-                          sandbox="allow-scripts"
-                        />
-                      </div>
-                    ) : (
-                      <div className="bg-bg-card border border-violet-500/10 rounded-xl p-8 text-center">
-                        {generatingWeeklyChallenge ? (
-                          <div className="flex flex-col items-center gap-3">
-                            <div className="flex gap-1">
-                              {[0, 1, 2].map(i => (
-                                <motion.div
-                                  key={i}
-                                  className="w-2 h-2 rounded-full bg-violet-500"
-                                  animate={{ scale: [1, 1.4, 1], opacity: [0.4, 1, 0.4] }}
-                                  transition={{ duration: 0.8, delay: i * 0.12, repeat: Infinity }}
-                                />
-                              ))}
-                            </div>
-                            <span className="text-text-secondary text-sm">Generating weekly challenge with extended thinking...</span>
-                            <p className="text-xs text-text-muted mt-1">Mixed question types: MCQ, two-stage, assertion-reason, matrix, slider, boss.</p>
-                          </div>
-                        ) : (
-                          <>
-                            <div className="w-12 h-12 mx-auto mb-4 rounded-xl bg-violet-500/10 flex items-center justify-center text-xl">
-                              &#x1F525;
-                            </div>
-                            <p className="text-text-secondary mb-1">Weekly Mastery Challenge</p>
-                            <p className="text-text-muted text-xs mb-4">10-12 questions, 6 assessment types, 85% mastery threshold, SCORM 2004</p>
-                            <Button onClick={generateWeeklyChallengeContent} disabled={!currentChapter || !!generatingWeeklyChallenge}>
-                              Generate Weekly Challenge
-                            </Button>
-                          </>
-                        )}
-                      </div>
-                    )}
+                    <WeeklyChallengeTab
+                      challengeHtml={weeklyChallengeHtml}
+                      chapterNum={selectedChapterNum}
+                      chapterTitle={syllabusChapter?.title ?? ''}
+                      isGenerating={generatingWeeklyChallenge === selectedChapterNum}
+                      canGenerate={!!currentChapter && !generatingWeeklyChallenge}
+                      onGenerate={generateWeeklyChallengeContent}
+                      onStop={() => abortInFlight(materialAbortKey('weeklychallenge', selectedChapterNum))}
+                    />
                   </motion.div>
                 )}
 
@@ -2218,93 +2435,16 @@ export function BuildPage() {
                     animate={{ opacity: 1, y: 0 }}
                     exit={{ opacity: 0 }}
                   >
-                    {discussions.length > 0 ? (
-                      <div className="space-y-4">
-                        <div className="flex items-center justify-between">
-                          <p className="text-xs text-text-muted">Display these on a slide as students arrive. Designed to spark conversation, not test knowledge.</p>
-                          <button
-                            onClick={() => copyToClipboard(formatDiscussionsText(), 'discussions')}
-                            className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium bg-violet-500/10 text-violet-400 hover:bg-violet-500/20 transition-colors cursor-pointer shrink-0"
-                          >
-                            {copiedLabel === 'discussions' ? (
-                              <>
-                                <svg className="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><polyline points="20 6 9 17 4 12" /></svg>
-                                Copied!
-                              </>
-                            ) : (
-                              <>
-                                <svg className="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                                  <rect x="9" y="9" width="13" height="13" rx="2" ry="2" /><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
-                                </svg>
-                                Copy All
-                              </>
-                            )}
-                          </button>
-                        </div>
-                        {discussions.map((d, i) => (
-                          <motion.div
-                            key={i}
-                            initial={{ opacity: 0, y: 10 }}
-                            animate={{ opacity: 1, y: 0 }}
-                            transition={{ delay: i * 0.08 }}
-                            className="bg-bg-card border border-violet-500/10 rounded-xl p-6"
-                          >
-                            <div className="flex items-start justify-between gap-3">
-                              <div>
-                                <span className="text-xs px-2.5 py-1 rounded-full bg-violet-500/15 text-violet-400 font-medium inline-block mb-3">
-                                  {d.hook}
-                                </span>
-                                <p className="text-base text-text-primary leading-relaxed">{d.prompt}</p>
-                              </div>
-                              <button
-                                onClick={() => copyToClipboard(d.prompt, `discussion-${i}`)}
-                                className="shrink-0 p-1.5 rounded-md text-text-muted hover:text-violet-400 hover:bg-violet-500/10 transition-colors cursor-pointer"
-                                title="Copy prompt"
-                              >
-                                {copiedLabel === `discussion-${i}` ? (
-                                  <svg className="w-4 h-4 text-success" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><polyline points="20 6 9 17 4 12" /></svg>
-                                ) : (
-                                  <svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                                    <rect x="9" y="9" width="13" height="13" rx="2" ry="2" /><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
-                                  </svg>
-                                )}
-                              </button>
-                            </div>
-                          </motion.div>
-                        ))}
-                      </div>
-                    ) : (
-                      <div className="bg-bg-card border border-violet-500/10 rounded-xl p-8 text-center">
-                        {generatingDiscussion ? (
-                          <div className="flex flex-col items-center gap-3">
-                            <div className="flex gap-1">
-                              {[0, 1, 2].map(i => (
-                                <motion.div
-                                  key={i}
-                                  className="w-2 h-2 rounded-full bg-violet-500"
-                                  animate={{ scale: [1, 1.4, 1], opacity: [0.4, 1, 0.4] }}
-                                  transition={{ duration: 0.8, delay: i * 0.12, repeat: Infinity }}
-                                />
-                              ))}
-                            </div>
-                            <span className="text-text-secondary text-sm">Generating conversation starters...</span>
-                          </div>
-                        ) : (
-                          <>
-                            <div className="w-12 h-12 mx-auto mb-4 rounded-xl bg-violet-500/10 flex items-center justify-center">
-                              <svg className="w-6 h-6 text-violet-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                                <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
-                              </svg>
-                            </div>
-                            <p className="text-text-secondary mb-1">Conversation Starters</p>
-                            <p className="text-text-muted text-xs mb-4">5-6 provocative prompts to display on a slide as students arrive</p>
-                            <Button onClick={generateDiscussion} disabled={!currentChapter || !!generatingDiscussion}>
-                              Generate Conversation Starters
-                            </Button>
-                          </>
-                        )}
-                      </div>
-                    )}
+                    <DiscussionTab
+                      discussions={discussions}
+                      isGenerating={generatingDiscussion === selectedChapterNum}
+                      canGenerate={!!currentChapter && !generatingDiscussion}
+                      onGenerate={generateDiscussion}
+                      onStop={() => abortInFlight(materialAbortKey('discussion', selectedChapterNum))}
+                      onCopy={copyToClipboard}
+                      copiedLabel={copiedLabel}
+                      formatDiscussionsText={formatDiscussionsText}
+                    />
                   </motion.div>
                 )}
 
@@ -2315,257 +2455,26 @@ export function BuildPage() {
                     animate={{ opacity: 1, y: 0 }}
                     exit={{ opacity: 0 }}
                   >
-                    {activities.length > 0 ? (
-                      <div className="space-y-4">
-                        <div className="flex items-center justify-end gap-2">
-                          <button
-                            onClick={() => copyToClipboard(formatActivitiesText(), 'activities')}
-                            className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium bg-violet-500/10 text-violet-400 hover:bg-violet-500/20 transition-colors cursor-pointer"
-                          >
-                            {copiedLabel === 'activities' ? (
-                              <>
-                                <svg className="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><polyline points="20 6 9 17 4 12" /></svg>
-                                Copied!
-                              </>
-                            ) : (
-                              <>
-                                <svg className="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                                  <rect x="9" y="9" width="13" height="13" rx="2" ry="2" /><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
-                                </svg>
-                                Copy All
-                              </>
-                            )}
-                          </button>
-                        </div>
-                        {activities.map((a, i) => {
-                          const detail = expandedActivities[i];
-                          const isExpanding = expandingActivity === i;
-                          const isExpanded = !!detail;
-
-                          return (
-                            <motion.div
-                              key={i}
-                              initial={{ opacity: 0, y: 10 }}
-                              animate={{ opacity: 1, y: 0 }}
-                              transition={{ delay: i * 0.08 }}
-                              className="bg-bg-card border border-violet-500/10 rounded-xl overflow-hidden"
-                            >
-                              <div className="p-5">
-                                <div className="flex items-start justify-between gap-3 mb-2">
-                                  <h3 className="text-base font-semibold">{a.title}</h3>
-                                  <div className="flex items-center gap-2 shrink-0">
-                                    <button
-                                      onClick={() => {
-                                        const d = expandedActivities[i];
-                                        let text = `${a.title}  (${a.duration})\n\n${a.description}\n\nMaterials: ${a.materials}\nLearning Goal: ${a.learningGoal}\nScaling: ${a.scalingNotes}`;
-                                        if (d) {
-                                          text += '\n\nStep-by-Step Guide:\n' + d.steps.map(s => `  [${s.timing}] ${s.instruction}${s.studentAction ? `\n    → Students: ${s.studentAction}` : ''}`).join('\n');
-                                          if (d.facilitationTips.length) text += '\n\nFacilitation Tips:\n' + d.facilitationTips.map(t => `  • ${t}`).join('\n');
-                                          if (d.commonPitfalls.length) text += '\n\nCommon Pitfalls:\n' + d.commonPitfalls.map(p => `  • ${p}`).join('\n');
-                                          text += `\n\nDebrief Guide:\n  ${d.debriefGuide}`;
-                                          if (d.variations.length) text += '\n\nVariations:\n' + d.variations.map(v => `  • ${v}`).join('\n');
-                                          if (d.assessmentIdeas) text += `\n\nAssessment Ideas:\n  ${d.assessmentIdeas}`;
-                                        }
-                                        copyToClipboard(text, `activity-${i}`);
-                                      }}
-                                      className="p-1.5 rounded-md text-text-muted hover:text-violet-400 hover:bg-violet-500/10 transition-colors cursor-pointer"
-                                      title="Copy activity"
-                                    >
-                                      {copiedLabel === `activity-${i}` ? (
-                                        <svg className="w-3.5 h-3.5 text-success" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><polyline points="20 6 9 17 4 12" /></svg>
-                                      ) : (
-                                        <svg className="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                                          <rect x="9" y="9" width="13" height="13" rx="2" ry="2" /><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
-                                        </svg>
-                                      )}
-                                    </button>
-                                    <span className="text-xs px-2 py-0.5 rounded-full bg-amber-500/10 text-amber-400">
-                                      {a.duration}
-                                    </span>
-                                  </div>
-                                </div>
-                                <p className="text-sm text-text-secondary mb-3 leading-relaxed">{a.description}</p>
-                                <div className="grid grid-cols-3 gap-3 text-xs mb-3">
-                                  <div>
-                                    <span className="text-text-muted font-medium block mb-0.5">Materials</span>
-                                    <span className="text-text-secondary">{a.materials}</span>
-                                  </div>
-                                  <div>
-                                    <span className="text-text-muted font-medium block mb-0.5">Learning Goal</span>
-                                    <span className="text-text-secondary">{a.learningGoal}</span>
-                                  </div>
-                                  <div>
-                                    <span className="text-text-muted font-medium block mb-0.5">Scaling</span>
-                                    <span className="text-text-secondary">{a.scalingNotes}</span>
-                                  </div>
-                                </div>
-
-                                {!isExpanded && !isExpanding && (
-                                  <button
-                                    onClick={() => fleshOutActivity(i)}
-                                    disabled={expandingActivity !== null}
-                                    className="text-xs text-violet-400 hover:text-violet-300 transition-colors flex items-center gap-1.5 cursor-pointer disabled:opacity-40 disabled:cursor-default"
-                                  >
-                                    <svg className="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                                      <circle cx="12" cy="12" r="10" />
-                                      <line x1="12" y1="8" x2="12" y2="16" />
-                                      <line x1="8" y1="12" x2="16" y2="12" />
-                                    </svg>
-                                    Expand to full guide
-                                  </button>
-                                )}
-                                {isExpanding && (
-                                  <div className="flex items-center gap-2">
-                                    <div className="flex gap-1">
-                                      {[0, 1, 2].map(j => (
-                                        <motion.div
-                                          key={j}
-                                          className="w-1.5 h-1.5 rounded-full bg-violet-500"
-                                          animate={{ scale: [1, 1.4, 1], opacity: [0.4, 1, 0.4] }}
-                                          transition={{ duration: 0.8, delay: j * 0.12, repeat: Infinity }}
-                                        />
-                                      ))}
-                                    </div>
-                                    <span className="text-xs text-violet-400">Expanding guide...</span>
-                                  </div>
-                                )}
-                                {isExpanded && (
-                                  <button
-                                    onClick={() => setExpandedActivities(prev => { const next = { ...prev }; delete next[i]; return next; })}
-                                    className="text-xs text-text-muted hover:text-text-secondary transition-colors flex items-center gap-1.5 cursor-pointer"
-                                  >
-                                    <svg className="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                                      <circle cx="12" cy="12" r="10" />
-                                      <line x1="8" y1="12" x2="16" y2="12" />
-                                    </svg>
-                                    Collapse
-                                  </button>
-                                )}
-                              </div>
-
-                              <AnimatePresence>
-                                {isExpanded && (
-                                  <motion.div
-                                    initial={{ height: 0, opacity: 0 }}
-                                    animate={{ height: 'auto', opacity: 1 }}
-                                    exit={{ height: 0, opacity: 0 }}
-                                    transition={{ duration: 0.3 }}
-                                    className="border-t border-violet-500/10"
-                                  >
-                                    <div className="p-5 space-y-5 bg-violet-500/[0.02]">
-                                      <div>
-                                        <h4 className="text-sm font-semibold text-violet-400 mb-3 flex items-center gap-2">
-                                          <svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                                            <circle cx="12" cy="12" r="10" /><polyline points="12 6 12 12 16 14" />
-                                          </svg>
-                                          Step-by-Step Guide
-                                        </h4>
-                                        <div className="space-y-3">
-                                          {detail.steps.map((s) => (
-                                            <div key={s.step} className="flex gap-3">
-                                              <div className="shrink-0 w-16 text-xs text-amber-400 font-mono pt-0.5">{s.timing}</div>
-                                              <div className="flex-1 border-l-2 border-violet-500/20 pl-3">
-                                                <p className="text-sm text-text-primary">{s.instruction}</p>
-                                                {s.studentAction && (
-                                                  <p className="text-xs text-text-muted mt-1 italic">Students: {s.studentAction}</p>
-                                                )}
-                                              </div>
-                                            </div>
-                                          ))}
-                                        </div>
-                                      </div>
-
-                                      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                                        <div className="bg-bg-card rounded-lg p-4 border border-violet-500/10">
-                                          <h4 className="text-xs font-semibold text-success mb-2">Facilitation Tips</h4>
-                                          <ul className="space-y-1.5">
-                                            {detail.facilitationTips.map((tip, j) => (
-                                              <li key={j} className="text-xs text-text-secondary flex items-start gap-2">
-                                                <span className="w-1 h-1 rounded-full bg-success shrink-0 mt-1.5" />
-                                                {tip}
-                                              </li>
-                                            ))}
-                                          </ul>
-                                        </div>
-                                        <div className="bg-bg-card rounded-lg p-4 border border-violet-500/10">
-                                          <h4 className="text-xs font-semibold text-amber-400 mb-2">Common Pitfalls</h4>
-                                          <ul className="space-y-1.5">
-                                            {detail.commonPitfalls.map((pitfall, j) => (
-                                              <li key={j} className="text-xs text-text-secondary flex items-start gap-2">
-                                                <span className="w-1 h-1 rounded-full bg-amber-400 shrink-0 mt-1.5" />
-                                                {pitfall}
-                                              </li>
-                                            ))}
-                                          </ul>
-                                        </div>
-                                      </div>
-
-                                      <div className="bg-bg-card rounded-lg p-4 border border-violet-500/10">
-                                        <h4 className="text-xs font-semibold text-violet-400 mb-2">Debrief Guide</h4>
-                                        <p className="text-xs text-text-secondary leading-relaxed">{detail.debriefGuide}</p>
-                                      </div>
-
-                                      {detail.variations.length > 0 && (
-                                        <div>
-                                          <h4 className="text-xs font-semibold text-text-muted mb-2">Variations</h4>
-                                          <ul className="space-y-1.5">
-                                            {detail.variations.map((v, j) => (
-                                              <li key={j} className="text-xs text-text-secondary flex items-start gap-2">
-                                                <span className="w-1 h-1 rounded-full bg-violet-500/50 shrink-0 mt-1.5" />
-                                                {v}
-                                              </li>
-                                            ))}
-                                          </ul>
-                                        </div>
-                                      )}
-
-                                      {detail.assessmentIdeas && (
-                                        <div className="bg-bg-card rounded-lg p-4 border border-violet-500/10">
-                                          <h4 className="text-xs font-semibold text-text-muted mb-2">Assessment Ideas</h4>
-                                          <p className="text-xs text-text-secondary leading-relaxed">{detail.assessmentIdeas}</p>
-                                        </div>
-                                      )}
-                                    </div>
-                                  </motion.div>
-                                )}
-                              </AnimatePresence>
-                            </motion.div>
-                          );
-                        })}
-                      </div>
-                    ) : (
-                      <div className="bg-bg-card border border-violet-500/10 rounded-xl p-8 text-center">
-                        {generatingActivities ? (
-                          <div className="flex flex-col items-center gap-3">
-                            <div className="flex gap-1">
-                              {[0, 1, 2].map(i => (
-                                <motion.div
-                                  key={i}
-                                  className="w-2 h-2 rounded-full bg-violet-500"
-                                  animate={{ scale: [1, 1.4, 1], opacity: [0.4, 1, 0.4] }}
-                                  transition={{ duration: 0.8, delay: i * 0.12, repeat: Infinity }}
-                                />
-                              ))}
-                            </div>
-                            <span className="text-text-secondary text-sm">Generating activity suggestions...</span>
-                          </div>
-                        ) : (
-                          <>
-                            <div className="w-12 h-12 mx-auto mb-4 rounded-xl bg-violet-500/10 flex items-center justify-center">
-                              <svg className="w-6 h-6 text-violet-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                                <circle cx="12" cy="12" r="10" />
-                                <polygon points="10 8 16 12 10 16 10 8" />
-                              </svg>
-                            </div>
-                            <p className="text-text-secondary mb-1">In-Class Activities</p>
-                            <p className="text-text-muted text-xs mb-4">4-6 dynamic activities with timing and scaling notes</p>
-                            <Button onClick={generateActivities} disabled={!currentChapter || !!generatingActivities}>
-                              Generate Activities
-                            </Button>
-                          </>
-                        )}
-                      </div>
-                    )}
+                    <ActivitiesTab
+                      activities={activities}
+                      expandedActivities={expandedActivities}
+                      expandingActivity={expandingActivity}
+                      copiedLabel={copiedLabel}
+                      isGenerating={generatingActivities === selectedChapterNum}
+                      canGenerate={!!currentChapter && !generatingActivities}
+                      onGenerate={generateActivities}
+                      onStop={() => abortInFlight(materialAbortKey('activities', selectedChapterNum))}
+                      onCopy={copyToClipboard}
+                      onFleshOut={fleshOutActivity}
+                      onCollapse={(i) =>
+                        setExpandedActivities((prev) => {
+                          const next = { ...prev };
+                          delete next[i];
+                          return next;
+                        })
+                      }
+                      formatActivitiesText={formatActivitiesText}
+                    />
                   </motion.div>
                 )}
 
@@ -2576,150 +2485,26 @@ export function BuildPage() {
                     animate={{ opacity: 1, y: 0 }}
                     exit={{ opacity: 0 }}
                   >
-                    {audioTranscript ? (
-                      <div className="space-y-4">
-                        {audioUrl && (
-                          <div className="bg-bg-card border border-violet-500/10 rounded-xl p-5">
-                            <div className="flex items-center gap-3 mb-3">
-                              <div className="w-10 h-10 rounded-full bg-violet-500/10 flex items-center justify-center">
-                                <svg className="w-5 h-5 text-violet-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                                  <path d="M9 18V5l12-2v13" /><circle cx="6" cy="18" r="3" /><circle cx="18" cy="16" r="3" />
-                                </svg>
-                              </div>
-                              <div className="flex-1">
-                                <p className="text-sm font-medium">Class Audiobook</p>
-                                <p className="text-xs text-text-muted">Generated with Gemini TTS</p>
-                              </div>
-                              <Button
-                                size="sm"
-                                onClick={() => {
-                                  const a = document.createElement('a');
-                                  a.href = audioUrl;
-                                  a.download = `audio-${selectedChapterNum}-${slugify(syllabusChapter?.title || 'chapter')}.wav`;
-                                  a.click();
-                                }}
-                              >
-                                <svg className="mr-1.5 w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                                  <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
-                                  <polyline points="7 10 12 15 17 10" />
-                                  <line x1="12" y1="15" x2="12" y2="3" />
-                                </svg>
-                                Download .wav
-                              </Button>
-                            </div>
-                            <audio controls className="w-full" src={audioUrl}>
-                              Your browser does not support the audio element.
-                            </audio>
-                          </div>
-                        )}
-                        {!audioUrl && geminiApiKey && audioError && (
-                          <div className="bg-amber-500/5 border border-amber-500/20 rounded-xl p-4">
-                            <p className="text-amber-400 text-sm mb-1">
-                              Audio synthesis failed: {audioError}
-                            </p>
-                            <Button size="sm" variant="secondary" className="mt-2" onClick={retryAudio} disabled={!!generatingAudio}>
-                              Retry Audio
-                            </Button>
-                          </div>
-                        )}
-                        {!audioUrl && geminiApiKey && !audioError && (
-                          <div className="bg-bg-card border border-violet-500/10 rounded-xl p-4 text-center">
-                            {generatingAudio ? (
-                              <div className="flex flex-col items-center gap-3">
-                                <div className="flex gap-1">
-                                  {[0, 1, 2].map(i => (
-                                    <motion.div
-                                      key={i}
-                                      className="w-2 h-2 rounded-full bg-violet-500"
-                                      animate={{ scale: [1, 1.4, 1], opacity: [0.4, 1, 0.4] }}
-                                      transition={{ duration: 0.8, delay: i * 0.12, repeat: Infinity }}
-                                    />
-                                  ))}
-                                </div>
-                                <span className="text-text-secondary text-sm">
-                                  {audioChunkProgress
-                                    ? `Synthesizing audio: chunk ${audioChunkProgress.current} of ${audioChunkProgress.total}...`
-                                    : 'Synthesizing audio...'}
-                                </span>
-                                {audioChunkProgress && (
-                                  <div className="w-48">
-                                    <div className="h-1.5 bg-bg-elevated rounded-full overflow-hidden">
-                                      <div
-                                        className="h-full bg-violet-500 rounded-full transition-all duration-500"
-                                        style={{ width: `${(audioChunkProgress.current / audioChunkProgress.total) * 100}%` }}
-                                      />
-                                    </div>
-                                  </div>
-                                )}
-                              </div>
-                            ) : (
-                              <>
-                                <p className="text-text-secondary text-sm mb-1">Transcript ready — click below to generate audio.</p>
-                                <Button size="sm" variant="secondary" className="mt-2" onClick={retryAudio} disabled={!!generatingAudio}>
-                                  Generate Audio
-                                </Button>
-                              </>
-                            )}
-                          </div>
-                        )}
-                        {!audioUrl && !geminiApiKey && (
-                          <div className="bg-bg-card border border-violet-500/10 rounded-xl p-4 text-center">
-                            <p className="text-text-secondary text-sm">Transcript ready — add a Gemini API key in Setup to generate audio.</p>
-                          </div>
-                        )}
-                      </div>
-                    ) : (
-                      <div className="bg-bg-card border border-violet-500/10 rounded-xl p-8 text-center">
-                        {generatingAudio ? (
-                          <div className="flex flex-col items-center gap-3">
-                            <div className="flex gap-1">
-                              {[0, 1, 2].map(i => (
-                                <motion.div
-                                  key={i}
-                                  className="w-2 h-2 rounded-full bg-violet-500"
-                                  animate={{ scale: [1, 1.4, 1], opacity: [0.4, 1, 0.4] }}
-                                  transition={{ duration: 0.8, delay: i * 0.12, repeat: Infinity }}
-                                />
-                              ))}
-                            </div>
-                            <span className="text-text-secondary text-sm">
-                              {audioPhase === 'transcript'
-                                ? 'Adapting chapter for spoken delivery...'
-                                : audioChunkProgress
-                                ? `Synthesizing audio: chunk ${audioChunkProgress.current} of ${audioChunkProgress.total}...`
-                                : 'Preparing audio synthesis...'}
-                            </span>
-                            {audioPhase === 'synthesizing' && audioChunkProgress && (
-                              <div className="w-48 mt-2">
-                                <div className="h-1.5 bg-bg-elevated rounded-full overflow-hidden">
-                                  <div
-                                    className="h-full bg-violet-500 rounded-full transition-all duration-500"
-                                    style={{ width: `${(audioChunkProgress.current / audioChunkProgress.total) * 100}%` }}
-                                  />
-                                </div>
-                              </div>
-                            )}
-                          </div>
-                        ) : (
-                          <>
-                            <div className="w-12 h-12 mx-auto mb-4 rounded-xl bg-violet-500/10 flex items-center justify-center">
-                              <svg className="w-6 h-6 text-violet-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                                <path d="M9 18V5l12-2v13" /><circle cx="6" cy="18" r="3" /><circle cx="18" cy="16" r="3" />
-                              </svg>
-                            </div>
-                            <p className="text-text-secondary mb-1">Class Audiobook</p>
-                            <p className="text-text-muted text-xs mb-4">
-                              {geminiApiKey
-                                ? 'AI-adapted transcript + Gemini TTS audio synthesis'
-                                : 'Generate a spoken-word transcript (add Gemini key in Setup for audio)'}
-                            </p>
-                            <Button onClick={generateAudio} disabled={!currentChapter || !!generatingAudio}>
-                              Generate Audiobook
-                            </Button>
-                          </>
-                        )}
-                      </div>
-                    )}
+                    <AudioTab
+                      audioTranscript={audioTranscript}
+                      audioUrl={audioUrl}
+                      audioError={audioError}
+                      audioPersistNote={audioPersistNote}
+                      audioPhase={audioPhase}
+                      audioChunkProgress={audioChunkProgress}
+                      chapterNum={selectedChapterNum}
+                      chapterTitle={syllabusChapter?.title ?? ''}
+                      isGenerating={generatingAudio === selectedChapterNum}
+                      canGenerate={!!currentChapter && !generatingAudio}
+                      hasElevenLabsKey={!!elevenLabsApiKey}
+                      onGenerate={generateAudio}
+                      onRetry={retryAudio}
+                      onAddKey={openKeysModal}
+                      onStop={() => abortInFlight(materialAbortKey('audio', selectedChapterNum))}
+                      onSaveTranscript={(text) =>
+                        updateChapter(selectedChapterNum, { audioTranscript: text })
+                      }
+                    />
                   </motion.div>
                 )}
 
@@ -2730,328 +2515,34 @@ export function BuildPage() {
                     animate={{ opacity: 1, y: 0 }}
                     exit={{ opacity: 0 }}
                   >
-                    {slidesData.length > 0 ? (
-                      <div className="space-y-4">
-                        <div className="bg-bg-card border border-violet-500/20 rounded-xl p-6 flex items-center justify-between">
-                          <div className="flex items-center gap-4">
-                            <div className="w-12 h-12 rounded-xl bg-violet-500/10 flex items-center justify-center">
-                              <svg className="w-6 h-6 text-violet-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                                <rect x="2" y="3" width="20" height="14" rx="2" ry="2" />
-                                <line x1="8" y1="21" x2="16" y2="21" />
-                                <line x1="12" y1="17" x2="12" y2="21" />
-                              </svg>
-                            </div>
-                            <div>
-                              <p className="text-sm font-semibold">{slidesData.length} slides with speaker notes</p>
-                              <p className="text-xs text-text-muted mt-0.5">Dark-themed PowerPoint deck, ready to teach</p>
-                            </div>
-                          </div>
-                          <Button
-                            onClick={async () => {
-                              try {
-                                const { generatePptx } = await import('../services/export/pptxExporter');
-                                const blob = await generatePptx(slidesData, syllabus!.courseTitle, syllabusChapter!.title, setup.themeId);
-                                downloadFile(blob, `slides-${selectedChapterNum}-${slugify(syllabusChapter?.title || 'chapter')}.pptx`);
-                              } catch (err) {
-                                setError(friendlyError(err, 'Slides export failed.'));
-                              }
-                            }}
-                          >
-                            <svg className="mr-1.5 w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                              <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
-                              <polyline points="7 10 12 15 17 10" />
-                              <line x1="12" y1="15" x2="12" y2="3" />
-                            </svg>
-                            Download .pptx
-                          </Button>
-                        </div>
-
-                        <div>
-                          <h3 className="text-xs font-medium text-text-muted uppercase tracking-wider mb-3">Speaker Notes</h3>
-                          <div className="space-y-1">
-                            {slidesData.map((slide, i) => {
-                              const isExpanded = expandedSlideNotes.has(i);
-                              const hasNotes = !!slide.speakerNotes;
-                              return (
-                                <div key={i} className="border border-violet-500/10 rounded-lg overflow-hidden">
-                                  <button
-                                    onClick={() => {
-                                      if (!hasNotes) return;
-                                      setExpandedSlideNotes(prev => {
-                                        const next = new Set(prev);
-                                        if (next.has(i)) next.delete(i);
-                                        else next.add(i);
-                                        return next;
-                                      });
-                                    }}
-                                    className={`w-full flex items-center gap-3 px-4 py-3 text-left bg-transparent border-0 transition-colors ${
-                                      hasNotes ? 'cursor-pointer hover:bg-violet-500/5' : 'cursor-default opacity-60'
-                                    }`}
-                                  >
-                                    <span className="text-xs text-text-muted font-mono w-5 shrink-0 text-right">{i + 1}</span>
-                                    <span className="text-sm text-text-primary truncate flex-1">{slide.title}</span>
-                                    {slide.layout && slide.layout !== 'content' && (
-                                      <span className="text-[10px] text-text-muted uppercase tracking-wider shrink-0">{slide.layout}</span>
-                                    )}
-                                    {hasNotes && (
-                                      <svg
-                                        className={`w-3.5 h-3.5 text-text-muted shrink-0 transition-transform ${isExpanded ? 'rotate-180' : ''}`}
-                                        viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"
-                                      >
-                                        <polyline points="6 9 12 15 18 9" />
-                                      </svg>
-                                    )}
-                                  </button>
-                                  <AnimatePresence>
-                                    {isExpanded && hasNotes && (
-                                      <motion.div
-                                        initial={{ height: 0, opacity: 0 }}
-                                        animate={{ height: 'auto', opacity: 1 }}
-                                        exit={{ height: 0, opacity: 0 }}
-                                        transition={{ duration: 0.2 }}
-                                        className="overflow-hidden"
-                                      >
-                                        <div className="px-4 pb-4 pl-12">
-                                          <p className="text-sm text-text-secondary leading-relaxed whitespace-pre-line">{slide.speakerNotes}</p>
-                                        </div>
-                                      </motion.div>
-                                    )}
-                                  </AnimatePresence>
-                                </div>
-                              );
-                            })}
-                          </div>
-                        </div>
-                      </div>
-                    ) : (
-                      <div className="bg-bg-card border border-violet-500/10 rounded-xl p-8 text-center">
-                        {generatingSlides ? (
-                          <div className="flex flex-col items-center gap-3">
-                            <div className="flex gap-1">
-                              {[0, 1, 2].map(i => (
-                                <motion.div
-                                  key={i}
-                                  className="w-2 h-2 rounded-full bg-violet-500"
-                                  animate={{ scale: [1, 1.4, 1], opacity: [0.4, 1, 0.4] }}
-                                  transition={{ duration: 0.8, delay: i * 0.12, repeat: Infinity }}
-                                />
-                              ))}
-                            </div>
-                            <span className="text-text-secondary text-sm">Generating lecture slides with speaker notes...</span>
-                          </div>
-                        ) : (
-                          <>
-                            <div className="w-12 h-12 mx-auto mb-4 rounded-xl bg-violet-500/10 flex items-center justify-center">
-                              <svg className="w-6 h-6 text-violet-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                                <rect x="2" y="3" width="20" height="14" rx="2" ry="2" />
-                                <line x1="8" y1="21" x2="16" y2="21" />
-                                <line x1="12" y1="17" x2="12" y2="21" />
-                              </svg>
-                            </div>
-                            <p className="text-text-secondary mb-1">Lecture Slides</p>
-                            <p className="text-text-muted text-xs mb-4">8-12 themed PowerPoint slides with speaker notes</p>
-                            <Button onClick={generateSlides} disabled={!currentChapter || !!generatingSlides}>
-                              Generate Slides
-                            </Button>
-                          </>
-                        )}
-                      </div>
-                    )}
-                  </motion.div>
-                )}
-
-                {activeTab === 'infographic' && (
-                  <motion.div
-                    key="infographic"
-                    initial={{ opacity: 0, y: 5 }}
-                    animate={{ opacity: 1, y: 0 }}
-                    exit={{ opacity: 0, y: -5 }}
-                    className="space-y-4"
-                  >
-                    {infographicDataUri ? (
-                      <div className="space-y-4">
-                        <div className="bg-bg-card border border-violet-500/10 rounded-xl overflow-hidden">
-                          <img
-                            src={infographicDataUri}
-                            alt={`Infographic for ${syllabusChapter?.title || 'class'}`}
-                            className="w-full h-auto"
-                          />
-                        </div>
-                        <div className="flex gap-3">
-                          <Button
-                            variant="secondary"
-                            size="sm"
-                            onClick={() => {
-                              const a = document.createElement('a');
-                              a.href = infographicDataUri;
-                              a.download = `infographic-${selectedChapterNum}-${slugify(syllabusChapter?.title || 'class')}.jpg`;
-                              a.click();
-                            }}
-                          >
-                            <svg className="mr-1.5 w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                              <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
-                              <polyline points="7 10 12 15 17 10" />
-                              <line x1="12" y1="15" x2="12" y2="3" />
-                            </svg>
-                            Download .jpg
-                          </Button>
-                          <Button
-                            variant="secondary"
-                            size="sm"
-                            onClick={generateInfographic}
-                            disabled={!!generatingInfographic}
-                          >
-                            Regenerate
-                          </Button>
-                        </div>
-                      </div>
-                    ) : (
-                      <div className="bg-bg-card border border-violet-500/10 rounded-xl p-8 text-center">
-                        {generatingInfographic ? (
-                          <div className="flex flex-col items-center gap-3">
-                            <div className="flex gap-1">
-                              {[0, 1, 2].map(i => (
-                                <motion.div
-                                  key={i}
-                                  className="w-2 h-2 rounded-full bg-violet-500"
-                                  animate={{ scale: [1, 1.4, 1], opacity: [0.4, 1, 0.4] }}
-                                  transition={{ duration: 0.8, delay: i * 0.12, repeat: Infinity }}
-                                />
-                              ))}
-                            </div>
-                            <span className="text-text-secondary text-sm">Generating infographic with Gemini...</span>
-                            <span className="text-text-muted text-xs">Claude writes the prompt, then Gemini creates the image</span>
-                          </div>
-                        ) : (
-                          <>
-                            <div className="w-12 h-12 mx-auto mb-4 rounded-xl bg-violet-500/10 flex items-center justify-center">
-                              <svg className="w-6 h-6 text-violet-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                                <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
-                                <circle cx="8.5" cy="8.5" r="1.5" />
-                                <polyline points="21 15 16 10 5 21" />
-                              </svg>
-                            </div>
-                            <p className="text-text-secondary mb-1">Educational Infographic</p>
-                            <p className="text-text-muted text-xs mb-4">AI-generated visual summary of key concepts</p>
-                            <Button onClick={generateInfographic} disabled={!currentChapter || !!generatingInfographic}>
-                              Generate Infographic
-                            </Button>
-                          </>
-                        )}
-                      </div>
-                    )}
-                  </motion.div>
-                )}
-
-                {activeTab === 'template-module' && (
-                  <motion.div
-                    key="template-module"
-                    initial={{ opacity: 0, y: 5 }}
-                    animate={{ opacity: 1, y: 0 }}
-                    exit={{ opacity: 0 }}
-                    className="bg-bg-card border border-violet-500/10 rounded-xl overflow-hidden"
-                  >
-                    <div className="flex items-center justify-between px-5 py-3 border-b border-violet-500/10">
-                      <div>
-                        <p className="text-xs text-text-muted">
-                          Canvas module — Module {selectedChapterNum} Overview, {templateContent ? `${templateContent.instructorNotes.length} Instructor Notes page${templateContent.instructorNotes.length === 1 ? '' : 's'}` : '1+ Instructor Notes pages'}, 1 Discussion
-                        </p>
-                        <p className="text-[11px] text-text-muted/80 mt-0.5">
-                          The locked <code className="text-violet-300">M{selectedChapterNum} Instructor Notes:</code> / <code className="text-violet-300">M{selectedChapterNum} Discussion:</code> prefixes are added at export time.
-                        </p>
-                      </div>
-                      <Button
-                        size="sm"
-                        variant={templateContent ? 'secondary' : 'primary'}
-                        onClick={generateTemplateContent}
-                        disabled={!currentChapter || !!generatingTemplateContent || !syllabusChapter}
-                        isLoading={generatingTemplateContent === selectedChapterNum}
-                      >
-                        {templateContent ? 'Regenerate' : 'Generate Canvas Module'}
-                      </Button>
-                    </div>
-
-                    {generatingTemplateContent === selectedChapterNum && !templateContent && (
-                      <div className="p-6 flex items-center gap-3">
-                        <div className="w-3 h-3 rounded-full bg-violet-500 animate-pulse" />
-                        <span className="text-text-secondary text-sm">
-                          Generating Canvas module content for Class {selectedChapterNum}... {formatElapsed(elapsedSec)}
-                        </span>
-                      </div>
-                    )}
-
-                    {templateContent && (
-                      <div className="p-5 space-y-6">
-                        <section>
-                          <h3 className="text-sm font-medium text-text-primary mb-2">
-                            <span className="text-violet-300 font-mono">Module {selectedChapterNum} Overview</span>
-                          </h3>
-                          <div
-                            className="prose prose-sm prose-invert max-w-none rounded-lg border border-violet-500/10 bg-bg-base p-4 text-sm"
-                            dangerouslySetInnerHTML={{ __html: templateContent.moduleOverviewHtml }}
-                          />
-                        </section>
-
-                        <section>
-                          <h3 className="text-sm font-medium text-text-primary mb-2">
-                            Instructor Notes ({templateContent.instructorNotes.length} page{templateContent.instructorNotes.length === 1 ? '' : 's'})
-                          </h3>
-                          <div className="space-y-3">
-                            {templateContent.instructorNotes.map((note, i) => (
-                              <details
-                                key={i}
-                                className="rounded-lg border border-violet-500/10 bg-bg-base"
-                                open={i === 0}
-                              >
-                                <summary className="cursor-pointer px-4 py-2.5 text-sm">
-                                  <span className="text-violet-300 font-mono">M{selectedChapterNum} Instructor Notes:</span>{' '}
-                                  <span className="text-text-primary">{note.title}</span>
-                                </summary>
-                                <div
-                                  className="prose prose-sm prose-invert max-w-none px-4 pb-4 pt-2 text-sm"
-                                  dangerouslySetInnerHTML={{ __html: note.htmlContent }}
-                                />
-                              </details>
-                            ))}
-                          </div>
-                        </section>
-
-                        <section>
-                          <h3 className="text-sm font-medium text-text-primary mb-2">Discussion</h3>
-                          <div className="rounded-lg border border-violet-500/10 bg-bg-base p-4">
-                            <p className="text-sm mb-2">
-                              <span className="text-violet-300 font-mono">M{selectedChapterNum} Discussion:</span>{' '}
-                              <span className="text-text-primary font-medium">{templateContent.discussion.title}</span>
-                            </p>
-                            <div
-                              className="prose prose-sm prose-invert max-w-none text-sm"
-                              dangerouslySetInnerHTML={{ __html: templateContent.discussion.promptHtml }}
-                            />
-                          </div>
-                        </section>
-                      </div>
-                    )}
-
-                    {!templateContent && generatingTemplateContent !== selectedChapterNum && (
-                      <div className="p-12 text-center">
-                        <div className="w-12 h-12 rounded-lg bg-violet-500/10 flex items-center justify-center mx-auto mb-4">
-                          <svg className="w-6 h-6 text-violet-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
-                            <polyline points="14 2 14 8 20 8" />
-                            <line x1="16" y1="13" x2="8" y2="13" />
-                            <line x1="16" y1="17" x2="8" y2="17" />
-                            <polyline points="10 9 9 9 8 9" />
-                          </svg>
-                        </div>
-                        <p className="text-text-secondary mb-1">Canvas Module Content</p>
-                        <p className="text-text-muted text-xs mb-4">
-                          1 Module Overview · 1+ Instructor Notes pages · 1 Discussion
-                        </p>
-                        <Button onClick={generateTemplateContent} disabled={!currentChapter || !!generatingTemplateContent}>
-                          Generate Canvas Module
-                        </Button>
-                      </div>
-                    )}
+                    <SlidesTab
+                      slides={slidesData}
+                      chapterNum={selectedChapterNum}
+                      isGenerating={generatingSlides === selectedChapterNum}
+                      canGenerate={!!currentChapter && !generatingSlides}
+                      hasOpenAiKey={!!openaiApiKey}
+                      showImageHint={showSlideImageHint}
+                      onDismissImageHint={dismissSlideImageHint}
+                      onGenerate={generateSlides}
+                      onStop={() => abortInFlight(materialAbortKey('slides', selectedChapterNum))}
+                      onDownloadDeck={downloadSlideDeck}
+                      onAddKey={openKeysModal}
+                      slidesRender={slidesRender}
+                      editedSlidePrompts={editedSlidePrompts}
+                      onSlidePromptDraftChange={(i, text) =>
+                        setEditedSlidePrompts((prev) => ({ ...prev, [i]: text }))
+                      }
+                      onSlidePromptDraftReset={(i) =>
+                        setEditedSlidePrompts((prev) => {
+                          const next = { ...prev };
+                          delete next[i];
+                          return next;
+                        })
+                      }
+                      refiningSlideIdx={refiningSlideIdx}
+                      slideRefineError={slideRefineError}
+                      onRefineSlide={refineSlideImage}
+                    />
                   </motion.div>
                 )}
 
@@ -3060,6 +2551,71 @@ export function BuildPage() {
           )}
         </div>
       </div>
-    </motion.div>
+
+      {/* Chapter image refine drawer — overlays from the right when the user
+          clicks any rendered image inside the chapter iframe. */}
+      <ChapterImageRefineDrawer
+        state={chapterImageRefine}
+        draft={chapterImageDraft}
+        onDraftChange={setChapterImageDraft}
+        onClose={closeChapterImageRefine}
+        onRefine={() => void refineChapterImage()}
+        isRefining={chapterImageRefining}
+        hasOpenAiKey={!!openaiApiKey}
+        error={chapterImageRefineError}
+        onAddKey={openKeysModal}
+      />
+
+      {/* Shortcuts help — toggled by ? */}
+      <ShortcutsHelpOverlay
+        open={shortcutsHelpOpen}
+        onClose={() => setShortcutsHelpOpen(false)}
+      />
+
+      {/* Discoverability affordance for the keyboard shortcuts. */}
+      {!batchGenerating && !chapterImageRefining && !shortcutsHelpOpen && (
+        <button
+          type="button"
+          onClick={() => setShortcutsHelpOpen(true)}
+          aria-label="Show keyboard shortcuts"
+          title="Show keyboard shortcuts (?)"
+          className="cb-mono cb-shortcuts-chip"
+          style={{
+            position: 'fixed',
+            bottom: 16,
+            right: 16,
+            zIndex: 30,
+            display: 'inline-flex',
+            alignItems: 'center',
+            gap: 6,
+            padding: '6px 10px 7px',
+            background: 'var(--cb-ground-page)',
+            border: '0.5px solid var(--cb-border-default)',
+            borderRadius: 2,
+            fontSize: 10.5,
+            letterSpacing: '0.08em',
+            color: 'var(--cb-text-muted)',
+            cursor: 'pointer',
+            boxShadow: '0 4px 14px rgba(20,17,13,0.06)',
+            transition: 'color 160ms ease, border-color 160ms ease',
+          }}
+          onMouseEnter={(e) => {
+            e.currentTarget.style.color = 'var(--cb-accent-emphasis)';
+            e.currentTarget.style.borderColor = 'var(--cb-accent-emphasis)';
+          }}
+          onMouseLeave={(e) => {
+            e.currentTarget.style.color = 'var(--cb-text-muted)';
+            e.currentTarget.style.borderColor = 'var(--cb-border-default)';
+          }}
+        >
+          shortcuts <span style={{ opacity: 0.7 }}>·</span> ?
+        </button>
+      )}
+
+      {/* Transient toast — used by Cmd/Ctrl+S "you don't need to save" feedback */}
+      <TransientToast message={transientToast} />
+    </div>
   );
 }
+
+
diff --git a/src/pages/ExportPage.tsx b/src/pages/ExportPage.tsx
index c873b3d..b598770 100644
--- a/src/pages/ExportPage.tsx
+++ b/src/pages/ExportPage.tsx
@@ -1,4 +1,4 @@
-import { useState, useCallback } from 'react';
+import { useState, useCallback, useMemo, useRef } from 'react';
 import { motion } from 'framer-motion';
 import { useCourseStore } from '../store/courseStore';
 import { useApiStore } from '../store/apiStore';
@@ -8,25 +8,25 @@ import { MODELS } from '../services/claude/client';
 import { buildChapterPrompt, buildChapterUserPrompt } from '../prompts/chapter';
 import { buildPracticeQuizPrompt, buildPracticeQuizUserPrompt } from '../prompts/practiceQuiz';
 import { buildInClassQuizPrompt, buildInClassQuizUserPrompt } from '../prompts/inClassQuiz';
-import { Button } from '../components/shared/Button';
+import {
+  buildLearningObjectivesPrompt,
+  buildLearningObjectivesUserPrompt,
+  parseCurriculumMapResponse,
+} from '../prompts/learningObjectives';
+import {
+  buildOutcomesPage,
+  buildOutcomesCsv,
+  buildOutcomesTableFragment,
+  hashSyllabus,
+} from '../templates/outcomesTableTemplate';
+import { CodexButton as Button, CodexModal } from '../components/codex';
 import type { InClassQuizQuestion } from '../types/course';
 import { friendlyError } from '../utils/errors';
-
-function extractHtml(text: string): string {
-  const htmlMatch = text.match(/```html\s*\n?([\s\S]*?)\n?```/);
-  if (htmlMatch) return htmlMatch[1];
-  const trimmed = text.trim();
-  if (trimmed.startsWith('<!DOCTYPE') || trimmed.startsWith('<html')) return trimmed;
-  const docIdx = text.indexOf('<!DOCTYPE');
-  const htmlIdx = text.indexOf('<html');
-  const startIdx = docIdx !== -1 ? docIdx : htmlIdx;
-  if (startIdx !== -1) {
-    const endIdx = text.lastIndexOf('</html>');
-    if (endIdx !== -1) return text.slice(startIdx, endIdx + 7);
-    return text.slice(startIdx);
-  }
-  return text;
-}
+import { buildProjectFile } from '../utils/projectFile';
+import { ThemePicker } from '../components/export/ThemePicker';
+import type { ChapterThemeId } from '../themes';
+import { DEFAULT_CHAPTER_THEME_ID, renderChapterHtml } from '../themes';
+import { extractHtml } from '../utils/format';
 
 function downloadFile(content: string | Blob, filename: string, type = 'text/html') {
   const blob = content instanceof Blob ? content : new Blob([content], { type });
@@ -42,20 +42,74 @@ function sanitizeFilename(text: string): string {
   return text.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '');
 }
 
+/** Short index file shipped at the top of each class bundle so an instructor
+ *  unzipping it sees exactly what's inside and how to use each file. */
+function buildClassReadme(
+  chapter: import('../types/course').GeneratedChapter,
+  courseTitle: string,
+  chapterNum: number,
+): string {
+  const lines: string[] = [];
+  lines.push(`${courseTitle}`);
+  lines.push(`Class ${String(chapterNum).padStart(2, '0')} — ${chapter.title}`);
+  lines.push('='.repeat(64));
+  lines.push('');
+  lines.push('Generated by ClassBuild · classbuild.app');
+  lines.push('');
+  lines.push('CONTENTS');
+  lines.push('-'.repeat(64));
+  lines.push('reading.html              The chapter reading, themed for offline viewing.');
+  if (chapter.practiceQuizData) {
+    lines.push('practice-quiz.html        Self-paced practice quiz (twelve questions).');
+  }
+  if (chapter.inClassQuizData && chapter.inClassQuizData.length > 0) {
+    lines.push('in-class-quiz-pack.zip    Five shuffled .docx versions + answer key.');
+  }
+  if (chapter.weeklyChallengeData) {
+    lines.push('weekly-challenge.html     Mastery challenge — open in a browser.');
+    lines.push('weekly-challenge-scorm.zip  SCORM 2004 package — upload to Canvas / Moodle / Blackboard.');
+  }
+  if (chapter.slidesJson) {
+    lines.push('slides.pptx               12–14-slide lecture deck (or slides.json if no OpenAI key).');
+  }
+  if (chapter.audioUrl || chapter.audioDataUri) {
+    lines.push('audiobook.mp3             Class audiobook narrated through ElevenLabs.');
+  }
+  if (chapter.audioTranscript) {
+    lines.push('audio-transcript.txt      Plain-text transcript adapted for spoken delivery.');
+  }
+  if ((chapter.discussionData?.length || 0) + (chapter.activityData?.length || 0) > 0) {
+    lines.push('teaching-pack.docx        Conversation starters + in-class activities + facilitation guides.');
+  }
+  lines.push('');
+  lines.push('Everything is offline — no internet needed to use any of the files.');
+  return lines.join('\n');
+}
+
 export function ExportPage() {
-  const { syllabus, chapters, researchDossiers, addChapter, updateChapter, setup, curriculumMap, outlineFields } = useCourseStore();
-  const { claudeApiKey } = useApiStore();
+  const { syllabus, chapters, researchDossiers, addChapter, updateChapter, setSlideImage, setup, updateSetup, curriculumMap, setCurriculumMap, outlineFields } = useCourseStore();
+  const currentThemeId = (setup.themeId as ChapterThemeId | undefined) ?? DEFAULT_CHAPTER_THEME_ID;
+  const { claudeApiKey, openaiApiKey } = useApiStore();
   const { isGenerating, setIsGenerating, setError, error } = useUiStore();
   const [generatingChapter, setGeneratingChapter] = useState<number | null>(null);
   const [isPublishing, setIsPublishing] = useState(false);
+  const [isExportingImscc, setIsExportingImscc] = useState(false);
+  const [showImsccSlidesPrompt, setShowImsccSlidesPrompt] = useState(false);
+  const [isGeneratingOutcomes, setIsGeneratingOutcomes] = useState(false);
+  const [outcomesError, setOutcomesError] = useState<string | null>(null);
+  const [outcomesStreamChars, setOutcomesStreamChars] = useState(0);
+  const outcomesStreamRef = useRef('');
 
   // --- Download handlers ---
 
   const handleDownloadChapter = useCallback((chapterNum: number) => {
     const chapter = chapters.find(c => c.number === chapterNum);
     if (!chapter) return;
-    downloadFile(chapter.htmlContent, `chapter-${chapterNum}-${sanitizeFilename(chapter.title)}.html`);
-  }, [chapters]);
+    downloadFile(
+      renderChapterHtml(chapter.htmlContent, setup.themeId, chapter.title),
+      `chapter-${chapterNum}-${sanitizeFilename(chapter.title)}.html`,
+    );
+  }, [chapters, setup.themeId]);
 
   const handleDownloadQuiz = useCallback(async (chapterNum: number) => {
     const chapter = chapters.find(c => c.number === chapterNum);
@@ -72,14 +126,60 @@ export function ExportPage() {
   const handleDownloadSlides = useCallback(async (chapterNum: number) => {
     const chapter = chapters.find(c => c.number === chapterNum);
     if (!chapter?.slidesJson || !syllabus) return;
+    if (!openaiApiKey) {
+      setError('Add an OpenAI API key in Setup to render the slide images.');
+      return;
+    }
+    // Guard: only one slide render in flight across the app.
+    const { slidesRender } = useUiStore.getState();
+    if (slidesRender) {
+      setError(
+        slidesRender.chapterNum === chapterNum
+          ? 'This deck is already rendering. Wait for it to finish.'
+          : `Another deck (Class ${slidesRender.chapterNum}) is rendering. Wait for it to finish.`,
+      );
+      return;
+    }
+    useUiStore.getState().setSlidesRender({
+      chapterNum,
+      current: 0,
+      total: chapter.slidesJson.length,
+      phase: 'rendering',
+    });
     try {
       const { generatePptx } = await import('../services/export/pptxExporter');
-      const blob = await generatePptx(chapter.slidesJson, syllabus.courseTitle, chapter.title, setup.themeId);
+      const { blob } = await generatePptx(
+        chapter.slidesJson,
+        syllabus.courseTitle,
+        chapter.title,
+        setup.themeId,
+        openaiApiKey,
+        {
+          imageQuality: 'high',
+          imageSize: '3840x2160',
+          onProgress: (current, total, phase) =>
+            useUiStore.getState().setSlidesRender({
+              chapterNum,
+              current,
+              total,
+              phase,
+            }),
+          onSlideRendered: (i, dataUri) => setSlideImage(chapterNum, i, dataUri),
+          preRendered: Object.fromEntries(
+            chapter.slidesJson
+              .map((s, i) => (s.imageDataUri ? [i, s.imageDataUri] : null))
+              .filter((x): x is [number, string] => x !== null),
+          ),
+        },
+      );
       downloadFile(blob, `slides-${chapterNum}-${sanitizeFilename(chapter.title)}.pptx`);
-    } catch {
+    } catch (err) {
+      setError(friendlyError(err, 'Slides export failed.'));
       downloadFile(JSON.stringify(chapter.slidesJson, null, 2), `slides-${chapterNum}-${sanitizeFilename(chapter.title)}.json`, 'application/json');
+    } finally {
+      useUiStore.getState().setSlidesRender(null);
     }
-  }, [chapters, syllabus, setup.themeId]);
+  }, [chapters, syllabus, setup.themeId, openaiApiKey, setSlideImage, setError]);
 
   const handleDownloadInClassQuiz = useCallback(async (chapterNum: number) => {
     const chapter = chapters.find(c => c.number === chapterNum);
@@ -107,7 +207,11 @@ export function ExportPage() {
 
   const handleDownloadWeeklyChallengeSCORM = useCallback(async (chapterNum: number) => {
     const chapter = chapters.find(c => c.number === chapterNum);
-    if (!chapter?.weeklyChallengeData || !syllabus) return;
+    if (!syllabus) return;
+    if (!chapter?.weeklyChallengeData?.questions?.length) {
+      setError('No weekly challenge to package yet — generate the mastery challenge for this chapter first, then export the SCORM package.');
+      return;
+    }
     try {
       const { buildWeeklyChallengeHtml } = await import('../templates/weeklyChallengeTemplate');
       const { default: JSZip } = await import('jszip');
@@ -128,9 +232,11 @@ export function ExportPage() {
 
   const handleDownloadAudio = useCallback((chapterNum: number) => {
     const chapter = chapters.find(c => c.number === chapterNum);
-    if (!chapter?.audioUrl) return;
+    if (!chapter) return;
+    const audioSrc = chapter.audioUrl ?? chapter.audioDataUri;
+    if (!audioSrc) return;
     const a = document.createElement('a');
-    a.href = chapter.audioUrl;
+    a.href = audioSrc;
     a.download = `audio-${chapterNum}-${sanitizeFilename(chapter.title)}.mp3`;
     a.click();
   }, [chapters]);
@@ -138,36 +244,330 @@ export function ExportPage() {
   const handleDownloadTeachingResources = useCallback(async (chapterNum: number) => {
     const chapter = chapters.find(c => c.number === chapterNum);
     if (!chapter || !syllabus) return;
-    const { generateTeachingResourcesDocx } = await import('../services/export/teachingResourcesDocx');
-    const blob = await generateTeachingResourcesDocx(chapter, syllabus);
-    if (!blob) return;
+    const discussions = chapter.discussionData || [];
+    const activities = chapter.activityData || [];
+    const details = chapter.activityDetails || {};
+    if (discussions.length === 0 && activities.length === 0) return;
+
+    const { Document, Packer, Paragraph, TextRun, HeadingLevel, AlignmentType } = await import('docx');
+    const children: InstanceType<typeof Paragraph>[] = [];
+
+    // Title
+    children.push(new Paragraph({
+      children: [new TextRun({ text: `Teaching Resources — ${chapter.title}`, bold: true, size: 32 })],
+      heading: HeadingLevel.HEADING_1,
+      spacing: { after: 200 },
+    }));
+    children.push(new Paragraph({
+      children: [new TextRun({ text: syllabus.courseTitle, italics: true, color: '666666', size: 22 })],
+      spacing: { after: 400 },
+    }));
+
+    // Discussion starters
+    if (discussions.length > 0) {
+      children.push(new Paragraph({
+        children: [new TextRun({ text: 'Conversation Starters', bold: true, size: 28 })],
+        heading: HeadingLevel.HEADING_2,
+        spacing: { before: 300, after: 200 },
+      }));
+      children.push(new Paragraph({
+        children: [new TextRun({ text: 'Display these on a slide as students arrive.', italics: true, color: '888888', size: 20 })],
+        spacing: { after: 200 },
+      }));
+      discussions.forEach((d, i) => {
+        children.push(new Paragraph({
+          children: [
+            new TextRun({ text: `${i + 1}. `, bold: true, size: 22 }),
+            new TextRun({ text: `[${d.hook}] `, bold: true, color: '8b5cf6', size: 22 }),
+            new TextRun({ text: d.prompt, size: 22 }),
+          ],
+          spacing: { after: 150 },
+        }));
+      });
+    }
+
+    // Activities
+    if (activities.length > 0) {
+      children.push(new Paragraph({
+        children: [new TextRun({ text: 'In-Class Activities', bold: true, size: 28 })],
+        heading: HeadingLevel.HEADING_2,
+        spacing: { before: 400, after: 200 },
+      }));
+      activities.forEach((a, i) => {
+        children.push(new Paragraph({
+          children: [
+            new TextRun({ text: `${a.title}`, bold: true, size: 24 }),
+            new TextRun({ text: `  (${a.duration})`, color: '888888', size: 20 }),
+          ],
+          heading: HeadingLevel.HEADING_3,
+          spacing: { before: 300, after: 100 },
+        }));
+        children.push(new Paragraph({
+          children: [new TextRun({ text: a.description, size: 22 })],
+          spacing: { after: 100 },
+        }));
+        children.push(new Paragraph({
+          children: [
+            new TextRun({ text: 'Materials: ', bold: true, size: 20 }),
+            new TextRun({ text: a.materials, size: 20 }),
+          ],
+          spacing: { after: 50 },
+        }));
+        children.push(new Paragraph({
+          children: [
+            new TextRun({ text: 'Learning Goal: ', bold: true, size: 20 }),
+            new TextRun({ text: a.learningGoal, size: 20 }),
+          ],
+          spacing: { after: 50 },
+        }));
+        children.push(new Paragraph({
+          children: [
+            new TextRun({ text: 'Scaling: ', bold: true, size: 20 }),
+            new TextRun({ text: a.scalingNotes, size: 20 }),
+          ],
+          spacing: { after: 100 },
+        }));
+
+        // Expanded guide if available
+        const detail = details[i];
+        if (detail) {
+          children.push(new Paragraph({
+            children: [new TextRun({ text: 'Step-by-Step Guide', bold: true, size: 22, underline: {} })],
+            spacing: { before: 150, after: 100 },
+          }));
+          detail.steps.forEach(s => {
+            children.push(new Paragraph({
+              children: [
+                new TextRun({ text: `[${s.timing}] `, bold: true, size: 20 }),
+                new TextRun({ text: s.instruction, size: 20 }),
+              ],
+              spacing: { after: 30 },
+              indent: { left: 360 },
+            }));
+            if (s.studentAction) {
+              children.push(new Paragraph({
+                children: [new TextRun({ text: `Students: ${s.studentAction}`, italics: true, color: '666666', size: 18 })],
+                indent: { left: 720 },
+                spacing: { after: 80 },
+              }));
+            }
+          });
+          if (detail.facilitationTips.length > 0) {
+            children.push(new Paragraph({
+              children: [new TextRun({ text: 'Facilitation Tips', bold: true, size: 20 })],
+              spacing: { before: 100, after: 50 },
+            }));
+            detail.facilitationTips.forEach(t => {
+              children.push(new Paragraph({
+                children: [new TextRun({ text: `• ${t}`, size: 20 })],
+                indent: { left: 360 },
+                spacing: { after: 30 },
+              }));
+            });
+          }
+          if (detail.commonPitfalls.length > 0) {
+            children.push(new Paragraph({
+              children: [new TextRun({ text: 'Common Pitfalls', bold: true, size: 20 })],
+              spacing: { before: 100, after: 50 },
+            }));
+            detail.commonPitfalls.forEach(p => {
+              children.push(new Paragraph({
+                children: [new TextRun({ text: `• ${p}`, size: 20 })],
+                indent: { left: 360 },
+                spacing: { after: 30 },
+              }));
+            });
+          }
+          children.push(new Paragraph({
+            children: [
+              new TextRun({ text: 'Debrief: ', bold: true, size: 20 }),
+              new TextRun({ text: detail.debriefGuide, size: 20 }),
+            ],
+            spacing: { before: 100, after: 100 },
+          }));
+        }
+      });
+    }
+
+    // Footer
+    children.push(new Paragraph({
+      children: [new TextRun({ text: `Generated by ClassBuild`, italics: true, color: '999999', size: 18 })],
+      alignment: AlignmentType.CENTER,
+      spacing: { before: 600 },
+    }));
+
+    const doc = new Document({ sections: [{ children }] });
+    const blob = await Packer.toBlob(doc);
     downloadFile(blob, `teaching-resources-${chapterNum}-${sanitizeFilename(chapter.title)}.docx`, 'application/vnd.openxmlformats-officedocument.wordprocessingml.document');
   }, [chapters, syllabus]);
 
   const buildCurriculumMapCsv = useCallback(() => {
     if (!curriculumMap || !syllabus) return null;
-    const chapterNums = syllabus.chapters.map((ch) => ch.number);
-    const header = ['Bloom Level', 'Learning Objective', ...chapterNums.map((n) => `Ch ${n}`)];
-    const rows = curriculumMap.objectives.map((obj) => {
-      const cells = chapterNums.map((n) => {
-        const level = obj.alignments[n];
-        if (!level) return '';
-        return level === 'introduced' ? 'I' : level === 'developed' ? 'D' : 'M';
-      });
-      // Escape quotes in objective text for CSV
-      const escapedText = obj.text.includes(',') || obj.text.includes('"')
-        ? `"${obj.text.replace(/"/g, '""')}"`
-        : obj.text;
-      return [obj.bloomLevel, escapedText, ...cells];
-    });
-    return [header, ...rows].map((r) => r.join(',')).join('\n');
+    return buildOutcomesCsv(curriculumMap, syllabus);
   }, [curriculumMap, syllabus]);
 
-  const handleDownloadCurriculumMap = useCallback(() => {
+  const handleDownloadImscc = useCallback(async (renderMissingSlides = false) => {
+    if (!syllabus || chapters.length === 0) return;
+    setShowImsccSlidesPrompt(false);
+    setIsExportingImscc(true);
+    try {
+      const { saveAs } = await import('file-saver');
+      const courseName = sanitizeFilename(syllabus.courseTitle) || 'course';
+
+      // When a Canvas template is active, build the cartridge on top of the
+      // template's existing structure so verbatim modules (Instructor Info,
+      // Begin Here, LTI links, web_resources) carry through untouched.
+      if (setup.templateId) {
+        const { useTemplateStore } = await import('../store/templateStore');
+        const tplState = useTemplateStore.getState();
+        const template = tplState.templates.find((t) => t.id === setup.templateId);
+        const templateBlob = template ? await tplState.getTemplateBlob(template.id) : null;
+        if (!template || !templateBlob) {
+          throw new Error(
+            'Selected template is missing its source .imscc — re-upload the template on the Canvas Templates page.',
+          );
+        }
+        const { assembleTemplateImscc } = await import(
+          '../services/template/templateImsccExporter'
+        );
+        const blob = await assembleTemplateImscc({
+          syllabus,
+          chapters,
+          template,
+          templateBlob,
+          outlineFields,
+        });
+        saveAs(blob, `${courseName}.imscc`);
+      } else {
+        const { assembleImscc } = await import('../services/export/imsccExporter');
+        // Slide decks are image-driven and rendered images aren't kept across
+        // reloads, so rendering them is an explicit, user-confirmed spend.
+        const ui = useUiStore.getState();
+        if (renderMissingSlides && ui.slidesRender) {
+          throw new Error(
+            `Another deck (Class ${ui.slidesRender.chapterNum}) is rendering. Wait for it to finish.`,
+          );
+        }
+        try {
+          const blob = await assembleImscc(syllabus, chapters, {
+            themeId: setup.themeId,
+            openaiApiKey,
+            renderMissingSlides,
+            onSlideRendered: (chapterNum, i, dataUri) => setSlideImage(chapterNum, i, dataUri),
+            onSlideProgress: (chapterNum, current, total, phase) => {
+              if (renderMissingSlides) {
+                useUiStore.getState().setSlidesRender({
+                  chapterNum,
+                  current,
+                  total,
+                  phase: phase as 'rendering' | 'packing',
+                });
+              }
+            },
+            curriculumCsv: buildCurriculumMapCsv() ?? undefined,
+          });
+          saveAs(blob, `${courseName}.imscc`);
+        } finally {
+          if (renderMissingSlides) useUiStore.getState().setSlidesRender(null);
+        }
+      }
+    } catch (err) {
+      setError(friendlyError(err, 'Common Cartridge export failed.'));
+    } finally {
+      setIsExportingImscc(false);
+    }
+  }, [syllabus, chapters, setup.themeId, setup.templateId, outlineFields, openaiApiKey, setSlideImage, buildCurriculumMapCsv, setError]);
+
+  // Decks that would need image rendering before they can go in a cartridge.
+  // (Template-mode cartridges don't bundle decks, so no prompt there.)
+  const imsccUnrenderedImages = setup.templateId
+    ? 0
+    : chapters.reduce(
+        (n, ch) =>
+          n +
+          (ch.slidesJson ?? []).filter((sl) => sl.imagePrompt?.trim() && !sl.imageDataUri).length,
+        0,
+      );
+  const imsccDeckChapters = chapters.filter((ch) =>
+    (ch.slidesJson ?? []).some((sl) => sl.imagePrompt?.trim() && !sl.imageDataUri),
+  ).length;
+
+  const handleImsccClick = useCallback(() => {
+    if (imsccUnrenderedImages > 0) setShowImsccSlidesPrompt(true);
+    else void handleDownloadImscc(false);
+  }, [imsccUnrenderedImages, handleDownloadImscc]);
+
+  const handleDownloadOutcomesCsv = useCallback(() => {
     const csv = buildCurriculumMapCsv();
-    if (!csv) return;
-    downloadFile(csv, 'curriculum-alignment-matrix.csv', 'text/csv');
-  }, [buildCurriculumMapCsv]);
+    if (!csv || !syllabus) return;
+    const name = sanitizeFilename(syllabus.courseTitle) || 'course';
+    downloadFile(csv, `${name}-learning-outcomes.csv`, 'text/csv');
+  }, [buildCurriculumMapCsv, syllabus]);
+
+  const handleDownloadOutcomesHtml = useCallback(() => {
+    if (!curriculumMap || !syllabus) return;
+    const html = buildOutcomesPage(curriculumMap, syllabus, setup.themeId);
+    const name = sanitizeFilename(syllabus.courseTitle) || 'course';
+    downloadFile(html, `${name}-learning-outcomes.html`);
+  }, [curriculumMap, syllabus, setup.themeId]);
+
+  // ── Learning outcomes: generation flow ──────────────────────────────
+
+  const currentSyllabusHash = useMemo(
+    () => (syllabus ? hashSyllabus(syllabus) : null),
+    [syllabus],
+  );
+  const outcomesStale =
+    !!curriculumMap &&
+    !!currentSyllabusHash &&
+    !!curriculumMap.syllabusHash &&
+    curriculumMap.syllabusHash !== currentSyllabusHash;
+
+  const generateLearningOutcomes = useCallback(async () => {
+    if (!syllabus || !claudeApiKey || isGeneratingOutcomes) return;
+    setIsGeneratingOutcomes(true);
+    setOutcomesError(null);
+    outcomesStreamRef.current = '';
+    setOutcomesStreamChars(0);
+    try {
+      const text = await streamMessage(
+        {
+          apiKey: claudeApiKey,
+          model: MODELS.haiku,
+          system: buildLearningObjectivesPrompt(),
+          messages: [
+            { role: 'user', content: buildLearningObjectivesUserPrompt(syllabus) },
+          ],
+          maxTokens: 6000,
+        },
+        {
+          onText: (delta) => {
+            outcomesStreamRef.current += delta;
+            setOutcomesStreamChars(outcomesStreamRef.current.length);
+          },
+        },
+      );
+      const map = parseCurriculumMapResponse(text);
+      if (!map) {
+        setOutcomesError(
+          'The model returned an unparseable response. Try regenerating.',
+        );
+        return;
+      }
+      map.syllabusHash = currentSyllabusHash ?? undefined;
+      setCurriculumMap(map);
+    } catch (err) {
+      setOutcomesError(friendlyError(err, 'Learning outcomes generation failed.'));
+    } finally {
+      setIsGeneratingOutcomes(false);
+    }
+  }, [
+    syllabus,
+    claudeApiKey,
+    isGeneratingOutcomes,
+    currentSyllabusHash,
+    setCurriculumMap,
+  ]);
 
   // --- Generate a single chapter from export page ---
 
@@ -192,7 +592,7 @@ export function ExportPage() {
           apiKey: claudeApiKey,
           model: MODELS.opus,
           system: buildChapterPrompt(setup.themeId),
-          messages: [{ role: 'user', content: buildChapterUserPrompt(syllabus.courseTitle, ch, setup.chapterLength, researchSources) }],
+          messages: [{ role: 'user', content: buildChapterUserPrompt(syllabus.courseTitle, ch, setup.chapterLength, { educationLevel: setup.educationLevel, priorKnowledge: setup.priorKnowledge, learnerNotes: setup.learnerNotes }, researchSources) }],
           thinkingBudget: 'high',
           maxTokens: 16000,
         },
@@ -268,6 +668,238 @@ export function ExportPage() {
     }
   }, [syllabus, chapters, claudeApiKey, researchDossiers, setup.chapterLength, addChapter, updateChapter, isGenerating, setIsGenerating, setError]);
 
+  // --- Per-class bundle ---
+  //
+  // Single-class ZIP with everything generated for that one chapter: reading,
+  // quizzes, slides (rendered PPTX if cached, JSON fallback otherwise), audio
+  // MP3 (fetched from the blob URL while the page is still open), teaching
+  // pack DOCX, transcript text. Smaller than the full-course ZIP, faster, and
+  // sufficient for an instructor who just wants today's class.
+
+  const handleDownloadClassBundle = useCallback(async (chapterNum: number) => {
+    const chapter = chapters.find((c) => c.number === chapterNum);
+    if (!chapter || !syllabus) return;
+
+    const { default: JSZip } = await import('jszip');
+    const { saveAs } = await import('file-saver');
+
+    const chapterName = sanitizeFilename(chapter.title);
+    const folderName = `class-${String(chapterNum).padStart(2, '0')}-${chapterName}`;
+    const zip = new JSZip();
+    const root = zip.folder(folderName);
+    if (!root) return;
+
+    // 1. Reading
+    root.file(
+      `reading.html`,
+      renderChapterHtml(chapter.htmlContent, setup.themeId, chapter.title),
+    );
+
+    // 2. Practice quiz
+    if (chapter.practiceQuizData) {
+      try {
+        const { buildQuizHtml } = await import('../templates/quizTemplate');
+        root.file(
+          `practice-quiz.html`,
+          buildQuizHtml(
+            `${chapter.title} — Practice Quiz`,
+            chapter.practiceQuizData,
+            syllabus.courseTitle,
+            setup.themeId,
+          ),
+        );
+      } catch {
+        root.file(`practice-quiz.txt`, chapter.practiceQuizData);
+      }
+    }
+
+    // 3. In-class quiz pack (5 shuffled versions + answer key)
+    if (chapter.inClassQuizData && chapter.inClassQuizData.length > 0) {
+      try {
+        const { generateQuizDocPackage } = await import('../services/export/quizDocExporter');
+        const quizZip = await generateQuizDocPackage(
+          chapter.inClassQuizData,
+          syllabus.courseTitle,
+          chapter.title,
+        );
+        root.file(`in-class-quiz-pack.zip`, quizZip);
+      } catch {
+        root.file(`in-class-quiz.json`, JSON.stringify(chapter.inClassQuizData, null, 2));
+      }
+    }
+
+    // 4. Weekly challenge — themed HTML + SCORM bundle for LMS upload
+    if (chapter.weeklyChallengeData) {
+      try {
+        const { buildWeeklyChallengeHtml } = await import('../templates/weeklyChallengeTemplate');
+        const challengeHtml = buildWeeklyChallengeHtml(
+          `Week ${chapterNum} Challenge — ${chapter.title}`,
+          chapter.weeklyChallengeData,
+          syllabus.courseTitle,
+          setup.themeId,
+        );
+        root.file(`weekly-challenge.html`, challengeHtml);
+
+        // SCORM wrapper for direct LMS import.
+        const launchFile = `weekly-challenge.html`;
+        const escXml = (s: string) =>
+          s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+        const title = `Week ${chapterNum} Challenge — ${chapter.title}`;
+        const manifest = `<?xml version="1.0" encoding="UTF-8"?>\n<manifest identifier="classbuild-scorm-pkg" version="1.0" xmlns="http://www.imsglobal.org/xsd/imscp_v1p1" xmlns:adlcp="http://www.adlnet.org/xsd/adlcp_v1p3" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"><metadata><schema>ADL SCORM</schema><schemaversion>2004 4th Edition</schemaversion></metadata><organizations default="org-1"><organization identifier="org-1"><title>${escXml(title)}</title><item identifier="item-1" identifierref="res-1"><title>${escXml(title)}</title></item></organization></organizations><resources><resource identifier="res-1" type="webcontent" adlcp:scormType="sco" href="${escXml(launchFile)}"><file href="${escXml(launchFile)}" /></resource></resources></manifest>`;
+        const scormZip = new JSZip();
+        scormZip.file('imsmanifest.xml', manifest);
+        scormZip.file(launchFile, challengeHtml);
+        const scormBlob = await scormZip.generateAsync({ type: 'blob', compression: 'DEFLATE' });
+        root.file(`weekly-challenge-scorm.zip`, scormBlob);
+      } catch {
+        root.file(`weekly-challenge.json`, JSON.stringify(chapter.weeklyChallengeData, null, 2));
+      }
+    }
+
+    // 5. Slides — render PPTX if OpenAI key + slides exist; otherwise JSON
+    if (chapter.slidesJson && openaiApiKey) {
+      try {
+        useUiStore.getState().setSlidesRender({
+          chapterNum: chapter.number,
+          current: 0,
+          total: chapter.slidesJson.length,
+          phase: 'rendering',
+        });
+        const { generatePptx } = await import('../services/export/pptxExporter');
+        const { blob: pptxBlob } = await generatePptx(
+          chapter.slidesJson,
+          syllabus.courseTitle,
+          chapter.title,
+          setup.themeId,
+          openaiApiKey,
+          {
+            imageQuality: 'high',
+            imageSize: '3840x2160',
+            onProgress: (current, total, phase) =>
+              useUiStore.getState().setSlidesRender({
+                chapterNum: chapter.number,
+                current,
+                total,
+                phase,
+              }),
+            onSlideRendered: (i, dataUri) => setSlideImage(chapter.number, i, dataUri),
+            preRendered: Object.fromEntries(
+              chapter.slidesJson
+                .map((s, i) => (s.imageDataUri ? [i, s.imageDataUri] : null))
+                .filter((x): x is [number, string] => x !== null),
+            ),
+          },
+        );
+        root.file(`slides.pptx`, pptxBlob);
+      } catch {
+        root.file(`slides.json`, JSON.stringify(chapter.slidesJson, null, 2));
+      } finally {
+        useUiStore.getState().setSlidesRender(null);
+      }
+    } else if (chapter.slidesJson) {
+      root.file(`slides.json`, JSON.stringify(chapter.slidesJson, null, 2));
+    }
+
+    // 6. Audio — fetch the blob URL while the page is still open (it dies on
+    //    reload, so this is the only chance to capture it into the ZIP).
+    const chapterAudio = chapter.audioUrl ?? chapter.audioDataUri;
+    if (chapterAudio) {
+      try {
+        const audioBlob = await fetch(chapterAudio).then((r) => r.blob());
+        root.file(`audiobook.mp3`, audioBlob);
+      } catch {
+        /* blob fetch failed — skip */
+      }
+    }
+    if (chapter.audioTranscript) {
+      root.file(`audio-transcript.txt`, chapter.audioTranscript);
+    }
+
+    // 7. Teaching pack DOCX (discussion + activities)
+    const discussions = chapter.discussionData || [];
+    const activities = chapter.activityData || [];
+    if (discussions.length > 0 || activities.length > 0) {
+      try {
+        // Re-use the same code path as the per-chip Teaching download, but
+        // capture the generated DOCX blob instead of triggering a download.
+        await (async () => {
+          const { Document, Packer, Paragraph, TextRun, HeadingLevel } = await import('docx');
+          const details = chapter.activityDetails || {};
+          const children: InstanceType<typeof Paragraph>[] = [];
+          children.push(new Paragraph({
+            children: [new TextRun({ text: `Teaching Resources — ${chapter.title}`, bold: true, size: 32 })],
+            heading: HeadingLevel.HEADING_1,
+            spacing: { after: 200 },
+          }));
+          children.push(new Paragraph({
+            children: [new TextRun({ text: syllabus.courseTitle, italics: true, color: '666666', size: 22 })],
+            spacing: { after: 400 },
+          }));
+          if (discussions.length > 0) {
+            children.push(new Paragraph({
+              children: [new TextRun({ text: 'Conversation Starters', bold: true, size: 28 })],
+              heading: HeadingLevel.HEADING_2,
+              spacing: { before: 300, after: 200 },
+            }));
+            discussions.forEach((d, i) => {
+              children.push(new Paragraph({
+                children: [
+                  new TextRun({ text: `${i + 1}. `, bold: true, size: 22 }),
+                  new TextRun({ text: `[${d.hook}] `, bold: true, color: '8b5cf6', size: 22 }),
+                  new TextRun({ text: d.prompt, size: 22 }),
+                ],
+                spacing: { after: 150 },
+              }));
+            });
+          }
+          if (activities.length > 0) {
+            children.push(new Paragraph({
+              children: [new TextRun({ text: 'In-Class Activities', bold: true, size: 28 })],
+              heading: HeadingLevel.HEADING_2,
+              spacing: { before: 400, after: 200 },
+            }));
+            activities.forEach((a, i) => {
+              children.push(new Paragraph({
+                children: [
+                  new TextRun({ text: `${a.title}`, bold: true, size: 24 }),
+                  new TextRun({ text: `  (${a.duration})`, color: '888888', size: 20 }),
+                ],
+                heading: HeadingLevel.HEADING_3,
+                spacing: { before: 300, after: 100 },
+              }));
+              children.push(new Paragraph({ children: [new TextRun({ text: a.description, size: 22 })], spacing: { after: 100 } }));
+              children.push(new Paragraph({ children: [new TextRun({ text: 'Materials: ', bold: true, size: 20 }), new TextRun({ text: a.materials, size: 20 })], spacing: { after: 50 } }));
+              children.push(new Paragraph({ children: [new TextRun({ text: 'Learning Goal: ', bold: true, size: 20 }), new TextRun({ text: a.learningGoal, size: 20 })], spacing: { after: 50 } }));
+              children.push(new Paragraph({ children: [new TextRun({ text: 'Scaling: ', bold: true, size: 20 }), new TextRun({ text: a.scalingNotes, size: 20 })], spacing: { after: 100 } }));
+              const detail = details[i];
+              if (detail) {
+                children.push(new Paragraph({ children: [new TextRun({ text: 'Step-by-Step Guide', bold: true, size: 22, underline: {} })], spacing: { before: 150, after: 100 } }));
+                detail.steps.forEach((s) => {
+                  children.push(new Paragraph({ children: [new TextRun({ text: `[${s.timing}] `, bold: true, size: 20 }), new TextRun({ text: s.instruction, size: 20 })], spacing: { after: 50 } }));
+                  if (s.studentAction) {
+                    children.push(new Paragraph({ children: [new TextRun({ text: `→ Students: ${s.studentAction}`, italics: true, color: '666666', size: 20 })], spacing: { after: 50 } }));
+                  }
+                });
+              }
+            });
+          }
+          const doc = new Document({ sections: [{ children }] });
+          const docxBlob = await Packer.toBlob(doc);
+          root.file(`teaching-pack.docx`, docxBlob);
+        })();
+      } catch {
+        /* docx build failed — skip */
+      }
+    }
+
+    // 8. README — short index file so anyone unzipping understands what's inside.
+    const readme = buildClassReadme(chapter, syllabus.courseTitle, chapterNum);
+    root.file(`README.txt`, readme);
+
+    const blob = await zip.generateAsync({ type: 'blob' });
+    saveAs(blob, `${folderName}.zip`);
+  }, [chapters, syllabus, setup.themeId, openaiApiKey, setSlideImage]);
+
   // --- Download All ---
 
   const handleDownloadAll = useCallback(async () => {
@@ -281,7 +913,10 @@ export function ExportPage() {
     for (const chapter of chapters) {
       const chapterName = sanitizeFilename(chapter.title);
 
-      courseFolder?.file(`chapter-${chapter.number}-${chapterName}.html`, chapter.htmlContent);
+      courseFolder?.file(
+        `chapter-${chapter.number}-${chapterName}.html`,
+        renderChapterHtml(chapter.htmlContent, setup.themeId, chapter.title),
+      );
 
       if (chapter.practiceQuizData && syllabus) {
         try {
@@ -313,45 +948,79 @@ export function ExportPage() {
         }
       }
 
-      if (chapter.slidesJson && syllabus) {
+      if (chapter.slidesJson && syllabus && openaiApiKey) {
+        // For the Download-All flow we render each chapter's deck in turn,
+        // gated by the same global slidesRender mutex so a previously-
+        // initiated single-chapter render can't collide with this loop.
         try {
+          useUiStore.getState().setSlidesRender({
+            chapterNum: chapter.number,
+            current: 0,
+            total: chapter.slidesJson.length,
+            phase: 'rendering',
+          });
           const { generatePptx } = await import('../services/export/pptxExporter');
-          const pptxBlob = await generatePptx(chapter.slidesJson, syllabus.courseTitle, chapter.title, setup.themeId);
+          const { blob: pptxBlob } = await generatePptx(
+            chapter.slidesJson,
+            syllabus.courseTitle,
+            chapter.title,
+            setup.themeId,
+            openaiApiKey,
+            {
+              imageQuality: 'high',
+              imageSize: '3840x2160',
+              onProgress: (current, total, phase) =>
+                useUiStore.getState().setSlidesRender({
+                  chapterNum: chapter.number,
+                  current,
+                  total,
+                  phase,
+                }),
+              onSlideRendered: (i, dataUri) =>
+                setSlideImage(chapter.number, i, dataUri),
+              preRendered: Object.fromEntries(
+                chapter.slidesJson
+                  .map((s, i) => (s.imageDataUri ? [i, s.imageDataUri] : null))
+                  .filter((x): x is [number, string] => x !== null),
+              ),
+            },
+          );
           courseFolder?.file(`slides-${chapter.number}-${chapterName}.pptx`, pptxBlob);
         } catch {
           courseFolder?.file(`slides-${chapter.number}-${chapterName}.json`, JSON.stringify(chapter.slidesJson, null, 2));
+        } finally {
+          useUiStore.getState().setSlidesRender(null);
         }
+      } else if (chapter.slidesJson) {
+        // No OpenAI key — fall back to JSON only.
+        courseFolder?.file(`slides-${chapter.number}-${chapterName}.json`, JSON.stringify(chapter.slidesJson, null, 2));
       }
 
       // Audio blob URLs can't be included in ZIP (lost on reload), skip audio in ZIP
-
-      if (chapter.infographicDataUri) {
-        // Convert data URI to binary for ZIP
-        const base64Match = chapter.infographicDataUri.match(/^data:[^;]+;base64,(.+)$/);
-        if (base64Match) {
-          courseFolder?.file(`infographic-${chapter.number}-${chapterName}.jpg`, base64Match[1], { base64: true });
-        }
-      }
     }
 
-    // Curriculum alignment matrix CSV
+    // Learning outcomes — both CSV (re-import) and themed HTML (read).
     const csv = buildCurriculumMapCsv();
     if (csv) {
-      courseFolder?.file('curriculum-alignment-matrix.csv', csv);
+      courseFolder?.file('learning-outcomes.csv', csv);
+    }
+    if (curriculumMap && syllabus) {
+      const outcomesHtml = buildOutcomesPage(curriculumMap, syllabus, setup.themeId);
+      courseFolder?.file('learning-outcomes.html', outcomesHtml);
     }
 
     const blob = await zip.generateAsync({ type: 'blob' });
     saveAs(blob, `${courseName}.zip`);
-  }, [syllabus, chapters, setup.themeId, buildCurriculumMapCsv]);
+  }, [syllabus, chapters, setup.themeId, buildCurriculumMapCsv, curriculumMap]);
 
   const handlePublish = useCallback(async () => {
     if (!syllabus || chapters.length === 0) return;
     setIsPublishing(true);
     try {
-      const { assemblePublishHtml } = await import('../services/export/publishExporter');
-      const html = await assemblePublishHtml(syllabus, chapters, setup.themeId);
+      const { assemblePublishSite } = await import('../services/export/publishExporter');
+      const blob = await assemblePublishSite(syllabus, chapters, setup.themeId);
       const courseName = sanitizeFilename(syllabus.courseTitle) || 'course';
-      downloadFile(html, `${courseName}-published.html`);
+      downloadFile(blob, `${courseName}-site.zip`, 'application/zip');
     } catch (err) {
       setError(friendlyError(err, 'Publish failed.'));
     } finally {
@@ -359,59 +1028,34 @@ export function ExportPage() {
     }
   }, [syllabus, chapters, setup.themeId, setError]);
 
-  const [isExportingImscc, setIsExportingImscc] = useState(false);
-  const handleDownloadImscc = useCallback(async () => {
-    if (!syllabus || chapters.length === 0) return;
-    setIsExportingImscc(true);
-    try {
-      const { saveAs } = await import('file-saver');
-      const courseName = sanitizeFilename(syllabus.courseTitle) || 'course';
+  // --- Project file (backup/restore) ---
+  //
+  // A portable snapshot of the whole course — re-opened from the landing
+  // page's "Restore a project file" affordance. API keys are never included.
 
-      // When a Canvas template is active, build the cartridge on top of the
-      // template's existing structure so verbatim modules (Instructor Info,
-      // Begin Here, LTI links, web_resources) carry through untouched.
-      if (setup.templateId) {
-        const { useTemplateStore } = await import('../store/templateStore');
-        const tplState = useTemplateStore.getState();
-        const template = tplState.templates.find((t) => t.id === setup.templateId);
-        const templateBlob = template ? await tplState.getTemplateBlob(template.id) : null;
-        if (!template || !templateBlob) {
-          throw new Error(
-            'Selected template is missing its source .imscc — re-upload the template on the Canvas Templates page.',
-          );
-        }
-        const { assembleTemplateImscc } = await import(
-          '../services/template/templateImsccExporter'
-        );
-        const blob = await assembleTemplateImscc({
-          syllabus,
-          chapters,
-          template,
-          templateBlob,
-          outlineFields,
-        });
-        saveAs(blob, `${courseName}.imscc`);
-      } else {
-        const { assembleImscc } = await import('../services/export/imsccExporter');
-        const blob = await assembleImscc(syllabus, chapters, {
-          themeId: setup.themeId,
-          curriculumCsv: buildCurriculumMapCsv() ?? undefined,
-        });
-        saveAs(blob, `${courseName}.imscc`);
-      }
-    } catch (err) {
-      setError(friendlyError(err, 'Common Cartridge export failed.'));
-    } finally {
-      setIsExportingImscc(false);
-    }
-  }, [syllabus, chapters, setup.themeId, setup.templateId, outlineFields, buildCurriculumMapCsv, setError]);
+  const handleDownloadProjectFile = useCallback(() => {
+    const name = sanitizeFilename(syllabus?.courseTitle ?? '') || 'course';
+    downloadFile(buildProjectFile(), `${name}.classbuild.json`, 'application/json');
+  }, [syllabus]);
 
   // --- Derived data ---
 
   if (!syllabus) {
     return (
-      <div className="text-center py-20">
-        <p className="text-text-secondary">No course data available.</p>
+      <div
+        style={{
+          maxWidth: 720,
+          margin: '0 auto',
+          padding: '80px 24px',
+          fontFamily: 'var(--font-cb-serif)',
+          color: 'var(--cb-text-muted)',
+          textAlign: 'center',
+          fontStyle: 'italic',
+          fontSize: 18,
+          lineHeight: 1.5,
+        }}
+      >
+        No course in progress. Start one from <a style={{ color: 'var(--cb-accent-emphasis)' }} href="/setup">Setup</a>.
       </div>
     );
   }
@@ -421,7 +1065,7 @@ export function ExportPage() {
   const allReady = readyCount === totalChapters;
 
   // Count downloadable files per chapter and totals
-  const FILES_PER_CHAPTER = 8; // HTML, practice quiz, in-class quiz, weekly challenge, slides, audio, teaching resources, infographic
+  const FILES_PER_CHAPTER = 7; // HTML, practice quiz, in-class quiz, weekly challenge, slides, audio, teaching resources
   const totalPossibleFiles = totalChapters * FILES_PER_CHAPTER;
 
   function countFiles(c: typeof chapters[number]): number {
@@ -430,346 +1074,858 @@ export function ExportPage() {
     if (c.inClassQuizData && c.inClassQuizData.length > 0) n++;
     if (c.weeklyChallengeData) n++;
     if (c.slidesJson) n++;
-    if (c.audioUrl) n++;
+    if (c.audioUrl || c.audioDataUri) n++;
     if ((c.discussionData && c.discussionData.length > 0) || (c.activityData && c.activityData.length > 0)) n++;
-    if (c.infographicDataUri) n++;
     return n;
   }
 
   const fileCount = chapters.reduce((acc, c) => acc + countFiles(c), 0);
 
+  const progressPct = totalPossibleFiles === 0 ? 0 : (fileCount / totalPossibleFiles) * 100;
+
   return (
     <motion.div
       initial={{ opacity: 0 }}
       animate={{ opacity: 1 }}
-      className="max-w-5xl mx-auto py-8"
+      style={{
+        fontFamily: 'var(--font-cb-serif)',
+        color: 'var(--cb-text-default)',
+        padding: '32px 0 56px',
+      }}
     >
-      {/* Header */}
-      <div className="flex items-start justify-between mb-8">
-        <div>
-          <h1 className="text-3xl font-bold mb-2">Export Course</h1>
-          <p className="text-text-secondary">{syllabus.courseTitle}</p>
-        </div>
-        <div className="flex gap-3">
-          <Button
-            variant="secondary"
-            onClick={handlePublish}
-            disabled={chapters.length === 0 || isPublishing}
-            isLoading={isPublishing}
+      <div style={{ maxWidth: 1180, margin: '0 auto' }}>
+        {/* ── EDITORIAL HEADER ─────────────────────────────────── */}
+        <header style={{ marginBottom: 32 }}>
+          <div
+            className="cb-sc"
+            style={{
+              fontSize: 13,
+              letterSpacing: '0.16em',
+              color: 'var(--cb-accent-emphasis)',
+            }}
+          >
+            Stage 5 · Export
+          </div>
+          <h1
+            className="cb-italic"
+            style={{
+              margin: '8px 0 10px',
+              fontSize: 46,
+              fontWeight: 500,
+              lineHeight: 1.05,
+              letterSpacing: '-0.01em',
+              fontVariationSettings: '"opsz" 36',
+              color: 'var(--cb-text-default)',
+              maxWidth: '20ch',
+            }}
+          >
+            {syllabus.courseTitle}
+          </h1>
+          <p
+            className="cb-italic"
+            style={{
+              margin: '0 0 24px',
+              fontSize: 18,
+              lineHeight: 1.5,
+              color: 'var(--cb-text-muted)',
+              maxWidth: 640,
+            }}
           >
-            <svg className="mr-2 w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-              <path d="M12 2L2 7l10 5 10-5-10-5z" />
-              <path d="M2 17l10 5 10-5" />
-              <path d="M2 12l10 5 10-5" />
-            </svg>
-            Publish Course
-          </Button>
-          <Button onClick={handleDownloadAll} disabled={chapters.length === 0 || isGenerating}>
-            <svg className="mr-2 w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-              <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
-              <polyline points="7 10 12 15 17 10" />
-              <line x1="12" y1="15" x2="12" y2="3" />
-            </svg>
             {allReady
-              ? `Download All (ZIP)`
-              : `Download ${readyCount} of ${totalChapters} Classes (ZIP)`}
-          </Button>
-          <Button
-            variant="secondary"
-            onClick={handleDownloadImscc}
-            disabled={chapters.length === 0 || isExportingImscc}
-            isLoading={isExportingImscc}
+              ? `${totalChapters} chapters drafted · ${fileCount} of ${totalPossibleFiles} artifacts ready.`
+              : `${readyCount} of ${totalChapters} chapters drafted · ${fileCount} of ${totalPossibleFiles} artifacts ready.`}
+          </p>
+
+          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', alignItems: 'baseline' }}>
+            <Button
+              variant="primary"
+              size="lg"
+              onClick={handlePublish}
+              disabled={chapters.length === 0 || isPublishing}
+            >
+              {isPublishing ? 'Publishing…' : 'Publish · course site (.zip) →'}
+            </Button>
+            <Button
+              variant="secondary"
+              size="lg"
+              onClick={handleImsccClick}
+              disabled={chapters.length === 0 || isExportingImscc}
+              title="Common Cartridge — import directly into Canvas (Settings → Import Course Content)."
+            >
+              {isExportingImscc ? 'Building cartridge…' : 'Export for Canvas (.imscc) ↓'}
+            </Button>
+            <Button
+              variant="ghost"
+              size="lg"
+              onClick={handleDownloadAll}
+              disabled={chapters.length === 0 || isGenerating}
+            >
+              {allReady
+                ? 'Download all · ZIP ↓'
+                : `Download ${readyCount} of ${totalChapters} · ZIP ↓`}
+            </Button>
+            <Button
+              variant="ghost"
+              size="lg"
+              onClick={handleDownloadProjectFile}
+              title="Re-open this course on any machine. Keys are not included."
+            >
+              Project file ↓
+            </Button>
+          </div>
+        </header>
+
+        <CodexModal
+          open={showImsccSlidesPrompt}
+          onClose={() => setShowImsccSlidesPrompt(false)}
+          kicker="export for canvas"
+          title={
+            <>
+              Include the slide <span className="cb-italic">decks</span>?
+            </>
+          }
+          sub={
+            openaiApiKey
+              ? `${imsccDeckChapters} ${imsccDeckChapters === 1 ? 'chapter has' : 'chapters have'} slides that need ${imsccUnrenderedImages} image${imsccUnrenderedImages === 1 ? '' : 's'} rendered (gpt-image-2, 4K) before they can go in the cartridge. Rendered images aren't kept after a reload, so this uses your OpenAI credits each time. Or export now without the decks.`
+              : 'The slide decks are image-driven, and rendering them needs an OpenAI key. Add one in Setup to include decks, or export now without them.'
+          }
+          width={500}
+          actions={
+            <>
+              <span style={{ flex: 1 }} />
+              <Button variant="ghost" onClick={() => setShowImsccSlidesPrompt(false)}>
+                Cancel
+              </Button>
+              <Button variant="secondary" onClick={() => void handleDownloadImscc(false)}>
+                Export without decks
+              </Button>
+              {openaiApiKey && (
+                <Button variant="primary" onClick={() => void handleDownloadImscc(true)}>
+                  Render &amp; include decks →
+                </Button>
+              )}
+            </>
+          }
+        >
+          <></>
+        </CodexModal>
+
+        {/* ── ERROR BANNER ─────────────────────────────────────── */}
+        {error && (
+          <div
+            style={{
+              marginBottom: 24,
+              padding: '12px 18px',
+              borderLeft: '3px solid var(--cb-status-danger)',
+              background: 'var(--cb-status-danger-bg)',
+              color: 'var(--cb-status-danger)',
+              fontStyle: 'italic',
+              fontSize: 14,
+              lineHeight: 1.5,
+            }}
           >
-            <svg className="mr-2 w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-              <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" />
-              <polyline points="3.27 6.96 12 12.01 20.73 6.96" />
-              <line x1="12" y1="22.08" x2="12" y2="12" />
-            </svg>
-            Export for Canvas (.imscc)
-          </Button>
-        </div>
-      </div>
+            {error}
+          </div>
+        )}
 
-      {error && (
-        <div className="mb-6 p-4 rounded-lg bg-error/10 border border-error/20 text-error text-sm">{error}</div>
-      )}
+        {/* ── COURSE STYLE PICKER ─────────────────────────────── */}
+        <ThemePicker
+          selectedId={currentThemeId}
+          onSelect={(id) => updateSetup({ themeId: id })}
+        />
 
-      {/* Summary bar — files only */}
-      <div className="bg-bg-card border border-violet-500/10 rounded-xl p-5 mb-8">
-        <div className="flex items-center justify-between mb-3">
-          <span className="text-xs font-medium text-text-muted uppercase tracking-wider">Course Overview</span>
-          {!allReady && (
-            <span className="text-xs text-amber-400">{totalChapters - readyCount} class{totalChapters - readyCount > 1 ? 'es' : ''} not yet generated</span>
-          )}
-        </div>
-        <div className="flex items-center gap-6 flex-wrap">
-          <div className="flex items-center gap-2">
-            <div className="w-8 h-8 rounded-lg bg-violet-500/10 flex items-center justify-center text-violet-400 text-sm font-bold">{readyCount}</div>
-            <div className="text-xs"><span className="text-text-primary font-medium">Classes</span><span className="text-text-muted"> / {totalChapters}</span></div>
+        {/* ── PROGRESS STRIP ──────────────────────────────────── */}
+        <section style={{ marginBottom: 28 }}>
+          <div
+            style={{
+              display: 'flex',
+              alignItems: 'baseline',
+              justifyContent: 'space-between',
+              marginBottom: 10,
+            }}
+          >
+            <span
+              className="cb-sc"
+              style={{
+                fontSize: 13,
+                letterSpacing: '0.14em',
+                color: 'var(--cb-text-muted)',
+              }}
+            >
+              Course progress
+            </span>
+            <span
+              className="cb-mono"
+              style={{
+                fontSize: 12.5,
+                color: fileCount === totalPossibleFiles
+                  ? 'var(--cb-status-success)'
+                  : 'var(--cb-text-muted)',
+                letterSpacing: '0.04em',
+              }}
+            >
+              {fileCount === totalPossibleFiles
+                ? '✓ all artifacts ready'
+                : `${fileCount} of ${totalPossibleFiles} artifacts`}
+            </span>
           </div>
-          <div className="w-px h-6 bg-violet-500/10" />
-          <div className="flex items-center gap-2">
-            <div className="w-8 h-8 rounded-lg bg-violet-500/10 flex items-center justify-center text-violet-400 text-sm font-bold">{fileCount}</div>
-            <div className="text-xs"><span className="text-text-primary font-medium">Files</span><span className="text-text-muted"> / {totalPossibleFiles}</span></div>
+          <div
+            role="progressbar"
+            aria-valuenow={Math.round(progressPct)}
+            aria-valuemin={0}
+            aria-valuemax={100}
+            style={{
+              height: 2,
+              background: 'var(--cb-border-default)',
+              position: 'relative',
+              overflow: 'hidden',
+            }}
+          >
+            <div
+              style={{
+                position: 'absolute',
+                left: 0,
+                top: 0,
+                bottom: 0,
+                width: `${progressPct}%`,
+                background: 'var(--cb-accent-emphasis)',
+                transition: 'width 320ms cubic-bezier(0.32,0.04,0.32,1)',
+              }}
+            />
           </div>
-          {fileCount === totalPossibleFiles && (
-            <>
-              <div className="w-px h-6 bg-violet-500/10" />
-              <div className="flex items-center gap-1.5">
-                <svg className="w-4 h-4 text-success" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><polyline points="20 6 9 17 4 12" /></svg>
-                <span className="text-xs text-success font-medium">All files ready</span>
-              </div>
-            </>
-          )}
-        </div>
-      </div>
+        </section>
 
-      {/* Curriculum map export */}
-      {curriculumMap && (
-        <div className="bg-bg-card border border-violet-500/10 rounded-xl p-5 mb-8 flex items-center justify-between">
-          <div className="flex items-center gap-3">
-            <div className="w-8 h-8 rounded-lg bg-violet-500/10 flex items-center justify-center">
-              <svg className="w-4 h-4 text-violet-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                <rect x="3" y="3" width="7" height="7" rx="1" />
-                <rect x="14" y="3" width="7" height="7" rx="1" />
-                <rect x="3" y="14" width="7" height="7" rx="1" />
-                <rect x="14" y="14" width="7" height="7" rx="1" />
-              </svg>
-            </div>
-            <div>
-              <span className="text-sm font-medium text-text-primary">Curriculum Alignment Matrix</span>
-              <p className="text-xs text-text-muted">
-                {curriculumMap.objectives.length} learning objectives &middot; {syllabus.chapters.length} chapters
-              </p>
-            </div>
+        {/* ── CHAPTER INDEX ───────────────────────────────────── */}
+        <section style={{ marginBottom: 48 }}>
+          <div
+            className="cb-sc"
+            style={{
+              fontSize: 13,
+              letterSpacing: '0.14em',
+              color: 'var(--cb-text-muted)',
+              borderBottom: '0.5px solid var(--cb-border-rule)',
+              paddingBottom: 10,
+              marginBottom: 4,
+            }}
+          >
+            Chapters
           </div>
-          <Button size="sm" variant="secondary" onClick={handleDownloadCurriculumMap}>
-            <svg className="mr-1.5 w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-              <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
-              <polyline points="7 10 12 15 17 10" />
-              <line x1="12" y1="15" x2="12" y2="3" />
-            </svg>
-            Download CSV
-          </Button>
-        </div>
-      )}
 
-      {/* Chapter cards */}
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-        {syllabus.chapters.map((ch) => {
-          const generated = chapters.find(c => c.number === ch.number);
-          const isCurrentlyGenerating = generatingChapter === ch.number;
+          {syllabus.chapters.map((ch) => {
+            const generated = chapters.find((c) => c.number === ch.number);
+            const isCurrentlyGenerating = generatingChapter === ch.number;
+
+            if (!generated) {
+              return (
+                <ChapterRowEmpty
+                  key={ch.number}
+                  number={ch.number}
+                  title={ch.title}
+                  isGenerating={isGenerating}
+                  isCurrent={isCurrentlyGenerating}
+                  onGenerate={() => generateSingleChapter(ch.number)}
+                />
+              );
+            }
+
+            const chapterFileCount = countFiles(generated);
+            const isComplete = chapterFileCount === FILES_PER_CHAPTER;
 
-          if (!generated) {
-            // --- Not generated card ---
+            const artifacts: Array<{ label: string; onClick: () => void }> = [
+              { label: 'reading', onClick: () => handleDownloadChapter(ch.number) },
+            ];
+            if (generated.practiceQuizData) {
+              artifacts.push({
+                label: 'practice quiz',
+                onClick: () => handleDownloadQuiz(ch.number),
+              });
+            }
+            if (generated.inClassQuizData && generated.inClassQuizData.length > 0) {
+              artifacts.push({
+                label: 'in-class quiz',
+                onClick: () => handleDownloadInClassQuiz(ch.number),
+              });
+            }
+            if (generated.weeklyChallengeData) {
+              artifacts.push(
+                {
+                  label: 'weekly challenge',
+                  onClick: () => handleDownloadWeeklyChallenge(ch.number),
+                },
+                {
+                  label: 'challenge SCORM',
+                  onClick: () => handleDownloadWeeklyChallengeSCORM(ch.number),
+                },
+              );
+            }
+            if (generated.slidesJson) {
+              artifacts.push({
+                label: 'slides · pptx',
+                onClick: () => handleDownloadSlides(ch.number),
+              });
+            }
+            if (generated.audioUrl || generated.audioDataUri) {
+              artifacts.push({
+                label: 'audiobook · mp3',
+                onClick: () => handleDownloadAudio(ch.number),
+              });
+            }
+            if (
+              (generated.discussionData && generated.discussionData.length > 0) ||
+              (generated.activityData && generated.activityData.length > 0)
+            ) {
+              artifacts.push({
+                label: 'teaching · docx',
+                onClick: () => handleDownloadTeachingResources(ch.number),
+              });
+            }
             return (
-              <motion.div
+              <ChapterRow
                 key={ch.number}
-                initial={{ opacity: 0, y: 10 }}
-                animate={{ opacity: 1, y: 0 }}
-                transition={{ delay: ch.number * 0.03 }}
-                className="bg-bg-card border border-dashed border-violet-500/15 rounded-xl p-5 flex flex-col"
-              >
-                <div className="flex items-start justify-between mb-3">
-                  <span className="text-xs font-medium text-text-muted">Class {ch.number}</span>
-                </div>
-                <h3 className="text-sm font-semibold mb-4 line-clamp-2 text-text-muted">{ch.title}</h3>
-                <div className="mt-auto">
-                  {isCurrentlyGenerating ? (
-                    <div className="flex items-center gap-2 justify-center py-2">
-                      <motion.div
-                        className="w-2 h-2 rounded-full bg-violet-500"
-                        animate={{ scale: [1, 1.3, 1], opacity: [1, 0.5, 1] }}
-                        transition={{ duration: 1, repeat: Infinity }}
-                      />
-                      <span className="text-xs text-violet-400">Generating...</span>
-                    </div>
-                  ) : (
-                    <Button
-                      size="sm"
-                      className="w-full"
-                      disabled={isGenerating}
-                      onClick={() => generateSingleChapter(ch.number)}
-                    >
-                      <svg className="mr-1.5 w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                        <polygon points="5 3 19 12 5 21 5 3" />
-                      </svg>
-                      Generate Class
-                    </Button>
-                  )}
-                </div>
-              </motion.div>
+                number={ch.number}
+                title={ch.title}
+                isComplete={isComplete}
+                fileCount={chapterFileCount}
+                filesPerChapter={FILES_PER_CHAPTER}
+                artifacts={artifacts}
+                onDownloadAll={() => void handleDownloadClassBundle(ch.number)}
+              />
             );
-          }
+          })}
+        </section>
 
-          // --- Generated chapter card ---
-          const hasQuiz = !!generated.practiceQuizData;
-          const hasInClassQuiz = !!generated.inClassQuizData && generated.inClassQuizData.length > 0;
-          const hasWeeklyChallenge = !!generated.weeklyChallengeData;
-          const hasSlides = !!generated.slidesJson;
-          const hasAudio = !!generated.audioUrl;
-          const hasTeachingResources = (generated.discussionData && generated.discussionData.length > 0) || (generated.activityData && generated.activityData.length > 0);
-          const hasInfographic = !!generated.infographicDataUri;
-          const chapterFileCount = countFiles(generated);
-          const isComplete = chapterFileCount === FILES_PER_CHAPTER;
-
-          return (
-            <motion.div
-              key={ch.number}
-              initial={{ opacity: 0, y: 10 }}
-              animate={{ opacity: 1, y: 0 }}
-              transition={{ delay: ch.number * 0.03 }}
-              className="bg-bg-card border border-violet-500/20 rounded-xl p-5 flex flex-col"
-            >
-              <div className="flex items-start justify-between mb-3">
-                <span className="text-xs font-medium text-violet-400">Class {ch.number}</span>
-                {isComplete ? (
-                  <span className="px-2 py-0.5 text-xs rounded-full bg-success/10 text-success">Ready</span>
-                ) : (
-                  <span className="px-2 py-0.5 text-xs rounded-full bg-amber-500/10 text-amber-400">{chapterFileCount} / {FILES_PER_CHAPTER} files</span>
-                )}
-              </div>
-              <h3 className="text-sm font-semibold mb-4 line-clamp-2">{ch.title}</h3>
-
-              {/* Download links — only show available ones */}
-              <div className="space-y-1 mt-auto">
-                <DownloadRow
-                  label="Reading (.html)"
-                  icon={<DocIcon />}
-                  onClick={() => handleDownloadChapter(ch.number)}
-                />
-                {hasQuiz && (
-                  <DownloadRow
-                    label="Practice Quiz"
-                    icon={<QuizIcon />}
-                    onClick={() => handleDownloadQuiz(ch.number)}
-                  />
-                )}
-                {hasInClassQuiz && (
-                  <DownloadRow
-                    label="In-Class Quiz (.zip)"
-                    icon={<DocIcon />}
-                    onClick={() => handleDownloadInClassQuiz(ch.number)}
-                  />
-                )}
-                {hasWeeklyChallenge && (
-                  <DownloadRow
-                    label="Weekly Challenge (.html)"
-                    icon={<QuizIcon />}
-                    onClick={() => handleDownloadWeeklyChallenge(ch.number)}
-                  />
-                )}
-                {hasWeeklyChallenge && (
-                  <DownloadRow
-                    label="Weekly Challenge SCORM (.zip)"
-                    icon={<DocIcon />}
-                    onClick={() => handleDownloadWeeklyChallengeSCORM(ch.number)}
-                  />
-                )}
-                {hasSlides && (
-                  <DownloadRow
-                    label="Slides (.pptx)"
-                    icon={<SlidesIcon />}
-                    onClick={() => handleDownloadSlides(ch.number)}
-                  />
-                )}
-                {hasAudio && (
-                  <DownloadRow
-                    label="Audiobook (.mp3)"
-                    icon={<AudioIcon />}
-                    onClick={() => handleDownloadAudio(ch.number)}
-                  />
-                )}
-                {hasTeachingResources && (
-                  <DownloadRow
-                    label="Teaching Resources (.docx)"
-                    icon={<ResourcesIcon />}
-                    onClick={() => handleDownloadTeachingResources(ch.number)}
-                  />
-                )}
-                {hasInfographic && (
-                  <DownloadRow
-                    label="Infographic (.jpg)"
-                    icon={<DocIcon />}
-                    onClick={() => {
-                      const a = document.createElement('a');
-                      a.href = generated.infographicDataUri!;
-                      a.download = `infographic-${ch.number}-${sanitizeFilename(ch.title)}.jpg`;
-                      a.click();
-                    }}
-                  />
-                )}
-              </div>
-            </motion.div>
-          );
-        })}
+        {/* ── LEARNING OUTCOMES ────────────────────────────────── */}
+        <LearningOutcomesPanel
+          curriculumMap={curriculumMap}
+          syllabus={syllabus}
+          themeId={setup.themeId}
+          isGenerating={isGeneratingOutcomes}
+          streamChars={outcomesStreamChars}
+          error={outcomesError}
+          stale={outcomesStale}
+          onGenerate={() => void generateLearningOutcomes()}
+          onDownloadHtml={handleDownloadOutcomesHtml}
+          onDownloadCsv={handleDownloadOutcomesCsv}
+          canGenerate={!!claudeApiKey && !isGenerating}
+        />
+
+        <div className="cb-folio">— 05 —</div>
       </div>
     </motion.div>
   );
 }
 
-// --- Small download row component ---
+// ─── ChapterRow — generated class ────────────────────────────────────────
 
-function DownloadRow({ label, icon, onClick }: { label: string; icon: React.ReactNode; onClick: () => void }) {
+function ChapterRow({
+  number,
+  title,
+  isComplete,
+  fileCount,
+  filesPerChapter,
+  artifacts,
+  onDownloadAll,
+}: {
+  number: number;
+  title: string;
+  isComplete: boolean;
+  fileCount: number;
+  filesPerChapter: number;
+  artifacts: Array<{ label: string; onClick: () => void }>;
+  onDownloadAll?: () => void;
+}) {
   return (
-    <button
-      onClick={onClick}
-      className="w-full flex items-center gap-2 px-3 py-2 rounded-lg text-sm text-text-secondary hover:text-text-primary hover:bg-violet-500/5 transition-colors cursor-pointer text-left bg-transparent border-0"
+    <article
+      className="cb-artifact-row"
+      style={{
+        display: 'grid',
+        gridTemplateColumns: '90px 1fr auto',
+        alignItems: 'baseline',
+        gap: 20,
+        padding: '18px 0 16px',
+        borderBottom: '0.5px solid var(--cb-border-default)',
+      }}
     >
-      <span className="text-text-muted shrink-0">{icon}</span>
-      <span className="truncate">{label}</span>
-      <svg className="w-3.5 h-3.5 ml-auto text-text-muted shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
-        <polyline points="7 10 12 15 17 10" />
-        <line x1="12" y1="15" x2="12" y2="3" />
-      </svg>
-    </button>
-  );
-}
+      <span
+        className="cb-mono cb-sc"
+        style={{
+          fontSize: 11.5,
+          letterSpacing: '0.12em',
+          color: 'var(--cb-text-muted)',
+        }}
+      >
+        Class {String(number).padStart(2, '0')}
+      </span>
 
-// --- Icons ---
+      <div style={{ minWidth: 0 }}>
+        <h3
+          className="cb-italic"
+          style={{
+            margin: 0,
+            fontSize: 21,
+            fontWeight: 500,
+            lineHeight: 1.25,
+            color: 'var(--cb-text-default)',
+            fontVariationSettings: '"opsz" 18',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+          }}
+          title={title}
+        >
+          {title}
+        </h3>
 
-function DocIcon() {
-  return (
-    <svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-      <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
-      <polyline points="14 2 14 8 20 8" />
-    </svg>
+        <div
+          style={{
+            display: 'flex',
+            flexWrap: 'wrap',
+            gap: 6,
+            marginTop: 10,
+            alignItems: 'center',
+          }}
+        >
+          {onDownloadAll && <ClassBundleChip onClick={onDownloadAll} />}
+          {artifacts.map((a) => (
+            <ArtifactChip key={a.label} label={a.label} onClick={a.onClick} />
+          ))}
+        </div>
+      </div>
+
+      <span
+        className="cb-mono"
+        style={{
+          fontSize: 11,
+          letterSpacing: '0.06em',
+          color: isComplete
+            ? 'var(--cb-status-success)'
+            : 'var(--cb-text-muted)',
+          whiteSpace: 'nowrap',
+          alignSelf: 'start',
+          paddingTop: 4,
+        }}
+      >
+        {isComplete
+          ? '✓ ready'
+          : `${fileCount} of ${filesPerChapter}`}
+      </span>
+    </article>
   );
 }
 
-function QuizIcon() {
+// ─── ChapterRowEmpty — not yet generated ─────────────────────────────────
+
+function ChapterRowEmpty({
+  number,
+  title,
+  isGenerating,
+  isCurrent,
+  onGenerate,
+}: {
+  number: number;
+  title: string;
+  isGenerating: boolean;
+  isCurrent: boolean;
+  onGenerate: () => void;
+}) {
   return (
-    <svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-      <path d="M9 11l3 3L22 4" />
-      <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11" />
-    </svg>
+    <article
+      className="cb-artifact-row"
+      style={{
+        display: 'grid',
+        gridTemplateColumns: '90px 1fr auto',
+        alignItems: 'baseline',
+        gap: 20,
+        padding: '18px 0 16px',
+        borderBottom: '0.5px solid var(--cb-border-default)',
+        opacity: isCurrent ? 1 : 0.65,
+      }}
+    >
+      <span
+        className="cb-mono cb-sc"
+        style={{
+          fontSize: 11.5,
+          letterSpacing: '0.12em',
+          color: 'var(--cb-text-muted)',
+        }}
+      >
+        Class {String(number).padStart(2, '0')}
+      </span>
+
+      <h3
+        className="cb-italic"
+        style={{
+          margin: 0,
+          fontSize: 21,
+          fontWeight: 500,
+          lineHeight: 1.25,
+          color: 'var(--cb-text-muted)',
+          fontVariationSettings: '"opsz" 18',
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+          whiteSpace: 'nowrap',
+        }}
+        title={title}
+      >
+        {title}
+      </h3>
+
+      {isCurrent ? (
+        <span
+          className="cb-italic"
+          style={{
+            fontSize: 13,
+            color: 'var(--cb-accent-emphasis)',
+            whiteSpace: 'nowrap',
+          }}
+        >
+          drafting…
+        </span>
+      ) : (
+        <Button
+          size="sm"
+          variant="ghost"
+          onClick={onGenerate}
+          disabled={isGenerating}
+        >
+          Draft class ↓
+        </Button>
+      )}
+    </article>
   );
 }
 
-function SlidesIcon() {
+// ─── ArtifactChip — single download affordance ───────────────────────────
+
+function ArtifactChip({ label, onClick }: { label: string; onClick: () => void }) {
   return (
-    <svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-      <rect x="2" y="3" width="20" height="14" rx="2" ry="2" />
-      <line x1="8" y1="21" x2="16" y2="21" />
-      <line x1="12" y1="17" x2="12" y2="21" />
-    </svg>
+    <button
+      type="button"
+      onClick={onClick}
+      className="cb-mono cb-focus"
+      style={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: 6,
+        background: 'transparent',
+        border: '0.5px solid var(--cb-border-default)',
+        borderRadius: 1.5,
+        padding: '4px 9px 5px',
+        fontSize: 10.5,
+        letterSpacing: '0.1em',
+        color: 'var(--cb-text-muted)',
+        cursor: 'pointer',
+        textTransform: 'lowercase',
+        fontFamily: 'var(--font-cb-mono)',
+        transition:
+          'border-color 160ms ease, color 160ms ease, background 160ms ease',
+      }}
+      onMouseEnter={(e) => {
+        e.currentTarget.style.borderColor = 'var(--cb-accent-emphasis)';
+        e.currentTarget.style.color = 'var(--cb-accent-emphasis)';
+      }}
+      onMouseLeave={(e) => {
+        e.currentTarget.style.borderColor = 'var(--cb-border-default)';
+        e.currentTarget.style.color = 'var(--cb-text-muted)';
+      }}
+    >
+      {label}
+      <span aria-hidden style={{ fontSize: 10, opacity: 0.65 }}>↓</span>
+    </button>
   );
 }
 
-function AudioIcon() {
+// ─── ClassBundleChip — primary "download everything for this class" ──────
+//
+// Visually distinct from the per-artifact chips: filled accent background,
+// inverse text, sits at the start of the chip row so it reads as the primary
+// action. The lowercase "class · zip" label follows the same monospace voice
+// as the artifact chips, just inverted in colour.
+
+function ClassBundleChip({ onClick }: { onClick: () => void }) {
   return (
-    <svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-      <path d="M9 18V5l12-2v13" /><circle cx="6" cy="18" r="3" /><circle cx="18" cy="16" r="3" />
-    </svg>
+    <button
+      type="button"
+      onClick={onClick}
+      className="cb-mono cb-focus"
+      title="Download every generated artefact for this class as a single ZIP"
+      style={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: 7,
+        background: 'var(--cb-accent-emphasis)',
+        border: '0.5px solid var(--cb-accent-emphasis)',
+        borderRadius: 1.5,
+        padding: '5px 11px 6px',
+        fontSize: 10.5,
+        letterSpacing: '0.12em',
+        color: '#fff',
+        cursor: 'pointer',
+        textTransform: 'lowercase',
+        fontFamily: 'var(--font-cb-mono)',
+        fontWeight: 500,
+        transition: 'background-color 160ms ease, transform 160ms ease',
+        boxShadow: '0 1px 0 rgba(20,17,13,0.06)',
+      }}
+      onMouseEnter={(e) => {
+        e.currentTarget.style.transform = 'translateY(-1px)';
+        e.currentTarget.style.boxShadow = '0 2px 6px rgba(110,31,36,0.22)';
+      }}
+      onMouseLeave={(e) => {
+        e.currentTarget.style.transform = 'translateY(0)';
+        e.currentTarget.style.boxShadow = '0 1px 0 rgba(20,17,13,0.06)';
+      }}
+    >
+      <span aria-hidden style={{ fontSize: 11, lineHeight: 1, opacity: 0.85 }}>⎙</span>
+      class · zip
+      <span aria-hidden style={{ fontSize: 10, opacity: 0.85 }}>↓</span>
+    </button>
   );
 }
 
-function ResourcesIcon() {
+// ─── LearningOutcomesPanel ───────────────────────────────────────────────
+
+function LearningOutcomesPanel(props: {
+  curriculumMap: import('../types/course').CurriculumMap | null;
+  syllabus: import('../types/course').Syllabus;
+  themeId?: string;
+  isGenerating: boolean;
+  streamChars: number;
+  error: string | null;
+  stale: boolean;
+  canGenerate: boolean;
+  onGenerate: () => void;
+  onDownloadHtml: () => void;
+  onDownloadCsv: () => void;
+}) {
+  const {
+    curriculumMap,
+    syllabus,
+    themeId,
+    isGenerating,
+    streamChars,
+    error,
+    stale,
+    canGenerate,
+    onGenerate,
+    onDownloadHtml,
+    onDownloadCsv,
+  } = props;
+
+  const tableSrcDoc = useMemo(() => {
+    if (!curriculumMap) return null;
+    const fragment = buildOutcomesTableFragment(curriculumMap, syllabus, themeId);
+    return `<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600&family=Manrope:wght@400;500;600;700&family=DM+Sans:wght@400;500;600;700&family=IBM+Plex+Serif:wght@400;600&family=IBM+Plex+Sans:wght@400;500;600&family=Lora:wght@400;500;600&family=Libre+Caslon+Text:wght@400;700&family=Cormorant+Garamond:wght@400;500;600&family=DM+Serif+Display&family=Instrument+Serif&family=JetBrains+Mono:wght@400;500;600;700&display=swap"><style>html,body{margin:0;padding:0;}</style></head><body>${fragment}</body></html>`;
+  }, [curriculumMap, syllabus, themeId]);
+
   return (
-    <svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-      <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z" />
-      <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z" />
-    </svg>
+    <section
+      style={{
+        marginBottom: 36,
+        padding: '22px 24px 24px',
+        border: '0.5px solid var(--cb-border-default)',
+        background: 'var(--cb-ground-canvas)',
+        borderRadius: 3,
+      }}
+    >
+      {/* Header strip */}
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'flex-start',
+          justifyContent: 'space-between',
+          gap: 18,
+          flexWrap: 'wrap',
+          marginBottom: curriculumMap ? 14 : 8,
+        }}
+      >
+        <div style={{ minWidth: 0, flex: '1 1 320px' }}>
+          <div
+            className="cb-sc"
+            style={{
+              fontSize: 11.5,
+              letterSpacing: '0.14em',
+              color: 'var(--cb-text-muted)',
+              marginBottom: 5,
+            }}
+          >
+            Learning outcomes
+          </div>
+          {curriculumMap ? (
+            <p
+              className="cb-italic"
+              style={{
+                margin: 0,
+                fontSize: 14.5,
+                color: 'var(--cb-text-muted)',
+                lineHeight: 1.5,
+              }}
+            >
+              {curriculumMap.objectives.length} measurable objectives mapped to{' '}
+              {syllabus.chapters.length}{' '}
+              {syllabus.chapters.length === 1 ? 'chapter' : 'chapters'} ·
+              Introduced, Developed, Mastered.
+            </p>
+          ) : (
+            <p
+              style={{
+                margin: 0,
+                fontSize: 14.5,
+                color: 'var(--cb-text-default)',
+                lineHeight: 1.55,
+                maxWidth: '60ch',
+              }}
+            >
+              A measurable list of what students will know and be able to do,
+              mapped to where each objective is{' '}
+              <span className="cb-italic">Introduced</span>,{' '}
+              <span className="cb-italic">Developed</span>, and{' '}
+              <span className="cb-italic">Mastered</span> across your chapters.
+              Used by most universities for course accreditation.
+            </p>
+          )}
+        </div>
+
+        <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', alignItems: 'center' }}>
+          {curriculumMap && !isGenerating && (
+            <>
+              <Button size="sm" variant="ghost" onClick={onDownloadCsv}>
+                Download CSV ↓
+              </Button>
+              <Button size="sm" variant="secondary" onClick={onDownloadHtml}>
+                Download HTML ↓
+              </Button>
+              <Button
+                size="sm"
+                variant={stale ? 'primary' : 'ghost'}
+                onClick={onGenerate}
+                disabled={!canGenerate}
+                title={!canGenerate ? 'Add a Claude API key to regenerate.' : undefined}
+              >
+                {stale ? 'Regenerate ↻' : 'Regenerate'}
+              </Button>
+            </>
+          )}
+          {!curriculumMap && !isGenerating && (
+            <Button
+              size="sm"
+              variant="primary"
+              onClick={onGenerate}
+              disabled={!canGenerate}
+              title={!canGenerate ? 'Add a Claude API key in Setup to generate.' : undefined}
+            >
+              Generate learning outcomes →
+            </Button>
+          )}
+        </div>
+      </div>
+
+      {/* Stale banner */}
+      {curriculumMap && stale && !isGenerating && (
+        <div
+          style={{
+            marginTop: 4,
+            marginBottom: 14,
+            padding: '10px 14px',
+            background: 'var(--cb-status-warning-bg, rgba(207, 134, 35, 0.08))',
+            borderLeft: '2px solid var(--cb-status-warning, #cf8623)',
+            fontSize: 13.5,
+            color: 'var(--cb-text-default)',
+            lineHeight: 1.55,
+          }}
+        >
+          <strong style={{ fontWeight: 600 }}>Out of date.</strong>{' '}
+          The syllabus has been revised since these outcomes were generated{' '}
+          {curriculumMap.generatedAt ? `on ${new Date(curriculumMap.generatedAt).toLocaleDateString()}` : ''}.
+          Regenerate to align them with the current chapter set.
+        </div>
+      )}
+
+      {/* Streaming state */}
+      {isGenerating && (
+        <div
+          style={{
+            marginTop: 10,
+            padding: '14px 16px',
+            border: '0.5px dashed var(--cb-border-default)',
+            background: 'var(--cb-ground-page)',
+            borderRadius: 3,
+            display: 'flex',
+            alignItems: 'baseline',
+            gap: 12,
+          }}
+        >
+          <span
+            aria-hidden
+            style={{
+              display: 'inline-block',
+              width: 44,
+              height: 1,
+              background: 'var(--cb-border-default)',
+              position: 'relative',
+              overflow: 'hidden',
+              verticalAlign: 'middle',
+            }}
+          >
+            <span
+              style={{
+                position: 'absolute',
+                inset: 0,
+                background: 'var(--cb-accent-emphasis)',
+                animation: 'cb-pen 1.4s cubic-bezier(0.32,0.04,0.32,1) infinite',
+              }}
+            />
+          </span>
+          <span
+            className="cb-italic"
+            style={{ fontSize: 14.5, color: 'var(--cb-text-muted)', lineHeight: 1.5 }}
+          >
+            Drafting learning outcomes · {streamChars.toLocaleString()} characters streamed…
+          </span>
+        </div>
+      )}
+
+      {/* Error */}
+      {error && !isGenerating && (
+        <div
+          style={{
+            marginTop: 10,
+            padding: '10px 14px',
+            background: 'var(--cb-status-danger-bg, rgba(160, 53, 53, 0.08))',
+            borderLeft: '2px solid var(--cb-status-danger, #a03535)',
+            fontSize: 13.5,
+            color: 'var(--cb-text-default)',
+            lineHeight: 1.55,
+          }}
+        >
+          {error}
+        </div>
+      )}
+
+      {/* Preview iframe */}
+      {tableSrcDoc && !isGenerating && (
+        <div
+          style={{
+            marginTop: 12,
+            border: '0.5px solid var(--cb-border-default)',
+            borderRadius: 3,
+            overflow: 'hidden',
+            background: '#fff',
+          }}
+        >
+          <iframe
+            srcDoc={tableSrcDoc}
+            sandbox="allow-same-origin"
+            title="Learning outcomes preview"
+            style={{
+              width: '100%',
+              border: 'none',
+              minHeight: 520,
+              display: 'block',
+            }}
+          />
+        </div>
+      )}
+    </section>
   );
 }
diff --git a/src/pages/LandingPage.tsx b/src/pages/LandingPage.tsx
index 3c605ee..b823b48 100644
--- a/src/pages/LandingPage.tsx
+++ b/src/pages/LandingPage.tsx
@@ -1,11 +1,28 @@
-import { useState, type ReactNode } from 'react';
+import { useRef, useState, type ChangeEvent, type ReactNode } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { motion, AnimatePresence } from 'framer-motion';
-import { Button } from '../components/shared/Button';
+import { AnimatePresence, motion } from 'framer-motion';
 import { useCourseStore } from '../store/courseStore';
+import { STAGES } from '../types/course';
 import type { StageId } from '../types/course';
+import { CodexButton, CodexBadge, CodexModal, Colophon } from '../components/codex';
+import {
+  applyProjectFile,
+  parseProjectFile,
+  type ProjectFileState,
+} from '../utils/projectFile';
 
-// --- Example courses for showcase ---
+// ─── Example courses ─────────────────────────────────────────────────────
+
+interface ExampleCourseInput {
+  topic: string;
+  level: string;
+  priorKnowledge: string;
+  cohortSize: string;
+  learnerDetails: string;
+  environment: string;
+  voice: string;
+  additionalDetails?: string;
+}
 
 interface ExampleCourse {
   title: string;
@@ -13,21 +30,11 @@ interface ExampleCourse {
   slug: string;
   chapters: number;
   audience: string;
-  themeColor: string;
   themeName: string;
   readingLength: string;
   hook: string;
   image: string;
-  input: {
-    topic: string;
-    level: string;
-    priorKnowledge: string;
-    cohortSize: string;
-    learnerDetails: string;
-    environment: string;
-    additionalDetails?: string;
-    voice: string;
-  };
+  input: ExampleCourseInput;
 }
 
 const exampleCourses: ExampleCourse[] = [
@@ -37,20 +44,22 @@ const exampleCourses: ExampleCourse[] = [
     slug: 'raising-a-puppy',
     chapters: 8,
     audience: 'General public',
-    themeColor: '#06b6d4',
-    themeName: 'Ocean',
+    themeName: 'Almanac',
     readingLength: 'Standard',
-    hook: 'From the critical 3\u201316 week socialisation window to adolescent regression at 18 months \u2014 everything a first-time owner needs to know, grounded in veterinary behavioural science.',
+    hook:
+      'From the critical 3–16 week socialisation window to adolescent regression at 18 months — everything a first-time owner needs, grounded in veterinary behavioural science.',
     image: '/courses/raising-a-puppy.jpg',
     input: {
       topic: 'Raising a Puppy: A Complete Guide for First-Time Dog Owners',
       level: 'General public',
       priorKnowledge: 'Some',
       cohortSize: '60',
-      learnerDetails: 'First-time puppy owners, mixed ages \u2014 many will be anxious and overwhelmed',
+      learnerDetails:
+        'First-time puppy owners, mixed ages — many will be anxious and overwhelmed',
       environment: 'Lecture theatre',
       voice: 'Not specified',
-      additionalDetails: 'Tone should be reassuring, practical, and non-judgmental. Use Australian veterinary standards and terminology where relevant (e.g., desexing not spaying/neutering, council registration, tick prevention for east coast Australia). Avoid breed-specific advice \u2014 keep it universal.\n\nChapter structure: 1) Before They Arrive \u2014 preparation, puppy-proofing, essential equipment. 2) The First 72 Hours \u2014 settling in, first-night survival. 3) The Socialisation Window \u2014 the critical period (3\u201316 weeks). 4) Bite Inhibition & Mouthing. 5) Crate Training & House Training. 6) Nutrition & Feeding. 7) Veterinary Milestones \u2014 vaccinations, desexing, parasites. 8) The Adolescent Dog \u2014 6\u201318 month regression.\n\nPrioritise evidence-based training methods (positive reinforcement). Cite veterinary behavioural science (Sophia Yin, AVSAB position statements). Widgets: socialisation exposure checklists, house training schedules, scenario quizzes. Keep the tone warm \u2014 these people are sleep-deprived and covered in puppy teeth marks.',
+      additionalDetails:
+        'Tone should be reassuring, practical, and non-judgmental. Use Australian veterinary standards. Prioritise evidence-based training (positive reinforcement). Cite veterinary behavioural science (Sophia Yin, AVSAB).',
     },
   },
   {
@@ -59,20 +68,22 @@ const exampleCourses: ExampleCourse[] = [
     slug: 'understanding-your-sleep',
     chapters: 7,
     audience: 'General public',
-    themeColor: '#8b5cf6',
-    themeName: 'Midnight',
+    themeName: 'Studio',
     readingLength: 'Standard',
-    hook: 'Why morning light matters more than blue-light glasses, how sleep stages actually work, and where the evidence on eight hours gets overstated.',
+    hook:
+      'Why morning light matters more than blue-light glasses, how sleep stages actually work, and where the evidence on eight hours gets overstated.',
     image: '/courses/understanding-your-sleep.jpg',
     input: {
       topic: 'Understanding Your Sleep: The Science of Rest, Rhythm, and Recovery',
       level: 'General public',
       priorKnowledge: 'Some',
       cohortSize: '60',
-      learnerDetails: 'Adults interested in improving their sleep \u2014 mix of general curiosity, people with poor sleep habits, and professionals in shift work',
+      learnerDetails:
+        'Adults interested in improving their sleep — mix of general curiosity, poor sleep habits, shift workers',
       environment: 'Lecture theatre',
       voice: 'Not specified',
-      additionalDetails: 'Scientifically grounded but accessible \u2014 no jargon without explanation.\n\nChapter structure: 1) Your Internal Clock \u2014 circadian biology, chronotypes. 2) The Architecture of a Night \u2014 NREM/REM cycles, sleep stages. 3) Light as a Drug \u2014 melanopsin, lux thresholds, morning light protocol. 4) The Caffeine Equation \u2014 adenosine receptors, half-life, timing rules. 5) Moving to Sleep \u2014 exercise timing, body temperature. 6) Screens, Stimulation & Wind-Down \u2014 blue light vs. cognitive arousal. 7) The Strategic Nap \u2014 20 vs. 90 minutes, coffee naps, sleep inertia.\n\nKey sources: Matthew Walker (but flag where his claims overstate the evidence), Dijk & Czeisler on circadian regulation, Mednick on napping. Be honest about what evidence actually supports vs. popular sleep hygiene advice that\'s weakly supported.\n\nWidgets: chronotype self-assessment, caffeine half-life calculator, personalised light exposure timeline. Avoid medicalising normal sleep variation.',
+      additionalDetails:
+        'Scientifically grounded but accessible. Key sources: Walker (flag overstatement), Dijk & Czeisler, Mednick. Be honest about what evidence supports vs. popular sleep hygiene advice.',
     },
   },
   {
@@ -81,20 +92,22 @@ const exampleCourses: ExampleCourse[] = [
     slug: 'science-and-art-of-tea',
     chapters: 6,
     audience: 'General public',
-    themeColor: '#f59e0b',
-    themeName: 'Warm',
+    themeName: 'Press',
     readingLength: 'Standard',
-    hook: 'One plant becomes six types of tea. The oxidation science, brewing variables, and centuries of ritual behind the world\u2019s most consumed drink.',
+    hook:
+      "One plant becomes six types of tea. The oxidation science, brewing variables, and centuries of ritual behind the world's most consumed drink.",
     image: '/courses/science-and-art-of-tea.jpg',
     input: {
       topic: 'The Science and Art of Tea',
       level: 'General public',
       priorKnowledge: 'Some',
       cohortSize: '60',
-      learnerDetails: 'Tea enthusiasts, home brewers, foodies, and curious generalists \u2014 international audience',
+      learnerDetails:
+        'Tea enthusiasts, home brewers, foodies, and curious generalists — international audience',
       environment: 'Lecture theatre',
-      voice: 'Sulafat \u2014 Warm Australian, story-driven prose',
-      additionalDetails: 'The course should respect the deep cultural traditions around tea without appropriating or flattening them. Balance sensory, scientific, and historical perspectives. This course should feel like a conversation with a knowledgeable friend, not a textbook. Keep the topics basic and incredibly interesting.',
+      voice: 'Charlie — Australian male, relaxed and natural',
+      additionalDetails:
+        'Respect deep cultural traditions without flattening them. Balance sensory, scientific, and historical. Conversation with a knowledgeable friend, not a textbook.',
     },
   },
   {
@@ -103,20 +116,22 @@ const exampleCourses: ExampleCourse[] = [
     slug: 'training-for-your-first-marathon',
     chapters: 8,
     audience: 'General public',
-    themeColor: '#8b5cf6',
-    themeName: 'Midnight',
+    themeName: 'Storybook',
     readingLength: 'Standard',
-    hook: 'Evidence-based periodisation, race-day fuelling, and injury prevention \u2014 for people who aren\u2019t sure they\u2019re "a runner" yet.',
+    hook:
+      "Evidence-based periodisation, race-day fuelling, and injury prevention — for people who aren't sure they're \"a runner\" yet.",
     image: '/courses/training-for-your-first-marathon.jpg',
     input: {
       topic: 'From Couch to Finish Line: Training for Your First Marathon',
       level: 'General public',
       priorKnowledge: 'Some',
       cohortSize: '200',
-      learnerDetails: 'Adults who can currently run a little (or not at all) and want to complete a marathon \u2014 mixed fitness levels, mixed ages',
+      learnerDetails:
+        'Adults who can run a little (or not at all) and want to complete a marathon',
       environment: 'Online / hybrid',
-      voice: 'Charon \u2014 Measured British, lecture-friendly',
-      additionalDetails: 'Many will be nervous about injury, time commitment, and whether they\'re "a runner." Tone should be encouraging but honest \u2014 no toxic positivity. Practical, evidence-based, body-positive.\n\nGround in sports science. Widgets should be useful in the moment \u2014 self-assessments, decision tools, knowledge checks rather than ongoing trackers. Tone like a knowledgeable running mate \u2014 direct, warm, no bro-science. The message: finishing is the goal, not your time.',
+      voice: 'Daniel — British male, authoritative news-anchor',
+      additionalDetails:
+        "Encouraging but honest — no toxic positivity. Practical, body-positive. Knowledgeable running mate. The message: finishing is the goal, not your time.",
     },
   },
   {
@@ -125,20 +140,22 @@ const exampleCourses: ExampleCourse[] = [
     slug: 'leadership-through-crisis',
     chapters: 8,
     audience: 'Professional',
-    themeColor: '#3b82f6',
-    themeName: 'Classic',
+    themeName: 'Notebook',
     readingLength: 'Standard',
-    hook: 'Real case studies in high-stakes decision-making \u2014 from initial mobilisation under pressure to building a post-incident learning culture.',
+    hook:
+      'Real case studies in high-stakes decision-making — from initial mobilisation under pressure to building a post-incident learning culture.',
     image: '/courses/leadership-through-crisis.jpg',
     input: {
       topic: 'Leadership through Crisis: Decision-Making When the Stakes Are High',
       level: 'Professional',
       priorKnowledge: 'Some',
       cohortSize: '60',
-      learnerDetails: 'Mid-career to senior professionals across sectors \u2014 emergency services, corporate management, government, healthcare, military',
+      learnerDetails:
+        'Mid-career to senior professionals across sectors — emergency services, management, government, healthcare, military',
       environment: 'Collaborative room',
-      voice: 'Kore \u2014 Firm American, solid default narrator',
-      additionalDetails: 'They\'ve likely experienced crises but haven\'t had formal training in crisis leadership. Expect scepticism of theory that doesn\'t match reality. Use real case studies, not hypothetical scenarios.\n\nTopics: defining crisis vs. incident, activation and initial mobilisation, decision-making under pressure and cognitive load, stakeholder mapping, crisis communication, team resilience during prolonged events, post-incident review and learning culture, and building organisational preparedness.\n\nGround in real research: Klein\'s Recognition-Primed Decision model, Weick on sensemaking and Mann Gulch, Reason\'s Swiss cheese model, Dekker on just culture. Use real case studies \u2014 Grenfell Tower, Fukushima, Thai cave rescue, Australian bushfire response, airline incidents.\n\nWidgets: crisis decision simulations, stakeholder mapping exercises, communication drafting under time pressure. Tone: direct and credible \u2014 no corporate jargon, no "learnings."',
+      voice: 'Brian — American male, deep narration',
+      additionalDetails:
+        "Use real research: Klein's Recognition-Primed Decision, Weick on sensemaking, Reason's Swiss cheese, Dekker on just culture. Real case studies — Grenfell, Fukushima, Thai cave, Australian bushfire.",
     },
   },
   {
@@ -147,227 +164,62 @@ const exampleCourses: ExampleCourse[] = [
     slug: 'game-theory',
     chapters: 12,
     audience: 'Advanced undergrad',
-    themeColor: '#f59e0b',
-    themeName: 'Warm',
+    themeName: 'Terminal',
     readingLength: 'Comprehensive',
-    hook: 'Penalty kicks, arms races, spectrum auctions, and evolution \u2014 twelve chapters from the prisoner\u2019s dilemma to Arrow\u2019s impossibility theorem.',
+    hook:
+      "Penalty kicks, arms races, spectrum auctions, and evolution — twelve chapters from the prisoner's dilemma to Arrow's impossibility theorem.",
     image: '/courses/game-theory.jpg',
     input: {
       topic: 'The Strategy of Everything: An Introduction to Game Theory',
       level: 'Advanced undergrad',
       priorKnowledge: 'Some',
       cohortSize: '60',
-      learnerDetails: 'Third-year students across economics, politics, psychology, biology, philosophy, and computer science',
+      learnerDetails:
+        'Third-year students across economics, politics, psychology, biology, philosophy, computer science',
       environment: 'Collaborative room',
-      voice: 'Charon \u2014 Measured British, lecture-friendly',
-      additionalDetails: 'No calculus assumed but they should be comfortable with basic algebra. They need to see equations as tools for precise thinking, not obstacles. Use diverse applications \u2014 if every example is about firms competing, you\'ve lost half the room. Australian and international examples.\n\nChapter structure: 1) Thinking Strategically \u2014 prisoner\'s dilemma, brief history. 2) Representing Games \u2014 normal and extensive form. 3) Dominant Strategies & Nash Equilibrium. 4) Mixed Strategies \u2014 matching pennies, penalty kicks, actual algebra. 5) Sequential Games & Backward Induction. 6) Repeated Games & Cooperation \u2014 Axelrod\'s tournaments. 7) Information & Signalling \u2014 Spence\'s job market model. 8) Auction Theory \u2014 Milgrom & Wilson 2020 Nobel. 9) Evolutionary Game Theory \u2014 hawk-dove, cooperation in nature. 10) Bargaining & Negotiation. 11) Voting & Social Choice \u2014 Arrow\'s impossibility theorem. 12) Games in the Wild \u2014 climate, arms races, algorithmic game theory.\n\nCite: von Neumann & Morgenstern, Nash, Selten, Harsanyi, Axelrod, Maynard Smith, Spence, Arrow, Milgrom & Wilson. Widgets: play prisoner\'s dilemma, compute Nash equilibria, run auctions, build game trees, simulate evolutionary dynamics. Tone: intellectually exciting, not dry \u2014 game theory is inherently dramatic.',
+      voice: 'Daniel — British male, authoritative news-anchor',
+      additionalDetails:
+        "No calculus assumed. Diverse applications — not just firms competing. Cite: von Neumann & Morgenstern, Nash, Selten, Harsanyi, Axelrod, Maynard Smith, Spence, Arrow, Milgrom & Wilson.",
     },
   },
 ];
 
-function CourseCard({ course }: { course: ExampleCourse }) {
-  const [expanded, setExpanded] = useState(false);
-
-  return (
-    <motion.a
-      href={`https://courses.classbuild.ai/${course.slug}/`}
-      target="_blank"
-      rel="noopener noreferrer"
-      className="block rounded-xl bg-bg-card border border-white/5 overflow-hidden group hover:border-white/10 transition-all duration-200 cursor-pointer"
-      style={{ textDecoration: 'none', color: 'inherit' }}
-      whileHover={{ y: -2, boxShadow: `0 8px 30px ${course.themeColor}15` }}
-    >
-      {/* Hero image with gradient overlay */}
-      <div className="relative h-36 overflow-hidden">
-        <img
-          src={course.image}
-          alt={course.title}
-          className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
-          loading="lazy"
-        />
-        <div
-          className="absolute inset-0"
-          style={{ background: `linear-gradient(to top, var(--color-bg-card) 0%, transparent 60%)` }}
-        />
-        <div
-          className="absolute top-0 left-0 right-0 h-0.5"
-          style={{ background: `linear-gradient(90deg, ${course.themeColor}, ${course.themeColor}60)` }}
-        />
-      </div>
-
-      <div className="p-5 -mt-4 relative">
-        <div className="mb-2">
-          <h3 className="text-xl font-bold text-text-primary leading-tight">{course.title}</h3>
-          <p className="text-sm text-text-secondary mt-1">{course.subtitle}</p>
-        </div>
-
-        <p className="text-sm text-text-muted leading-relaxed mb-4">{course.hook}</p>
+// ─── Learning principles & deliverables ──────────────────────────────────
 
-        <div className="flex flex-wrap gap-1.5 mb-5">
-          <span className="px-2.5 py-0.5 rounded-full text-xs font-medium border"
-            style={{ backgroundColor: `${course.themeColor}15`, borderColor: `${course.themeColor}30`, color: course.themeColor }}>
-            {course.chapters} chapters
-          </span>
-          <span className="px-2.5 py-0.5 rounded-full text-xs font-medium bg-white/5 border border-white/10 text-text-secondary">
-            {course.audience}
-          </span>
-          {course.readingLength === 'Comprehensive' && (
-            <span className="px-2.5 py-0.5 rounded-full text-xs font-medium bg-white/5 border border-white/10 text-text-secondary">
-              {course.readingLength}
-            </span>
-          )}
-        </div>
-
-        <div className="flex items-center gap-4">
-          <span className="text-sm font-medium" style={{ color: course.themeColor }}>
-            Explore Course {'\u2192'}
-          </span>
-          <button
-            onClick={(e) => { e.preventDefault(); e.stopPropagation(); setExpanded(!expanded); }}
-            className="text-sm font-medium transition-colors cursor-pointer bg-transparent border-0 p-0 hover:opacity-80"
-            style={{ color: course.themeColor }}
-          >
-            {expanded ? 'Hide input \u2191' : 'See what we entered \u2193'}
-          </button>
-        </div>
-      </div>
-
-      <AnimatePresence>
-        {expanded && (
-          <motion.div
-            initial={{ height: 0, opacity: 0 }}
-            animate={{ height: 'auto', opacity: 1 }}
-            exit={{ height: 0, opacity: 0 }}
-            transition={{ duration: 0.25, ease: 'easeInOut' }}
-            className="overflow-hidden"
-            onClick={(e) => { e.preventDefault(); e.stopPropagation(); }}
-          >
-            <div className="px-5 pb-5 border-t border-white/5 pt-4">
-              <div className="text-xs font-semibold uppercase tracking-wider text-text-muted mb-3">What we entered</div>
-              <div className="grid grid-cols-2 gap-x-4 gap-y-2 text-sm mb-3">
-                <div><span className="text-text-muted">Topic:</span> <span className="text-text-secondary">{course.input.topic}</span></div>
-                <div><span className="text-text-muted">Level:</span> <span className="text-text-secondary">{course.input.level}</span></div>
-                <div><span className="text-text-muted">Prior knowledge:</span> <span className="text-text-secondary">{course.input.priorKnowledge}</span></div>
-                <div><span className="text-text-muted">Cohort:</span> <span className="text-text-secondary">{course.input.cohortSize} students</span></div>
-                <div><span className="text-text-muted">Environment:</span> <span className="text-text-secondary">{course.input.environment}</span></div>
-                <div><span className="text-text-muted">Reading length:</span> <span className="text-text-secondary">{course.readingLength}</span></div>
-                <div><span className="text-text-muted">Theme:</span> <span className="text-text-secondary">{course.themeName}</span></div>
-                <div><span className="text-text-muted">Voice:</span> <span className="text-text-secondary">{course.input.voice}</span></div>
-              </div>
-              {course.input.additionalDetails && (
-                <div>
-                  <div className="text-xs font-semibold uppercase tracking-wider text-text-muted mb-1.5">Additional details</div>
-                  <div className="rounded-lg bg-bg-elevated border border-white/5 p-3 text-sm text-text-secondary leading-relaxed whitespace-pre-line">
-                    {course.input.additionalDetails}
-                  </div>
-                </div>
-              )}
-            </div>
-          </motion.div>
-        )}
-      </AnimatePresence>
-    </motion.a>
-  );
-}
-
-// --- Preview card labels for the hero strip ---
-const previewCards = [
-  { src: '/preview-chapter.jpg', label: 'Interactive Chapter' },
-  { src: '/preview-quiz.jpg', label: 'Gamified Quiz' },
-  { src: '/preview-syllabus.jpg', label: 'Course Syllabus' },
-  { src: '/preview-slides.jpg', label: 'Presentation Slides' },
-  { src: '/preview-activities.jpg', label: 'Teaching Activities' },
-];
-
-// --- Learning science principles ---
-
-const principles = [
-  { color: '#8b5cf6', label: 'Spacing', desc: 'Key concepts reappear across chapters, not just once' },
-  { color: '#06b6d4', label: 'Interleaving', desc: 'Related topics are mixed across practice sets' },
-  { color: '#f59e0b', label: 'Retrieval Practice', desc: 'Built-in opportunities to test recall, not re-read' },
-  { color: '#22c55e', label: 'Concrete Examples', desc: 'Abstract theories grounded in real-world cases' },
-  { color: '#3b82f6', label: 'Dual Coding', desc: 'Verbal + visual: widgets, diagrams, and simulations' },
+const principles: { label: string; desc: string }[] = [
+  {
+    label: 'Spacing',
+    desc: 'Key concepts return across chapters at deliberate intervals — not once and never again.',
+  },
+  {
+    label: 'Interleaving',
+    desc: 'Related topics mix across practice sets, forcing the kind of discrimination a real exam asks for.',
+  },
+  {
+    label: 'Retrieval practice',
+    desc: 'Quizzes and prompts make students answer first and read second — recall, not re-read.',
+  },
+  {
+    label: 'Concrete examples',
+    desc: 'Abstract theory anchored to specific cases the teacher could narrate from memory.',
+  },
+  {
+    label: 'Dual coding',
+    desc: 'Words alongside diagrams and figures — two channels for the same idea.',
+  },
 ];
 
-// --- Deliverable icons ---
-
-function DocIcon() {
-  return (
-    <svg className="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-      <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
-      <polyline points="14 2 14 8 20 8" />
-    </svg>
-  );
-}
-
-function QuizCheckIcon() {
-  return (
-    <svg className="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-      <path d="M9 11l3 3L22 4" />
-      <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11" />
-    </svg>
-  );
-}
-
-function ClipboardListIcon() {
-  return (
-    <svg className="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-      <path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2" />
-      <rect x="8" y="2" width="8" height="4" rx="1" ry="1" />
-      <line x1="8" y1="11" x2="16" y2="11" />
-      <line x1="8" y1="15" x2="13" y2="15" />
-    </svg>
-  );
-}
-
-function SlidesIcon() {
-  return (
-    <svg className="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-      <rect x="2" y="3" width="20" height="14" rx="2" ry="2" />
-      <line x1="8" y1="21" x2="16" y2="21" />
-      <line x1="12" y1="17" x2="12" y2="21" />
-    </svg>
-  );
-}
-
-function AudioIcon() {
-  return (
-    <svg className="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-      <path d="M9 18V5l12-2v13" /><circle cx="6" cy="18" r="3" /><circle cx="18" cy="16" r="3" />
-    </svg>
-  );
-}
-
-function ResourcesIcon() {
-  return (
-    <svg className="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-      <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z" />
-      <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z" />
-    </svg>
-  );
-}
-
-// --- Deliverable artifacts for "What You Get" ---
-
-const deliverables: { label: string; detail: string; icon: ReactNode }[] = [
-  { label: 'Reading', detail: 'Interactive chapter with embedded visualisations', icon: <DocIcon /> },
-  { label: 'Practice Quiz', detail: 'Game-like self-test with instant feedback', icon: <QuizCheckIcon /> },
-  { label: 'In-Class Quiz', detail: '5 unique printed versions + answer key', icon: <ClipboardListIcon /> },
-  { label: 'Weekly Challenge', detail: 'Mastery assessment that uploads to your LMS', icon: <QuizCheckIcon /> },
-  { label: 'Slides', detail: 'Ready-to-present with speaker notes', icon: <SlidesIcon /> },
-  { label: 'Audiobook', detail: 'Professional narration students can listen to anywhere', icon: <AudioIcon /> },
-  { label: 'Teaching Pack', detail: 'Discussion prompts, activities, and facilitation guides', icon: <ResourcesIcon /> },
+const deliverables: { label: string; detail: string }[] = [
+  { label: 'Reading', detail: 'Interactive chapter with embedded visualisations.' },
+  { label: 'In-class quiz', detail: 'Five unique printed versions and an answer key.' },
+  { label: 'Slides', detail: 'Ready-to-present deck with speaker notes (PPTX).' },
+  { label: 'Teaching pack', detail: 'Discussion prompts, activities, facilitation guides.' },
+  { label: 'Practice quiz', detail: 'Self-test with instant feedback and rationale.' },
+  { label: 'Weekly challenge', detail: 'Mastery assessment that uploads to your LMS.' },
+  { label: 'Audio', detail: 'Narrated chapter audio students can listen to anywhere.' },
 ];
 
-// --- Pipeline stages ---
-
-const stages = [
-  { n: 1, label: 'Setup', desc: 'Topic, audience, and preferences' },
-  { n: 2, label: 'Syllabus', desc: 'AI-designed course structure' },
-  { n: 3, label: 'Research', desc: 'Web-sourced knowledge base' },
-  { n: 4, label: 'Build', desc: 'Chapters, quizzes, slides, and audio' },
-  { n: 5, label: 'Export', desc: 'Download or publish as a course site' },
-];
+const ROMAN_LOWER = ['i', 'ii', 'iii', 'iv', 'v', 'vi', 'vii', 'viii', 'ix', 'x'];
 
 const STAGE_ROUTES: Record<StageId, string> = {
   landing: '/',
@@ -378,15 +230,39 @@ const STAGE_ROUTES: Record<StageId, string> = {
   export: '/export',
 };
 
+/** Route for a restored project's stage — 'landing' has no STAGES entry, so
+ *  a freshly-restored project lands on Setup rather than back here. */
+function stagePathFor(stage: StageId): string {
+  return STAGES.find((s) => s.id === stage)?.path ?? '/setup';
+}
+
+/** "12 May 2026" from a project file's ISO savedAt, or null if unparseable. */
+function formatSavedAt(iso: string | null): string | null {
+  if (!iso) return null;
+  const d = new Date(iso);
+  if (Number.isNaN(d.getTime())) return null;
+  return d.toLocaleDateString(undefined, { day: 'numeric', month: 'long', year: 'numeric' });
+}
+
+// ─── Page ────────────────────────────────────────────────────────────────
+
 export function LandingPage() {
   const navigate = useNavigate();
-  const { currentStage, reset, setup, updateSetup, setSyllabus, addChapter, completeStage, setStage } = useCourseStore();
+  const { currentStage, reset, setup, syllabus, chapters, updateSetup, setSyllabus, addChapter, completeStage, setStage } = useCourseStore();
   const [showConfirm, setShowConfirm] = useState(false);
-  const [showExamples, setShowExamples] = useState(false);
 
-  const hasExistingCourse = currentStage !== 'landing' && currentStage !== 'setup';
+  // ── Restore-a-project-file flow ──
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [restoreError, setRestoreError] = useState<string | null>(null);
+  const [pendingRestore, setPendingRestore] = useState<{
+    state: ProjectFileState;
+    savedAt: string | null;
+  } | null>(null);
+
+  const hasExistingCourse =
+    currentStage !== 'landing' && currentStage !== 'setup';
 
-  const handleStartBuilding = () => {
+  const handleStart = () => {
     if (hasExistingCourse) {
       setShowConfirm(true);
     } else {
@@ -394,17 +270,8 @@ export function LandingPage() {
     }
   };
 
-  const confirmStartFresh = () => {
-    setShowConfirm(false);
-    reset();
-    navigate('/setup');
-  };
-
-  const continueCurrent = () => {
-    setShowConfirm(false);
-    navigate(STAGE_ROUTES[currentStage]);
-  };
-
+  // Fork feature: load a canned course so the IMSCC export can be tested
+  // without spending tokens.
   const handleLoadDemoCourse = async () => {
     const { demoSetup, demoSyllabus, demoChapters } = await import('../fixtures/demoCourse');
     reset();
@@ -416,410 +283,1211 @@ export function LandingPage() {
     navigate('/export');
   };
 
-  return (
-    <div className="min-h-[calc(100vh-4rem)] flex flex-col">
-      <AnimatePresence>
-        {showConfirm && (
-          <motion.div
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            exit={{ opacity: 0 }}
-            className="fixed inset-0 z-[100] flex items-center justify-center bg-black/60 backdrop-blur-sm"
-            onClick={() => setShowConfirm(false)}
-          >
-            <motion.div
-              initial={{ scale: 0.95, opacity: 0 }}
-              animate={{ scale: 1, opacity: 1 }}
-              exit={{ scale: 0.95, opacity: 0 }}
-              className="bg-bg-card border border-violet-500/20 rounded-xl p-6 max-w-sm mx-4 shadow-2xl"
-              onClick={(e) => e.stopPropagation()}
-            >
-              <h3 className="text-lg font-semibold mb-2">Welcome back!</h3>
-              <p className="text-sm text-text-secondary mb-5">
-                You have a course in progress{setup.topic ? ` on "${setup.topic}"` : ''}. Starting fresh will replace it with a new one — your current syllabus, research, and generated classes won't carry over.
-              </p>
-              <div className="flex gap-3 justify-end">
-                <Button
-                  size="sm"
-                  variant="ghost"
-                  onClick={confirmStartFresh}
-                  className="hover:!bg-error/10 hover:!text-error"
-                >
-                  Start Fresh
-                </Button>
-                <Button size="sm" onClick={continueCurrent}>
-                  Continue Course
-                </Button>
-              </div>
-            </motion.div>
-          </motion.div>
-        )}
-      </AnimatePresence>
-      {/* ===== HERO ===== */}
-      <section
-        className="flex flex-col items-center text-center pt-20 pb-8 px-4 relative overflow-hidden"
-        style={{ background: 'radial-gradient(ellipse at 50% 40%, #1a1a2e 0%, #0f0f1a 70%)' }}
-      >
-        {/* Hero background image — faded at top so it only shows in lower half */}
-        <div
-          className="absolute inset-0 opacity-40 pointer-events-none"
-          style={{
-            backgroundImage: 'url(/hero-bg.jpg)',
-            backgroundSize: 'cover',
-            backgroundPosition: 'center',
-            maskImage: 'linear-gradient(to bottom, transparent 60%, black 90%)',
-            WebkitMaskImage: 'linear-gradient(to bottom, transparent 60%, black 90%)',
-          }}
-        />
-        <motion.div
-          initial={{ opacity: 0, y: 30 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.8, ease: 'easeOut' }}
-          className="max-w-3xl"
-        >
-          <div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-violet-500/10 border border-violet-500/20 text-violet-400 text-sm mb-8">
-            <span className="w-2 h-2 rounded-full bg-violet-400 animate-pulse" />
-            For Canvas LMS
-          </div>
+  const startFresh = () => {
+    setShowConfirm(false);
+    reset();
+    navigate('/setup');
+  };
 
-          <h1 className="text-5xl md:text-6xl font-bold tracking-tight mb-4">
-            One topic in.
-            <br />
-            A complete course&nbsp;out.
-          </h1>
-          <p className="text-lg mb-6">
-            <span className="bg-gradient-to-r from-violet-400 via-violet-500 to-amber-400 bg-clip-text text-transparent font-semibold">
-              Grounded in how humans actually learn.
-            </span>
-          </p>
-
-          <p className="text-base text-text-secondary max-w-2xl mx-auto mb-10 leading-relaxed">
-            Turn any topic into a complete multimedia course, grounded in five evidence-based learning principles.
-          </p>
-
-          <div className="flex items-center justify-center gap-4">
-            <Button size="lg" onClick={handleStartBuilding}>
-              Start Building
-              <svg className="ml-2 w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                <line x1="5" y1="12" x2="19" y2="12" />
-                <polyline points="12 5 19 12 12 19" />
-              </svg>
-            </Button>
-            <Button variant="secondary" size="lg" onClick={() => {
-              document.getElementById('science')?.scrollIntoView({ behavior: 'smooth' });
-            }}>
-              How It Works
-            </Button>
-            <Button variant="ghost" size="lg" onClick={handleLoadDemoCourse}>
-              Load demo course
-            </Button>
-            <Button variant="ghost" size="lg" onClick={() => navigate('/templates')}>
-              Canvas templates
-            </Button>
-          </div>
-        </motion.div>
+  const continueExisting = () => {
+    setShowConfirm(false);
+    navigate(STAGE_ROUTES[currentStage]);
+  };
 
-        {/* Glow */}
-        <div className="absolute top-1/3 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-violet-500/5 rounded-full blur-3xl pointer-events-none" />
-      </section>
+  const applyRestore = (state: ProjectFileState) => {
+    applyProjectFile(state);
+    setPendingRestore(null);
+    navigate(stagePathFor(state.currentStage));
+  };
 
-      {/* ===== EXAMPLES TOGGLE ===== */}
-      <section className="py-6 border-t border-violet-500/10 text-center">
-        <button
-          type="button"
-          onClick={() => setShowExamples((v) => !v)}
-          className="inline-flex items-center gap-2 px-4 py-2 rounded-full border border-violet-500/20 hover:border-violet-500/40 text-sm text-text-secondary hover:text-text-primary transition-colors"
-        >
-          <svg
-            className={`w-4 h-4 transition-transform ${showExamples ? 'rotate-180' : ''}`}
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            strokeWidth="2"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-          >
-            <polyline points="6 9 12 15 18 9" />
-          </svg>
-          {showExamples ? 'Hide example courses' : 'Show example courses'}
-        </button>
-      </section>
+  const handleRestoreFile = async (e: ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    e.target.value = ''; // allow re-selecting the same file after an error
+    if (!file) return;
+    setRestoreError(null);
+    let text: string;
+    try {
+      text = await file.text();
+    } catch {
+      setRestoreError('Could not read that file — try selecting it again.');
+      return;
+    }
+    const result = parseProjectFile(text);
+    if (!result.ok) {
+      setRestoreError(result.error);
+      return;
+    }
+    // A course already underway? Confirm before replacing it.
+    if (syllabus || chapters.length > 0) {
+      setPendingRestore({ state: result.state, savedAt: result.savedAt });
+    } else {
+      applyRestore(result.state);
+    }
+  };
 
-      {showExamples && (
-      <>
-      {/* ===== PREVIEW STRIP ===== */}
-      <section className="py-8 overflow-hidden">
-        <style>{`
-          @keyframes marquee {
-            0% { transform: translateX(0); }
-            100% { transform: translateX(-50%); }
-          }
-        `}</style>
-        <motion.div
-          initial={{ opacity: 0 }}
-          animate={{ opacity: 1 }}
-          transition={{ delay: 0.5, duration: 0.8 }}
-        >
-          <div className="relative group">
-            {/* Fade edges */}
-            <div className="absolute left-0 top-0 bottom-0 w-24 bg-gradient-to-r from-bg-primary to-transparent z-10 pointer-events-none" />
-            <div className="absolute right-0 top-0 bottom-0 w-24 bg-gradient-to-l from-bg-primary to-transparent z-10 pointer-events-none" />
+  const pendingTopic = pendingRestore?.state.setup.topic ?? '';
+  const pendingSavedAt = formatSavedAt(pendingRestore?.savedAt ?? null);
 
+  return (
+    <div
+      style={{
+        fontFamily: 'var(--font-cb-serif)',
+        color: 'var(--cb-text-default)',
+      }}
+    >
+      {/* ── Hero ─────────────────────────────────────────────── */}
+      <section className="cb-land-hero-section" style={{ padding: '88px 0 72px' }}>
+        <div
+          className="cb-land-hero"
+          style={{
+            maxWidth: 1100,
+            margin: '0 auto',
+            display: 'grid',
+            gridTemplateColumns: '1fr 300px',
+            gap: 64,
+            alignItems: 'end',
+          }}
+        >
+          <div>
             <div
-              className="flex gap-5 w-max items-center"
-              style={{ animation: 'marquee 50s linear infinite' }}
-              onMouseEnter={(e) => { e.currentTarget.style.animationPlayState = 'paused'; }}
-              onMouseLeave={(e) => { e.currentTarget.style.animationPlayState = 'running'; }}
+              className="cb-sc"
+              style={{
+                fontSize: 13.5,
+                color: 'var(--cb-accent-emphasis)',
+                letterSpacing: '0.18em',
+              }}
             >
-              {[0, 1].map((set) => (
-                <div key={set} className="flex gap-5 shrink-0 items-center">
-                  {previewCards.map((card, i) => (
-                    <div key={card.src} className="shrink-0" style={{ transform: `rotate(${i % 2 === 0 ? -1 : 1}deg)` }}>
-                      <div className="w-48 h-60 rounded-xl overflow-hidden border border-violet-500/20 shadow-xl shadow-black/40 relative">
-                        <img src={card.src} alt={card.label} className="w-full h-full object-cover object-top" loading="lazy" />
-                        <div className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/80 to-transparent px-3 py-2">
-                          <span className="text-[10px] font-medium text-violet-300">{card.label}</span>
-                        </div>
-                      </div>
-                    </div>
-                  ))}
-                </div>
-              ))}
+              CanvasClassBuild — for Canvas LMS
+            </div>
+            <h1
+              style={{
+                margin: '16px 0 0',
+                // Fluid: 46px on a phone, the full 96px from ~1060px up.
+                fontSize: 'clamp(46px, 4vw + 31px, 96px)',
+                lineHeight: 1.0,
+                fontWeight: 400,
+                fontVariationSettings: '"opsz" 72',
+                letterSpacing: '-0.022em',
+                color: 'var(--cb-text-default)',
+                maxWidth: 880,
+              }}
+            >
+              Draft a course. Edit it.{' '}
+              <span
+                className="cb-italic"
+                style={{ color: 'var(--cb-accent-emphasis)' }}
+              >
+                Teach it.
+              </span>
+            </h1>
+            <p
+              style={{
+                margin: '22px 0 0',
+                maxWidth: 620,
+                fontSize: 'clamp(17px, 0.5vw + 15px, 20px)',
+                lineHeight: 1.6,
+                color: 'var(--cb-text-default)',
+              }}
+            >
+              Drafts a syllabus, slides, quizzes, readings, and narration — exportable
+              to PPTX, DOCX, HTML, or SCORM. You edit; you teach.
+            </p>
+            <div
+              style={{
+                marginTop: 32,
+                display: 'flex',
+                gap: 14,
+                alignItems: 'center',
+                flexWrap: 'wrap',
+              }}
+            >
+              <CodexButton variant="primary" size="lg" onClick={handleStart}>
+                Begin a course →
+              </CodexButton>
+              <a
+                href="#examples"
+                className="cb-focus"
+                style={{
+                  color: 'var(--cb-accent-link)',
+                  textDecoration: 'underline',
+                  textDecorationThickness: '0.5px',
+                  textUnderlineOffset: 4,
+                  fontSize: 17,
+                }}
+              >
+                See example courses ↓
+              </a>
+              <CodexButton variant="ghost" size="lg" onClick={() => navigate('/templates')}>
+                Canvas templates
+              </CodexButton>
+              <CodexButton variant="ghost" size="lg" onClick={handleLoadDemoCourse}>
+                Load demo course
+              </CodexButton>
+              <button
+                type="button"
+                onClick={() => {
+                  setRestoreError(null);
+                  fileInputRef.current?.click();
+                }}
+                className="cb-focus"
+                title="Re-open a saved .classbuild.json project. Keys are not included."
+                style={{
+                  background: 'transparent',
+                  border: 0,
+                  padding: 0,
+                  cursor: 'pointer',
+                  fontFamily: 'inherit',
+                  color: 'var(--cb-accent-link)',
+                  textDecoration: 'underline',
+                  textDecorationThickness: '0.5px',
+                  textUnderlineOffset: 4,
+                  fontSize: 17,
+                }}
+              >
+                Restore a project file ↑
+              </button>
+              <input
+                ref={fileInputRef}
+                type="file"
+                accept="application/json,.json,.classbuild"
+                onChange={(e) => void handleRestoreFile(e)}
+                style={{ display: 'none' }}
+              />
+            </div>
+            {restoreError && (
+              <p
+                className="cb-italic"
+                role="alert"
+                style={{
+                  margin: '14px 0 0',
+                  fontSize: 14.5,
+                  lineHeight: 1.5,
+                  color: 'var(--cb-status-danger)',
+                }}
+              >
+                {restoreError}
+              </p>
+            )}
+            <div
+              className="cb-mono"
+              style={{
+                fontSize: 13,
+                color: 'var(--cb-text-muted)',
+                marginTop: 28,
+                letterSpacing: '0.04em',
+              }}
+            >
+              BYOK · Anthropic, OpenAI, ElevenLabs · runs entirely in your browser · MIT-licensed
             </div>
           </div>
-        </motion.div>
+
+          <HeroPanel />
+        </div>
       </section>
 
-      {/* ===== EXAMPLE COURSES SHOWCASE ===== */}
-      <section className="py-20 border-t border-violet-500/10">
-        <motion.div
-          initial={{ opacity: 0 }}
-          whileInView={{ opacity: 1 }}
-          viewport={{ once: true }}
-          className="text-center mb-12"
+      {/* ── § How it works ───────────────────────────────────── */}
+      <Section kicker="How it works" sub="brief, draft, edit.">
+        <div
+          className="cb-land-grid-3steps"
+          style={{
+            display: 'grid',
+            gridTemplateColumns: 'repeat(3, 1fr)',
+            gap: 48,
+          }}
         >
-          <h2 className="text-3xl font-bold mb-4">
-            See what CanvasClassBuild{' '}
-            <span className="bg-gradient-to-r from-violet-400 to-amber-400 bg-clip-text text-transparent">creates</span>
-          </h2>
-          <p className="text-text-secondary max-w-2xl mx-auto">
-            Six real courses, built end-to-end. Click "See what we entered" to see the input that produced each one.
-          </p>
-        </motion.div>
-
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-4 max-w-5xl mx-auto px-4">
-          {[0, 5, 1, 4, 2, 3].map((idx, i) => (
-            <motion.div
-              key={exampleCourses[idx].slug}
-              initial={{ opacity: 0, y: 15 }}
-              whileInView={{ opacity: 1, y: 0 }}
-              viewport={{ once: true }}
-              transition={{ delay: i * 0.06 }}
-            >
-              <CourseCard course={exampleCourses[idx]} />
-            </motion.div>
+          {[
+            {
+              title: 'You set the brief',
+              body:
+                'A topic, an audience, a chapter count. Anywhere from four chapters to a full semester.',
+            },
+            {
+              title: 'ClassBuild drafts',
+              body:
+                'It writes the syllabus, researches each chapter, generates slides and quizzes, narrates the lectures.',
+            },
+            {
+              title: 'You edit, you teach',
+              body:
+                'Every artifact is editable in the browser, exportable as DOCX, PPTX, HTML, or SCORM.',
+            },
+          ].map((s) => (
+            <div key={s.title}>
+              <h3
+                style={{
+                  fontSize: 24,
+                  fontVariationSettings: '"opsz" 20',
+                  fontWeight: 500,
+                  letterSpacing: '-0.005em',
+                  margin: 0,
+                  color: 'var(--cb-text-default)',
+                }}
+              >
+                {s.title}
+              </h3>
+              <p
+                style={{
+                  marginTop: 10,
+                  fontSize: 17,
+                  lineHeight: 1.6,
+                  color: 'var(--cb-text-default)',
+                }}
+              >
+                {s.body}
+              </p>
+            </div>
           ))}
         </div>
-      </section>
-      </>
-      )}
-
-      {/* ===== LEARNING SCIENCE DIFFERENTIATOR ===== */}
-      <section id="science" className="py-20 border-t border-violet-500/10">
-        <motion.div
-          initial={{ opacity: 0 }}
-          whileInView={{ opacity: 1 }}
-          viewport={{ once: true }}
-          className="text-center mb-12"
+      </Section>
+
+      {/* ── § Example courses ────────────────────────────────── */}
+      <Section
+        id="examples"
+        kicker="Example courses"
+        sub="six courses drafted by ClassBuild itself, lightly edited."
+      >
+        <div
+          className="cb-land-grid-courses"
+          style={{
+            display: 'grid',
+            gridTemplateColumns: 'repeat(2, 1fr)',
+            gap: 18,
+          }}
         >
-          <h2 className="text-3xl font-bold mb-4">
-            Every course is architected around how humans{' '}
-            <span className="bg-gradient-to-r from-violet-400 to-amber-400 bg-clip-text text-transparent">actually learn</span>
-          </h2>
-          <p className="text-text-secondary max-w-2xl mx-auto">
-            These aren't buzzwords. Each principle draws on decades of cognitive science, and CanvasClassBuild weaves all five into every chapter, quiz, and activity it generates.
-          </p>
-        </motion.div>
-
-        <div className="flex flex-wrap justify-center gap-6 max-w-4xl mx-auto">
+          {exampleCourses.map((c) => (
+            <CourseCard key={c.slug} course={c} />
+          ))}
+        </div>
+      </Section>
+
+      {/* ── § The principles ─────────────────────────────────── */}
+      <Section
+        kicker="The principles"
+        sub="every chapter is built around these five."
+        ornament
+      >
+        <ul style={{ margin: 0, padding: 0, listStyle: 'none' }}>
           {principles.map((p, i) => (
-            <motion.div
+            <li
               key={p.label}
-              initial={{ opacity: 0, y: 15 }}
-              whileInView={{ opacity: 1, y: 0 }}
-              viewport={{ once: true }}
-              transition={{ delay: i * 0.08 }}
-              className="flex flex-col items-center text-center w-36"
+              className="cb-land-principle"
+              style={{
+                display: 'grid',
+                gridTemplateColumns: '32px 140px 1fr',
+                padding: '10px 0',
+                gap: 18,
+                borderTop:
+                  i === 0 ? 'none' : '0.5px solid var(--cb-border-subtle)',
+                alignItems: 'baseline',
+              }}
             >
-              <div
-                className="px-4 py-1.5 rounded-full text-sm font-medium mb-3 border"
+              <span
+                className="cb-italic"
                 style={{
-                  backgroundColor: `${p.color}15`,
-                  borderColor: `${p.color}30`,
-                  color: p.color,
+                  fontSize: 17,
+                  color: 'var(--cb-accent-emphasis)',
+                  fontVariationSettings: '"opsz" 14',
+                }}
+              >
+                {ROMAN_LOWER[i]}.
+              </span>
+              <span
+                className="cb-sc"
+                style={{
+                  fontSize: 13.5,
+                  color: 'var(--cb-text-default)',
+                  letterSpacing: '0.14em',
                 }}
               >
                 {p.label}
-              </div>
-              <p className="text-xs text-text-muted leading-relaxed">{p.desc}</p>
-            </motion.div>
+              </span>
+              <span
+                className="cb-land-principle-desc"
+                style={{
+                  fontSize: 17,
+                  lineHeight: 1.55,
+                  color: 'var(--cb-text-default)',
+                }}
+              >
+                {p.desc}
+              </span>
+            </li>
           ))}
-        </div>
-      </section>
+        </ul>
+      </Section>
 
-      {/* ===== WHAT YOU GET ===== */}
-      <section className="py-20 border-t border-violet-500/10">
-        <motion.div
-          initial={{ opacity: 0 }}
-          whileInView={{ opacity: 1 }}
-          viewport={{ once: true }}
-          className="text-center mb-10"
-        >
-          <h2 className="text-3xl font-bold mb-4">A complete course package, per class</h2>
-          <p className="text-text-secondary max-w-lg mx-auto">
-            Seven deliverables for every class. Download individually or as a single ZIP.
-          </p>
-        </motion.div>
-
-        <motion.div
-          initial={{ opacity: 0, y: 10 }}
-          whileInView={{ opacity: 1, y: 0 }}
-          viewport={{ once: true }}
-          className="grid grid-cols-2 md:grid-cols-3 gap-4 max-w-3xl mx-auto px-4"
+      {/* ── § What ClassBuild produces ───────────────────────── */}
+      <Section
+        kicker="What ClassBuild produces"
+        sub="seven artifacts per chapter — download individually or as a bundle."
+      >
+        <div
+          className="cb-land-grid-deliv"
+          style={{
+            display: 'grid',
+            gridTemplateColumns: 'repeat(3, 1fr)',
+            gap: 14,
+          }}
         >
           {deliverables.map((d, i) => (
-            <motion.div
+            <article
               key={d.label}
-              initial={{ opacity: 0, scale: 0.9 }}
-              whileInView={{ opacity: 1, scale: 1 }}
-              viewport={{ once: true }}
-              transition={{ delay: i * 0.05 }}
-              className="flex items-start gap-3 p-4 rounded-xl bg-bg-card border border-violet-500/15 hover:border-violet-500/30 transition-colors"
-            >
-              <div className="w-9 h-9 rounded-lg bg-violet-500/10 flex items-center justify-center text-violet-400 shrink-0">
-                {d.icon}
-              </div>
-              <div>
-                <div className="text-sm font-medium text-text-primary">{d.label}</div>
-                <div className="text-xs text-text-muted mt-0.5">{d.detail}</div>
-              </div>
-            </motion.div>
-          ))}
-        </motion.div>
-      </section>
-
-      {/* ===== PIPELINE ===== */}
-      <section className="py-20 border-t border-violet-500/10">
-        <motion.div
-          initial={{ opacity: 0 }}
-          whileInView={{ opacity: 1 }}
-          viewport={{ once: true }}
-          className="text-center mb-12"
-        >
-          <h2 className="text-3xl font-bold mb-4">Five stages. One click at a time.</h2>
-          <p className="text-text-secondary max-w-lg mx-auto">
-            A full 12-chapter course takes about 2 hours to build and costs around $20–30 in Claude credits. Audiobook narration and infographics are included — covered by Google's free $300 Gemini trial.
-          </p>
-        </motion.div>
-
-        <div className="flex items-start justify-center max-w-2xl mx-auto px-4">
-          {stages.map((stage, i) => (
-            <motion.div
-              key={stage.n}
-              initial={{ opacity: 0, scale: 0.8 }}
-              whileInView={{ opacity: 1, scale: 1 }}
-              viewport={{ once: true }}
-              transition={{ delay: i * 0.06 }}
-              className="flex items-start min-w-0"
+              style={{
+                border: '1px solid var(--cb-border-default)',
+                borderRadius: 2,
+                padding: '14px 16px',
+                background: 'transparent',
+                display: 'flex',
+                flexDirection: 'column',
+                gap: 6,
+              }}
             >
-              <div className="flex flex-col items-center gap-1.5 min-w-0">
-                <div className="w-9 h-9 rounded-full bg-violet-500/15 flex items-center justify-center text-sm font-medium text-violet-400 shrink-0">
-                  {stage.n}
-                </div>
-                <span className="text-[10px] text-text-muted whitespace-nowrap">{stage.label}</span>
-                <span className="text-[9px] text-text-muted/60 text-center leading-tight max-w-[90px] hidden md:block">{stage.desc}</span>
-              </div>
-              {i < stages.length - 1 && (
-                <div className="w-6 md:w-12 h-px bg-violet-500/20 mx-0.5 shrink-0 mt-[18px]" />
-              )}
-            </motion.div>
+              <span
+                className="cb-italic"
+                style={{
+                  fontSize: 14.5,
+                  color: 'var(--cb-accent-emphasis)',
+                  fontVariationSettings: '"opsz" 14',
+                }}
+              >
+                {ROMAN_LOWER[i]}.
+              </span>
+              <span
+                style={{
+                  fontSize: 20,
+                  fontWeight: 500,
+                  fontVariationSettings: '"opsz" 18',
+                  color: 'var(--cb-text-default)',
+                  lineHeight: 1.2,
+                }}
+              >
+                {d.label}
+              </span>
+              <span
+                className="cb-italic"
+                style={{
+                  fontSize: 15,
+                  color: 'var(--cb-text-muted)',
+                  lineHeight: 1.45,
+                }}
+              >
+                {d.detail}
+              </span>
+            </article>
           ))}
         </div>
+        <p
+          className="cb-italic"
+          style={{
+            textAlign: 'center',
+            margin: '32px 0 0',
+            fontSize: 17,
+            color: 'var(--cb-text-muted)',
+            lineHeight: 1.5,
+          }}
+        >
+          All seven produced from one brief, while you make a coffee.
+        </p>
+      </Section>
 
-        <div className="text-center mt-12">
-          <Button size="lg" onClick={handleStartBuilding}>
-            Get Started
-            <svg className="ml-2 w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-              <line x1="5" y1="12" x2="19" y2="12" />
-              <polyline points="12 5 19 12 12 19" />
-            </svg>
-          </Button>
-        </div>
-      </section>
-
-      {/* ===== CLI CALLOUT ===== */}
-      <section className="py-12 border-t border-violet-500/10">
-        <motion.div
-          initial={{ opacity: 0 }}
-          whileInView={{ opacity: 1 }}
-          viewport={{ once: true }}
-          className="max-w-2xl mx-auto px-4"
+      {/* ── § Headlessly, via CLI ────────────────────────────── */}
+      <Section
+        kicker="From the terminal"
+        sub="same generator, scripted."
+      >
+        <div
+          className="cb-land-grid-cli"
+          style={{
+            display: 'grid',
+            gridTemplateColumns: '1fr 1fr',
+            gap: 40,
+            alignItems: 'start',
+          }}
         >
-          <div className="rounded-xl bg-bg-card border border-violet-500/15 p-6 flex items-start gap-4">
-            <div className="w-10 h-10 rounded-lg bg-violet-500/10 flex items-center justify-center text-violet-400 shrink-0 mt-0.5">
-              <svg className="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                <polyline points="4 17 10 11 4 5" /><line x1="12" y1="19" x2="20" y2="19" />
-              </svg>
-            </div>
-            <div>
-              <h3 className="text-base font-semibold text-text-primary mb-1">Building multiple courses?</h3>
-              <p className="text-sm text-text-secondary mb-3">
-                The CanvasClassBuild CLI can generate complete courses headlessly — ideal for creating entire programs or course catalogues.
-              </p>
+          <div>
+            <p
+              style={{
+                margin: 0,
+                fontSize: 17,
+                lineHeight: 1.6,
+                color: 'var(--cb-text-default)',
+                maxWidth: 460,
+              }}
+            >
+              The ClassBuild CLI runs the same generator from your terminal — for
+              when you're building a program, a catalogue, or just want everything
+              piped to disk.
+            </p>
+            <div style={{ marginTop: 16 }}>
               <a
                 href="https://github.com/jtangen/classbuild#cli--headless-course-generation"
                 target="_blank"
                 rel="noopener noreferrer"
-                className="text-sm font-medium text-violet-400 hover:text-violet-300 transition-colors inline-flex items-center gap-1"
+                style={{
+                  fontSize: 15,
+                  color: 'var(--cb-accent-link)',
+                  textDecoration: 'underline',
+                  textDecorationThickness: '0.5px',
+                  textUnderlineOffset: 3,
+                }}
               >
-                View on GitHub
-                <svg className="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
-                  <line x1="5" y1="12" x2="19" y2="12" /><polyline points="12 5 19 12 12 19" />
-                </svg>
+                View on GitHub ↗
               </a>
             </div>
           </div>
-        </motion.div>
+          <pre
+            className="cb-mono"
+            style={{
+              margin: 0,
+              padding: '16px 18px',
+              background: 'var(--cb-surface-sunken)',
+              border: '1px solid var(--cb-border-default)',
+              borderRadius: 2,
+              fontSize: 13.5,
+              lineHeight: 1.6,
+              color: 'var(--cb-text-default)',
+              overflowX: 'auto',
+            }}
+          >
+{`ANTHROPIC_API_KEY=sk-ant-… \\
+  npx tsx scripts/generate-course.ts \\
+    --topic "Cognitive Load Theory" \\
+    --chapters 12 \\
+    --output ./out`}
+          </pre>
+        </div>
+      </Section>
+
+      {/* ── Closing CTA — quiet, just a button ─────────────── */}
+      <section
+        style={{
+          padding: '48px 0',
+          borderTop: '0.5px solid var(--cb-border-rule)',
+        }}
+      >
+        <div
+          className="cb-land-cta-row"
+          style={{
+            maxWidth: 1100,
+            margin: '0 auto',
+            display: 'flex',
+            justifyContent: 'flex-end',
+          }}
+        >
+          <CodexButton variant="primary" size="lg" onClick={handleStart}>
+            Begin a course →
+          </CodexButton>
+        </div>
       </section>
 
-      {/* ===== FOOTER ===== */}
-      <footer className="py-10 border-t border-violet-500/10 text-center text-sm">
-        <div className="flex items-center justify-center gap-3 mb-4">
-          <span className="text-text-muted text-xs">Powered by</span>
-          {[
-            { label: 'Claude', sub: 'Anthropic', color: '#8b5cf6' },
-            { label: 'Gemini', sub: 'Google', color: '#3b82f6' },
-          ].map((b) => (
+      {/* ── Footer ───────────────────────────────────────────── */}
+      <footer
+        style={{
+          padding: '40px 0 32px',
+          background: 'var(--cb-surface-sunken)',
+          borderTop: '0.5px solid var(--cb-border-default)',
+        }}
+      >
+        <div
+          className="cb-land-footer"
+          style={{
+            maxWidth: 1100,
+            margin: '0 auto',
+            display: 'grid',
+            gridTemplateColumns: '1.4fr 1fr 1fr 1fr',
+            gap: 32,
+          }}
+        >
+          <div className="cb-land-footer-brand">
+            <div
+              className="cb-italic"
+              style={{
+                fontSize: 24,
+                color: 'var(--cb-text-default)',
+                fontVariationSettings: '"opsz" 20',
+              }}
+            >
+              CanvasClassBuild
+              <span style={{ color: 'var(--cb-accent-emphasis)' }}>.</span>
+            </div>
+            <p
+              className="cb-italic"
+              style={{
+                fontSize: 14.5,
+                color: 'var(--cb-text-muted)',
+                lineHeight: 1.55,
+                marginTop: 8,
+              }}
+            >
+              A Canvas LMS fork of ClassBuild by Jason Tangen — adds Common Cartridge (.imscc) export. No backend. No telemetry. MIT.
+            </p>
+          </div>
+          <FooterCol
+            heading="Product"
+            links={[
+              { label: 'Examples', href: '#examples' },
+              { label: 'GitHub ↗', href: 'https://github.com/daTechGuy/CanvasClassBuild' },
+              { label: 'Upstream ClassBuild ↗', href: 'https://github.com/jtangen/classbuild' },
+              { label: 'CLI', href: 'https://github.com/jtangen/classbuild#cli--headless-course-generation' },
+            ]}
+          />
+          <FooterCol
+            heading="About"
+            links={[
+              { label: 'The maker', href: 'https://tangenlab.com' },
+              { label: 'Code with Claude · Tokyo', href: 'https://claude.com/code-with-claude/tokyo' },
+            ]}
+          />
+          <FooterCol
+            heading="Provenance"
+            links={[
+              { label: 'How outputs are generated', href: 'https://github.com/jtangen/classbuild#how-it-works' },
+              { label: 'Citations & sources', href: 'https://github.com/jtangen/classbuild#research' },
+              { label: 'Licensing — MIT', href: 'https://github.com/jtangen/classbuild/blob/main/LICENSE' },
+            ]}
+          />
+        </div>
+        <div
+          style={{
+            maxWidth: 1100,
+            margin: '32px auto 0',
+            paddingTop: 16,
+            borderTop: '0.5px solid var(--cb-border-rule)',
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+          }}
+        >
+          <span
+            className="cb-mono"
+            style={{ fontSize: 12, color: 'var(--cb-text-muted)' }}
+          >
+            v0.2 · MIT · 2026
+          </span>
+          <Colophon size={18} style={{ opacity: 0.7 }} />
+        </div>
+      </footer>
+
+      {/* ── Resume / start-fresh modal ───────────────────────── */}
+      <CodexModal
+        open={showConfirm}
+        onClose={() => setShowConfirm(false)}
+        kicker="welcome back"
+        title={
+          <>
+            You have a course in <span className="cb-italic">progress</span>.
+          </>
+        }
+        sub={
+          setup.topic
+            ? `On "${setup.topic.length > 80 ? setup.topic.slice(0, 80) + '…' : setup.topic}".`
+            : 'Continue where you left off, or start fresh.'
+        }
+        actions={
+          <>
+            <CodexButton variant="ghost" onClick={() => setShowConfirm(false)}>
+              Cancel
+            </CodexButton>
+            <CodexButton variant="destructive" onClick={startFresh}>
+              Start fresh
+            </CodexButton>
+            <CodexButton variant="primary" onClick={continueExisting}>
+              Continue course →
+            </CodexButton>
+          </>
+        }
+      >
+        <p
+          style={{
+            margin: 0,
+            fontSize: 15,
+            lineHeight: 1.55,
+            color: 'var(--cb-text-default)',
+          }}
+        >
+          Continuing returns you to{' '}
+          <span className="cb-italic">
+            {STAGE_LABELS[currentStage] ?? 'where you were'}
+          </span>
+          . Starting fresh clears the current syllabus, research, and chapters.
+        </p>
+      </CodexModal>
+
+      {/* ── Restore-project confirm modal ────────────────────── */}
+      <CodexModal
+        open={pendingRestore !== null}
+        onClose={() => setPendingRestore(null)}
+        kicker="restore a project"
+        title={
+          <>
+            Replace the course in <span className="cb-italic">progress</span>?
+          </>
+        }
+        sub={
+          pendingTopic
+            ? `The file contains "${
+                pendingTopic.length > 80 ? pendingTopic.slice(0, 80) + '…' : pendingTopic
+              }"${pendingSavedAt ? `, saved ${pendingSavedAt}` : ''}.`
+            : 'Restore the saved project and continue where it left off.'
+        }
+        actions={
+          <>
+            <CodexButton variant="ghost" onClick={() => setPendingRestore(null)}>
+              Cancel
+            </CodexButton>
+            <CodexButton
+              variant="destructive"
+              onClick={() => {
+                if (pendingRestore) applyRestore(pendingRestore.state);
+              }}
+            >
+              Replace & restore
+            </CodexButton>
+          </>
+        }
+      >
+        <p
+          style={{
+            margin: 0,
+            fontSize: 15,
+            lineHeight: 1.55,
+            color: 'var(--cb-text-default)',
+          }}
+        >
+          Restoring replaces your current syllabus, research, and chapters with
+          the saved project. API keys are never part of a project file.
+        </p>
+      </CodexModal>
+    </div>
+  );
+}
+
+const STAGE_LABELS: Record<StageId, string> = {
+  landing: 'the start',
+  setup: 'Setup',
+  syllabus: 'Syllabus',
+  research: 'Research',
+  build: 'Build',
+  export: 'Export',
+};
+
+// ─── Section wrapper ─────────────────────────────────────────────────────
+
+function Section({
+  id,
+  kicker,
+  sub,
+  children,
+  ornament = false,
+}: {
+  id?: string;
+  kicker: string;
+  sub: string;
+  children: ReactNode;
+  ornament?: boolean;
+}) {
+  return (
+    <section
+      id={id}
+      className="cb-land-section"
+      style={{
+        padding: '64px 0',
+        borderTop: '0.5px solid var(--cb-border-rule)',
+        // Anchored scrolls (#examples) land below the fixed header.
+        scrollMarginTop: 76,
+      }}
+    >
+      <div style={{ maxWidth: 1100, margin: '0 auto' }}>
+        {ornament && (
+          <div
+            style={{
+              display: 'flex',
+              justifyContent: 'center',
+              marginBottom: 14,
+            }}
+          >
+            <Fleuron />
+          </div>
+        )}
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'baseline',
+            gap: '4px 14px',
+            flexWrap: 'wrap',
+            paddingBottom: 14,
+            marginBottom: 24,
+            borderBottom: '0.5px solid var(--cb-border-rule)',
+          }}
+        >
+          <span
+            className="cb-sc"
+            style={{
+              fontSize: 14.5,
+              color: 'var(--cb-accent-emphasis)',
+              letterSpacing: '0.16em',
+              whiteSpace: 'nowrap',
+            }}
+          >
+            {kicker}
+          </span>
+          <span
+            className="cb-italic"
+            style={{ fontSize: 15, color: 'var(--cb-text-muted)' }}
+          >
+            — {sub}
+          </span>
+        </div>
+        {children}
+      </div>
+    </section>
+  );
+}
+
+// ─── Fleuron ─────────────────────────────────────────────────────────────
+
+function Fleuron() {
+  return (
+    <svg
+      width={90}
+      height={22}
+      viewBox="0 0 90 22"
+      aria-hidden
+      style={{ display: 'block' }}
+    >
+      <line
+        x1="0"
+        y1="11"
+        x2="32"
+        y2="11"
+        stroke="var(--cb-accent-gilt)"
+        strokeWidth="0.75"
+      />
+      <line
+        x1="58"
+        y1="11"
+        x2="90"
+        y2="11"
+        stroke="var(--cb-accent-gilt)"
+        strokeWidth="0.75"
+      />
+      <g
+        transform="translate(45,11)"
+        fill="none"
+        stroke="var(--cb-accent-gilt)"
+        strokeWidth="0.9"
+      >
+        <circle r="3" />
+        <path d="M -8 0 Q -5 -4 0 -3 Q 5 -4 8 0 Q 5 4 0 3 Q -5 4 -8 0 Z" />
+      </g>
+    </svg>
+  );
+}
+
+// ─── Footer column ───────────────────────────────────────────────────────
+
+function FooterCol({
+  heading,
+  links,
+}: {
+  heading: string;
+  links: { label: string; href: string }[];
+}) {
+  return (
+    <div>
+      <div
+        className="cb-sc"
+        style={{
+          fontSize: 12,
+          color: 'var(--cb-text-muted)',
+          letterSpacing: '0.14em',
+        }}
+      >
+        {heading}
+      </div>
+      <ul
+        style={{
+          margin: '12px 0 0',
+          padding: 0,
+          listStyle: 'none',
+          fontSize: 15,
+          lineHeight: 1.85,
+        }}
+      >
+        {links.map((l) => (
+          <li key={l.label}>
+            <a
+              href={l.href}
+              target={l.href.startsWith('http') ? '_blank' : undefined}
+              rel={l.href.startsWith('http') ? 'noopener noreferrer' : undefined}
+              style={{
+                color: 'var(--cb-text-default)',
+                textDecoration: 'underline',
+                textDecorationColor: 'var(--cb-border-default)',
+                textDecorationThickness: '0.5px',
+                textUnderlineOffset: 3,
+                transition: 'color 200ms cubic-bezier(0.32,0.04,0.32,1)',
+              }}
+              onMouseEnter={(e) => {
+                e.currentTarget.style.color = 'var(--cb-accent-link)';
+              }}
+              onMouseLeave={(e) => {
+                e.currentTarget.style.color = 'var(--cb-text-default)';
+              }}
+            >
+              {l.label}
+            </a>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+// ─── HeroPanel — what's in a ClassBuild course (honest static list) ──────
+
+function HeroPanel() {
+  return (
+    <aside
+      style={{
+        padding: '22px 22px',
+        background: 'var(--cb-surface-sunken)',
+        border: '1px solid var(--cb-border-default)',
+        borderRadius: 2,
+      }}
+    >
+      <div
+        className="cb-sc"
+        style={{
+          fontSize: 12,
+          color: 'var(--cb-text-muted)',
+          letterSpacing: '0.14em',
+        }}
+      >
+        A course includes
+      </div>
+      <ol
+        style={{
+          listStyle: 'none',
+          padding: 0,
+          margin: '14px 0 0',
+          display: 'grid',
+          gap: 0,
+        }}
+      >
+        {HERO_ARTIFACTS.map((a, i) => (
+          <li
+            key={a.label}
+            style={{
+              display: 'grid',
+              gridTemplateColumns: '32px 1fr',
+              alignItems: 'baseline',
+              padding: '7px 0',
+              borderTop:
+                i === 0 ? 'none' : '0.5px solid var(--cb-border-subtle)',
+            }}
+          >
             <span
-              key={b.label}
-              className="px-3 py-1 rounded-full text-xs border"
+              className="cb-italic"
               style={{
-                borderColor: `${b.color}30`,
-                backgroundColor: `${b.color}10`,
-                color: b.color,
+                color: 'var(--cb-accent-emphasis)',
+                fontSize: 14.5,
               }}
             >
-              {b.label}
+              {a.n}.
             </span>
-          ))}
+            <span
+              style={{
+                fontSize: 15.5,
+                lineHeight: 1.4,
+                color: 'var(--cb-text-default)',
+              }}
+            >
+              {a.label}
+            </span>
+          </li>
+        ))}
+      </ol>
+      <div
+        className="cb-italic"
+        style={{
+          fontSize: 13.5,
+          color: 'var(--cb-text-muted)',
+          marginTop: 14,
+          paddingTop: 12,
+          borderTop: '0.5px solid var(--cb-border-default)',
+          lineHeight: 1.4,
+        }}
+      >
+        Drafted unattended in the background.
+      </div>
+    </aside>
+  );
+}
+
+const HERO_ARTIFACTS: { n: string; label: string }[] = [
+  { n: 'i', label: 'Reading chapter' },
+  { n: 'ii', label: 'Slides (PPTX)' },
+  { n: 'iii', label: 'In-class quiz' },
+  { n: 'iv', label: 'Practice quiz' },
+  { n: 'v', label: 'Teaching pack' },
+  { n: 'vi', label: 'Narrated audio' },
+  { n: 'vii', label: 'Weekly mastery challenge' },
+];
+
+// ─── CourseCard ──────────────────────────────────────────────────────────
+
+function CourseCard({ course }: { course: ExampleCourse }) {
+  const [expanded, setExpanded] = useState(false);
+
+  return (
+    <article
+      style={{
+        background: 'var(--cb-ground-page)',
+        border: '1px solid var(--cb-border-default)',
+        borderRadius: 2,
+        overflow: 'hidden',
+        transition: 'border-color 200ms cubic-bezier(0.32,0.04,0.32,1)',
+      }}
+      onMouseEnter={(e) => {
+        e.currentTarget.style.borderColor = 'var(--cb-border-strong)';
+      }}
+      onMouseLeave={(e) => {
+        e.currentTarget.style.borderColor = 'var(--cb-border-default)';
+      }}
+    >
+      {/* Image */}
+      <a
+        href={`https://courses.classbuild.ai/${course.slug}/`}
+        target="_blank"
+        rel="noopener noreferrer"
+        style={{
+          display: 'block',
+          aspectRatio: '16 / 9',
+          overflow: 'hidden',
+          background: 'var(--cb-surface-sunken)',
+          borderBottom: '0.5px solid var(--cb-border-default)',
+        }}
+      >
+        <img
+          src={course.image}
+          alt={course.title}
+          loading="lazy"
+          style={{
+            width: '100%',
+            height: '100%',
+            objectFit: 'cover',
+            display: 'block',
+          }}
+        />
+      </a>
+
+      <div style={{ padding: '20px 22px' }}>
+        <div
+          className="cb-sc"
+          style={{
+            fontSize: 12,
+            color: 'var(--cb-accent-emphasis)',
+            letterSpacing: '0.14em',
+          }}
+        >
+          {course.audience}
         </div>
-        <p className="text-text-muted/70 text-xs mb-3">
-          Your API keys never leave your browser. No backend, no tracking, no accounts.
+        <h3
+          style={{
+            margin: '6px 0 4px',
+            fontSize: 24,
+            fontVariationSettings: '"opsz" 20',
+            fontWeight: 500,
+            letterSpacing: '-0.005em',
+            lineHeight: 1.2,
+            color: 'var(--cb-text-default)',
+          }}
+        >
+          {course.title}
+        </h3>
+        <p
+          className="cb-italic"
+          style={{
+            margin: '0 0 12px',
+            fontSize: 15,
+            color: 'var(--cb-text-muted)',
+            lineHeight: 1.45,
+          }}
+        >
+          {course.subtitle}
         </p>
-        <p className="text-text-muted/50 text-xs">
-          CanvasClassBuild — AI-assisted Canvas course builder
+        <p
+          style={{
+            margin: '0 0 16px',
+            fontSize: 15,
+            lineHeight: 1.6,
+            color: 'var(--cb-text-default)',
+          }}
+        >
+          {course.hook}
         </p>
-      </footer>
-    </div>
+
+        <div
+          style={{
+            display: 'flex',
+            gap: 8,
+            flexWrap: 'wrap',
+            marginBottom: 14,
+          }}
+        >
+          <CodexBadge tone="neutral">{course.chapters} chapters</CodexBadge>
+          {course.readingLength === 'Comprehensive' && (
+            <CodexBadge tone="neutral">Comprehensive</CodexBadge>
+          )}
+          <CodexBadge tone="neutral">{course.themeName} theme</CodexBadge>
+        </div>
+
+        <div
+          style={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'baseline',
+            paddingTop: 10,
+            borderTop: '0.5px solid var(--cb-border-subtle)',
+          }}
+        >
+          <a
+            href={`https://courses.classbuild.ai/${course.slug}/`}
+            target="_blank"
+            rel="noopener noreferrer"
+            style={{
+              fontSize: 15,
+              color: 'var(--cb-accent-link)',
+              textDecoration: 'underline',
+              textDecorationThickness: '0.5px',
+              textUnderlineOffset: 3,
+              // Generous tap target on touch screens.
+              padding: '8px 0',
+              display: 'inline-block',
+            }}
+          >
+            Explore course ↗
+          </a>
+          <button
+            type="button"
+            onClick={() => setExpanded((v) => !v)}
+            className="cb-focus"
+            style={{
+              background: 'transparent',
+              border: 0,
+              padding: '8px 0',
+              cursor: 'pointer',
+              fontFamily: 'inherit',
+              fontSize: 14.5,
+              color: 'var(--cb-text-muted)',
+              fontStyle: 'italic',
+            }}
+          >
+            {expanded ? 'hide input ↑' : 'see what we entered ↓'}
+          </button>
+        </div>
+      </div>
+
+      <AnimatePresence>
+        {expanded && (
+          <motion.div
+            initial={{ height: 0, opacity: 0 }}
+            animate={{ height: 'auto', opacity: 1 }}
+            exit={{ height: 0, opacity: 0 }}
+            transition={{ duration: 0.2 }}
+            style={{ overflow: 'hidden' }}
+          >
+            <div
+              style={{
+                padding: '16px 22px 20px',
+                background: 'var(--cb-surface-sunken)',
+                borderTop: '0.5px solid var(--cb-border-default)',
+              }}
+            >
+              <div
+                className="cb-sc"
+                style={{
+                  fontSize: 12,
+                  color: 'var(--cb-text-muted)',
+                  letterSpacing: '0.14em',
+                  marginBottom: 10,
+                }}
+              >
+                The brief
+              </div>
+              <dl
+                className="cb-land-brief-dl"
+                style={{
+                  margin: 0,
+                  display: 'grid',
+                  gridTemplateColumns: '120px 1fr',
+                  rowGap: 6,
+                  columnGap: 14,
+                  fontSize: 14.5,
+                  lineHeight: 1.5,
+                }}
+              >
+                {[
+                  ['Topic', course.input.topic],
+                  ['Level', course.input.level],
+                  ['Prior knowledge', course.input.priorKnowledge],
+                  ['Cohort', `${course.input.cohortSize} students`],
+                  ['Environment', course.input.environment],
+                  ['Reading length', course.readingLength],
+                  ['Theme', course.themeName],
+                  ['Voice', course.input.voice],
+                ].map(([k, v]) => (
+                  <div
+                    key={k}
+                    style={{ display: 'contents' }}
+                  >
+                    <dt
+                      className="cb-italic"
+                      style={{ color: 'var(--cb-text-muted)' }}
+                    >
+                      {k}
+                    </dt>
+                    <dd style={{ margin: 0, color: 'var(--cb-text-default)' }}>
+                      {v}
+                    </dd>
+                  </div>
+                ))}
+              </dl>
+              {course.input.additionalDetails && (
+                <div style={{ marginTop: 14 }}>
+                  <div
+                    className="cb-sc"
+                    style={{
+                      fontSize: 12,
+                      color: 'var(--cb-text-muted)',
+                      letterSpacing: '0.14em',
+                      marginBottom: 6,
+                    }}
+                  >
+                    Additional details
+                  </div>
+                  <p
+                    style={{
+                      margin: 0,
+                      padding: '12px 14px',
+                      background: 'var(--cb-ground-canvas)',
+                      border: '0.5px solid var(--cb-border-default)',
+                      fontSize: 14.5,
+                      lineHeight: 1.55,
+                      color: 'var(--cb-text-default)',
+                      whiteSpace: 'pre-line',
+                    }}
+                  >
+                    {course.input.additionalDetails}
+                  </p>
+                </div>
+              )}
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </article>
   );
 }
+
diff --git a/src/pages/ResearchPage.tsx b/src/pages/ResearchPage.tsx
index a0f6905..d5426d6 100644
--- a/src/pages/ResearchPage.tsx
+++ b/src/pages/ResearchPage.tsx
@@ -1,25 +1,35 @@
-import { useEffect, useState, useCallback, useRef } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { motion, AnimatePresence } from 'framer-motion';
 import { useCourseStore } from '../store/courseStore';
 import { useApiStore } from '../store/apiStore';
 import { useUiStore } from '../store/uiStore';
 import type { WebSearchResult } from '../services/llm/types';
 import { runResearch } from '../services/research';
-import { Button } from '../components/shared/Button';
-import type { ResearchDossier } from '../types/course';
-import { validateDois } from '../utils/doiValidator';
+import type { ResearchDossier, ResearchSource } from '../types/course';
+import { enrichDossier } from '../services/academic';
+import type { EnrichmentStats } from '../services/academic';
 import { isSafeHttpUrl } from '../utils/url';
 import { friendlyError } from '../utils/errors';
+import { CodexButton, CodexBadge } from '../components/codex';
 
-type ResearchPhase = 'idle' | 'thinking' | 'searching' | 'compiling' | 'validating';
+const ROMAN_UPPER = [
+  'I', 'II', 'III', 'IV', 'V', 'VI', 'VII', 'VIII', 'IX', 'X',
+  'XI', 'XII', 'XIII', 'XIV', 'XV', 'XVI', 'XVII', 'XVIII', 'XIX', 'XX',
+];
+const ROMAN_LOWER = [
+  'i', 'ii', 'iii', 'iv', 'v', 'vi', 'vii', 'viii', 'ix', 'x',
+  'xi', 'xii', 'xiii', 'xiv', 'xv', 'xvi', 'xvii', 'xviii', 'xix', 'xx',
+];
+
+type ResearchPhase = 'idle' | 'thinking' | 'searching' | 'compiling' | 'verifying';
 
 interface ChapterResearchState {
   phase: ResearchPhase;
   searchQueries: string[];
   webResults: WebSearchResult[];
   synthesisText: string;
-  doiResults: { valid: number; invalid: number } | null;
+  enrichment: EnrichmentStats | null;
+  verifyProgress: { done: number; total: number } | null;
   latestSource: WebSearchResult | null;
   error: string;
 }
@@ -29,156 +39,203 @@ const emptyResearchState: ChapterResearchState = {
   searchQueries: [],
   webResults: [],
   synthesisText: '',
-  doiResults: null,
+  enrichment: null,
+  verifyProgress: null,
   latestSource: null,
   error: '',
 };
 
 export function ResearchPage() {
   const navigate = useNavigate();
-  const { syllabus, researchDossiers, addResearchDossier, setStage, completeStage } = useCourseStore();
+  const {
+    syllabus,
+    researchDossiers,
+    addResearchDossier,
+    setStage,
+    completeStage,
+  } = useCourseStore();
   const { claudeApiKey, ollamaApiKey, tavilyApiKey, provider, researchBackend } = useApiStore();
-  // Active LLM key — used by tavily/wikipedia backends for query generation +
-  // synthesis (the anthropic backend is hardcoded to Claude regardless of the
-  // active provider, because only Claude exposes the web_search tool).
+  // Active LLM key — used by the tavily/wikipedia backends for query generation
+  // and synthesis. The anthropic backend is always Claude (only Claude exposes
+  // the web_search tool).
   const llmApiKey = provider === 'ollama' ? ollamaApiKey : claudeApiKey;
   const { setActiveTab } = useUiStore();
   const [currentChapter, setCurrentChapter] = useState(0);
   const [researchingSet, setResearchingSet] = useState<Set<number>>(new Set());
-  const [chapterStates, setChapterStates] = useState<Record<number, ChapterResearchState>>({});
+  const [chapterStates, setChapterStates] = useState<
+    Record<number, ChapterResearchState>
+  >({});
   const researchStarted = useRef(false);
 
   const isResearching = researchingSet.size > 0;
 
-  const updateChapterState = useCallback((chapterNum: number, updater: (prev: ChapterResearchState) => ChapterResearchState) => {
-    setChapterStates(prev => ({
-      ...prev,
-      [chapterNum]: updater(prev[chapterNum] || { ...emptyResearchState }),
-    }));
-  }, []);
+  const updateChapterState = useCallback(
+    (
+      chapterNum: number,
+      updater: (prev: ChapterResearchState) => ChapterResearchState,
+    ) => {
+      setChapterStates((prev) => ({
+        ...prev,
+        [chapterNum]: updater(prev[chapterNum] || { ...emptyResearchState }),
+      }));
+    },
+    [],
+  );
 
-  const researchChapter = useCallback(async (chapterIndex: number) => {
-    if (!syllabus) return;
-    const chapter = syllabus.chapters[chapterIndex];
-    const chapterNum = chapter.number;
-
-    // Don't start if already researching this chapter or already has dossier
-    if (researchingSet.has(chapterNum)) return;
-    if (researchDossiers.some(d => d.chapterNumber === chapterNum)) return;
-
-    setResearchingSet(prev => new Set(prev).add(chapterNum));
-    updateChapterState(chapterNum, () => ({ ...emptyResearchState, phase: 'thinking' }));
-
-    try {
-      const { dossier: rawDossier } = await runResearch(
-        researchBackend,
-        {
-          chapterNumber: chapterNum,
-          chapterTitle: chapter.title,
-          chapterNarrative: chapter.narrative,
-          keyConcepts: chapter.keyConcepts,
-          llmApiKey,
-          claudeApiKey,
-          tavilyApiKey,
-        },
-        (update) => {
-          updateChapterState(chapterNum, s => {
-            let next = { ...s };
-            if (update.phase) next.phase = update.phase;
-            if (update.appendQueries?.length) {
-              next = { ...next, searchQueries: [...next.searchQueries, ...update.appendQueries] };
-            }
-            if (update.appendResults?.length) {
-              const fresh = update.appendResults.filter(
-                r => !next.webResults.some(existing => existing.url === r.url),
-              );
-              next = { ...next, webResults: [...next.webResults, ...fresh] };
-            }
-            if (update.appendSynthesisText) {
-              next = { ...next, synthesisText: next.synthesisText + update.appendSynthesisText };
-            }
-            if (update.setLatestSource !== undefined) {
-              next = { ...next, latestSource: update.setLatestSource };
-            }
-            return next;
-          });
-        },
-      );
-
-      // Validate DOIs before storing
-      let dossier = rawDossier;
-      const doisToCheck = dossier.sources.map(s => s.doi).filter((d): d is string => !!d);
-      if (doisToCheck.length > 0) {
-        updateChapterState(chapterNum, s => ({ ...s, phase: 'validating' }));
-        try {
-          const validity = await validateDois(doisToCheck);
-          let validCount = 0;
-          let invalidCount = 0;
-          dossier = {
-            ...dossier,
-            sources: dossier.sources.map(s => {
-              if (s.doi && validity.has(s.doi)) {
-                if (validity.get(s.doi)) {
-                  validCount++;
-                  return s;
-                }
-                invalidCount++;
-                return { ...s, doi: undefined };
+  const researchChapter = useCallback(
+    async (chapterIndex: number) => {
+      if (!syllabus) return;
+      const chapter = syllabus.chapters[chapterIndex];
+      const chapterNum = chapter.number;
+
+      if (researchingSet.has(chapterNum)) return;
+      if (researchDossiers.some((d) => d.chapterNumber === chapterNum)) return;
+
+      setResearchingSet((prev) => new Set(prev).add(chapterNum));
+      updateChapterState(chapterNum, () => ({
+        ...emptyResearchState,
+        phase: 'thinking',
+      }));
+
+      try {
+        const { dossier: rawDossier } = await runResearch(
+          researchBackend,
+          {
+            chapterNumber: chapterNum,
+            chapterTitle: chapter.title,
+            chapterNarrative: chapter.narrative,
+            keyConcepts: chapter.keyConcepts,
+            llmApiKey,
+            claudeApiKey,
+            tavilyApiKey,
+          },
+          (update) => {
+            updateChapterState(chapterNum, (s) => {
+              let next = { ...s };
+              if (update.phase) next.phase = update.phase === 'validating' ? 'verifying' : update.phase;
+              if (update.appendQueries?.length) {
+                next = {
+                  ...next,
+                  searchQueries: [...next.searchQueries, ...update.appendQueries],
+                };
               }
-              return s;
-            }),
-          };
-          updateChapterState(chapterNum, s => ({ ...s, doiResults: { valid: validCount, invalid: invalidCount } }));
-        } catch {
-          // Validation failed — keep DOIs as-is
+              if (update.appendResults?.length) {
+                const fresh = update.appendResults.filter(
+                  (r) => !next.webResults.some((existing) => existing.url === r.url),
+                );
+                next = { ...next, webResults: [...next.webResults, ...fresh] };
+              }
+              if (update.appendSynthesisText) {
+                next = {
+                  ...next,
+                  synthesisText: next.synthesisText + update.appendSynthesisText,
+                };
+              }
+              if (update.setLatestSource !== undefined) {
+                next = { ...next, latestSource: update.setLatestSource };
+              }
+              return next;
+            });
+          },
+        );
+
+        let dossier = rawDossier;
+
+        if (dossier.sources.length > 0) {
+          const totalSources = dossier.sources.length;
+          updateChapterState(chapterNum, (s) => ({
+            ...s,
+            phase: 'verifying',
+            verifyProgress: { done: 0, total: totalSources },
+          }));
+          try {
+            const { dossier: enriched, stats } = await enrichDossier(dossier, {
+              concurrency: 4,
+              onProgress: (done, total) =>
+                updateChapterState(chapterNum, (s) => ({
+                  ...s,
+                  verifyProgress: { done, total },
+                })),
+            });
+            dossier = enriched;
+            updateChapterState(chapterNum, (s) => ({
+              ...s,
+              enrichment: stats,
+              verifyProgress: null,
+            }));
+          } catch {
+            // Enrichment failed — keep dossier as-is.
+            updateChapterState(chapterNum, (s) => ({
+              ...s,
+              verifyProgress: null,
+            }));
+          }
         }
-      }
 
-      addResearchDossier(dossier);
-    } catch (err) {
-      const message = friendlyError(err, 'Research failed.');
-      updateChapterState(chapterNum, s => ({ ...s, error: message }));
-
-      if (message.includes('web_search') || message.includes('tool')) {
-        const fallbackDossier: ResearchDossier = {
-          chapterNumber: chapterNum,
-          sources: [],
-          synthesisNotes: 'Web search unavailable. Chapter will be generated from model knowledge. Citations should be independently verified.',
-        };
-        addResearchDossier(fallbackDossier);
+        addResearchDossier(dossier);
+      } catch (err) {
+        const message = friendlyError(err, 'Research failed.');
+        updateChapterState(chapterNum, (s) => ({ ...s, error: message }));
+
+        if (message.includes('web_search') || message.includes('tool')) {
+          const fallbackDossier: ResearchDossier = {
+            chapterNumber: chapterNum,
+            sources: [],
+            synthesisNotes:
+              'Web search unavailable. Chapter will be generated from model knowledge. Citations should be independently verified.',
+          };
+          addResearchDossier(fallbackDossier);
+        }
+      } finally {
+        setResearchingSet((prev) => {
+          const next = new Set(prev);
+          next.delete(chapterNum);
+          return next;
+        });
+        updateChapterState(chapterNum, (s) => ({ ...s, phase: 'idle' }));
       }
-    } finally {
-      setResearchingSet(prev => {
-        const next = new Set(prev);
-        next.delete(chapterNum);
-        return next;
-      });
-      updateChapterState(chapterNum, s => ({ ...s, phase: 'idle' }));
-    }
-  }, [syllabus, claudeApiKey, llmApiKey, tavilyApiKey, researchBackend, addResearchDossier, updateChapterState, researchingSet, researchDossiers]);
+    },
+    [
+      syllabus,
+      claudeApiKey,
+      llmApiKey,
+      tavilyApiKey,
+      researchBackend,
+      addResearchDossier,
+      updateChapterState,
+      researchingSet,
+      researchDossiers,
+    ],
+  );
 
   // Backend-aware gate: don't auto-start if the selected backend is missing
-  // its prerequisite key. The user-facing notice below will offer next steps.
+  // its prerequisite key. The notice below offers next steps.
   const backendReady =
     (researchBackend === 'anthropic' && claudeApiKey.trim() !== '') ||
     (researchBackend === 'tavily' && tavilyApiKey.trim() !== '' && llmApiKey.trim() !== '') ||
     (researchBackend === 'wikipedia' && llmApiKey.trim() !== '');
 
-  // Auto-start first chapter research only when the backend is ready.
+  // Auto-start first chapter research on mount — only when the backend is ready.
   useEffect(() => {
     if (!backendReady) return;
-    if (syllabus && researchDossiers.length === 0 && !isResearching && !researchStarted.current) {
+    if (
+      syllabus &&
+      researchDossiers.length === 0 &&
+      !isResearching &&
+      !researchStarted.current
+    ) {
       researchStarted.current = true;
-      researchChapter(0);
+      void researchChapter(0);
     }
-  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   const researchAll = useCallback(async () => {
     if (!syllabus) return;
     const tasks: Promise<void>[] = [];
     for (let i = 0; i < syllabus.chapters.length; i++) {
       const ch = syllabus.chapters[i];
-      const hasDossier = researchDossiers.some(d => d.chapterNumber === ch.number);
+      const hasDossier = researchDossiers.some((d) => d.chapterNumber === ch.number);
       const isActive = researchingSet.has(ch.number);
       if (!hasDossier && !isActive) {
         tasks.push(researchChapter(i).catch(() => {}));
@@ -187,19 +244,6 @@ export function ResearchPage() {
     await Promise.allSettled(tasks);
   }, [syllabus, researchDossiers, researchingSet, researchChapter]);
 
-  const handleNext = () => {
-    if (!syllabus) return;
-    if (currentChapter < syllabus.chapters.length - 1) {
-      const next = currentChapter + 1;
-      setCurrentChapter(next);
-      const hasDossier = researchDossiers.some(d => d.chapterNumber === syllabus.chapters[next].number);
-      const isActive = researchingSet.has(syllabus.chapters[next].number);
-      if (!hasDossier && !isActive) {
-        researchChapter(next);
-      }
-    }
-  };
-
   const handleProceed = () => {
     completeStage('research');
     setStage('build');
@@ -214,13 +258,42 @@ export function ResearchPage() {
     navigate('/build');
   };
 
+  const handleSelectChapter = (chapterIndex: number) => {
+    if (!syllabus) return;
+    setCurrentChapter(chapterIndex);
+    const chapter = syllabus.chapters[chapterIndex];
+    const hasDossier = researchDossiers.some(
+      (d) => d.chapterNumber === chapter.number,
+    );
+    const isActive = researchingSet.has(chapter.number);
+    if (!hasDossier && !isActive) {
+      void researchChapter(chapterIndex);
+    }
+  };
+
   if (!syllabus) {
     return (
-      <div className="text-center py-20">
-        <p className="text-text-secondary">No syllabus generated yet. Please go back to the syllabus stage.</p>
-        <Button variant="secondary" className="mt-4" onClick={() => navigate('/syllabus')}>
-          Back to Syllabus
-        </Button>
+      <div
+        style={{
+          fontFamily: 'var(--font-cb-serif)',
+          padding: '64px 0',
+          textAlign: 'center',
+          color: 'var(--cb-text-default)',
+        }}
+      >
+        <p
+          className="cb-italic"
+          style={{
+            fontSize: 17,
+            color: 'var(--cb-text-muted)',
+            marginBottom: 18,
+          }}
+        >
+          No syllabus generated yet. Step back to the syllabus stage to start.
+        </p>
+        <CodexButton variant="secondary" onClick={() => navigate('/syllabus')}>
+          ← Back to syllabus
+        </CodexButton>
       </div>
     );
   }
@@ -233,358 +306,1181 @@ export function ResearchPage() {
           ? 'The Tavily backend needs both a Tavily key and an LLM key (Claude or Ollama) for query generation and synthesis.'
           : 'The Wikipedia backend needs an LLM key (Claude or Ollama) for query generation and synthesis.';
     return (
-      <div className="max-w-2xl mx-auto py-20 text-center">
-        <h1 className="text-3xl font-bold mb-3">Research backend not configured</h1>
-        <p className="text-text-secondary mb-6 leading-relaxed">{reason}</p>
-        <p className="text-text-muted text-sm mb-8">
-          Add the missing key in <strong>Setup</strong>, switch to a different research backend, or skip the research stage. Skipping just means chapters won't have an external research dossier — content generation still works.
+      <div
+        style={{
+          fontFamily: 'var(--font-cb-serif)',
+          color: 'var(--cb-text-default)',
+          maxWidth: 640,
+          margin: '0 auto',
+          padding: '80px 0',
+          textAlign: 'center',
+        }}
+      >
+        <h1
+          style={{
+            margin: '0 0 12px',
+            fontSize: 38,
+            lineHeight: 1.15,
+            fontWeight: 500,
+            fontVariationSettings: '"opsz" 32',
+          }}
+        >
+          Research backend not configured
+        </h1>
+        <p
+          className="cb-italic"
+          style={{ fontSize: 18, lineHeight: 1.55, color: 'var(--cb-text-muted)', margin: '0 0 16px' }}
+        >
+          {reason}
         </p>
-        <div className="flex items-center justify-center gap-3">
-          <Button variant="secondary" onClick={() => navigate('/setup')}>
+        <p style={{ fontSize: 14.5, lineHeight: 1.55, color: 'var(--cb-text-muted)', margin: '0 0 28px' }}>
+          Add the missing key in <strong>Setup</strong>, switch to a different research backend, or
+          skip the research stage. Skipping just means chapters won&apos;t have an external research
+          dossier to draw on.
+        </p>
+        <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
+          <CodexButton variant="secondary" onClick={() => navigate('/setup')}>
             Back to Setup
-          </Button>
-          <Button onClick={handleSkip}>Skip to Build</Button>
+          </CodexButton>
+          <CodexButton variant="primary" onClick={handleSkip}>
+            Skip to Build
+          </CodexButton>
         </div>
       </div>
     );
   }
 
-  const currentChapterNum = syllabus.chapters[currentChapter]?.number;
+  const totalChapters = syllabus.chapters.length;
+  const completedCount = researchDossiers.length;
+  const remainingCount = totalChapters - completedCount - researchingSet.size;
+  const unresearchedCount = syllabus.chapters.filter(
+    (ch) =>
+      !researchDossiers.some((d) => d.chapterNumber === ch.number) &&
+      !researchingSet.has(ch.number),
+  ).length;
+
+  const currentSyllabusChapter = syllabus.chapters[currentChapter];
+  const currentChapterNum = currentSyllabusChapter?.number;
   const currentDossier = researchDossiers.find(
-    d => d.chapterNumber === currentChapterNum
+    (d) => d.chapterNumber === currentChapterNum,
   );
-  const currentState = chapterStates[currentChapterNum] || emptyResearchState;
+  const currentState =
+    chapterStates[currentChapterNum] ?? emptyResearchState;
   const isCurrentResearching = researchingSet.has(currentChapterNum);
 
-  const { phase, searchQueries, webResults, synthesisText, latestSource, doiResults, error: chapterError } = currentState;
-
-  const phaseLabel =
-    phase === 'thinking' ? 'Planning research strategy...' :
-    phase === 'searching' ? `Searching academic databases... (${webResults.length} sources found)` :
-    phase === 'compiling' ? 'Compiling research dossier...' :
-    phase === 'validating' ? 'Verifying DOIs against doi.org...' :
-    '';
-
-  // Build the streaming window content based on phase
-  let streamContent = '';
-  if (phase === 'thinking') {
-    streamContent = '';
-  } else if (phase === 'searching') {
-    const recentQueries = searchQueries.slice(-3);
-    const lines: string[] = [];
-    for (const q of recentQueries) {
-      lines.push(`> search: ${q}`);
-    }
-    if (latestSource) {
-      lines.push('');
-      lines.push(`  ${latestSource.title}`);
-      lines.push(`  ${latestSource.url}`);
-    }
-    streamContent = lines.join('\n');
-  } else if (phase === 'compiling') {
-    streamContent = synthesisText;
-  }
+  return (
+    <div
+      style={{
+        fontFamily: 'var(--font-cb-serif)',
+        color: 'var(--cb-text-default)',
+        padding: '32px 0 56px',
+      }}
+    >
+      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
+        <PageHeader
+          completed={completedCount}
+          total={totalChapters}
+          isResearching={isResearching}
+          onSkip={handleProceed}
+          onResearchAll={() => void researchAll()}
+          onProceed={handleProceed}
+          canProceed={completedCount > 0 || (!isResearching && remainingCount > 0)}
+          showSkip={completedCount === 0 && !isResearching}
+          showResearchAll={unresearchedCount > 1}
+        />
 
-  const unresearchedCount = syllabus.chapters.filter(ch =>
-    !researchDossiers.some(d => d.chapterNumber === ch.number) && !researchingSet.has(ch.number)
-  ).length;
+        <div
+          className="cb-research-grid"
+          style={{
+            display: 'grid',
+            gridTemplateColumns: '280px minmax(0, 1fr)',
+            gap: 36,
+            alignItems: 'start',
+          }}
+        >
+          <DossierList
+            chapters={syllabus.chapters.map((c, i) => ({
+              index: i,
+              number: c.number,
+              title: c.title,
+              dossier: researchDossiers.find((d) => d.chapterNumber === c.number),
+              state:
+                chapterStates[c.number] ?? emptyResearchState,
+              isResearching: researchingSet.has(c.number),
+            }))}
+            currentIndex={currentChapter}
+            onSelect={handleSelectChapter}
+          />
+
+          <DossierPanel
+            chapterNumber={currentChapterNum}
+            chapterTitle={currentSyllabusChapter?.title ?? ''}
+            chapterNarrative={currentSyllabusChapter?.narrative ?? ''}
+            dossier={currentDossier}
+            state={currentState}
+            isResearching={isCurrentResearching}
+            onStart={() => void researchChapter(currentChapter)}
+          />
+        </div>
+
+        {!isResearching && <div className="cb-folio">— 03 —</div>}
+      </div>
+    </div>
+  );
+}
+
+// ─── PageHeader ──────────────────────────────────────────────────────────
+
+function PageHeader({
+  completed,
+  total,
+  isResearching,
+  onSkip,
+  onResearchAll,
+  onProceed,
+  canProceed,
+  showSkip,
+  showResearchAll,
+}: {
+  completed: number;
+  total: number;
+  isResearching: boolean;
+  onSkip: () => void;
+  onResearchAll: () => void;
+  onProceed: () => void;
+  canProceed: boolean;
+  showSkip: boolean;
+  showResearchAll: boolean;
+}) {
+  const progress = isResearching
+    ? `Researching · ${completed} of ${total} chapters complete.`
+    : completed === total
+    ? `— ${total} ${plural('chapter', total)} researched.`
+    : completed > 0
+    ? `${completed} of ${total} chapters researched · ${total - completed} remaining.`
+    : `Optional · grounds each chapter in cited sources. Researching a few chapters takes a few minutes; you can skip and let ClassBuild draft from model knowledge instead.`;
 
   return (
-    <motion.div
-      initial={{ opacity: 0 }}
-      animate={{ opacity: 1 }}
-      className="max-w-5xl mx-auto py-8"
+    <header
+      className="cb-page-head"
+      style={{
+        display: 'grid',
+        gridTemplateColumns: '1fr auto',
+        gap: 24,
+        alignItems: 'flex-end',
+        paddingBottom: 14,
+        marginBottom: 24,
+        borderBottom: '0.5px solid var(--cb-border-rule)',
+      }}
     >
-      <div className="flex items-center justify-between mb-8">
-        <div>
-          <h1 className="text-3xl font-bold mb-2">Research Dossiers</h1>
-          <p className="text-text-secondary">
-            Building research foundations with real academic sources.
-          </p>
-          <p className="text-xs text-text-muted mt-1">
-            Research is optional — you can proceed after one class or research all {syllabus.chapters.length}. Each takes ~60 seconds.
-          </p>
+      <div style={{ minWidth: 0 }}>
+        <div
+          className="cb-sc"
+          style={{
+            fontSize: 13,
+            color: 'var(--cb-accent-emphasis)',
+            letterSpacing: '0.16em',
+          }}
+        >
+          Research dossiers
         </div>
-        <div className="flex gap-3">
-          {researchingSet.size === 0 && researchDossiers.length === 0 && (
-            <Button variant="ghost" size="sm" onClick={handleSkip}>
-              Skip Research
-            </Button>
-          )}
-          <Button size="sm" onClick={handleProceed} disabled={researchDossiers.length === 0 && researchingSet.size > 0}>
-            Continue to Build
-            <svg className="ml-1.5 w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-              <line x1="5" y1="12" x2="19" y2="12" />
-              <polyline points="12 5 19 12 12 19" />
-            </svg>
-          </Button>
+        <h1
+          style={{
+            margin: '4px 0 6px',
+            fontSize: 26,
+            lineHeight: 1.25,
+            fontWeight: 500,
+            fontVariationSettings: '"opsz" 20',
+            letterSpacing: '-0.005em',
+            color: 'var(--cb-text-default)',
+          }}
+        >
+          What does ClassBuild{' '}
+          <span
+            className="cb-italic"
+            style={{ color: 'var(--cb-accent-emphasis)' }}
+          >
+            know
+          </span>{' '}
+          about this material?
+        </h1>
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'baseline',
+            gap: 8,
+            fontSize: 15,
+            lineHeight: 1.5,
+            color: 'var(--cb-text-muted)',
+          }}
+        >
+          {isResearching && <PenStroke width={48} />}
+          <span className="cb-italic">{progress}</span>
         </div>
       </div>
 
-      {chapterError && (
-        <div className="mb-6 p-4 rounded-lg bg-error/10 border border-error/20 text-error text-sm">
-          {chapterError}
-          {chapterError.includes('web_search') && (
-            <p className="mt-2 text-text-muted">Falling back to AI-generated research. Sources should be independently verified.</p>
-          )}
-        </div>
-      )}
-
-      {/* Chapter selector */}
-      <div className="flex items-center gap-3 mb-3">
-        <span className="text-xs text-text-muted">
-          {researchDossiers.length} of {syllabus.chapters.length} classes researched
-        </span>
-        {unresearchedCount > 0 && !isResearching && (
-          <span className="text-xs text-violet-400">— click a class tab to research it</span>
+      <div
+        className="cb-page-head-actions"
+        style={{ display: 'flex', gap: 10, flexShrink: 0, alignItems: 'baseline', flexWrap: 'wrap' }}
+      >
+        {showSkip && (
+          <CodexButton variant="ghost" size="sm" onClick={onSkip}>
+            Skip research
+          </CodexButton>
         )}
-        {unresearchedCount > 1 && (
-          <button
-            onClick={researchAll}
-            className="text-xs text-text-muted hover:text-violet-400 transition cursor-pointer bg-transparent border-0 underline underline-offset-2"
+        {showResearchAll && (
+          <CodexButton
+            variant="secondary"
+            size="sm"
+            onClick={onResearchAll}
+            disabled={isResearching}
           >
             Research all remaining
-          </button>
+          </CodexButton>
         )}
+        <CodexButton
+          variant="primary"
+          size="sm"
+          onClick={onProceed}
+          disabled={!canProceed}
+          title={!canProceed ? 'Research at least one chapter before proceeding.' : undefined}
+        >
+          {isResearching && completed === 0
+            ? 'Begin build · researching…'
+            : 'Begin build →'}
+        </CodexButton>
       </div>
-      <div className="flex gap-2 mb-6 overflow-x-auto pb-2">
-        {syllabus.chapters.map((ch, i) => {
-          const hasDossier = researchDossiers.some(d => d.chapterNumber === ch.number);
-          const isActive = researchingSet.has(ch.number);
-          return (
+    </header>
+  );
+}
+
+// ─── DossierList ─────────────────────────────────────────────────────────
+
+interface DossierListItem {
+  index: number;
+  number: number;
+  title: string;
+  dossier?: ResearchDossier;
+  state: ChapterResearchState;
+  isResearching: boolean;
+}
+
+function DossierList({
+  chapters,
+  currentIndex,
+  onSelect,
+}: {
+  chapters: DossierListItem[];
+  currentIndex: number;
+  onSelect: (i: number) => void;
+}) {
+  return (
+    <section>
+      <div
+        className="cb-sc"
+        style={{
+          fontSize: 13,
+          color: 'var(--cb-text-muted)',
+          letterSpacing: '0.14em',
+          marginBottom: 12,
+        }}
+      >
+        Dossiers
+      </div>
+      <div style={{ display: 'grid', gap: 6 }}>
+        {chapters.map((c) => (
+          <DossierCard
+            key={c.number}
+            item={c}
+            selected={c.index === currentIndex}
+            onClick={() => onSelect(c.index)}
+          />
+        ))}
+      </div>
+    </section>
+  );
+}
+
+function DossierCard({
+  item,
+  selected,
+  onClick,
+}: {
+  item: DossierListItem;
+  selected: boolean;
+  onClick: () => void;
+}) {
+  const status: 'cited' | 'drafting' | 'queued' = item.dossier
+    ? 'cited'
+    : item.isResearching
+    ? 'drafting'
+    : 'queued';
+
+  const cited = item.dossier?.sources.length ?? 0;
+  const evaluated = item.state.webResults.length;
+  const queries = item.state.searchQueries.length;
+
+  const meta =
+    status === 'cited'
+      ? evaluated > cited
+        ? `${evaluated} evaluated · ${cited} cited`
+        : `${cited} ${plural('source', cited)} cited`
+      : status === 'drafting'
+      ? phaseLabel(item.state.phase, evaluated, queries)
+      : 'awaiting';
+
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className="cb-focus"
+      style={{
+        position: 'relative',
+        textAlign: 'left',
+        padding: '12px 14px 12px 16px',
+        background: selected
+          ? 'var(--cb-accent-emphasis-quiet)'
+          : 'var(--cb-ground-page)',
+        border: `1px solid ${selected ? 'var(--cb-accent-emphasis)' : 'var(--cb-border-default)'}`,
+        borderRadius: 1.5,
+        cursor: 'pointer',
+        fontFamily: 'inherit',
+        color: 'var(--cb-text-default)',
+        display: 'grid',
+        gridTemplateColumns: '38px 1fr auto',
+        alignItems: 'baseline',
+        gap: 12,
+        transition: 'border-color 200ms cubic-bezier(0.32,0.04,0.32,1)',
+      }}
+    >
+      {selected && (
+        <span
+          aria-hidden
+          style={{
+            position: 'absolute',
+            left: -2,
+            top: -1,
+            bottom: -1,
+            width: 2,
+            background: 'var(--cb-accent-emphasis)',
+          }}
+        />
+      )}
+      <span
+        className="cb-italic"
+        style={{
+          fontSize: 20,
+          color:
+            status === 'queued'
+              ? 'var(--cb-text-subtle)'
+              : 'var(--cb-accent-emphasis)',
+          lineHeight: 1,
+          fontVariationSettings: '"opsz" 16',
+        }}
+      >
+        {ROMAN_UPPER[item.index] ?? String(item.index + 1)}
+      </span>
+      <div style={{ minWidth: 0 }}>
+        <div
+          style={{
+            fontSize: 15,
+            lineHeight: 1.3,
+            color:
+              status === 'queued'
+                ? 'var(--cb-text-muted)'
+                : 'var(--cb-text-default)',
+            fontWeight: status === 'queued' ? 400 : 500,
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            display: '-webkit-box',
+            WebkitLineClamp: 2,
+            WebkitBoxOrient: 'vertical',
+          }}
+        >
+          {item.title}
+        </div>
+        <div
+          className="cb-italic"
+          style={{
+            fontSize: 13.5,
+            color:
+              status === 'drafting'
+                ? 'var(--cb-accent-emphasis)'
+                : 'var(--cb-text-muted)',
+            marginTop: 2,
+          }}
+        >
+          {meta}
+        </div>
+      </div>
+      <div>
+        <CodexBadge
+          tone={
+            status === 'cited'
+              ? 'success'
+              : status === 'drafting'
+              ? 'emphasis'
+              : 'neutral'
+          }
+        >
+          {status}
+        </CodexBadge>
+      </div>
+    </button>
+  );
+}
+
+// ─── DossierPanel ────────────────────────────────────────────────────────
+
+function DossierPanel({
+  chapterNumber,
+  chapterTitle,
+  chapterNarrative,
+  dossier,
+  state,
+  isResearching,
+  onStart,
+}: {
+  chapterNumber: number;
+  chapterTitle: string;
+  chapterNarrative: string;
+  dossier?: ResearchDossier;
+  state: ChapterResearchState;
+  isResearching: boolean;
+  onStart: () => void;
+}) {
+  const status: 'cited' | 'drafting' | 'queued' = dossier
+    ? 'cited'
+    : isResearching
+    ? 'drafting'
+    : 'queued';
+
+  const showEmpty = !dossier && !isResearching;
+  const hasQueries = state.searchQueries.length > 0;
+  // Cited sources + synthesis render only from a parsed dossier — never from raw
+  // streaming output. While the model is mid-stream, the JSON isn't valid yet.
+  const showCitedSources = !!dossier && dossier.sources.length > 0;
+  const showSynthesis = !!dossier && !!dossier.synthesisNotes?.trim();
+
+  const ordinal = (() => {
+    const i = Math.max(0, chapterNumber - 1);
+    return ROMAN_UPPER[i] ?? String(chapterNumber);
+  })();
+
+  return (
+    <section>
+      <div
+        style={{
+          background: 'var(--cb-ground-page)',
+          border: '1px solid var(--cb-border-default)',
+          borderRadius: 2,
+          padding: 32,
+        }}
+      >
+        {/* Head */}
+        <div
+          style={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'baseline',
+            paddingBottom: 14,
+            borderBottom: '0.5px solid var(--cb-border-rule)',
+            gap: 16,
+          }}
+        >
+          <div style={{ minWidth: 0 }}>
+            <div
+              className="cb-sc"
+              style={{
+                fontSize: 13,
+                color: 'var(--cb-text-muted)',
+                letterSpacing: '0.14em',
+              }}
+            >
+              Chapter dossier
+            </div>
+            <div
+              style={{
+                display: 'flex',
+                alignItems: 'baseline',
+                gap: 14,
+                marginTop: 6,
+              }}
+            >
+              <span
+                className="cb-italic"
+                style={{
+                  fontSize: 28,
+                  color: 'var(--cb-accent-emphasis)',
+                  lineHeight: 1,
+                  fontVariationSettings: '"opsz" 22',
+                }}
+              >
+                {ordinal}
+              </span>
+              <span
+                style={{
+                  fontSize: 24,
+                  fontWeight: 500,
+                  fontVariationSettings: '"opsz" 20',
+                  color: 'var(--cb-text-default)',
+                  lineHeight: 1.25,
+                  letterSpacing: '-0.005em',
+                }}
+              >
+                {chapterTitle}
+              </span>
+            </div>
+          </div>
+          <CodexBadge
+            tone={
+              status === 'cited'
+                ? 'success'
+                : status === 'drafting'
+                ? 'emphasis'
+                : 'neutral'
+            }
+          >
+            {status === 'cited'
+              ? 'cited · ready'
+              : status === 'drafting'
+              ? phaseLabel(state.phase, state.webResults.length, state.searchQueries.length)
+              : 'awaiting'}
+          </CodexBadge>
+        </div>
+
+        {/* Error */}
+        {state.error && (
+          <div
+            style={{
+              marginTop: 18,
+              padding: '14px 16px',
+              background: 'var(--cb-status-danger-bg)',
+              borderLeft: '2px solid var(--cb-status-danger)',
+              fontSize: 14.5,
+              lineHeight: 1.55,
+              color: 'var(--cb-text-default)',
+            }}
+          >
+            <div>{state.error}</div>
+            {state.error.includes('web_search') && (
+              <p
+                className="cb-italic"
+                style={{
+                  margin: '6px 0 0',
+                  fontSize: 13.5,
+                  color: 'var(--cb-text-muted)',
+                }}
+              >
+                Web search isn't responding. You can retry, or proceed with what's drafted.
+              </p>
+            )}
             <button
-              key={ch.number}
-              onClick={() => {
-                setCurrentChapter(i);
-                if (!hasDossier && !isActive) researchChapter(i);
+              type="button"
+              onClick={onStart}
+              disabled={isResearching}
+              className="cb-mono cb-focus"
+              style={{
+                marginTop: 12,
+                background: 'transparent',
+                border: '1px solid var(--cb-border-strong)',
+                padding: '5px 12px',
+                borderRadius: 2,
+                fontSize: 11,
+                letterSpacing: '0.12em',
+                textTransform: 'uppercase',
+                color: 'var(--cb-text-default)',
+                cursor: isResearching ? 'wait' : 'pointer',
+                opacity: isResearching ? 0.5 : 1,
               }}
-              className={`relative flex items-center gap-1.5 px-3 py-1.5 text-xs rounded-lg shrink-0 transition-all cursor-pointer ${
-                i === currentChapter
-                  ? 'bg-violet-500 text-white'
-                  : hasDossier
-                  ? 'bg-violet-500/15 text-violet-400'
-                  : 'bg-bg-elevated text-text-muted hover:text-text-secondary'
-              }`}
             >
-              {isActive && (
-                <motion.span
-                  className={`w-1.5 h-1.5 rounded-full shrink-0 ${i === currentChapter ? 'bg-white' : 'bg-violet-500'}`}
-                  animate={{ opacity: [1, 0.3, 1] }}
-                  transition={{ duration: 1.2, repeat: Infinity }}
-                />
-              )}
-              {hasDossier && !isActive && (
-                <span className={`w-1.5 h-1.5 rounded-full shrink-0 ${i === currentChapter ? 'bg-white' : 'bg-emerald-400'}`} />
-              )}
-              Class {ch.number}
+              {isResearching ? 'retrying…' : 'retry research ↻'}
             </button>
-          );
-        })}
+          </div>
+        )}
+
+        {/* Abstract — italic muted, visible across all phases */}
+        {chapterNarrative && (
+          <p
+            className="cb-italic"
+            style={{
+              margin: '18px 0 0',
+              fontSize: 15,
+              lineHeight: 1.55,
+              color: 'var(--cb-text-muted)',
+              maxWidth: '72ch',
+            }}
+          >
+            {chapterNarrative.length > 260
+              ? `${chapterNarrative.slice(0, 260).trimEnd()}…`
+              : chapterNarrative}
+          </p>
+        )}
+
+        {/* Live status — visible during all research phases */}
+        {isResearching && (
+          <StatusLine
+            phase={state.phase}
+            queries={state.searchQueries.length}
+            verifyProgress={state.verifyProgress}
+          />
+        )}
+
+        {/* Search queries — appear as they stream, settle as a numbered list */}
+        {hasQueries && (
+          <SearchQueriesSection queries={state.searchQueries} />
+        )}
+
+        {/* Synthesis — frames the chapter; lives above the cited sources */}
+        {showSynthesis && <SynthesisSection text={dossier.synthesisNotes} />}
+
+        {/* Cited sources — the evidence base */}
+        {showCitedSources && (
+          <CitedSourcesSection
+            sources={dossier.sources}
+            evaluated={state.webResults.length}
+            enrichment={state.enrichment}
+          />
+        )}
+
+        {/* Empty state */}
+        {showEmpty && (
+          <div style={{ padding: '36px 0', textAlign: 'center' }}>
+            <p
+              className="cb-italic"
+              style={{
+                fontSize: 15,
+                color: 'var(--cb-text-muted)',
+                margin: '0 0 16px',
+                lineHeight: 1.55,
+              }}
+            >
+              No research yet for this chapter. ClassBuild will run web searches,
+              cite peer-reviewed sources, and verify DOIs — give it a minute or two.
+            </p>
+            <CodexButton variant="primary" size="sm" onClick={onStart}>
+              Start research
+            </CodexButton>
+          </div>
+        )}
+
+        {/* Foot summary — only when settled. Honest one-liner, no query leak. */}
+        {dossier && dossier.sources.length > 0 && (
+          <FootSummary sources={dossier.sources} enrichment={state.enrichment} />
+        )}
+      </div>
+    </section>
+  );
+}
+
+// ─── StatusLine ──────────────────────────────────────────────────────────
+
+function StatusLine({
+  phase,
+  queries,
+  verifyProgress,
+}: {
+  phase: ResearchPhase;
+  queries: number;
+  verifyProgress: { done: number; total: number } | null;
+}) {
+  const label =
+    phase === 'thinking'
+      ? 'Planning research strategy…'
+      : phase === 'searching'
+      ? `Searching · ${queries} ${plural('query', queries, 'queries')} underway…`
+      : phase === 'compiling'
+      ? 'Compiling sources…'
+      : phase === 'verifying'
+      ? verifyProgress
+        ? `Verifying against Semantic Scholar, Crossref, Unpaywall · ${verifyProgress.done} of ${verifyProgress.total}…`
+        : 'Verifying sources against Semantic Scholar, Crossref, Unpaywall…'
+      : 'Drafting…';
+  return (
+    <div
+      style={{
+        display: 'flex',
+        alignItems: 'baseline',
+        gap: 12,
+        marginTop: 18,
+      }}
+    >
+      <PenStroke width={48} />
+      <span
+        className="cb-italic"
+        style={{
+          fontSize: 15,
+          color: 'var(--cb-text-muted)',
+          lineHeight: 1.5,
+        }}
+      >
+        {label}
+      </span>
+    </div>
+  );
+}
+
+// ─── SearchQueriesSection ────────────────────────────────────────────────
+
+function SearchQueriesSection({ queries }: { queries: string[] }) {
+  return (
+    <div style={{ marginTop: 22 }}>
+      <div
+        className="cb-sc"
+        style={{
+          fontSize: 13,
+          color: 'var(--cb-text-muted)',
+          letterSpacing: '0.14em',
+          marginBottom: 4,
+        }}
+      >
+        Search queries · {queries.length}
       </div>
+      <ol style={{ listStyle: 'none', padding: 0, margin: 0 }}>
+        {queries.map((q, i) => (
+          <li
+            key={i}
+            style={{
+              display: 'grid',
+              gridTemplateColumns: '32px 1fr',
+              gap: 12,
+              padding: '8px 0',
+              borderTop:
+                i === 0 ? 'none' : '0.5px solid var(--cb-border-subtle)',
+              alignItems: 'baseline',
+            }}
+          >
+            <span
+              className="cb-italic"
+              style={{
+                color: 'var(--cb-accent-emphasis)',
+                fontSize: 14.5,
+                fontVariationSettings: '"opsz" 12',
+              }}
+            >
+              {ROMAN_LOWER[i] ?? String(i + 1)}.
+            </span>
+            <span
+              className="cb-mono"
+              style={{
+                fontSize: 13.5,
+                lineHeight: 1.55,
+                color: 'var(--cb-text-default)',
+                wordBreak: 'break-word',
+                maxWidth: '80ch',
+                letterSpacing: '0.01em',
+              }}
+            >
+              {q}
+            </span>
+          </li>
+        ))}
+      </ol>
+    </div>
+  );
+}
+
+// ─── CitedSourcesSection ────────────────────────────────────────────────
 
-      {/* Current chapter research */}
-      <div className="bg-bg-card border border-violet-500/10 rounded-xl p-6">
-        <h2 className="text-xl font-semibold mb-1">
-          Class {syllabus.chapters[currentChapter].number}: {syllabus.chapters[currentChapter].title}
-        </h2>
-        <p className="text-sm text-text-muted mb-6">
-          {syllabus.chapters[currentChapter].narrative.slice(0, 200)}...
+function CitedSourcesSection({
+  sources,
+  evaluated,
+  enrichment,
+}: {
+  sources: ResearchSource[];
+  evaluated: number;
+  enrichment: EnrichmentStats | null;
+}) {
+  if (sources.length === 0) return null;
+  const showEvaluated = evaluated > sources.length;
+  const unverifiedCount = enrichment?.unverified ?? 0;
+  const hasUnverified = sources.some((s) => s.isVerified === false);
+
+  return (
+    <div style={{ marginTop: 24 }}>
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'baseline',
+          justifyContent: 'space-between',
+          marginBottom: 10,
+          gap: 14,
+          flexWrap: 'wrap',
+        }}
+      >
+        <div
+          className="cb-sc"
+          style={{
+            fontSize: 13,
+            color: 'var(--cb-text-muted)',
+            letterSpacing: '0.14em',
+          }}
+        >
+          {showEvaluated
+            ? `Cited sources · ${evaluated} evaluated · ${sources.length} cited`
+            : `Cited sources · ${sources.length}`}
+        </div>
+        {unverifiedCount > 0 && (
+          <span
+            className="cb-italic"
+            style={{ fontSize: 13.5, color: 'var(--cb-status-warning)' }}
+          >
+            {unverifiedCount} {plural('source', unverifiedCount)} unverified
+          </span>
+        )}
+      </div>
+      <ol style={{ listStyle: 'none', padding: 0, margin: 0 }}>
+        {sources.map((s, i) => (
+          <Citation key={i} source={s} index={i} />
+        ))}
+      </ol>
+      {hasUnverified && (
+        <p
+          className="cb-italic"
+          style={{
+            margin: '12px 0 0',
+            fontSize: 13.5,
+            lineHeight: 1.55,
+            color: 'var(--cb-text-muted)',
+            maxWidth: '72ch',
+          }}
+        >
+          Unverified references are drafted from the model's knowledge. Check
+          them before teaching.
         </p>
+      )}
+    </div>
+  );
+}
+
+// ─── Citation ────────────────────────────────────────────────────────────
 
-        {/* Streaming preview window — visible during all active phases */}
-        <AnimatePresence>
-          {isCurrentResearching && !currentDossier && (
-            <motion.div
-              initial={{ opacity: 0, height: 0 }}
-              animate={{ opacity: 1, height: 'auto' }}
-              exit={{ opacity: 0, height: 0 }}
-              transition={{ duration: 0.4, ease: 'easeInOut' }}
-              className="mb-6 overflow-hidden"
+function Citation({ source, index }: { source: ResearchSource; index: number }) {
+  const [open, setOpen] = useState(false);
+  const hasSummary = !!source.summary?.trim();
+  const hasResource =
+    (source.url && isSafeHttpUrl(source.url)) || !!source.doi;
+
+  return (
+    <li
+      style={{
+        display: 'grid',
+        gridTemplateColumns: '24px 1fr',
+        gap: 10,
+        padding: '12px 0',
+        borderTop: '0.5px solid var(--cb-border-subtle)',
+        alignItems: 'baseline',
+      }}
+    >
+      <span
+        className="cb-italic"
+        style={{ color: 'var(--cb-accent-emphasis)', fontSize: 14.5 }}
+      >
+        {ROMAN_LOWER[index] ?? String(index + 1)}.
+      </span>
+      <div style={{ minWidth: 0 }}>
+        {/* Title + author/year — full width, no measure cap (it's one line). */}
+        <div
+          style={{
+            fontSize: 15.5,
+            lineHeight: 1.4,
+            color: 'var(--cb-text-default)',
+          }}
+        >
+          {source.title}
+          {source.authors && (
+            <span
+              className="cb-italic"
+              style={{
+                color: 'var(--cb-text-muted)',
+                fontWeight: 400,
+              }}
             >
-              <div className="bg-bg-elevated/50 border border-violet-500/15 rounded-xl p-5">
-                {/* Phase indicator */}
-                <div className="flex items-center justify-between mb-3">
-                  <div className="flex items-center gap-3">
-                    <div className="relative">
-                      <div className="w-2.5 h-2.5 rounded-full bg-violet-500" />
-                      <div className="absolute inset-0 w-2.5 h-2.5 rounded-full bg-violet-500 animate-ping" />
-                    </div>
-                    <span className="text-sm font-medium text-violet-400">
-                      {phaseLabel}
-                    </span>
-                  </div>
-                  {phase === 'searching' && webResults.length > 0 && (
-                    <span className="text-xs text-text-muted tabular-nums">
-                      {webResults.length} sources
-                    </span>
-                  )}
-                </div>
-
-                {/* Stream content window */}
-                {(streamContent || phase === 'thinking') && (
-                  <div className="relative">
-                    <div className="text-xs text-text-muted/60 font-mono leading-relaxed max-h-32 overflow-hidden whitespace-pre-wrap">
-                      {phase === 'thinking' ? '' : streamContent.slice(-600)}
-                    </div>
-                    {streamContent && (
-                      <div className="absolute bottom-0 left-0 right-0 h-10 bg-gradient-to-t from-bg-elevated/50 to-transparent" />
-                    )}
-                  </div>
-                )}
-
-                {/* Search queries ticker */}
-                {phase === 'searching' && searchQueries.length > 0 && (
-                  <div className="mt-3 pt-3 border-t border-violet-500/10">
-                    <div className="flex items-center gap-2.5 text-sm">
-                      <svg className="w-3.5 h-3.5 text-violet-400 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                        <circle cx="11" cy="11" r="8" />
-                        <line x1="21" y1="21" x2="16.65" y2="16.65" />
-                      </svg>
-                      <span className="text-violet-400 text-xs truncate">
-                        {searchQueries[searchQueries.length - 1]}
-                      </span>
-                    </div>
-                    {searchQueries.length > 1 && (
-                      <div className="mt-1.5 flex flex-wrap gap-x-3 gap-y-1">
-                        {searchQueries.slice(0, -1).map((q, i) => (
-                          <span key={i} className="text-[11px] text-text-muted/50 truncate max-w-[250px]">
-                            {q}
-                          </span>
-                        ))}
-                      </div>
-                    )}
-                  </div>
-                )}
-              </div>
-            </motion.div>
+              {' '}— {source.authors}
+              {source.year ? `, ${source.year}` : ''}
+            </span>
           )}
-        </AnimatePresence>
-
-        {/* DOI validation status — shown briefly after streaming window collapses */}
-        <AnimatePresence>
-          {phase === 'validating' && (
-            <motion.div
-              initial={{ opacity: 0 }}
-              animate={{ opacity: 1 }}
-              exit={{ opacity: 0 }}
-              className="mb-4 flex items-center gap-2.5 p-3 rounded-lg bg-violet-500/5 border border-violet-500/10"
+          {source.isVerified === false && (
+            <span
+              title="AI-cited — verify this reference before teaching from it."
+              style={{ marginLeft: 8 }}
             >
-              <motion.div
-                className="w-4 h-4 border-2 border-violet-500 border-t-transparent rounded-full shrink-0"
-                animate={{ rotate: 360 }}
-                transition={{ duration: 1, repeat: Infinity, ease: 'linear' }}
-              />
-              <span className="text-xs text-violet-400">Verifying DOIs against doi.org...</span>
-            </motion.div>
+              <CodexBadge tone="warning">unverified</CodexBadge>
+            </span>
           )}
-        </AnimatePresence>
-        {doiResults && phase !== 'validating' && currentDossier && (
-          <div className="mb-4 p-3 rounded-lg bg-bg-card border border-violet-500/10 text-xs text-text-muted">
-            DOI verification: {doiResults.valid} valid{doiResults.invalid > 0 && (
-              <>, <span className="text-amber-400">{doiResults.invalid} invalid (removed)</span></>
-            )}
+        </div>
+
+        {/* "used for:" — capped to 72ch */}
+        {source.relevance && (
+          <div
+            className="cb-italic"
+            style={{
+              fontSize: 13.5,
+              color: 'var(--cb-accent-emphasis)',
+              marginTop: 4,
+              maxWidth: '72ch',
+              lineHeight: 1.5,
+            }}
+          >
+            used for: {source.relevance}
           </div>
         )}
 
-        {/* Completed dossier — clean source cards */}
-        <AnimatePresence>
-          {currentDossier && (
-            <motion.div
-              initial={{ opacity: 0, y: 10 }}
-              animate={{ opacity: 1, y: 0 }}
-              transition={{ duration: 0.4 }}
+        {/* "about this paper" disclosure — collapsed by default */}
+        {hasSummary && (
+          <div style={{ marginTop: 6 }}>
+            <button
+              type="button"
+              onClick={() => setOpen((v) => !v)}
+              className="cb-focus"
+              style={{
+                background: 'transparent',
+                border: 0,
+                padding: 0,
+                cursor: 'pointer',
+                fontFamily: 'inherit',
+                fontSize: 13,
+                fontStyle: 'italic',
+                color: 'var(--cb-text-muted)',
+                letterSpacing: '0.01em',
+              }}
             >
-              <div className="space-y-3">
-                {currentDossier.sources.map((source, i) => (
-                  <motion.div
-                    key={source.title}
-                    initial={{ opacity: 0, y: 10 }}
-                    animate={{ opacity: 1, y: 0 }}
-                    transition={{ delay: i * 0.05 }}
-                    className="bg-bg-elevated rounded-lg p-4"
-                  >
-                    <div className="flex items-start justify-between gap-2">
-                      <div className="flex-1 min-w-0">
-                        <h4 className="text-sm font-medium text-text-primary">{source.title}</h4>
-                        {source.authors && (
-                          <p className="text-xs text-text-muted mt-0.5">
-                            {source.authors} ({source.year})
-                          </p>
-                        )}
-                        {source.summary && (
-                          <p className="text-xs text-text-secondary mt-1.5 leading-relaxed">{source.summary}</p>
-                        )}
-                        {source.relevance && (
-                          <p className="text-xs text-violet-400/70 mt-1 italic">{source.relevance}</p>
-                        )}
-                      </div>
-                      <span className={`shrink-0 px-2 py-0.5 text-xs rounded-full ${
-                        source.isVerified
-                          ? 'bg-success/10 text-success'
-                          : 'bg-warning/10 text-warning'
-                      }`}>
-                        {source.isVerified ? 'Verified' : 'Verify'}
-                      </span>
-                    </div>
-                    {isSafeHttpUrl(source.url) && (
-                      <a
-                        href={source.url}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className="text-xs text-violet-400 hover:underline mt-2 block truncate"
-                      >
-                        {source.url}
-                      </a>
-                    )}
-                    {source.doi && (
-                      <p className="text-xs text-text-muted mt-0.5">DOI: {source.doi}</p>
-                    )}
-                  </motion.div>
-                ))}
-              </div>
-
-              {currentDossier.synthesisNotes && (
-                <div className="mt-6 pt-4 border-t border-violet-500/10">
-                  <h4 className="text-xs font-medium text-text-muted uppercase tracking-wider mb-2">
-                    Synthesis
-                  </h4>
-                  <p className="text-sm text-text-secondary leading-relaxed">{currentDossier.synthesisNotes}</p>
-                </div>
-              )}
-            </motion.div>
-          )}
-        </AnimatePresence>
-
-        {/* Empty state when no research yet and not researching */}
-        {!isCurrentResearching && !currentDossier && webResults.length === 0 && (
-          <div className="text-center py-8">
-            <p className="text-text-muted mb-4">No research yet for this class.</p>
-            <Button size="sm" onClick={() => researchChapter(currentChapter)}>
-              Start Research
-            </Button>
+              {open ? '↑ about this paper' : '↓ about this paper'}
+            </button>
+            {open && (
+              <p
+                style={{
+                  margin: '6px 0 0',
+                  fontSize: 14.5,
+                  color: 'var(--cb-text-muted)',
+                  lineHeight: 1.55,
+                  maxWidth: '72ch',
+                }}
+              >
+                {source.summary}
+              </p>
+            )}
           </div>
         )}
 
-        {/* Navigation */}
-        <div className="flex justify-between mt-6 pt-4 border-t border-violet-500/10">
-          <Button
-            variant="ghost"
-            size="sm"
-            disabled={currentChapter === 0}
-            onClick={() => setCurrentChapter(prev => prev - 1)}
-          >
-            Previous Class
-          </Button>
-          <Button
-            variant="secondary"
-            size="sm"
-            disabled={currentChapter >= syllabus.chapters.length - 1}
-            onClick={handleNext}
+        {/* Resource strip — single muted mono line, hostname only. */}
+        {hasResource && (
+          <div
+            className="cb-mono"
+            style={{
+              marginTop: 6,
+              fontSize: 13.5,
+              color: 'var(--cb-text-muted)',
+              display: 'flex',
+              gap: 10,
+              alignItems: 'baseline',
+              flexWrap: 'wrap',
+            }}
           >
-            Research Next Class
-          </Button>
-        </div>
+            {isSafeHttpUrl(source.url) && (
+              <a
+                href={source.url}
+                target="_blank"
+                rel="noopener noreferrer"
+                style={{
+                  color: 'var(--cb-text-muted)',
+                  textDecoration: 'underline',
+                  textDecorationThickness: '0.5px',
+                  textUnderlineOffset: 3,
+                }}
+                onMouseEnter={(e) => {
+                  e.currentTarget.style.color = 'var(--cb-accent-link)';
+                }}
+                onMouseLeave={(e) => {
+                  e.currentTarget.style.color = 'var(--cb-text-muted)';
+                }}
+              >
+                ↗ {hostnameOf(source.url)}
+              </a>
+            )}
+            {isSafeHttpUrl(source.url) && source.doi && <span>·</span>}
+            {source.doi && <span>doi {source.doi}</span>}
+          </div>
+        )}
       </div>
-    </motion.div>
+    </li>
   );
 }
+
+// ─── FootSummary ─────────────────────────────────────────────────────────
+
+function FootSummary({
+  sources,
+  enrichment,
+}: {
+  sources: ResearchSource[];
+  enrichment: EnrichmentStats | null;
+}) {
+  const span = useMemo(() => {
+    const years = sources
+      .map((s) => {
+        const m = (s.year ?? '').match(/\d{4}/);
+        return m ? Number(m[0]) : null;
+      })
+      .filter((y): y is number => y != null && y > 1500 && y <= 2100);
+    if (years.length === 0) return null;
+    const min = Math.min(...years);
+    const max = Math.max(...years);
+    return min === max ? String(min) : `${min}–${max}`;
+  }, [sources]);
+
+  const verifiedCount =
+    enrichment != null
+      ? enrichment.doiVerified + enrichment.doiResolved
+      : null;
+
+  return (
+    <div
+      style={{
+        marginTop: 22,
+        paddingTop: 14,
+        borderTop: '0.5px solid var(--cb-border-rule)',
+        display: 'flex',
+        gap: 18,
+        flexWrap: 'wrap',
+      }}
+    >
+      <span
+        className="cb-sc cb-mono"
+        style={{ fontSize: 13.5, color: 'var(--cb-text-muted)', letterSpacing: '0.12em' }}
+      >
+        {sources.length} {plural('source', sources.length)}
+      </span>
+      {span && (
+        <span
+          className="cb-sc cb-mono"
+          style={{
+            fontSize: 13.5,
+            color: 'var(--cb-text-muted)',
+            letterSpacing: '0.12em',
+          }}
+        >
+          spanning {span}
+        </span>
+      )}
+      {verifiedCount != null && verifiedCount > 0 && (
+        <span
+          className="cb-sc cb-mono"
+          style={{ fontSize: 13.5, color: 'var(--cb-text-muted)', letterSpacing: '0.12em' }}
+        >
+          {verifiedCount} verified
+        </span>
+      )}
+      {enrichment != null && enrichment.oaFound > 0 && (
+        <span
+          className="cb-sc cb-mono"
+          style={{ fontSize: 13.5, color: 'var(--cb-text-muted)', letterSpacing: '0.12em' }}
+        >
+          {enrichment.oaFound} open access
+        </span>
+      )}
+      <span
+        className="cb-sc cb-mono"
+        style={{ fontSize: 13.5, color: 'var(--cb-text-muted)', letterSpacing: '0.12em' }}
+      >
+        evidence base settled
+      </span>
+    </div>
+  );
+}
+
+function hostnameOf(url: string | undefined): string {
+  if (!url) return '';
+  try {
+    return new URL(url).hostname.replace(/^www\./, '');
+  } catch {
+    return url;
+  }
+}
+
+// ─── SynthesisSection ────────────────────────────────────────────────────
+
+function SynthesisSection({ text }: { text: string }) {
+  return (
+    <div style={{ marginTop: 22 }}>
+      <div
+        className="cb-sc"
+        style={{
+          fontSize: 13,
+          color: 'var(--cb-text-muted)',
+          letterSpacing: '0.14em',
+          marginBottom: 10,
+        }}
+      >
+        Synthesis
+      </div>
+      <blockquote
+        style={{
+          margin: 0,
+          padding: '4px 0 4px 16px',
+          borderLeft: '2px solid var(--cb-accent-emphasis)',
+        }}
+      >
+        <p
+          className="cb-italic"
+          style={{
+            margin: 0,
+            fontSize: 15.5,
+            lineHeight: 1.6,
+            color: 'var(--cb-text-default)',
+          }}
+        >
+          {text}
+        </p>
+      </blockquote>
+    </div>
+  );
+}
+
+// ─── PenStroke + helpers ─────────────────────────────────────────────────
+
+function PenStroke({ width = 60 }: { width?: number }) {
+  return (
+    <span
+      aria-hidden
+      style={{
+        display: 'inline-block',
+        width,
+        height: 1,
+        background: 'var(--cb-border-default)',
+        position: 'relative',
+        overflow: 'hidden',
+        verticalAlign: 'middle',
+      }}
+    >
+      <span
+        style={{
+          position: 'absolute',
+          inset: 0,
+          background: 'var(--cb-accent-emphasis)',
+          animation: 'cb-pen 1.4s cubic-bezier(0.32,0.04,0.32,1) infinite',
+        }}
+      />
+    </span>
+  );
+}
+
+function plural(noun: string, n: number, irregularPlural?: string): string {
+  if (n === 1) return noun;
+  return irregularPlural ?? `${noun}s`;
+}
+
+function phaseLabel(phase: ResearchPhase, sources: number, queries: number): string {
+  switch (phase) {
+    case 'thinking':
+      return 'planning…';
+    case 'searching':
+      return `searching · ${sources} ${plural('source', sources)} found`;
+    case 'compiling':
+      return `compiling · ${queries} ${plural('query', queries, 'queries')}`;
+    case 'verifying':
+      return 'verifying sources…';
+    default:
+      return 'drafting…';
+  }
+}
diff --git a/src/pages/SetupPage.tsx b/src/pages/SetupPage.tsx
index 9229c5f..3ef8166 100644
--- a/src/pages/SetupPage.tsx
+++ b/src/pages/SetupPage.tsx
@@ -1,253 +1,1678 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { motion } from 'framer-motion';
 import { useCourseStore } from '../store/courseStore';
 import { useApiStore } from '../store/apiStore';
-import { getTheme, VOICE_OPTIONS } from '../themes';
-import { TopicInput } from '../components/setup/TopicInput';
+import { useUiStore } from '../store/uiStore';
+import { MODELS } from '../services/claude/client';
 import { TemplatePicker } from '../components/setup/TemplatePicker';
 import { CourseOutlineUpload } from '../components/setup/CourseOutlineUpload';
-import { AudienceSelector } from '../components/setup/AudienceSelector';
-import { ChapterConfig } from '../components/setup/ChapterConfig';
-import { StyleSelector } from '../components/setup/StyleSelector';
-import { ApiKeyPanel } from '../components/setup/ApiKeyPanel';
-import { Button } from '../components/shared/Button';
-
-const LENGTH_LABELS: Record<string, string> = {
-  concise: 'Concise (~2,000 words · 1 widget each)',
-  standard: 'Standard (~4,000 words · 2 widgets each)',
-  comprehensive: 'Comprehensive (~6,000 words · 3 widgets each)',
-};
-
-const COHORT_LABELS: Record<number, string> = {
-  25: 'Small cohort',
-  65: 'Medium cohort',
-  200: 'Large cohort',
-  400: 'Very large cohort',
-};
-
-const KNOWLEDGE_LABELS: Record<string, string> = {
-  none: 'No prior knowledge',
-  some: 'Some foundation',
-  significant: 'Significant background',
-};
-
-const ENVIRONMENT_LABELS: Record<string, string> = {
-  'lecture-theatre': 'Lecture theatre',
-  'collaborative': 'Collaborative room',
-  'flat-classroom': 'Flat classroom',
-  'online': 'Online/hybrid',
-};
+import { STAGES } from '../types/course';
+import type {
+  CourseSetup,
+  EducationLevel,
+  PriorKnowledge,
+  TeachingEnvironment,
+} from '../types/course';
+import {
+  CodexButton,
+  CodexInput,
+  CodexTextarea,
+  CodexSlider,
+  CodexBadge,
+  CodexModal,
+  ChoicePill,
+  CourseStylePicker,
+  VoicePicker,
+} from '../components/codex';
+import type { ChapterThemeId } from '../themes';
+
+// ─── Domain options ──────────────────────────────────────────────────────
+
+interface AudienceTile {
+  value: EducationLevel;
+  label: string;
+  sub: string;
+}
+
+const AUDIENCE_TILES: AudienceTile[] = [
+  { value: 'first-year', label: 'First-year', sub: '100-level intro' },
+  { value: 'advanced-undergrad', label: 'Undergraduate', sub: '200–400 level' },
+  { value: 'postgraduate', label: 'Postgraduate', sub: 'Honours · Masters' },
+  { value: 'professional', label: 'Professional', sub: 'Working practice' },
+  { value: 'general-public', label: 'General', sub: 'Curious public' },
+];
+
+const AUDIENCE_VALUES = new Set(AUDIENCE_TILES.map((t) => t.value));
+
+const PRIOR_KNOWLEDGE: { value: PriorKnowledge; label: string; sub: string }[] = [
+  { value: 'none', label: 'No prior knowledge', sub: 'Complete beginners.' },
+  { value: 'some', label: 'Some foundation', sub: 'Basic concepts in hand.' },
+  { value: 'significant', label: 'Significant background', sub: 'Ready for advanced material.' },
+];
+
+const COHORT_SIZES: { value: number; label: string; sub: string }[] = [
+  { value: 25, label: 'Small', sub: 'under 30' },
+  { value: 65, label: 'Medium', sub: '30–100' },
+  { value: 200, label: 'Large', sub: '100–300' },
+  { value: 400, label: 'Very large', sub: '300+' },
+];
+
+const VALID_COHORTS = new Set(COHORT_SIZES.map((c) => c.value));
+
+// Teaching-environment options for in-class activity tailoring. Optional —
+// when nothing is selected, the activities prompt defaults to a classic
+// lecture-theatre footprint (turn-and-talks, hand polls, no movement).
+const TEACHING_ENVIRONMENTS: { value: TeachingEnvironment; label: string; sub: string }[] = [
+  { value: 'lecture-theatre',  label: 'Lecture theatre',  sub: 'Tiered seating, students fixed' },
+  { value: 'active-classroom', label: 'Active classroom', sub: 'Moveable desks or group tables' },
+  { value: 'online',           label: 'Online or hybrid', sub: 'Breakouts, shared docs, chat' },
+];
+
+// ─── Starter briefs ──────────────────────────────────────────────────────
+
+interface StarterBrief {
+  title: string;
+  topic: string;
+  audienceLabel: string;
+  educationLevel: EducationLevel;
+  chapters: number;
+}
+
+const STARTER_BRIEFS: StarterBrief[] = [
+  {
+    title: 'Memory and the science of forgetting',
+    topic:
+      'Memory and the science of forgetting — how the brain encodes, decays, and rebuilds what we know. Decay, interference, consolidation, and the practical art of remembering.',
+    audienceLabel: 'first-year · 8 weeks',
+    educationLevel: 'first-year',
+    chapters: 8,
+  },
+  {
+    title: 'How to read a poem',
+    topic:
+      'How to read a poem — close attention as a learnable skill. One poem a week, paragraph by paragraph: form, sound, rhetoric, and the silences between.',
+    audienceLabel: 'undergrad seminar · 6 weeks',
+    educationLevel: 'advanced-undergrad',
+    chapters: 6,
+  },
+  {
+    title: "Wittgenstein's Philosophical Investigations",
+    topic:
+      "Wittgenstein's Philosophical Investigations — a slow reading from §1. Language games, rule-following, private language, and the picture that held us captive.",
+    audienceLabel: 'graduate seminar · 10 weeks',
+    educationLevel: 'postgraduate',
+    chapters: 10,
+  },
+];
+
+// ─── Page ────────────────────────────────────────────────────────────────
 
 export function SetupPage() {
   const navigate = useNavigate();
-  const { setup, setStage, completeStage, resetDownstream } = useCourseStore();
-  const { claudeApiKey, claudeKeyValid, geminiKeyValid, geminiApiKey, advancedMode, setAdvancedMode } = useApiStore();
+  const { setup, updateSetup, setStage, completeStage, resetDownstream, syllabus, chapters, currentStage } = useCourseStore();
+  const { provider, claudeApiKey, claudeKeyValid, ollamaApiKey, ollamaKeyValid } = useApiStore();
+  const {
+    openKeysOnNextSetupVisit,
+    setOpenKeysOnNextSetupVisit,
+  } = useUiStore();
+  const [refineOpen, setRefineOpen] = useState(false);
+  const [keysOpen, setKeysOpen] = useState(false);
+  const [showBeginConfirm, setShowBeginConfirm] = useState(false);
+
+  // Honour cross-page request to open the keys modal — e.g. user clicked an
+  // "Add OpenAI key →" CTA on the Build page.
+  useEffect(() => {
+    if (openKeysOnNextSetupVisit) {
+      // One-shot handoff from another page's CTA — an event, not derived state.
+      // eslint-disable-next-line react-hooks/set-state-in-effect
+      setKeysOpen(true);
+      setOpenKeysOnNextSetupVisit(false);
+    }
+  }, [openKeysOnNextSetupVisit, setOpenKeysOnNextSetupVisit]);
+
+  // Snap stale cohort values to the nearest valid pill.
+  useEffect(() => {
+    if (!VALID_COHORTS.has(setup.cohortSize)) updateSetup({ cohortSize: 65 });
+  }, [setup.cohortSize, updateSetup]);
+
+  // Snap stale education levels (e.g. 'high-school', 'general-public') to the
+  // 4-tile picker's default.
+  useEffect(() => {
+    if (!AUDIENCE_VALUES.has(setup.educationLevel)) {
+      updateSetup({ educationLevel: 'advanced-undergrad' });
+    }
+  }, [setup.educationLevel, updateSetup]);
+
+  // Legacy classroom values from the 4-tile version map cleanly onto the new
+  // 'active-classroom' bucket (both were "students can rearrange and form
+  // groups"). Migrate quietly so old courses don't show an empty pill.
+  useEffect(() => {
+    if (
+      setup.teachingEnvironment === 'collaborative' ||
+      setup.teachingEnvironment === 'flat-classroom'
+    ) {
+      updateSetup({ teachingEnvironment: 'active-classroom' });
+    }
+  }, [setup.teachingEnvironment, updateSetup]);
+
+  // Clamp persisted numChapters to the current 3..20 range — any older
+  // value outside that band gets pulled to the nearest valid endpoint.
+  useEffect(() => {
+    if (setup.numChapters < 3) updateSetup({ numChapters: 3 });
+    else if (setup.numChapters > 20) updateSetup({ numChapters: 20 });
+  }, [setup.numChapters, updateSetup]);
 
   const hasTopic = setup.topic.trim().length > 10;
-  const hasApiKey = claudeApiKey.trim().length > 0;
+  // The key that gates "Begin" is whichever course-content provider is active.
+  const providerLabel = provider === 'ollama' ? 'Ollama' : 'Anthropic';
+  const activeKey = provider === 'ollama' ? ollamaApiKey : claudeApiKey;
+  const activeKeyValid = provider === 'ollama' ? ollamaKeyValid : claudeKeyValid;
+  const hasApiKey = activeKey.trim().length > 0;
   const canProceed = hasTopic && hasApiKey;
+  // Anything downstream that "Begin" would wipe.
+  const hasDownstream = !!syllabus || chapters.length > 0;
+  // The stage the course is actually at — when the user steps back here
+  // mid-journey (even while a syllabus is still drafting), offer a plain
+  // "go back" that doesn't touch anything. Begin stays the reset path.
+  const journeyStage = STAGES.find((s) => s.id === currentStage);
+  const showBackToCourse =
+    currentStage !== 'landing' && currentStage !== 'setup' && !!journeyStage;
 
-  const handleGenerate = () => {
-    // Clear all downstream data so syllabus generates fresh
+  const doGenerate = () => {
     resetDownstream();
     completeStage('setup');
     setStage('syllabus');
     navigate('/syllabus');
   };
 
+  const handleGenerate = () => {
+    // Beginning again replaces the course in progress — confirm first.
+    // showBackToCourse also catches a syllabus that's still mid-draft
+    // (store stage advanced, syllabus not yet parsed): without it, Begin
+    // would silently start a second generation over the running one.
+    if (hasDownstream || showBackToCourse) setShowBeginConfirm(true);
+    else doGenerate();
+  };
+
+  const applyStarter = (s: StarterBrief) => {
+    updateSetup({
+      topic: s.topic,
+      educationLevel: s.educationLevel,
+      numChapters: s.chapters,
+    });
+  };
+
+  const helperLine = !hasTopic && !hasApiKey
+    ? `Add a course topic and your ${providerLabel} key to continue.`
+    : !hasTopic
+    ? 'Add a course topic to continue.'
+    : !hasApiKey
+    ? `Add your ${providerLabel} key to continue.`
+    : activeKeyValid === false
+    ? `Your ${providerLabel} key failed verification — check it before you begin.`
+    : 'Drafting the syllabus takes a few minutes.';
+
   return (
-    <motion.div
-      initial={{ opacity: 0 }}
-      animate={{ opacity: 1 }}
-      className="max-w-3xl mx-auto py-8 space-y-8"
+    <div
+      style={{
+        fontFamily: 'var(--font-cb-serif)',
+        color: 'var(--cb-text-default)',
+        padding: '48px 0 64px',
+      }}
     >
-      <div className="text-center mb-8">
-        <h1 className="text-3xl font-bold mb-2">Course Setup</h1>
-        <p className="text-text-secondary">
-          Tell us about the course you want to build. CanvasClassBuild will handle the rest.
-        </p>
-      </div>
+      <style>{`
+        .cb-chip {
+          display: grid; grid-template-columns: 1fr auto; gap: 14px;
+          align-items: baseline;
+          padding: 12px 16px;
+          background: transparent;
+          border: 1px solid var(--cb-border-default);
+          border-radius: 1.5px;
+          font-family: var(--font-cb-serif);
+          color: var(--cb-text-default);
+          text-align: left;
+          cursor: pointer;
+          transition: border-color 200ms cubic-bezier(0.32,0.04,0.32,1);
+        }
+        .cb-chip:hover { border-color: var(--cb-border-strong); }
+      `}</style>
 
-      <div className="space-y-8">
-        {/* Section 1: Topic */}
-        <motion.section
-          initial={{ opacity: 0, y: 10 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ delay: 0.1 }}
-          className="bg-bg-card border border-violet-500/10 rounded-xl p-6"
-        >
-          <TopicInput />
-        </motion.section>
-
-        {/* Section 2: Canvas template (optional) */}
-        <motion.section
-          initial={{ opacity: 0, y: 10 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ delay: 0.15 }}
-          className="bg-bg-card border border-violet-500/10 rounded-xl p-6"
-        >
-          <TemplatePicker />
-        </motion.section>
-
-        {/* Section 2b: Course outline DOCX (optional) */}
-        <motion.section
-          initial={{ opacity: 0, y: 10 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ delay: 0.18 }}
-          className="bg-bg-card border border-violet-500/10 rounded-xl p-6"
-        >
-          <CourseOutlineUpload />
-        </motion.section>
-
-        {/* Section 3: Your Class */}
-        <motion.section
-          initial={{ opacity: 0, y: 10 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ delay: 0.2 }}
-          className="bg-bg-card border border-violet-500/10 rounded-xl p-6"
-        >
-          <AudienceSelector />
-        </motion.section>
-
-        {/* Section 3: Course Structure */}
-        <motion.section
-          initial={{ opacity: 0, y: 10 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ delay: 0.3 }}
-          className="bg-bg-card border border-violet-500/10 rounded-xl p-6"
-        >
-          <ChapterConfig />
-        </motion.section>
-
-        {/* Section 4: Style — advanced only */}
-        {advancedMode && (
-          <motion.section
-            initial={{ opacity: 0, y: 10 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ delay: 0.4 }}
-            className="bg-bg-card border border-violet-500/10 rounded-xl p-6"
-          >
-            <StyleSelector />
-          </motion.section>
-        )}
+      <div style={{ maxWidth: 720, margin: '0 auto' }}>
+        {/* ── TOPIC SECTION ───────────────────────────────────────── */}
+        <section style={{ marginBottom: 40 }}>
+          <div>
+            <div
+              className="cb-sc"
+              style={{
+                fontSize: 13,
+                color: 'var(--cb-accent-emphasis)',
+                letterSpacing: '0.16em',
+              }}
+            >
+              The brief
+            </div>
+            <h1
+              style={{
+                margin: '8px 0 6px',
+                fontSize: 46,
+                lineHeight: 1.1,
+                fontWeight: 500,
+                fontVariationSettings: '"opsz" 36',
+                letterSpacing: '-0.01em',
+                color: 'var(--cb-text-default)',
+              }}
+            >
+              What are you teaching?
+            </h1>
+            <p
+              className="cb-italic"
+              style={{
+                fontSize: 19,
+                lineHeight: 1.55,
+                color: 'var(--cb-text-muted)',
+                margin: '0 0 22px',
+                maxWidth: 640,
+              }}
+            >
+              Three answers, and ClassBuild drafts the rest — slides, quizzes, readings,
+              narration.
+            </p>
 
-        {/* Section 5: API Keys */}
-        <motion.section
-          initial={{ opacity: 0, y: 10 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ delay: 0.5 }}
-          className="bg-bg-card border border-violet-500/10 rounded-xl p-6"
-        >
-          <ApiKeyPanel />
-        </motion.section>
-
-        {/* Summary & Action */}
-        <motion.div
-          initial={{ opacity: 0, y: 10 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ delay: 0.5 }}
-          className="bg-bg-card border border-violet-500/10 rounded-xl p-6"
-        >
-          <h3 className="text-sm font-medium text-text-primary mb-4">Course Summary</h3>
-          <div className="space-y-2 text-sm mb-6">
-            <div className="flex gap-2">
-              <span className="text-text-muted shrink-0">Topic:</span>
-              <span className="text-text-secondary truncate">
-                {setup.topic.trim()
-                  ? (setup.topic.trim().length > 60 ? setup.topic.trim().slice(0, 60) + '...' : setup.topic.trim())
-                  : 'Not yet entered'}
-              </span>
+            <CodexTextarea
+              label="Course topic"
+              size="lg"
+              value={setup.topic}
+              onChange={(e) => updateSetup({ topic: e.target.value })}
+              placeholder="e.g. Cognitive Load Theory — how working memory shapes good teaching."
+              rows={3}
+              hint={
+                <>
+                  Be specific — <span className="cb-italic">"Cognitive Load Theory"</span>{' '}
+                  reads better than <span className="cb-italic">"Psychology"</span>.
+                </>
+              }
+            />
+
+            <div style={{ marginTop: 16 }}>
+              <div
+                className="cb-sc"
+                style={{
+                  fontSize: 13,
+                  color: 'var(--cb-text-muted)',
+                  letterSpacing: '0.12em',
+                  marginBottom: 10,
+                }}
+              >
+                Start from an example
+              </div>
+              <div
+                className="cb-starter-grid"
+                style={{
+                  display: 'grid',
+                  gridTemplateColumns: `repeat(${STARTER_BRIEFS.length}, minmax(0, 1fr))`,
+                  gap: 12,
+                }}
+              >
+                {STARTER_BRIEFS.map((s) => (
+                  <button
+                    key={s.title}
+                    type="button"
+                    onClick={() => applyStarter(s)}
+                    className="cb-focus"
+                    style={{
+                      background: 'transparent',
+                      border: '1px solid var(--cb-border-default)',
+                      borderRadius: 1.5,
+                      padding: '14px',
+                      cursor: 'pointer',
+                      fontFamily: 'var(--font-cb-serif)',
+                      color: 'var(--cb-text-default)',
+                      textAlign: 'left',
+                      display: 'flex',
+                      flexDirection: 'column',
+                      gap: 4,
+                      transition:
+                        'border-color 200ms cubic-bezier(0.32,0.04,0.32,1)',
+                    }}
+                    onMouseEnter={(e) => {
+                      e.currentTarget.style.borderColor =
+                        'var(--cb-border-strong)';
+                    }}
+                    onMouseLeave={(e) => {
+                      e.currentTarget.style.borderColor =
+                        'var(--cb-border-default)';
+                    }}
+                  >
+                    <span
+                      style={{
+                        fontSize: 15,
+                        lineHeight: 1.3,
+                        fontVariationSettings: '"opsz" 14',
+                        display: '-webkit-box',
+                        WebkitLineClamp: 2,
+                        WebkitBoxOrient: 'vertical',
+                        overflow: 'hidden',
+                      }}
+                    >
+                      {s.title}
+                    </span>
+                    <span
+                      className="cb-italic cb-sc"
+                      style={{
+                        fontSize: 11,
+                        color: 'var(--cb-text-muted)',
+                        letterSpacing: '0.1em',
+                      }}
+                    >
+                      {s.audienceLabel}
+                    </span>
+                  </button>
+                ))}
+              </div>
             </div>
-            <div className="flex gap-2">
-              <span className="text-text-muted shrink-0">Classes:</span>
-              <span className="text-text-secondary">
-                {setup.numChapters} · {LENGTH_LABELS[setup.chapterLength] ?? setup.chapterLength}
-              </span>
+          </div>
+        </section>
+
+        {/* ── BRIEF FIELDS ────────────────────────────────────────── */}
+        <div>
+          {/* Hairline rule between topic group and audience */}
+          <div
+            aria-hidden
+            style={{
+              height: 0.5,
+              background: 'var(--cb-border-default)',
+              marginBottom: 32,
+            }}
+          />
+
+          {/* Audience — 4-tile picker */}
+          <div style={{ marginBottom: 16 }}>
+            <div
+              className="cb-sc"
+              style={{
+                fontSize: 13,
+                color: 'var(--cb-text-muted)',
+                letterSpacing: '0.12em',
+                marginBottom: 10,
+              }}
+            >
+              Audience
             </div>
-            <div className="flex gap-2">
-              <span className="text-text-muted shrink-0">Students:</span>
-              <span className="text-text-secondary capitalize">
-                {setup.educationLevel.replace(/-/g, ' ')} · {COHORT_LABELS[setup.cohortSize] ?? `~${setup.cohortSize} students`} · {KNOWLEDGE_LABELS[setup.priorKnowledge] ?? setup.priorKnowledge}
-                {setup.teachingEnvironment ? ` · ${ENVIRONMENT_LABELS[setup.teachingEnvironment] ?? setup.teachingEnvironment}` : ''}
-              </span>
+            <div
+              className="cb-pill-grid"
+              style={{
+                display: 'grid',
+                gridTemplateColumns: `repeat(${AUDIENCE_TILES.length}, minmax(0, 1fr))`,
+                gap: 8,
+              }}
+            >
+              {AUDIENCE_TILES.map((t) => (
+                <ChoicePill
+                  key={t.value}
+                  selected={setup.educationLevel === t.value}
+                  onClick={() => updateSetup({ educationLevel: t.value })}
+                  label={t.label}
+                  sub={t.sub}
+                />
+              ))}
             </div>
-            {advancedMode && (
-              <div className="flex gap-2">
-                <span className="text-text-muted shrink-0">Style:</span>
-                <span className="text-text-secondary">
-                  {getTheme(setup.themeId).name} theme · {VOICE_OPTIONS.find(v => v.id === setup.voiceId)?.label ?? 'Default'} voice
-                </span>
-              </div>
-            )}
-            <div className="flex gap-2">
-              <span className="text-text-muted shrink-0">Services:</span>
-              <span className="text-text-secondary flex items-center gap-1.5 flex-wrap">
-                <span className={claudeKeyValid === true ? 'text-emerald-400' : claudeApiKey ? 'text-amber-400' : 'text-text-muted'}>
-                  Claude {claudeKeyValid === true ? '✓' : claudeApiKey ? '?' : '✗'}
-                </span>
-                {' · '}
-                <span className={geminiKeyValid === true ? 'text-emerald-400' : geminiApiKey ? 'text-amber-400' : 'text-text-muted'}>
-                  Voice &amp; Infographics {geminiKeyValid === true ? '✓' : geminiApiKey ? '?' : '—'}
-                </span>
+            <p
+              className="cb-italic"
+              style={{
+                fontSize: 13,
+                lineHeight: 1.5,
+                color: 'var(--cb-text-muted)',
+                margin: '8px 0 0',
+              }}
+            >
+              Sets reading level and quiz difficulty.
+            </p>
+          </div>
+
+          {/* Length — slider */}
+          <div>
+            <div
+              style={{
+                display: 'flex',
+                justifyContent: 'space-between',
+                alignItems: 'baseline',
+                marginBottom: 10,
+              }}
+            >
+              <span
+                className="cb-sc"
+                style={{
+                  fontSize: 13,
+                  color: 'var(--cb-text-muted)',
+                  letterSpacing: '0.12em',
+                }}
+              >
+                Length
+              </span>
+              <span
+                className="cb-italic"
+                style={{
+                  fontSize: 17,
+                  color: 'var(--cb-accent-emphasis)',
+                  fontVariationSettings: '"opsz" 14',
+                }}
+              >
+                {setup.numChapters} chapters
               </span>
             </div>
+            <CodexSlider
+              value={setup.numChapters}
+              min={3}
+              max={20}
+              onChange={(e) =>
+                updateSetup({ numChapters: Number(e.target.value) })
+              }
+            />
+            <p
+              className="cb-italic"
+              style={{
+                fontSize: 13,
+                lineHeight: 1.5,
+                color: 'var(--cb-text-muted)',
+                margin: '8px 0 0',
+              }}
+            >
+              ≈ one chapter per week of teaching.
+            </p>
           </div>
 
-          {claudeKeyValid === false && (
-            <div className="mb-4 p-3 rounded-lg bg-error/10 border border-error/20 text-error text-sm">
-              Your Claude connection didn't work. Check that you copied the full key from{' '}
-              <a href="https://console.anthropic.com/settings/keys" target="_blank" rel="noopener noreferrer" className="underline hover:text-error/80">
-                console.anthropic.com
-              </a>{' '}
-              and that your account has API credits.
-            </div>
-          )}
+          {/* Canvas template + course outline (optional, fork feature). */}
+          <div
+            aria-hidden
+            style={{
+              height: 0.5,
+              background: 'var(--cb-border-default)',
+              margin: '40px 0 32px',
+            }}
+          />
+          <div className="cb-sc" style={{ fontSize: 13, color: 'var(--cb-text-muted)', letterSpacing: '0.12em', marginBottom: 10 }}>
+            Canvas template · optional
+          </div>
+          <div style={{ display: 'grid', gap: 16 }}>
+            <TemplatePicker />
+            <CourseOutlineUpload />
+          </div>
 
-          <Button
-            size="lg"
-            className="w-full"
-            disabled={!canProceed}
-            onClick={handleGenerate}
+          {/* Primary action row */}
+          <div
+            style={{
+              display: 'flex',
+              justifyContent: 'space-between',
+              alignItems: 'baseline',
+              gap: 16,
+              flexWrap: 'wrap',
+              marginTop: 48,
+            }}
           >
-            Generate Syllabus
-            <svg className="ml-2 w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-              <line x1="5" y1="12" x2="19" y2="12" />
-              <polyline points="12 5 19 12 12 19" />
-            </svg>
-          </Button>
-
-          {!canProceed && (
-            <p className="text-xs text-text-muted text-center mt-3">
-              {!hasTopic && !hasApiKey ? 'Enter a course topic and add your Anthropic API key to continue' :
-               !hasTopic ? (setup.topic.trim().length === 0 ? 'Enter a course topic to continue' : 'Please provide a more detailed topic description') :
-               'Add your Anthropic API key to continue'}
-            </p>
-          )}
-        </motion.div>
-
-        {/* Advanced mode toggle — opt-in to multimedia outputs (audio, slides,
-            infographic, weekly challenge, activities) and per-course style
-            options. Defaults off so the surface stays Canvas-focused. */}
-        <div className="flex items-center justify-between text-xs text-text-muted px-2">
-          <span>
-            <strong className="text-text-secondary">Advanced mode</strong> {advancedMode ? 'on' : 'off'} —{' '}
-            {advancedMode
-              ? 'audio, slides, infographic, weekly challenge, activities, and theme/voice are visible.'
-              : 'showing the Canvas-focused outputs only (Reading, Quizzes, Discussion).'}
-          </span>
+            <span
+              className="cb-italic"
+              style={{
+                fontSize: 13,
+                color: activeKeyValid === false && hasApiKey && hasTopic
+                  ? 'var(--cb-status-warning)'
+                  : 'var(--cb-text-muted)',
+                // Narrow basis lets the helper share one row with both
+                // buttons; the row only wraps on genuinely tight widths.
+                flex: '1 1 200px',
+                lineHeight: 1.5,
+              }}
+            >
+              {helperLine}
+            </span>
+            {showBackToCourse && (
+              <CodexButton
+                variant="ghost"
+                size="lg"
+                onClick={() => navigate(journeyStage!.path)}
+              >
+                ← Back to {journeyStage!.label}
+              </CodexButton>
+            )}
+            {(!hasApiKey || activeKeyValid === false) && (
+              <CodexButton
+                variant="secondary"
+                size="lg"
+                onClick={() => setKeysOpen(true)}
+              >
+                {hasApiKey ? 'Check key →' : `Add ${providerLabel} key →`}
+              </CodexButton>
+            )}
+            <CodexButton
+              variant="primary"
+              size="lg"
+              disabled={!canProceed}
+              onClick={handleGenerate}
+            >
+              {showBackToCourse ? 'Begin again · Syllabus →' : 'Begin · Syllabus →'}
+            </CodexButton>
+          </div>
+
+          {/* Beginning again replaces the in-progress course — confirm. */}
+          <CodexModal
+            open={showBeginConfirm}
+            onClose={() => setShowBeginConfirm(false)}
+            kicker="begin again"
+            title={
+              <>
+                Replace the course in <span className="cb-italic">progress</span>?
+              </>
+            }
+            sub={`Beginning from this brief clears the current syllabus${
+              chapters.length > 0
+                ? `, ${chapters.length} drafted ${chapters.length === 1 ? 'chapter' : 'chapters'},`
+                : ''
+            } and all research dossiers. Download a project file from Export first if you want to keep it.`}
+            width={480}
+            actions={
+              <>
+                <span style={{ flex: 1 }} />
+                <CodexButton variant="ghost" onClick={() => setShowBeginConfirm(false)}>
+                  Cancel
+                </CodexButton>
+                <CodexButton
+                  variant="destructive"
+                  onClick={() => {
+                    setShowBeginConfirm(false);
+                    doGenerate();
+                  }}
+                >
+                  Replace & begin →
+                </CodexButton>
+              </>
+            }
+          >
+            <></>
+          </CodexModal>
+
+          <div style={{ marginTop: 24 }}>
+            <RefineDisclosure
+              open={refineOpen}
+              onToggle={() => setRefineOpen((v) => !v)}
+              setup={setup}
+              updateSetup={updateSetup}
+            />
+          </div>
+        </div>
+
+        {/* ── WHAT COMES NEXT ─────────────────────────────────────── */}
+        <WhatComesNext />
+
+        {/* ── EACH CHAPTER WILL INCLUDE ───────────────────────────── */}
+        <EachChapterIncludes />
+
+        {/* ── FOOTER ──────────────────────────────────────────────── */}
+        <div
+          style={{
+            marginTop: 48,
+            paddingTop: 16,
+            borderTop: '0.5px solid var(--cb-border-default)',
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'baseline',
+            fontSize: 14.5,
+            color: 'var(--cb-text-muted)',
+          }}
+        >
           <button
             type="button"
-            onClick={() => setAdvancedMode(!advancedMode)}
-            className={`px-3 py-1 rounded-full border transition-colors ${
-              advancedMode
-                ? 'bg-violet-500/15 text-violet-300 border-violet-500/30'
-                : 'border-violet-500/15 hover:border-violet-500/30'
-            }`}
+            onClick={() => setKeysOpen(true)}
+            className="cb-focus"
+            style={{
+              background: 'transparent',
+              border: 0,
+              padding: 0,
+              cursor: 'pointer',
+              color: 'var(--cb-accent-link)',
+              textDecoration: 'underline',
+              textDecorationThickness: '0.5px',
+              textUnderlineOffset: 3,
+              fontFamily: 'inherit',
+              fontSize: 14.5,
+              whiteSpace: 'nowrap',
+            }}
           >
-            {advancedMode ? 'Disable' : 'Enable'} advanced
+            {hasApiKey ? 'Manage keys ↗' : 'Set keys ↗'}
           </button>
+          <span className="cb-italic">
+            Keys live in this browser. Nothing is sent to ClassBuild — there is no
+            ClassBuild server.
+          </span>
         </div>
+
+        <div className="cb-folio">— 01 —</div>
+      </div>
+
+      <ApiKeysModal open={keysOpen} onClose={() => setKeysOpen(false)} />
+    </div>
+  );
+}
+
+// ─── Refine disclosure ───────────────────────────────────────────────────
+
+interface RefineDisclosureProps {
+  open: boolean;
+  onToggle: () => void;
+  setup: CourseSetup;
+  updateSetup: (updates: Partial<CourseSetup>) => void;
+}
+
+function RefineDisclosure({
+  open,
+  onToggle,
+  setup,
+  updateSetup,
+}: RefineDisclosureProps) {
+  return (
+    <section
+      style={{
+        marginTop: 8,
+        paddingTop: 16,
+        borderTop: '0.5px solid var(--cb-border-default)',
+      }}
+    >
+      <button
+        type="button"
+        onClick={onToggle}
+        className="cb-focus"
+        aria-expanded={open}
+        style={{
+          background: 'transparent',
+          border: 0,
+          padding: 0,
+          cursor: 'pointer',
+          display: 'inline-flex',
+          alignItems: 'baseline',
+          gap: 12,
+          color: 'var(--cb-text-default)',
+          fontFamily: 'inherit',
+        }}
+      >
+        <span
+          className="cb-sc"
+          style={{
+            fontSize: 13.5,
+            color: 'var(--cb-accent-emphasis)',
+            letterSpacing: '0.14em',
+          }}
+        >
+          More to tell ClassBuild
+        </span>
+        <span
+          className="cb-italic"
+          style={{ fontSize: 14.5, color: 'var(--cb-text-muted)' }}
+        >
+          {open ? '— hide —' : '— optional —'}
+        </span>
+      </button>
+
+      {open && (
+        <div style={{ display: 'grid', gap: 32, marginTop: 24 }}>
+          {/* ── CONTENT SCOPE ─────────────────────────────────── */}
+          <RefineGroup kicker="Content scope">
+            <CodexInput
+              label="Specific topics that must be covered"
+              value={setup.specificTopics ?? ''}
+              onChange={(e) => updateSetup({ specificTopics: e.target.value })}
+              placeholder="e.g. interference theory, Ebbinghaus curve, consolidation"
+            />
+            <CodexInput
+              label="Topics to avoid"
+              value={setup.avoidTopics ?? ''}
+              onChange={(e) => updateSetup({ avoidTopics: e.target.value })}
+              placeholder="e.g. statistical methods, edge-case neuroscience, anything off-syllabus"
+            />
+            <CodexInput
+              label="Textbook or resource you typically follow"
+              value={setup.textbookReference ?? ''}
+              onChange={(e) => updateSetup({ textbookReference: e.target.value })}
+              placeholder="e.g. Baddeley (2020) Memory · Oxford"
+            />
+          </RefineGroup>
+
+          {/* ── ABOUT YOUR STUDENTS ───────────────────────────── */}
+          <RefineGroup kicker="About your students">
+            <PillGroup
+              label="What do students already know?"
+              cols={3}
+              value={setup.priorKnowledge}
+              onChange={(v) => updateSetup({ priorKnowledge: v as PriorKnowledge })}
+              options={PRIOR_KNOWLEDGE.map((p) => ({
+                value: p.value,
+                label: p.label,
+                sub: p.sub,
+              }))}
+            />
+            <CodexInput
+              label="Anything else about your learners"
+              value={setup.learnerNotes ?? ''}
+              onChange={(e) => updateSetup({ learnerNotes: e.target.value })}
+              placeholder="e.g. English is their second language; mixed maths backgrounds"
+            />
+          </RefineGroup>
+
+          {/* ── WHERE YOU TEACH ───────────────────────────────── */}
+          <RefineGroup kicker="Where you teach">
+            <PillGroup
+              label="Classroom shape"
+              cols={3}
+              value={setup.teachingEnvironment}
+              onChange={(v) => updateSetup({ teachingEnvironment: v as TeachingEnvironment })}
+              options={TEACHING_ENVIRONMENTS.map((e) => ({
+                value: e.value,
+                label: e.label,
+                sub: e.sub,
+              }))}
+              deselectable
+            />
+            <p
+              className="cb-italic"
+              style={{
+                margin: '-2px 0 0',
+                fontSize: 13.5,
+                color: 'var(--cb-text-muted)',
+                lineHeight: 1.5,
+              }}
+            >
+              Skip to default to classic lecture-theatre activities (turn-and-talks, hand
+              polls, no movement). Click a selected pill again to clear.
+            </p>
+            <CodexInput
+              label="Room details (optional)"
+              value={setup.environmentNotes ?? ''}
+              onChange={(e) => updateSetup({ environmentNotes: e.target.value })}
+              placeholder="e.g. 240-seat raked theatre, students bring laptops, one aisle on each side"
+            />
+          </RefineGroup>
+
+          {/* ── OUTPUT SHAPE ──────────────────────────────────── */}
+          <RefineGroup kicker="Output shape">
+            <CourseStylePicker
+              value={setup.themeId}
+              onChange={(id) => updateSetup({ themeId: id as ChapterThemeId })}
+            />
+            <ReadingLengthField setup={setup} updateSetup={updateSetup} />
+          </RefineGroup>
+        </div>
+      )}
+    </section>
+  );
+}
+
+// ─── RefineGroup — sub-kicker + hairline rule + stacked fields ───────────
+
+function RefineGroup({
+  kicker,
+  children,
+}: {
+  kicker: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div>
+      <div
+        className="cb-sc"
+        style={{
+          fontSize: 13,
+          color: 'var(--cb-accent-emphasis)',
+          letterSpacing: '0.14em',
+          paddingBottom: 10,
+          marginBottom: 16,
+          borderBottom: '0.5px solid var(--cb-border-default)',
+        }}
+      >
+        {kicker}
+      </div>
+      <div style={{ display: 'grid', gap: 18 }}>{children}</div>
+    </div>
+  );
+}
+
+// ─── ReadingLengthField — free-text + example chips ──────────────────────
+
+const READING_LENGTH_EXAMPLES: {
+  title: string;
+  caption: string;
+  value: string;
+}[] = [
+  {
+    title: '~20 MIN',
+    caption: 'intro level',
+    value: '~20 minutes per chapter, intro-level pacing',
+  },
+  {
+    title: '~60 MIN',
+    caption: 'comprehensive · worked examples',
+    value:
+      '~60 minutes per chapter, comprehensive with worked examples and figures',
+  },
+  {
+    title: '~2 HOURS',
+    caption: 'deep dive · extended examples',
+    value:
+      '~2 hours per chapter, deep-dive with extended worked examples and discussion of edge cases',
+  },
+];
+
+function detectLongReading(brief: string): boolean {
+  if (!brief) return false;
+  // Hours mentioned, or any word-count >= ~10,000.
+  if (/\b\d+(?:\.\d+)?\s*(?:hours?|hrs?)\b/i.test(brief)) return true;
+  const wordMatch = brief.match(/\b(\d{4,})\s*(?:w|words?)\b/i);
+  if (wordMatch && Number(wordMatch[1]) >= 10000) return true;
+  return false;
+}
+
+function ReadingLengthField({
+  setup,
+  updateSetup,
+}: {
+  setup: CourseSetup;
+  updateSetup: (updates: Partial<CourseSetup>) => void;
+}) {
+  const value = setup.chapterLengthBrief ?? '';
+  const isLong = detectLongReading(value);
+
+  return (
+    <div>
+      {/* Label */}
+      <div
+        className="cb-sc"
+        style={{
+          fontSize: 13,
+          color: 'var(--cb-text-muted)',
+          letterSpacing: '0.12em',
+          marginBottom: 6,
+        }}
+      >
+        Reading length per chapter
+      </div>
+
+      {/* Hint sits above the input — commentary on the field, not on the typed value */}
+      <div
+        className="cb-italic"
+        style={{
+          fontSize: 13.5,
+          color: 'var(--cb-text-muted)',
+          lineHeight: 1.45,
+          marginBottom: 10,
+        }}
+      >
+        Reading time only. Quizzes, slides, and activities add more.
+      </div>
+
+      <CodexInput
+        aria-label="Reading length per chapter"
+        value={value}
+        onChange={(e) => updateSetup({ chapterLengthBrief: e.target.value })}
+        placeholder="e.g. ~30 minutes per chapter, comprehensive coverage with worked examples"
+      />
+
+      <div style={{ marginTop: 14 }}>
+        <div
+          className="cb-sc"
+          style={{
+            fontSize: 11.5,
+            color: 'var(--cb-text-muted)',
+            letterSpacing: '0.12em',
+            marginBottom: 8,
+          }}
+        >
+          Start from an example
+        </div>
+        <div
+          style={{
+            display: 'grid',
+            gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))',
+            gap: 12,
+          }}
+        >
+          {READING_LENGTH_EXAMPLES.map((ex) => (
+            <button
+              key={ex.title}
+              type="button"
+              onClick={() => updateSetup({ chapterLengthBrief: ex.value })}
+              className="cb-focus"
+              style={{
+                background: 'transparent',
+                border: '1px solid var(--cb-border-default)',
+                borderRadius: 1.5,
+                padding: '14px',
+                cursor: 'pointer',
+                fontFamily: 'var(--font-cb-serif)',
+                color: 'var(--cb-text-default)',
+                textAlign: 'left',
+                display: 'flex',
+                flexDirection: 'column',
+                gap: 4,
+                transition:
+                  'border-color 200ms cubic-bezier(0.32,0.04,0.32,1)',
+              }}
+              onMouseEnter={(e) => {
+                e.currentTarget.style.borderColor = 'var(--cb-border-strong)';
+              }}
+              onMouseLeave={(e) => {
+                e.currentTarget.style.borderColor = 'var(--cb-border-default)';
+              }}
+            >
+              <span
+                className="cb-mono"
+                style={{
+                  fontSize: 13.5,
+                  letterSpacing: '0.06em',
+                  color: 'var(--cb-text-default)',
+                }}
+              >
+                {ex.title}
+              </span>
+              <span
+                className="cb-italic"
+                style={{
+                  fontSize: 13,
+                  color: 'var(--cb-text-muted)',
+                  lineHeight: 1.4,
+                }}
+              >
+                {ex.caption}
+              </span>
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {isLong && (
+        <div
+          className="cb-italic"
+          style={{
+            marginTop: 8,
+            fontSize: 13,
+            color: 'var(--cb-text-muted)',
+            lineHeight: 1.5,
+          }}
+        >
+          Long readings take noticeably longer per chapter to draft — feel free to step away.
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ─── PillGroup helper ────────────────────────────────────────────────────
+
+interface PillGroupProps {
+  label: string;
+  cols: number;
+  value: string;
+  onChange: (v: string) => void;
+  options: { value: string; label: string; sub?: string }[];
+  deselectable?: boolean;
+}
+
+function PillGroup({ label, cols, value, onChange, options, deselectable }: PillGroupProps) {
+  return (
+    <div>
+      <div
+        className="cb-sc"
+        style={{
+          fontSize: 13,
+          color: 'var(--cb-text-muted)',
+          letterSpacing: '0.12em',
+          marginBottom: 10,
+        }}
+      >
+        {label}
+      </div>
+      <div
+        style={{
+          display: 'grid',
+          // intrinsic-responsive — collapses to a single column on narrow viewports.
+          gridTemplateColumns: `repeat(auto-fit, minmax(min(160px, 100%), 1fr))`,
+          // Cap at the requested column count on wider viewports.
+          maxWidth: cols >= 5 ? '100%' : `calc(${cols} * 220px)`,
+          gap: 10,
+        }}
+      >
+        {options.map((o) => (
+          <ChoicePill
+            key={o.value}
+            selected={value === o.value}
+            onClick={() =>
+              onChange(deselectable && value === o.value ? '' : o.value)
+            }
+            label={o.label}
+            sub={o.sub}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+// ─── WhatComesNext — process strip ──────────────────────────────────────
+
+function WhatComesNext() {
+  const stages = [
+    { label: 'Syllabus',  body: 'You review the chapter titles and order before research begins.' },
+    { label: 'Research',  body: 'ClassBuild gathers and cites sources for each chapter.' },
+    { label: 'Build',     body: 'Eight materials drafted per chapter — reading, slides, audio, quizzes, and more.' },
+    { label: 'Export',    body: 'Download as PowerPoint, Word, web pages, or LMS packages — all local.' },
+  ];
+  return (
+    <section
+      style={{
+        marginTop: 48,
+        paddingTop: 32,
+        borderTop: '0.5px solid var(--cb-border-default)',
+      }}
+    >
+      <div
+        className="cb-sc"
+        style={{
+          fontSize: 14,
+          color: 'var(--cb-accent-emphasis)',
+          letterSpacing: '0.14em',
+          marginBottom: 18,
+        }}
+      >
+        What comes next
+      </div>
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateColumns: `repeat(${stages.length}, minmax(0, 1fr))`,
+          gap: 24,
+        }}
+        className="cb-pill-grid"
+      >
+        {stages.map((s) => (
+          <div key={s.label}>
+            <div
+              className="cb-sc"
+              style={{
+                fontSize: 11.5,
+                color: 'var(--cb-text-muted)',
+                letterSpacing: '0.12em',
+                marginBottom: 6,
+              }}
+            >
+              {s.label}
+            </div>
+            <p
+              className="cb-italic"
+              style={{
+                margin: 0,
+                fontSize: 14,
+                lineHeight: 1.55,
+                color: 'var(--cb-text-default)',
+              }}
+            >
+              {s.body}
+            </p>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}
+
+// ─── EachChapterIncludes — categories line ───────────────────────────────
+
+function EachChapterIncludes() {
+  const items = [
+    'Reading',
+    'Practice',
+    'Quizzes',
+    'Challenge',
+    'Discussion',
+    'Activities',
+    'Audio',
+    'Slides',
+  ];
+  return (
+    <section style={{ marginTop: 32 }}>
+      <div
+        className="cb-sc"
+        style={{
+          fontSize: 14,
+          color: 'var(--cb-accent-emphasis)',
+          letterSpacing: '0.14em',
+          marginBottom: 12,
+        }}
+      >
+        Each chapter will include
+      </div>
+      <p
+        className="cb-italic"
+        style={{
+          margin: 0,
+          fontSize: 15,
+          lineHeight: 1.6,
+          color: 'var(--cb-text-default)',
+        }}
+      >
+        {items.map((label, i) => (
+          <span key={label}>
+            {label}
+            {i < items.length - 1 && (
+              <span style={{ color: 'var(--cb-text-subtle)' }}> · </span>
+            )}
+          </span>
+        ))}
+      </p>
+    </section>
+  );
+}
+
+// ─── API keys modal ──────────────────────────────────────────────────────
+
+function ApiKeysModal({ open, onClose }: { open: boolean; onClose: () => void }) {
+  const { setup, updateSetup } = useCourseStore();
+  const {
+    provider,
+    researchBackend,
+    advancedMode,
+    setProvider,
+    setResearchBackend,
+    setAdvancedMode,
+    ollamaApiKey,
+    ollamaModel,
+    tavilyApiKey,
+    ollamaKeyValid,
+    tavilyKeyValid,
+    isValidatingOllama,
+    isValidatingTavily,
+    setOllamaApiKey,
+    setOllamaModel,
+    setTavilyApiKey,
+    setOllamaKeyValid,
+    setTavilyKeyValid,
+    setIsValidatingOllama,
+    setIsValidatingTavily,
+    claudeApiKey,
+    openaiApiKey,
+    elevenLabsApiKey,
+    claudeKeyValid,
+    openaiKeyValid,
+    elevenLabsKeyValid,
+    isValidatingClaude,
+    isValidatingOpenai,
+    isValidatingElevenLabs,
+    setClaudeApiKey,
+    setOpenaiApiKey,
+    setElevenLabsApiKey,
+    setClaudeKeyValid,
+    setOpenaiKeyValid,
+    setElevenLabsKeyValid,
+    setIsValidatingClaude,
+    setIsValidatingOpenai,
+    setIsValidatingElevenLabs,
+  } = useApiStore();
+
+  const validateClaude = useCallback(async () => {
+    if (!claudeApiKey.trim()) return;
+    setIsValidatingClaude(true);
+    try {
+      const { default: Anthropic } = await import('@anthropic-ai/sdk');
+      const client = new Anthropic({
+        apiKey: claudeApiKey.trim(),
+        dangerouslyAllowBrowser: true,
+      });
+      // countTokens is free — it authenticates without spending tokens.
+      await client.messages.countTokens({
+        model: MODELS.haiku,
+        messages: [{ role: 'user', content: 'Hi' }],
+      });
+      setClaudeKeyValid(true);
+    } catch {
+      setClaudeKeyValid(false);
+    } finally {
+      setIsValidatingClaude(false);
+    }
+  }, [claudeApiKey, setClaudeKeyValid, setIsValidatingClaude]);
+
+  const validateOpenai = useCallback(async () => {
+    if (!openaiApiKey.trim()) return;
+    setIsValidatingOpenai(true);
+    try {
+      const res = await fetch('https://api.openai.com/v1/models', {
+        headers: { Authorization: `Bearer ${openaiApiKey.trim()}` },
+      });
+      setOpenaiKeyValid(res.ok);
+    } catch {
+      setOpenaiKeyValid(false);
+    } finally {
+      setIsValidatingOpenai(false);
+    }
+  }, [openaiApiKey, setOpenaiKeyValid, setIsValidatingOpenai]);
+
+  const validateElevenLabs = useCallback(async () => {
+    if (!elevenLabsApiKey.trim()) return;
+    setIsValidatingElevenLabs(true);
+    try {
+      const res = await fetch('https://api.elevenlabs.io/v1/user/subscription', {
+        headers: { 'xi-api-key': elevenLabsApiKey.trim() },
+      });
+      setElevenLabsKeyValid(res.ok);
+    } catch {
+      setElevenLabsKeyValid(false);
+    } finally {
+      setIsValidatingElevenLabs(false);
+    }
+  }, [elevenLabsApiKey, setElevenLabsKeyValid, setIsValidatingElevenLabs]);
+
+  const validateOllama = useCallback(async () => {
+    if (!ollamaApiKey.trim()) return;
+    setIsValidatingOllama(true);
+    try {
+      // Same proxy URL the runtime uses — vite.config.ts forwards it in dev,
+      // api/ollama-proxy.ts forwards it in prod.
+      const res = await fetch('/api/ollama-proxy', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: `Bearer ${ollamaApiKey.trim()}`,
+        },
+        body: JSON.stringify({
+          model: ollamaModel,
+          messages: [{ role: 'user', content: 'ping' }],
+          stream: false,
+        }),
+      });
+      setOllamaKeyValid(res.ok);
+    } catch {
+      setOllamaKeyValid(false);
+    } finally {
+      setIsValidatingOllama(false);
+    }
+  }, [ollamaApiKey, ollamaModel, setOllamaKeyValid, setIsValidatingOllama]);
+
+  const validateTavily = useCallback(async () => {
+    if (!tavilyApiKey.trim()) return;
+    setIsValidatingTavily(true);
+    try {
+      const res = await fetch('https://api.tavily.com/search', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: `Bearer ${tavilyApiKey.trim()}`,
+        },
+        body: JSON.stringify({ query: 'ping', max_results: 1, search_depth: 'basic' }),
+      });
+      setTavilyKeyValid(res.ok);
+    } catch {
+      setTavilyKeyValid(false);
+    } finally {
+      setIsValidatingTavily(false);
+    }
+  }, [tavilyApiKey, setTavilyKeyValid, setIsValidatingTavily]);
+
+  // Re-validate stored keys when modal opens for the first time.
+  const validatedRef = useRef(false);
+  useEffect(() => {
+    if (!open || validatedRef.current) return;
+    validatedRef.current = true;
+    if (claudeApiKey.trim() && claudeKeyValid === null) void validateClaude();
+    if (ollamaApiKey.trim() && ollamaKeyValid === null) void validateOllama();
+    if (tavilyApiKey.trim() && tavilyKeyValid === null) void validateTavily();
+    if (openaiApiKey.trim() && openaiKeyValid === null) void validateOpenai();
+    if (elevenLabsApiKey.trim() && elevenLabsKeyValid === null) {
+      void validateElevenLabs();
+    }
+  }, [
+    open,
+    ollamaApiKey,
+    tavilyApiKey,
+    ollamaKeyValid,
+    tavilyKeyValid,
+    validateOllama,
+    validateTavily,
+    claudeApiKey,
+    openaiApiKey,
+    elevenLabsApiKey,
+    claudeKeyValid,
+    openaiKeyValid,
+    elevenLabsKeyValid,
+    validateClaude,
+    validateOpenai,
+    validateElevenLabs,
+  ]);
+
+  const statusFor = (
+    validating: boolean,
+    valid: boolean | null,
+    raw: string,
+  ) =>
+    validating
+      ? { text: 'checking…', color: 'var(--cb-text-muted)' }
+      : valid === true
+      ? { text: '✓ verified', color: 'var(--cb-status-success)' }
+      : valid === false
+      ? { text: '✗ failed', color: 'var(--cb-status-danger)' }
+      : raw
+      ? { text: 'unverified', color: 'var(--cb-text-subtle)' }
+      : null;
+
+  const claudeStatus = statusFor(isValidatingClaude, claudeKeyValid, claudeApiKey);
+  const openaiStatus = statusFor(isValidatingOpenai, openaiKeyValid, openaiApiKey);
+  const elevenLabsStatus = statusFor(
+    isValidatingElevenLabs,
+    elevenLabsKeyValid,
+    elevenLabsApiKey,
+  );
+  const ollamaStatus = statusFor(isValidatingOllama, ollamaKeyValid, ollamaApiKey);
+  const tavilyStatus = statusFor(isValidatingTavily, tavilyKeyValid, tavilyApiKey);
+  const anyValidating =
+    isValidatingClaude ||
+    isValidatingOpenai ||
+    isValidatingElevenLabs ||
+    isValidatingOllama ||
+    isValidatingTavily;
+
+  const linkStyle: React.CSSProperties = {
+    color: 'var(--cb-accent-link)',
+    textDecoration: 'underline',
+    textDecorationThickness: '0.5px',
+    textUnderlineOffset: 3,
+    fontStyle: 'normal',
+  };
+
+  return (
+    <CodexModal
+      open={open}
+      onClose={onClose}
+      kicker="setup"
+      title={
+        <>
+          API <span className="cb-italic">keys</span>
+        </>
+      }
+      sub="Bring your own. Keys live in this browser — nothing is sent to ClassBuild (there is no ClassBuild server)."
+      width={560}
+      actions={
+        <>
+          <CodexBadge tone="info">local-only</CodexBadge>
+          <span style={{ flex: 1 }} />
+          <CodexButton variant="ghost" onClick={onClose}>
+            Close
+          </CodexButton>
+          <CodexButton
+            variant="secondary"
+            onClick={() => {
+              if (claudeApiKey.trim()) void validateClaude();
+              if (ollamaApiKey.trim()) void validateOllama();
+              if (tavilyApiKey.trim()) void validateTavily();
+              if (openaiApiKey.trim()) void validateOpenai();
+              if (elevenLabsApiKey.trim()) void validateElevenLabs();
+            }}
+            disabled={
+              (!claudeApiKey.trim() &&
+                !ollamaApiKey.trim() &&
+                !tavilyApiKey.trim() &&
+                !openaiApiKey.trim() &&
+                !elevenLabsApiKey.trim()) ||
+              anyValidating
+            }
+          >
+            {anyValidating ? 'verifying…' : 'Verify'}
+          </CodexButton>
+        </>
+      }
+    >
+      <div style={{ display: 'grid', gap: 16 }}>
+        <div>
+          <div
+            className="cb-sc"
+            style={{ fontSize: 13, color: 'var(--cb-text-muted)', letterSpacing: '0.12em', marginBottom: 10 }}
+          >
+            Course-content provider
+          </div>
+          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 1fr))', gap: 8 }}>
+            <ChoicePill
+              selected={provider === 'anthropic'}
+              onClick={() => setProvider('anthropic')}
+              label="Claude"
+              sub="Best quality"
+            />
+            <ChoicePill
+              selected={provider === 'ollama'}
+              onClick={() => setProvider('ollama')}
+              label="Ollama Cloud"
+              sub="Open-weight alternative"
+            />
+          </div>
+        </div>
+        <div>
+          <div
+            className="cb-sc"
+            style={{ fontSize: 13, color: 'var(--cb-text-muted)', letterSpacing: '0.12em', marginBottom: 10 }}
+          >
+            Research backend
+          </div>
+          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0, 1fr))', gap: 8 }}>
+            <ChoicePill
+              selected={researchBackend === 'anthropic'}
+              onClick={() => setResearchBackend('anthropic')}
+              label="Claude search"
+              sub="Needs Claude key"
+            />
+            <ChoicePill
+              selected={researchBackend === 'tavily'}
+              onClick={() => setResearchBackend('tavily')}
+              label="Tavily"
+              sub="Needs Tavily key"
+            />
+            <ChoicePill
+              selected={researchBackend === 'wikipedia'}
+              onClick={() => setResearchBackend('wikipedia')}
+              label="Wikipedia"
+              sub="No key needed"
+            />
+          </div>
+        </div>
+        <div>
+          <div
+            className="cb-sc"
+            style={{ fontSize: 13, color: 'var(--cb-text-muted)', letterSpacing: '0.12em', marginBottom: 10 }}
+          >
+            Build outputs
+          </div>
+          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 1fr))', gap: 8 }}>
+            <ChoicePill
+              selected={!advancedMode}
+              onClick={() => setAdvancedMode(false)}
+              label="Canvas-focused"
+              sub="Reading, quizzes, discussion"
+            />
+            <ChoicePill
+              selected={advancedMode}
+              onClick={() => setAdvancedMode(true)}
+              label="Everything"
+              sub="Adds challenge, activities, audio, slides"
+            />
+          </div>
+        </div>
+        <CodexInput
+          label={provider === 'anthropic' ? 'Anthropic · required' : 'Anthropic · optional'}
+          type="password"
+          value={claudeApiKey}
+          onChange={(e) => setClaudeApiKey(e.target.value)}
+          onBlur={() => {
+            if (claudeApiKey.trim() && claudeKeyValid === null) void validateClaude();
+          }}
+          placeholder="sk-ant-…"
+          suffix={
+            claudeStatus ? (
+              <span style={{ color: claudeStatus.color }}>{claudeStatus.text}</span>
+            ) : undefined
+          }
+          hint={
+            <a
+              href="https://console.anthropic.com/settings/keys"
+              target="_blank"
+              rel="noopener noreferrer"
+              style={linkStyle}
+            >
+              Where do Anthropic keys come from? ↗
+            </a>
+          }
+        />
+        <CodexInput
+          label={provider === 'ollama' ? 'Ollama Cloud · required' : 'Ollama Cloud · optional'}
+          type="password"
+          value={ollamaApiKey}
+          onChange={(e) => setOllamaApiKey(e.target.value)}
+          onBlur={() => {
+            if (ollamaApiKey.trim() && ollamaKeyValid === null) void validateOllama();
+          }}
+          placeholder="Ollama API key"
+          suffix={
+            ollamaStatus ? (
+              <span style={{ color: ollamaStatus.color }}>{ollamaStatus.text}</span>
+            ) : undefined
+          }
+          hint={
+            <a
+              href="https://ollama.com/settings/keys"
+              target="_blank"
+              rel="noopener noreferrer"
+              style={linkStyle}
+            >
+              Where do Ollama keys come from? ↗
+            </a>
+          }
+        />
+        {provider === 'ollama' && ollamaApiKey.trim() && (
+          <CodexInput
+            label="Ollama model"
+            value={ollamaModel}
+            onChange={(e) => setOllamaModel(e.target.value)}
+            placeholder="gpt-oss:120b-cloud"
+            hint={
+              <a
+                href="https://ollama.com/search?c=cloud"
+                target="_blank"
+                rel="noopener noreferrer"
+                style={linkStyle}
+              >
+                Browse cloud models ↗
+              </a>
+            }
+          />
+        )}
+        <CodexInput
+          label={researchBackend === 'tavily' ? 'Tavily · required' : 'Tavily · optional'}
+          type="password"
+          value={tavilyApiKey}
+          onChange={(e) => setTavilyApiKey(e.target.value)}
+          onBlur={() => {
+            if (tavilyApiKey.trim() && tavilyKeyValid === null) void validateTavily();
+          }}
+          placeholder="tvly-…"
+          suffix={
+            tavilyStatus ? (
+              <span style={{ color: tavilyStatus.color }}>{tavilyStatus.text}</span>
+            ) : undefined
+          }
+          hint={
+            <a
+              href="https://app.tavily.com/home"
+              target="_blank"
+              rel="noopener noreferrer"
+              style={linkStyle}
+            >
+              Where do Tavily keys come from? ↗
+            </a>
+          }
+        />
+        <div
+          style={{
+            padding: '12px 14px',
+            background: 'var(--cb-accent-emphasis-quiet)',
+            border: '0.5px solid var(--cb-accent-emphasis)',
+            borderLeft: '2px solid var(--cb-accent-emphasis)',
+            borderRadius: 2,
+            fontSize: 13.5,
+            color: 'var(--cb-text-default)',
+            lineHeight: 1.55,
+          }}
+        >
+          <strong style={{ fontWeight: 600 }}>OpenAI is strongly recommended.</strong>
+          {' '}Without it, each chapter ships with placeholder figure boxes
+          instead of editorial images, and the slide-deck export is locked
+          (slides are rendered as 4K editorial images, not text boxes).
+          You only pay OpenAI for what you generate.
+        </div>
+        <CodexInput
+          label="OpenAI · strongly recommended"
+          type="password"
+          value={openaiApiKey}
+          onChange={(e) => setOpenaiApiKey(e.target.value)}
+          onBlur={() => {
+            if (openaiApiKey.trim() && openaiKeyValid === null) void validateOpenai();
+          }}
+          placeholder="sk-proj-… · unlocks in-chapter images and the slide deck"
+          suffix={
+            openaiStatus ? (
+              <span style={{ color: openaiStatus.color }}>{openaiStatus.text}</span>
+            ) : undefined
+          }
+          hint={
+            <a
+              href="https://platform.openai.com/api-keys"
+              target="_blank"
+              rel="noopener noreferrer"
+              style={linkStyle}
+            >
+              Where do OpenAI keys come from? ↗ (gpt-image-2 renders the images)
+            </a>
+          }
+        />
+        <CodexInput
+          label="ElevenLabs · optional"
+          type="password"
+          value={elevenLabsApiKey}
+          onChange={(e) => setElevenLabsApiKey(e.target.value)}
+          onBlur={() => {
+            if (elevenLabsApiKey.trim() && elevenLabsKeyValid === null) {
+              void validateElevenLabs();
+            }
+          }}
+          placeholder="sk_… · narrates the audio transcript as a class audiobook"
+          suffix={
+            elevenLabsStatus ? (
+              <span style={{ color: elevenLabsStatus.color }}>
+                {elevenLabsStatus.text}
+              </span>
+            ) : undefined
+          }
+          hint={
+            <>
+              <span
+                className="cb-italic"
+                style={{ color: 'var(--cb-text-muted)', fontSize: 13 }}
+              >
+                Skip happily — the audio transcript still ships as text without it. ·{' '}
+              </span>
+              <a
+                href="https://elevenlabs.io/app/settings/api-keys"
+                target="_blank"
+                rel="noopener noreferrer"
+                style={linkStyle}
+              >
+                Where do ElevenLabs keys come from? ↗
+              </a>
+            </>
+          }
+        />
+        <VoicePicker
+          value={setup.voiceId}
+          onChange={(id) => updateSetup({ voiceId: id })}
+        />
       </div>
-    </motion.div>
+    </CodexModal>
   );
 }
diff --git a/src/pages/SyllabusPage.tsx b/src/pages/SyllabusPage.tsx
index a7c37c4..f138321 100644
--- a/src/pages/SyllabusPage.tsx
+++ b/src/pages/SyllabusPage.tsx
@@ -1,120 +1,167 @@
-import { useEffect, useState, useCallback, useRef } from 'react';
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import { useNavigate } from 'react-router-dom';
-import { motion, AnimatePresence } from 'framer-motion';
 import { useCourseStore } from '../store/courseStore';
+import { TemplateTitleEditor } from '../components/syllabus/TemplateTitleEditor';
 import { useApiStore } from '../store/apiStore';
 import { useUiStore } from '../store/uiStore';
 import { streamMessage } from '../services/claude/streaming';
 import { MODELS } from '../services/claude/client';
-import { buildSyllabusPrompt, parseSyllabusResponse, parsePartialChapters } from '../prompts/syllabus';
-import { Button } from '../components/shared/Button';
-import { SyllabusTimeline } from '../components/syllabus/SyllabusTimeline';
-import { ScienceOverlay } from '../components/syllabus/ScienceOverlay';
-import { CurriculumMapPanel } from '../components/syllabus/CurriculumMapPanel';
-import { InlineFeedback } from '../components/syllabus/InlineFeedback';
-import { TemplateTitleEditor } from '../components/syllabus/TemplateTitleEditor';
-import type { ChapterSyllabus } from '../types/course';
+import {
+  buildSyllabusPrompt,
+  parseSyllabusResponse,
+  parsePartialChapters,
+} from '../prompts/syllabus';
+import type { ChapterSyllabus, WidgetSpec } from '../types/course';
 import { friendlyError } from '../utils/errors';
+import { CodexButton, CodexInput, CodexTextarea, CodexModal } from '../components/codex';
+
+const ROMAN_UPPER = [
+  'I', 'II', 'III', 'IV', 'V', 'VI', 'VII', 'VIII', 'IX', 'X',
+  'XI', 'XII', 'XIII', 'XIV', 'XV', 'XVI', 'XVII', 'XVIII', 'XIX', 'XX',
+];
+
+type Phase = 'thinking' | 'drafting' | 'settled';
 
 export function SyllabusPage() {
   const navigate = useNavigate();
-  const { setup, syllabus, setSyllabus, syllabusConversation, addSyllabusMessage, setStage, completeStage } = useCourseStore();
+  const {
+    setup,
+    syllabus,
+    setSyllabus,
+    updateSyllabusChapter,
+    syllabusConversation,
+    addSyllabusMessage,
+    setStage,
+    completeStage,
+    chapters,
+    researchDossiers,
+    resetDownstream,
+  } = useCourseStore();
   const { claudeApiKey } = useApiStore();
-  const { isGenerating, setIsGenerating, showScienceOverlay, toggleScienceOverlay, error, setError } = useUiStore();
-  const [isRefining, setIsRefining] = useState(false);
-  const [showCurriculumMap, setShowCurriculumMap] = useState(false);
-  const [showFullOverview, setShowFullOverview] = useState(false);
+  const { isGenerating, setIsGenerating, error, setError } = useUiStore();
+
   const [isThinking, setIsThinking] = useState(false);
-  const [thinkingText, setThinkingText] = useState('');
   const [partialChapters, setPartialChapters] = useState<ChapterSyllabus[]>([]);
   const [partialTitle, setPartialTitle] = useState('');
   const [partialOverview, setPartialOverview] = useState('');
+  const [overviewOpen, setOverviewOpen] = useState(false);
+  const [thinkingText, setThinkingText] = useState('');
+  const [elapsedSec, setElapsedSec] = useState(0);
+  const [showRegenConfirm, setShowRegenConfirm] = useState(false);
   const fullTextRef = useRef('');
   const generationStarted = useRef(false);
 
-  const generateSyllabus = useCallback(async (feedbackText?: string) => {
-    setIsGenerating(true);
-    setIsThinking(true);
-    setThinkingText('');
-    setPartialChapters([]);
-    setPartialTitle('');
-    setPartialOverview('');
-    setError(null);
-    fullTextRef.current = '';
-
-    try {
-      const { systemPrompt, userMessage } = buildSyllabusPrompt(setup, feedbackText, syllabusConversation);
-
-      if (feedbackText) {
-        addSyllabusMessage('user', feedbackText);
-      }
+  const generateSyllabus = useCallback(
+    async (feedbackText?: string) => {
+      setIsGenerating(true);
+      setIsThinking(true);
+      setPartialChapters([]);
+      setPartialTitle('');
+      setPartialOverview('');
+      setOverviewOpen(false);
+      setThinkingText('');
+      setElapsedSec(0);
+      setError(null);
+      fullTextRef.current = '';
 
-      const messages = feedbackText && syllabusConversation.length > 0
-        ? [
-            ...syllabusConversation.map((m) => ({
-              role: m.role as 'user' | 'assistant',
-              content: m.content,
-            })),
-            { role: 'user' as const, content: userMessage },
-          ]
-        : [{ role: 'user' as const, content: userMessage }];
-
-      const fullText = await streamMessage(
-        {
-          apiKey: claudeApiKey,
-          model: MODELS.opus,
-          system: systemPrompt,
-          messages,
-          thinkingBudget: feedbackText ? 'high' : 'max',
-          maxTokens: 16000,
-        },
-        {
-          onText: (text) => {
-            setIsThinking(false);
-            fullTextRef.current += text;
-
-            // Try progressive parsing
-            const partial = parsePartialChapters(fullTextRef.current);
-            if (partial.title) setPartialTitle(partial.title);
-            if (partial.overview) setPartialOverview(partial.overview);
-            if (partial.chapters.length > partialChapters.length) {
-              setPartialChapters(partial.chapters);
-            }
+      try {
+        const { systemPrompt, userMessage } = buildSyllabusPrompt(
+          setup,
+          feedbackText,
+          syllabusConversation,
+        );
+
+        if (feedbackText) addSyllabusMessage('user', feedbackText);
+
+        const messages =
+          feedbackText && syllabusConversation.length > 0
+            ? [
+                ...syllabusConversation.map((m) => ({
+                  role: m.role as 'user' | 'assistant',
+                  content: m.content,
+                })),
+                { role: 'user' as const, content: userMessage },
+              ]
+            : [{ role: 'user' as const, content: userMessage }];
+
+        const fullText = await streamMessage(
+          {
+            apiKey: claudeApiKey,
+            model: MODELS.opus,
+            system: systemPrompt,
+            messages,
+            // 'high' (not 'max'): on Opus 4.8 the effort levels were
+            // recalibrated and 'max' overthinks — it stalled ~7 min before the
+            // first token. 'high' matches the (fast) chapter build and is the
+            // recommended floor for intelligence-sensitive work.
+            thinkingBudget: 'high',
+            maxTokens: 16000,
           },
-          onThinking: (text) => {
-            setThinkingText(prev => prev + text);
+          {
+            onText: (text) => {
+              setIsThinking(false);
+              fullTextRef.current += text;
+              const partial = parsePartialChapters(fullTextRef.current);
+              if (partial.title) setPartialTitle(partial.title);
+              if (partial.overview) setPartialOverview(partial.overview);
+              if (partial.chapters.length > partialChapters.length) {
+                setPartialChapters(partial.chapters);
+              }
+            },
+            onThinking: (text) => setThinkingText((prev) => prev + text),
+            onError: (err) => setError(err.message),
           },
-          onError: (err) => setError(err.message),
+        );
+
+        addSyllabusMessage('assistant', fullText);
+        const parsed = parseSyllabusResponse(fullText);
+        if (parsed) {
+          setSyllabus(parsed);
+          setPartialChapters([]);
+          setOverviewOpen(true);
+        } else {
+          setError(
+            'Failed to parse syllabus. The model may have returned malformed JSON. Try regenerating.',
+          );
         }
-      );
-
-      addSyllabusMessage('assistant', fullText);
-      const parsed = parseSyllabusResponse(fullText);
-      if (parsed) {
-        setSyllabus(parsed);
-        setPartialChapters([]);
-      } else {
-        setError('Failed to parse syllabus. The model may have returned malformed JSON. Try regenerating.');
+      } catch (err) {
+        setError(friendlyError(err, 'Syllabus generation failed.'));
+      } finally {
+        setIsGenerating(false);
+        // Collapse thinking once we leave the thinking phase.
+        setIsThinking(false);
       }
-    } catch (err) {
-      setError(friendlyError(err, 'Syllabus generation failed.'));
-    } finally {
-      setIsGenerating(false);
-      setIsThinking(false);
-    }
-  }, [setup, claudeApiKey, syllabusConversation, addSyllabusMessage, setSyllabus, setIsGenerating, setError, partialChapters.length]);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [setup, claudeApiKey, syllabusConversation],
+  );
 
   useEffect(() => {
     if (!syllabus && !isGenerating && claudeApiKey && !generationStarted.current) {
       generationStarted.current = true;
-      generateSyllabus();
+      void generateSyllabus();
     }
-  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
-  const handleRefine = (feedback: string) => {
-    setIsRefining(true);
-    generateSyllabus(feedback).finally(() => setIsRefining(false));
-  };
+  // Live elapsed counter for the thinking trace — gives the Opus planning
+  // pause a visible heartbeat instead of a frozen label.
+  useEffect(() => {
+    if (!isGenerating) return;
+    setElapsedSec(0);
+    const startedAt = Date.now();
+    const id = window.setInterval(
+      () => setElapsedSec(Math.floor((Date.now() - startedAt) / 1000)),
+      1000,
+    );
+    return () => window.clearInterval(id);
+  }, [isGenerating]);
 
   const handleProceed = () => {
     completeStage('syllabus');
@@ -122,214 +169,1157 @@ export function SyllabusPage() {
     navigate('/research');
   };
 
-  const displayChapters = syllabus?.chapters || partialChapters;
+  // ─── Derived state ──────────────────────────────────────────────────
+  const totalChapters = Math.max(setup.numChapters || 12, partialChapters.length);
+  const displayChapters: ChapterSyllabus[] = syllabus?.chapters ?? partialChapters;
   const displayTitle = syllabus?.courseTitle || partialTitle;
   const displayOverview = syllabus?.courseOverview || partialOverview;
 
+  const phase: Phase = syllabus
+    ? 'settled'
+    : isThinking
+    ? 'thinking'
+    : isGenerating
+    ? 'drafting'
+    : 'thinking'; // pre-generation transient — useEffect is about to fire
+
+  const draftedCount = syllabus ? totalChapters : partialChapters.length;
+  const activeDraftIndex = syllabus ? -1 : Math.max(0, partialChapters.length - 1);
+
+  // Inline edits are only offered once a syllabus has settled and nothing is
+  // streaming. During a regenerate the previous syllabus stays on screen
+  // (phase reads 'settled'), so gate on isGenerating too — otherwise an open
+  // editor would hold stale drafts over the incoming chapters.
+  const editable = Boolean(syllabus) && !isGenerating;
+
   return (
-    <motion.div
-      initial={{ opacity: 0 }}
-      animate={{ opacity: 1 }}
-      className="max-w-5xl mx-auto py-8"
+    <div
+      style={{
+        fontFamily: 'var(--font-cb-serif)',
+        color: 'var(--cb-text-default)',
+        padding: '32px 0 56px',
+      }}
     >
-      {/* Header */}
-      <div className="mb-8">
-        <AnimatePresence mode="wait">
-          <motion.h1
-            key={displayTitle || 'loading'}
-            initial={{ opacity: 0, y: 5 }}
-            animate={{ opacity: 1, y: 0 }}
-            className="text-3xl font-bold mb-2"
-          >
-            {displayTitle || (isThinking ? 'Thinking...' : 'Generating Syllabus...')}
-          </motion.h1>
-        </AnimatePresence>
-        {displayOverview && (
-          <motion.div
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            className="mb-4 max-w-3xl"
-          >
-            <p className="text-text-secondary text-sm leading-relaxed">
-              {showFullOverview
-                ? displayOverview
-                : displayOverview.split(/(?<=\.)\s+/).slice(0, 3).join(' ')}
-              {!showFullOverview && displayOverview.split(/(?<=\.)\s+/).length > 3 && (
-                <button
-                  onClick={() => setShowFullOverview(true)}
-                  className="ml-1 text-violet-400 hover:text-violet-300 cursor-pointer bg-transparent border-0 p-0 text-sm"
-                >
-                  Read more
-                </button>
-              )}
-              {showFullOverview && displayOverview.split(/(?<=\.)\s+/).length > 3 && (
-                <button
-                  onClick={() => setShowFullOverview(false)}
-                  className="ml-1 text-violet-400 hover:text-violet-300 cursor-pointer bg-transparent border-0 p-0 text-sm"
-                >
-                  Show less
-                </button>
-              )}
-            </p>
-          </motion.div>
+      <div style={{ maxWidth: 1180, margin: '0 auto' }}>
+        <SyllabusBanner
+          phase={phase}
+          title={displayTitle}
+          drafted={draftedCount}
+          total={totalChapters}
+          onEditBrief={() => navigate('/setup')}
+          onRegenerate={() => {
+            // Regenerating restructures the course — built chapters and
+            // dossiers keyed to the old chapter numbers would be orphaned.
+            // Clear them with consent instead of stranding them silently.
+            if (chapters.length > 0 || researchDossiers.length > 0) {
+              setShowRegenConfirm(true);
+            } else {
+              void generateSyllabus();
+            }
+          }}
+          onProceed={handleProceed}
+        />
+
+        <CodexModal
+          open={showRegenConfirm}
+          onClose={() => setShowRegenConfirm(false)}
+          kicker="regenerate syllabus"
+          title={
+            <>
+              Start the syllabus <span className="cb-italic">over</span>?
+            </>
+          }
+          sub={`A fresh syllabus reorders and renames chapters, so the materials built against this one can't carry over. Regenerating clears ${
+            chapters.length > 0
+              ? `${chapters.length} drafted ${chapters.length === 1 ? 'chapter' : 'chapters'}`
+              : ''
+          }${chapters.length > 0 && researchDossiers.length > 0 ? ' and ' : ''}${
+            researchDossiers.length > 0
+              ? `${researchDossiers.length} research ${researchDossiers.length === 1 ? 'dossier' : 'dossiers'}`
+              : ''
+          } — and any manual edits to chapter titles or narratives. Download a project file from Export first if you want a backup.`}
+          width={500}
+          actions={
+            <>
+              <span style={{ flex: 1 }} />
+              <CodexButton variant="ghost" onClick={() => setShowRegenConfirm(false)}>
+                Cancel
+              </CodexButton>
+              <CodexButton
+                variant="destructive"
+                onClick={() => {
+                  setShowRegenConfirm(false);
+                  resetDownstream();
+                  void generateSyllabus();
+                }}
+              >
+                Clear & regenerate →
+              </CodexButton>
+            </>
+          }
+        >
+          <></>
+        </CodexModal>
+
+        {phase === 'thinking' && (
+          <ThinkingTrace thinkingText={thinkingText} elapsedSec={elapsedSec} />
         )}
-        <div className="flex items-center justify-between">
-          <div className="flex items-center gap-3">
-            <Button
-              variant={showScienceOverlay ? 'primary' : 'secondary'}
-              size="sm"
-              onClick={toggleScienceOverlay}
-              disabled={displayChapters.length === 0}
-            >
-              <svg className="mr-1.5 w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
-              </svg>
-              Show the Science
-            </Button>
-            <Button
-              variant={showCurriculumMap ? 'primary' : 'secondary'}
-              size="sm"
-              onClick={() => setShowCurriculumMap(!showCurriculumMap)}
-              disabled={displayChapters.length === 0 || isGenerating}
-              title={isGenerating ? 'Wait for the syllabus to finish generating' : undefined}
-            >
-              <svg className="mr-1.5 w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                <rect x="3" y="3" width="7" height="7" rx="1" />
-                <rect x="14" y="3" width="7" height="7" rx="1" />
-                <rect x="3" y="14" width="7" height="7" rx="1" />
-                <rect x="14" y="14" width="7" height="7" rx="1" />
-              </svg>
-              Curriculum Map
-            </Button>
+
+        <OverviewDisclosure
+          overview={displayOverview}
+          open={overviewOpen}
+          onToggle={() => setOverviewOpen((v) => !v)}
+          phase={phase}
+        />
+
+        {error && (
+          <ErrorBanner
+            message={error}
+            onRetry={() => {
+              setError(null);
+              void generateSyllabus();
+            }}
+          />
+        )}
+
+        {/* Template-mode title editor — only when a Canvas template is active and
+            the syllabus has finished generating. */}
+        {setup.templateId && syllabus && phase === 'settled' && (
+          <div style={{ marginTop: 24 }}>
+            <TemplateTitleEditor syllabus={syllabus} setSyllabus={setSyllabus} />
           </div>
-          <Button
-            size="sm"
-            disabled={!syllabus || isGenerating}
-            onClick={handleProceed}
+        )}
+
+        {/* Main grid — skeleton renders from second zero */}
+        <div
+          className="cb-syllabus-grid"
+          style={{
+            display: 'grid',
+            gridTemplateColumns: '1.5fr 1fr',
+            gap: 48,
+            alignItems: 'start',
+            marginTop: 24,
+          }}
+        >
+          <ChapterTimeline
+            totalChapters={totalChapters}
+            chapters={displayChapters}
+            draftedCount={draftedCount}
+            activeDraftIndex={activeDraftIndex}
+            phase={phase}
+            editable={editable}
+            onSaveChapter={updateSyllabusChapter}
+          />
+          {displayChapters.length >= 2 && (
+            <SyllabusAside chapters={displayChapters} />
+          )}
+        </div>
+
+        {/* Folio hidden during generation */}
+        {phase === 'settled' && <div className="cb-folio">— 02 —</div>}
+      </div>
+    </div>
+  );
+}
+
+// ─── ThinkingTrace (Opus planning pause) ──────────────────────────────────
+function formatElapsed(sec: number): string {
+  const m = Math.floor(sec / 60);
+  const s = sec % 60;
+  return m > 0 ? `${m}:${String(s).padStart(2, '0')}` : `${s}s`;
+}
+
+// Surfaces Opus's summarized reasoning (thinking.display = 'summarized') while
+// it plans the course, so the pre-output pause reads as live progress rather
+// than a frozen "Designing the course architecture…" label.
+function ThinkingTrace({
+  thinkingText,
+  elapsedSec,
+}: {
+  thinkingText: string;
+  elapsedSec: number;
+}) {
+  return (
+    <div style={{ marginTop: 18 }}>
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'baseline',
+          gap: 8,
+          fontSize: 14.5,
+          color: 'var(--cb-text-muted)',
+        }}
+      >
+        <PenStroke width={48} />
+        <span className="cb-italic">
+          {thinkingText
+            ? `Reasoning through the course architecture · ${formatElapsed(elapsedSec)}`
+            : `Warming up Opus · ${formatElapsed(elapsedSec)}`}
+        </span>
+      </div>
+
+      {!thinkingText && elapsedSec >= 6 && (
+        <p
+          className="cb-italic"
+          style={{
+            margin: '12px 0 0',
+            fontSize: 13,
+            lineHeight: 1.55,
+            color: 'var(--cb-text-muted)',
+            maxWidth: '72ch',
+          }}
+        >
+          Opus plans the whole course before it writes — the arc, the chapter
+          sequence, and how the learning-science principles thread through. The
+          outline streams in as it settles. You can click away; we'll keep
+          going.
+        </p>
+      )}
+
+      {thinkingText && (
+        <div
+          style={{
+            marginTop: 14,
+            maxHeight: 220,
+            overflow: 'hidden',
+            maskImage: 'linear-gradient(to bottom, transparent 0, #000 32px)',
+            WebkitMaskImage:
+              'linear-gradient(to bottom, transparent 0, #000 32px)',
+          }}
+        >
+          <pre
+            className="cb-mono"
+            style={{
+              margin: 0,
+              fontSize: 11.5,
+              lineHeight: 1.7,
+              color: 'var(--cb-text-muted)',
+              whiteSpace: 'pre-wrap',
+              maxWidth: '80ch',
+            }}
           >
-            Continue to Research
-            <svg className="ml-1.5 w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-              <line x1="5" y1="12" x2="19" y2="12" />
-              <polyline points="12 5 19 12 12 19" />
-            </svg>
-          </Button>
+            {thinkingText.slice(-900)}
+          </pre>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ─── SyllabusBanner ──────────────────────────────────────────────────────
+
+function SyllabusBanner({
+  phase,
+  title,
+  drafted,
+  total,
+  onEditBrief,
+  onRegenerate,
+  onProceed,
+}: {
+  phase: Phase;
+  title: string;
+  drafted: number;
+  total: number;
+  onEditBrief: () => void;
+  onRegenerate: () => void;
+  onProceed: () => void;
+}) {
+  const progress =
+    phase === 'thinking'
+      ? 'Designing the course architecture…'
+      : phase === 'drafting'
+      ? `Drafting chapter ${Math.min(drafted + 1, total)} of ${total}.`
+      : `${total} ${pluralise('chapter', total)} · syllabus settled.`;
+
+  const displayTitle =
+    phase === 'thinking' && !title
+      ? 'Drafting your syllabus…'
+      : title || 'Drafting your syllabus…';
+
+  const isGenerating = phase !== 'settled';
+
+  return (
+    <header
+      className="cb-page-head"
+      style={{
+        display: 'grid',
+        gridTemplateColumns: '1fr auto',
+        gap: 24,
+        alignItems: 'flex-end',
+        paddingBottom: 14,
+        marginBottom: 18,
+        borderBottom: '0.5px solid var(--cb-border-rule)',
+      }}
+    >
+      <div style={{ minWidth: 0 }}>
+        <div
+          className="cb-sc"
+          style={{
+            fontSize: 13,
+            color: 'var(--cb-accent-emphasis)',
+            letterSpacing: '0.16em',
+          }}
+        >
+          The syllabus
+        </div>
+        <h1
+          style={{
+            margin: '4px 0 6px',
+            fontSize: 26,
+            lineHeight: 1.25,
+            fontWeight: 500,
+            fontVariationSettings: '"opsz" 20',
+            letterSpacing: '-0.005em',
+            color: 'var(--cb-text-default)',
+          }}
+        >
+          {displayTitle}
+        </h1>
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'baseline',
+            gap: 8,
+            fontSize: 15,
+            lineHeight: 1.5,
+            color: 'var(--cb-text-muted)',
+          }}
+        >
+          {phase !== 'settled' && <PenStroke width={48} />}
+          {phase === 'settled' && (
+            <span
+              style={{ color: 'var(--cb-accent-emphasis)', fontSize: 14.5 }}
+            >
+              —
+            </span>
+          )}
+          <span className="cb-italic">{progress}</span>
         </div>
       </div>
 
-      {/* Error */}
-      {error && (
-        <motion.div
-          initial={{ opacity: 0, y: -10 }}
-          animate={{ opacity: 1, y: 0 }}
-          className="mb-6 p-4 rounded-lg bg-error/10 border border-error/20 text-error text-sm"
+      <div
+        className="cb-page-head-actions"
+        style={{ display: 'flex', gap: 10, flexShrink: 0, alignItems: 'baseline', flexWrap: 'wrap' }}
+      >
+        <CodexButton
+          variant="ghost"
+          size="sm"
+          onClick={onEditBrief}
+          disabled={isGenerating}
         >
-          {error}
+          Edit brief
+        </CodexButton>
+        <CodexButton
+          variant="secondary"
+          size="sm"
+          onClick={onRegenerate}
+          disabled={isGenerating}
+        >
+          Regenerate
+        </CodexButton>
+        <CodexButton
+          variant="primary"
+          size="sm"
+          onClick={onProceed}
+          disabled={isGenerating}
+        >
+          {isGenerating ? 'Begin research · drafting…' : 'Begin research →'}
+        </CodexButton>
+      </div>
+    </header>
+  );
+}
+
+// ─── OverviewDisclosure ──────────────────────────────────────────────────
+
+function OverviewDisclosure({
+  overview,
+  open,
+  onToggle,
+  phase,
+}: {
+  overview: string;
+  open: boolean;
+  onToggle: () => void;
+  phase: Phase;
+}) {
+  if (!overview) return null;
+
+  const isLong = overview.split(/\s+/).length > 40;
+  // When closed and long, show first sentence only as a teaser.
+  const teaser = isLong ? (overview.split(/(?<=\.)\s+/)[0] ?? overview) : overview;
+
+  return (
+    <section style={{ marginBottom: 18 }}>
+      <button
+        type="button"
+        onClick={isLong ? onToggle : undefined}
+        className="cb-focus"
+        style={{
+          display: 'flex',
+          alignItems: 'baseline',
+          gap: 10,
+          background: 'transparent',
+          border: 0,
+          padding: 0,
+          cursor: isLong ? 'pointer' : 'default',
+          fontFamily: 'inherit',
+          textAlign: 'left',
+        }}
+      >
+        <span
+          style={{
+            fontSize: 17,
+            lineHeight: 1.55,
+            color: 'var(--cb-text-default)',
+            maxWidth: 800,
+          }}
+        >
+          {open ? overview : teaser}
+        </span>
+      </button>
+      {isLong && (
+        <div style={{ marginTop: 6 }}>
           <button
-            onClick={() => { setError(null); generateSyllabus(); }}
-            className="ml-3 underline hover:no-underline cursor-pointer"
+            type="button"
+            onClick={onToggle}
+            className="cb-focus"
+            style={{
+              background: 'transparent',
+              border: 0,
+              padding: 0,
+              cursor: 'pointer',
+              color: 'var(--cb-accent-link)',
+              textDecoration: 'underline',
+              textDecorationThickness: '0.5px',
+              textUnderlineOffset: 3,
+              fontFamily: 'inherit',
+              fontSize: 14.5,
+              fontStyle: 'italic',
+            }}
           >
-            Try again
+            {open
+              ? '↑ collapse overview'
+              : phase === 'settled'
+              ? '↓ read full overview'
+              : '↓ read what has drafted so far'}
           </button>
-        </motion.div>
+        </div>
       )}
+    </section>
+  );
+}
+
+// ─── ErrorBanner ─────────────────────────────────────────────────────────
 
-      {/* Thinking state */}
-      <AnimatePresence>
-        {isThinking && (
-          <motion.div
-            initial={{ opacity: 0, y: 10 }}
-            animate={{ opacity: 1, y: 0 }}
-            exit={{ opacity: 0, y: -10 }}
-            className="mb-8"
+function ErrorBanner({
+  message,
+  onRetry,
+}: {
+  message: string;
+  onRetry: () => void;
+}) {
+  return (
+    <div
+      style={{
+        padding: '12px 16px',
+        marginBottom: 22,
+        background: 'var(--cb-status-danger-bg)',
+        borderLeft: '2px solid var(--cb-status-danger)',
+        fontSize: 15,
+        lineHeight: 1.55,
+        color: 'var(--cb-text-default)',
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'baseline',
+        gap: 16,
+      }}
+    >
+      <span>{message}</span>
+      <button
+        type="button"
+        onClick={onRetry}
+        className="cb-focus"
+        style={{
+          background: 'transparent',
+          border: 0,
+          padding: 0,
+          cursor: 'pointer',
+          color: 'var(--cb-accent-link)',
+          textDecoration: 'underline',
+          textDecorationThickness: '0.5px',
+          textUnderlineOffset: 3,
+          fontFamily: 'inherit',
+          fontSize: 14.5,
+          whiteSpace: 'nowrap',
+        }}
+      >
+        Try again
+      </button>
+    </div>
+  );
+}
+
+// ─── ChapterTimeline ─────────────────────────────────────────────────────
+
+function ChapterTimeline({
+  totalChapters,
+  chapters,
+  draftedCount,
+  activeDraftIndex,
+  phase,
+  editable,
+  onSaveChapter,
+}: {
+  totalChapters: number;
+  chapters: ChapterSyllabus[];
+  draftedCount: number;
+  activeDraftIndex: number;
+  phase: Phase;
+  editable: boolean;
+  onSaveChapter: (
+    number: number,
+    updates: { title: string; narrative: string },
+  ) => void;
+}) {
+  return (
+    <section>
+      <div
+        className="cb-sc"
+        style={{
+          fontSize: 13,
+          color: 'var(--cb-text-muted)',
+          letterSpacing: '0.14em',
+          marginBottom: 18,
+        }}
+      >
+        Chapter timeline
+      </div>
+      <div style={{ position: 'relative', paddingLeft: 32 }}>
+        <div
+          aria-hidden
+          style={{
+            position: 'absolute',
+            left: 14,
+            top: 8,
+            bottom: 8,
+            width: 0.5,
+            background: 'var(--cb-border-rule)',
+          }}
+        />
+        {Array.from({ length: totalChapters }).map((_, i) => {
+          const isDrafted = phase === 'settled' || i < draftedCount - (phase === 'drafting' ? 1 : 0);
+          const isActive =
+            phase === 'drafting' && i === activeDraftIndex;
+          const slotState: 'drafted' | 'drafting' | 'queued' = isDrafted
+            ? 'drafted'
+            : isActive
+            ? 'drafting'
+            : 'queued';
+          const chapter = chapters[i];
+
+          return (
+            <ChapterSlot
+              key={i}
+              index={i}
+              state={slotState}
+              chapter={chapter}
+              editable={editable}
+              onSaveChapter={onSaveChapter}
+            />
+          );
+        })}
+      </div>
+
+    </section>
+  );
+}
+
+function ChapterSlot({
+  index,
+  state,
+  chapter,
+  editable,
+  onSaveChapter,
+}: {
+  index: number;
+  state: 'drafted' | 'drafting' | 'queued';
+  chapter?: ChapterSyllabus;
+  editable: boolean;
+  onSaveChapter: (
+    number: number,
+    updates: { title: string; narrative: string },
+  ) => void;
+}) {
+  const [expanded, setExpanded] = useState(false);
+  // Row hover reveals the edit affordance (it stays keyboard-focusable
+  // regardless — focus also reveals it, inside DraftedSlot).
+  const [hovered, setHovered] = useState(false);
+  const roman = ROMAN_UPPER[index] ?? String(index + 1);
+  const week = index + 1;
+
+  const nodeStyle: React.CSSProperties =
+    state === 'drafted'
+      ? {
+          background: 'var(--cb-accent-emphasis)',
+          border: '1px solid var(--cb-accent-emphasis)',
+        }
+      : state === 'drafting'
+      ? {
+          background: 'var(--cb-ground-page)',
+          border: '1px solid var(--cb-accent-emphasis)',
+        }
+      : {
+          background: 'var(--cb-ground-page)',
+          border: '1px solid var(--cb-border-strong)',
+        };
+
+  const title = chapter?.title?.trim() ?? '';
+  const narrative = chapter?.narrative?.trim() ?? '';
+  const keyConcepts = chapter?.keyConcepts ?? [];
+  const widgets = chapter?.widgets ?? [];
+
+  return (
+    <div
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+      style={{
+        position: 'relative',
+        padding: '14px 0 16px 24px',
+        borderBottom: '0.5px solid var(--cb-border-subtle)',
+      }}
+    >
+      {/* Node on the rail */}
+      <span
+        aria-hidden
+        style={{
+          position: 'absolute',
+          left: -22,
+          top: 18,
+          width: 11,
+          height: 11,
+          borderRadius: 999,
+          ...nodeStyle,
+        }}
+      />
+
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateColumns: '56px 1fr',
+          alignItems: 'baseline',
+          gap: 16,
+        }}
+      >
+        {/* Gutter — Roman + week */}
+        <div>
+          <div
+            className="cb-italic"
+            style={{
+              fontSize: 24,
+              color:
+                state === 'queued'
+                  ? 'var(--cb-text-subtle)'
+                  : 'var(--cb-accent-emphasis)',
+              lineHeight: 1,
+              fontVariationSettings: '"opsz" 20',
+            }}
           >
-            <div className="bg-bg-card border border-violet-500/15 rounded-xl p-6">
-              <div className="flex items-center gap-3 mb-4">
-                <div className="relative">
-                  <div className="w-3 h-3 rounded-full bg-violet-500" />
-                  <div className="absolute inset-0 w-3 h-3 rounded-full bg-violet-500 animate-ping" />
-                </div>
-                <span className="text-sm font-medium text-violet-400">
-                  Extended thinking — designing your course architecture...
-                </span>
-              </div>
-              {thinkingText && (
-                <div className="relative">
-                  <div className="text-xs text-text-muted/60 font-mono leading-relaxed max-h-32 overflow-hidden">
-                    {thinkingText.slice(-500)}
-                  </div>
-                  <div className="absolute bottom-0 left-0 right-0 h-12 bg-gradient-to-t from-bg-card to-transparent" />
-                </div>
-              )}
-              {!thinkingText && (
-                <div className="flex gap-1">
-                  {[0, 1, 2].map(i => (
-                    <motion.div
-                      key={i}
-                      className="w-2 h-2 rounded-full bg-violet-500/40"
-                      animate={{ opacity: [0.3, 1, 0.3] }}
-                      transition={{ duration: 1.5, repeat: Infinity, delay: i * 0.3 }}
-                    />
-                  ))}
-                </div>
-              )}
-            </div>
-          </motion.div>
-        )}
-      </AnimatePresence>
-
-      {/* Streaming progress */}
-      {isGenerating && !isThinking && !syllabus && (
-        <motion.div
-          initial={{ opacity: 0 }}
-          animate={{ opacity: 1 }}
-          className="mb-6 flex items-center gap-3"
-        >
-          <div className="w-2 h-2 rounded-full bg-violet-500 animate-pulse" />
-          <span className="text-sm text-text-secondary">
-            Building syllabus... {partialChapters.length > 0 ? `${partialChapters.length} chapters so far` : 'parsing response'}
-          </span>
-        </motion.div>
-      )}
+            {roman}
+          </div>
+          <div
+            className="cb-mono"
+            style={{
+              fontSize: 11.5,
+              color: 'var(--cb-text-muted)',
+              marginTop: 5,
+              letterSpacing: '0.04em',
+            }}
+          >
+            week {week}
+          </div>
+        </div>
 
-      {/* Template-mode title editor — only when a Canvas template is active and
-          the syllabus has finished generating. */}
-      {setup.templateId && syllabus && (
-        <TemplateTitleEditor syllabus={syllabus} setSyllabus={setSyllabus} />
-      )}
+        {/* Content */}
+        <div style={{ minWidth: 0 }}>
+          {state === 'drafted' && (
+            <DraftedSlot
+              title={title}
+              narrative={narrative}
+              keyConcepts={keyConcepts}
+              widgets={widgets}
+              expanded={expanded}
+              onToggle={() => setExpanded((v) => !v)}
+              editable={editable && !!chapter}
+              rowHovered={hovered}
+              onSave={(updates) => {
+                if (chapter) onSaveChapter(chapter.number, updates);
+              }}
+            />
+          )}
+          {state === 'drafting' && (
+            <DraftingSlot title={title} narrative={narrative} />
+          )}
+          {state === 'queued' && <QueuedSlot />}
+        </div>
+      </div>
+    </div>
+  );
+}
 
-      {/* Timeline */}
-      <AnimatePresence>
-        {displayChapters.length > 0 && (
-          <SyllabusTimeline
-            chapters={displayChapters}
-            showScience={showScienceOverlay}
+function DraftedSlot({
+  title,
+  narrative,
+  keyConcepts,
+  widgets,
+  expanded,
+  onToggle,
+  editable,
+  rowHovered,
+  onSave,
+}: {
+  title: string;
+  narrative: string;
+  keyConcepts: string[];
+  widgets: WidgetSpec[];
+  expanded: boolean;
+  onToggle: () => void;
+  editable: boolean;
+  rowHovered: boolean;
+  onSave: (updates: { title: string; narrative: string }) => void;
+}) {
+  const [editing, setEditing] = useState(false);
+  const [draftTitle, setDraftTitle] = useState('');
+  const [draftNarrative, setDraftNarrative] = useState('');
+  const [editFocused, setEditFocused] = useState(false);
+
+  // If a regenerate kicks off mid-edit, drop back to the read view — an open
+  // editor would otherwise hold stale drafts over the incoming chapter.
+  // Adjusted during render (React's sanctioned pattern) rather than in an
+  // effect, so there's no extra committed frame with a stale editor.
+  if (!editable && editing) setEditing(false);
+
+  const beginEdit = () => {
+    setDraftTitle(title);
+    setDraftNarrative(narrative);
+    setEditing(true);
+  };
+
+  const cancelEdit = () => setEditing(false);
+
+  const saveEdit = () => {
+    const trimmedTitle = draftTitle.trim();
+    if (!trimmedTitle) return; // an empty title is never saved
+    onSave({ title: trimmedTitle, narrative: draftNarrative.trim() });
+    setEditing(false);
+  };
+
+  // Two concepts max — kicker is for scanning, not for cataloguing.
+  // The week marker lives in the rail under the Roman numeral.
+  const kicker =
+    keyConcepts.length > 0 ? keyConcepts.slice(0, 2).join(' · ') : '';
+  const isLong = narrative.length > 220;
+
+  const kickerEl = kicker ? (
+    <div
+      className="cb-italic"
+      style={{
+        fontSize: 14.5,
+        color: 'var(--cb-text-muted)',
+        lineHeight: 1.4,
+        marginBottom: 4,
+      }}
+    >
+      {kicker}
+    </div>
+  ) : null;
+
+  if (editing && editable) {
+    return (
+      <div>
+        {kickerEl}
+        <div style={{ display: 'grid', gap: 12 }}>
+          <CodexInput
+            label="Chapter title"
+            size="lg"
+            value={draftTitle}
+            autoFocus
+            onChange={(e) => setDraftTitle(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') {
+                e.preventDefault();
+                saveEdit();
+              }
+              if (e.key === 'Escape') cancelEdit();
+            }}
           />
-        )}
-      </AnimatePresence>
+          <CodexTextarea
+            label="Narrative"
+            rows={5}
+            value={draftNarrative}
+            onChange={(e) => setDraftNarrative(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === 'Escape') cancelEdit();
+              if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) saveEdit();
+            }}
+          />
+          <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
+            <CodexButton
+              variant="primary"
+              size="sm"
+              onClick={saveEdit}
+              disabled={!draftTitle.trim()}
+            >
+              Save
+            </CodexButton>
+            <CodexButton variant="ghost" size="sm" onClick={cancelEdit}>
+              Cancel
+            </CodexButton>
+          </div>
+        </div>
+      </div>
+    );
+  }
 
-      {/* Science overlay */}
-      <AnimatePresence>
-        {showScienceOverlay && displayChapters.length > 0 && (
-          <ScienceOverlay chapters={displayChapters} />
+  return (
+    <div>
+      {kickerEl}
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'baseline',
+          gap: 10,
+          marginBottom: 8,
+        }}
+      >
+        <span
+          style={{
+            fontSize: 22,
+            fontWeight: 500,
+            fontVariationSettings: '"opsz" 18',
+            color: 'var(--cb-text-default)',
+            lineHeight: 1.25,
+            letterSpacing: '-0.005em',
+            minWidth: 0,
+          }}
+        >
+          {title}
+        </span>
+        {editable && (
+          <button
+            type="button"
+            onClick={beginEdit}
+            onFocus={() => setEditFocused(true)}
+            onBlur={() => setEditFocused(false)}
+            className="cb-focus"
+            aria-label={`Edit “${title}”`}
+            style={{
+              background: 'transparent',
+              border: 0,
+              padding: 0,
+              cursor: 'pointer',
+              color: 'var(--cb-accent-link)',
+              textDecoration: 'underline',
+              textDecorationThickness: '0.5px',
+              textUnderlineOffset: 3,
+              fontFamily: 'inherit',
+              fontSize: 13.5,
+              fontStyle: 'italic',
+              whiteSpace: 'nowrap',
+              flexShrink: 0,
+              opacity: rowHovered || editFocused ? 1 : 0,
+              transition: 'opacity 150ms ease',
+            }}
+          >
+            ✎ edit
+          </button>
         )}
-      </AnimatePresence>
+      </div>
+      {narrative && (
+        <div
+          style={{
+            fontSize: 17,
+            lineHeight: 1.55,
+            color: 'var(--cb-text-default)',
+            ...(expanded
+              ? {}
+              : {
+                  display: '-webkit-box',
+                  WebkitLineClamp: 3,
+                  WebkitBoxOrient: 'vertical',
+                  overflow: 'hidden',
+                }),
+          }}
+        >
+          {narrative}
+        </div>
+      )}
+      {narrative && isLong && (
+        <button
+          type="button"
+          onClick={onToggle}
+          className="cb-focus"
+          style={{
+            background: 'transparent',
+            border: 0,
+            padding: 0,
+            cursor: 'pointer',
+            color: 'var(--cb-accent-link)',
+            textDecoration: 'underline',
+            textDecorationThickness: '0.5px',
+            textUnderlineOffset: 3,
+            fontFamily: 'inherit',
+            fontSize: 13.5,
+            fontStyle: 'italic',
+            marginTop: 6,
+          }}
+        >
+          {expanded ? '↑ collapse' : '↓ read the full description'}
+        </button>
+      )}
+      <WidgetPlan widgets={widgets} />
+    </div>
+  );
+}
+
+// ─── WidgetPlan (planned interactives) ────────────────────────────────────
+//
+// Quiet, secondary metadata: the chapter's planned interactive widgets from
+// the syllabus. Hover a chip for the widget's description and rationale.
+function WidgetPlan({ widgets }: { widgets: WidgetSpec[] }) {
+  if (widgets.length === 0) return null;
+  return (
+    <div
+      style={{
+        marginTop: 10,
+        display: 'flex',
+        alignItems: 'baseline',
+        flexWrap: 'wrap',
+        gap: '6px 8px',
+      }}
+    >
+      <span
+        className="cb-sc"
+        style={{
+          fontSize: 12,
+          color: 'var(--cb-text-muted)',
+          letterSpacing: '0.14em',
+        }}
+      >
+        interactives
+      </span>
+      {widgets.map((w, i) => {
+        const detail = [w.description, w.rationale ? `Why: ${w.rationale}` : '']
+          .filter(Boolean)
+          .join(' — ');
+        return (
+          <span
+            key={`${w.title}-${i}`}
+            title={detail || undefined}
+            style={{
+              fontSize: 13,
+              lineHeight: 1.5,
+              color: 'var(--cb-text-muted)',
+              border: '0.5px solid var(--cb-border-default)',
+              borderRadius: 1.5,
+              padding: '1px 8px',
+              cursor: detail ? 'help' : 'default',
+              maxWidth: '100%',
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              whiteSpace: 'nowrap',
+            }}
+          >
+            {w.title}
+          </span>
+        );
+      })}
+    </div>
+  );
+}
 
-      {/* Curriculum map */}
-      <AnimatePresence>
-        {showCurriculumMap && syllabus && (
-          <CurriculumMapPanel />
+function DraftingSlot({
+  title,
+  narrative,
+}: {
+  title: string;
+  narrative: string;
+}) {
+  return (
+    <div>
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'baseline',
+          gap: 10,
+          marginBottom: 4,
+        }}
+      >
+        <span
+          className="cb-italic"
+          style={{
+            fontSize: 14.5,
+            color: 'var(--cb-accent-emphasis)',
+            lineHeight: 1.4,
+          }}
+        >
+          drafting
+        </span>
+        <PenStroke width={48} />
+      </div>
+      <div
+        style={{
+          fontSize: 22,
+          fontWeight: 500,
+          fontVariationSettings: '"opsz" 18',
+          color: 'var(--cb-text-default)',
+          lineHeight: 1.25,
+          letterSpacing: '-0.005em',
+          marginBottom: 6,
+        }}
+      >
+        {title || (
+          <span
+            className="cb-italic"
+            style={{ color: 'var(--cb-text-muted)', fontWeight: 400 }}
+          >
+            drafting title…
+          </span>
         )}
-      </AnimatePresence>
-
-      {/* Refinement */}
-      {syllabus && (
-        <div className="mt-8">
-          <InlineFeedback
-            onSubmit={handleRefine}
-            isLoading={isRefining}
-          />
+      </div>
+      {narrative && (
+        <div
+          style={{
+            fontSize: 17,
+            lineHeight: 1.55,
+            color: 'var(--cb-text-muted)',
+            display: '-webkit-box',
+            WebkitLineClamp: 2,
+            WebkitBoxOrient: 'vertical',
+            overflow: 'hidden',
+          }}
+        >
+          {narrative}
         </div>
       )}
-    </motion.div>
+    </div>
+  );
+}
+
+function QueuedSlot() {
+  return (
+    <div
+      className="cb-italic"
+      style={{
+        fontSize: 14.5,
+        color: 'var(--cb-text-subtle)',
+        lineHeight: 1.4,
+      }}
+    >
+      awaiting
+    </div>
+  );
+}
+
+// ─── SyllabusAside (pedagogical note) ───────────────────────────────────
+//
+// The course-wide concepts × chapters matrix lived here historically, but it
+// muddied the syllabus stage (it implied learning outcomes when it was really
+// concept overlap, and it would have gone stale on chapter revision). The
+// proper learning-outcomes table is now a generated output on the Export page.
+
+function SyllabusAside({ chapters }: { chapters: ChapterSyllabus[] }) {
+  return (
+    <aside style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
+      <PedagogicalNote chapters={chapters} />
+    </aside>
+  );
+}
+
+function PedagogicalNote({ chapters }: { chapters: ChapterSyllabus[] }) {
+  const noteText = useMemo(() => {
+    if (chapters.length < 2) {
+      return 'The first chapter sets the language the rest of the course reads in. Subsequent chapters spiral back to its terms.';
+    }
+    const richest = [...chapters].sort(
+      (a, b) =>
+        (b.spacingConnections?.length ?? 0) - (a.spacingConnections?.length ?? 0),
+    )[0];
+    if (richest?.spacingConnections && richest.spacingConnections.length > 2) {
+      const ref = richest.spacingConnections
+        .slice(0, 3)
+        .map((n) => ROMAN_UPPER[n - 1] ?? String(n))
+        .join(', ');
+      return `Chapter ${ROMAN_UPPER[richest.number - 1] ?? richest.number} pulls threads from earlier weeks (${ref}) — by design, the course spirals rather than marches.`;
+    }
+    return 'Concepts are introduced once, then revisited across chapters — spaced practice, not single passes.';
+  }, [chapters]);
+
+  return (
+    <div
+      style={{
+        padding: '14px 16px',
+        background: 'var(--cb-surface-sunken)',
+        border: '1px solid var(--cb-border-default)',
+        borderRadius: 2,
+      }}
+    >
+      <div
+        className="cb-sc"
+        style={{
+          fontSize: 12,
+          color: 'var(--cb-accent-emphasis)',
+          letterSpacing: '0.14em',
+        }}
+      >
+        † Pedagogical note
+      </div>
+      <p
+        className="cb-italic"
+        style={{
+          margin: '6px 0 0',
+          fontSize: 14.5,
+          lineHeight: 1.55,
+          color: 'var(--cb-text-default)',
+        }}
+      >
+        {noteText}
+      </p>
+    </div>
+  );
+}
+
+// ─── PenStroke (shared) ──────────────────────────────────────────────────
+
+function PenStroke({ width = 60 }: { width?: number }) {
+  return (
+    <span
+      aria-hidden
+      style={{
+        display: 'inline-block',
+        width,
+        height: 1,
+        background: 'var(--cb-border-default)',
+        position: 'relative',
+        overflow: 'hidden',
+        verticalAlign: 'middle',
+      }}
+    >
+      <span
+        style={{
+          position: 'absolute',
+          inset: 0,
+          background: 'var(--cb-accent-emphasis)',
+          animation: 'cb-pen 1.4s cubic-bezier(0.32,0.04,0.32,1) infinite',
+        }}
+      />
+    </span>
   );
 }
+
+// ─── helpers ─────────────────────────────────────────────────────────────
+
+function pluralise(noun: string, n: number) {
+  return n === 1 ? noun : `${noun}s`;
+}
diff --git a/src/prompts/activities.ts b/src/prompts/activities.ts
index 2457e88..a6f01bd 100644
--- a/src/prompts/activities.ts
+++ b/src/prompts/activities.ts
@@ -1,11 +1,26 @@
 function buildEnvironmentBlock(environment?: string, notes?: string): string {
-  if (!environment) return '';
   const labels: Record<string, string> = {
     'lecture-theatre': 'Lecture theatre (tiered/fixed seating — students cannot easily move or form groups)',
-    'collaborative': 'Collaborative room (group tables — students already seated in teams)',
-    'flat-classroom': 'Flat classroom (moveable desks/rows — can be rearranged for group work)',
+    'active-classroom': 'Active classroom (students can form groups easily — either moveable desks/rows that rearrange, or pre-arranged group tables; either way, group work, station rotation, and small-team activities are all feasible)',
     'online': 'Online/hybrid (breakout rooms, shared docs, chat — no physical space)',
+    // Legacy values from the four-tile picker map to the consolidated label.
+    'collaborative': 'Active classroom (students can form groups easily — pre-arranged group tables in the original setup)',
+    'flat-classroom': 'Active classroom (students can form groups easily — moveable desks that can be rearranged)',
   };
+  // When the instructor didn't pick an environment, default to the most
+  // conservative format — a tiered lecture theatre where students stay seated.
+  // This guarantees the model produces activities that can run anywhere, and
+  // never invents furniture rearrangement or movement that isn't possible.
+  if (!environment) {
+    return (
+      `\n**Teaching environment**: Not specified — default to classic LECTURE FORMAT.` +
+      `\n**Default mode**: Assume tiered/fixed seating, students cannot easily move or form groups. ` +
+      `Prefer turn-and-talks with the person next to them, hand-raise polls, think-pair-share without movement, ` +
+      `live online polling (Slido / Mentimeter / Padlet), and chalk-talk demonstrations. ` +
+      `Avoid anything that requires furniture rearrangement, students moving around the room, ` +
+      `or forming circles/stations.`
+    );
+  }
   let block = `\n**Teaching environment**: ${labels[environment] || environment}`;
   if (notes) block += `\n**Room details**: ${notes}`;
   return block;
diff --git a/src/prompts/audioTranscript.ts b/src/prompts/audioTranscript.ts
index 671e9b5..26b4d9f 100644
--- a/src/prompts/audioTranscript.ts
+++ b/src/prompts/audioTranscript.ts
@@ -21,7 +21,7 @@ export function buildAudioTranscriptPrompt(): string {
 - Expand symbols: "%" becomes "percent", "&" becomes "and", "+" becomes "plus".
 
 ### Add Natural Pacing Cues
-- Insert [short pause] at section transitions and between major ideas to give the listener a moment to absorb.
+- Pace the narration with sentence length, paragraph breaks, and punctuation (full stops, commas, em-dashes). Do NOT write bracketed or parenthetical stage directions such as "[short pause]", "(pause)", or "[beat]" — a text-to-speech engine reads them aloud word-for-word. Let the writing itself carry the rhythm.
 - Use CAPS for emphasis on KEY TERMS and important vocabulary when they are first introduced or especially significant.
 - Do not overuse emphasis — limit CAPS to the most important terms, roughly two to four per section.
 
diff --git a/src/prompts/chapter.ts b/src/prompts/chapter.ts
index 597a2d6..49c3dbb 100644
--- a/src/prompts/chapter.ts
+++ b/src/prompts/chapter.ts
@@ -1,309 +1,287 @@
-import { getTheme } from '../themes';
+export function buildChapterPrompt(_themeId?: string, hasImageGen?: boolean): string {
+  return `You are CanvasClassBuild, an expert educational content creator generating chapter content for university courses.
 
-export function buildChapterPrompt(themeId?: string, hasGeminiImages?: boolean): string {
-  const t = getTheme(themeId);
-  return `You are CanvasClassBuild, an expert educational content creator generating complete, standalone HTML chapter documents for university courses.
+## OUTPUT CONTRACT
 
-## CRITICAL: USE THIS EXACT HTML TEMPLATE
+You output **one** \`<article class="ch">…</article>\` element plus any \`<script>\` tags needed by the interactive widgets inside it. NOTHING ELSE.
 
-You MUST use the following HTML structure and CSS exactly. Do NOT invent your own layout, header style, or CSS. Fill in the content sections indicated by comments. Every chapter in the course must look identical in structure — only the text content changes.
+- Do **not** emit \`<!DOCTYPE html>\`, \`<html>\`, \`<head>\`, \`<body>\`, or \`<style>\` tags.
+- Do **not** wrap the response in markdown code fences.
+- Do **not** add any prose, comments, or whitespace before the opening \`<article>\` tag.
+- The theme styling (typography, colors, layout) is provided externally — your job is the **markup contract** and the **content**. Never invent your own class names, never write CSS.
 
-\`\`\`html
-<!DOCTYPE html>
-<html lang="en">
-<head>
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title><!-- Chapter title here --></title>
-<style>
-  @import url('https://fonts.googleapis.com/css2?family=${t.headingFont.replace(/\s/g, '+')}:wght@400;600;700&family=${t.bodyFont.replace(/\s/g, '+')}:ital,wght@0,400;0,600;1,400&display=swap');
-
-  *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
-
-  :root {
-    --page-bg: ${t.pageBg};
-    --card-bg: ${t.cardBg};
-    --elevated: ${t.elevated};
-    --accent: ${t.accent};
-    --accent-light: ${t.accentLight};
-    --warm: ${t.warmAccent};
-    --text-primary: ${t.textPrimary};
-    --text-secondary: ${t.textSecondary};
-    --text-muted: ${t.textMuted};
-    --success: ${t.success};
-    --heading-font: '${t.headingFont}', Georgia, serif;
-    --body-font: '${t.bodyFont}', system-ui, sans-serif;
-  }
+The very first characters of your response must be \`<article class="ch">\`.
 
-  body {
-    background: var(--page-bg);
-    color: var(--text-primary);
-    font-family: var(--body-font);
-    line-height: 1.8;
-    font-size: 1.05rem;
-  }
+## REQUIRED MARKUP CONTRACT
 
-  /* Reading progress bar */
-  #progress-bar {
-    position: fixed; top: 0; left: 0; height: 3px; z-index: 100;
-    background: linear-gradient(90deg, var(--accent), var(--accent-light));
-    width: 0%; transition: width 0.2s ease;
-  }
+Use these class names exactly. Themes style this contract; deviating breaks the design.
 
-  .container {
-    max-width: 800px; margin: 0 auto; padding: 3rem 1.5rem 4rem;
-  }
+\`\`\`html
+<article class="ch">
+
+  <header class="ch-head">
+    <div class="ch-eyebrow">Class N · Module M</div>
+    <h1 class="ch-title">Chapter title here</h1>
+    <p class="ch-subtitle">One-line subtitle.</p>
+    <div class="ch-meta">
+      <span>N min read</span>
+      <span class="ch-meta-dot"></span>
+      <span>N cited sources</span>
+    </div>
+  </header>
+
+  <section class="ch-hook">
+    <p><span class="ch-dropcap">F</span>irst-letter dropcap goes in a span; the rest of the paragraph follows.</p>
+    <p>Optional second hook paragraph.</p>
+  </section>
+
+  <section class="ch-section">
+    <h2>Section heading</h2>
+    <p>Prose with <span class="ch-key">key terms</span> wrapped inline.</p>
+    <h3>Sub-heading</h3>
+    <p>More prose.</p>
+    <aside class="ch-callout">
+      <div class="ch-callout-label">Think About It</div>
+      <p>Retrieval-practice question or aside.</p>
+    </aside>
+  </section>
+
+  <hr class="ch-divider">
+
+  <!-- Interactive widget (one per widget). Use the contract below; the
+       theme styles the wrapper, controls, meters, and button uniformly. -->
+  <div class="ch-widget">
+    <div class="ch-widget-head">
+      <div class="ch-widget-label">Interactive</div>
+      <div class="ch-widget-title">Widget title</div>
+    </div>
+    <p class="ch-widget-sub">One-line description of what the widget does.</p>
+
+    <div class="ch-widget-row">
+      <div class="ch-widget-field">
+        <span class="ch-widget-fieldlabel">Field label</span>
+        <select class="ch-widget-select"><option>…</option></select>
+      </div>
+      <!-- repeat .ch-widget-field as needed -->
+    </div>
 
-  /* Header */
-  .chapter-header {
-    text-align: center; margin-bottom: 3rem; padding-bottom: 2rem;
-    border-bottom: 1px solid ${t.accent}20;
-  }
-  .chapter-label {
-    display: inline-block; font-family: var(--heading-font);
-    font-size: 0.8rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase;
-    color: var(--accent); margin-bottom: 0.75rem;
-  }
-  .chapter-title {
-    font-family: var(--heading-font); font-size: 2.4rem; font-weight: 700;
-    color: var(--text-primary); line-height: 1.2; margin-bottom: 0.75rem;
-  }
-  .chapter-subtitle {
-    font-size: 1.05rem; color: var(--text-secondary); font-style: italic; max-width: 600px; margin: 0 auto;
-  }
+    <div class="ch-widget-meters">
+      <div class="ch-meter">
+        <span class="ch-meter-label">Attribute</span>
+        <span class="ch-meter-bar"><span style="width:70%"></span></span>
+        <span class="ch-meter-num">7</span>
+      </div>
+      <!-- repeat .ch-meter per attribute -->
+    </div>
 
-  /* Hook / opening scenario box */
-  .hook-box {
-    background: var(--card-bg); border-radius: 12px; padding: 1.75rem;
-    border-left: 3px solid var(--accent); margin-bottom: 2.5rem;
-    box-shadow: 0 4px 24px ${t.accent}0d;
-  }
+    <button class="ch-widget-btn">Action label</button>
+  </div>
 
-  /* Section headings */
-  h2 {
-    font-family: var(--heading-font); font-size: 1.6rem; font-weight: 700;
-    color: var(--text-primary); margin: 2.5rem 0 1rem;
-    padding-bottom: 0.5rem; border-bottom: 2px solid ${t.accent}30;
-  }
-  h3 {
-    font-family: var(--heading-font); font-size: 1.25rem; font-weight: 600;
-    color: var(--accent-light); margin: 2rem 0 0.75rem;
-  }
+${hasImageGen ? `  <figure class="ch-figure">
+    <div class="ch-figbox">
+      <!-- Use <figure class="ai-image" data-prompt="…"> instead, see IMAGES rules. -->
+      <span class="ch-figbox-tag">DIAGRAM</span>
+    </div>
+    <figcaption>
+      <span class="ch-fig-num">Fig. 1</span> Caption text.
+    </figcaption>
+  </figure>` : `  <!-- Figures are disabled for this chapter. The reading has zero visual apparatus — see NO FIGURES rules below. -->`}
+
+  <blockquote class="ch-quote">
+    <p>The quote.</p>
+    <cite>Attribution</cite>
+  </blockquote>
+
+  <section class="ch-takeaways">
+    <h2>Key Takeaways</h2>
+    <ul>
+      <li>Each takeaway as a single \`<li>\`.</li>
+      <li>The theme styles markers automatically (§, ☐, ✓, etc.) — do not add your own bullet symbols.</li>
+    </ul>
+  </section>
+
+  <section class="ch-lookahead">
+    <div class="ch-lookahead-label">Looking Ahead</div>
+    <p>One-paragraph teaser for the next chapter.</p>
+  </section>
+
+  <section class="ch-refs">
+    <h2>References</h2>
+    <p>One \`<p>\` per reference in APA 7 (hanging indent is applied by CSS — do not add line breaks).</p>
+  </section>
+
+  <footer class="ch-foot">
+    <span class="ch-foot-mark">¶</span>
+    <span class="ch-foot-meta">ClassBuild · Chapter N of M</span>
+  </footer>
+
+</article>
+\`\`\`
 
-  /* Prose */
-  p { margin-bottom: 1.25rem; color: var(--text-primary); }
+### Class inventory — every one of these must be present or the design breaks
 
-  /* Key terms */
-  .key-term {
-    background: ${t.warmAccent}1a; padding: 2px 6px; border-radius: 4px;
-    color: var(--warm); font-weight: 600;
-  }
+- \`.ch\`, \`.ch-head\`, \`.ch-eyebrow\`, \`.ch-title\`, \`.ch-subtitle\`, \`.ch-meta\`, \`.ch-meta-dot\`
+- \`.ch-hook\`, \`.ch-dropcap\`
+- \`.ch-section\`, \`.ch-key\`, \`.ch-callout\`, \`.ch-callout-label\`, \`.ch-divider\`
+- \`.ch-widget\`, \`.ch-widget-head\`, \`.ch-widget-label\`, \`.ch-widget-title\`, \`.ch-widget-sub\`,
+  \`.ch-widget-row\`, \`.ch-widget-field\`, \`.ch-widget-fieldlabel\`, \`.ch-widget-select\`,
+  \`.ch-widget-meters\`, \`.ch-meter\`, \`.ch-meter-label\`, \`.ch-meter-bar\`, \`.ch-meter-num\`, \`.ch-widget-btn\`
+${hasImageGen ? `- \`.ch-figure\`, \`.ch-figbox\`, \`.ch-figbox-tag\`, \`.ch-fig-num\`` : `- (Figures are disabled for this chapter — do NOT use \`.ch-figure\`, \`.ch-figbox\`, \`.ch-figbox-tag\`, \`.ch-fig-num\`, or any \`<figure>\` element.)`}
+- \`.ch-quote\` with \`<cite>\` inside
+- \`.ch-takeaways\` with \`<h2>\` and \`<ul><li>…\`
+- \`.ch-lookahead\`, \`.ch-lookahead-label\`
+- \`.ch-refs\` with \`<h2>\` and \`<p>\` entries
+- \`.ch-foot\`, \`.ch-foot-mark\`, \`.ch-foot-meta\`
 
-  /* Callout / retrieval practice box */
-  .callout {
-    background: var(--elevated); border-radius: 8px; padding: 1.25rem 1.5rem;
-    margin: 1.5rem 0; border-left: 3px solid var(--accent);
-  }
-  .callout-label {
-    font-size: 0.8rem; font-weight: 600; text-transform: uppercase;
-    letter-spacing: 0.1em; color: var(--accent); margin-bottom: 0.5rem;
-  }
-  .callout p { margin-bottom: 0; color: var(--text-secondary); }
+You may use \`<em>\` for mid-sentence italic. The \`.ch-title\` can contain \`<em>\` for a partial-italic title — themes style that specially.
 
-  /* Blockquotes */
-  blockquote {
-    border-left: 3px solid var(--accent); padding: 0.75rem 1.25rem;
-    margin: 1.5rem 0; background: var(--card-bg); border-radius: 0 8px 8px 0;
-  }
-  blockquote p { color: var(--text-secondary); margin-bottom: 0; }
+## IMAGES
+Do not embed SVG graphics. SVGs render inconsistently and bloat the document.
+${!hasImageGen ? `### NO FIGURES — hard rule for this chapter
 
-  /* Lists */
-  ul, ol { padding-left: 1.5rem; margin-bottom: 1.25rem; }
-  li { margin-bottom: 0.5rem; color: var(--text-primary); }
+Image generation is unavailable for this chapter. To prevent a broken reading experience, you MUST observe ALL of the following:
 
-  /* Widget container */
-  .widget-container {
-    background: var(--card-bg); border: 1px solid ${t.accent}20;
-    border-radius: 12px; padding: 1.5rem; margin: 2rem 0;
-    box-shadow: 0 4px 24px ${t.accent}0d;
-  }
+1. **No \`<figure>\` elements of any class.** Not \`<figure class="ch-figure">\`, not \`<figure class="ai-image">\`, not bare \`<figure>\`. The reading has zero figures.
+2. **No \`<figcaption>\` elements anywhere.** No "Fig. 1", no "Figure A", no italic captions sitting in the prose.
+3. **No \`.ch-figbox\`, \`.ch-figbox-tag\`, or \`.ch-fig-num\` markup.** No "DIAGRAM" / "CHART" / "PLATE" placeholder boxes pretending to be figures.
+4. **No prose references to figures, images, diagrams, illustrations, charts, plates, or photographs that aren't there.** Forbidden phrases include: *"as shown in the figure below"*, *"see Figure 2"*, *"the diagram on the right"*, *"the image illustrates"*, *"as pictured"*, *"the chart shows"*. Write as if the reading is a magazine essay with no visual apparatus — describe phenomena in prose only.
+5. **No image-shaped empty containers**, no captions hanging beneath nothing, no "image to come" placeholders. If you can't show it, don't allude to it.
 
-  /* Widget interactive controls — MUST style these for theme visibility */
-  .widget-container input[type="range"] {
-    -webkit-appearance: none; appearance: none; width: 100%; height: 6px;
-    border-radius: 3px; background: var(--elevated); outline: none; cursor: pointer;
-  }
-  .widget-container input[type="range"]::-webkit-slider-thumb {
-    -webkit-appearance: none; appearance: none; width: 18px; height: 18px;
-    border-radius: 50%; background: var(--accent); cursor: pointer;
-    border: 2px solid var(--accent-light); box-shadow: 0 2px 6px ${t.accent}40;
-  }
-  .widget-container input[type="range"]::-moz-range-thumb {
-    width: 18px; height: 18px; border-radius: 50%; background: var(--accent);
-    cursor: pointer; border: 2px solid var(--accent-light); box-shadow: 0 2px 6px ${t.accent}40;
-  }
-  .widget-container input[type="range"]::-moz-range-track {
-    height: 6px; border-radius: 3px; background: var(--elevated);
-  }
-  .widget-container button {
-    background: var(--accent); color: #fff; border: none; border-radius: 6px;
-    padding: 0.5rem 1rem; font-size: 0.85rem; font-weight: 600; cursor: pointer;
-    font-family: var(--body-font); transition: opacity 0.15s;
-  }
-  .widget-container button:hover { opacity: 0.85; }
-  .widget-container select,
-  .widget-container input[type="text"],
-  .widget-container input[type="number"] {
-    background: var(--elevated); color: var(--text-primary); border: 1px solid ${t.accent}30;
-    border-radius: 6px; padding: 0.4rem 0.75rem; font-size: 0.9rem;
-    font-family: var(--body-font); outline: none;
-  }
-  .widget-container select:focus,
-  .widget-container input[type="text"]:focus,
-  .widget-container input[type="number"]:focus { border-color: var(--accent); }
-  .widget-container label {
-    color: var(--text-secondary); font-size: 0.9rem; display: block; margin-bottom: 0.35rem;
-  }
+When a concept feels like it wants a picture, do one of:
+- Describe it concretely in prose (a vivid sentence beats a missing figure).
+- Build an interactive \`<div class="ch-widget">\` if the concept is dynamic.
+- Pull in a \`<blockquote class="ch-quote">\` if a quoted line lands the idea better.
+` : `When an image would genuinely aid understanding, include 2–3 image placeholders. Each placeholder is a single self-closing \`<figure>\` element with \`class="ai-image"\` plus \`data-prompt\` and \`data-aspect\` attributes — they replace the normal \`<figure class="ch-figure">\` block in the reading.
 
-  /* Scrollbar theming (for widget overflow areas) */
-  .widget-container ::-webkit-scrollbar { width: 8px; height: 8px; }
-  .widget-container ::-webkit-scrollbar-track { background: var(--elevated); border-radius: 4px; }
-  .widget-container ::-webkit-scrollbar-thumb { background: ${t.accent}50; border-radius: 4px; }
-  .widget-container ::-webkit-scrollbar-thumb:hover { background: var(--accent); }
-
-  /* Key takeaways box */
-  .takeaways {
-    background: var(--card-bg); border-radius: 12px; padding: 1.75rem;
-    margin: 2.5rem 0; border: 1px solid ${t.accent}30;
-    box-shadow: 0 4px 24px ${t.accent}0d;
-  }
-  .takeaways h2 { border-bottom: none; margin-top: 0; padding-bottom: 0; }
-  .takeaways ul { list-style: none; padding-left: 0; }
-  .takeaways li { padding-left: 1.5rem; position: relative; margin-bottom: 0.75rem; }
-  .takeaways li::before {
-    content: '✓'; position: absolute; left: 0; color: var(--success); font-weight: 700;
-  }
+\`\`\`html
+<figure class="ai-image" data-prompt="…full prompt…" data-aspect="landscape">
+  <figcaption>One-line caption (italic, optional).</figcaption>
+</figure>
+\`\`\`
 
-  /* Looking ahead teaser */
-  .looking-ahead {
-    background: linear-gradient(135deg, ${t.accent}10, ${t.accentLight}10);
-    border-radius: 12px; padding: 1.5rem; margin: 2rem 0;
-    border: 1px solid ${t.accent}20;
-  }
+### Writing the \`data-prompt\`
 
-  /* References section */
-  .references {
-    border-top: 2px solid ${t.accent}30; margin-top: 3rem; padding-top: 1.5rem;
-  }
-  .references h2 { font-size: 1.2rem; margin-top: 0; border-bottom: none; }
-  .references p {
-    font-size: 0.9rem; color: var(--text-secondary); line-height: 1.6;
-    padding-left: 2em; text-indent: -2em; margin-bottom: 0.5rem;
-  }
-  .references a { color: var(--accent-light); text-decoration: none; }
-  .references a:hover { text-decoration: underline; }
+You are prompting **gpt-image-2** — a model that handles long, specific instructions, renders typography legibly, and respects compositional direction. Lean into that. A great \`data-prompt\` is 3–5 sentences and answers:
 
-  /* Section divider */
-  .section-divider {
-    height: 1px; border: none; margin: 2.5rem auto;
-    background: linear-gradient(90deg, transparent, ${t.accent}40, transparent);
-  }
+1. **Subject and idiom.** What is being depicted, and in what visual register? Pick one and commit: \`editorial photograph\`, \`documentary photograph\`, \`pencil-and-watercolour diagram\`, \`pen-and-ink technical drawing\`, \`isometric infographic\`, \`hand-drawn field-guide plate\`, \`vintage scientific illustration\`, \`risograph print\`. Avoid \`3D render\`, \`AI-generated\`, clip-art idioms.
+2. **Composition.** Where is the camera / viewer? What's in the foreground, middle ground, background? Use real compositional language: \`shallow depth of field\`, \`rule of thirds\`, \`top-down diagram\`, \`exploded view\`, \`cross-section\`.
+3. **Lighting / palette.** Single key light? Overcast? Match the chapter's tone — earthy and warm, cool and clinical, low-light and intimate. Specify 3–4 colours if it's a diagram.
+4. **Text on the image** (when useful). gpt-image-2 renders text well. Quote the exact labels you want, in quotes, with placement: \`label "var. sinensis" beside the left leaf in small italic serif; label "var. assamica" beside the right leaf\`. Keep labels short (≤4 words) and few (≤6 per image).
+5. **Avoid.** Add a short negative list when it matters: \`no watermarks; no cropped letters; no people unless specified\`.
 
-  /* Responsive */
-  @media (max-width: 640px) {
-    .container { padding: 2rem 1rem; }
-    .chapter-title { font-size: 1.8rem; }
-    h2 { font-size: 1.35rem; }
-  }
-</style>
-</head>
-<body>
-  <div id="progress-bar"></div>
-  <div class="container">
-    <header class="chapter-header">
-      <div class="chapter-label">Class [NUMBER]</div>
-      <h1 class="chapter-title">[CHAPTER TITLE]</h1>
-      <p class="chapter-subtitle">[One-line subtitle describing the chapter's focus]</p>
-    </header>
-
-    <div class="hook-box">
-      [Opening hook / real-world scenario — 1-2 paragraphs]
-    </div>
+The \`data-aspect\` attribute picks the canvas. Choose the one that fits the subject — gpt-image-2 supports any ratio up to 3:1, so use this lever deliberately:
 
-    <!-- Main content sections using h2, h3, p, .callout, .key-term, .widget-container, etc. -->
+- \`square\` (1024×1024) — single objects, portraits of one thing, tight diagrams
+- \`portrait\` (1024×1536) — vertical compositions, full-length figures, side-by-side comparisons stacked
+- \`landscape\` (1536×1024) — the default for scenes, processes laid out left-to-right, comparison plates
+- \`wide-landscape\` (2048×1152) — sweeping panoramas, complete-system diagrams, banner-format infographics
 
-    <div class="takeaways">
-      <h2>Key Takeaways</h2>
-      <ul>
-        <li>[Takeaway 1]</li>
-        <!-- more items -->
-      </ul>
-    </div>
+If you want a Fig. caption, include it as the only child of the \`<figure>\`. Keep captions to one line — they sit beside the figure number, not above the figure.
 
-    <div class="looking-ahead">
-      <h3>Looking Ahead</h3>
-      <p>[Teaser for next chapter]</p>
-    </div>
+### FACTUAL FIDELITY — non-negotiable
 
-    <div class="references">
-      <h2>References</h2>
-      <!-- APA 7 formatted references as <p> tags -->
-    </div>
-  </div>
+gpt-image-2 will confidently render whatever you ask for, including invented statistics, fabricated study results, plausible-but-wrong dates, and miscoded diagrams. These images appear in a *university course* — a hallucinated visual claim is worse than no image at all. Treat every \`data-prompt\` as a factual statement the image will make on your behalf.
 
-  <script>
-    window.addEventListener('scroll', () => {
-      const h = document.documentElement;
-      const pct = (h.scrollTop / (h.scrollHeight - h.clientHeight)) * 100;
-      document.getElementById('progress-bar').style.width = pct + '%';
-    });
-  </script>
-  <!-- Widget scripts go here, each wrapped in an IIFE with try-catch -->
-</body>
-</html>
-\`\`\`
+The distinction is *fabricated* vs *prompt-provided*. A legitimate number from the chapter ("37°C body temperature", "Ebbinghaus, 1885", "n = 240 participants") is welcome inside the image — quote it in the prompt and gpt-image-2 will render it faithfully. What you must never do is ask the model to invent or fill in values it has no source for.
 
-## RULES FOR USING THE TEMPLATE
-- Copy this HTML structure EXACTLY. Do not change class names, element hierarchy, or CSS.
-- Fill in the [BRACKETED] content placeholders with your educational content.
-- You may add more \`<section>\` blocks, \`<h2>\`/\`<h3>\` headings, \`<p>\` paragraphs, \`.callout\` boxes, and \`.widget-container\` divs in the main content area.
-- Use \`<span class="key-term">\` for important terminology.
-- Use \`<hr class="section-divider">\` between major sections.
-- Use \`.callout\` boxes for "Before reading on, consider..." retrieval practice moments. Include a \`<div class="callout-label">Think About It</div>\` inside.
-- Do NOT add new CSS rules or override existing styles. The design system above is complete.
+**Rules every \`data-prompt\` must respect:**
 
-## IMAGES
-Do NOT embed SVG graphics, illustrations, or diagrams in the HTML. SVGs render inconsistently and bloat the document.
-${hasGeminiImages ? `Instead, you may include up to 3 image placeholders where a visual would genuinely aid understanding (e.g. a diagram, chart, or infographic). Use this exact format:
+1. **Render only what you provide.** If you want a number, date, percentage, sample size, year, study title, author name, or citation to appear inside the image, state it verbatim in the prompt — e.g. *"a label '37°C' beside the thermometer"*, *"a date 'c. 1885' inscribed at lower right"*, *"caption 'Ebbinghaus (1885)' set in italic serif beneath the figure"*. That figure must trace back to the chapter content. Never ask gpt-image-2 to fill in values without source — no *"axis ticks every 10%"* without specifying the values, no *"sample size in the lower corner"* with no number given.
+2. **No fabricated charts, graphs, tables, dashboards, or scoreboards.** If a quantitative visual would require values you cannot source from the chapter, evoke the *shape* of the trend abstractly: *"a hand-drawn editorial chart suggesting an inverted U-curve, axes unlabeled, no numerical ticks, sketched as if in a researcher's notebook margin"*. Shape without data is fine; data without source is not.
+3. **No invented citations or attributions.** Any author name, journal title, year tag, or quoted source appearing inside the image must come verbatim from the chapter prose around the figure. Never invent a plausible-sounding source.
+4. **Named real subjects (people, places, instruments, organisms, historical scenes)** must be depicted in an *editorial illustrative* register — woodcut, watercolour, ink-and-wash, risograph, scientific-plate engraving. The interpretive register signals *evocation, not documentary record*. Photorealistic depictions of named subjects are forbidden; they read as photographic evidence the model cannot back up.
+5. **Universal/textbook subjects** (a generic neuron, the human eye, the periodic table layout, a printing press) may be rendered with care toward textbook accuracy. Any embedded label must be an accurate, well-established term — never invent anatomical, taxonomic, or technical labels.
+6. **In-image text** is restricted to: (a) generic descriptors that make no factual claim (*"stimulus"*, *"response"*, *"east"*, *"the page"*), or (b) phrases, numbers, names, and citations you have quoted verbatim in this prompt, sourced from the chapter. Never burn in figures or words gpt-image-2 has to invent.
+7. **No course-position metadata inside the image.** Never render "Chapter N", "Class N", "Module N", "Week N", "Lesson N", "Lecture N", "Unit N", or any equivalent course-structure label as image text. The image is about its subject (a neuron, a printing press, a memory trace) — it is never about *where the topic sits in the course*. That structural framing belongs in the surrounding HTML chrome (the \`.ch-eyebrow\`), not on the image.
+When in doubt, default to *conceptual editorial illustration* with a strong stylistic frame and minimal embedded text. A vivid metaphor for an idea is always better than a fabricated graph of an idea — but a labeled illustration is welcome when every label and number traces back to the chapter.
 
-<figure class="gemini-image" data-prompt="A detailed educational infographic showing [specific description of what to visualize, layout, labels, and colors]">
-  <figcaption>[Short caption for the image]</figcaption>
-</figure>
+(You don't need to repeat a "render only what's in this prompt" disclaimer at the end of each \`data-prompt\` — a single safety clause is appended automatically before the request reaches gpt-image-2.)
+
+### What NOT to do
+
+- Don't ask for "an illustration" without specifying the idiom — the model will default to something generic.
+- Don't list more than 6 labels.
+- Don't reference real living celebrities, brand logos, or copyrighted characters.
+- Don't request photo-realistic depictions of named living scientists / historical figures unless they're long dead and clearly public-domain.
+- Don't request charts, graphs, dashboards, or scoreboards. If you want to convey data, describe a trend abstractly per the Factual Fidelity rules.
 
-The data-prompt attribute must be a detailed image generation prompt: describe the layout, labels, colors, and content precisely. These placeholders will be replaced with AI-generated images automatically. Include them wherever a visual genuinely aids understanding — most chapters benefit from at least 2 well-placed images.` : 'If you want to illustrate a concept, describe it in text or use an interactive widget instead.'}
+Most chapters benefit from 2 well-placed images: one early (in the hook or first section) and one mid-chapter. Avoid clustering three images in a row.`}
 
 ## CONTENT GUIDELINES
-- Write in an engaging, clear academic voice — knowledgeable but accessible
-- Open with a compelling hook or real-world scenario in the \`.hook-box\`
-- Use concrete examples liberally to ground abstract concepts
-- Include smooth transitions between sections using bridging paragraphs
-- Reference research sources naturally in the text using (Author, Year) in-text citations
-- Build in retrieval practice moments using \`.callout\` boxes
-- Aim for the specified chapter length (concise ~2000 words, standard ~3500 words, comprehensive ~5000 words)
+- Engaging, clear academic voice — knowledgeable but accessible.
+- Open with a concrete hook or scenario in \`.ch-hook\` (the dropcap span goes around the first letter only).
+- Use concrete examples to ground abstract concepts.
+- Smooth transitions between sections; bridging paragraphs over abrupt heading jumps.
+- In-text citations as (Author, Year). The reference list goes in \`.ch-refs\`.
+- Build retrieval-practice moments using \`<aside class="ch-callout">\` with a \`Think About It\` label.
 
 ## INTERACTIVE WIDGETS
-Each widget must be a self-contained \`<div class="widget-container">\` with a unique ID, and a corresponding \`<script>\` block at the end of \`<body>\`:
+
+Each widget is a self-contained \`<div class="ch-widget">…</div>\` matching the contract above, plus a corresponding \`<script>\` block after the \`</article>\`.
 
 Widget requirements:
-- Use vanilla JavaScript only (no frameworks, no external libraries)
-- Scope all DOM access to the widget's container element
-- Make widgets genuinely interactive: sliders, buttons, click-to-reveal, drag, input fields
-- Wrap ALL widget logic in an IIFE with try-catch and a styled fallback
-- Widgets should illustrate concepts from the chapter, not just be decorative
-- STYLING: The CSS above already styles range inputs, buttons, selects, text inputs, number inputs, labels, and scrollbars inside \`.widget-container\` to match the theme. Use these standard HTML elements directly — do NOT add inline styles that override the theme colors. If you need extra styling for widget-specific elements like canvas, SVG-free charts, or stat boxes, use CSS variables (var(--accent), var(--elevated), var(--text-primary), etc.) so everything stays cohesive. Never hardcode colors.
-
-## OUTPUT FORMAT
-Output ONLY the raw HTML. Do NOT wrap in markdown code fences. Do NOT include any text before or after the HTML. The first characters of your response must be <!DOCTYPE html>.`;
+- Vanilla JavaScript only — no frameworks, no external libraries.
+- Each script scopes its DOM queries to that widget's container (assign a unique \`id\` on the \`.ch-widget\` element and select within it).
+- Wrap widget logic in an IIFE with try/catch.
+- Widgets illustrate chapter concepts; they're not decoration.
+- Style with the contract classes ONLY. Themes handle \`<select>\`, \`<button>\`, meter bars, etc. Do not add inline styles that override theme colors. The only allowed inline styles are the meter-bar fill widths (\`<span style="width:NN%"></span>\`) which set the fill percentage.
+
+\`<script>\` blocks may appear after the closing \`</article>\` but inside your response. Example envelope:
+
+\`\`\`
+<article class="ch">…</article>
+<script>(function(){ /* widget logic */ })();</script>
+\`\`\`
+
+## OUTPUT FORMAT — STRICT
+- Output starts with \`<article class="ch">\`.
+- Output ends with the closing \`</script>\` (or \`</article>\` if no widgets).
+- No markdown fences. No preamble. No closing remarks.`;
+}
+
+// Reader profiles by education level. Each gives the model a concrete register
+// to write at — voice, jargon tolerance, depth, the kind of book/magazine the
+// reading should feel like. Without this guidance Claude defaults to a graduate
+// seminar tone, which is wrong for nearly every audience except postgraduates.
+const AUDIENCE_REGISTERS: Record<string, string> = {
+  'high-school':
+    "Write for high-school students (ages ~15–18). Friendly, conversational, never condescending. Define every technical term inline on first use, then use it freely. Lean on analogies and concrete scenarios. Aim for the register of a great pop-science book — vivid, curious, accessible. Sentences mostly short to medium. Avoid Latin species names, statistical machinery, and citation-dense paragraphs.",
+  'first-year':
+    "Write for first-year university students new to the field. Some technical vocabulary is expected, but always define it on first appearance. Build conceptual scaffolding paragraph by paragraph: idea → example → implication. Citations are welcome but don't let them clutter the prose. Aim for the register of an introductory textbook that's also a pleasure to read.",
+  'advanced-undergrad':
+    "Write for advanced undergraduates with prior coursework in the field. Standard technical terms can appear without lengthy definition. Engage with primary literature; quote findings; name methodological tradeoffs. Aim for the register of a confident chapter in a respected textbook used by upper-level seminars.",
+  'postgraduate':
+    "Write for graduate students or working professionals in the field. Technical depth expected. Engage with debates, edge cases, and the limits of current evidence. Cite recent primary sources. Density can be high if the payoff is high.",
+  'professional':
+    "Write for working professionals applying this material in practice. Front-load actionable takeaways. Less theory exposition, more decision-making frames, tradeoffs, and case examples. The reader has experience; respect it.",
+  'general-public':
+    "Write for a curious adult general reader with no specialist background. Avoid jargon — when a technical term is unavoidable, define it inline in plain language. Prefer concrete examples and metaphors over abstractions. Latin species names, biochemical pathway names, and statistical notation should be replaced with plain-English descriptions or skipped entirely (e.g. say 'lactic-acid bacteria' not 'Lactobacillus, Lactococcus, Leuconostoc, and Pediococcus'). Aim for the register of a New Yorker science feature or a great Quanta Magazine piece — sophisticated subject matter, but the prose itself is welcoming and unintimidating.",
+};
+
+const PRIOR_KNOWLEDGE_MODIFIERS: Record<string, string> = {
+  none:
+    'Assume no background in the topic. Introduce every concept from first principles; do not assume terms from adjacent fields.',
+  some:
+    "Assume the reader has encountered basic terms in passing but isn't fluent. Refresh foundational ideas briefly before building on them.",
+  significant:
+    "Assume strong background. Skip basics, build on shared vocabulary, push to depth and recent debates.",
+};
+
+function buildAudienceBlock(audience: {
+  educationLevel: string;
+  priorKnowledge: string;
+  learnerNotes?: string;
+}): string {
+  const register = AUDIENCE_REGISTERS[audience.educationLevel];
+  const modifier = PRIOR_KNOWLEDGE_MODIFIERS[audience.priorKnowledge];
+  const parts: string[] = [];
+  parts.push(`**Audience** (${audience.educationLevel.replace(/-/g, ' ')}):`);
+  if (register) parts.push(register);
+  if (modifier) parts.push(`**Prior knowledge** (${audience.priorKnowledge}): ${modifier}`);
+  if (audience.learnerNotes?.trim()) {
+    parts.push(`**More about these learners** (verbatim from the teacher): ${audience.learnerNotes.trim()}`);
+  }
+  return parts.join('\n');
 }
 
 export function buildChapterUserPrompt(
@@ -316,17 +294,28 @@ export function buildChapterUserPrompt(
     widgets: Array<{ title: string; description: string; concept: string }>;
   },
   chapterLength: string,
+  audience: {
+    educationLevel: string;
+    priorKnowledge: string;
+    learnerNotes?: string;
+  },
   researchSources?: Array<{ title: string; authors: string; year: string; summary: string; url?: string; doi?: string }>,
-  hasGeminiImages?: boolean,
+  hasImageGen?: boolean,
+  chapterLengthBrief?: string,
 ): string {
-  const wordTarget = chapterLength === 'concise' ? '~2000' : chapterLength === 'comprehensive' ? '~5000' : '~3500';
+  const trimmedBrief = chapterLengthBrief?.trim();
+  const lengthDirective = trimmedBrief
+    ? `**Reading length** (verbatim from the teacher's brief): ${trimmedBrief}`
+    : `**Target length**: ${chapterLength === 'concise' ? '~2000' : chapterLength === 'comprehensive' ? '~5000' : '~3500'} words`;
 
   return `Generate the Class ${chapter.number} reading for the course "${courseTitle}".
 
 **Chapter title**: ${chapter.title}
 **Chapter description**: ${chapter.narrative}
 **Key concepts**: ${chapter.keyConcepts.join(', ')}
-**Target length**: ${wordTarget} words
+${lengthDirective}
+
+${buildAudienceBlock(audience)}
 
 **Interactive widgets to create (${chapter.widgets.length})**:
 ${chapter.widgets.map((w, i) => `${i + 1}. "${w.title}": ${w.description} (illustrates: ${w.concept})`).join('\n')}
@@ -334,6 +323,8 @@ ${chapter.widgets.map((w, i) => `${i + 1}. "${w.title}": ${w.description} (illus
 ${researchSources && researchSources.length > 0
     ? `**Research sources to cite in-text and include in the APA 7 reference list**:\n${researchSources.map(s => `- ${s.authors} (${s.year}). ${s.title}.${s.doi ? ` DOI: ${s.doi}` : ''}${s.url ? ` URL: ${s.url}` : ''}\n  Summary: ${s.summary}`).join('\n')}`
     : ''}
-${hasGeminiImages ? '\n**Image generation is available** — include 2-3 `<figure class="gemini-image">` placeholders where a visual would genuinely help explain a concept. Remember: no SVGs.' : ''}
-Generate the complete HTML chapter now. Remember: output ONLY raw HTML starting with <!DOCTYPE html>. No markdown code fences.`;
+${hasImageGen ? '\n**Image generation is available** — include 2-3 `<figure class="ai-image">` placeholders where a visual would genuinely help. Remember: no SVGs.' : ''}
+Generate the chapter now. Remember: output starts with \`<article class="ch">\` and contains nothing outside the contract.
+
+Match the audience register above. If the reader is "general public", a paragraph that reads like a graduate seminar is a failure of the assignment.`;
 }
diff --git a/src/prompts/infographic.ts b/src/prompts/infographic.ts
index e723443..908e0fd 100644
--- a/src/prompts/infographic.ts
+++ b/src/prompts/infographic.ts
@@ -1,23 +1,76 @@
-import { getTheme } from '../themes';
+import { getChapterTheme } from '../themes';
 
+/**
+ * The meta-prompt — Claude reads it and writes a single gpt-image-2 prompt
+ * describing one editorial-grade infographic for the chapter. The output
+ * prompt is fed straight to gpt-image-2 at 4K (3840×2160) landscape.
+ */
 export function buildInfographicMetaPrompt(themeId?: string): string {
-  const t = getTheme(themeId);
-  return `You are CanvasClassBuild, an expert at writing image generation prompts for educational infographics.
-
-Given a class title, key concepts, and a snippet of the reading content, write a single, detailed prompt for an AI image generator (Gemini) to create a beautiful educational infographic.
-
-## Prompt Requirements
-- Describe a clear INFOGRAPHIC or DIAGRAM layout (NOT an illustration or photo)
-- Specify exact text labels to include (short, readable)
-- Describe the visual hierarchy: headers, sections, arrows, icons
-- Specify the color palette: primary accent ${t.accent}, secondary ${t.accentLight}, warm accent ${t.warmAccent}, background ${t.isDark ? 'dark (#1a1a2e)' : 'light (#faf8f5)'}
-- Request 16:9 landscape aspect ratio
-- Focus on ONE core concept or relationship from the chapter
-- Include specific data points, steps, or comparisons from the content
-- Keep text on the infographic short (labels, not paragraphs)
-
-## Output
-Respond with ONLY the image generation prompt. No commentary, no markdown, no code fences. Just the prompt text.`;
+  const theme = getChapterTheme(themeId);
+  const [bg, text, accent, muted, surface] = theme.palette;
+
+  return `You are CanvasClassBuild's image-direction lead. You write **one** gpt-image-2 prompt that will be rendered at 3840×2160 (4K landscape) and become the chapter's signature infographic.
+
+## What "good" looks like
+
+Imagine the centrefold of *The New Yorker*, a Pentagram annual report, a Massimo Vignelli transit diagram, a Nature graphical abstract, an *Information is Beautiful* spread. Editorial, considered, typographically literate. Not a stock-photo composite, not a clip-art diagram, not a marketing slide.
+
+gpt-image-2 is exceptional at:
+- **Long, specific prompts** (use them — 200–350 words is the sweet spot).
+- **Rendering text legibly** — quote exact label copy in quotes; specify weight, case, placement.
+- **Editorial composition** — call out grid, foreground/background, hierarchy.
+
+It struggles with:
+- More than ~6 distinct text labels per image.
+- Precise geometric placement of named objects ("put X exactly here, Y exactly there").
+- Tiny body copy (≤10pt at 4K) — keep type generous.
+
+So you'll get the best result by picking ONE central diagram or visual metaphor, anchoring it with 3–6 short labels, and letting typography and composition do the heavy lifting.
+
+## Theme palette to honour
+
+This chapter ships in the **${theme.name}** theme. Match the visual idiom so the infographic feels like part of the same publication:
+
+- **${theme.name}** — ${theme.pitch}
+- Pairing: ${theme.pairing}
+- Mode: ${theme.mode}
+- Palette (5 roles, use these hex values verbatim in the prompt):
+  - background: \`${bg}\`
+  - text / ink: \`${text}\`
+  - primary accent: \`${accent}\`
+  - secondary tone: \`${muted}\`
+  - surface / paper: \`${surface}\`
+
+The infographic should look like it was designed *for* this theme — same paper, same type voice, same accent colour, same restraint.
+
+## Structure of the prompt you write
+
+Your output is one cohesive English-prose prompt (no bullet lists, no JSON, no headings). It must cover, in order:
+
+1. **Idiom** — Open with the visual register. Pick one and commit:
+   *"A high-resolution editorial infographic in the style of …"* — possible registers include hand-drawn naturalist illustration, isometric architectural diagram, pen-and-watercolour scientific plate, mid-century broadsheet print, vintage almanac woodcut, modernist Swiss-style information graphic, sepia field-guide spread.
+
+2. **The one idea** — A single sentence stating the concept the infographic must communicate. (Spacing > coverage; one idea well-rendered beats four crammed in.)
+
+3. **Composition** — Where is the focal point? What's the grid? Talk about it like a designer: "a single large central figure at the rule-of-thirds intersection", "three horizontal bands stacked top to bottom", "an exploded cross-section anchoring the lower two-thirds, with the timeline arcing across the top".
+
+4. **Palette direction** — Restate the five hex values from above in prose: *"the page is parchment cream (#${bg.replace('#', '')}), inked in deep umber (#${text.replace('#', '')}), with a single emphasis colour — ${theme.name === 'Press' ? 'brick red' : theme.name === 'Notebook' ? 'tomato red' : theme.name === 'Almanac' ? 'foxed orange' : theme.name === 'Storybook' ? 'cherry red' : theme.name === 'Studio' ? 'warm taupe' : 'mint phosphor'} (#${accent.replace('#', '')}) — and a quieter secondary tone (#${muted.replace('#', '')}) used for shadows and supporting marks. Highlights and paper texture pull from (#${surface.replace('#', '')})."* — keep this *exact* phrasing pattern; gpt-image-2 follows hex codes when they're stated as a named-colour pairing.
+
+5. **Typography** — Specify the type voice: *"All labels in a refined ${theme.bodyFont.split(',')[0].replace(/'/g, '')}-style serif, set tightly with small-caps for axis labels, full-caps for the title. Use 4–6 labels, no more."* Match the theme: serif voices for Press / Almanac, monospace for Notebook / Terminal, bold display serif for Storybook, italic Instrument Serif for Studio.
+
+6. **Label copy** — Quote the actual label text the model should render, *in quotation marks*. Use short labels (≤4 words each). Include a single short title (≤8 words) and 3–5 supporting labels. Example: *Title reads "WHEN THE PAPER FOLDS"; labels read "compression", "tension", "shear", "the fold line".*
+
+7. **What to avoid** — One short clause: *"No watermarks, no logos, no cropped letters, no UI chrome, no people unless explicitly listed above."*
+
+## Hard rules
+
+- Output ONLY the prompt text. No preamble, no markdown, no fences, no commentary.
+- Single paragraph. Long-form prose is fine — 200–350 words.
+- Reference the chapter content concretely (a specific example, dataset, or distinction from the reading). Generic prompts produce generic images.
+- Never request photographs of living public figures, brand logos, or copyrighted characters.
+- Don't ask for a stock-style "infographic with charts and icons". Pick a *specific visual idea*: a process diagram, a cross-section, a metaphor made literal, a comparison plate, a single annotated specimen.
+
+You are designing an artefact a teacher will actually be proud to put on screen. Make it editorial. Make it specific. Make it beautiful.`;
 }
 
 export function buildInfographicMetaUserPrompt(
@@ -25,13 +78,13 @@ export function buildInfographicMetaUserPrompt(
   keyConcepts: string[],
   contentSnippet: string,
 ): string {
-  return `Write an infographic generation prompt for:
+  return `Write the gpt-image-2 prompt for the signature infographic of:
 
-**Class**: "${chapterTitle}"
+**Chapter**: "${chapterTitle}"
 **Key concepts**: ${keyConcepts.join(', ')}
 
-**Content excerpt**:
-${contentSnippet.slice(0, 3000)}
+**Reading excerpt (use this to find the specific idea worth visualising)**:
+${contentSnippet.slice(0, 3500)}
 
-Write a detailed, specific prompt that will produce an educational infographic visualizing the most important concept or relationship from this class.`;
+Pick one strong visual idea from the reading and write the prompt now. One paragraph, 200–350 words. Output only the prompt — nothing else.`;
 }
diff --git a/src/prompts/research.ts b/src/prompts/research.ts
index 8378899..f3b9ced 100644
--- a/src/prompts/research.ts
+++ b/src/prompts/research.ts
@@ -7,15 +7,24 @@ PROCESS:
 2. Search for seminal papers, textbooks, and authoritative reviews
 3. Synthesize findings into a structured dossier
 
+VERIFICATION — IMPORTANT:
+Every source you emit will be automatically verified against Semantic Scholar, Crossref, and Unpaywall after you finish. Unverified sources are flagged in the UI; hallucinated DOIs are stripped; open-access URLs are added where they exist.
+
+Therefore:
+- Only include papers/books you are CONFIDENT exist. If you didn't see it in a search result, don't cite it.
+- Never invent or guess a DOI. If you don't have the exact DOI from a search result, omit the field — the verifier will look it up by title.
+- Provide the most accurate title you can — title is what the verifier matches against.
+- Prefer peer-reviewed journal articles, seminal textbooks, and authoritative reviews.
+
 After completing your research, output your dossier as JSON:
 {
   "sources": [
     {
-      "title": "Full paper/book title",
+      "title": "Full paper/book title — be precise; this is what the verifier matches against",
       "authors": "Author names",
       "year": "Publication year",
-      "url": "URL if found",
-      "doi": "DOI if available",
+      "url": "URL if found (the verifier may replace this with an open-access link)",
+      "doi": "DOI if you saw it in a search result — omit if unsure",
       "summary": "Brief summary of key findings relevant to the chapter",
       "relevance": "How this source supports the chapter content",
       "isVerified": true
@@ -24,7 +33,7 @@ After completing your research, output your dossier as JSON:
   "synthesisNotes": "How these sources collectively inform the chapter content and key pedagogical takeaways"
 }
 
-Find 5-8 high-quality sources per chapter. Prefer peer-reviewed journal articles, seminal textbooks, and authoritative reviews. Output ONLY the JSON dossier.`;
+Find 5-8 high-quality sources per chapter. Output ONLY the JSON dossier.`;
 
 export function buildResearchUserPrompt(chapterTitle: string, chapterNarrative: string, keyConcepts: string[]) {
   return `Research the following chapter topic and build a dossier of real academic sources.
diff --git a/src/prompts/slides.ts b/src/prompts/slides.ts
index 31c0eb1..6151c9a 100644
--- a/src/prompts/slides.ts
+++ b/src/prompts/slides.ts
@@ -1,83 +1,119 @@
+import { getChapterTheme } from '../themes';
+
 /**
- * Prompt builders for generating slide outlines via Claude.
+ * Slides are now rendered as full-bleed 4K images by gpt-image-2 — one image
+ * per slide, with the slide's title, key phrase, and visuals all composed
+ * together as a single editorial frame. Claude's job is to write the per-slide
+ * gpt-image-2 prompt plus speaker notes; pptxExporter packs the rendered
+ * images into a .pptx.
  *
- * The LLM produces a JSON array of SlideData objects which are then
- * passed to pptxExporter.generatePptx() to create downloadable .pptx files.
+ * No more bullet/title/layout types. The image IS the slide.
  */
 
-export function buildSlidesPrompt(): string {
-  return `You are CanvasClassBuild, an expert presentation designer creating visually varied, pedagogically engaging lecture slides for university courses. You understand that death-by-bullet-point is the enemy of learning.
-
-## Slide Layouts
-
-You have 6 layout types. A great deck uses ALL of them strategically:
-
-### "title" — Chapter opening slide
-- Used ONCE as the very first slide
-- \`title\`: The chapter name
-- \`bullets\`: [] (empty)
-- \`bodyText\`: A one-line hook or provocative question to set the tone
-- \`speakerNotes\`: Welcome students, preview the chapter's arc
-
-### "section" — Section divider
-- Used 2-3 times to signal major topic transitions
-- \`title\`: Short, bold section name (2-5 words)
-- \`bullets\`: [] (empty)
-- \`bodyText\`: One sentence previewing what this section covers
-- \`speakerNotes\`: Transition language connecting previous section to this one
-
-### "content" — Standard bullet slide
-- The workhorse — but NEVER more than 2 in a row
-- \`title\`: Clear, specific heading
-- \`bullets\`: 3-5 concise phrases (NOT full sentences)
-- \`speakerNotes\`: What to explain, examples to give, questions to ask
-
-### "big-idea" — Single bold statement
-- Used 1-2 times for the chapter's most important insights
-- \`title\`: Short label (e.g., "The Key Insight", "Why This Matters")
-- \`bullets\`: [] (empty)
-- \`bodyText\`: One powerful sentence that students should remember
-- \`speakerNotes\`: How to deliver this — pause, let it sink in, ask students to react
-
-### "quote" — Attributed quote or striking finding
-- Used 1-2 times for a memorable quote, research finding, or counterintuitive fact
-- \`title\`: Brief attribution or context (e.g., "Daniel Kahneman", "A 2023 Meta-Analysis Found...")
-- \`bullets\`: [] (empty)
-- \`bodyText\`: The quote or finding itself
-- \`speakerNotes\`: Context, why this matters, discussion prompt
-
-### "two-column" — Comparison or contrast
-- Used 0-2 times for before/after, pros/cons, theory A vs B
-- \`title\`: What's being compared
-- \`bullets\`: Left column items (3-4 items)
-- \`bodyText\`: JSON string of right column: \`["item1", "item2", "item3"]\`
-- \`speakerNotes\`: Walk through the comparison, highlight key differences
-
-## Deck Structure (12-16 slides)
-
-1. **Title slide** (layout: "title") — hook them immediately
-2. **Section divider** → 2-3 content/big-idea/quote slides
-3. **Section divider** → 2-3 content/big-idea/quote slides
-4. **Section divider** → 2-3 content/big-idea/quote slides
-5. **Summary slide** (layout: "content") — 3-5 key takeaways, titled "Key Takeaways"
-
-## Content Rules
-
-- Bullet text should be SCANNABLE — short phrases, not paragraphs
-- Every key concept must appear on at least one slide
-- Include at least one "big-idea" and one "quote" slide per deck
-- Big-idea \`bodyText\` should be punchy — the kind of thing students photograph
-- Speaker notes should feel like coaching: natural, conversational, with specific examples
-- Vary the rhythm: content → big-idea → content → quote → section → content
-- NEVER have 3+ content slides in a row — break them up
-
-## Output
-
-Respond with ONLY a valid JSON array. No markdown code fences, no commentary. First character must be \`[\`, last must be \`]\`.
-
-Each object: { "title": string, "bullets": string[], "speakerNotes": string, "layout": string, "bodyText": string }
-
-bodyText is required for title, section, big-idea, quote, two-column layouts. For content layout, omit bodyText or set to "".`;
+export function buildSlidesPrompt(themeId?: string): string {
+  const theme = getChapterTheme(themeId);
+  const [bg, text, accent, muted, surface] = theme.palette;
+
+  return `You are CanvasClassBuild's slide-deck art director.
+
+Each slide in your deck is a single editorial 4K image — gpt-image-2 renders text, layout, and visuals together as one composed frame. Your job is to write the **per-slide gpt-image-2 prompt** plus the speaker notes that accompany it. There are no bullet points, no "content layouts", no PowerPoint clipart. Every slide is a piece of visual editorial.
+
+## The deck
+
+12–14 slides. The arc:
+
+1. **Title slide** — a single bold visual statement of the chapter's central idea, with the chapter title (large) and a one-line subtitle (smaller, still legible from the back) burned into the image.
+2. **3–4 setup slides** — each presents one foundational concept as a striking image with at most a title + one short label. Often the image alone, with just a title, is the right move.
+3. **3–4 development slides** — go deeper. Comparison plates ("A vs B" with two big labels), cross-sections with at most 2–3 oversized labels, before/after pairings with a single caption. **Never** thickly-annotated diagrams — if it would need more than three readable labels, redesign the slide.
+4. **1–2 quote / "big idea" slides** — a single line of quoted text or aphoristic insight rendered as the dominant element of the image, attribution below in a still-readable size.
+5. **A penultimate "key takeaways" slide** — title + 3 numbered takeaways. Each takeaway is one short phrase set at body size (≈100 px cap-height), arranged editorially (numbered like "01 02 03" or as three stacked banners).
+6. **A closing slide** — looking-ahead teaser or an image-led "thank you / questions" plate.
+
+## The theme to honour
+
+Every image must read as if it was designed by the same studio that designed the chapter reading. The deck ships in the **${theme.name}** theme:
+
+- **${theme.name}** — ${theme.pitch}
+- Pairing: ${theme.pairing}
+- Mode: ${theme.mode}
+- Palette (you'll restate these hex values verbatim in every prompt):
+  - background: \`${bg}\`
+  - text/ink: \`${text}\`
+  - primary accent: \`${accent}\`
+  - secondary tone: \`${muted}\`
+  - surface: \`${surface}\`
+
+Match the typographic register: serif voices for Press / Almanac, monospace for Notebook / Terminal, bold display serif for Storybook, italic Instrument Serif for Studio.
+
+## PROJECTION LEGIBILITY — the non-negotiable rule
+
+These slides will be projected on a screen and viewed from the back of a 100-seat lecture theatre. Every word that's rendered into the image must be **readable at that distance**. This is the single most important constraint and supersedes every aesthetic instinct — but don't overshoot. The target is *projection slide*, not *movie poster*. Title type should feel like a proper slide headline, not a billboard.
+
+What that means, concretely, on a 3840×2160 canvas:
+
+- **Title type**: cap-height roughly **140–200 px** (≈6.5–9% of the canvas height). One short title per slide, max ~7 words. Substantial — but not overwhelming the image.
+- **Body / label type**: cap-height roughly **60–90 px** (≈3–4% of the canvas height). Equivalent to ~36–50pt at a normal slide size. Comfortably readable from row 20.
+- **Hard floor**: NEVER request type smaller than **50 px cap-height**. If a label, axis tick, footnote, source line, or annotation can't fit at that size, **omit it entirely**.
+- **Total text on one slide**: at most **4 distinct strings**, including the title. (Not "≤6". Four.) The exception is the Key Takeaways slide, which can hold a title + 3 numbered takeaways.
+
+Bake the size guidance into every \`imagePrompt\`. State the type sizes in pixels or as a percentage of canvas height. The model honours explicit size language when you give it. Example phrasing inside the prompt: *"Title set at ~170 px cap-height, occupying the upper third of the frame at roughly half the slide's width; one short label beneath at ~80 px cap-height. No type smaller than 50 px cap-height anywhere in the image."*
+
+If you can't fit your idea inside the four-strings-six-words-per-string budget at this size — **the slide is too dense**. Cut. The image (the visual itself) carries most of the meaning; type is the headline, not a paragraph.
+
+## FACTUAL FIDELITY — equally non-negotiable
+
+gpt-image-2 will confidently render whatever you ask for, including invented statistics, fabricated study results, plausible-but-wrong dates, and miscoded diagrams. These slides are projected in a *university course* — a slide with a hallucinated number on it is a slide that teaches false information. **Treat every \`imagePrompt\` as a factual statement the image will make on the teacher's behalf.**
+
+The distinction is *fabricated* vs *prompt-provided*. A legitimate figure pulled from the chapter ("Ebbinghaus, 1885", "n = 240", "37°C") is welcome inside the image — quote it in the prompt and gpt-image-2 will render it faithfully. What you must never do is ask the model to invent values it has no source for.
+
+**Rules every \`imagePrompt\` must respect:**
+
+1. **Render only what you provide.** Any number, date, percentage, sample size, year, study title, author name, or rendered citation must appear verbatim in this \`imagePrompt\`, sourced from the chapter content given to you. Quote it inside the prompt — e.g. *"a label '~85% retention after 24h' set beneath the curve, drawn from the Roediger & Karpicke study"*. Never ask gpt-image-2 to fill in axis ticks, percentages, sample sizes, or dates that you haven't named.
+2. **No fabricated charts, graphs, bar plots, scoreboards, or dashboards.** If a quantitative idea is core to the slide and you do not have grounded values, evoke the *shape* abstractly: *"an editorial line drawing suggesting an inverted U-curve, axes unlabeled, no numerical ticks, sketched in the chapter's accent colour"*. Put the actual data in \`speakerNotes\` for the teacher to deliver verbally.
+3. **No invented citations or attributions.** If you embed a quote, author, or date on the slide, the exact same words must come from the chapter content provided in the user prompt. Otherwise it's a fabricated source on a university slide.
+4. **Named real subjects** — specific historical scenes, named instruments, named researchers, named places, named species — must be depicted in an *editorial illustrative* register (woodcut, watercolour, ink-and-wash, risograph, scientific-plate engraving). Photorealistic depictions of named subjects are forbidden: they read as photographic evidence the image cannot back up.
+5. **Universal/textbook subjects** (a generic neuron, the human eye, the periodic table layout) may be rendered with care toward textbook accuracy. Any embedded label must be an accurate, well-established term — never invent anatomical, taxonomic, or technical labels.
+6. **The 4 strings rule applies here too:** every rendered string is either (a) a generic descriptor that makes no factual claim, or (b) a phrase, number, name, or citation pulled verbatim from the chapter content and quoted in this prompt.
+7. **No course-position metadata on the slide.** Never render "Chapter N", "Class N", "Module N", "Week N", "Lesson N", "Lecture N", "Unit N", or "Day N" inside the image — not on the title slide, not on any subsequent slide. The chapter title alone is the title (e.g. *"Encoding: The First Pass"*, not *"Class 1 · Encoding: The First Pass"*). Slide numbering and course position belong in the presenter's hands, not burned into the projected image.
+
+When in doubt, default to *conceptual editorial illustration* with a strong stylistic frame and minimal embedded text. A vivid metaphor is always better than a fabricated graph — but a labeled visual is welcome when every label and number traces back to the chapter.
+
+## How to write each \`imagePrompt\`
+
+gpt-image-2 is exceptional at long, specific prompts. Each \`imagePrompt\` should be a single paragraph of 180–300 words covering:
+
+1. **Idiom.** Open with the visual register. Examples: *"A high-resolution editorial 16:9 plate in the style of a 1960s broadsheet front page"*; *"A pen-and-watercolour scientific illustration spread across a 4K landscape canvas"*; *"A modernist Swiss-style information graphic, white space first"*. Avoid generic "infographic" or "presentation slide" wording.
+
+2. **The one idea.** A single sentence stating what the slide must communicate.
+
+3. **Composition.** Where is the focal point? Where does the title sit? Where do labels live? Use real designer language: rule-of-thirds, asymmetric grid, full-bleed photographic plate with title overlay, three-band stacked layout, etc. Give the image room to breathe — generous negative space is your friend.
+
+4. **Palette direction.** Restate the five hex values from the theme above in prose. Always include all five — the model honours them when you state them as named-colour pairings (e.g. *"set on parchment cream #${bg.replace('#', '')}, inked in deep umber #${text.replace('#', '')}, with brick-red emphasis #${accent.replace('#', '')}…"*).
+
+5. **Typography — sized for projection.** Specify the type voice (family idiom, case, weight, italic vs upright), AND its size in pixels or % of canvas height per the legibility rule above. Title and any labels both. **No type smaller than 50 px cap-height — period.** And don't overshoot: a 170 px title is a proper slide headline; 300 px is a billboard.
+
+6. **Text content to render, in quotation marks.** Quote the exact title and label text the model should burn into the image. **Hard limit: 4 strings total per slide (title + up to 3 labels). Each string ≤6 words.** Every rendered string must either be a generic descriptor or appear verbatim in the chapter content — see the Factual Fidelity rules above. If you find yourself wanting more strings, you're trying to put two slides into one — split or cut.
+
+7. **What to avoid.** Always end the prompt with this exact clause (it covers visual gotchas gpt-image-2 falls into by default): *"No watermarks, no logos, no cropped letters, no UI chrome, no PowerPoint-style icon clipart, no fine-print annotations, no tiny axis ticks or footnote text, no captions under 50 px cap-height, no oversized billboard headlines exceeding 220 px cap-height."* (You don't need to add a "render only what's in this prompt" disclaimer — a single factual-fidelity safety clause is appended automatically before the request reaches gpt-image-2.)
+
+## Hard rules
+
+- Every \`imagePrompt\` is a single paragraph of prose. No bullet lists inside the prompt, no markdown.
+- Every slide must restate the full palette and the theme name in its own prompt — gpt-image-2 has no memory across calls.
+- Never produce ugly default-deck aesthetics: no clipart, no 3D charts, no stock-photo composites, no "modern PowerPoint" gradients.
+- Reference the chapter content concretely. Generic prompts produce generic slides.
+- The title slide's \`imagePrompt\` should describe a single arresting image with the chapter title rendered prominently as the main visual element.
+- **Slides are not documents.** If you want to convey detail, put it in \`speakerNotes\`, not into rendered text on the image. The image is the teacher's prop; the notes are the teacher's script.
+
+## Output format
+
+A valid JSON array. First character \`[\`, last character \`]\`. No code fences, no commentary, no markdown.
+
+Each object: \`{ "title": string, "imagePrompt": string, "speakerNotes": string }\`
+
+- \`title\`: 2–8 word slide title (used for outline / file name only — not rendered onto the slide image).
+- \`imagePrompt\`: the gpt-image-2 paragraph described above (180–280 words).
+- \`speakerNotes\`: 2–4 sentences of natural delivery direction. What to say, what to pause on, what question to ask. Conversational, not formal.`;
 }
 
 export function buildSlidesUserPrompt(
@@ -86,29 +122,27 @@ export function buildSlidesUserPrompt(
   chapterContent?: string,
 ): string {
   const parts: string[] = [];
-
-  parts.push(`Generate a visually varied, engaging slide deck for:`);
+  parts.push(`Generate the 12–14 slide deck for:`);
   parts.push(``);
-  parts.push(`**Class**: "${chapterTitle}"`);
-
+  parts.push(`**Chapter**: "${chapterTitle}"`);
   if (keyConcepts.length > 0) {
     parts.push(`**Key concepts**: ${keyConcepts.join(', ')}`);
   }
-
   if (chapterContent) {
     const maxLen = 8000;
     const trimmed =
       chapterContent.length > maxLen
-        ? chapterContent.slice(0, maxLen) + '\n\n[...chapter content truncated...]'
+        ? chapterContent.slice(0, maxLen) + '\n\n[…chapter content truncated…]'
         : chapterContent;
-
     parts.push(``);
-    parts.push(`**Chapter content** (use this to find quotes, key findings, and the right emphasis):`);
+    parts.push(`**Chapter reading** (use this to ground each slide's visual idea in actual content — pull specific examples, quotes, comparisons, and findings):`);
     parts.push(trimmed);
   }
-
   parts.push(``);
-  parts.push(`Generate 12-16 slides using ALL layout types. Make it a deck students would actually pay attention to. Output ONLY valid JSON.`);
-
+  parts.push(
+    `Write each slide's gpt-image-2 prompt to be unmistakably part of the selected theme (the system prompt above states which). Match the type voice, the palette, the editorial register. Make this the kind of deck a designer would put on a portfolio.`,
+  );
+  parts.push(``);
+  parts.push(`Output ONLY valid JSON. First character must be [. Last must be ].`);
   return parts.join('\n');
 }
diff --git a/src/prompts/syllabus.ts b/src/prompts/syllabus.ts
index 0431a93..ae43212 100644
--- a/src/prompts/syllabus.ts
+++ b/src/prompts/syllabus.ts
@@ -16,8 +16,15 @@ export function buildSyllabusPrompt(
   refinementFeedback?: string,
   _conversationHistory?: Array<{ role: string; content: string }>
 ): { systemPrompt: string; userMessage: string } {
-  const wordCount = setup.chapterLength === 'concise' ? '2,000' : setup.chapterLength === 'standard' ? '4,000' : '6,000';
-  const readTime = setup.chapterLength === 'concise' ? '10' : setup.chapterLength === 'standard' ? '20' : '30';
+  // If the user supplied a free-text reading length brief, pass it verbatim
+  // to the model. Otherwise fall back to the enum-derived word/time targets.
+  const briefTrimmed = setup.chapterLengthBrief?.trim();
+  const wordCount = briefTrimmed
+    ? briefTrimmed
+    : setup.chapterLength === 'concise' ? '2,000' : setup.chapterLength === 'standard' ? '4,000' : '6,000';
+  const readTime = briefTrimmed
+    ? '(see brief above)'
+    : setup.chapterLength === 'concise' ? '10' : setup.chapterLength === 'standard' ? '20' : '30';
 
   const systemPrompt = `You are CanvasClassBuild, an expert course architect that designs pedagogically-principled university courses. You combine deep subject matter expertise with decades of evidence-based learning science research.
 
@@ -117,7 +124,9 @@ ${setup.textbookReference ? `**Reference text**: ${setup.textbookReference}` : '
 ${setup.learnerNotes ? `**Additional learner context**: ${setup.learnerNotes}` : ''}
 
 **Course structure**: ${setup.numChapters} classes
-**Reading length**: ~${wordCount} words each (~${readTime} min reading time)
+${briefTrimmed
+  ? `**Reading length** (verbatim from the teacher's brief): ${wordCount}`
+  : `**Reading length**: ~${wordCount} words each (~${readTime} min reading time)`}
 **Interactive widgets per chapter**: ${setup.widgetsPerChapter}
 
 Design a pedagogically outstanding course. The chapter sequence should tell a coherent intellectual story, building knowledge progressively while weaving in spaced review of earlier concepts. Each chapter should feel like it was crafted by an instructor who deeply cares about their students' learning.
diff --git a/src/services/abortRegistry.ts b/src/services/abortRegistry.ts
new file mode 100644
index 0000000..ad031c4
--- /dev/null
+++ b/src/services/abortRegistry.ts
@@ -0,0 +1,41 @@
+/**
+ * Registry of in-flight generation AbortControllers, keyed by a stable string
+ * ("reading:3", "quiz:3", "syllabus", "batch", …). Lives at module level —
+ * controllers aren't serializable state, and the registry must survive
+ * component unmounts so a Stop button rendered after navigation can still
+ * cancel a stream started before it.
+ */
+const controllers = new Map<string, AbortController>();
+
+/** Key for a per-chapter material generation. */
+export const materialAbortKey = (kind: string, chapterNum: number): string =>
+  `${kind}:${chapterNum}`;
+
+/**
+ * Create and register a controller for `key`, aborting any stale one first
+ * (a re-generate while a previous attempt is somehow still streaming should
+ * supersede it, not race it).
+ */
+export function beginAbortable(key: string): AbortController {
+  abortInFlight(key);
+  const controller = new AbortController();
+  controllers.set(key, controller);
+  return controller;
+}
+
+/**
+ * Unregister after the work settles. Pass the controller you registered so a
+ * finished attempt can't evict a newer one that reused the key.
+ */
+export function endAbortable(key: string, controller: AbortController): void {
+  if (controllers.get(key) === controller) controllers.delete(key);
+}
+
+/** Abort whatever is registered under `key`. Returns true if something was. */
+export function abortInFlight(key: string): boolean {
+  const controller = controllers.get(key);
+  if (!controller) return false;
+  controllers.delete(key);
+  controller.abort();
+  return true;
+}
diff --git a/src/services/academic/crossref.ts b/src/services/academic/crossref.ts
new file mode 100644
index 0000000..45fd795
--- /dev/null
+++ b/src/services/academic/crossref.ts
@@ -0,0 +1,76 @@
+/**
+ * Crossref REST API — free, CORS-friendly, no key. The polite pool wants a
+ * User-Agent identifier, but browsers don't let us set it; Crossref still
+ * answers, just on the anonymous queue.
+ * https://api.crossref.org/swagger-ui/index.html
+ */
+
+export interface CrossrefWork {
+  doi: string;
+  title: string;
+  authors: string;
+  year: string;
+  container: string;
+  url?: string;
+}
+
+export function normalizeDoi(doi: string): string {
+  let d = doi.trim();
+  d = d.replace(/^https?:\/\/(dx\.)?doi\.org\//i, '');
+  d = d.replace(/^doi:\s*/i, '');
+  d = d.replace(/[.,;]+$/, '');
+  return d;
+}
+
+interface CrossrefAuthor {
+  given?: string;
+  family?: string;
+  literal?: string;
+}
+
+interface CrossrefRaw {
+  DOI?: string;
+  title?: string[];
+  author?: CrossrefAuthor[];
+  issued?: { 'date-parts'?: number[][] };
+  'container-title'?: string[];
+  URL?: string;
+}
+
+function formatAuthors(authors?: CrossrefAuthor[]): string {
+  if (!authors || authors.length === 0) return '';
+  const names = authors.map((a) => {
+    if (a.literal) return a.literal;
+    const family = a.family ?? '';
+    const given = a.given ? a.given[0] + '.' : '';
+    return family && given ? `${family}, ${given}` : family || given;
+  });
+  if (names.length === 1) return names[0];
+  if (names.length === 2) return `${names[0]} & ${names[1]}`;
+  return `${names[0]} et al.`;
+}
+
+export async function fetchCrossrefWork(
+  doi: string,
+): Promise<CrossrefWork | null> {
+  const normalized = normalizeDoi(doi);
+  if (!normalized || !normalized.includes('/')) return null;
+  try {
+    const res = await fetch(
+      `https://api.crossref.org/works/${encodeURIComponent(normalized)}`,
+    );
+    if (!res.ok) return null;
+    const data = await res.json();
+    const m: CrossrefRaw = data?.message ?? {};
+    return {
+      doi: m.DOI || normalized,
+      title: m.title?.[0] ?? '',
+      authors: formatAuthors(m.author),
+      year: m.issued?.['date-parts']?.[0]?.[0]?.toString() ?? '',
+      container: m['container-title']?.[0] ?? '',
+      url: m.URL,
+    };
+  } catch {
+    return null;
+  }
+}
diff --git a/src/services/academic/enrich.ts b/src/services/academic/enrich.ts
new file mode 100644
index 0000000..73d3d0a
--- /dev/null
+++ b/src/services/academic/enrich.ts
@@ -0,0 +1,184 @@
+/**
+ * Enrich a research dossier against Semantic Scholar, Crossref, and Unpaywall.
+ *
+ * For each source the model emitted:
+ *   - If the source has a DOI: verify it via Crossref. If the resolved title
+ *     matches what the model claimed, accept it and pull metadata. If not,
+ *     strip the DOI as a likely hallucination.
+ *   - If the source has no DOI but has a title: search Semantic Scholar and
+ *     adopt the top title-matching paper's DOI + metadata.
+ *   - Either way, look up Unpaywall for a legal open-access URL.
+ *
+ * Network failures degrade gracefully — the source is kept as-is, just marked
+ * `isVerified: false`. We never invent data.
+ */
+
+import type { ResearchDossier, ResearchSource } from '../../types/course';
+import { searchPapers } from './semanticScholar';
+import { fetchCrossrefWork } from './crossref';
+import { findOpenAccess } from './unpaywall';
+
+export interface EnrichmentStats {
+  total: number;
+  doiVerified: number;
+  doiResolved: number;
+  oaFound: number;
+  unverified: number;
+}
+
+export interface EnrichOptions {
+  /** Concurrency cap for parallel enrichment. Default 4. */
+  concurrency?: number;
+  onProgress?: (done: number, total: number) => void;
+}
+
+function normalizeTitle(s: string): string {
+  return s
+    .toLowerCase()
+    .replace(/[^a-z0-9 ]/g, ' ')
+    .replace(/\s+/g, ' ')
+    .trim();
+}
+
+function titlesMatch(a: string, b: string): boolean {
+  const A = normalizeTitle(a);
+  const B = normalizeTitle(b);
+  if (!A || !B) return false;
+  if (A === B) return true;
+  if (A.length >= 20 && B.length >= 20 && (A.includes(B) || B.includes(A))) {
+    return true;
+  }
+  const tokA = new Set(A.split(' ').filter((t) => t.length > 3));
+  const tokB = new Set(B.split(' ').filter((t) => t.length > 3));
+  if (tokA.size === 0 || tokB.size === 0) return false;
+  const intersection = [...tokA].filter((t) => tokB.has(t)).length;
+  const union = new Set([...tokA, ...tokB]).size;
+  return intersection / union >= 0.6;
+}
+
+async function enrichSource(
+  source: ResearchSource,
+  stats: EnrichmentStats,
+): Promise<ResearchSource> {
+  // Path A: source already claims a DOI — verify it against Crossref.
+  if (source.doi) {
+    const work = await fetchCrossrefWork(source.doi);
+    if (work && work.title) {
+      const titleOk = !source.title || titlesMatch(source.title, work.title);
+      if (!titleOk) {
+        // Title doesn't match the DOI's actual paper — the model likely
+        // hallucinated the DOI. Strip it; keep the source unverified.
+        stats.unverified++;
+        return { ...source, doi: undefined, isVerified: false };
+      }
+      stats.doiVerified++;
+      const oa = await findOpenAccess(work.doi);
+      if (oa?.isOa && oa.bestOaUrl) stats.oaFound++;
+      return {
+        ...source,
+        title: work.title || source.title,
+        authors: work.authors || source.authors,
+        year: work.year || source.year,
+        doi: work.doi,
+        url: oa?.bestOaUrl || source.url || work.url,
+        isVerified: true,
+      };
+    }
+    // DOI didn't resolve. Fall through to title lookup, but strip the DOI.
+    source = { ...source, doi: undefined };
+  }
+
+  // Path B: no DOI — search Semantic Scholar by title.
+  if (source.title && source.title.length > 8) {
+    const results = await searchPapers(source.title, 3);
+    const match = results.find((r) => r.title && titlesMatch(source.title, r.title));
+    if (match) {
+      const doi = match.externalIds?.DOI;
+      const authorsStr = (match.authors || [])
+        .slice(0, 3)
+        .map((a) => a.name)
+        .filter(Boolean)
+        .join(', ');
+      if (doi) {
+        stats.doiResolved++;
+        const oa = await findOpenAccess(doi);
+        if (oa?.isOa && oa.bestOaUrl) stats.oaFound++;
+        return {
+          ...source,
+          title: match.title || source.title,
+          authors: authorsStr || source.authors,
+          year: match.year?.toString() || source.year,
+          doi,
+          url: oa?.bestOaUrl || match.openAccessPdf?.url || source.url,
+          isVerified: true,
+        };
+      }
+      // Found in S2 but no DOI — still a real paper, accept it.
+      stats.doiResolved++;
+      return {
+        ...source,
+        title: match.title || source.title,
+        authors: authorsStr || source.authors,
+        year: match.year?.toString() || source.year,
+        url: match.openAccessPdf?.url || source.url,
+        isVerified: true,
+      };
+    }
+  }
+
+  // Couldn't verify against any external source.
+  stats.unverified++;
+  return { ...source, isVerified: false };
+}
+
+async function runWithConcurrency<T>(
+  tasks: Array<() => Promise<T>>,
+  limit: number,
+): Promise<T[]> {
+  const results: T[] = new Array(tasks.length);
+  let cursor = 0;
+  async function worker() {
+    while (cursor < tasks.length) {
+      const i = cursor++;
+      results[i] = await tasks[i]();
+    }
+  }
+  const workers = Array.from(
+    { length: Math.min(limit, tasks.length) },
+    worker,
+  );
+  await Promise.all(workers);
+  return results;
+}
+
+export async function enrichDossier(
+  dossier: ResearchDossier,
+  options?: EnrichOptions,
+): Promise<{ dossier: ResearchDossier; stats: EnrichmentStats }> {
+  const stats: EnrichmentStats = {
+    total: dossier.sources.length,
+    doiVerified: 0,
+    doiResolved: 0,
+    oaFound: 0,
+    unverified: 0,
+  };
+  if (dossier.sources.length === 0) {
+    return { dossier, stats };
+  }
+
+  let done = 0;
+  const tasks = dossier.sources.map((s) => async () => {
+    try {
+      return await enrichSource(s, stats);
+    } finally {
+      done++;
+      options?.onProgress?.(done, dossier.sources.length);
+    }
+  });
+
+  const enriched = await runWithConcurrency(tasks, options?.concurrency ?? 4);
+  return {
+    dossier: { ...dossier, sources: enriched },
+    stats,
+  };
+}
diff --git a/src/services/academic/index.ts b/src/services/academic/index.ts
new file mode 100644
index 0000000..f79ae85
--- /dev/null
+++ b/src/services/academic/index.ts
@@ -0,0 +1,8 @@
+export { searchPapers, getPaperByDoi } from './semanticScholar';
+export type { SsPaper } from './semanticScholar';
+export { fetchCrossrefWork, normalizeDoi } from './crossref';
+export type { CrossrefWork } from './crossref';
+export { findOpenAccess } from './unpaywall';
+export type { UnpaywallHit } from './unpaywall';
+export { enrichDossier } from './enrich';
+export type { EnrichmentStats, EnrichOptions } from './enrich';
diff --git a/src/services/academic/semanticScholar.ts b/src/services/academic/semanticScholar.ts
new file mode 100644
index 0000000..e01c49b
--- /dev/null
+++ b/src/services/academic/semanticScholar.ts
@@ -0,0 +1,47 @@
+/**
+ * Semantic Scholar Academic Graph API — free, CORS-friendly, no key required
+ * for low rates (~100 req / 5 min anonymous; 1 RPS with a key on request).
+ * https://api.semanticscholar.org/api-docs/graph
+ */
+
+const BASE = 'https://api.semanticscholar.org/graph/v1';
+const FIELDS =
+  'title,authors,year,journal,externalIds,openAccessPdf,tldr,abstract';
+
+export interface SsPaper {
+  paperId: string;
+  title: string;
+  authors: Array<{ name: string }>;
+  year: number | null;
+  journal?: { name?: string } | null;
+  externalIds?: { DOI?: string; ArXiv?: string; PubMed?: string };
+  openAccessPdf?: { url: string } | null;
+  tldr?: { text: string } | null;
+  abstract?: string | null;
+}
+
+export async function searchPapers(
+  query: string,
+  limit = 3,
+): Promise<SsPaper[]> {
+  const url = `${BASE}/paper/search?query=${encodeURIComponent(query)}&limit=${limit}&fields=${FIELDS}`;
+  try {
+    const res = await fetch(url);
+    if (!res.ok) return [];
+    const data = await res.json();
+    return Array.isArray(data?.data) ? (data.data as SsPaper[]) : [];
+  } catch {
+    return [];
+  }
+}
+
+export async function getPaperByDoi(doi: string): Promise<SsPaper | null> {
+  const url = `${BASE}/paper/DOI:${encodeURIComponent(doi)}?fields=${FIELDS}`;
+  try {
+    const res = await fetch(url);
+    if (!res.ok) return null;
+    return (await res.json()) as SsPaper;
+  } catch {
+    return null;
+  }
+}
diff --git a/src/services/academic/unpaywall.ts b/src/services/academic/unpaywall.ts
new file mode 100644
index 0000000..11d0ae0
--- /dev/null
+++ b/src/services/academic/unpaywall.ts
@@ -0,0 +1,38 @@
+/**
+ * Unpaywall API — free, CORS-friendly. Returns the best legal open-access
+ * copy of a DOI when one exists. Email is required as a polite-pool token,
+ * not for auth. https://unpaywall.org/products/api
+ */
+
+import { normalizeDoi } from './crossref';
+
+const UNPAYWALL_EMAIL = 'classbuild@example.com';
+
+export interface UnpaywallHit {
+  doi: string;
+  isOa: boolean;
+  bestOaUrl?: string;
+}
+
+export async function findOpenAccess(
+  doi: string,
+): Promise<UnpaywallHit | null> {
+  const normalized = normalizeDoi(doi);
+  if (!normalized || !normalized.includes('/')) return null;
+  try {
+    const url = `https://api.unpaywall.org/v2/${encodeURIComponent(
+      normalized,
+    )}?email=${UNPAYWALL_EMAIL}`;
+    const res = await fetch(url);
+    if (!res.ok) return null;
+    const data = await res.json();
+    const best = data?.best_oa_location;
+    return {
+      doi: normalized,
+      isOa: !!data?.is_oa,
+      bestOaUrl: best?.url_for_pdf || best?.url || undefined,
+    };
+  } catch {
+    return null;
+  }
+}
diff --git a/src/services/claude/client.ts b/src/services/claude/client.ts
index 8844dac..7a8bedc 100644
--- a/src/services/claude/client.ts
+++ b/src/services/claude/client.ts
@@ -14,7 +14,7 @@ export function getClient(apiKey: string): Anthropic {
 }
 
 export const MODELS = {
-  opus: 'claude-opus-4-6',
+  opus: 'claude-opus-4-8',
   sonnet: 'claude-sonnet-4-6',
   haiku: 'claude-haiku-4-5-20251001',
 } as const;
diff --git a/src/services/elevenLabs/tts.ts b/src/services/elevenLabs/tts.ts
new file mode 100644
index 0000000..60059b7
--- /dev/null
+++ b/src/services/elevenLabs/tts.ts
@@ -0,0 +1,267 @@
+/**
+ * ElevenLabs text-to-speech service.
+ *
+ * ElevenLabs returns native MP3 at 44.1 kHz, so there's no PCM-to-WAV
+ * gymnastics like the previous Gemini integration. Long transcripts are
+ * still chunked — eleven_multilingual_v2 handles up to ~5000 characters
+ * per request reliably — but each chunk's MP3 output can be concatenated
+ * directly (frame-aligned) into a single blob.
+ *
+ * Concatenating raw MP3 frames works because every chunk is encoded at
+ * the same sample rate and bitrate. Browsers and FFmpeg tolerate the
+ * extra ID3v2 / Xing headers that may appear at chunk boundaries.
+ */
+
+const API_BASE = 'https://api.elevenlabs.io/v1';
+const DEFAULT_MODEL_ID = 'eleven_multilingual_v2';
+const DEFAULT_VOICE_ID = 'onwK4e9ZLuTAKqWW03F9'; // Daniel — British male narration
+
+const MAX_CHUNK_CHARS = 4500;
+const MAX_ATTEMPTS = 3;
+
+export class ElevenLabsTtsError extends Error {
+  readonly status: number | undefined;
+  readonly detail: string | undefined;
+
+  constructor(message: string, status?: number, detail?: string) {
+    super(message);
+    this.name = 'ElevenLabsTtsError';
+    this.status = status;
+    this.detail = detail;
+  }
+}
+
+export interface TtsOptions {
+  /** ElevenLabs voice id (e.g. 'onwK4e9ZLuTAKqWW03F9'). */
+  voiceId?: string;
+  /** ElevenLabs model id. Defaults to `eleven_multilingual_v2`. */
+  modelId?: string;
+  /** Voice settings — defaults tuned for long-form narration. */
+  stability?: number;
+  similarityBoost?: number;
+  style?: number;
+  useSpeakerBoost?: boolean;
+  /** Called after each chunk with (completed, total) for UI progress. */
+  onProgress?: (current: number, total: number) => void;
+  /** Optional cancellation — aborting rejects with an AbortError. */
+  signal?: AbortSignal;
+}
+
+/**
+ * Remove stage directions that transcripts embed as text — "[short pause]",
+ * "(pause)", "[beat]", etc. ElevenLabs reads these aloud verbatim instead of
+ * interpreting them, so strip any bracketed/parenthetical group containing
+ * "pause" or "beat" and tidy the surrounding whitespace. Applied to every
+ * transcript (incl. ones generated before the prompt stopped emitting them).
+ */
+function stripStageDirections(text: string): string {
+  return text
+    .replace(/[[(][^\][()]*\b(?:pause|beat)\b[^\][()]*[\])]/gi, ' ')
+    .replace(/[ \t]{2,}/g, ' ')
+    .replace(/ +([.,;:!?])/g, '$1');
+}
+
+function chunkText(text: string): string[] {
+  const paragraphs = text.split(/\n\n+/);
+  const chunks: string[] = [];
+  let current = '';
+
+  for (const para of paragraphs) {
+    const trimmed = para.trim();
+    if (!trimmed) continue;
+
+    if (current && current.length + 2 + trimmed.length > MAX_CHUNK_CHARS) {
+      chunks.push(current.trim());
+      current = '';
+    }
+
+    if (trimmed.length > MAX_CHUNK_CHARS) {
+      if (current) {
+        chunks.push(current.trim());
+        current = '';
+      }
+      const sentences = trimmed.match(/[^.!?]+[.!?]+[\s]*/g) || [trimmed];
+      let sentenceChunk = '';
+      for (const sentence of sentences) {
+        if (sentenceChunk && sentenceChunk.length + sentence.length > MAX_CHUNK_CHARS) {
+          chunks.push(sentenceChunk.trim());
+          sentenceChunk = '';
+        }
+        sentenceChunk += sentence;
+      }
+      if (sentenceChunk.trim()) current = sentenceChunk;
+    } else {
+      current += (current ? '\n\n' : '') + trimmed;
+    }
+  }
+
+  if (current.trim()) chunks.push(current.trim());
+  return chunks;
+}
+
+function sleep(ms: number): Promise<void> {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+async function synthesizeChunk(
+  text: string,
+  apiKey: string,
+  voiceId: string,
+  modelId: string,
+  voiceSettings: Record<string, number | boolean>,
+  signal?: AbortSignal,
+): Promise<Uint8Array> {
+  const url = `${API_BASE}/text-to-speech/${encodeURIComponent(voiceId)}`;
+
+  for (let attempt = 1; attempt <= MAX_ATTEMPTS; attempt++) {
+    let res: Response;
+    try {
+      res = await fetch(url, {
+        method: 'POST',
+        signal,
+        headers: {
+          'xi-api-key': apiKey,
+          'Content-Type': 'application/json',
+          Accept: 'audio/mpeg',
+        },
+        body: JSON.stringify({
+          text,
+          model_id: modelId,
+          voice_settings: voiceSettings,
+        }),
+      });
+    } catch (err) {
+      // A user-initiated Stop must surface as a plain AbortError, not get
+      // wrapped in the local-block diagnostic below.
+      if (err instanceof Error && err.name === 'AbortError') throw err;
+      // A REJECTED fetch (vs an HTTP error response, handled below) means the
+      // request never reached ElevenLabs. ElevenLabs allows direct browser
+      // calls — its TTS endpoint returns permissive CORS — so this is almost
+      // always a *local* block of api.elevenlabs.io (a content/ad/privacy
+      // blocker, browser extension, VPN, or iCloud Private Relay), not a
+      // transient blip. Don't burn retries on a non-transient block; fail fast
+      // with guidance that points at the real, user-fixable cause. (No status
+      // is attached, which is how the caller knows to show this verbatim rather
+      // than running it through friendlyError.)
+      throw new ElevenLabsTtsError(
+        `Couldn't reach ElevenLabs — the request to api.elevenlabs.io was blocked before it got a response. ` +
+          `This isn't your API key or ElevenLabs itself (it allows direct browser calls). The usual cause is ` +
+          `something on your device or network blocking that domain: a content/ad/privacy blocker or browser ` +
+          `extension, a VPN, or iCloud Private Relay. Try disabling content blockers and "Prevent Cross-Site ` +
+          `Tracking" for this site, turning off any VPN/Private Relay, or switching browser or network. ` +
+          `(Underlying: ${err instanceof Error ? err.message : String(err)})`,
+      );
+    }
+
+    if (!res.ok) {
+      const detail = await res.text().catch(() => '');
+      // Retry transient 5xx / 429; everything else fails fast.
+      if ((res.status === 429 || res.status >= 500) && attempt < MAX_ATTEMPTS) {
+        await sleep(1500 * attempt);
+        continue;
+      }
+      throw new ElevenLabsTtsError(
+        `ElevenLabs returned ${res.status}: ${detail.slice(0, 300)}`,
+        res.status,
+        detail,
+      );
+    }
+
+    const buf = await res.arrayBuffer();
+    if (buf.byteLength === 0) {
+      if (attempt < MAX_ATTEMPTS) {
+        await sleep(500 * attempt);
+        continue;
+      }
+      throw new ElevenLabsTtsError('ElevenLabs returned an empty audio payload.');
+    }
+    return new Uint8Array(buf);
+  }
+
+  throw new ElevenLabsTtsError('ElevenLabs TTS failed for unknown reason.');
+}
+
+function concatBytes(chunks: Uint8Array[]): Uint8Array {
+  let total = 0;
+  for (const c of chunks) total += c.length;
+  const out = new Uint8Array(total);
+  let offset = 0;
+  for (const c of chunks) {
+    out.set(c, offset);
+    offset += c.length;
+  }
+  return out;
+}
+
+/**
+ * Generate an MP3 audiobook blob from text via ElevenLabs.
+ * Automatically chunks long transcripts; chunks are concatenated raw.
+ */
+export async function generateAudiobook(
+  text: string,
+  apiKey: string,
+  options?: TtsOptions,
+): Promise<Blob> {
+  if (!text.trim()) {
+    throw new ElevenLabsTtsError('Cannot generate audio from empty text.');
+  }
+  if (!apiKey.trim()) {
+    throw new ElevenLabsTtsError('ElevenLabs API key is required.');
+  }
+
+  const voiceId = options?.voiceId?.trim() || DEFAULT_VOICE_ID;
+  const modelId = options?.modelId?.trim() || DEFAULT_MODEL_ID;
+  const voiceSettings: Record<string, number | boolean> = {
+    stability: options?.stability ?? 0.4,
+    similarity_boost: options?.similarityBoost ?? 0.8,
+    style: options?.style ?? 0,
+    use_speaker_boost: options?.useSpeakerBoost ?? true,
+  };
+
+  const chunks = chunkText(stripStageDirections(text));
+  const audioChunks: Uint8Array[] = [];
+
+  for (let i = 0; i < chunks.length; i++) {
+    if (options?.signal?.aborted) {
+      throw new DOMException('Audio synthesis aborted.', 'AbortError');
+    }
+    options?.onProgress?.(i + 1, chunks.length);
+    const audio = await synthesizeChunk(
+      chunks[i],
+      apiKey,
+      voiceId,
+      modelId,
+      voiceSettings,
+      options?.signal,
+    );
+    audioChunks.push(audio);
+  }
+
+  const mp3 = concatBytes(audioChunks);
+  return new Blob([mp3 as unknown as BlobPart], { type: 'audio/mpeg' });
+}
+
+/**
+ * Return the raw MP3 bytes for one short line of preview text. Used by the
+ * voice picker's preview button. Falls back to the model default voice if
+ * the requested voice id is not allowed for the user's account.
+ */
+export async function generateVoicePreview(
+  apiKey: string,
+  voiceId: string,
+  text = 'ClassBuild turns a topic description into a complete university course.',
+): Promise<Blob> {
+  const audio = await synthesizeChunk(
+    text,
+    apiKey,
+    voiceId,
+    DEFAULT_MODEL_ID,
+    {
+      stability: 0.4,
+      similarity_boost: 0.8,
+      style: 0,
+      use_speaker_boost: true,
+    },
+  );
+  return new Blob([audio as unknown as BlobPart], { type: 'audio/mpeg' });
+}
diff --git a/src/services/export/imsccExporter.ts b/src/services/export/imsccExporter.ts
index 8cc604e..e1dac97 100644
--- a/src/services/export/imsccExporter.ts
+++ b/src/services/export/imsccExporter.ts
@@ -111,217 +111,448 @@ function weeklyToMcqs(d: WeeklyChallengeData): ParsedMcq[] {
   return out;
 }
 
-// ── QTI 1.2 builders (Canvas-flavored, CC 1.1 profile) ──
+// ── Deterministic Canvas-style identifiers ──
+//
+// Canvas's own exporter names every object `g` + 32 hex chars. We derive ours
+// from stable seeds so re-exporting the same course yields the same ids (which
+// makes re-imports into an existing Canvas course match up instead of
+// duplicating).
+
+function hash128(seed: string): string {
+  let h1 = 0xdeadbeef ^ seed.length;
+  let h2 = 0x41c6ce57 ^ seed.length;
+  let h3 = 0x9e3779b9;
+  let h4 = 0x85ebca6b;
+  for (let i = 0; i < seed.length; i++) {
+    const c = seed.charCodeAt(i);
+    h1 = Math.imul(h1 ^ c, 2654435761);
+    h2 = Math.imul(h2 ^ c, 1597334677);
+    h3 = Math.imul(h3 ^ c, 3266489917);
+    h4 = Math.imul(h4 ^ c, 668265263);
+  }
+  h1 = Math.imul(h1 ^ (h1 >>> 16), 2246822507) ^ Math.imul(h2 ^ (h2 >>> 13), 3266489909);
+  h2 = Math.imul(h2 ^ (h2 >>> 16), 2246822507) ^ Math.imul(h3 ^ (h3 >>> 13), 3266489909);
+  h3 = Math.imul(h3 ^ (h3 >>> 16), 2246822507) ^ Math.imul(h4 ^ (h4 >>> 13), 3266489909);
+  h4 = Math.imul(h4 ^ (h4 >>> 16), 2246822507) ^ Math.imul(h1 ^ (h1 >>> 13), 3266489909);
+  return [h1, h2, h3, h4].map((n) => (n >>> 0).toString(16).padStart(8, '0')).join('');
+}
 
-function qtiItem(id: string, mcq: ParsedMcq): string {
-  const choiceLabels = mcq.options
-    .map((opt, i) => {
-      const letter = String.fromCharCode(65 + i);
-      return `<response_label ident="${letter}"><material><mattext texttype="text/plain">${escXml(opt)}</mattext></material></response_label>`;
-    })
+function gid(seed: string): string {
+  return `g${hash128(seed)}`;
+}
+
+/** Plain text -> HTML-safe text (for composing HTML fragments). */
+function escHtml(s: string): string {
+  return String(s ?? '')
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;');
+}
+
+// ── Native Canvas QTI (CC profile + Canvas's non_cc flavour) ──
+
+const QTI_NS =
+  'xmlns="http://www.imsglobal.org/xsd/ims_qtiasiv1p2" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"';
+
+function qtiField(label: string, entry: string): string {
+  return `<qtimetadatafield><fieldlabel>${label}</fieldlabel><fieldentry>${escXml(entry)}</fieldentry></qtimetadatafield>`;
+}
+
+/**
+ * One multiple-choice item. `canvas` adds the metadata Canvas's native importer
+ * reads from non_cc_assessments (question type, points, answer ids and the
+ * back-reference to the CC-profile item).
+ */
+function qtiItem(
+  itemId: string,
+  mcq: ParsedMcq,
+  canvas?: { questionRef: string },
+): string {
+  const ids = mcq.options.map((_, i) => String(i + 1));
+  const choices = mcq.options
+    .map(
+      (opt, i) =>
+        `<response_label ident="${ids[i]}"><material><mattext texttype="text/plain">${escXml(opt)}</mattext></material></response_label>`,
+    )
     .join('');
-  const correctLetter = String.fromCharCode(65 + mcq.correctIndex);
-  const fbBlock = mcq.feedback
-    ? `<itemfeedback ident="${id}_fb"><flow_mat><material><mattext texttype="text/plain">${escXml(mcq.feedback)}</mattext></material></flow_mat></itemfeedback>`
+  const fb = mcq.feedback
+    ? `<itemfeedback ident="correct_fb"><flow_mat><material><mattext texttype="text/plain">${escXml(mcq.feedback)}</mattext></material></flow_mat></itemfeedback>` +
+      `<itemfeedback ident="general_incorrect_fb"><flow_mat><material><mattext texttype="text/plain">${escXml(mcq.feedback)}</mattext></material></flow_mat></itemfeedback>`
     : '';
-  const fbLink = mcq.feedback ? `<displayfeedback feedbacktype="Response" linkrefid="${id}_fb"/>` : '';
-  return `<item ident="${id}" title="${escXml(mcq.prompt.slice(0, 80))}">
-  <itemmetadata>
-    <qtimetadata>
-      <qtimetadatafield><fieldlabel>question_type</fieldlabel><fieldentry>multiple_choice_question</fieldentry></qtimetadatafield>
-      <qtimetadatafield><fieldlabel>points_possible</fieldlabel><fieldentry>1.0</fieldentry></qtimetadatafield>
-    </qtimetadata>
-  </itemmetadata>
+  const correctFb = mcq.feedback ? '<displayfeedback feedbacktype="Response" linkrefid="correct_fb"/>' : '';
+  const incorrectFb = mcq.feedback
+    ? '<displayfeedback feedbacktype="Response" linkrefid="general_incorrect_fb"/>'
+    : '';
+  const meta = canvas
+    ? [
+        qtiField('question_type', 'multiple_choice_question'),
+        qtiField('points_possible', '1.0'),
+        qtiField('original_answer_ids', ids.join(',')),
+        qtiField('assessment_question_identifierref', canvas.questionRef),
+      ].join('')
+    : qtiField('cc_profile', 'cc.multiple_choice.v0p1');
+  const title = escXml(mcq.prompt.replace(/\s+/g, ' ').slice(0, 80));
+  return `<item ident="${itemId}" title="${title}">
+  <itemmetadata><qtimetadata>${meta}</qtimetadata></itemmetadata>
   <presentation>
-    <material><mattext texttype="text/html">${escXml(mcq.prompt)}</mattext></material>
-    <response_lid ident="response1" rcardinality="Single">
-      <render_choice>${choiceLabels}</render_choice>
-    </response_lid>
+    <material><mattext texttype="text/html">${escXml(`<div><p>${escHtml(mcq.prompt)}</p></div>`)}</mattext></material>
+    <response_lid ident="response1" rcardinality="Single"><render_choice>${choices}</render_choice></response_lid>
   </presentation>
   <resprocessing>
     <outcomes><decvar maxvalue="100" minvalue="0" varname="SCORE" vartype="Decimal"/></outcomes>
     <respcondition continue="No">
-      <conditionvar><varequal respident="response1">${correctLetter}</varequal></conditionvar>
+      <conditionvar><varequal respident="response1">${ids[mcq.correctIndex]}</varequal></conditionvar>
       <setvar action="Set" varname="SCORE">100</setvar>
-      ${fbLink}
+      ${correctFb}
+    </respcondition>
+    <respcondition continue="Yes">
+      <conditionvar><other/></conditionvar>
+      ${incorrectFb}
     </respcondition>
   </resprocessing>
-  ${fbBlock}
+  ${fb}
 </item>`;
 }
 
-function qtiAssessment(assessmentId: string, title: string, mcqs: ParsedMcq[]): string {
-  const items = mcqs.map((m, i) => qtiItem(`${assessmentId}_Q${i + 1}`, m)).join('\n');
+/** The standard CC-profile assessment (what generic LMSes read). */
+function qtiAssessmentCc(quizId: string, title: string, mcqs: ParsedMcq[]): string {
+  const items = mcqs.map((m, i) => qtiItem(gid(`${quizId}:q:${i}`), m)).join('\n');
   return `<?xml version="1.0" encoding="UTF-8"?>
-<questestinterop xmlns="http://www.imsglobal.org/xsd/ims_qtiasiv1p2" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.imsglobal.org/xsd/ims_qtiasiv1p2 http://www.imsglobal.org/profile/cc/ccv1p1/ccv1p1_qtiasiv1p2p1_v1p0.xsd">
-  <assessment ident="${assessmentId}" title="${escXml(title)}">
+<questestinterop ${QTI_NS} xsi:schemaLocation="http://www.imsglobal.org/xsd/ims_qtiasiv1p2 http://www.imsglobal.org/profile/cc/ccv1p1/ccv1p1_qtiasiv1p2p1_v1p0.xsd">
+  <assessment ident="${quizId}" title="${escXml(title)}">
+    <qtimetadata>
+      ${qtiField('cc_profile', 'cc.exam.v0p1')}
+      ${qtiField('qmd_assessmenttype', 'Examination')}
+      ${qtiField('qmd_scoretype', 'Percentage')}
+      ${qtiField('cc_maxattempts', '1')}
+    </qtimetadata>
     <section ident="root_section">${items}</section>
   </assessment>
 </questestinterop>`;
 }
 
-// ── Manifest assembly ──
-
-interface ResourceRecord {
-  id: string;
-  type: string;
-  href: string;
-  files: string[];
-  title: string;
-}
-
-interface ChapterModule {
-  number: number;
-  title: string;
-  resources: ResourceRecord[];
+/** Canvas's native flavour (non_cc_assessments/<id>.xml.qti) — read by the native importer. */
+function qtiAssessmentNative(quizId: string, title: string, mcqs: ParsedMcq[]): string {
+  const items = mcqs
+    .map((m, i) =>
+      qtiItem(gid(`${quizId}:nq:${i}`), m, { questionRef: gid(`${quizId}:q:${i}`) }),
+    )
+    .join('\n');
+  return `<?xml version="1.0" encoding="UTF-8"?>
+<questestinterop ${QTI_NS} xsi:schemaLocation="http://www.imsglobal.org/xsd/ims_qtiasiv1p2 http://www.imsglobal.org/xsd/ims_qtiasiv1p2p1.xsd">
+  <assessment ident="${quizId}" title="${escXml(title)}">
+    <qtimetadata>${qtiField('cc_maxattempts', '1')}</qtimetadata>
+    <section ident="root_section">${items}</section>
+  </assessment>
+</questestinterop>`;
 }
 
-const QTI_RESOURCE_TYPE = 'imsqti_xmlv1p2/imscc_xmlv1p1/assessment';
-const DISCUSSION_RESOURCE_TYPE = 'imsdt_xmlv1p1';
+// ── Canvas-namespace metadata files ──
 
-// ── Discussion topic builder (IMS DT 1.1, CC 1.1 profile) ──
+const CANVAS_NS =
+  'xmlns="http://canvas.instructure.com/xsd/cccv1p0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://canvas.instructure.com/xsd/cccv1p0 https://canvas.instructure.com/xsd/cccv1p0.xsd"';
 
-function discussionTopicXml(title: string, body: string): string {
-  return `<?xml version="1.0" encoding="UTF-8"?>
-<topic xmlns="http://www.imsglobal.org/xsd/imsccv1p1/imsdt_v1p1" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.imsglobal.org/xsd/imsccv1p1/imsdt_v1p1 http://www.imsglobal.org/profile/cc/ccv1p1/ccv1p1_imsdt_v1p2_v1p0.xsd">
-  <title>${escXml(title)}</title>
-  <text texttype="text/html">${escXml(body)}</text>
-</topic>`;
-}
+type QuizKind = 'practice_quiz' | 'assignment';
 
-// ── Canvas auto-publish extensions ──
-//
-// Canvas's CC importer drops every quiz and discussion in as `unpublished` by
-// default. The instructor has to bulk-publish via Modules → ⋮ menu after
-// import. To work around that, Canvas's own exporter writes a sidecar XML
-// file alongside each quiz / discussion in the cartridge using the
-// proprietary `http://canvas.instructure.com/xsd/cccv1p0` namespace. Including
-// these sidecars with `<workflow_state>published</workflow_state>` flips the
-// imported items to published state.
-//
-// This is undocumented and may break with Canvas updates, but it's the
-// canonical workaround used by every Canvas-CC tool I've seen. If a future
-// Canvas release drops support, the cartridge still imports cleanly — just
-// reverts to the manual-publish behavior we already have.
-
-function assessmentMetaXml(
-  assessmentId: string,
-  title: string,
-  pointsPossible: number,
-): string {
+function assessmentMetaXml(opts: {
+  quizId: string;
+  title: string;
+  points: number;
+  kind: QuizKind;
+  assignmentId: string;
+  groupId: string;
+}): string {
+  const { quizId, title, points, kind, assignmentId, groupId } = opts;
+  const pts = points.toFixed(1);
+  const assignment =
+    kind === 'assignment'
+      ? `
+  <assignment identifier="${assignmentId}">
+    <title>${escXml(title)}</title>
+    <due_at/>
+    <lock_at/>
+    <unlock_at/>
+    <module_locked>false</module_locked>
+    <assignment_group_identifierref>${groupId}</assignment_group_identifierref>
+    <workflow_state>published</workflow_state>
+    <assignment_overrides>
+    </assignment_overrides>
+    <quiz_identifierref>${quizId}</quiz_identifierref>
+    <allowed_extensions></allowed_extensions>
+    <has_group_category>false</has_group_category>
+    <points_possible>${pts}</points_possible>
+    <grading_type>points</grading_type>
+    <all_day>false</all_day>
+    <submission_types>online_quiz</submission_types>
+    <position>1</position>
+    <omit_from_final_grade>false</omit_from_final_grade>
+    <hide_in_gradebook>false</hide_in_gradebook>
+    <only_visible_to_overrides>false</only_visible_to_overrides>
+    <post_policy>
+      <post_manually>false</post_manually>
+    </post_policy>
+  </assignment>
+  <assignment_group_identifierref>${groupId}</assignment_group_identifierref>`
+      : '';
   return `<?xml version="1.0" encoding="UTF-8"?>
-<quiz identifier="${escXml(assessmentId)}" xmlns="http://canvas.instructure.com/xsd/cccv1p0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://canvas.instructure.com/xsd/cccv1p0 https://canvas.instructure.com/xsd/cccv1p0.xsd">
+<quiz identifier="${quizId}" ${CANVAS_NS}>
   <title>${escXml(title)}</title>
-  <description/>
-  <quiz_type>assignment</quiz_type>
-  <points_possible>${pointsPossible.toFixed(1)}</points_possible>
-  <allowed_attempts>-1</allowed_attempts>
+  <description></description>
+  <shuffle_answers>false</shuffle_answers>
   <scoring_policy>keep_highest</scoring_policy>
+  <hide_results></hide_results>
+  <quiz_type>${kind}</quiz_type>
+  <points_possible>${pts}</points_possible>
+  <require_lockdown_browser>false</require_lockdown_browser>
+  <require_lockdown_browser_for_results>false</require_lockdown_browser_for_results>
+  <require_lockdown_browser_monitor>false</require_lockdown_browser_monitor>
+  <lockdown_browser_monitor_data/>
   <show_correct_answers>true</show_correct_answers>
-  <published>true</published>
-  <workflow_state>published</workflow_state>
+  <anonymous_submissions>false</anonymous_submissions>
+  <could_be_locked>true</could_be_locked>
+  <disable_timer_autosubmission>false</disable_timer_autosubmission>
+  <allowed_attempts>${kind === 'practice_quiz' ? '-1' : '1'}</allowed_attempts>
+  <one_question_at_a_time>false</one_question_at_a_time>
+  <cant_go_back>false</cant_go_back>
+  <available>true</available>
+  <one_time_results>false</one_time_results>
+  <show_correct_answers_last_attempt>false</show_correct_answers_last_attempt>
+  <only_visible_to_overrides>false</only_visible_to_overrides>
   <module_locked>false</module_locked>
-  <assignment_overrides/>
+  <assignment_overrides>
+  </assignment_overrides>${assignment}
 </quiz>`;
 }
 
-function topicMetaXml(topicId: string, title: string): string {
+function discussionTopicXml(title: string, bodyHtml: string): string {
   return `<?xml version="1.0" encoding="UTF-8"?>
-<topicMeta identifier="${escXml(topicId)}_meta" xmlns="http://canvas.instructure.com/xsd/cccv1p0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://canvas.instructure.com/xsd/cccv1p0 https://canvas.instructure.com/xsd/cccv1p0.xsd">
-  <topic_id>${escXml(topicId)}</topic_id>
+<topic xmlns="http://www.imsglobal.org/xsd/imsccv1p1/imsdt_v1p1" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.imsglobal.org/xsd/imsccv1p1/imsdt_v1p1  http://www.imsglobal.org/profile/cc/ccv1p1/ccv1p1_imsdt_v1p1.xsd">
   <title>${escXml(title)}</title>
+  <text texttype="text/html">${escXml(bodyHtml)}</text>
+</topic>`;
+}
+
+function topicMetaXml(metaId: string, topicId: string, title: string): string {
+  return `<?xml version="1.0" encoding="UTF-8"?>
+<topicMeta identifier="${metaId}" ${CANVAS_NS}>
+  <topic_id>${topicId}</topic_id>
+  <title>${escXml(title)}</title>
+  <position/>
   <type>topic</type>
   <discussion_type>threaded</discussion_type>
+  <has_group_category>false</has_group_category>
   <workflow_state>active</workflow_state>
-  <published>true</published>
-  <pinned>false</pinned>
-  <require_initial_post>false</require_initial_post>
+  <module_locked>false</module_locked>
+  <allow_rating>false</allow_rating>
+  <only_graders_can_rate>false</only_graders_can_rate>
+  <sort_by_rating>false</sort_by_rating>
+  <sort_order>desc</sort_order>
+  <sort_order_locked>false</sort_order_locked>
+  <expanded>false</expanded>
+  <expanded_locked>false</expanded_locked>
+  <todo_date/>
 </topicMeta>`;
 }
 
-// ── Canvas course-settings extension ──
-// Canvas-proprietary; surfaces the course title and pushes the description
-// into the Syllabus tab body (which IS visible to enrolled students, unlike
-// the LOM <description> in the manifest which only shows in Course Details).
-//
-// Canvas's own CC exporter uses a separate `syllabus.html` file rather than
-// an inline `<syllabus_body>` field, and points the resource href at the
-// `canvas_export.txt` sentinel rather than the settings XML. Matching that
-// convention is what gets the description picked up on import.
-const COURSE_SETTINGS_RESOURCE_TYPE =
-  'associatedcontent/imscc_xmlv1p1/learning-application-resource';
-
-function buildCourseSettingsXml(syllabus: Syllabus): string {
-  const courseId = `classbuild-${slug(syllabus.courseTitle) || 'course'}`;
-  return `<?xml version="1.0" encoding="UTF-8"?>
-<course identifier="${escXml(courseId)}" xmlns="http://canvas.instructure.com/xsd/cccv1p0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://canvas.instructure.com/xsd/cccv1p0 http://canvas.instructure.com/xsd/cccv1p0.xsd">
-  <title>${escXml(syllabus.courseTitle)}</title>
-  <storage_quota>524288000</storage_quota>
-  <is_public>false</is_public>
-</course>`;
-}
-
-function buildSyllabusHtml(syllabus: Syllabus): string {
-  const overview = escXml(syllabus.courseOverview || '');
-  return `<!DOCTYPE html>
-<html>
+function pageHtml(pageId: string, title: string, bodyHtml: string): string {
+  return `<html>
 <head>
-  <meta charset="UTF-8" />
-  <title>${escXml(syllabus.courseTitle)}</title>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+<title>${escXml(title)}</title>
+<meta name="identifier" content="${pageId}"/>
+<meta name="workflow_state" content="active"/>
 </head>
 <body>
-  <p>${overview}</p>
+${bodyHtml}
 </body>
 </html>`;
 }
 
-function buildManifest(
-  syllabus: Syllabus,
-  modules: ChapterModule[],
-  extraResources: ResourceRecord[],
-  settingsResources: ResourceRecord[],
-): string {
-  const courseId = `classbuild-${slug(syllabus.courseTitle) || 'course'}`;
+/**
+ * Canvas Pages can't carry <script>/<style> (its sanitizer strips them on
+ * import), so reduce the standalone reading document to its body markup. The
+ * original interactive HTML is shipped alongside as a file.
+ */
+function readingBodyHtml(html: string): string {
+  const m = html.match(/<body[^>]*>([\s\S]*?)<\/body>/i);
+  const body = m ? m[1] : html;
+  return body
+    .replace(/<script[\s\S]*?<\/script>/gi, '')
+    .replace(/<style[\s\S]*?<\/style>/gi, '')
+    .replace(/<link[^>]*>/gi, '')
+    .trim();
+}
 
-  const moduleItems = modules
-    .map((m) => {
-      const subItems = m.resources
+// ── Cartridge model ──
+
+type ModuleItemType = 'WikiPage' | 'Quizzes::Quiz' | 'DiscussionTopic' | 'Attachment';
+
+interface ModuleItem {
+  id: string;
+  type: ModuleItemType;
+  title: string;
+  /** Manifest resource this item points at. */
+  refId: string;
+}
+
+interface CourseModule {
+  id: string;
+  title: string;
+  items: ModuleItem[];
+}
+
+interface FileRecord {
+  id: string;
+  displayName: string;
+}
+
+const LEARNING_APP_TYPE = 'associatedcontent/imscc_xmlv1p1/learning-application-resource';
+const QTI_RESOURCE_TYPE = 'imsqti_xmlv1p2/imscc_xmlv1p1/assessment';
+const DISCUSSION_RESOURCE_TYPE = 'imsdt_xmlv1p1';
+
+function resourceXml(opts: {
+  id: string;
+  type: string;
+  href?: string;
+  files: string[];
+  dependencies?: string[];
+  intendeduse?: string;
+}): string {
+  const href = opts.href ? ` href="${escXml(opts.href)}"` : '';
+  const use = opts.intendeduse ? ` intendeduse="${opts.intendeduse}"` : '';
+  const files = opts.files.map((f) => `<file href="${escXml(f)}"/>`).join('');
+  const deps = (opts.dependencies ?? []).map((d) => `<dependency identifierref="${d}"/>`).join('');
+  return `<resource identifier="${opts.id}" type="${opts.type}"${href}${use}>${files}${deps}</resource>`;
+}
+
+function moduleMetaXml(modules: CourseModule[]): string {
+  const mods = modules
+    .map((m, mi) => {
+      const items = m.items
         .map(
-          (r) =>
-            `<item identifier="I_${r.id}" identifierref="${r.id}"><title>${escXml(r.title)}</title></item>`,
+          (it, ii) => `
+      <item identifier="${it.id}">
+        <content_type>${it.type}</content_type>
+        <workflow_state>active</workflow_state>
+        <title>${escXml(it.title)}</title>
+        <identifierref>${it.refId}</identifierref>
+        <position>${ii + 1}</position>
+        <new_tab/>
+        <indent>0</indent>
+        <link_settings_json>null</link_settings_json>
+      </item>`,
         )
         .join('');
-      return `<item identifier="M_${m.number}"><title>${escXml(`Chapter ${m.number}: ${m.title}`)}</title>${subItems}</item>`;
+      return `
+  <module identifier="${m.id}">
+    <title>${escXml(m.title)}</title>
+    <workflow_state>active</workflow_state>
+    <position>${mi + 1}</position>
+    <locked>false</locked>
+    <items>${items}
+    </items>
+  </module>`;
     })
     .join('');
+  return `<?xml version="1.0" encoding="UTF-8"?>
+<modules ${CANVAS_NS}>${mods}
+</modules>`;
+}
+
+function courseSettingsXml(courseId: string, syllabus: Syllabus): string {
+  const code = slug(syllabus.courseTitle).toUpperCase().slice(0, 20) || 'COURSE';
+  return `<?xml version="1.0" encoding="UTF-8"?>
+<course identifier="${courseId}" ${CANVAS_NS}>
+  <title>${escXml(syllabus.courseTitle)}</title>
+  <course_code>${escXml(code)}</course_code>
+  <start_at/>
+  <conclude_at/>
+  <allow_student_wiki_edits>false</allow_student_wiki_edits>
+  <lock_all_announcements>false</lock_all_announcements>
+  <allow_student_organized_groups>true</allow_student_organized_groups>
+  <default_view>modules</default_view>
+  <usage_rights_required>false</usage_rights_required>
+  <restrict_student_future_view>false</restrict_student_future_view>
+  <restrict_student_past_view>false</restrict_student_past_view>
+  <homeroom_course>false</homeroom_course>
+  <conditional_release>false</conditional_release>
+  <grading_standard_enabled>false</grading_standard_enabled>
+  <storage_quota>500000000</storage_quota>
+  <default_post_policy>
+    <post_manually>false</post_manually>
+  </default_post_policy>
+</course>`;
+}
 
-  const extraItems = extraResources
+function assignmentGroupsXml(groupId: string): string {
+  return `<?xml version="1.0" encoding="UTF-8"?>
+<assignmentGroups ${CANVAS_NS}>
+  <assignmentGroup identifier="${groupId}">
+    <title>Assignments</title>
+    <position>1</position>
+    <group_weight>0.0</group_weight>
+  </assignmentGroup>
+</assignmentGroups>`;
+}
+
+function filesMetaXml(files: FileRecord[]): string {
+  const entries = files
     .map(
-      (r) =>
-        `<item identifier="I_${r.id}" identifierref="${r.id}"><title>${escXml(r.title)}</title></item>`,
+      (f) => `
+    <file identifier="${f.id}">
+      <display_name>${escXml(f.displayName)}</display_name>
+      <category>uncategorized</category>
+    </file>`,
     )
     .join('');
+  return `<?xml version="1.0" encoding="UTF-8"?>
+<fileMeta ${CANVAS_NS}>
+  <files>${entries}
+  </files>
+</fileMeta>`;
+}
 
-  // settingsResources intentionally do NOT appear in the organization tree —
-  // they are LMS-side configuration, not module content.
-  const allResources = [
-    ...modules.flatMap((m) => m.resources),
-    ...extraResources,
-    ...settingsResources,
-  ];
-  const resourceXml = allResources
-    .map((r) => {
-      const files = r.files.map((f) => `<file href="${escXml(f)}"/>`).join('');
-      return `<resource identifier="${r.id}" type="${r.type}" href="${escXml(r.href)}">${files}</resource>`;
+function syllabusHtml(syllabus: Syllabus): string {
+  const overview = syllabus.courseOverview
+    ? `<p>${escHtml(syllabus.courseOverview)}</p>`
+    : '';
+  const outline = syllabus.chapters.length
+    ? `<h3>Course outline</h3><ol>${syllabus.chapters
+        .map((c) => `<li>${escHtml(c.title)}</li>`)
+        .join('')}</ol>`
+    : '';
+  return `<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+<title>Syllabus</title>
+</head>
+<body>
+<h2>${escHtml(syllabus.courseTitle)}</h2>${overview}${outline}
+</body>
+</html>`;
+}
+
+function manifestXml(opts: {
+  courseId: string;
+  settingsId: string;
+  syllabus: Syllabus;
+  modules: CourseModule[];
+  resources: string[];
+}): string {
+  const { courseId, syllabus, modules, resources } = opts;
+  const orgItems = modules
+    .map((m) => {
+      const kids = m.items
+        .map(
+          (it) =>
+            `<item identifier="${it.id}" identifierref="${it.refId}"><title>${escXml(it.title)}</title></item>`,
+        )
+        .join('');
+      return `<item identifier="${m.id}"><title>${escXml(m.title)}</title>${kids}</item>`;
     })
     .join('');
-
   return `<?xml version="1.0" encoding="UTF-8"?>
-<manifest identifier="${escXml(courseId)}"
-  xmlns="http://www.imsglobal.org/xsd/imsccv1p1/imscp_v1p1"
-  xmlns:lomimscc="http://ltsc.ieee.org/xsd/imsccv1p1/LOM/manifest"
-  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
-  xsi:schemaLocation="http://www.imsglobal.org/xsd/imsccv1p1/imscp_v1p1 http://www.imsglobal.org/profile/cc/ccv1p1/ccv1p1_imscp_v1p2_v1p0.xsd http://ltsc.ieee.org/xsd/imsccv1p1/LOM/manifest http://www.imsglobal.org/profile/cc/ccv1p1/LOM/ccv1p1_lommanifest_v1p0.xsd">
+<manifest identifier="${courseId}" xmlns="http://www.imsglobal.org/xsd/imsccv1p1/imscp_v1p1" xmlns:lom="http://ltsc.ieee.org/xsd/imsccv1p1/LOM/resource" xmlns:lomimscc="http://ltsc.ieee.org/xsd/imsccv1p1/LOM/manifest" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.imsglobal.org/xsd/imsccv1p1/imscp_v1p1 http://www.imsglobal.org/profile/cc/ccv1p1/ccv1p1_imscp_v1p2_v1p0.xsd http://ltsc.ieee.org/xsd/imsccv1p1/LOM/resource http://www.imsglobal.org/profile/cc/ccv1p1/LOM/ccv1p1_lomresource_v1p0.xsd http://ltsc.ieee.org/xsd/imsccv1p1/LOM/manifest http://www.imsglobal.org/profile/cc/ccv1p1/LOM/ccv1p1_lommanifest_v1p0.xsd">
   <metadata>
     <schema>IMS Common Cartridge</schema>
     <schemaversion>1.1.0</schemaversion>
@@ -333,11 +564,11 @@ function buildManifest(
     </lomimscc:lom>
   </metadata>
   <organizations>
-    <organization identifier="O_1" structure="rooted-hierarchy">
-      <item identifier="LearningModules">${moduleItems}${extraItems}</item>
+    <organization identifier="org_1" structure="rooted-hierarchy">
+      <item identifier="LearningModules">${orgItems}</item>
     </organization>
   </organizations>
-  <resources>${resourceXml}</resources>
+  <resources>${resources.join('')}</resources>
 </manifest>`;
 }
 
@@ -345,16 +576,37 @@ function buildManifest(
 
 export interface ImsccOptions {
   themeId?: string;
+  /**
+   * OpenAI key. The slide deck is image-driven (one gpt-image-2 render per
+   * slide), so slides.pptx is only bundled when every slide already has a
+   * rendered image — an export click must never silently spend image credits.
+   */
+  openaiApiKey?: string;
+  /**
+   * Explicit opt-in to render any missing slide images (spends OpenAI image
+   * credits) so the decks can be bundled. Requires openaiApiKey. Rendered
+   * images are reported through onSlideRendered so callers can cache them.
+   */
+  renderMissingSlides?: boolean;
+  onSlideRendered?: (chapterNum: number, slideIndex: number, dataUri: string) => void;
+  onSlideProgress?: (chapterNum: number, current: number, total: number, phase: string) => void;
   curriculumCsv?: string;
 }
 
 /**
- * Bundle a generated course into a Common Cartridge 1.1 (.imscc) Blob suitable
- * for import into Canvas LMS. Each chapter becomes a learning module containing
- * the reading (HTML), practice quiz (QTI + interactive HTML), in-class quiz
- * (QTI), weekly challenge (QTI MCQ subset + interactive HTML), slides (PPTX),
- * and infographic (JPG). Audio is skipped because blob URLs are non-persistent
- * — same constraint as the existing ZIP exporter.
+ * Bundle a generated course into a **native Canvas course export** (a Common
+ * Cartridge 1.1 package in the exact shape Canvas's own exporter writes), so
+ * Canvas rebuilds the course faithfully on import:
+ *
+ *  - one published Module per chapter, in order;
+ *  - the reading as a Canvas Page (plus the original interactive HTML as a file);
+ *  - Practice quiz (ungraded practice quiz), In-class quiz and Weekly challenge
+ *    (graded, in an "Assignments" group), all published, with correct answers;
+ *  - discussions (published), slides / infographic / teaching pack as files;
+ *  - the course title and a Syllabus page.
+ *
+ * Shape verified against Canvas's own exporter and an import into a live Canvas.
+ * Audio is skipped because blob URLs are non-persistent.
  */
 export async function assembleImscc(
   syllabus: Syllabus,
@@ -364,132 +616,195 @@ export async function assembleImscc(
   const { default: JSZip } = await import('jszip');
   const zip = new JSZip();
 
-  const modules: ChapterModule[] = [];
+  const courseId = gid(`course:${slug(syllabus.courseTitle) || 'course'}`);
+  const settingsId = gid(`${courseId}:settings`);
+  const groupId = gid(`${courseId}:assignment-group`);
+
+  const modules: CourseModule[] = [];
+  const resources: string[] = [];
+  const fileRecords: FileRecord[] = [];
+
+  /** Add a binary/text file as a web_resources download + module item. */
+  const addFile = (
+    mod: CourseModule,
+    seed: string,
+    folder: string,
+    fileName: string,
+    data: Blob | string,
+    itemTitle: string,
+    options?: { base64?: boolean },
+  ) => {
+    const id = gid(`${courseId}:file:${seed}`);
+    const href = `web_resources/${folder}/${fileName}`;
+    zip.file(href, data, options?.base64 ? { base64: true } : undefined);
+    resources.push(resourceXml({ id, type: 'webcontent', href, files: [href] }));
+    fileRecords.push({ id, displayName: fileName });
+    mod.items.push({ id: gid(`${id}:item`), type: 'Attachment', title: itemTitle, refId: id });
+  };
+
+  const addQuiz = (
+    mod: CourseModule,
+    seed: string,
+    title: string,
+    mcqs: ParsedMcq[],
+    kind: QuizKind,
+  ) => {
+    const quizId = gid(`${courseId}:quiz:${seed}`);
+    const metaResId = gid(`${quizId}:meta`);
+    const qtiPath = `${quizId}/assessment_qti.xml`;
+    const metaPath = `${quizId}/assessment_meta.xml`;
+    const nativePath = `non_cc_assessments/${quizId}.xml.qti`;
+    zip.file(qtiPath, qtiAssessmentCc(quizId, title, mcqs));
+    zip.file(nativePath, qtiAssessmentNative(quizId, title, mcqs));
+    zip.file(
+      metaPath,
+      assessmentMetaXml({
+        quizId,
+        title,
+        points: mcqs.length,
+        kind,
+        assignmentId: gid(`${quizId}:assignment`),
+        groupId,
+      }),
+    );
+    resources.push(
+      resourceXml({ id: quizId, type: QTI_RESOURCE_TYPE, files: [qtiPath], dependencies: [metaResId] }),
+      resourceXml({
+        id: metaResId,
+        type: LEARNING_APP_TYPE,
+        href: metaPath,
+        files: [metaPath, nativePath],
+      }),
+    );
+    mod.items.push({ id: gid(`${quizId}:item`), type: 'Quizzes::Quiz', title, refId: quizId });
+  };
 
   for (const ch of chapters) {
     const folder = `chapter-${ch.number}-${slug(ch.title)}`;
-    const mod: ChapterModule = { number: ch.number, title: ch.title, resources: [] };
+    const mod: CourseModule = {
+      id: gid(`${courseId}:module:${ch.number}`),
+      title: `Chapter ${ch.number}: ${ch.title}`,
+      items: [],
+    };
 
-    // 1. Reading HTML
+    // 1. Reading → native Canvas Page. (The standalone document's <style> and
+    // <script> can't survive Canvas's sanitizer, so the page carries the body
+    // markup; the full interactive HTML is attached further down.)
     if (ch.htmlContent) {
-      const href = `${folder}/reading.html`;
-      zip.file(href, ch.htmlContent);
-      mod.resources.push({
-        id: `R_${ch.number}_reading`,
-        type: 'webcontent',
-        href,
-        files: [href],
-        title: `${ch.title} — Reading`,
-      });
+      const pageId = gid(`${courseId}:page:${ch.number}:reading`);
+      const title = `${ch.title} — Reading`;
+      const href = `wiki_content/${folder}-reading.html`;
+      zip.file(href, pageHtml(pageId, title, readingBodyHtml(ch.htmlContent)));
+      resources.push(resourceXml({ id: pageId, type: 'webcontent', href, files: [href] }));
+      mod.items.push({ id: gid(`${pageId}:item`), type: 'WikiPage', title, refId: pageId });
     }
 
-    // 2. Practice quiz → QTI only. The interactive HTML version is a single-
-    // page app and Canvas's Page sanitizer strips its scripts on import, so
-    // shipping it as a webcontent resource produces a broken page. The
-    // standalone "Publish Course" HTML viewer is the right home for the
-    // interactive UX.
+    // 2. Practice quiz → ungraded Practice Quiz.
     if (ch.practiceQuizData) {
       const mcqs = parsePracticeQuizMarkdown(ch.practiceQuizData);
       if (mcqs.length > 0) {
-        const assessmentId = `A_${ch.number}_practice`;
-        const quizTitle = `${ch.title} — Practice Quiz`;
-        const xmlPath = `${folder}/practice-quiz.xml`;
-        const metaPath = `${folder}/practice-quiz-meta.xml`;
-        zip.file(xmlPath, qtiAssessment(assessmentId, quizTitle, mcqs));
-        zip.file(metaPath, assessmentMetaXml(assessmentId, quizTitle, mcqs.length));
-        mod.resources.push({
-          id: `R_${ch.number}_practice_qti`,
-          type: QTI_RESOURCE_TYPE,
-          href: xmlPath,
-          files: [xmlPath, metaPath],
-          title: quizTitle,
-        });
+        addQuiz(mod, `${ch.number}:practice`, `${ch.title} — Practice Quiz`, mcqs, 'practice_quiz');
       }
     }
 
-    // 3. In-class quiz → QTI
+    // 3. In-class quiz → graded quiz.
     if (ch.inClassQuizData && ch.inClassQuizData.length > 0) {
-      const mcqs = ch.inClassQuizData.map(inClassToMcq);
-      const assessmentId = `A_${ch.number}_inclass`;
-      const quizTitle = `${ch.title} — In-Class Quiz`;
-      const xmlPath = `${folder}/in-class-quiz.xml`;
-      const metaPath = `${folder}/in-class-quiz-meta.xml`;
-      zip.file(xmlPath, qtiAssessment(assessmentId, quizTitle, mcqs));
-      zip.file(metaPath, assessmentMetaXml(assessmentId, quizTitle, mcqs.length));
-      mod.resources.push({
-        id: `R_${ch.number}_inclass_qti`,
-        type: QTI_RESOURCE_TYPE,
-        href: xmlPath,
-        files: [xmlPath, metaPath],
-        title: quizTitle,
-      });
+      addQuiz(
+        mod,
+        `${ch.number}:inclass`,
+        `${ch.title} — In-Class Quiz`,
+        ch.inClassQuizData.map(inClassToMcq),
+        'assignment',
+      );
     }
 
-    // 4. Weekly challenge → QTI only (MCQ subset; non-MCQ types are skipped).
-    // Same Canvas-Page-sanitizer constraint as the practice quiz — the rich
-    // interactive HTML version cannot survive import as a Page.
+    // 4. Weekly challenge → graded quiz (MCQ subset; other types are skipped).
     if (ch.weeklyChallengeData) {
       const mcqs = weeklyToMcqs(ch.weeklyChallengeData);
       if (mcqs.length > 0) {
-        const assessmentId = `A_${ch.number}_challenge`;
-        const quizTitle = `Week ${ch.number} Challenge — ${ch.title}`;
-        const xmlPath = `${folder}/weekly-challenge.xml`;
-        const metaPath = `${folder}/weekly-challenge-meta.xml`;
-        zip.file(xmlPath, qtiAssessment(assessmentId, quizTitle, mcqs));
-        zip.file(metaPath, assessmentMetaXml(assessmentId, quizTitle, mcqs.length));
-        mod.resources.push({
-          id: `R_${ch.number}_challenge_qti`,
-          type: QTI_RESOURCE_TYPE,
-          href: xmlPath,
-          files: [xmlPath, metaPath],
-          title: quizTitle,
-        });
+        addQuiz(
+          mod,
+          `${ch.number}:challenge`,
+          `Week ${ch.number} Challenge — ${ch.title}`,
+          mcqs,
+          'assignment',
+        );
       }
     }
 
-    // 5. Slides PPTX (file resource — Canvas attaches as a downloadable file)
-    if (ch.slidesJson && ch.slidesJson.length > 0) {
+    // 5. Discussion prompts → native Canvas Discussions (one per prompt).
+    if (ch.discussionData && ch.discussionData.length > 0) {
+      ch.discussionData.forEach((d, i) => {
+        const idx = i + 1;
+        const title = `${ch.title} — Discussion ${idx}: ${d.hook}`;
+        const body = `<p><strong>[${escHtml(d.hook)}]</strong></p><p>${escHtml(d.prompt)}</p>`;
+        const topicId = gid(`${courseId}:topic:${ch.number}:${idx}`);
+        const metaId = gid(`${topicId}:meta`);
+        zip.file(`${topicId}.xml`, discussionTopicXml(title, body));
+        zip.file(`${metaId}.xml`, topicMetaXml(metaId, topicId, title));
+        resources.push(
+          resourceXml({
+            id: topicId,
+            type: DISCUSSION_RESOURCE_TYPE,
+            files: [`${topicId}.xml`],
+            dependencies: [metaId],
+          }),
+          resourceXml({
+            id: metaId,
+            type: LEARNING_APP_TYPE,
+            href: `${metaId}.xml`,
+            files: [`${metaId}.xml`],
+          }),
+        );
+        mod.items.push({ id: gid(`${topicId}:item`), type: 'DiscussionTopic', title, refId: topicId });
+      });
+    }
+
+    // 6. Slides PPTX. Only when every imagePrompt slide is already rendered this
+    // session (rendered images aren't persisted across reloads) — see openaiApiKey.
+    const slidesFullyRendered =
+      !!ch.slidesJson &&
+      ch.slidesJson.length > 0 &&
+      ch.slidesJson.every((sl) => !sl.imagePrompt?.trim() || !!sl.imageDataUri);
+    const includeSlides = slidesFullyRendered || (opts.renderMissingSlides && !!ch.slidesJson?.length);
+    if (includeSlides && opts.openaiApiKey?.trim() && ch.slidesJson) {
       try {
         const { generatePptx } = await import('./pptxExporter');
-        const pptxBlob = await generatePptx(
+        const preRendered: Record<number, string> = {};
+        ch.slidesJson.forEach((sl, i) => {
+          if (sl.imageDataUri) preRendered[i] = sl.imageDataUri;
+        });
+        const { blob: pptxBlob } = await generatePptx(
           ch.slidesJson,
           syllabus.courseTitle,
           ch.title,
           opts.themeId,
+          opts.openaiApiKey,
+          {
+            preRendered,
+            onSlideRendered: (i, dataUri) => opts.onSlideRendered?.(ch.number, i, dataUri),
+            onProgress: (current, total, phase) =>
+              opts.onSlideProgress?.(ch.number, current, total, phase),
+          },
         );
-        const href = `${folder}/slides.pptx`;
-        zip.file(href, pptxBlob);
-        mod.resources.push({
-          id: `R_${ch.number}_slides`,
-          type: 'webcontent',
-          href,
-          files: [href],
-          title: `${ch.title} — Slides`,
-        });
+        addFile(mod, `${ch.number}:slides`, folder, 'slides.pptx', pptxBlob, `${ch.title} — Slides`);
       } catch {
         /* pptx generation failed */
       }
     }
 
-    // 6. Infographic
+    // 7. Infographic.
     if (ch.infographicDataUri) {
       const m = ch.infographicDataUri.match(/^data:[^;]+;base64,(.+)$/);
       if (m) {
-        const href = `${folder}/infographic.jpg`;
-        zip.file(href, m[1], { base64: true });
-        mod.resources.push({
-          id: `R_${ch.number}_infographic`,
-          type: 'webcontent',
-          href,
-          files: [href],
-          title: `${ch.title} — Infographic`,
+        addFile(mod, `${ch.number}:infographic`, folder, 'infographic.jpg', m[1], `${ch.title} — Infographic`, {
+          base64: true,
         });
       }
     }
 
-    // 7. Teaching resources DOCX (discussions + activities, when present).
-    // Kept alongside native discussions because the DOCX also captures the
-    // step-by-step activity guides that don't have a native Canvas analogue.
+    // 8. Teaching resources DOCX (kept alongside the native discussions because
+    // it also carries the step-by-step activity guides, which have no native analogue).
     const hasTeachingContent =
       (ch.discussionData && ch.discussionData.length > 0) ||
       (ch.activityData && ch.activityData.length > 0);
@@ -498,81 +813,87 @@ export async function assembleImscc(
         const { generateTeachingResourcesDocx } = await import('./teachingResourcesDocx');
         const docxBlob = await generateTeachingResourcesDocx(ch, syllabus);
         if (docxBlob) {
-          const href = `${folder}/teaching-resources.docx`;
-          zip.file(href, docxBlob);
-          mod.resources.push({
-            id: `R_${ch.number}_teaching`,
-            type: 'webcontent',
-            href,
-            files: [href],
-            title: `${ch.title} — Teaching Resources`,
-          });
+          addFile(
+            mod,
+            `${ch.number}:teaching`,
+            folder,
+            'teaching-resources.docx',
+            docxBlob,
+            `${ch.title} — Teaching Resources`,
+          );
         }
       } catch {
         /* docx generation failed */
       }
     }
 
-    // 8. Discussion topics → native Canvas Discussions (one per prompt).
-    if (ch.discussionData && ch.discussionData.length > 0) {
-      ch.discussionData.forEach((d, i) => {
-        const idx = i + 1;
-        const title = `${ch.title} — Discussion ${idx}: ${d.hook}`;
-        const body = `<p><strong>[${d.hook}]</strong></p><p>${d.prompt}</p>`;
-        const topicId = `R_${ch.number}_disc_${idx}`;
-        const href = `${folder}/discussions/disc-${idx}.xml`;
-        const metaHref = `${folder}/discussions/disc-${idx}-meta.xml`;
-        zip.file(href, discussionTopicXml(title, body));
-        zip.file(metaHref, topicMetaXml(topicId, title));
-        mod.resources.push({
-          id: topicId,
-          type: DISCUSSION_RESOURCE_TYPE,
-          href,
-          files: [href, metaHref],
-          title,
-        });
-      });
+    // 9. The original interactive reading, for anyone who wants the full-fidelity
+    // version (Canvas Pages drop scripts and styles).
+    if (ch.htmlContent) {
+      addFile(
+        mod,
+        `${ch.number}:reading-interactive`,
+        folder,
+        'reading-interactive.html',
+        ch.htmlContent,
+        `${ch.title} — Reading (interactive HTML, download)`,
+      );
     }
 
     modules.push(mod);
   }
 
-  const extraResources: ResourceRecord[] = [];
+  // Course-level resources.
   if (opts.curriculumCsv) {
-    const href = 'curriculum-alignment-matrix.csv';
-    zip.file(href, opts.curriculumCsv);
-    extraResources.push({
-      id: 'R_curriculum',
-      type: 'webcontent',
-      href,
-      files: [href],
-      title: 'Curriculum Alignment Matrix',
-    });
-  }
-
-  const settingsResources: ResourceRecord[] = [];
-  if (syllabus.courseOverview) {
-    const settingsHref = 'course_settings/course_settings.xml';
-    const sentinelHref = 'course_settings/canvas_export.txt';
-    const syllabusHref = 'course_settings/syllabus.html';
-    zip.file(settingsHref, buildCourseSettingsXml(syllabus));
-    zip.file(syllabusHref, buildSyllabusHtml(syllabus));
-    zip.file(
-      sentinelHref,
-      'Generated by CanvasClassBuild — Common Cartridge export for Instructure Canvas.',
+    const mod: CourseModule = {
+      id: gid(`${courseId}:module:resources`),
+      title: 'Course resources',
+      items: [],
+    };
+    addFile(
+      mod,
+      'curriculum',
+      'course',
+      'curriculum-alignment-matrix.csv',
+      opts.curriculumCsv,
+      'Curriculum Alignment Matrix',
     );
-    // Resource href points at the sentinel — matches Canvas's own CC export
-    // convention. Files list bundles all three so they're included in the ZIP.
-    settingsResources.push({
-      id: 'course_settings',
-      type: COURSE_SETTINGS_RESOURCE_TYPE,
-      href: sentinelHref,
-      files: [settingsHref, syllabusHref, sentinelHref],
-      title: 'Course Settings',
-    });
+    modules.push(mod);
   }
 
-  zip.file('imsmanifest.xml', buildManifest(syllabus, modules, extraResources, settingsResources));
+  // Course settings (native shape — same files and resource layout as Canvas's exporter).
+  zip.file('course_settings/course_settings.xml', courseSettingsXml(courseId, syllabus));
+  zip.file('course_settings/module_meta.xml', moduleMetaXml(modules));
+  zip.file('course_settings/assignment_groups.xml', assignmentGroupsXml(groupId));
+  zip.file('course_settings/files_meta.xml', filesMetaXml(fileRecords));
+  zip.file('course_settings/syllabus.html', syllabusHtml(syllabus));
+  zip.file(
+    'course_settings/canvas_export.txt',
+    'Generated by CanvasClassBuild — native Canvas course export (Common Cartridge 1.1).',
+  );
+  resources.unshift(
+    resourceXml({
+      id: `${settingsId}_syllabus`,
+      type: LEARNING_APP_TYPE,
+      href: 'course_settings/syllabus.html',
+      intendeduse: 'syllabus',
+      files: ['course_settings/syllabus.html'],
+    }),
+    resourceXml({
+      id: settingsId,
+      type: LEARNING_APP_TYPE,
+      href: 'course_settings/canvas_export.txt',
+      files: [
+        'course_settings/course_settings.xml',
+        'course_settings/module_meta.xml',
+        'course_settings/assignment_groups.xml',
+        'course_settings/files_meta.xml',
+        'course_settings/canvas_export.txt',
+      ],
+    }),
+  );
+
+  zip.file('imsmanifest.xml', manifestXml({ courseId, settingsId, syllabus, modules, resources }));
 
   return zip.generateAsync({ type: 'blob', compression: 'DEFLATE' });
 }
diff --git a/src/services/export/pptxExporter.ts b/src/services/export/pptxExporter.ts
index ff583f0..00c6d74 100644
--- a/src/services/export/pptxExporter.ts
+++ b/src/services/export/pptxExporter.ts
@@ -1,516 +1,175 @@
 import PptxGenJS from 'pptxgenjs';
 import type { SlideData } from '../../types/course';
-import { getTheme } from '../../themes';
-
-// Strip '#' prefix from hex color for pptxgenjs
-function hex(color: string): string {
-  return color.replace(/^#/, '');
-}
-
-// Build PPTX theme constants from a visual theme
-function buildPptxTheme(themeId?: string) {
-  const t = getTheme(themeId);
-  return {
-    bg: hex(t.pageBg),
-    title: hex(t.textPrimary),
-    body: hex(t.textSecondary),
-    accent: hex(t.accent),
-    accentLight: hex(t.accentLight),
-    muted: hex(t.textMuted),
-    cardBg: hex(t.cardBg),
-    amber: hex(t.warmAccent),
-    font: 'Segoe UI',
-  };
-}
-
-// Default theme for module-level references
-let THEME = buildPptxTheme();
-
-/**
- * Adds a slide number label in the bottom-right corner.
- */
-function addSlideNumber(slide: PptxGenJS.Slide, num: number, total: number): void {
-  slide.addText(`${num} / ${total}`, {
-    x: 8.2,
-    y: 5.2,
-    w: 1.5,
-    h: 0.3,
-    fontSize: 9,
-    color: THEME.muted,
-    fontFace: THEME.font,
-    align: 'right',
-  });
-}
-
-/**
- * Title slide: large centered chapter title with hook subtitle.
- */
-function buildTitleSlide(
-  pptx: PptxGenJS,
-  slideData: SlideData,
-  courseTitle: string,
-  slideNum: number,
-  totalSlides: number,
-): void {
-  const slide = pptx.addSlide();
-  slide.background = { fill: THEME.bg };
-
-  // Chapter title
-  slide.addText(slideData.title, {
-    x: 1.0,
-    y: 1.2,
-    w: 8.0,
-    h: 1.8,
-    fontSize: 36,
-    bold: true,
-    color: THEME.title,
-    fontFace: THEME.font,
-    align: 'center',
-    valign: 'bottom',
-  });
-
-  // Accent bar
-  slide.addShape('rect', {
-    x: 4.0,
-    y: 3.2,
-    w: 2.0,
-    h: 0.06,
-    fill: { color: THEME.accent },
-    rectRadius: 0.03,
-  });
-
-  // Hook / subtitle
-  if (slideData.bodyText) {
-    slide.addText(slideData.bodyText, {
-      x: 1.0,
-      y: 3.5,
-      w: 8.0,
-      h: 0.8,
-      fontSize: 16,
-      italic: true,
-      color: THEME.body,
-      fontFace: THEME.font,
-      align: 'center',
-      valign: 'top',
-    });
-  }
-
-  // Course name
-  slide.addText(courseTitle, {
-    x: 1.0,
-    y: 4.6,
-    w: 8.0,
-    h: 0.5,
-    fontSize: 12,
-    color: THEME.muted,
-    fontFace: THEME.font,
-    align: 'center',
-  });
-
-  if (slideData.speakerNotes) slide.addNotes(slideData.speakerNotes);
-  addSlideNumber(slide, slideNum, totalSlides);
-}
-
-/**
- * Section divider: large bold title with subtle subtitle.
- */
-function buildSectionSlide(
-  pptx: PptxGenJS,
-  slideData: SlideData,
-  slideNum: number,
-  totalSlides: number,
-): void {
-  const slide = pptx.addSlide();
-  slide.background = { fill: THEME.cardBg };
-
-  // Left accent bar
-  slide.addShape('rect', {
-    x: 0.6,
-    y: 1.5,
-    w: 0.08,
-    h: 2.5,
-    fill: { color: THEME.accent },
-    rectRadius: 0.04,
-  });
-
-  // Section title
-  slide.addText(slideData.title, {
-    x: 1.1,
-    y: 1.5,
-    w: 8.0,
-    h: 1.4,
-    fontSize: 32,
-    bold: true,
-    color: THEME.title,
-    fontFace: THEME.font,
-    align: 'left',
-    valign: 'middle',
-  });
-
-  // Section subtitle
-  if (slideData.bodyText) {
-    slide.addText(slideData.bodyText, {
-      x: 1.1,
-      y: 3.0,
-      w: 8.0,
-      h: 0.8,
-      fontSize: 16,
-      color: THEME.body,
-      fontFace: THEME.font,
-      align: 'left',
-      valign: 'top',
-    });
-  }
-
-  if (slideData.speakerNotes) slide.addNotes(slideData.speakerNotes);
-  addSlideNumber(slide, slideNum, totalSlides);
-}
+import { generateImageWithRetry } from '../openai/imageGen';
+import { withSafetyClause } from '../openai/safetyClause';
 
 /**
- * Content slide: title + bullet points.
+ * Slide generation now renders each slide as a single 4K (3840×2160)
+ * editorial image via gpt-image-2 — the image carries the slide's title,
+ * key text, and visuals together. pptxgenjs is used as the container: each
+ * slide is a 16:9 frame with the rendered image filling the full bleed, and
+ * the AI-written speaker notes attached natively.
+ *
+ * The slides themselves contain no native PowerPoint text — the image *is*
+ * the slide. Speaker notes remain native pptx notes so the presenter can
+ * read them in slide-show view.
  */
-function buildContentSlide(
-  pptx: PptxGenJS,
-  slideData: SlideData,
-  slideNum: number,
-  totalSlides: number,
-): void {
-  const slide = pptx.addSlide();
-  slide.background = { fill: THEME.bg };
-
-  // Title
-  slide.addText(slideData.title, {
-    x: 0.7,
-    y: 0.3,
-    w: 8.6,
-    h: 0.8,
-    fontSize: 24,
-    bold: true,
-    color: THEME.title,
-    fontFace: THEME.font,
-    align: 'left',
-    valign: 'middle',
-  });
-
-  // Accent underline
-  slide.addShape('rect', {
-    x: 0.7,
-    y: 1.15,
-    w: 8.6,
-    h: 0.025,
-    fill: { color: THEME.accent },
-  });
 
-  // Bullets
-  if (slideData.bullets && slideData.bullets.length > 0) {
-    const bulletRows: PptxGenJS.TextProps[] = slideData.bullets.map((bullet) => ({
-      text: bullet,
-      options: {
-        fontSize: 16,
-        color: THEME.body,
-        fontFace: THEME.font,
-        bullet: {
-          code: '25CF',
-          color: THEME.accent,
-          fontSize: 10,
-        },
-        paraSpaceBefore: 8,
-        paraSpaceAfter: 4,
-        lineSpacing: 22,
-      },
-    }));
-
-    slide.addText(bulletRows, {
-      x: 0.9,
-      y: 1.4,
-      w: 8.2,
-      h: 3.8,
-      valign: 'top',
-    });
-  }
-
-  if (slideData.speakerNotes) slide.addNotes(slideData.speakerNotes);
-  addSlideNumber(slide, slideNum, totalSlides);
+export type SlideImageProgress = (slideIndex: number, total: number, phase: 'rendering' | 'packing') => void;
+
+interface GeneratePptxOptions {
+  /** Image quality for each rendered slide. Defaults to 'high'. */
+  imageQuality?: 'low' | 'medium' | 'high' | 'auto';
+  /** Pixel size requested from gpt-image-2 per slide. Defaults to 4K landscape. */
+  imageSize?: string;
+  /**
+   * Number of gpt-image-2 requests in flight at once. Defaults to 6. The
+   * Image API tolerates concurrent calls well; setting too high risks
+   * hitting per-minute rate limits, but the retry layer handles that
+   * gracefully with exponential backoff.
+   */
+  concurrency?: number;
+  /** Notified for every step so the UI can show progress. */
+  onProgress?: SlideImageProgress;
+  /**
+   * Fires as soon as each slide image is rendered. Callers use this to
+   * persist `imageDataUri` to the course store incrementally — so navigating
+   * away mid-render (or a crash) doesn't lose finished work.
+   */
+  onSlideRendered?: (slideIndex: number, dataUri: string) => void;
+  /**
+   * If the caller already has rendered image data URIs (e.g. cached from a
+   * prior render), pass them here keyed by slide index — they're used as-is
+   * and OpenAI isn't called for those slides.
+   */
+  preRendered?: Record<number, string>;
 }
 
 /**
- * Big-idea slide: single large statement centered on screen.
+ * Render every slide image via gpt-image-2 (or reuse cached ones), then pack
+ * everything into a .pptx where each slide is a full-bleed 16:9 image with
+ * the AI-written notes attached.
  */
-function buildBigIdeaSlide(
-  pptx: PptxGenJS,
-  slideData: SlideData,
-  slideNum: number,
-  totalSlides: number,
-): void {
-  const slide = pptx.addSlide();
-  slide.background = { fill: THEME.bg };
-
-  // Small label at top
-  slide.addText(slideData.title, {
-    x: 1.0,
-    y: 0.8,
-    w: 8.0,
-    h: 0.5,
-    fontSize: 12,
-    bold: true,
-    color: THEME.accent,
-    fontFace: THEME.font,
-    align: 'center',
-    charSpacing: 3,
-  });
-
-  // Big statement
-  if (slideData.bodyText) {
-    slide.addText(slideData.bodyText, {
-      x: 1.0,
-      y: 1.6,
-      w: 8.0,
-      h: 2.8,
-      fontSize: 28,
-      bold: true,
-      color: THEME.title,
-      fontFace: THEME.font,
-      align: 'center',
-      valign: 'middle',
-      lineSpacing: 36,
-    });
-  }
-
-  // Bottom accent dots
-  for (let i = 0; i < 3; i++) {
-    slide.addShape('ellipse', {
-      x: 4.7 + i * 0.25,
-      y: 4.8,
-      w: 0.1,
-      h: 0.1,
-      fill: { color: i === 1 ? THEME.accent : THEME.muted },
-    });
+export async function generatePptx(
+  slides: SlideData[],
+  courseTitle: string,
+  chapterTitle: string,
+  _themeId: string | undefined,
+  apiKey: string,
+  options: GeneratePptxOptions = {},
+): Promise<{ blob: Blob; renderedImages: Record<number, string> }> {
+  if (!slides || slides.length === 0) {
+    throw new Error('Cannot build a deck from zero slides.');
   }
-
-  if (slideData.speakerNotes) slide.addNotes(slideData.speakerNotes);
-  addSlideNumber(slide, slideNum, totalSlides);
-}
-
-/**
- * Quote slide: large italic quote with attribution.
- */
-function buildQuoteSlide(
-  pptx: PptxGenJS,
-  slideData: SlideData,
-  slideNum: number,
-  totalSlides: number,
-): void {
-  const slide = pptx.addSlide();
-  slide.background = { fill: THEME.bg };
-
-  // Large opening quote mark
-  slide.addText('\u201C', {
-    x: 0.8,
-    y: 0.4,
-    w: 1.0,
-    h: 1.2,
-    fontSize: 72,
-    color: THEME.accent,
-    fontFace: 'Georgia',
-    align: 'left',
-    bold: true,
-  });
-
-  // Quote body
-  if (slideData.bodyText) {
-    slide.addText(slideData.bodyText, {
-      x: 1.2,
-      y: 1.4,
-      w: 7.6,
-      h: 2.4,
-      fontSize: 22,
-      italic: true,
-      color: THEME.title,
-      fontFace: THEME.font,
-      align: 'left',
-      valign: 'middle',
-      lineSpacing: 32,
-    });
+  if (!apiKey?.trim()) {
+    throw new Error('OpenAI API key is required to render slide images.');
   }
 
-  // Attribution line
-  slide.addShape('rect', {
-    x: 1.2,
-    y: 4.0,
-    w: 1.5,
-    h: 0.04,
-    fill: { color: THEME.accent },
-    rectRadius: 0.02,
-  });
+  const renderedImages: Record<number, string> = { ...(options.preRendered ?? {}) };
+  const size = options.imageSize ?? '3840x2160';
+  const quality = options.imageQuality ?? 'high';
 
-  slide.addText(slideData.title, {
-    x: 1.2,
-    y: 4.2,
-    w: 7.6,
-    h: 0.5,
-    fontSize: 14,
-    color: THEME.accentLight,
-    fontFace: THEME.font,
-    align: 'left',
-  });
-
-  if (slideData.speakerNotes) slide.addNotes(slideData.speakerNotes);
-  addSlideNumber(slide, slideNum, totalSlides);
-}
-
-/**
- * Two-column slide: left and right bullet lists for comparison.
- */
-function buildTwoColumnSlide(
-  pptx: PptxGenJS,
-  slideData: SlideData,
-  slideNum: number,
-  totalSlides: number,
-): void {
-  const slide = pptx.addSlide();
-  slide.background = { fill: THEME.bg };
-
-  // Title
-  slide.addText(slideData.title, {
-    x: 0.7,
-    y: 0.3,
-    w: 8.6,
-    h: 0.8,
-    fontSize: 24,
-    bold: true,
-    color: THEME.title,
-    fontFace: THEME.font,
-    align: 'left',
-    valign: 'middle',
-  });
-
-  slide.addShape('rect', {
-    x: 0.7,
-    y: 1.15,
-    w: 8.6,
-    h: 0.025,
-    fill: { color: THEME.accent },
-  });
-
-  // Left column
-  const leftItems = slideData.bullets || [];
-  if (leftItems.length > 0) {
-    const leftRows: PptxGenJS.TextProps[] = leftItems.map((item) => ({
-      text: item,
-      options: {
-        fontSize: 14,
-        color: THEME.body,
-        fontFace: THEME.font,
-        bullet: { code: '25CF', color: THEME.accent, fontSize: 8 },
-        paraSpaceBefore: 6,
-        paraSpaceAfter: 3,
-        lineSpacing: 20,
-      },
-    }));
-    slide.addText(leftRows, {
-      x: 0.7,
-      y: 1.4,
-      w: 4.0,
-      h: 3.8,
-      valign: 'top',
-    });
+  // Render images with bounded concurrency (3 in flight) so a 12-slide deck
+  // finishes in a few minutes rather than a few minutes per slide.
+  const todo: number[] = [];
+  for (let i = 0; i < slides.length; i++) {
+    if (renderedImages[i]) continue;
+    if (!slides[i].imagePrompt?.trim()) continue;
+    todo.push(i);
   }
 
-  // Center divider
-  slide.addShape('rect', {
-    x: 4.95,
-    y: 1.5,
-    w: 0.03,
-    h: 3.2,
-    fill: { color: THEME.muted },
-  });
-
-  // Right column
-  let rightItems: string[] = [];
-  if (slideData.bodyText) {
-    try {
-      rightItems = JSON.parse(slideData.bodyText);
-    } catch {
-      rightItems = [slideData.bodyText];
+  let completed = 0;
+  const concurrency = Math.min(options.concurrency ?? 6, todo.length);
+  let cursor = 0;
+  options.onProgress?.(0, slides.length, 'rendering');
+
+  async function worker() {
+    while (true) {
+      const next = cursor++;
+      if (next >= todo.length) return;
+      const i = todo[next];
+      const prompt = withSafetyClause(slides[i].imagePrompt!.trim());
+      try {
+        const dataUri = await generateImageWithRetry(prompt, apiKey, {
+          size,
+          quality,
+          compression: 88,
+        });
+        renderedImages[i] = dataUri;
+        // Persist immediately so a tab-switch or refresh doesn't lose work.
+        options.onSlideRendered?.(i, dataUri);
+      } catch (err) {
+        // Surface failure but keep going — packing logic falls back to a
+        // text-only slide so the deck still ships.
+        console.error(`Slide ${i + 1} image gen failed:`, err);
+      }
+      completed++;
+      options.onProgress?.(completed, slides.length, 'rendering');
     }
   }
-  if (rightItems.length > 0) {
-    const rightRows: PptxGenJS.TextProps[] = rightItems.map((item) => ({
-      text: item,
-      options: {
-        fontSize: 14,
-        color: THEME.body,
-        fontFace: THEME.font,
-        bullet: { code: '25CF', color: THEME.amber, fontSize: 8 },
-        paraSpaceBefore: 6,
-        paraSpaceAfter: 3,
-        lineSpacing: 20,
-      },
-    }));
-    slide.addText(rightRows, {
-      x: 5.3,
-      y: 1.4,
-      w: 4.0,
-      h: 3.8,
-      valign: 'top',
-    });
-  }
 
-  if (slideData.speakerNotes) slide.addNotes(slideData.speakerNotes);
-  addSlideNumber(slide, slideNum, totalSlides);
-}
+  await Promise.all(Array.from({ length: concurrency }, worker));
 
-/**
- * Generates a .pptx file from an array of SlideData objects.
- */
-export async function generatePptx(
-  slides: SlideData[],
-  courseTitle: string,
-  chapterTitle: string,
-  themeId?: string,
-): Promise<Blob> {
-  THEME = buildPptxTheme(themeId);
-  // Handle CJS/ESM interop: in some Node.js environments the default import
-  // wraps the constructor in a { default: ... } object
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const Ctor = typeof PptxGenJS === 'function' ? PptxGenJS : (PptxGenJS as any).default;
-  const pptx = new Ctor();
+  options.onProgress?.(slides.length, slides.length, 'packing');
 
+  const pptx = new PptxGenJS();
+  pptx.layout = 'LAYOUT_WIDE'; // 13.333" × 7.5", standard 16:9
+  pptx.title = `${chapterTitle} — ${courseTitle}`;
   pptx.author = 'CanvasClassBuild';
-  pptx.title = chapterTitle;
-  pptx.subject = courseTitle;
-  pptx.layout = 'LAYOUT_16x9';
 
-  const totalSlides = slides.length;
-
-  for (let i = 0; i < slides.length; i++) {
-    const slideData = slides[i];
-    const slideNum = i + 1;
-    const layout = slideData.layout || 'content';
+  const slideWidth = 13.333;
+  const slideHeight = 7.5;
+
+  slides.forEach((slide, i) => {
+    const s = pptx.addSlide();
+    const dataUri = renderedImages[i];
+
+    if (dataUri) {
+      // Full-bleed image, sized to the entire slide.
+      s.addImage({
+        data: dataUri,
+        x: 0,
+        y: 0,
+        w: slideWidth,
+        h: slideHeight,
+        sizing: { type: 'cover', w: slideWidth, h: slideHeight },
+      });
+    } else {
+      // Fallback: text-only slide if image generation failed for this slide.
+      s.background = { color: 'F1EBDD' }; // parchment, theme-neutral
+      s.addText(slide.title ?? `Slide ${i + 1}`, {
+        x: 0.8,
+        y: 0.8,
+        w: slideWidth - 1.6,
+        h: 1.2,
+        fontSize: 36,
+        fontFace: 'Georgia',
+        color: '14110D',
+        bold: false,
+      });
+      if (slide.bodyText || slide.bullets?.length) {
+        const body =
+          slide.bodyText ??
+          (slide.bullets ?? []).map((b) => `• ${b}`).join('\n');
+        s.addText(body, {
+          x: 0.8,
+          y: 2.4,
+          w: slideWidth - 1.6,
+          h: slideHeight - 3.6,
+          fontSize: 20,
+          fontFace: 'Georgia',
+          color: '3A342C',
+          valign: 'top',
+        });
+      }
+    }
 
-    switch (layout) {
-      case 'title':
-        buildTitleSlide(pptx, slideData, courseTitle, slideNum, totalSlides);
-        break;
-      case 'section':
-        buildSectionSlide(pptx, slideData, slideNum, totalSlides);
-        break;
-      case 'big-idea':
-        buildBigIdeaSlide(pptx, slideData, slideNum, totalSlides);
-        break;
-      case 'quote':
-        buildQuoteSlide(pptx, slideData, slideNum, totalSlides);
-        break;
-      case 'two-column':
-        buildTwoColumnSlide(pptx, slideData, slideNum, totalSlides);
-        break;
-      case 'content':
-      default:
-        buildContentSlide(pptx, slideData, slideNum, totalSlides);
-        break;
+    // Speaker notes attach natively — visible in slide-show view.
+    if (slide.speakerNotes?.trim()) {
+      s.addNotes(slide.speakerNotes);
     }
-  }
+  });
 
-  const output = await pptx.write({ outputType: 'blob' });
-  return output as Blob;
+  const blob = (await pptx.write({ outputType: 'blob' })) as Blob;
+  return { blob, renderedImages };
 }
diff --git a/src/services/export/publishExporter.ts b/src/services/export/publishExporter.ts
index d190177..1bae547 100644
--- a/src/services/export/publishExporter.ts
+++ b/src/services/export/publishExporter.ts
@@ -1,62 +1,149 @@
-import type { Syllabus, GeneratedChapter } from '../../types/course';
-import { buildCourseViewerHtml } from '../../templates/courseViewerTemplate';
+import type { Syllabus, GeneratedChapter, WeeklyChallengeData } from '../../types/course';
+import { renderChapterHtml, getTheme } from '../../themes';
+import {
+  buildCodexViewerHtml,
+  type CodexChapterData,
+} from '../../templates/codexCourseSiteTemplate';
+
+const pad2 = (n: number) => String(n).padStart(2, '0');
 
 /**
- * Assembles a self-contained HTML course viewer from all generated content.
- * Includes student-facing materials: readings, practice quizzes, discussion questions, infographics.
- * Excludes teacher-only materials: slides, in-class quizzes, activities, audio.
+ * Assembles a self-contained, multi-file course SITE as a zip — the same shape
+ * as the example courses at courses.classbuild.ai. Unzips to:
+ *
+ *   index.html              Codex viewer (sidebar, tabs, welcome)
+ *   chapters/NN.html        themed reading
+ *   quizzes/NN.html         gamified practice quiz (chapter theme)
+ *   challenges/NN.html      weekly mastery challenge (chapter theme)
+ *   slides/chNN/slide-MM.jpg  rendered slide images
+ *   audio/NN.mp3            audiobook narration
+ *
+ * Discussion + activities are rendered natively inside index.html. A tab/file
+ * only appears when its data exists. Returns the zip as a Blob.
  */
-export async function assemblePublishHtml(
+export async function assemblePublishSite(
   syllabus: Syllabus,
   chapters: GeneratedChapter[],
   themeId?: string,
-): Promise<string> {
-  // Build quiz HTML for chapters that have practice quiz data
-  let buildQuizHtml: ((title: string, data: string, course: string, theme?: string) => string) | null = null;
+): Promise<Blob> {
+  const { default: JSZip } = await import('jszip');
+  const zip = new JSZip();
+
+  // Code-split material templates (optional — degrade gracefully if missing).
+  let buildQuizHtml:
+    | ((title: string, data: string, course: string, theme?: string) => string)
+    | null = null;
   try {
-    const mod = await import('../../templates/quizTemplate');
-    buildQuizHtml = mod.buildQuizHtml;
+    buildQuizHtml = (await import('../../templates/quizTemplate')).buildQuizHtml;
   } catch {
-    // Quiz template unavailable
+    /* quiz template unavailable */
   }
 
-  let buildChallengeHtml: ((title: string, data: import('../../types/course').WeeklyChallengeData, course: string, theme?: string) => string) | null = null;
+  let buildChallengeHtml:
+    | ((title: string, data: WeeklyChallengeData, course: string, theme?: string) => string)
+    | null = null;
   try {
-    const mod = await import('../../templates/weeklyChallengeTemplate');
-    buildChallengeHtml = mod.buildWeeklyChallengeHtml;
+    buildChallengeHtml = (await import('../../templates/weeklyChallengeTemplate'))
+      .buildWeeklyChallengeHtml;
   } catch {
-    // Weekly challenge template unavailable
+    /* challenge template unavailable */
   }
 
-  const chaptersWithQuizHtml = chapters.map((ch) => {
-    let quizHtml: string | undefined;
-    let challengeHtml: string | undefined;
+  const sorted = [...chapters].sort((a, b) => a.number - b.number);
+  const chapterData: CodexChapterData[] = [];
+
+  for (const ch of sorted) {
+    const nn = pad2(ch.number);
+    const syllCh = syllabus.chapters.find((c) => c.number === ch.number);
+    const data: CodexChapterData = {
+      number: ch.number,
+      title: ch.title,
+      narrative: syllCh?.narrative,
+    };
+
+    // Reading — themed, standalone HTML document.
+    if (ch.htmlContent) {
+      zip.file(`chapters/${nn}.html`, renderChapterHtml(ch.htmlContent, themeId, ch.title));
+      data.chapterHtmlPath = `chapters/${nn}.html`;
+    }
+
+    // Practice quiz.
     if (ch.practiceQuizData && buildQuizHtml) {
       try {
-        quizHtml = buildQuizHtml(
-          `${ch.title} — Practice Quiz`,
-          ch.practiceQuizData,
-          syllabus.courseTitle,
-          themeId,
+        zip.file(
+          `quizzes/${nn}.html`,
+          buildQuizHtml(`${ch.title} — Practice Quiz`, ch.practiceQuizData, syllabus.courseTitle, themeId),
         );
+        data.quizHtmlPath = `quizzes/${nn}.html`;
       } catch {
-        // Quiz build failed
+        /* quiz build failed — omit tab */
       }
     }
-    if (ch.weeklyChallengeData && buildChallengeHtml) {
+
+    // Weekly challenge.
+    if (ch.weeklyChallengeData?.questions?.length && buildChallengeHtml) {
       try {
-        challengeHtml = buildChallengeHtml(
-          `Week ${ch.number} Challenge — ${ch.title}`,
-          ch.weeklyChallengeData,
-          syllabus.courseTitle,
-          themeId,
+        zip.file(
+          `challenges/${nn}.html`,
+          buildChallengeHtml(
+            `Week ${ch.number} Challenge — ${ch.title}`,
+            ch.weeklyChallengeData,
+            syllabus.courseTitle,
+            themeId,
+          ),
         );
+        data.challengeHtmlPath = `challenges/${nn}.html`;
+      } catch {
+        /* challenge build failed — omit tab */
+      }
+    }
+
+    // Discussion + activities — rendered natively in the viewer.
+    if (ch.discussionData?.length) data.discussion = ch.discussionData;
+    if (ch.activityData?.length) data.activities = ch.activityData;
+
+    // Slides — write each rendered image as slides/chNN/slide-MM.jpg.
+    if (ch.slidesJson?.length) {
+      let wroteAny = false;
+      ch.slidesJson.forEach((s, i) => {
+        const m = s.imageDataUri?.match(/^data:[^;]+;base64,(.+)$/);
+        if (m) {
+          zip.file(`slides/ch${nn}/slide-${pad2(i + 1)}.jpg`, m[1], { base64: true });
+          wroteAny = true;
+        }
+      });
+      // Only surface the Slides tab if at least one image rendered. Captions
+      // come from the slide titles; the viewer hides any card whose image 404s.
+      if (wroteAny) data.slides = ch.slidesJson.map((s) => ({ title: s.title }));
+    }
+
+    // Audio — prefer the durable data URI (survives reload); fall back to the
+    // in-session blob URL. fetch() accepts both. Skip on failure.
+    const chapterAudio = ch.audioUrl ?? ch.audioDataUri;
+    if (chapterAudio) {
+      try {
+        const audioBlob = await fetch(chapterAudio).then((r) => r.blob());
+        zip.file(`audio/${nn}.mp3`, audioBlob);
+        data.audioPath = `audio/${nn}.mp3`;
       } catch {
-        // Challenge build failed
+        /* audio source no longer valid — omit audio */
       }
     }
-    return { ...ch, quizHtml, challengeHtml };
-  });
+    if (ch.audioTranscript) data.transcript = ch.audioTranscript;
+
+    chapterData.push(data);
+  }
+
+  const theme = getTheme(themeId);
+  const indexHtml = buildCodexViewerHtml(
+    {
+      courseTitle: syllabus.courseTitle,
+      courseOverview: syllabus.courseOverview || '',
+      themeLabel: theme.name,
+    },
+    chapterData,
+  );
+  zip.file('index.html', indexHtml);
 
-  return buildCourseViewerHtml(syllabus, chaptersWithQuizHtml, themeId);
+  return zip.generateAsync({ type: 'blob' });
 }
diff --git a/src/services/gemini/imageGen.ts b/src/services/gemini/imageGen.ts
deleted file mode 100644
index ee9d281..0000000
--- a/src/services/gemini/imageGen.ts
+++ /dev/null
@@ -1,107 +0,0 @@
-/**
- * Gemini image generation service for educational infographics.
- * Uses Gemini 3 Pro Image for text+image output.
- */
-
-/**
- * Compress a base64 PNG to JPEG using canvas.
- * Returns a data:image/jpeg;base64,... URI.
- */
-function compressToJpeg(base64Png: string, quality = 0.8): Promise<string> {
-  return new Promise((resolve, reject) => {
-    const img = new Image();
-    img.onload = () => {
-      const canvas = document.createElement('canvas');
-      canvas.width = img.width;
-      canvas.height = img.height;
-      const ctx = canvas.getContext('2d');
-      if (!ctx) {
-        reject(new Error('Canvas context not available'));
-        return;
-      }
-      ctx.drawImage(img, 0, 0);
-      resolve(canvas.toDataURL('image/jpeg', quality));
-    };
-    img.onerror = () => reject(new Error('Failed to load image for compression'));
-    img.src = `data:image/png;base64,${base64Png}`;
-  });
-}
-
-interface GeminiPart {
-  text?: string;
-  inlineData?: { mimeType: string; data: string };
-  thought?: boolean;
-}
-
-interface GeminiResponse {
-  candidates?: Array<{
-    content?: {
-      parts?: GeminiPart[];
-    };
-  }>;
-  error?: { message: string };
-}
-
-/**
- * Generate an infographic using Gemini's image generation model.
- * Returns a data:image/jpeg;base64,... URI.
- */
-export async function generateInfographic(
-  prompt: string,
-  apiKey: string,
-): Promise<string> {
-  const model = 'gemini-3.1-flash-image-preview';
-  const url = `https://generativelanguage.googleapis.com/v1beta/models/${model}:generateContent?key=${apiKey}`;
-
-  const body = {
-    contents: [{ parts: [{ text: prompt }] }],
-    generationConfig: {
-      responseModalities: ['TEXT', 'IMAGE'],
-    },
-  };
-
-  const res = await fetch(url, {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify(body),
-  });
-
-  if (!res.ok) {
-    const errBody = await res.text();
-    throw new Error(`Gemini API error (${res.status}): ${errBody.slice(0, 200)}`);
-  }
-
-  const data: GeminiResponse = await res.json();
-
-  if (data.error) {
-    throw new Error(`Gemini error: ${data.error.message}`);
-  }
-
-  const parts = data.candidates?.[0]?.content?.parts;
-  if (!parts || parts.length === 0) {
-    throw new Error('Gemini returned no content');
-  }
-
-  // Find the last non-thought image part
-  let imagePart: GeminiPart | undefined;
-  for (const part of parts) {
-    if (part.inlineData && !part.thought) {
-      imagePart = part;
-    }
-  }
-
-  if (!imagePart?.inlineData) {
-    throw new Error('Gemini returned no image');
-  }
-
-  // Compress PNG to JPEG for smaller storage
-  const base64 = imagePart.inlineData.data;
-  const mimeType = imagePart.inlineData.mimeType;
-
-  if (mimeType.includes('png')) {
-    return await compressToJpeg(base64);
-  }
-
-  // Already JPEG or other format — return as-is
-  return `data:${mimeType};base64,${base64}`;
-}
diff --git a/src/services/gemini/imagePlacer.ts b/src/services/gemini/imagePlacer.ts
deleted file mode 100644
index 029581b..0000000
--- a/src/services/gemini/imagePlacer.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * Replaces <figure class="gemini-image" data-prompt="..."> placeholders in chapter HTML
- * with AI-generated images from Gemini.
- */
-import { generateInfographic } from './imageGen';
-
-async function generateWithRetry(prompt: string, apiKey: string, maxRetries = 3): Promise<string> {
-  for (let attempt = 0; attempt <= maxRetries; attempt++) {
-    try {
-      return await generateInfographic(prompt, apiKey);
-    } catch (err) {
-      const msg = err instanceof Error ? err.message : String(err);
-      const isQuota = /quota|rate|429|resource.*exhausted/i.test(msg);
-      if (!isQuota || attempt === maxRetries) throw err;
-      // Exponential backoff: 5s, 10s, 20s
-      await new Promise(r => setTimeout(r, 5000 * Math.pow(2, attempt)));
-    }
-  }
-  throw new Error('Gemini retry exhausted');
-}
-
-export async function replaceGeminiImagePlaceholders(html: string, apiKey: string): Promise<string> {
-  const placeholderRegex = /<figure\s+class="gemini-image"\s+data-prompt="([^"]+)">\s*<figcaption>([^<]*)<\/figcaption>\s*<\/figure>/g;
-  const matches: Array<{ full: string; prompt: string; caption: string }> = [];
-  let m: RegExpExecArray | null;
-  while ((m = placeholderRegex.exec(html)) !== null) {
-    matches.push({ full: m[0], prompt: m[1], caption: m[2] });
-  }
-  if (matches.length === 0) return html;
-
-  // Generate images sequentially to avoid hitting Gemini rate limits
-  const results: Array<{ status: 'fulfilled'; value: string } | { status: 'rejected' }> = [];
-  for (const { prompt } of matches) {
-    try {
-      const value = await generateWithRetry(prompt, apiKey);
-      results.push({ status: 'fulfilled', value });
-    } catch {
-      results.push({ status: 'rejected' });
-    }
-  }
-
-  let result = html;
-  for (let i = 0; i < matches.length; i++) {
-    const r = results[i];
-    if (r.status === 'fulfilled') {
-      const replacement = `<figure style="margin:2rem 0;text-align:center"><img src="${r.value}" alt="${matches[i].caption}" style="max-width:100%;border-radius:12px;"><figcaption style="margin-top:0.5rem;font-size:0.85rem;color:#94a3b8;font-style:italic">${matches[i].caption}</figcaption></figure>`;
-      result = result.replace(matches[i].full, replacement);
-    } else {
-      const fallback = `<figure style="margin:2rem 0;text-align:center;padding:2rem;border:1px dashed #4a4a6a;border-radius:12px"><figcaption style="font-size:0.85rem;color:#94a3b8;font-style:italic">${matches[i].caption}</figcaption></figure>`;
-      result = result.replace(matches[i].full, fallback);
-    }
-  }
-  return result;
-}
diff --git a/src/services/gemini/tts.ts b/src/services/gemini/tts.ts
deleted file mode 100644
index b9b69a6..0000000
--- a/src/services/gemini/tts.ts
+++ /dev/null
@@ -1,433 +0,0 @@
-/**
- * Gemini text-to-speech service.
- *
- * The TTS model returns raw 16-bit PCM audio at 24 kHz, mono, base64-encoded
- * inside the generateContent response. This module:
- *   1. Chunks long transcripts (quality drifts past a few minutes per call).
- *   2. Calls Gemini TTS for each chunk with automatic retry on transient 5xx.
- *   3. Crossfades adjacent PCM chunks at a zero-aligned boundary so joins are
- *      inaudible, then wraps the result in a single WAV container.
- *
- * Browser callers get a WAV Blob. Node/CLI callers can reach for
- * `generatePcmAudio` instead to drive ffmpeg directly.
- */
-
-const API_BASE = 'https://generativelanguage.googleapis.com/v1beta/models';
-const DEFAULT_MODEL_ID = 'gemini-2.5-flash-preview-tts';
-const DEFAULT_VOICE_NAME = 'Kore';
-
-// Gemini TTS returns 24 kHz / 16-bit / mono PCM
-const SAMPLE_RATE = 24000;
-const CHANNELS = 1;
-const BITS_PER_SAMPLE = 16;
-
-/**
- * Stay well under Gemini's "few minutes per call" quality-drift threshold.
- * ~4000 chars is ~4 min of speech at 150 wpm — big enough to minimise the
- * number of joins (where audible seams can happen), small enough to avoid
- * the drift Google explicitly warns about.
- */
-const MAX_CHUNK_CHARS = 4000;
-const MAX_ATTEMPTS = 3;
-
-/**
- * Milliseconds of equal-power crossfade at every chunk boundary. Two jobs:
- *  - hides the zero-crossing discontinuity that produces a click/pop when
- *    two independent PCM buffers are concatenated;
- *  - blends prosody differences between separate generateContent calls.
- * 80 ms is short enough that no content is lost and long enough to smooth
- * the transition.
- */
-const CROSSFADE_MS = 80;
-
-export class GeminiTtsError extends Error {
-  readonly status: number | undefined;
-  readonly detail: string | undefined;
-
-  constructor(message: string, status?: number, detail?: string) {
-    super(message);
-    this.name = 'GeminiTtsError';
-    this.status = status;
-    this.detail = detail;
-  }
-}
-
-export interface TtsOptions {
-  /** Prebuilt Gemini voice name (e.g. "Kore", "Puck"). Defaults to "Kore". */
-  voiceName?: string;
-  /** Override the Gemini TTS model id. */
-  modelId?: string;
-  /**
-   * Natural-language accent / delivery direction prepended to every chunk
-   * (e.g. "Australian English accent from Sydney"). Each chunk is a fresh
-   * generateContent call, so the directive must repeat per chunk.
-   */
-  accent?: string;
-  /** Called after each chunk with (completed, total) for UI progress. */
-  onProgress?: (current: number, total: number) => void;
-}
-
-interface PcmResult {
-  pcm: Uint8Array;
-  sampleRate: number;
-  channels: number;
-  bitsPerSample: number;
-}
-
-/**
- * Build the per-chunk prompt. The shape follows the "Audio Profile / Director's
- * Notes / Transcript" structure the Gemini TTS docs recommend for consistency
- * across separate generateContent calls: an identical persona block on every
- * chunk locks the voice character so part 3 sounds like part 1.
- *
- * Repeating the *same* instructions every call is deliberate — it's the only
- * cross-call context the model gets, since TTS has no conversation history.
- */
-function buildChunkPrompt(
-  chunk: string,
-  opts: { accent?: string; partIndex: number; partTotal: number },
-): string {
-  const { accent, partIndex, partTotal } = opts;
-  const isMulti = partTotal > 1;
-  const lines: string[] = [
-    'PERSONA',
-    'A single professional narrator reading an educational course chapter aloud to adult learners. Measured pace, even tone, warm but composed. This is audiobook-style delivery — not performative, not dramatic.',
-    '',
-    "DIRECTOR'S NOTES",
-    '- Keep the voice, pitch, energy, and pacing identical throughout. Do not modulate dramatically between sentences.',
-    '- Read as if this is one continuous recording session, not a series of independent takes.',
-  ];
-  if (accent) {
-    lines.push(`- Voice carries a ${accent}. Keep it natural and understated — no exaggeration.`);
-  }
-  if (isMulti) {
-    // Tell the model it's in the middle of a longer reading so it doesn't
-    // re-open with fresh introductory energy on later chunks.
-    lines.push(
-      `- This is passage ${partIndex + 1} of ${partTotal} from the same chapter. ` +
-        (partIndex === 0
-          ? 'Begin as the opening of a calm, sustained reading.'
-          : 'Continue seamlessly from the previous passage — same speaker, same delivery, mid-flow.'),
-    );
-  }
-  lines.push('', 'TRANSCRIPT (read exactly this text aloud, nothing else)', '', chunk);
-  return lines.join('\n');
-}
-
-function chunkText(text: string): string[] {
-  const paragraphs = text.split(/\n\n+/);
-  const chunks: string[] = [];
-  let current = '';
-
-  for (const para of paragraphs) {
-    const trimmed = para.trim();
-    if (!trimmed) continue;
-
-    if (current && current.length + 2 + trimmed.length > MAX_CHUNK_CHARS) {
-      chunks.push(current.trim());
-      current = '';
-    }
-
-    if (trimmed.length > MAX_CHUNK_CHARS) {
-      if (current) {
-        chunks.push(current.trim());
-        current = '';
-      }
-      const sentences = trimmed.match(/[^.!?]+[.!?]+[\s]*/g) || [trimmed];
-      let sentenceChunk = '';
-      for (const sentence of sentences) {
-        if (sentenceChunk && sentenceChunk.length + sentence.length > MAX_CHUNK_CHARS) {
-          chunks.push(sentenceChunk.trim());
-          sentenceChunk = '';
-        }
-        sentenceChunk += sentence;
-      }
-      if (sentenceChunk.trim()) current = sentenceChunk;
-    } else {
-      current += (current ? '\n\n' : '') + trimmed;
-    }
-  }
-
-  if (current.trim()) chunks.push(current.trim());
-  return chunks;
-}
-
-function base64ToBytes(b64: string): Uint8Array {
-  if (typeof atob === 'function') {
-    const bin = atob(b64);
-    const out = new Uint8Array(bin.length);
-    for (let i = 0; i < bin.length; i++) out[i] = bin.charCodeAt(i);
-    return out;
-  }
-  // Node.js fallback
-  return new Uint8Array(Buffer.from(b64, 'base64'));
-}
-
-async function synthesizeChunk(
-  text: string,
-  apiKey: string,
-  voiceName: string,
-  modelId: string,
-): Promise<Uint8Array> {
-  const url = `${API_BASE}/${modelId}:generateContent?key=${encodeURIComponent(apiKey)}`;
-  const body = {
-    contents: [{ parts: [{ text }] }],
-    generationConfig: {
-      responseModalities: ['AUDIO'],
-      speechConfig: {
-        voiceConfig: { prebuiltVoiceConfig: { voiceName } },
-      },
-    },
-  };
-
-  let lastErr: GeminiTtsError | null = null;
-
-  for (let attempt = 1; attempt <= MAX_ATTEMPTS; attempt++) {
-    let response: Response;
-    try {
-      response = await fetch(url, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(body),
-      });
-    } catch (error) {
-      lastErr = new GeminiTtsError(
-        `Network error calling Gemini TTS: ${error instanceof Error ? error.message : String(error)}`,
-      );
-      if (attempt < MAX_ATTEMPTS) {
-        await sleep(500 * attempt);
-        continue;
-      }
-      throw lastErr;
-    }
-
-    if (!response.ok) {
-      const detail = await response.text().catch(() => '');
-      lastErr = new GeminiTtsError(
-        `Gemini TTS returned ${response.status}: ${detail.slice(0, 300)}`,
-        response.status,
-        detail,
-      );
-      // Per Gemini docs, the model occasionally returns text tokens causing a 500.
-      // Retry transient 5xx; fail fast on 4xx (auth / quota / bad input).
-      if (response.status >= 500 && attempt < MAX_ATTEMPTS) {
-        await sleep(500 * attempt);
-        continue;
-      }
-      throw lastErr;
-    }
-
-    let json: unknown;
-    try {
-      json = await response.json();
-    } catch (error) {
-      lastErr = new GeminiTtsError(
-        `Gemini TTS returned non-JSON: ${error instanceof Error ? error.message : String(error)}`,
-      );
-      if (attempt < MAX_ATTEMPTS) {
-        await sleep(500 * attempt);
-        continue;
-      }
-      throw lastErr;
-    }
-
-    const b64 = extractAudioBase64(json);
-    if (!b64) {
-      lastErr = new GeminiTtsError(
-        'Gemini TTS response contained no audio data (model may have returned text tokens).',
-      );
-      if (attempt < MAX_ATTEMPTS) {
-        await sleep(500 * attempt);
-        continue;
-      }
-      throw lastErr;
-    }
-
-    const pcm = base64ToBytes(b64);
-    if (pcm.length === 0) {
-      lastErr = new GeminiTtsError('Gemini TTS returned an empty audio payload.');
-      if (attempt < MAX_ATTEMPTS) {
-        await sleep(500 * attempt);
-        continue;
-      }
-      throw lastErr;
-    }
-    return pcm;
-  }
-
-  // Should be unreachable — loop either returns or throws — but satisfies TS.
-  throw lastErr ?? new GeminiTtsError('Gemini TTS failed for unknown reason.');
-}
-
-function extractAudioBase64(json: unknown): string | null {
-  // Shape: { candidates: [{ content: { parts: [{ inlineData: { data, mimeType } }] } }] }
-  const candidates = (json as { candidates?: Array<{ content?: { parts?: Array<{ inlineData?: { data?: string } }> } }> }).candidates;
-  const parts = candidates?.[0]?.content?.parts;
-  if (!parts) return null;
-  for (const part of parts) {
-    const data = part?.inlineData?.data;
-    if (typeof data === 'string' && data.length > 0) return data;
-  }
-  return null;
-}
-
-function concatPcm(chunks: Uint8Array[]): Uint8Array {
-  let total = 0;
-  for (const c of chunks) total += c.length;
-  const out = new Uint8Array(total);
-  let offset = 0;
-  for (const c of chunks) {
-    out.set(c, offset);
-    offset += c.length;
-  }
-  return out;
-}
-
-/**
- * Equal-power (cosine) crossfade join: the last `fadeMs` of `prev` mix with
- * the first `fadeMs` of `next` using sin/cos weights, which keep perceived
- * loudness constant across the blend. Falls back to a plain concat if either
- * chunk is too short to fade.
- */
-function crossfadePcm(prev: Uint8Array, next: Uint8Array, fadeMs = CROSSFADE_MS): Uint8Array {
-  const fadeSamples = Math.floor((fadeMs / 1000) * SAMPLE_RATE);
-  const bytesPerSample = BITS_PER_SAMPLE / 8;
-  const fadeBytes = fadeSamples * bytesPerSample;
-
-  if (prev.length < fadeBytes || next.length < fadeBytes || fadeSamples === 0) {
-    return concatPcm([prev, next]);
-  }
-
-  const prevBody = prev.subarray(0, prev.length - fadeBytes);
-  const prevTail = prev.subarray(prev.length - fadeBytes);
-  const nextHead = next.subarray(0, fadeBytes);
-  const nextBody = next.subarray(fadeBytes);
-
-  const mixed = new Uint8Array(fadeBytes);
-  const prevView = new DataView(prevTail.buffer, prevTail.byteOffset, fadeBytes);
-  const nextView = new DataView(nextHead.buffer, nextHead.byteOffset, fadeBytes);
-  const mixedView = new DataView(mixed.buffer);
-
-  for (let i = 0; i < fadeSamples; i++) {
-    const t = i / fadeSamples;
-    const wOut = Math.cos((t * Math.PI) / 2);
-    const wIn = Math.sin((t * Math.PI) / 2);
-    const prevSample = prevView.getInt16(i * bytesPerSample, true);
-    const nextSample = nextView.getInt16(i * bytesPerSample, true);
-    const mixedSample = Math.round(prevSample * wOut + nextSample * wIn);
-    const clamped = Math.max(-32768, Math.min(32767, mixedSample));
-    mixedView.setInt16(i * bytesPerSample, clamped, true);
-  }
-
-  const out = new Uint8Array(prevBody.length + mixed.length + nextBody.length);
-  out.set(prevBody, 0);
-  out.set(mixed, prevBody.length);
-  out.set(nextBody, prevBody.length + mixed.length);
-  return out;
-}
-
-/** Join a sequence of PCM chunks with crossfades between every adjacent pair. */
-function joinPcmWithCrossfade(chunks: Uint8Array[]): Uint8Array {
-  if (chunks.length === 0) return new Uint8Array(0);
-  if (chunks.length === 1) return chunks[0];
-  let result = chunks[0];
-  for (let i = 1; i < chunks.length; i++) {
-    result = crossfadePcm(result, chunks[i]);
-  }
-  return result;
-}
-
-/** Wrap raw PCM in a 44-byte RIFF/WAVE header. */
-function pcmToWav(
-  pcm: Uint8Array,
-  sampleRate = SAMPLE_RATE,
-  channels = CHANNELS,
-  bitsPerSample = BITS_PER_SAMPLE,
-): Uint8Array {
-  const blockAlign = (channels * bitsPerSample) / 8;
-  const byteRate = sampleRate * blockAlign;
-  const dataSize = pcm.length;
-  const fileSize = 36 + dataSize;
-
-  const header = new ArrayBuffer(44);
-  const view = new DataView(header);
-  writeAscii(view, 0, 'RIFF');
-  view.setUint32(4, fileSize, true);
-  writeAscii(view, 8, 'WAVE');
-  writeAscii(view, 12, 'fmt ');
-  view.setUint32(16, 16, true);
-  view.setUint16(20, 1, true); // PCM
-  view.setUint16(22, channels, true);
-  view.setUint32(24, sampleRate, true);
-  view.setUint32(28, byteRate, true);
-  view.setUint16(32, blockAlign, true);
-  view.setUint16(34, bitsPerSample, true);
-  writeAscii(view, 36, 'data');
-  view.setUint32(40, dataSize, true);
-
-  const out = new Uint8Array(44 + dataSize);
-  out.set(new Uint8Array(header), 0);
-  out.set(pcm, 44);
-  return out;
-}
-
-function writeAscii(view: DataView, offset: number, s: string): void {
-  for (let i = 0; i < s.length; i++) view.setUint8(offset + i, s.charCodeAt(i));
-}
-
-function sleep(ms: number): Promise<void> {
-  return new Promise(resolve => setTimeout(resolve, ms));
-}
-
-/**
- * Low-level: returns concatenated PCM plus format metadata.
- * Use from CLI when you want to pipe into ffmpeg for MP3 transcoding.
- */
-export async function generatePcmAudio(
-  text: string,
-  apiKey: string,
-  options?: TtsOptions,
-): Promise<PcmResult> {
-  if (!text.trim()) throw new GeminiTtsError('Cannot generate audio from empty text.');
-  if (!apiKey.trim()) throw new GeminiTtsError('Gemini API key is required.');
-
-  const voiceName = options?.voiceName?.trim() || DEFAULT_VOICE_NAME;
-  const modelId = options?.modelId?.trim() || DEFAULT_MODEL_ID;
-  const accent = options?.accent?.trim();
-
-  const chunks = chunkText(text);
-  const pcmChunks: Uint8Array[] = [];
-
-  for (let i = 0; i < chunks.length; i++) {
-    options?.onProgress?.(i + 1, chunks.length);
-    const prompt = buildChunkPrompt(chunks[i], { accent, partIndex: i, partTotal: chunks.length });
-    const pcm = await synthesizeChunk(prompt, apiKey, voiceName, modelId);
-    pcmChunks.push(pcm);
-  }
-
-  return {
-    pcm: joinPcmWithCrossfade(pcmChunks),
-    sampleRate: SAMPLE_RATE,
-    channels: CHANNELS,
-    bitsPerSample: BITS_PER_SAMPLE,
-  };
-}
-
-/**
- * Generate an audiobook WAV blob from text via Gemini TTS.
- * Automatically chunks long transcripts and wraps the concatenated PCM
- * in a single RIFF/WAVE container the browser can play directly.
- */
-export async function generateAudiobook(
-  text: string,
-  apiKey: string,
-  options?: TtsOptions,
-): Promise<Blob> {
-  const { pcm, sampleRate, channels, bitsPerSample } = await generatePcmAudio(text, apiKey, options);
-  const wav = pcmToWav(pcm, sampleRate, channels, bitsPerSample);
-  // Cast via BlobPart — our Uint8Array is backed by a fresh ArrayBuffer, but
-  // TS widens to ArrayBufferLike which Blob's typings reject.
-  const blob = new Blob([wav as unknown as BlobPart], { type: 'audio/wav' });
-  if (blob.size === 0) throw new GeminiTtsError('Audio generation produced no output.');
-  return blob;
-}
diff --git a/src/services/llm/anthropic.ts b/src/services/llm/anthropic.ts
index c235257..185f5b4 100644
--- a/src/services/llm/anthropic.ts
+++ b/src/services/llm/anthropic.ts
@@ -14,6 +14,7 @@ export async function streamMessageAnthropic(
     thinkingBudget,
     tools,
     maxTokens = 16000,
+    signal,
   } = options;
 
   const client = getClient(apiKey);
@@ -32,18 +33,34 @@ export async function streamMessageAnthropic(
     }
 
     if (thinkingBudget) {
-      params.thinking = {
-        type: 'enabled',
-        budget_tokens: getThinkingTokens(thinkingBudget),
-      };
-      params.max_tokens = Math.max(maxTokens, getThinkingTokens(thinkingBudget) + maxTokens);
+      const budgetTokens = getThinkingTokens(thinkingBudget);
+      if (model === MODELS.opus) {
+        // Opus 4.8: manual extended thinking (`budget_tokens`) is rejected on
+        // Opus 4.7+. Enable adaptive thinking and steer depth with `effort`.
+        // Adaptive thinking is OFF unless set explicitly, and the thinking summary
+        // is omitted by default — `display: 'summarized'` restores the streamed
+        // reasoning the UI shows via onThinking. SDK 0.74.0 doesn't type `display`
+        // on the adaptive config yet; the field is still sent, so cast.
+        params.thinking = { type: 'adaptive', display: 'summarized' } as Anthropic.ThinkingConfigParam;
+        params.output_config = { effort: thinkingBudget };
+        // Adaptive thinking tokens count toward max_tokens. Reserve headroom ABOVE
+        // the caller's intended output so a deep think can't truncate the answer
+        // (truncated JSON materials fail to parse and silently revert). Capped at
+        // the 128k output ceiling.
+        params.max_tokens = Math.min(128000, maxTokens + budgetTokens * 2);
+      } else {
+        // Sonnet / Haiku still accept manual extended thinking, where
+        // budget_tokens must fit inside max_tokens.
+        params.thinking = { type: 'enabled', budget_tokens: budgetTokens };
+        params.max_tokens = Math.max(maxTokens, budgetTokens + maxTokens);
+      }
     }
 
     if (tools && tools.length > 0) {
       params.tools = tools;
     }
 
-    const stream = await client.messages.stream(params);
+    const stream = await client.messages.stream(params, signal ? { signal } : undefined);
 
     const serverToolInputs = new Map<number, string>();
 
@@ -135,6 +152,7 @@ export async function sendMessageAnthropic(
     thinkingBudget,
     tools,
     maxTokens = 16000,
+    signal,
   } = options;
 
   const client = getClient(apiKey);
@@ -150,16 +168,32 @@ export async function sendMessageAnthropic(
   }
 
   if (thinkingBudget) {
-    params.thinking = {
-      type: 'enabled',
-      budget_tokens: getThinkingTokens(thinkingBudget),
-    };
-    params.max_tokens = Math.max(maxTokens, getThinkingTokens(thinkingBudget) + maxTokens);
+    const budgetTokens = getThinkingTokens(thinkingBudget);
+    if (model === MODELS.opus) {
+      // Opus 4.8: manual extended thinking (`budget_tokens`) is rejected on
+      // Opus 4.7+. Enable adaptive thinking and steer depth with `effort`.
+      // Adaptive thinking is OFF unless set explicitly, and the thinking summary
+      // is omitted by default — `display: 'summarized'` restores the streamed
+      // reasoning the UI shows via onThinking. SDK 0.74.0 doesn't type `display`
+      // on the adaptive config yet; the field is still sent, so cast.
+      params.thinking = { type: 'adaptive', display: 'summarized' } as Anthropic.ThinkingConfigParam;
+      params.output_config = { effort: thinkingBudget };
+      // Adaptive thinking tokens count toward max_tokens. Reserve headroom ABOVE
+      // the caller's intended output so a deep think can't truncate the answer
+      // (truncated JSON materials fail to parse and silently revert). Capped at
+      // the 128k output ceiling.
+      params.max_tokens = Math.min(128000, maxTokens + budgetTokens * 2);
+    } else {
+      // Sonnet / Haiku still accept manual extended thinking, where
+      // budget_tokens must fit inside max_tokens.
+      params.thinking = { type: 'enabled', budget_tokens: budgetTokens };
+      params.max_tokens = Math.max(maxTokens, budgetTokens + maxTokens);
+    }
   }
 
   if (tools && tools.length > 0) {
     params.tools = tools;
   }
 
-  return client.messages.create(params);
+  return client.messages.create(params, signal ? { signal } : undefined);
 }
diff --git a/src/services/llm/index.ts b/src/services/llm/index.ts
index c6b69b0..d2c65f7 100644
--- a/src/services/llm/index.ts
+++ b/src/services/llm/index.ts
@@ -28,7 +28,12 @@ function resolveProvider(options: StreamOptions): {
     return {
       provider,
       apiKey: options.ollamaApiKey || state.ollamaApiKey,
-      model: options.model || options.ollamaModel || state.ollamaModel,
+      // Call sites pass Anthropic model ids (MODELS.opus etc.); those mean
+      // nothing to Ollama, so only honour an explicit non-Claude override.
+      model:
+        (options.model && !options.model.startsWith('claude-') ? options.model : undefined) ||
+        options.ollamaModel ||
+        state.ollamaModel,
     };
   }
   return { provider, apiKey: options.apiKey, model: options.model };
@@ -55,6 +60,8 @@ export async function streamWithRetry(
     try {
       return await streamMessage(options, callbacks);
     } catch (err) {
+      // Never retry a user-initiated cancel.
+      if (options.signal?.aborted) throw err;
       const msg = err instanceof Error ? err.message : String(err);
       const isRateLimit = msg.includes('429') || msg.toLowerCase().includes('rate');
       if (isRateLimit && attempt < maxRetries) {
diff --git a/src/services/llm/ollama.ts b/src/services/llm/ollama.ts
index d0b8a37..acbdb9f 100644
--- a/src/services/llm/ollama.ts
+++ b/src/services/llm/ollama.ts
@@ -60,7 +60,7 @@ export async function streamMessageOllama(
   options: StreamOptions,
   callbacks: StreamCallbacks,
 ): Promise<string> {
-  const { apiKey, model, system, messages } = options;
+  const { apiKey, model, system, messages, signal } = options;
 
   if (!model) {
     const err = new Error('Ollama provider requires a model name (e.g. gpt-oss:120b-cloud).');
@@ -87,6 +87,7 @@ export async function streamMessageOllama(
         messages: toOllamaMessages(messages, system),
         stream: true,
       }),
+      signal,
     });
 
     if (!res.ok || !res.body) {
diff --git a/src/services/llm/types.ts b/src/services/llm/types.ts
index 94b342a..3f56a3c 100644
--- a/src/services/llm/types.ts
+++ b/src/services/llm/types.ts
@@ -34,6 +34,9 @@ export interface StreamOptions {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   tools?: any[];
   maxTokens?: number;
+  /** Optional cancellation. Aborting rejects the call with the SDK's abort
+   *  error — call sites should treat that as a silent cancel, not a failure. */
+  signal?: AbortSignal;
   /** Provider override. If omitted, the active provider in apiStore is used. */
   provider?: LlmProvider;
   /**
diff --git a/src/services/openai/imageGen.ts b/src/services/openai/imageGen.ts
new file mode 100644
index 0000000..9a23ce0
--- /dev/null
+++ b/src/services/openai/imageGen.ts
@@ -0,0 +1,118 @@
+/**
+ * OpenAI gpt-image-2 image generation.
+ *
+ * Calls the Image API (`/v1/images/generations`) directly — no SDK to keep
+ * the bundle lean — and returns a `data:image/jpeg;base64,…` URI ready for
+ * `<img src>`. JPEG output is requested explicitly because it's both faster
+ * to generate and dramatically smaller than PNG for photographic content.
+ */
+
+export type ImageQuality = 'low' | 'medium' | 'high' | 'auto';
+
+export interface GenerateImageOptions {
+  /** Width × height in pixels, e.g. '1024x1024', '3840x2160'. Defaults to 'auto'. */
+  size?: string;
+  /** Defaults to 'high' — these images are user-facing artifacts. */
+  quality?: ImageQuality;
+  /** JPEG compression 0-100. Defaults to 90. */
+  compression?: number;
+}
+
+const DEFAULT_QUALITY: ImageQuality = 'high';
+const DEFAULT_SIZE = 'auto';
+const DEFAULT_COMPRESSION = 90;
+const ENDPOINT = 'https://api.openai.com/v1/images/generations';
+const MODEL = 'gpt-image-2';
+
+export class OpenAIImageError extends Error {
+  readonly status: number | undefined;
+
+  constructor(message: string, status?: number) {
+    super(message);
+    this.name = 'OpenAIImageError';
+    this.status = status;
+  }
+}
+
+interface GenerateResponse {
+  data?: Array<{ b64_json?: string }>;
+  error?: { message?: string; type?: string };
+}
+
+export async function generateImage(
+  prompt: string,
+  apiKey: string,
+  options: GenerateImageOptions = {},
+): Promise<string> {
+  if (!prompt.trim()) {
+    throw new OpenAIImageError('Cannot generate an image from an empty prompt.');
+  }
+  if (!apiKey.trim()) {
+    throw new OpenAIImageError('OpenAI API key is required.');
+  }
+
+  const body = {
+    model: MODEL,
+    prompt,
+    n: 1,
+    size: options.size ?? DEFAULT_SIZE,
+    quality: options.quality ?? DEFAULT_QUALITY,
+    output_format: 'jpeg' as const,
+    output_compression: options.compression ?? DEFAULT_COMPRESSION,
+  };
+
+  const res = await fetch(ENDPOINT, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      Authorization: `Bearer ${apiKey.trim()}`,
+    },
+    body: JSON.stringify(body),
+  });
+
+  if (!res.ok) {
+    let detail = '';
+    try {
+      const errBody = (await res.json()) as GenerateResponse;
+      detail = errBody.error?.message ?? '';
+    } catch {
+      detail = await res.text().catch(() => '');
+    }
+    throw new OpenAIImageError(
+      `OpenAI image generation failed (${res.status}): ${detail.slice(0, 300) || res.statusText}`,
+      res.status,
+    );
+  }
+
+  const json = (await res.json()) as GenerateResponse;
+  const b64 = json.data?.[0]?.b64_json;
+  if (!b64) {
+    throw new OpenAIImageError('OpenAI returned no image data.');
+  }
+  return `data:image/jpeg;base64,${b64}`;
+}
+
+/**
+ * Generate an image with exponential backoff on rate-limit / transient errors.
+ * 5xx and 429 retry; everything else fails fast.
+ */
+export async function generateImageWithRetry(
+  prompt: string,
+  apiKey: string,
+  options: GenerateImageOptions = {},
+  maxRetries = 2,
+): Promise<string> {
+  let lastErr: unknown;
+  for (let attempt = 0; attempt <= maxRetries; attempt++) {
+    try {
+      return await generateImage(prompt, apiKey, options);
+    } catch (err) {
+      lastErr = err;
+      const status = err instanceof OpenAIImageError ? err.status : undefined;
+      const transient = status === 429 || (status !== undefined && status >= 500);
+      if (!transient || attempt === maxRetries) throw err;
+      await new Promise((r) => setTimeout(r, 4000 * Math.pow(2, attempt)));
+    }
+  }
+  throw lastErr;
+}
diff --git a/src/services/openai/imagePlacer.ts b/src/services/openai/imagePlacer.ts
new file mode 100644
index 0000000..d7fda84
--- /dev/null
+++ b/src/services/openai/imagePlacer.ts
@@ -0,0 +1,148 @@
+/**
+ * Replace `<figure class="ai-image">` placeholders in chapter HTML with
+ * actual generated images from OpenAI gpt-image-2. The chapter prompt
+ * instructs the model to emit a `data-prompt` attribute and an optional
+ * `data-aspect` ("square" | "portrait" | "landscape") which we map to an
+ * aspect-ratio-correct size.
+ *
+ * Placeholders that fail to generate fall back to a hairline-bordered
+ * placeholder so the reading still flows.
+ */
+
+import { generateImageWithRetry } from './imageGen';
+import { withSafetyClause } from './safetyClause';
+
+const ASPECT_TO_SIZE: Record<string, string> = {
+  square: '1024x1024',
+  portrait: '1024x1536',
+  landscape: '1536x1024',
+  'wide-landscape': '2048x1152',
+};
+
+interface PlaceholderMatch {
+  full: string;
+  prompt: string;
+  aspect: string;
+  caption: string;
+}
+
+/** Tolerant of attribute order — caption may appear anywhere in the figure. */
+function findPlaceholders(html: string): PlaceholderMatch[] {
+  // Match the entire <figure …> … </figure> for class="ai-image".
+  const figureRegex =
+    /<figure\b[^>]*\bclass="ai-image"[^>]*>([\s\S]*?)<\/figure>/gi;
+  const matches: PlaceholderMatch[] = [];
+  let m: RegExpExecArray | null;
+  while ((m = figureRegex.exec(html)) !== null) {
+    const full = m[0];
+    const inner = m[1];
+    const promptMatch =
+      /data-prompt="([^"]+)"/i.exec(full) ??
+      /data-prompt='([^']+)'/i.exec(full);
+    const aspectMatch =
+      /data-aspect="([^"]+)"/i.exec(full) ??
+      /data-aspect='([^']+)'/i.exec(full);
+    const captionMatch = /<figcaption[^>]*>([\s\S]*?)<\/figcaption>/i.exec(inner);
+    if (!promptMatch) continue;
+    matches.push({
+      full,
+      prompt: promptMatch[1],
+      aspect: (aspectMatch?.[1] ?? 'landscape').toLowerCase(),
+      caption: captionMatch ? captionMatch[1].trim() : '',
+    });
+  }
+  return matches;
+}
+
+export async function replaceAiImagePlaceholders(
+  html: string,
+  apiKey: string,
+  options?: {
+    /** Tighten the prompt with extra context (e.g. chapter theme). */
+    enhancePrompt?: (raw: string, aspect: string) => string;
+    /** Image quality. Defaults to 'high'. */
+    quality?: 'low' | 'medium' | 'high' | 'auto';
+  },
+): Promise<string> {
+  const matches = findPlaceholders(html);
+  if (matches.length === 0) return html;
+
+  // Generate in parallel — gpt-image-2 is async and the OpenAI API supports
+  // concurrent requests. Capped at 3 in flight to be a good citizen.
+  const results: Array<string | null> = await runWithConcurrency(
+    matches.map((m) => async () => {
+      try {
+        const size = ASPECT_TO_SIZE[m.aspect] ?? ASPECT_TO_SIZE.landscape;
+        const enhanced = options?.enhancePrompt
+          ? options.enhancePrompt(m.prompt, m.aspect)
+          : m.prompt;
+        const finalPrompt = withSafetyClause(enhanced);
+        return await generateImageWithRetry(finalPrompt, apiKey, {
+          size,
+          quality: options?.quality ?? 'high',
+        });
+      } catch {
+        return null;
+      }
+    }),
+    3,
+  );
+
+  let out = html;
+  for (let i = 0; i < matches.length; i++) {
+    const m = matches[i];
+    const dataUri = results[i];
+    // The model is told not to include its own figure numbering, but it
+    // sometimes does anyway ("Fig. 1 Caption text"). Strip a leading
+    // "Fig. N" / "Figure N" so we never end up with "Fig. Fig. 1 …".
+    const rawCaption = (m.caption || '').replace(
+      /^\s*(?:Fig(?:ure)?\.?\s*\d+[.:]?\s*)/i,
+      '',
+    ).trim();
+    // Auto-number per chapter: i is 0-indexed, captions read "Fig. 1", "Fig. 2", …
+    const figNum = i + 1;
+    // Keep the original prompt + aspect on the rendered figure so the
+    // per-image refine flow (BuildPage) can read them back, let the user
+    // tweak the prompt, and regenerate just this one image.
+    const figureAttrs = `class="ch-figure" data-image-idx="${i}" data-prompt="${escapeAttr(m.prompt)}" data-aspect="${escapeAttr(m.aspect)}"`;
+    if (dataUri) {
+      // Theme CSS sets a fixed height (170–280px) on .ch-figbox for the
+      // empty-state cream placeholder. With a real image inside, we need to
+      // un-fix the height so the image renders at its natural aspect ratio,
+      // capped by max-height so portrait crops don't dominate the scroll.
+      const replacement = `<figure ${figureAttrs}><div class="ch-figbox" style="height:auto;overflow:visible;"><img src="${dataUri}" alt="${escapeAttr(rawCaption)}" data-image-idx="${i}" style="display:block;max-width:100%;max-height:75vh;height:auto;width:auto;margin:0 auto;cursor:pointer;"></div>${
+        rawCaption
+          ? `<figcaption><span class="ch-fig-num">Fig. ${figNum}</span> ${rawCaption}</figcaption>`
+          : ''
+      }</figure>`;
+      out = out.replace(m.full, replacement);
+    } else {
+      const fallback = `<figure ${figureAttrs}><div class="ch-figbox" style="display:flex;align-items:center;justify-content:center;"><span class="ch-figbox-tag">image unavailable</span></div>${
+        rawCaption ? `<figcaption><span class="ch-fig-num">Fig. ${figNum}</span> ${rawCaption}</figcaption>` : ''
+      }</figure>`;
+      out = out.replace(m.full, fallback);
+    }
+  }
+  return out;
+}
+
+function escapeAttr(s: string): string {
+  return s.replace(/&/g, '&amp;').replace(/"/g, '&quot;');
+}
+
+async function runWithConcurrency<T>(
+  tasks: Array<() => Promise<T>>,
+  limit: number,
+): Promise<T[]> {
+  const results: T[] = new Array(tasks.length);
+  let cursor = 0;
+  async function worker() {
+    while (cursor < tasks.length) {
+      const i = cursor++;
+      results[i] = await tasks[i]();
+    }
+  }
+  const workers = Array.from({ length: Math.min(limit, tasks.length) }, worker);
+  await Promise.all(workers);
+  return results;
+}
diff --git a/src/services/openai/safetyClause.ts b/src/services/openai/safetyClause.ts
new file mode 100644
index 0000000..1220426
--- /dev/null
+++ b/src/services/openai/safetyClause.ts
@@ -0,0 +1,27 @@
+/**
+ * Anti-hallucination safety clause appended to every gpt-image-2 prompt.
+ *
+ * Single source of truth — Claude is no longer asked to write its own trailing
+ * safety clause inside the image prompt (the chapter and slide prompts used
+ * to do both, which the user noticed as redundant copy at the end of every
+ * generated prompt). The factual-fidelity guard is the genuinely useful part
+ * here: even if Claude writes "a chart showing forgetting over 30 days",
+ * gpt-image-2 will happily invent axis ticks ("0, 10, 20, 30" / "100%, 75%,
+ * 50%") that have no source. This clause tells it not to.
+ *
+ * What we don't include here (and why):
+ *   - "No course-position metadata (Chapter N, Class N, …)" — gpt-image-2
+ *     has no access to course context unless Claude wrote it into the
+ *     prompt, and Claude is already instructed not to. Adding this clause
+ *     at the gpt-image-2 level is mentioning something the model couldn't
+ *     have done anyway.
+ */
+export const IMAGE_FACTUAL_SAFETY_CLAUSE =
+  ' Render only text, numbers, dates, names, and citations that appear verbatim earlier in this prompt. Do not invent values: no made-up axis numbers, percentages, sample sizes, dates, author names, or journal titles. If a chart or label would require data that is not in this prompt, omit the values entirely and render the visual as an unlabelled abstract trend.';
+
+/** Append the safety clause to a prompt, idempotent if it's already present. */
+export function withSafetyClause(prompt: string): string {
+  const trimmed = prompt.trimEnd();
+  if (trimmed.includes('IMPORTANT FACTUAL FIDELITY')) return trimmed;
+  return trimmed + IMAGE_FACTUAL_SAFETY_CLAUSE;
+}
diff --git a/src/services/template/generateChapter.ts b/src/services/template/generateChapter.ts
index f50cf91..f0b56ca 100644
--- a/src/services/template/generateChapter.ts
+++ b/src/services/template/generateChapter.ts
@@ -26,6 +26,8 @@ export interface GenerateTemplateChapterInput {
   /** Ollama-specific overrides for non-browser callers. */
   ollamaApiKey?: string;
   ollamaModel?: string;
+  /** Optional cancellation — aborting rejects with the SDK's abort error. */
+  signal?: AbortSignal;
   onText?: (text: string) => void;
   onError?: (err: Error) => void;
 }
@@ -43,7 +45,7 @@ export interface GenerateTemplateChapterResult {
 export async function generateTemplateChapter(
   input: GenerateTemplateChapterInput,
 ): Promise<GenerateTemplateChapterResult> {
-  const { apiKey, setup, chapter, courseTitle, courseOverview, examplePatternContent, provider, ollamaApiKey, ollamaModel, onText, onError } = input;
+  const { apiKey, setup, chapter, courseTitle, courseOverview, examplePatternContent, provider, ollamaApiKey, ollamaModel, signal, onText, onError } = input;
 
   const { systemPrompt, userMessage } = buildTemplateChapterPrompt({
     setup,
@@ -68,6 +70,7 @@ export async function generateTemplateChapter(
       provider,
       ollamaApiKey,
       ollamaModel,
+      signal,
     },
     {
       onText,
diff --git a/src/services/template/parser.ts b/src/services/template/parser.ts
index 8ab2668..5347330 100644
--- a/src/services/template/parser.ts
+++ b/src/services/template/parser.ts
@@ -223,7 +223,13 @@ function parseManifestResourceMap(manifestText: string): Map<string, string> {
     const doc = new DOMParser().parseFromString(manifestText, 'text/xml');
     for (const el of Array.from(doc.getElementsByTagName('resource'))) {
       const id = el.getAttribute('identifier');
-      const href = el.getAttribute('href');
+      // Canvas's own exports omit `href` on discussion (imsdt) and quiz
+      // resources — the file is only listed in a <file> child. Fall back to it,
+      // otherwise those items never resolve (e.g. the example discussion).
+      const href =
+        el.getAttribute('href') ||
+        el.getElementsByTagName('file')[0]?.getAttribute('href') ||
+        undefined;
       if (id && href) map.set(id, href);
     }
   } catch {
diff --git a/src/services/template/templateImsccExporter.ts b/src/services/template/templateImsccExporter.ts
index c7a5394..a0c1af7 100644
--- a/src/services/template/templateImsccExporter.ts
+++ b/src/services/template/templateImsccExporter.ts
@@ -138,6 +138,10 @@ interface ResourceRecord {
   type: string;
   href?: string;
   files: string[];
+  /** `<dependency identifierref>` targets — e.g. a quiz's assessment_meta or a discussion's topicMeta. */
+  dependencies?: string[];
+  /** e.g. "syllabus". */
+  intendeduse?: string;
 }
 
 function parseManifestResources(xmlText: string): Map<string, ResourceRecord> {
@@ -151,11 +155,16 @@ function parseManifestResources(xmlText: string): Map<string, ResourceRecord> {
     const files = Array.from(fileEls)
       .map((f) => f.getAttribute('href') ?? '')
       .filter(Boolean);
+    const dependencies = Array.from(el.getElementsByTagName('dependency'))
+      .map((d) => d.getAttribute('identifierref') ?? '')
+      .filter(Boolean);
     map.set(identifier, {
       identifier,
       type: el.getAttribute('type') ?? '',
       href: el.getAttribute('href') ?? undefined,
       files,
+      dependencies: dependencies.length ? dependencies : undefined,
+      intendeduse: el.getAttribute('intendeduse') ?? undefined,
     });
   }
   return map;
@@ -319,6 +328,50 @@ function emitChapterModule(
   };
 }
 
+// ── Pass-through of the template's own XML ──
+//
+// The parser keeps only a subset of each module/item (no URL for external-link
+// items, no link settings for LTI items, no prerequisites / completion
+// requirements / unlock dates on modules). Re-serialising verbatim modules from
+// that subset silently dropped those — e.g. an external link vanished on import.
+// Verbatim modules are by definition "bundled untouched", so carry their original
+// <module> block through as-is and only renumber its position.
+
+/** `<module identifier="…">…</module>` blocks keyed by identifier. */
+function extractRawModuleBlocks(moduleMetaXml: string): Map<string, string> {
+  const blocks = new Map<string, string>();
+  const re = /<module\s+identifier="([^"]+)"[\s\S]*?<\/module>/g;
+  let m: RegExpExecArray | null;
+  while ((m = re.exec(moduleMetaXml)) !== null) blocks.set(m[1], m[0]);
+  return blocks;
+}
+
+/** Replace only the module-level <position> (the one before <items>). */
+function withModulePosition(block: string, position: number): string {
+  const itemsAt = block.indexOf('<items');
+  if (itemsAt < 0) return block;
+  const head = block.slice(0, itemsAt).replace(/<position>[^<]*<\/position>/, `<position>${position}</position>`);
+  return head + block.slice(itemsAt);
+}
+
+/**
+ * Original manifest organization linkage: item identifier -> identifierref
+ * ('' when the item has none, e.g. sub-headers). Used so verbatim items keep
+ * exactly the manifest references they had (an external link's org item points
+ * at its web-link resource, not at the module_meta identifier).
+ */
+function extractOrgRefs(manifestXml: string): Map<string, string> {
+  const refs = new Map<string, string>();
+  const doc = new DOMParser().parseFromString(manifestXml, 'text/xml');
+  for (const org of Array.from(doc.getElementsByTagName('organization'))) {
+    for (const item of Array.from(org.getElementsByTagName('item'))) {
+      const id = item.getAttribute('identifier');
+      if (id) refs.set(id, item.getAttribute('identifierref') ?? '');
+    }
+  }
+  return refs;
+}
+
 // ── Manifest + module_meta emission ──
 
 function moduleMetaItem(item: NewItem | TemplateModuleItem, isVerbatim: boolean): string {
@@ -363,9 +416,16 @@ ${itemsXml}
   </module>`;
 }
 
-function buildModuleMeta(modules: Array<{ mod: NewModule | TemplateModule; isVerbatim: boolean }>): string {
+function buildModuleMeta(
+  modules: Array<{ mod: NewModule | TemplateModule; isVerbatim: boolean }>,
+  rawBlocks: Map<string, string>,
+): string {
   const xml = modules
-    .map((m, i) => moduleMetaModule({ ...m.mod, position: i + 1 } as NewModule | TemplateModule, m.isVerbatim))
+    .map((m, i) => {
+      const raw = m.isVerbatim ? rawBlocks.get(m.mod.identifier) : undefined;
+      if (raw) return '  ' + withModulePosition(raw, i + 1);
+      return moduleMetaModule({ ...m.mod, position: i + 1 } as NewModule | TemplateModule, m.isVerbatim);
+    })
     .join('\n');
   return `<?xml version="1.0" encoding="UTF-8"?>
 <modules xmlns="http://canvas.instructure.com/xsd/cccv1p0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://canvas.instructure.com/xsd/cccv1p0 https://canvas.instructure.com/xsd/cccv1p0.xsd">
@@ -373,16 +433,18 @@ ${xml}
 </modules>`;
 }
 
-function organizationItem(item: NewItem | TemplateModuleItem): string {
-  const ref = (item as { identifierRef?: string }).identifierRef;
+function organizationItem(item: NewItem | TemplateModuleItem, orgRefs: Map<string, string>): string {
+  const ref = orgRefs.has(item.identifier)
+    ? orgRefs.get(item.identifier) || undefined
+    : (item as { identifierRef?: string }).identifierRef;
   const refAttr = ref ? ` identifierref="${escXml(ref)}"` : '';
   return `          <item identifier="${escXml(item.identifier)}"${refAttr}>
             <title>${escXml(item.title)}</title>
           </item>`;
 }
 
-function organizationModule(mod: NewModule | TemplateModule): string {
-  const itemsXml = mod.items.map(organizationItem).join('\n');
+function organizationModule(mod: NewModule | TemplateModule, orgRefs: Map<string, string>): string {
+  const itemsXml = mod.items.map((it) => organizationItem(it, orgRefs)).join('\n');
   return `        <item identifier="${escXml(mod.identifier)}">
           <title>${escXml(mod.title)}</title>
 ${itemsXml}
@@ -394,14 +456,18 @@ function buildManifest(
   effectiveDescription: string,
   modules: Array<NewModule | TemplateModule>,
   allResources: Array<NewResource | ResourceRecord>,
+  orgRefs: Map<string, string>,
 ): string {
   const courseId = `canvasclassbuild-${slug(effectiveTitle) || 'course'}`;
-  const orgItems = modules.map(organizationModule).join('\n');
+  const orgItems = modules.map((m) => organizationModule(m, orgRefs)).join('\n');
   const resourceXml = allResources
     .map((r) => {
       const files = r.files.map((f) => `<file href="${escXml(f)}"/>`).join('');
+      const { dependencies, intendeduse } = r as ResourceRecord;
+      const deps = (dependencies ?? []).map((d) => `<dependency identifierref="${escXml(d)}"/>`).join('');
       const hrefAttr = r.href ? ` href="${escXml(r.href)}"` : '';
-      return `    <resource identifier="${escXml(r.identifier)}" type="${escXml(r.type)}"${hrefAttr}>${files}</resource>`;
+      const useAttr = intendeduse ? ` intendeduse="${escXml(intendeduse)}"` : '';
+      return `    <resource identifier="${escXml(r.identifier)}" type="${escXml(r.type)}"${hrefAttr}${useAttr}>${files}${deps}</resource>`;
     })
     .join('\n');
 
@@ -502,11 +568,56 @@ export async function assembleTemplateImscc(
   }
 
   const keptResources: ResourceRecord[] = [];
+  const droppedResources: ResourceRecord[] = [];
   for (const r of originalResources.values()) {
-    if (patternRefs.has(r.identifier) && !verbatimRefs.has(r.identifier)) continue;
+    if (patternRefs.has(r.identifier) && !verbatimRefs.has(r.identifier)) {
+      droppedResources.push(r);
+      continue;
+    }
     keptResources.push(r);
   }
 
+  // A dropped resource's dependency resources (a discussion's topicMeta, a quiz's
+  // assessment_meta) belong to it — drop them too unless something we keep still
+  // depends on them.
+  const stillNeeded = (depId: string) =>
+    verbatimRefs.has(depId) ||
+    keptResources.some((k) => k.identifier !== depId && (k.dependencies ?? []).includes(depId));
+  for (let changed = true; changed; ) {
+    changed = false;
+    for (const d of [...droppedResources]) {
+      for (const depId of d.dependencies ?? []) {
+        const dep = keptResources.find((k) => k.identifier === depId);
+        if (dep && !stillNeeded(depId)) {
+          keptResources.splice(keptResources.indexOf(dep), 1);
+          droppedResources.push(dep);
+          changed = true;
+        }
+      }
+    }
+  }
+
+  // Remove the dropped resources' files from the archive. Canvas's native importer
+  // scans folders such as wiki_content/ directly, so a leftover page file would be
+  // imported as a stray (often duplicate) page even though the manifest no longer
+  // lists it.
+  const keptFiles = new Set<string>();
+  for (const k of keptResources) {
+    if (k.href) keptFiles.add(k.href);
+    for (const f of k.files) keptFiles.add(f);
+  }
+  for (const d of droppedResources) {
+    for (const f of [...(d.href ? [d.href] : []), ...d.files]) {
+      if (!keptFiles.has(f)) zip.remove(f);
+    }
+  }
+
+  // The template's own module/org XML, kept to pass verbatim modules through intact.
+  const originalModuleMetaText =
+    (await zip.file('course_settings/module_meta.xml')?.async('string')) ?? '';
+  const rawModuleBlocks = extractRawModuleBlocks(originalModuleMetaText);
+  const orgRefs = extractOrgRefs(originalManifestText);
+
   // Emit new chapter modules from each chapter that has templateContent.
   const newModules: NewModule[] = [];
   const newResources: NewResource[] = [];
@@ -530,7 +641,7 @@ export async function assembleTemplateImscc(
   ];
 
   // Rebuild course_settings/module_meta.xml.
-  zip.file('course_settings/module_meta.xml', buildModuleMeta(orderedModules));
+  zip.file('course_settings/module_meta.xml', buildModuleMeta(orderedModules, rawModuleBlocks));
 
   // Outline-driven overrides: replace syllabus.html body and update the
   // <title> in course_settings.xml. Both are no-ops when outlineFields is
@@ -563,7 +674,7 @@ export async function assembleTemplateImscc(
   ];
   zip.file(
     'imsmanifest.xml',
-    buildManifest(effectiveTitle, effectiveDescription, allModulesForManifest, allResourcesForManifest),
+    buildManifest(effectiveTitle, effectiveDescription, allModulesForManifest, allResourcesForManifest, orgRefs),
   );
 
   return zip.generateAsync({ type: 'blob', compression: 'DEFLATE' });
diff --git a/src/store/apiStore.ts b/src/store/apiStore.ts
index d466b0a..b32eb45 100644
--- a/src/store/apiStore.ts
+++ b/src/store/apiStore.ts
@@ -11,37 +11,43 @@ interface ApiState {
   advancedMode: boolean;
 
   claudeApiKey: string;
-  geminiApiKey: string;
   ollamaApiKey: string;
   ollamaModel: string;
   tavilyApiKey: string;
 
   claudeKeyValid: boolean | null;
-  geminiKeyValid: boolean | null;
   ollamaKeyValid: boolean | null;
   tavilyKeyValid: boolean | null;
 
   isValidatingClaude: boolean;
-  isValidatingGemini: boolean;
   isValidatingOllama: boolean;
   isValidatingTavily: boolean;
+  openaiApiKey: string;
+  elevenLabsApiKey: string;
+  openaiKeyValid: boolean | null;
+  elevenLabsKeyValid: boolean | null;
+  isValidatingOpenai: boolean;
+  isValidatingElevenLabs: boolean;
 
   setProvider: (p: LlmProvider) => void;
   setResearchBackend: (b: ResearchBackend) => void;
   setAdvancedMode: (v: boolean) => void;
   setClaudeApiKey: (key: string) => void;
-  setGeminiApiKey: (key: string) => void;
   setOllamaApiKey: (key: string) => void;
   setOllamaModel: (m: string) => void;
   setTavilyApiKey: (key: string) => void;
   setClaudeKeyValid: (valid: boolean | null) => void;
-  setGeminiKeyValid: (valid: boolean | null) => void;
   setOllamaKeyValid: (valid: boolean | null) => void;
   setTavilyKeyValid: (valid: boolean | null) => void;
   setIsValidatingClaude: (v: boolean) => void;
-  setIsValidatingGemini: (v: boolean) => void;
   setIsValidatingOllama: (v: boolean) => void;
   setIsValidatingTavily: (v: boolean) => void;
+  setOpenaiApiKey: (key: string) => void;
+  setElevenLabsApiKey: (key: string) => void;
+  setOpenaiKeyValid: (valid: boolean | null) => void;
+  setElevenLabsKeyValid: (valid: boolean | null) => void;
+  setIsValidatingOpenai: (v: boolean) => void;
+  setIsValidatingElevenLabs: (v: boolean) => void;
 }
 
 export const useApiStore = create<ApiState>()(
@@ -51,47 +57,75 @@ export const useApiStore = create<ApiState>()(
       researchBackend: 'anthropic',
       advancedMode: false,
       claudeApiKey: '',
-      geminiApiKey: '',
       ollamaApiKey: '',
       ollamaModel: DEFAULT_OLLAMA_MODEL,
       tavilyApiKey: '',
       claudeKeyValid: null,
-      geminiKeyValid: null,
       ollamaKeyValid: null,
       tavilyKeyValid: null,
       isValidatingClaude: false,
-      isValidatingGemini: false,
       isValidatingOllama: false,
       isValidatingTavily: false,
+      openaiApiKey: '',
+      elevenLabsApiKey: '',
+      openaiKeyValid: null,
+      elevenLabsKeyValid: null,
+      isValidatingOpenai: false,
+      isValidatingElevenLabs: false,
 
       setProvider: (p) => set({ provider: p }),
       setResearchBackend: (b) => set({ researchBackend: b }),
       setAdvancedMode: (v) => set({ advancedMode: v }),
       setClaudeApiKey: (key) => set({ claudeApiKey: key, claudeKeyValid: null }),
-      setGeminiApiKey: (key) => set({ geminiApiKey: key, geminiKeyValid: null }),
       setOllamaApiKey: (key) => set({ ollamaApiKey: key, ollamaKeyValid: null }),
       setOllamaModel: (m) => set({ ollamaModel: m }),
       setTavilyApiKey: (key) => set({ tavilyApiKey: key, tavilyKeyValid: null }),
       setClaudeKeyValid: (valid) => set({ claudeKeyValid: valid }),
-      setGeminiKeyValid: (valid) => set({ geminiKeyValid: valid }),
       setOllamaKeyValid: (valid) => set({ ollamaKeyValid: valid }),
       setTavilyKeyValid: (valid) => set({ tavilyKeyValid: valid }),
       setIsValidatingClaude: (v) => set({ isValidatingClaude: v }),
-      setIsValidatingGemini: (v) => set({ isValidatingGemini: v }),
       setIsValidatingOllama: (v) => set({ isValidatingOllama: v }),
       setIsValidatingTavily: (v) => set({ isValidatingTavily: v }),
+      setOpenaiApiKey: (key) => set({ openaiApiKey: key, openaiKeyValid: null }),
+      setElevenLabsApiKey: (key) =>
+        set({ elevenLabsApiKey: key, elevenLabsKeyValid: null }),
+      setOpenaiKeyValid: (valid) => set({ openaiKeyValid: valid }),
+      setElevenLabsKeyValid: (valid) => set({ elevenLabsKeyValid: valid }),
+      setIsValidatingOpenai: (v) => set({ isValidatingOpenai: v }),
+      setIsValidatingElevenLabs: (v) => set({ isValidatingElevenLabs: v }),
     }),
     {
       name: 'classbuild-api-keys',
+      version: 4,
+      migrate(persisted, version) {
+        const state = persisted as Record<string, unknown>;
+        // v0/v1 → v2: drop the retired geminiApiKey.
+        if (version === undefined || version < 2) {
+          delete state.geminiApiKey;
+          delete state.geminiKeyValid;
+          delete state.isValidatingGemini;
+          if (typeof state.openaiApiKey !== 'string') state.openaiApiKey = '';
+          if (typeof state.elevenLabsApiKey !== 'string') {
+            state.elevenLabsApiKey = '';
+          }
+        }
+        // v3 introduced addedVoiceIds for shared-library voices; v4 retires it
+        // (we now use premade-only voices that don't require an add step).
+        if (version === undefined || version < 4) {
+          delete state.addedVoiceIds;
+        }
+        return state;
+      },
       partialize: (state) => ({
         provider: state.provider,
         researchBackend: state.researchBackend,
         advancedMode: state.advancedMode,
         claudeApiKey: state.claudeApiKey,
-        geminiApiKey: state.geminiApiKey,
         ollamaApiKey: state.ollamaApiKey,
         ollamaModel: state.ollamaModel,
         tavilyApiKey: state.tavilyApiKey,
+        openaiApiKey: state.openaiApiKey,
+        elevenLabsApiKey: state.elevenLabsApiKey,
       }),
     },
   ),
diff --git a/src/store/courseStore.ts b/src/store/courseStore.ts
index 1984604..e236970 100644
--- a/src/store/courseStore.ts
+++ b/src/store/courseStore.ts
@@ -4,6 +4,7 @@ import { idbStorage } from './idbStorage';
 import type {
   CourseSetup,
   Syllabus,
+  ChapterSyllabus,
   ResearchDossier,
   GeneratedChapter,
   StageId,
@@ -42,6 +43,10 @@ interface CourseState {
   completeStage: (stage: StageId) => void;
   updateSetup: (updates: Partial<CourseSetup>) => void;
   setSyllabus: (syllabus: Syllabus) => void;
+  /** Edit a single syllabus chapter in place (title, narrative, …) without
+   *  discarding the curriculum map — its syllabusHash staleness check handles
+   *  prompting for a regenerate. */
+  updateSyllabusChapter: (number: number, updates: Partial<ChapterSyllabus>) => void;
   setCurriculumMap: (map: CurriculumMap) => void;
   clearCurriculumMap: () => void;
   addSyllabusMessage: (role: 'user' | 'assistant', content: string) => void;
@@ -51,6 +56,19 @@ interface CourseState {
   updateChapter: (number: number, updates: Partial<GeneratedChapter>) => void;
   setOutlineFields: (fields: OutlineFields | null) => void;
   setOutlineRawText: (text: string | null) => void;
+  /**
+   * Atomically write a single slide's rendered image into a chapter's
+   * slidesJson. Used by the slide-render flow so concurrent gpt-image-2
+   * workers writing different slides don't clobber each other's progress.
+   */
+  setSlideImage: (chapterNum: number, slideIndex: number, dataUri: string) => void;
+  /** Refine one slide (image prompt and/or rendered image) without disturbing
+   *  the rest of the deck. Used by the per-slide "Regenerate image" flow. */
+  updateSlide: (
+    chapterNum: number,
+    slideIndex: number,
+    updates: Partial<import('../types/course').SlideData>,
+  ) => void;
   resetDownstream: () => void;
   reset: () => void;
 }
@@ -64,10 +82,12 @@ const defaultSetup: CourseSetup = {
   numChapters: 12,
   chapterLength: 'standard',
   widgetsPerChapter: 2,
-  themeId: 'midnight',
+  themeId: 'press',
   voiceId: 'Kore',
 };
 
+const LEGACY_THEME_IDS = new Set(['midnight', 'classic', 'ocean', 'warm']);
+
 export const useCourseStore = create<CourseState>()(
   persist(
     (set) => ({
@@ -96,6 +116,18 @@ export const useCourseStore = create<CourseState>()(
 
       setSyllabus: (syllabus) => set({ syllabus, curriculumMap: null }),
 
+      updateSyllabusChapter: (number, updates) =>
+        set((state) => ({
+          syllabus: state.syllabus
+            ? {
+                ...state.syllabus,
+                chapters: state.syllabus.chapters.map((c) =>
+                  c.number === number ? { ...c, ...updates } : c
+                ),
+              }
+            : state.syllabus,
+        })),
+
       setCurriculumMap: (map) => set({ curriculumMap: map }),
 
       clearCurriculumMap: () => set({ curriculumMap: null }),
@@ -126,6 +158,33 @@ export const useCourseStore = create<CourseState>()(
 
       setOutlineFields: (fields) => set({ outlineFields: fields }),
       setOutlineRawText: (text) => set({ outlineRawText: text }),
+      setSlideImage: (chapterNum, slideIndex, dataUri) =>
+        set((state) => ({
+          chapters: state.chapters.map((c) => {
+            if (c.number !== chapterNum) return c;
+            const slides = c.slidesJson ?? [];
+            return {
+              ...c,
+              slidesJson: slides.map((s, i) =>
+                i === slideIndex ? { ...s, imageDataUri: dataUri } : s,
+              ),
+            };
+          }),
+        })),
+
+      updateSlide: (chapterNum, slideIndex, updates) =>
+        set((state) => ({
+          chapters: state.chapters.map((c) => {
+            if (c.number !== chapterNum) return c;
+            const slides = c.slidesJson ?? [];
+            return {
+              ...c,
+              slidesJson: slides.map((s, i) =>
+                i === slideIndex ? { ...s, ...updates } : s,
+              ),
+            };
+          }),
+        })),
 
       resetDownstream: () =>
         set({
@@ -154,7 +213,7 @@ export const useCourseStore = create<CourseState>()(
     {
       name: 'classbuild-course',
       storage: idbStorage,
-      version: 3,
+      version: 4,
       migrate(persisted, version) {
         const state = persisted as Record<string, unknown>;
         // v0→v1: migrate old preview/generate stages to build
@@ -176,6 +235,20 @@ export const useCourseStore = create<CourseState>()(
           if (!('curriculumMap' in state)) state.curriculumMap = null;
         }
         // v2→v3: move to IndexedDB (no schema changes)
+        // v3→v4: replace retired chapter themes (midnight / classic / ocean /
+        // warm) with the new default 'press' — those CSS files no longer ship
+        // and getTheme() falls back to 'press' anyway, but normalize so the
+        // ExportPage picker shows the right selection on first render.
+        if (version === undefined || version < 4) {
+          const setupRecord = state.setup as Record<string, unknown> | undefined;
+          if (setupRecord) {
+            const stale = setupRecord.themeId;
+            if (typeof stale === 'string' && LEGACY_THEME_IDS.has(stale)) {
+              setupRecord.themeId = 'press';
+            }
+            if (!setupRecord.themeId) setupRecord.themeId = 'press';
+          }
+        }
         return state;
       },
       partialize: (state) => ({
@@ -188,12 +261,23 @@ export const useCourseStore = create<CourseState>()(
         curriculumMap: state.curriculumMap,
         outlineFields: state.outlineFields,
         outlineRawText: state.outlineRawText,
-        // Persist chapters but strip blob URLs and large data URIs
+        // Persist chapters but strip the heaviest binaries so the IndexedDB
+        // snapshot stays small and writes don't stall (which silently lost
+        // later-generated content). The big offender is the rendered 4K slide
+        // images (~13/chapter, written one-at-a-time so they also triggered a
+        // write storm); strip their data URIs but KEEP imagePrompt/title so the
+        // deck re-renders next session. Chapter reading figures stay inlined —
+        // they're smaller, written once, and not cleanly re-renderable, so the
+        // reading survives a reload intact. Everything else here is small JSON
+        // (syllabus, quiz + challenge data, transcripts, capped audioDataUri)
+        // and now saves reliably. The idbStorage write timeout surfaces any
+        // residual oversize as a visible error rather than a silent hang.
         chapters: state.chapters.map((c) => ({
           ...c,
           audioUrl: undefined,
           pptxUrl: undefined,
           infographicDataUri: undefined,
+          slidesJson: c.slidesJson?.map((s) => ({ ...s, imageDataUri: undefined })),
         })),
       }),
     }
diff --git a/src/store/idbStorage.ts b/src/store/idbStorage.ts
index bd7b940..0e161ff 100644
--- a/src/store/idbStorage.ts
+++ b/src/store/idbStorage.ts
@@ -87,9 +87,26 @@ const idbStateStorage: StateStorage = {
   async setItem(name: string, value: string): Promise<void> {
     try {
       const db = await getDb();
-      await idbSet(db, name, value);
+      // Guard against a never-settling put (an oversized payload can hang the
+      // IndexedDB write without resolving OR rejecting — which previously left
+      // a deceptively green "Saved" badge while content was silently not saved).
+      // A timeout converts that hang into a visible persistError.
+      await Promise.race([
+        idbSet(db, name, value),
+        new Promise<never>((_, reject) =>
+          setTimeout(() => reject(new Error('IndexedDB write timed out — the course may be too large to save.')), 15000),
+        ),
+      ]);
+      // Stamp the timestamp so the Header can show "Saved · Xs ago".
+      // Dynamic import keeps this circular ref a true cycle break.
+      const { useUiStore } = await import('./uiStore');
+      const ui = useUiStore.getState();
+      ui.setLastSavedAt(Date.now());
+      // Every write serializes the FULL partialized state, so one success
+      // means everything current is on disk — a lingering failure banner
+      // from an earlier attempt is now stale. Clear it.
+      if (ui.persistError) ui.setPersistError(null);
     } catch (err) {
-      // Dynamic import to avoid circular dependency
       const { useUiStore } = await import('./uiStore');
       useUiStore.getState().setPersistError(
         `Failed to save: ${err instanceof Error ? err.message : String(err)}`
diff --git a/src/store/uiStore.ts b/src/store/uiStore.ts
index 10e998f..9dd58e1 100644
--- a/src/store/uiStore.ts
+++ b/src/store/uiStore.ts
@@ -1,16 +1,90 @@
 import { create } from 'zustand';
 
+export interface SlidesRenderState {
+  /** Which chapter's deck is currently being rendered. */
+  chapterNum: number;
+  /** Slides rendered so far (incremented per finished image). */
+  current: number;
+  /** Total slides to render. */
+  total: number;
+  /** Pipeline phase — 'rendering' = gpt-image-2 calls; 'packing' = pptxgenjs. */
+  phase: 'rendering' | 'packing';
+}
+
+/**
+ * Per-artifact "currently generating" state keyed by chapter number. Lifted
+ * from BuildPage component-local useState so the in-flight indicator and
+ * button disable survive route navigation (clicking to Setup and back).
+ */
+export type MaterialKind =
+  | 'quiz'
+  | 'inclassquiz'
+  | 'weeklychallenge'
+  | 'discussion'
+  | 'activities'
+  | 'audio'
+  | 'slides';
+
+/** One failed step from a batch run, kept so the user can see and retry it. */
+export interface BatchFailure {
+  chapter: number;
+  /** Human label, e.g. "Practice quiz" or "Reading". */
+  material: string;
+  message: string;
+}
+
+/** End-of-batch report shown on the Build page until dismissed. */
+export interface BatchSummary {
+  /** Which batch flavour ran — "Retry failed" re-runs the same one. */
+  mode: 'everything' | 'classes';
+  /** Chapters fully processed (not skipped by a Stop) this run. */
+  chaptersCompleted: number;
+  failures: BatchFailure[];
+  cancelled: boolean;
+}
+
 interface UiState {
   showScienceOverlay: boolean;
   isGenerating: boolean;
   streamingText: string;
   error: string | null;
   activeTab: string;
+  /** Persists across reload so users land where they left. */
+  selectedChapterNum: number;
   batchGenerating: boolean;
   batchCurrentChapter: number | null;
   batchPhase: 'thinking' | 'writing' | null;
   batchMaterial: string | null;
+  /** 1-based position in the current batch queue ("Class 3 of 12"). */
+  batchIndex: number | null;
+  /** Number of chapters in the current batch queue. */
+  batchTotal: number | null;
+  /** Wall-clock ms of each completed chapter this run — drives the ETA. */
+  batchChapterMs: number[];
+  /** Report from the last finished batch; null once dismissed. */
+  batchSummary: BatchSummary | null;
   persistError: string | null;
+  /**
+   * Single-mutex slide-deck render. Survives tab switches so the in-flight
+   * render keeps progressing in the background, the button stays disabled
+   * across the app, and the user can return to see live progress.
+   */
+  slidesRender: SlidesRenderState | null;
+  /**
+   * Each per-artifact generation that's mid-flight keyed by chapter number.
+   * Lives in the store (not BuildPage component state) so navigating to
+   * Setup and back preserves the "drafting…" UI and disabled CTA.
+   */
+  inFlight: Partial<Record<MaterialKind, number>>;
+  /**
+   * Set from any page to request that the API keys modal auto-opens on the
+   * next visit to /setup. Lets BuildPage etc. surface "Add OpenAI key →"
+   * CTAs without having to globally render the modal.
+   */
+  openKeysOnNextSetupVisit: boolean;
+  /** Timestamp (ms) of the most recent successful IndexedDB persist. Updated
+   *  by idbStorage on every write; rendered as "Saved · Xs ago" in Header. */
+  lastSavedAt: number | null;
 
   toggleScienceOverlay: () => void;
   setIsGenerating: (v: boolean) => void;
@@ -18,12 +92,46 @@ interface UiState {
   appendStreamingText: (text: string) => void;
   setError: (error: string | null) => void;
   setActiveTab: (tab: string) => void;
+  setSelectedChapterNum: (n: number) => void;
   clearError: () => void;
   setBatchGenerating: (v: boolean) => void;
   setBatchCurrentChapter: (v: number | null) => void;
   setBatchPhase: (v: 'thinking' | 'writing' | null) => void;
   setBatchMaterial: (v: string | null) => void;
+  setBatchProgress: (index: number | null, total: number | null) => void;
+  pushBatchChapterMs: (ms: number) => void;
+  resetBatchChapterMs: () => void;
+  setBatchSummary: (s: BatchSummary | null) => void;
   setPersistError: (msg: string | null) => void;
+  setSlidesRender: (v: SlidesRenderState | null) => void;
+  setInFlight: (kind: MaterialKind, chapterNum: number | null) => void;
+  setOpenKeysOnNextSetupVisit: (v: boolean) => void;
+  setLastSavedAt: (t: number | null) => void;
+}
+
+// Lightweight localStorage helpers for the two UI keys that should outlive a
+// page reload — the active artefact tab and the currently selected chapter.
+// We don't run the full zustand persist middleware here because everything
+// else in uiStore is intentionally transient (in-flight, batch state, etc.).
+const LS_ACTIVE_TAB = 'cb:ui:activeTab';
+const LS_SELECTED_CHAPTER = 'cb:ui:selectedChapterNum';
+
+function readLs(key: string, fallback: string): string {
+  if (typeof window === 'undefined') return fallback;
+  try {
+    return localStorage.getItem(key) ?? fallback;
+  } catch {
+    return fallback;
+  }
+}
+
+function writeLs(key: string, value: string): void {
+  if (typeof window === 'undefined') return;
+  try {
+    localStorage.setItem(key, value);
+  } catch {
+    /* ignore — SecurityError in private mode etc. */
+  }
 }
 
 export const useUiStore = create<UiState>((set) => ({
@@ -31,12 +139,21 @@ export const useUiStore = create<UiState>((set) => ({
   isGenerating: false,
   streamingText: '',
   error: null,
-  activeTab: 'chapter',
+  activeTab: readLs(LS_ACTIVE_TAB, 'chapter'),
+  selectedChapterNum: Number(readLs(LS_SELECTED_CHAPTER, '1')) || 1,
   batchGenerating: false,
   batchCurrentChapter: null,
   batchPhase: null,
   batchMaterial: null,
+  batchIndex: null,
+  batchTotal: null,
+  batchChapterMs: [],
+  batchSummary: null,
   persistError: null,
+  slidesRender: null,
+  inFlight: {},
+  openKeysOnNextSetupVisit: false,
+  lastSavedAt: null,
 
   toggleScienceOverlay: () =>
     set((state) => ({ showScienceOverlay: !state.showScienceOverlay })),
@@ -45,11 +162,33 @@ export const useUiStore = create<UiState>((set) => ({
   appendStreamingText: (text) =>
     set((state) => ({ streamingText: state.streamingText + text })),
   setError: (error) => set({ error }),
-  setActiveTab: (tab) => set({ activeTab: tab }),
+  setActiveTab: (tab) => {
+    writeLs(LS_ACTIVE_TAB, tab);
+    set({ activeTab: tab });
+  },
+  setSelectedChapterNum: (n) => {
+    writeLs(LS_SELECTED_CHAPTER, String(n));
+    set({ selectedChapterNum: n });
+  },
   clearError: () => set({ error: null }),
   setBatchGenerating: (v) => set({ batchGenerating: v }),
   setBatchCurrentChapter: (v) => set({ batchCurrentChapter: v }),
   setBatchPhase: (v) => set({ batchPhase: v }),
   setBatchMaterial: (v) => set({ batchMaterial: v }),
+  setBatchProgress: (index, total) => set({ batchIndex: index, batchTotal: total }),
+  pushBatchChapterMs: (ms) =>
+    set((state) => ({ batchChapterMs: [...state.batchChapterMs, ms] })),
+  resetBatchChapterMs: () => set({ batchChapterMs: [] }),
+  setBatchSummary: (s) => set({ batchSummary: s }),
   setPersistError: (msg) => set({ persistError: msg }),
+  setSlidesRender: (v) => set({ slidesRender: v }),
+  setInFlight: (kind, chapterNum) =>
+    set((state) => {
+      const next = { ...state.inFlight };
+      if (chapterNum === null) delete next[kind];
+      else next[kind] = chapterNum;
+      return { inFlight: next };
+    }),
+  setOpenKeysOnNextSetupVisit: (v) => set({ openKeysOnNextSetupVisit: v }),
+  setLastSavedAt: (t) => set({ lastSavedAt: t }),
 }));
diff --git a/src/templates/codexCourseSiteTemplate.ts b/src/templates/codexCourseSiteTemplate.ts
new file mode 100644
index 0000000..ee900a5
--- /dev/null
+++ b/src/templates/codexCourseSiteTemplate.ts
@@ -0,0 +1,403 @@
+/**
+ * Codex course-site viewer — the published per-course index.html.
+ *
+ * This mirrors the viewer used for the example courses at courses.classbuild.ai
+ * (classbuild-cli/scripts/lib/codexViewerTemplate.ts), so a course published
+ * from the app looks identical to the showcase. Chrome (sidebar, tab bar, cards,
+ * welcome) is the ClassBuild "Codex" Parchment design system: cream ground, ink
+ * prose in Newsreader, maroon + gilt accents, JetBrains Mono metadata. Reading /
+ * Practice Quiz / Weekly Challenge load the already-themed course HTML in
+ * sandboxed iframes (so each course keeps its own Terminal/Studio/Almanac/… look).
+ * Slides, Audio, Discussion and Activities are rendered natively in Codex.
+ *
+ * Tab order: Reading · Practice · Challenge · Discussion · Activities · Audio ·
+ * Slides. A tab appears only when its data exists.
+ *
+ * The assembler in services/export/publishExporter.ts writes the referenced
+ * files (chapters/NN.html, quizzes/NN.html, challenges/NN.html, audio/NN.mp3,
+ * slides/chNN/slide-MM.jpg) into the zip alongside this index.
+ */
+
+export interface SlideMeta { title?: string; }
+export interface DiscussionItem { prompt: string; hook: string; }
+export interface ActivityItem {
+  title: string; duration?: string; description?: string;
+  materials?: string; learningGoal?: string; scalingNotes?: string;
+}
+export interface DownloadLink { label: string; path: string; }
+
+export interface CodexChapterData {
+  number: number;
+  title: string;
+  narrative?: string;
+  chapterHtmlPath?: string;   // chapters/NN.html
+  quizHtmlPath?: string;      // quizzes/NN.html
+  challengeHtmlPath?: string; // challenges/NN.html
+  audioPath?: string;         // audio/NN.mp3
+  transcript?: string;
+  slides?: SlideMeta[];       // for captions; images by convention slides/chNN/slide-MM.jpg
+  discussion?: DiscussionItem[];
+  activities?: ActivityItem[];
+  downloadLinks?: DownloadLink[];
+}
+
+export interface CodexCourseMeta {
+  courseTitle: string;
+  courseOverview: string;
+  audience?: string;
+  themeLabel?: string; // e.g. "Terminal" — the chapter theme, for the sidebar tag
+}
+
+const FONTS_URL =
+  'https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;0,6..72,500;0,6..72,600;0,6..72,700;1,6..72,400;1,6..72,500;1,6..72,600&family=JetBrains+Mono:wght@400;500;600&display=swap';
+
+function esc(s: string): string {
+  return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+}
+function pad2(n: number): string { return String(n).padStart(2, '0'); }
+
+/** Clamp to ~n chars at a word boundary, adding an ellipsis when cut. */
+function clamp(s: string, n: number): string {
+  const str = s.trim();
+  if (str.length <= n) return str;
+  const cut = str.slice(0, n);
+  const lastSpace = cut.lastIndexOf(' ');
+  return (lastSpace > n * 0.6 ? cut.slice(0, lastSpace) : cut).trimEnd() + '…';
+}
+
+function transcriptToHtml(md: string): string {
+  // Light rendering: split on blank lines into paragraphs; strip basic md marks.
+  return md
+    .split(/\n{2,}/)
+    .map((para) => para.trim())
+    .filter(Boolean)
+    .map((para) => `<p>${esc(para.replace(/^#+\s*/, '').replace(/[*_`]/g, ''))}</p>`)
+    .join('\n');
+}
+
+export function buildCodexViewerHtml(course: CodexCourseMeta, chapters: CodexChapterData[]): string {
+  const sorted = [...chapters].sort((a, b) => a.number - b.number);
+
+  const navItems = sorted
+    .map(
+      (ch) =>
+        `<button class="nav-item" data-chapter="${ch.number}" onclick="showChapter(${ch.number})"><span class="nav-num">${pad2(ch.number)}</span><span class="nav-text">${esc(ch.title)}</span></button>`,
+    )
+    .join('\n          ');
+
+  const panels = sorted
+    .map((ch) => {
+      const tabs: Array<{ id: string; label: string }> = [];
+      const contents: string[] = [];
+
+      // Tab order mirrors the ClassBuild app: Reading · Practice · Challenge ·
+      // Discussion · Activities · Audio · Slides.
+
+      // Reading
+      if (ch.chapterHtmlPath) {
+        tabs.push({ id: 'reading', label: 'Reading' });
+        contents.push(
+          `<div class="tab-pane" data-pane="reading"><iframe class="frame" src="${ch.chapterHtmlPath}" sandbox="allow-scripts allow-same-origin" loading="lazy" onload="fit(this)"></iframe></div>`,
+        );
+      }
+      // Practice
+      if (ch.quizHtmlPath) {
+        tabs.push({ id: 'quiz', label: 'Practice' });
+        contents.push(
+          `<div class="tab-pane" data-pane="quiz"><iframe class="frame" src="${ch.quizHtmlPath}" sandbox="allow-scripts allow-same-origin" loading="lazy" onload="fit(this)"></iframe></div>`,
+        );
+      }
+      // Challenge
+      if (ch.challengeHtmlPath) {
+        tabs.push({ id: 'challenge', label: 'Challenge' });
+        contents.push(
+          `<div class="tab-pane" data-pane="challenge"><iframe class="frame" src="${ch.challengeHtmlPath}" sandbox="allow-scripts allow-same-origin" loading="lazy" onload="fit(this)"></iframe></div>`,
+        );
+      }
+      // Discussion
+      if (ch.discussion && ch.discussion.length > 0) {
+        tabs.push({ id: 'discussion', label: 'Discussion' });
+        const cards = ch.discussion
+          .map(
+            (d, i) =>
+              `<div class="card discussion-card"><div class="card-num">${i + 1}</div><div><p class="card-lead">${esc(d.prompt)}</p><p class="card-sub">${esc(d.hook)}</p></div></div>`,
+          )
+          .join('\n');
+        contents.push(`<div class="tab-pane" data-pane="discussion"><div class="card-list">${cards}</div></div>`);
+      }
+      // Activities
+      if (ch.activities && ch.activities.length > 0) {
+        tabs.push({ id: 'activities', label: 'Activities' });
+        const cards = ch.activities
+          .map((a) => {
+            const meta: string[] = [];
+            if (a.materials) meta.push(`<div class="act-row"><span class="act-key">Materials</span><span>${esc(a.materials)}</span></div>`);
+            if (a.learningGoal) meta.push(`<div class="act-row"><span class="act-key">Learning goal</span><span>${esc(a.learningGoal)}</span></div>`);
+            if (a.scalingNotes) meta.push(`<div class="act-row"><span class="act-key">Scaling</span><span>${esc(a.scalingNotes)}</span></div>`);
+            return `<div class="card activity-card"><div class="activity-head"><h3>${esc(a.title)}</h3>${a.duration ? `<span class="badge">${esc(a.duration)}</span>` : ''}</div>${a.description ? `<p class="card-lead">${esc(a.description)}</p>` : ''}${meta.length ? `<div class="act-meta">${meta.join('')}</div>` : ''}</div>`;
+          })
+          .join('\n');
+        contents.push(`<div class="tab-pane" data-pane="activities"><div class="card-list">${cards}</div></div>`);
+      }
+      // Audio
+      if (ch.audioPath) {
+        const transcript = ch.transcript
+          ? `<details class="transcript"><summary>Transcript</summary><div class="transcript-body">${transcriptToHtml(ch.transcript)}</div></details>`
+          : '';
+        tabs.push({ id: 'audio', label: 'Audio' });
+        contents.push(
+          `<div class="tab-pane" data-pane="audio"><div class="audio-wrap"><div class="audio-card"><div class="audio-eyebrow">Audiobook narration</div><audio controls preload="none" src="${ch.audioPath}"></audio></div>${transcript}</div></div>`,
+        );
+      }
+      // Slides
+      if (ch.slides && ch.slides.length > 0) {
+        tabs.push({ id: 'slides', label: 'Slides' });
+        const cards = ch.slides
+          .map((s, i) => {
+            const src = `slides/ch${pad2(ch.number)}/slide-${pad2(i + 1)}.jpg`;
+            return `<figure class="slide-card"><img loading="lazy" src="${src}" alt="${esc(s.title || `Slide ${i + 1}`)}" onerror="this.closest('.slide-card').style.display='none'"><figcaption><span class="slide-n">${pad2(i + 1)}</span>${esc(s.title || '')}</figcaption></figure>`;
+          })
+          .join('\n');
+        contents.push(`<div class="tab-pane" data-pane="slides"><div class="slide-grid">${cards}</div></div>`);
+      }
+
+      const downloads =
+        ch.downloadLinks && ch.downloadLinks.length > 0
+          ? `<div class="downloads">${ch.downloadLinks.map((d) => `<a class="pill" href="${d.path}" download>${esc(d.label)}</a>`).join('')}</div>`
+          : '';
+
+      const tabBar =
+        tabs.length > 1
+          ? `<div class="tab-bar">${tabs.map((t, i) => `<button class="tab${i === 0 ? ' active' : ''}" data-tab="${t.id}" onclick="showTab(this,'${t.id}')">${t.label}</button>`).join('')}</div>`
+          : '';
+
+      // Mark first pane active
+      const firstId = tabs[0]?.id;
+      const renderedContents = contents
+        .map((c) => (firstId && c.includes(`data-pane="${firstId}"`) ? c.replace('class="tab-pane"', 'class="tab-pane active"') : c))
+        .join('\n');
+
+      return `<section class="panel" data-chapter="${ch.number}" hidden>
+        <header class="panel-head">
+          <span class="eyebrow">Class ${pad2(ch.number)}</span>
+          <h2>${esc(ch.title)}</h2>
+          ${ch.narrative ? `<p class="panel-desc">${esc(clamp(ch.narrative, 220))}</p>` : ''}
+          ${downloads}
+        </header>
+        ${tabBar}
+        <div class="panes">${renderedContents}</div>
+      </section>`;
+    })
+    .join('\n');
+
+  const tag = course.themeLabel ? `<span class="tag">${esc(course.themeLabel)}</span>` : '';
+  const overview = course.courseOverview || '';
+
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<meta name="theme-color" content="#f1ebdd">
+<meta name="description" content="${esc((course.courseOverview || course.courseTitle).slice(0, 155))}">
+<title>${esc(course.courseTitle)} — ClassBuild</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link rel="stylesheet" href="${FONTS_URL}">
+<style>
+  *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
+  :root{
+    --page:#f1ebdd; --canvas:#f8f3e6; --raised:#f8f3e6; --sunken:#e8dfc7;
+    --n1:#e8dfc7; --n2:#cfc6ad; --n3:#a89f88; --n4:#7c7464;
+    --ink:#1a1814; --muted:#5d574a; --subtle:#7c7464;
+    --maroon:#6e1f24; --maroon-hv:#842830; --gilt:#a8854a; --link:#1f2e4a;
+    --serif:"Newsreader","Source Serif 4",Georgia,serif;
+    --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace;
+    --rule:rgba(26,24,20,0.10); --rule-2:rgba(26,24,20,0.16);
+    --shadow:0 1px 2px rgba(26,24,20,.05),0 8px 24px rgba(26,24,20,.06);
+  }
+  html{background:var(--page)}
+  body{font-family:var(--serif);background:var(--page);color:var(--ink);min-height:100vh;display:flex;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-size:17px;line-height:1.6}
+
+  /* Sidebar */
+  .sidebar{width:312px;min-height:100vh;background:var(--canvas);border-right:1px solid var(--rule);display:flex;flex-direction:column;position:fixed;inset:0 auto 0 0;overflow-y:auto;z-index:10}
+  .side-head{padding:1.9rem 1.6rem 1.4rem;border-bottom:1px solid var(--rule)}
+  .brand{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--maroon);display:flex;align-items:center;gap:.5rem;margin-bottom:.8rem;text-decoration:none;transition:color .16s}
+  .brand::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gilt)}
+  .brand:hover{color:var(--maroon-hv)}
+  .brand-ext{font-size:.9em;opacity:.5;font-weight:500}
+  .side-head h1{font-family:var(--serif);font-weight:600;font-size:1.4rem;line-height:1.2;letter-spacing:-.01em}
+  .side-head .tag{display:inline-block;margin-top:.85rem;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--n4);border:1px solid var(--n2);border-radius:999px;padding:.2rem .6rem}
+  .side-head p{font-size:.82rem;color:var(--muted);margin-top:.85rem;line-height:1.55;font-style:italic}
+  .nav{flex:1;padding:.9rem .6rem}
+  .nav-label{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--subtle);padding:.4rem .85rem .55rem;font-weight:600}
+  .nav-item{position:relative;display:flex;gap:.7rem;align-items:baseline;width:100%;padding:.6rem .85rem;text-align:left;background:none;border:none;border-radius:7px;color:var(--muted);font-family:var(--serif);font-size:.95rem;line-height:1.35;cursor:pointer;transition:background .16s,color .16s;margin-bottom:1px}
+  .nav-num{font-family:var(--mono);font-size:.72rem;color:var(--gilt);font-weight:600;flex-shrink:0}
+  .nav-item:hover{background:rgba(26,24,20,.04);color:var(--ink)}
+  .nav-item.active{background:rgba(110,31,36,.08);color:var(--ink);font-weight:600}
+  .nav-item.active::before{content:"";position:absolute;left:0;top:7px;bottom:7px;width:2px;background:var(--maroon);border-radius:0 2px 2px 0}
+  .side-foot{padding:1rem 1.5rem 1.25rem;border-top:1px solid var(--rule);font-family:var(--mono);font-size:.66rem;letter-spacing:.04em;color:var(--subtle);text-align:center}
+  .side-foot a{color:var(--maroon);text-decoration:none;font-weight:500}
+
+  /* Main */
+  /* min-width:0 defuses the flex min-content trap — without it the nowrap
+     tab bar widens .main past the viewport on phones. */
+  .main{flex:1;margin-left:312px;min-height:100vh;min-width:0}
+  .panel-head{padding:2.6rem 3rem 1.7rem;border-bottom:1px solid var(--rule);max-width:1180px}
+  .eyebrow{display:inline-block;font-family:var(--mono);font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.18em;color:var(--maroon);margin-bottom:.7rem}
+  .panel-head h2{font-family:var(--serif);font-size:2.5rem;font-weight:600;line-height:1.12;letter-spacing:-.015em}
+  .panel-desc{font-size:1.02rem;color:var(--muted);margin-top:.9rem;line-height:1.55;max-width:66ch}
+  .downloads{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.2rem}
+  .pill{font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;color:var(--link);text-decoration:none;border:1px solid var(--n2);border-radius:999px;padding:.35rem .8rem;transition:background .16s,border-color .16s}
+  .pill:hover{background:var(--sunken);border-color:var(--n3)}
+
+  /* Tab bar */
+  .tab-bar{display:flex;gap:.2rem;flex-wrap:wrap;padding:.9rem 3rem;border-bottom:1px solid var(--rule);background:var(--canvas);position:sticky;top:0;z-index:5}
+  .tab{padding:.5rem 1rem;font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;font-weight:500;border:none;border-radius:6px;cursor:pointer;background:none;color:var(--muted);transition:background .16s,color .16s}
+  .tab:hover{color:var(--ink);background:rgba(26,24,20,.04)}
+  .tab.active{background:var(--maroon);color:var(--canvas)}
+  .tab-pane{display:none}
+  .tab-pane.active{display:block}
+
+  /* Iframes */
+  .frame{width:100%;border:none;min-height:82vh;display:block;background:#fff}
+
+  /* Cards */
+  .card-list{padding:2.4rem 3rem;display:flex;flex-direction:column;gap:.9rem;max-width:920px}
+  .card{background:var(--raised);border:1px solid var(--n1);border-radius:10px;padding:1.4rem 1.5rem;box-shadow:var(--shadow)}
+  .discussion-card{display:flex;gap:1.1rem}
+  .card-num{width:2.1rem;height:2.1rem;border-radius:50%;background:rgba(110,31,36,.08);color:var(--maroon);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:.82rem;font-weight:600;flex-shrink:0}
+  .card-lead{font-size:1.02rem;color:var(--ink);line-height:1.55;font-weight:500}
+  .card-sub{font-size:.9rem;color:var(--muted);margin-top:.55rem;line-height:1.5;font-style:italic}
+  .activity-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:.5rem}
+  .activity-head h3{font-family:var(--serif);font-size:1.25rem;font-weight:600}
+  .badge{font-family:var(--mono);font-size:.68rem;letter-spacing:.05em;text-transform:uppercase;color:var(--gilt);border:1px solid var(--n2);border-radius:999px;padding:.2rem .6rem;white-space:nowrap}
+  .act-meta{margin-top:.9rem;border-top:1px solid var(--rule);padding-top:.8rem;display:flex;flex-direction:column;gap:.5rem}
+  .act-row{display:grid;grid-template-columns:128px 1fr;gap:.8rem;font-size:.9rem;color:var(--muted);line-height:1.5}
+  .act-key{font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--subtle);padding-top:.15rem}
+
+  /* Slides */
+  .slide-grid{padding:2.4rem 3rem;display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:1.4rem;max-width:1180px}
+  .slide-card{background:var(--raised);border:1px solid var(--n1);border-radius:10px;overflow:hidden;box-shadow:var(--shadow)}
+  .slide-card img{display:block;width:100%;height:auto;background:var(--sunken)}
+  .slide-card figcaption{padding:.7rem .9rem;font-size:.85rem;color:var(--muted);display:flex;gap:.5rem;align-items:baseline;border-top:1px solid var(--rule)}
+  .slide-n{font-family:var(--mono);font-size:.7rem;color:var(--gilt);font-weight:600}
+
+  /* Audio */
+  .audio-wrap{padding:2.4rem 3rem;max-width:880px}
+  .audio-card{background:var(--raised);border:1px solid var(--n1);border-radius:10px;padding:1.6rem;box-shadow:var(--shadow)}
+  .audio-eyebrow{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--maroon);margin-bottom:.9rem}
+  .audio-card audio{width:100%}
+  .transcript{margin-top:1.3rem;border-top:1px solid var(--rule);padding-top:1rem}
+  .transcript summary{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);cursor:pointer}
+  .transcript-body{margin-top:.9rem;color:var(--muted)}
+  .transcript-body p{margin-bottom:.8rem;line-height:1.65;font-size:.98rem}
+
+  /* Welcome */
+  .welcome{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;min-height:100svh;text-align:center;padding:2rem 1.5rem}
+  .welcome .eyebrow{margin-bottom:1.4rem}
+  .welcome h2{font-family:var(--serif);font-size:clamp(1.85rem,1rem + 3.4vw,2.7rem);font-weight:600;max-width:22ch;line-height:1.14;letter-spacing:-.015em;margin-bottom:1rem;overflow-wrap:break-word}
+  .welcome p{font-size:1.05rem;color:var(--muted);max-width:48ch;line-height:1.6;font-style:italic}
+  .welcome .rule{width:52px;height:2px;background:var(--gilt);margin-top:1.8rem}
+  .welcome-actions{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;margin-top:2rem}
+  .btn-begin{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--canvas);background:var(--maroon);border:1px solid var(--maroon);border-radius:8px;padding:.85rem 1.4rem;cursor:pointer;transition:background .16s}
+  .btn-begin:hover{background:var(--maroon-hv)}
+  .btn-browse{display:none;align-items:center;gap:.5rem;font-family:var(--mono);font-size:.78rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:none;border:1px solid var(--n2);border-radius:8px;padding:.85rem 1.4rem;cursor:pointer;transition:color .16s,border-color .16s}
+  .btn-browse:hover{color:var(--ink);border-color:var(--n3)}
+
+  .menu-toggle{display:none;position:fixed;top:1rem;left:1rem;z-index:30;background:var(--canvas);border:1px solid var(--n2);border-radius:7px;padding:.5rem .75rem;color:var(--ink);font-size:1.1rem;cursor:pointer;box-shadow:var(--shadow)}
+  .scrim{display:none;position:fixed;inset:0;background:rgba(26,24,20,.35);z-index:9;opacity:0;transition:opacity .25s ease;pointer-events:none}
+
+  @media (prefers-reduced-motion: reduce){
+    *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
+  }
+
+  @media(max-width:920px){
+    .menu-toggle{display:block}
+    .sidebar{transform:translateX(-100%);transition:transform .28s ease;box-shadow:0 0 30px rgba(26,24,20,.2);width:min(312px,86vw)}
+    .sidebar.open{transform:translateX(0)}
+    /* Clear the floating menu toggle so it never overlaps the brand. */
+    .side-head{padding-top:4.3rem}
+    .scrim{display:block}
+    body.nav-open .scrim{opacity:1;pointer-events:auto}
+    body.nav-open{overflow:hidden}
+    .main{margin-left:0}
+    .panel-head{padding:4.2rem 1.4rem 1.4rem}
+    .panel-head h2{font-size:clamp(1.6rem,1.05rem + 3.4vw,2.5rem)}
+    /* One swipeable row instead of a two-deep wrap — keeps the reading high. */
+    .tab-bar{padding:.7rem 1.4rem;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;-webkit-overflow-scrolling:touch}
+    .tab-bar::-webkit-scrollbar{display:none}
+    .tab{white-space:nowrap;flex-shrink:0}
+    .card-list,.slide-grid,.audio-wrap{padding:1.6rem 1.4rem}
+    .slide-grid{grid-template-columns:1fr}
+    .act-row{grid-template-columns:1fr;gap:.15rem}
+    .welcome-actions .btn-browse{display:inline-flex}
+  }
+</style>
+</head>
+<body>
+<button class="menu-toggle" onclick="toggleNav()" aria-label="Open class list" aria-expanded="false">&#9776;</button>
+<div class="scrim" onclick="setNav(false)" aria-hidden="true"></div>
+<nav class="sidebar">
+  <div class="side-head">
+    <a class="brand" href="https://classbuild.ai" target="_blank" rel="noopener">ClassBuild<span class="brand-ext" aria-hidden="true">↗</span></a>
+    <h1>${esc(course.courseTitle)}</h1>
+    ${tag}
+    ${overview ? `<p>${esc(overview.slice(0, 150))}${overview.length > 150 ? '…' : ''}</p>` : ''}
+  </div>
+  <div class="nav">
+    <div class="nav-label">Classes</div>
+    ${navItems}
+  </div>
+  <div class="side-foot">Built with <a href="https://classbuild.ai" target="_blank" rel="noopener">ClassBuild</a></div>
+</nav>
+<main class="main">
+  <div class="welcome" id="welcome">
+    <span class="eyebrow">${sorted.length} ${sorted.length === 1 ? 'class' : 'classes'}</span>
+    <h2>${esc(course.courseTitle)}</h2>
+    ${overview ? `<p>${esc(overview.slice(0, 220))}${overview.length > 220 ? '…' : ''}</p>` : ''}
+    <div class="rule"></div>
+    ${sorted.length > 0 ? `<div class="welcome-actions">
+      <button class="btn-begin" onclick="showChapter(${sorted[0].number})">Begin Class ${pad2(sorted[0].number)} &rarr;</button>
+      <button class="btn-browse" onclick="setNav(true)">Browse all classes</button>
+    </div>` : ''}
+  </div>
+  ${panels}
+</main>
+<script>
+  var _sb=document.querySelector('.sidebar'),_tg=document.querySelector('.menu-toggle');
+  function setNav(open){
+    _sb.classList.toggle('open',open);
+    document.body.classList.toggle('nav-open',open);
+    _tg.innerHTML=open?'&#10005;':'&#9776;';
+    _tg.setAttribute('aria-expanded',open?'true':'false');
+    _tg.setAttribute('aria-label',open?'Close class list':'Open class list');
+  }
+  function toggleNav(){setNav(!_sb.classList.contains('open'));}
+  function fit(f){try{var d=f.contentDocument||f.contentWindow.document;var h=d.documentElement.scrollHeight;if(h>200)f.style.height=h+'px';}catch(e){}}
+  function showChapter(n){
+    var w=document.getElementById('welcome'); if(w)w.style.display='none';
+    document.querySelectorAll('.panel').forEach(function(p){p.hidden=(p.getAttribute('data-chapter')!=n);});
+    document.querySelectorAll('.nav-item').forEach(function(b){b.classList.toggle('active',b.getAttribute('data-chapter')==n);});
+    setNav(false);
+    var panel=document.querySelector('.panel[data-chapter="'+n+'"]');
+    if(panel){var tabs=panel.querySelectorAll('.tab');var panes=panel.querySelectorAll('.tab-pane');
+      if(tabs.length){tabs.forEach(function(t,i){t.classList.toggle('active',i===0);});}
+      panes.forEach(function(p,i){p.classList.toggle('active',i===0);});
+      panel.querySelectorAll('.tab-pane.active iframe').forEach(function(f){fit(f);});
+    }
+    window.scrollTo(0,0);
+  }
+  function showTab(btn,id){
+    var panel=btn.closest('.panel');
+    panel.querySelectorAll('.tab').forEach(function(t){t.classList.remove('active');});
+    panel.querySelectorAll('.tab-pane').forEach(function(p){p.classList.remove('active');});
+    btn.classList.add('active');
+    var pane=panel.querySelector('.tab-pane[data-pane="'+id+'"]');
+    if(pane){pane.classList.add('active');pane.querySelectorAll('iframe').forEach(function(f){fit(f);});}
+  }
+  ${sorted.length === 1 ? `showChapter(${sorted[0].number});` : ''}
+</script>
+</body>
+</html>`;
+}
diff --git a/src/templates/courseViewerTemplate.ts b/src/templates/courseViewerTemplate.ts
deleted file mode 100644
index 7bf9331..0000000
--- a/src/templates/courseViewerTemplate.ts
+++ /dev/null
@@ -1,497 +0,0 @@
-import type { Syllabus, GeneratedChapter } from '../types/course';
-import { getTheme } from '../themes';
-
-interface ChapterWithQuiz extends GeneratedChapter {
-  quizHtml?: string;
-  challengeHtml?: string;
-}
-
-function escapeHtml(str: string): string {
-  return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
-}
-
-function escapeSrcdoc(html: string): string {
-  // For srcdoc attribute: escape quotes and ampersands
-  return html.replace(/&/g, '&amp;').replace(/"/g, '&quot;');
-}
-
-// Injected into every sandboxed iframe payload so the parent can size it via
-// postMessage. Required because the iframes drop `allow-same-origin`, which
-// means the parent can no longer touch `contentDocument` directly.
-const RESIZE_SHIM = '<script>(function(){function p(){try{parent.postMessage({__cbResize:1,h:document.documentElement.scrollHeight},"*")}catch(e){}}window.addEventListener("load",p);if(window.ResizeObserver){try{new ResizeObserver(p).observe(document.documentElement)}catch(e){}}})();</script>';
-
-function withResizeShim(html: string): string {
-  return html + RESIZE_SHIM;
-}
-
-/**
- * Builds a complete, self-contained HTML course viewer.
- * Renders each class reading in an iframe (srcdoc) for CSS/JS isolation.
- * Includes: readings, practice quizzes, discussion questions, infographics.
- */
-export function buildCourseViewerHtml(
-  syllabus: Syllabus,
-  chapters: ChapterWithQuiz[],
-  themeId?: string,
-): string {
-  const t = getTheme(themeId);
-  const sortedChapters = [...chapters].sort((a, b) => a.number - b.number);
-
-  const sidebarItems = sortedChapters.map((ch) => {
-    return `<button class="nav-item" data-chapter="${ch.number}" onclick="showChapter(${ch.number})">${escapeHtml(`Class ${ch.number}: ${ch.title}`)}</button>`;
-  }).join('\n          ');
-
-  const chapterSections = sortedChapters.map((ch) => {
-    const syllCh = syllabus.chapters.find(sc => sc.number === ch.number);
-    const sections: string[] = [];
-
-    // Sub-tabs for this chapter
-    const subTabs: string[] = ['<button class="sub-tab active" data-subtab="reading" onclick="showSubTab(this, \'reading\')">Reading</button>'];
-    if (ch.quizHtml) {
-      subTabs.push('<button class="sub-tab" data-subtab="quiz" onclick="showSubTab(this, \'quiz\')">Practice Quiz</button>');
-    }
-    if (ch.discussionData && ch.discussionData.length > 0) {
-      subTabs.push('<button class="sub-tab" data-subtab="discussion" onclick="showSubTab(this, \'discussion\')">Discussion</button>');
-    }
-    if (ch.challengeHtml) {
-      subTabs.push('<button class="sub-tab" data-subtab="challenge" onclick="showSubTab(this, \'challenge\')">Weekly Challenge</button>');
-    }
-    if (ch.infographicDataUri) {
-      subTabs.push('<button class="sub-tab" data-subtab="infographic" onclick="showSubTab(this, \'infographic\')">Infographic</button>');
-    }
-
-    // Reading iframe
-    sections.push(`
-        <div class="sub-content active" data-subcontent="reading">
-          <iframe class="reading-frame" srcdoc="${escapeSrcdoc(withResizeShim(ch.htmlContent))}" sandbox="allow-scripts"></iframe>
-        </div>`);
-
-    // Practice quiz iframe
-    if (ch.quizHtml) {
-      sections.push(`
-        <div class="sub-content" data-subcontent="quiz">
-          <iframe class="quiz-frame" srcdoc="${escapeSrcdoc(withResizeShim(ch.quizHtml))}" sandbox="allow-scripts"></iframe>
-        </div>`);
-    }
-
-    // Weekly challenge iframe
-    if (ch.challengeHtml) {
-      sections.push(`
-        <div class="sub-content" data-subcontent="challenge">
-          <iframe class="quiz-frame" srcdoc="${escapeSrcdoc(withResizeShim(ch.challengeHtml))}" sandbox="allow-scripts"></iframe>
-        </div>`);
-    }
-
-    // Discussion questions
-    if (ch.discussionData && ch.discussionData.length > 0) {
-      const items = ch.discussionData.map((d, i) =>
-        `<div class="discussion-card">
-            <div class="discussion-num">${i + 1}</div>
-            <div>
-              <p class="discussion-prompt">${escapeHtml(d.prompt)}</p>
-              <p class="discussion-hook">${escapeHtml(d.hook)}</p>
-            </div>
-          </div>`
-      ).join('\n          ');
-      sections.push(`
-        <div class="sub-content" data-subcontent="discussion">
-          <div class="discussion-list">${items}</div>
-        </div>`);
-    }
-
-    // Infographic
-    if (ch.infographicDataUri) {
-      sections.push(`
-        <div class="sub-content" data-subcontent="infographic">
-          <img src="${ch.infographicDataUri}" alt="Infographic for ${escapeHtml(ch.title)}" class="infographic-img" />
-        </div>`);
-    }
-
-    return `
-      <div class="chapter-panel" data-chapter="${ch.number}" style="display:none">
-        <div class="chapter-header">
-          <span class="chapter-label">Class ${ch.number}</span>
-          <h2 class="chapter-title">${escapeHtml(ch.title)}</h2>
-          ${syllCh ? `<p class="chapter-desc">${escapeHtml(syllCh.narrative)}</p>` : ''}
-        </div>
-        ${subTabs.length > 1 ? `<div class="sub-tabs">${subTabs.join('')}</div>` : ''}
-        ${sections.join('')}
-      </div>`;
-  }).join('\n');
-
-  return `<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>${escapeHtml(syllabus.courseTitle)}</title>
-  <style>
-    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
-
-    :root {
-      --bg: ${t.pageBg};
-      --card: ${t.cardBg};
-      --elevated: ${t.elevated};
-      --accent: ${t.accent};
-      --accent-light: ${t.accentLight};
-      --text: ${t.textPrimary};
-      --text-sec: ${t.textSecondary};
-      --text-muted: ${t.textMuted};
-      --success: ${t.success};
-      --font: ${t.headingFont};
-    }
-
-    body {
-      font-family: var(--font);
-      background: var(--bg);
-      color: var(--text);
-      min-height: 100vh;
-      display: flex;
-    }
-
-    /* Sidebar */
-    .sidebar {
-      width: 280px;
-      min-height: 100vh;
-      background: var(--card);
-      border-right: 1px solid ${t.isDark ? 'rgba(139,92,246,0.1)' : 'rgba(0,0,0,0.1)'};
-      display: flex;
-      flex-direction: column;
-      position: fixed;
-      top: 0;
-      left: 0;
-      bottom: 0;
-      overflow-y: auto;
-      z-index: 10;
-    }
-
-    .sidebar-header {
-      padding: 1.5rem;
-      border-bottom: 1px solid ${t.isDark ? 'rgba(139,92,246,0.1)' : 'rgba(0,0,0,0.08)'};
-    }
-
-    .sidebar-header h1 {
-      font-size: 1.1rem;
-      font-weight: 700;
-      color: var(--text);
-      line-height: 1.3;
-    }
-
-    .sidebar-header p {
-      font-size: 0.75rem;
-      color: var(--text-muted);
-      margin-top: 0.5rem;
-      line-height: 1.4;
-    }
-
-    .nav-list {
-      flex: 1;
-      padding: 0.5rem;
-    }
-
-    .nav-item {
-      display: block;
-      width: 100%;
-      padding: 0.75rem 1rem;
-      text-align: left;
-      background: none;
-      border: none;
-      border-radius: 8px;
-      color: var(--text-sec);
-      font-size: 0.85rem;
-      font-family: var(--font);
-      cursor: pointer;
-      transition: all 0.2s;
-      margin-bottom: 2px;
-    }
-
-    .nav-item:hover {
-      background: ${t.isDark ? 'rgba(139,92,246,0.08)' : 'rgba(0,0,0,0.04)'};
-      color: var(--text);
-    }
-
-    .nav-item.active {
-      background: ${t.isDark ? 'rgba(139,92,246,0.15)' : 'rgba(30,58,95,0.1)'};
-      color: var(--accent);
-      font-weight: 600;
-    }
-
-    .sidebar-footer {
-      padding: 1rem 1.5rem;
-      border-top: 1px solid ${t.isDark ? 'rgba(139,92,246,0.1)' : 'rgba(0,0,0,0.08)'};
-      font-size: 0.7rem;
-      color: var(--text-muted);
-      text-align: center;
-    }
-
-    .sidebar-footer a {
-      color: var(--accent);
-      text-decoration: none;
-    }
-
-    /* Main content */
-    .main {
-      flex: 1;
-      margin-left: 280px;
-      min-height: 100vh;
-    }
-
-    .chapter-panel { padding: 0; }
-
-    .chapter-header {
-      padding: 2rem 2.5rem;
-      border-bottom: 1px solid ${t.isDark ? 'rgba(139,92,246,0.1)' : 'rgba(0,0,0,0.08)'};
-    }
-
-    .chapter-label {
-      display: inline-block;
-      font-size: 0.7rem;
-      font-weight: 700;
-      text-transform: uppercase;
-      letter-spacing: 0.1em;
-      color: var(--accent);
-      margin-bottom: 0.5rem;
-    }
-
-    .chapter-title {
-      font-size: 1.8rem;
-      font-weight: 700;
-      color: var(--text);
-      line-height: 1.2;
-    }
-
-    .chapter-desc {
-      font-size: 0.9rem;
-      color: var(--text-sec);
-      margin-top: 0.75rem;
-      line-height: 1.5;
-    }
-
-    /* Sub-tabs */
-    .sub-tabs {
-      display: flex;
-      gap: 0.25rem;
-      padding: 0.75rem 2.5rem;
-      border-bottom: 1px solid ${t.isDark ? 'rgba(139,92,246,0.08)' : 'rgba(0,0,0,0.06)'};
-      background: var(--card);
-    }
-
-    .sub-tab {
-      padding: 0.5rem 1rem;
-      font-size: 0.8rem;
-      font-family: var(--font);
-      border: none;
-      border-radius: 6px;
-      cursor: pointer;
-      transition: all 0.2s;
-      background: none;
-      color: var(--text-muted);
-    }
-
-    .sub-tab:hover { color: var(--text-sec); }
-    .sub-tab.active {
-      background: var(--accent);
-      color: white;
-    }
-
-    .sub-content { display: none; }
-    .sub-content.active { display: block; }
-
-    /* Iframes */
-    .reading-frame, .quiz-frame {
-      width: 100%;
-      border: none;
-      min-height: 80vh;
-    }
-
-    /* Discussion */
-    .discussion-list {
-      padding: 2rem 2.5rem;
-      display: flex;
-      flex-direction: column;
-      gap: 1rem;
-    }
-
-    .discussion-card {
-      display: flex;
-      gap: 1rem;
-      padding: 1.25rem;
-      background: var(--card);
-      border-radius: 10px;
-      border: 1px solid ${t.isDark ? 'rgba(139,92,246,0.1)' : 'rgba(0,0,0,0.08)'};
-    }
-
-    .discussion-num {
-      width: 2rem;
-      height: 2rem;
-      border-radius: 50%;
-      background: ${t.isDark ? 'rgba(139,92,246,0.15)' : 'rgba(30,58,95,0.1)'};
-      color: var(--accent);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 0.8rem;
-      font-weight: 700;
-      flex-shrink: 0;
-    }
-
-    .discussion-prompt {
-      font-size: 0.95rem;
-      color: var(--text);
-      line-height: 1.5;
-      font-weight: 500;
-    }
-
-    .discussion-hook {
-      font-size: 0.8rem;
-      color: var(--text-muted);
-      margin-top: 0.5rem;
-      line-height: 1.4;
-      font-style: italic;
-    }
-
-    /* Infographic */
-    .infographic-img {
-      width: 100%;
-      max-width: 900px;
-      display: block;
-      margin: 2rem auto;
-      border-radius: 10px;
-    }
-
-    /* Welcome screen */
-    .welcome {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      min-height: 80vh;
-      text-align: center;
-      padding: 2rem;
-    }
-
-    .welcome h2 {
-      font-size: 1.5rem;
-      font-weight: 700;
-      color: var(--text);
-      margin-bottom: 0.75rem;
-    }
-
-    .welcome p {
-      font-size: 0.9rem;
-      color: var(--text-sec);
-      max-width: 400px;
-      line-height: 1.5;
-    }
-
-    /* Mobile */
-    .menu-toggle {
-      display: none;
-      position: fixed;
-      top: 1rem;
-      left: 1rem;
-      z-index: 20;
-      background: var(--card);
-      border: 1px solid ${t.isDark ? 'rgba(139,92,246,0.2)' : 'rgba(0,0,0,0.1)'};
-      border-radius: 8px;
-      padding: 0.5rem 0.75rem;
-      color: var(--text);
-      font-size: 1.2rem;
-      cursor: pointer;
-    }
-
-    @media (max-width: 768px) {
-      .menu-toggle { display: block; }
-      .sidebar {
-        transform: translateX(-100%);
-        transition: transform 0.3s;
-      }
-      .sidebar.open { transform: translateX(0); }
-      .main { margin-left: 0; }
-    }
-  </style>
-</head>
-<body>
-  <button class="menu-toggle" onclick="document.querySelector('.sidebar').classList.toggle('open')">&#9776;</button>
-
-  <nav class="sidebar">
-    <div class="sidebar-header">
-      <h1>${escapeHtml(syllabus.courseTitle)}</h1>
-      <p>${escapeHtml(syllabus.courseOverview.slice(0, 150))}${syllabus.courseOverview.length > 150 ? '...' : ''}</p>
-    </div>
-    <div class="nav-list">
-      ${sidebarItems}
-    </div>
-    <div class="sidebar-footer">
-      Built with <a href="#">CanvasClassBuild</a>
-    </div>
-  </nav>
-
-  <main class="main">
-    <div class="welcome" id="welcome">
-      <h2>${escapeHtml(syllabus.courseTitle)}</h2>
-      <p>Select a class from the sidebar to begin.</p>
-    </div>
-    ${chapterSections}
-  </main>
-
-  <script>
-    // Sandboxed iframes post their scrollHeight here; the parent has no
-    // same-origin access into them and must rely on this message channel.
-    window.addEventListener('message', function(e) {
-      if (!e || !e.data || !e.data.__cbResize) return;
-      var iframes = document.querySelectorAll('iframe');
-      for (var i = 0; i < iframes.length; i++) {
-        if (iframes[i].contentWindow === e.source) {
-          iframes[i].style.height = Math.max(e.data.h, 400) + 'px';
-          return;
-        }
-      }
-    });
-
-    function showChapter(num) {
-      // Hide welcome
-      var welcome = document.getElementById('welcome');
-      if (welcome) welcome.style.display = 'none';
-
-      // Hide all chapters, show selected
-      document.querySelectorAll('.chapter-panel').forEach(function(el) {
-        el.style.display = 'none';
-      });
-      var target = document.querySelector('.chapter-panel[data-chapter="' + num + '"]');
-      if (target) target.style.display = 'block';
-
-      // Update nav active state
-      document.querySelectorAll('.nav-item').forEach(function(el) {
-        el.classList.toggle('active', el.getAttribute('data-chapter') == num);
-      });
-
-      // Close mobile menu
-      document.querySelector('.sidebar').classList.remove('open');
-
-      // Reset sub-tabs to first tab
-      var tabs = target && target.querySelectorAll('.sub-tab');
-      var contents = target && target.querySelectorAll('.sub-content');
-      if (tabs && tabs.length > 0) {
-        tabs.forEach(function(t) { t.classList.remove('active'); });
-        contents.forEach(function(c) { c.classList.remove('active'); });
-        tabs[0].classList.add('active');
-        contents[0].classList.add('active');
-      }
-    }
-
-    function showSubTab(btn, tabName) {
-      var panel = btn.closest('.chapter-panel');
-      panel.querySelectorAll('.sub-tab').forEach(function(t) { t.classList.remove('active'); });
-      panel.querySelectorAll('.sub-content').forEach(function(c) { c.classList.remove('active'); });
-      btn.classList.add('active');
-      var target = panel.querySelector('.sub-content[data-subcontent="' + tabName + '"]');
-      if (target) target.classList.add('active');
-    }
-
-    // Auto-show first chapter if only one
-    ${sortedChapters.length === 1 ? `showChapter(${sortedChapters[0].number});` : ''}
-  </script>
-</body>
-</html>`;
-}
diff --git a/src/templates/outcomesTableTemplate.ts b/src/templates/outcomesTableTemplate.ts
new file mode 100644
index 0000000..e647bd8
--- /dev/null
+++ b/src/templates/outcomesTableTemplate.ts
@@ -0,0 +1,438 @@
+import type { CurriculumMap, Syllabus, BloomLevel, AlignmentLevel } from '../types/course';
+import { getTheme, FONTS_URL } from '../themes';
+
+/**
+ * Render the learning-outcomes table as themed HTML, CSV, and as a
+ * standalone HTML document. Three flavours:
+ *
+ *   - buildOutcomesTableFragment — table + minimal scoped styles. Used by the
+ *     Export page iframe preview and embedded inside the publish viewer.
+ *   - buildOutcomesPage — full <!doctype>…</html> document, themed, with the
+ *     same fonts and palette as the publish viewer. The downloadable HTML.
+ *   - buildOutcomesCsv — single string, header row + one row per objective.
+ *
+ * The matrix is objectives × chapters: rows are learning objectives (with a
+ * Bloom-level pill), columns are chapters as Roman numerals, cells show
+ * Introduced / Developed / Mastered when the objective aligns to that chapter.
+ */
+
+const ROMAN_UPPER = [
+  'I', 'II', 'III', 'IV', 'V', 'VI', 'VII', 'VIII', 'IX', 'X',
+  'XI', 'XII', 'XIII', 'XIV', 'XV', 'XVI', 'XVII', 'XVIII', 'XIX', 'XX',
+];
+
+/** Stable colour set for the six Bloom levels. Theme-independent. */
+const BLOOM_PALETTE: Record<BloomLevel, { bg: string; fg: string; label: string }> = {
+  remember:   { bg: '#dde7f6', fg: '#1e3a6b', label: 'remember' },
+  understand: { bg: '#d8eae3', fg: '#1f4a3a', label: 'understand' },
+  apply:      { bg: '#e2ecd1', fg: '#3d5418', label: 'apply' },
+  analyze:    { bg: '#f3e6c9', fg: '#5c3f10', label: 'analyze' },
+  evaluate:   { bg: '#f1d9c4', fg: '#6b3010', label: 'evaluate' },
+  create:     { bg: '#e8d4e0', fg: '#5a1d4a', label: 'create' },
+};
+
+function alignmentLabel(level: AlignmentLevel): string {
+  return level === 'introduced' ? 'I' : level === 'developed' ? 'D' : 'M';
+}
+
+function alignmentTitle(level: AlignmentLevel): string {
+  return level === 'introduced' ? 'Introduced' : level === 'developed' ? 'Developed' : 'Mastered';
+}
+
+function escapeHtml(s: string): string {
+  return s
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;');
+}
+
+function hexToRgbCsv(hex: string): string {
+  const v = hex.replace('#', '');
+  const s = v.length === 3 ? v.split('').map((c) => c + c).join('') : v;
+  const r = parseInt(s.slice(0, 2), 16);
+  const g = parseInt(s.slice(2, 4), 16);
+  const b = parseInt(s.slice(4, 6), 16);
+  return `${r}, ${g}, ${b}`;
+}
+
+function contrastTextOn(hex: string): string {
+  const v = hex.replace('#', '');
+  const s = v.length === 3 ? v.split('').map((c) => c + c).join('') : v;
+  const r = parseInt(s.slice(0, 2), 16) / 255;
+  const g = parseInt(s.slice(2, 4), 16) / 255;
+  const b = parseInt(s.slice(4, 6), 16) / 255;
+  const channel = (c: number) =>
+    c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+  const L = 0.2126 * channel(r) + 0.7152 * channel(g) + 0.0722 * channel(b);
+  const ratioWhite = (1 + 0.05) / (L + 0.05);
+  const ratioDark = (L + 0.05) / (0.0103 + 0.05);
+  return ratioDark >= ratioWhite ? '#1a1a1a' : '#ffffff';
+}
+
+/**
+ * Returns the table HTML plus a scoped `<style>` block. Self-contained — drop
+ * inside an iframe srcdoc, the publish viewer body, or a full page wrapper.
+ */
+export function buildOutcomesTableFragment(
+  map: CurriculumMap,
+  syllabus: Syllabus,
+  themeId?: string,
+): string {
+  const t = getTheme(themeId);
+  const accentRgb = hexToRgbCsv(t.accent);
+  const textRgb = hexToRgbCsv(t.textPrimary);
+  const onAccent = contrastTextOn(t.accent);
+
+  const chapters = [...syllabus.chapters].sort((a, b) => a.number - b.number);
+  const objectives = [...map.objectives].sort((a, b) => a.id - b.id);
+
+  const headerCells = chapters
+    .map((ch, i) => {
+      const roman = ROMAN_UPPER[i] ?? String(i + 1);
+      const safeTitle = escapeHtml(ch.title);
+      return `<th class="lo-ch-head" title="Chapter ${ch.number} — ${safeTitle}"><span class="lo-ch-rom">${roman}</span><span class="lo-ch-title">${safeTitle}</span></th>`;
+    })
+    .join('');
+
+  const bodyRows = objectives
+    .map((obj) => {
+      const bloom = BLOOM_PALETTE[obj.bloomLevel];
+      const pill = `<span class="lo-bloom" style="background:${bloom.bg};color:${bloom.fg};">${bloom.label}</span>`;
+      const cells = chapters
+        .map((ch) => {
+          const level = obj.alignments[ch.number];
+          if (!level) return '<td class="lo-cell lo-cell-empty"><span aria-hidden="true">·</span></td>';
+          const label = alignmentLabel(level);
+          const title = alignmentTitle(level);
+          return `<td class="lo-cell"><span class="lo-mark lo-mark-${level}" title="${title}">${label}</span></td>`;
+        })
+        .join('');
+      return `<tr><td class="lo-obj"><div class="lo-obj-text">${escapeHtml(obj.text)}</div>${pill}</td>${cells}</tr>`;
+    })
+    .join('');
+
+  return `<style>
+.lo-wrap {
+  --lo-accent: ${t.accent};
+  --lo-accent-rgb: ${accentRgb};
+  --lo-text-rgb: ${textRgb};
+  --lo-bg: ${t.pageBg};
+  --lo-card: ${t.cardBg};
+  --lo-text: ${t.textPrimary};
+  --lo-text-muted: ${t.textMuted};
+  --lo-on-accent: ${onAccent};
+  --lo-rule: rgba(var(--lo-text-rgb), ${t.isDark ? '0.12' : '0.09'});
+  --lo-rule-soft: rgba(var(--lo-text-rgb), ${t.isDark ? '0.07' : '0.05'});
+  background: var(--lo-bg);
+  color: var(--lo-text);
+  padding: 2.5rem 2.75rem;
+  font-family: ${t.bodyFont}, system-ui, sans-serif;
+  font-size: 14.5px;
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+.lo-wrap * { box-sizing: border-box; }
+.lo-eyebrow {
+  font-size: 11px;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--lo-accent);
+  font-weight: 600;
+  margin-bottom: 0.65rem;
+}
+.lo-title {
+  font-family: ${t.headingFont}, Georgia, serif;
+  font-size: 1.85rem;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+  line-height: 1.18;
+  margin: 0 0 0.65rem;
+  max-width: 36ch;
+}
+.lo-subtitle {
+  font-size: 0.95rem;
+  color: var(--lo-text-muted);
+  margin: 0 0 2rem;
+  max-width: 64ch;
+  line-height: 1.55;
+}
+.lo-table-wrap {
+  border: 1px solid var(--lo-rule);
+  border-radius: 4px;
+  background: var(--lo-card);
+  overflow-x: auto;
+  margin-bottom: 1.75rem;
+}
+.lo-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-feature-settings: 'tnum' 1;
+}
+.lo-table th, .lo-table td {
+  text-align: left;
+  vertical-align: top;
+  padding: 0.7rem 0.85rem;
+  border-bottom: 1px solid var(--lo-rule-soft);
+}
+.lo-table tr:last-child td { border-bottom: none; }
+.lo-table thead th {
+  background: rgba(var(--lo-text-rgb), ${t.isDark ? '0.04' : '0.025'});
+  border-bottom: 1px solid var(--lo-rule);
+  font-weight: 600;
+  font-size: 11.5px;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--lo-text-muted);
+  position: sticky;
+  top: 0;
+}
+.lo-th-obj {
+  width: 38%;
+  min-width: 280px;
+}
+.lo-ch-head {
+  text-align: center !important;
+  min-width: 54px;
+  padding: 0.6rem 0.4rem !important;
+}
+.lo-ch-rom {
+  display: block;
+  font-family: ${t.headingFont}, Georgia, serif;
+  font-style: italic;
+  font-size: 1.15rem;
+  color: var(--lo-accent);
+  letter-spacing: 0;
+  text-transform: none;
+  font-weight: 500;
+  line-height: 1;
+  margin-bottom: 4px;
+}
+.lo-ch-title {
+  display: block;
+  font-size: 9.5px;
+  letter-spacing: 0.02em;
+  color: var(--lo-text-muted);
+  font-weight: 400;
+  text-transform: none;
+  line-height: 1.3;
+  max-width: 90px;
+  margin: 0 auto;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+.lo-obj {
+  width: 38%;
+  min-width: 280px;
+}
+.lo-obj-text {
+  font-family: ${t.bodyFont}, system-ui, sans-serif;
+  font-size: 14.5px;
+  color: var(--lo-text);
+  line-height: 1.5;
+  margin-bottom: 0.45rem;
+}
+.lo-bloom {
+  display: inline-block;
+  font-size: 10.5px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  padding: 2px 8px;
+  border-radius: 3px;
+  line-height: 1.5;
+}
+.lo-cell {
+  text-align: center;
+  min-width: 54px;
+}
+.lo-cell-empty {
+  color: rgba(var(--lo-text-rgb), 0.18);
+  font-size: 14px;
+}
+.lo-mark {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  border-radius: 50%;
+  font-size: 11.5px;
+  font-weight: 700;
+  letter-spacing: 0;
+  font-family: ${t.bodyFont}, system-ui, sans-serif;
+}
+.lo-mark-introduced {
+  background: rgba(var(--lo-accent-rgb), 0.18);
+  color: var(--lo-accent);
+}
+.lo-mark-developed {
+  background: rgba(var(--lo-accent-rgb), 0.45);
+  color: var(--lo-on-accent);
+}
+.lo-mark-mastered {
+  background: var(--lo-accent);
+  color: var(--lo-on-accent);
+}
+.lo-legend {
+  display: flex;
+  gap: 1.75rem;
+  flex-wrap: wrap;
+  font-size: 12.5px;
+  color: var(--lo-text-muted);
+  padding: 0.85rem 1rem;
+  border: 1px solid var(--lo-rule);
+  background: var(--lo-card);
+  border-radius: 4px;
+}
+.lo-legend-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.55rem;
+}
+.lo-legend-mark {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  font-size: 10.5px;
+  font-weight: 700;
+}
+.lo-foot {
+  margin-top: 1.5rem;
+  padding-top: 0.85rem;
+  border-top: 1px solid var(--lo-rule-soft);
+  font-size: 12px;
+  color: var(--lo-text-muted);
+  display: flex;
+  gap: 1rem;
+  flex-wrap: wrap;
+  letter-spacing: 0.04em;
+}
+@media (max-width: 720px) {
+  .lo-wrap { padding: 1.5rem 1rem; }
+  .lo-title { font-size: 1.5rem; }
+}
+</style>
+<div class="lo-wrap">
+  <div class="lo-eyebrow">Learning outcomes</div>
+  <h1 class="lo-title">${escapeHtml(syllabus.courseTitle)}</h1>
+  <p class="lo-subtitle">${objectives.length} measurable learning objectives mapped across ${chapters.length} ${chapters.length === 1 ? 'chapter' : 'chapters'} — Introduced, Developed, and Mastered.</p>
+
+  <div class="lo-table-wrap">
+    <table class="lo-table">
+      <thead>
+        <tr>
+          <th class="lo-th-obj">Learning objective</th>
+          ${headerCells}
+        </tr>
+      </thead>
+      <tbody>${bodyRows}</tbody>
+    </table>
+  </div>
+
+  <div class="lo-legend">
+    <span class="lo-legend-item"><span class="lo-legend-mark lo-mark-introduced">I</span>Introduced</span>
+    <span class="lo-legend-item"><span class="lo-legend-mark lo-mark-developed">D</span>Developed</span>
+    <span class="lo-legend-item"><span class="lo-legend-mark lo-mark-mastered">M</span>Mastered</span>
+  </div>
+
+  <div class="lo-foot">
+    <span>${objectives.length} objectives</span>
+    <span>${chapters.length} chapters</span>
+    <span>Generated ${formatDate(map.generatedAt)}</span>
+  </div>
+</div>`;
+}
+
+function formatDate(iso: string): string {
+  try {
+    const d = new Date(iso);
+    if (Number.isNaN(d.getTime())) return iso;
+    return d.toLocaleDateString('en-AU', { year: 'numeric', month: 'short', day: 'numeric' });
+  } catch {
+    return iso;
+  }
+}
+
+/** Full standalone HTML document — themed, font-loaded, ready to download. */
+export function buildOutcomesPage(
+  map: CurriculumMap,
+  syllabus: Syllabus,
+  themeId?: string,
+): string {
+  const fragment = buildOutcomesTableFragment(map, syllabus, themeId);
+  const t = getTheme(themeId);
+  const title = `${syllabus.courseTitle} — Learning Outcomes`;
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>${escapeHtml(title)}</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link rel="stylesheet" href="${FONTS_URL}">
+  <style>
+    *, *::before, *::after { box-sizing: border-box; }
+    html, body { margin: 0; padding: 0; background: ${t.pageBg}; }
+  </style>
+</head>
+<body>
+${fragment}
+</body>
+</html>`;
+}
+
+/** CSV: header row + one row per objective. Wide format (chapters as columns). */
+export function buildOutcomesCsv(map: CurriculumMap, syllabus: Syllabus): string {
+  const chapters = [...syllabus.chapters].sort((a, b) => a.number - b.number);
+  const objectives = [...map.objectives].sort((a, b) => a.id - b.id);
+  const header = ['Bloom Level', 'Learning Objective', ...chapters.map((ch) => `Ch ${ch.number}: ${ch.title}`)];
+  const rows = objectives.map((obj) => {
+    const cells = chapters.map((ch) => {
+      const level = obj.alignments[ch.number];
+      return level ? alignmentLabel(level) : '';
+    });
+    return [obj.bloomLevel, obj.text, ...cells];
+  });
+  return [header, ...rows].map((row) => row.map(csvEscape).join(',')).join('\n');
+}
+
+function csvEscape(s: string): string {
+  if (s == null) return '';
+  const needsQuoting = /[",\n\r]/.test(s);
+  const escaped = s.replace(/"/g, '""');
+  return needsQuoting ? `"${escaped}"` : escaped;
+}
+
+/**
+ * Deterministic short hash of the syllabus fields that affect the learning
+ * outcomes prompt. Used for staleness detection: if the hash at render time
+ * differs from the hash stored on `curriculumMap.syllabusHash`, the map was
+ * built against an older syllabus and the user should regenerate.
+ *
+ * Includes course title, overview, and each chapter's title + key concepts +
+ * narrative — the exact inputs the prompt sees.
+ */
+export function hashSyllabus(syllabus: Syllabus): string {
+  const parts: string[] = [];
+  parts.push(syllabus.courseTitle.trim());
+  parts.push(syllabus.courseOverview.trim());
+  for (const ch of [...syllabus.chapters].sort((a, b) => a.number - b.number)) {
+    parts.push(`${ch.number}|${ch.title.trim()}|${(ch.keyConcepts ?? []).join(',')}|${ch.narrative.trim()}`);
+  }
+  const input = parts.join('
');
+  // FNV-1a 32-bit — fast, no crypto dependency, plenty for change detection.
+  let h = 0x811c9dc5;
+  for (let i = 0; i < input.length; i++) {
+    h ^= input.charCodeAt(i);
+    h = Math.imul(h, 0x01000193);
+  }
+  return (h >>> 0).toString(16).padStart(8, '0');
+}
diff --git a/src/templates/quizTemplate.ts b/src/templates/quizTemplate.ts
index c596601..cece1ba 100644
--- a/src/templates/quizTemplate.ts
+++ b/src/templates/quizTemplate.ts
@@ -7,7 +7,26 @@
  *
  * Based on the PSYC2371 practice quiz design.
  */
-import { getTheme } from '../themes';
+import { getTheme, getChapterTheme, FONTS_URL } from '../themes';
+
+/** Each chapter theme implies a different chrome aesthetic — modernist hard
+ *  corners for Studio, friendly rounded blocks for Storybook, hairline serifs
+ *  for Press. These knobs let the quiz inherit the right typographic register
+ *  and the right radius rhythm rather than defaulting to one generic look. */
+function themeChrome(themeId: string): {
+  cardRadius: number;
+  pillRadius: number;
+} {
+  switch (themeId) {
+    case 'press':      return { cardRadius: 2, pillRadius: 12 };
+    case 'notebook':   return { cardRadius: 2, pillRadius: 8  };
+    case 'almanac':    return { cardRadius: 3, pillRadius: 14 };
+    case 'storybook':  return { cardRadius: 8, pillRadius: 20 };
+    case 'studio':     return { cardRadius: 0, pillRadius: 0  };
+    case 'terminal':   return { cardRadius: 4, pillRadius: 10 };
+    default:           return { cardRadius: 4, pillRadius: 12 };
+  }
+}
 
 export function buildQuizHtml(
   quizTitle: string,
@@ -17,6 +36,8 @@ export function buildQuizHtml(
 ): string {
   const escapedQuizData = JSON.stringify(quizData);
   const t = getTheme(themeId);
+  const ct = getChapterTheme(themeId);
+  const chrome = themeChrome(ct.id);
 
   return `<!DOCTYPE html>
 <html lang="en">
@@ -25,6 +46,9 @@ export function buildQuizHtml(
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>${quizTitle}</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link rel="stylesheet" href="${FONTS_URL}">
     <style>
         :root {
             --primary-purple: ${t.accent};
@@ -43,6 +67,14 @@ export function buildQuizHtml(
             --on-accent: ${t.isDark ? '#1a1a2e' : '#ffffff'};
             --shadow: 0 4px 12px rgba(0, 0, 0, ${t.isDark ? '0.4' : '0.15'});
             --transition: all 0.3s ease;
+            /* Theme-driven typography and chrome — mirror the chapter aesthetic
+               so the quiz feels like a continuation of the reading, not a
+               separate app. */
+            --qz-font-display: ${ct.displayFont}, Georgia, serif;
+            --qz-font-body: ${ct.bodyFont}, system-ui, sans-serif;
+            --qz-font-mono: ${ct.monoFont}, ui-monospace, monospace;
+            --qz-card-radius: ${chrome.cardRadius}px;
+            --qz-pill-radius: ${chrome.pillRadius}px;
         }
 
         * {
@@ -52,20 +84,22 @@ export function buildQuizHtml(
         }
 
         body {
-            font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Oxygen, Ubuntu, sans-serif;
+            font-family: var(--qz-font-body);
             line-height: 1.6;
             color: var(--black);
             background-color: ${t.pageBg};
             padding: 20px;
             min-height: 100vh;
             font-size: 12pt;
+            -webkit-font-smoothing: antialiased;
+            -moz-osx-font-smoothing: grayscale;
         }
 
         .quiz-container {
             max-width: 800px;
             margin: 0 auto;
             background-color: ${t.cardBg};
-            border-radius: 12px;
+            border-radius: var(--qz-card-radius);
             box-shadow: var(--shadow);
             overflow: hidden;
             position: relative;
@@ -80,14 +114,21 @@ export function buildQuizHtml(
         }
 
         .header h1 {
+            font-family: var(--qz-font-display);
             margin-bottom: 5px;
-            font-size: 1.8rem;
-            font-weight: 600;
+            font-size: 2rem;
+            font-weight: 500;
+            font-variation-settings: '"opsz" 22';
+            letter-spacing: -0.005em;
+            font-style: ${ct.id === 'studio' ? 'italic' : 'normal'};
         }
 
         .header-subtitle {
-            font-size: 1rem;
-            opacity: 0.8;
+            font-family: var(--qz-font-mono);
+            font-size: 0.82rem;
+            letter-spacing: 0.1em;
+            text-transform: uppercase;
+            opacity: 0.75;
             margin-bottom: 15px;
         }
 
@@ -633,11 +674,14 @@ export function buildQuizHtml(
             padding: 15px;
             margin-bottom: 12px;
             border: 2px solid var(--light-grey);
-            border-radius: 8px;
+            border-radius: var(--qz-card-radius);
             cursor: pointer;
             transition: var(--transition);
             position: relative;
             padding-left: 50px;
+            font-family: var(--qz-font-body);
+            font-size: 1rem;
+            line-height: 1.5;
         }
 
         .option:hover {
@@ -679,8 +723,13 @@ export function buildQuizHtml(
         }
 
         #question-text h3 {
+            font-family: var(--qz-font-display);
+            font-size: 1.35rem;
+            font-weight: 500;
+            font-variation-settings: '"opsz" 18';
+            letter-spacing: -0.003em;
             margin-bottom: 20px;
-            line-height: 1.5;
+            line-height: 1.4;
             color: var(--light-purple);
         }
 
diff --git a/src/templates/weeklyChallengeTemplate.ts b/src/templates/weeklyChallengeTemplate.ts
index 98f92bc..6a83bb4 100644
--- a/src/templates/weeklyChallengeTemplate.ts
+++ b/src/templates/weeklyChallengeTemplate.ts
@@ -24,19 +24,26 @@ export function buildWeeklyChallengeHtml(
   // ── Build-time answer obfuscation ──
   // Strip answer fields from questions and encode them so they don't appear
   // as plaintext in the HTML source. The JS runtime decodes them.
-  const xorKey = 'wc' + (challengeData.metadata.weekNumber || 1);
+  const xorKey = 'wc' + (challengeData.metadata?.weekNumber || 1);
   function obf(val: string | number): string {
     const s = String(val);
     let out = '';
     for (let i = 0; i < s.length; i++) {
-      out += String.fromCharCode(s.charCodeAt(i) ^ xorKey.charCodeAt(i % xorKey.length));
+      // Mask to a byte so this matches Buffer's latin1 truncation (used by the
+      // Node CLI) and so btoa() — which rejects code points > 0xFF — is safe.
+      out += String.fromCharCode((s.charCodeAt(i) ^ xorKey.charCodeAt(i % xorKey.length)) & 0xff);
     }
-    return Buffer.from(out, 'binary').toString('base64');
+    // btoa, NOT Buffer: this template renders in the BROWSER (Build page) as
+    // well as the Node CLI, and `Buffer` is undefined in the browser — the
+    // ReferenceError was swallowed, so the in-browser challenge (and its SCORM
+    // export) silently never rendered. btoa works in both (browser global;
+    // Node >= 16) and the runtime decoder already uses atob.
+    return btoa(out);
   }
 
   // Deep clone and strip answers
   const sanitised = JSON.parse(JSON.stringify(challengeData)) as WeeklyChallengeData;
-  for (const q of sanitised.questions) {
+  for (const q of (sanitised.questions || [])) {
     // Strip answer fields from variants too
     const allVersions = [q, ...(q.variants || []) as Record<string, unknown>[]];
     for (const v of allVersions) {
@@ -2732,7 +2739,15 @@ export function buildWeeklyChallengeHtml(
             return null;
         }
 
-        const scormAPI = findSCORM2004API(window);
+        // findSCORM2004API walks up to window.parent; in a sandboxed / cross-
+        // origin embed (e.g. ClassBuild's preview iframe, which has no
+        // allow-same-origin) reading win.API_1484_11 on the parent throws a
+        // SecurityError. Without this guard the throw aborts init before the
+        // "Begin Challenge" button is wired, so the preview looks dead while the
+        // downloaded file (not sandboxed) works. Guard it: a missing LMS just
+        // means run standalone.
+        let scormAPI = null;
+        try { scormAPI = findSCORM2004API(window); } catch (e) { scormAPI = null; }
         let scormConnected = false;
 
         function scormInit() {
diff --git a/src/themes.ts b/src/themes.ts
deleted file mode 100644
index 9aa83ee..0000000
--- a/src/themes.ts
+++ /dev/null
@@ -1,148 +0,0 @@
-export interface Theme {
-  id: string;
-  name: string;
-  pageBg: string;
-  cardBg: string;
-  elevated: string;
-  accent: string;
-  accentLight: string;
-  warmAccent: string;
-  textPrimary: string;
-  textSecondary: string;
-  textMuted: string;
-  success: string;
-  headingFont: string;
-  bodyFont: string;
-  isDark: boolean;
-}
-
-export const THEMES: Theme[] = [
-  {
-    id: 'midnight',
-    name: 'Midnight',
-    pageBg: '#0f0f1a',
-    cardBg: '#1a1a2e',
-    elevated: '#252540',
-    accent: '#8b5cf6',
-    accentLight: '#a78bfa',
-    warmAccent: '#f59e0b',
-    textPrimary: '#f1f5f9',
-    textSecondary: '#94a3b8',
-    textMuted: '#64748b',
-    success: '#22c55e',
-    headingFont: "system-ui, -apple-system, sans-serif",
-    bodyFont: "'Georgia', 'Times New Roman', serif",
-    isDark: true,
-  },
-  {
-    id: 'classic',
-    name: 'Classic',
-    pageBg: '#faf8f5',
-    cardBg: '#ffffff',
-    elevated: '#f0ebe4',
-    accent: '#1e3a5f',
-    accentLight: '#2d5986',
-    warmAccent: '#b45309',
-    textPrimary: '#1a1a1a',
-    textSecondary: '#4a4a4a',
-    textMuted: '#7a7a7a',
-    success: '#166534',
-    headingFont: "'Georgia', 'Times New Roman', serif",
-    bodyFont: "'Georgia', 'Times New Roman', serif",
-    isDark: false,
-  },
-  {
-    id: 'ocean',
-    name: 'Ocean',
-    pageBg: '#0c1929',
-    cardBg: '#132337',
-    elevated: '#1b3148',
-    accent: '#06b6d4',
-    accentLight: '#22d3ee',
-    warmAccent: '#f59e0b',
-    textPrimary: '#e2e8f0',
-    textSecondary: '#94a3b8',
-    textMuted: '#64748b',
-    success: '#22c55e',
-    headingFont: "system-ui, -apple-system, sans-serif",
-    bodyFont: "system-ui, -apple-system, sans-serif",
-    isDark: true,
-  },
-  {
-    id: 'warm',
-    name: 'Warm',
-    pageBg: '#faf5f0',
-    cardBg: '#ffffff',
-    elevated: '#f5ebe0',
-    accent: '#c2410c',
-    accentLight: '#ea580c',
-    warmAccent: '#92400e',
-    textPrimary: '#1c1917',
-    textSecondary: '#44403c',
-    textMuted: '#78716c',
-    success: '#166534',
-    headingFont: "'Georgia', 'Times New Roman', serif",
-    bodyFont: "'Lora', 'Georgia', serif",
-    isDark: false,
-  },
-];
-
-export function getTheme(themeId?: string): Theme {
-  return THEMES.find(t => t.id === themeId) ?? THEMES[0];
-}
-
-/**
- * Builds a color specification block for injection into any Claude prompt.
- * This tells Claude what colors to use when generating HTML content.
- */
-export function buildThemePromptBlock(theme: Theme): string {
-  return `## VISUAL DESIGN
-Use this exact color scheme and design system:
-- Page background: ${theme.pageBg}
-- Content card background: ${theme.cardBg}
-- Elevated elements: ${theme.elevated}
-- Primary accent: ${theme.accent}
-- Secondary accent: ${theme.accentLight}
-- Warm accent: ${theme.warmAccent} (for highlights and key terms)
-- Primary text: ${theme.textPrimary}
-- Secondary text: ${theme.textSecondary}
-- Muted text: ${theme.textMuted}
-- Success: ${theme.success}
-- Font: ${theme.headingFont} for UI; ${theme.bodyFont} for body prose
-- Max content width: 800px, centered
-- Generous padding and spacing (line-height: 1.8 for prose)
-- Subtle box-shadows on cards: 0 4px 24px ${theme.accent}0d
-- Rounded corners (12px for cards, 8px for inner elements)
-- ${theme.accent} left border on blockquotes (3px solid ${theme.accent})
-- Key terms highlighted with warm accent: background ${theme.warmAccent}1a, padding 2px 6px, border-radius 4px
-- Section dividers: gradient line from transparent through ${theme.accent} to transparent`;
-}
-
-/**
- * Voice options for Gemini TTS. The `id` is the prebuilt voice name passed to
- * the Gemini speech API (e.g. "Kore"). `accent` is a natural-language
- * direction prepended to every chunk so Gemini steers the delivery
- * consistently across chunks and between preview + audiobook output.
- */
-export interface VoiceOption {
-  id: string;
-  label: string;
-  desc: string;
-  accent: string;
-}
-
-export const VOICE_OPTIONS: VoiceOption[] = [
-  { id: 'Kore',       label: 'Kore',       desc: 'Firm American — solid default narrator',    accent: '' },
-  { id: 'Puck',       label: 'Puck',       desc: 'Upbeat American — energetic delivery',      accent: '' },
-  { id: 'Charon',     label: 'Charon',     desc: 'Measured British — lecture-friendly',       accent: 'subtle educated British inflection' },
-  { id: 'Sulafat',    label: 'Sulafat',    desc: 'Warm Australian — story-driven prose',      accent: 'gentle Australian inflection' },
-  { id: 'Rasalgethi', label: 'Rasalgethi', desc: 'Knowledgeable American — technical topics', accent: '' },
-  { id: 'Leda',       label: 'Leda',       desc: 'Youthful British — lively intro chapters',  accent: 'light British inflection' },
-];
-
-/** Voice name used when no override is supplied — matches Gemini TTS default. */
-export const DEFAULT_VOICE_ID = 'Kore';
-
-export function getVoiceOption(voiceId: string | undefined): VoiceOption {
-  return VOICE_OPTIONS.find(v => v.id === voiceId) ?? VOICE_OPTIONS[0];
-}
diff --git a/src/themes/almanac.css b/src/themes/almanac.css
new file mode 100644
index 0000000..27264b0
--- /dev/null
+++ b/src/themes/almanac.css
@@ -0,0 +1,520 @@
+/* ClassBuild chapter theme — almanac
+   Scope: body.theme-almanac or any ancestor with class="theme-almanac"
+   Markup contract: see patches/themes-six.md */
+.theme-almanac {
+  font-family: 'Lora', Georgia, serif;
+  background:
+    radial-gradient(ellipse at 20% 10%, rgba(184, 102, 42, 0.08), transparent 60%),
+    radial-gradient(ellipse at 90% 80%, rgba(58, 42, 28, 0.06), transparent 50%),
+    #f0e6cf;
+  color: #3a2a1c;
+  padding: 60px 72px 44px;
+  font-size: 15px;
+  line-height: 1.65;
+  position: relative;
+}
+.theme-almanac p { margin: 0 0 1em; }
+.theme-almanac em { font-style: italic; }
+
+/* HEAD */
+.theme-almanac .ch-head {
+  text-align: center;
+  margin-bottom: 32px;
+  padding-bottom: 28px;
+  position: relative;
+}
+.theme-almanac .ch-head::after {
+  content: '';
+  position: absolute;
+  bottom: 0; left: 50%; transform: translateX(-50%);
+  width: 60%;
+  border-bottom: 1px solid #b8662a;
+}
+.theme-almanac .ch-head::before {
+  content: '';
+  position: absolute;
+  bottom: 0; left: 50%; transform: translateX(-50%);
+  width: 14px;
+  height: 14px;
+  background: #f0e6cf;
+  border: 1px solid #b8662a;
+  transform: translateX(-50%) rotate(45deg);
+  z-index: 1;
+}
+.theme-almanac .ch-eyebrow {
+  font-family: 'Cormorant Garamond', serif;
+  font-style: italic;
+  font-size: 14px;
+  letter-spacing: 0.3em;
+  text-transform: uppercase;
+  color: #b8662a;
+  margin-bottom: 14px;
+  font-weight: 500;
+}
+.theme-almanac .ch-eyebrow::before { content: '✻  '; }
+.theme-almanac .ch-eyebrow::after { content: '  ✻'; }
+.theme-almanac .ch-title {
+  font-family: 'Cormorant Garamond', serif;
+  font-weight: 500;
+  font-style: italic;
+  font-size: 46px;
+  line-height: 1.05;
+  letter-spacing: 0.005em;
+  margin: 0 0 14px;
+  color: #3a2a1c;
+}
+.theme-almanac .ch-title em {
+  font-style: normal;
+  font-weight: 600;
+  color: #5e7148;
+}
+.theme-almanac .ch-subtitle {
+  font-family: 'Lora', serif;
+  font-style: italic;
+  font-size: 15.5px;
+  line-height: 1.5;
+  color: #6a543d;
+  margin: 0 auto 16px;
+  max-width: 32em;
+}
+.theme-almanac .ch-meta {
+  font-family: 'Cormorant Garamond', serif;
+  font-style: italic;
+  font-size: 13px;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  color: #b8662a;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+}
+.theme-almanac .ch-meta-dot {
+  width: 4px; height: 4px;
+  background: #b8662a;
+  border-radius: 50%;
+  display: inline-block;
+}
+
+/* HOOK */
+.theme-almanac .ch-hook {
+  margin-bottom: 30px;
+  font-size: 15.5px;
+  color: #3a2a1c;
+}
+.theme-almanac .ch-dropcap {
+  float: left;
+  font-family: 'Cormorant Garamond', serif;
+  font-style: italic;
+  font-size: 68px;
+  line-height: 0.85;
+  font-weight: 500;
+  padding: 8px 10px 0 0;
+  color: #b8662a;
+}
+
+/* HEADINGS */
+.theme-almanac h2 {
+  font-family: 'Cormorant Garamond', serif;
+  font-style: italic;
+  font-size: 30px;
+  font-weight: 500;
+  line-height: 1.2;
+  margin: 32px 0 12px;
+  color: #3a2a1c;
+  text-align: center;
+  position: relative;
+  padding-bottom: 12px;
+}
+.theme-almanac h2::after {
+  content: '❦';
+  display: block;
+  position: absolute;
+  bottom: -4px;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 16px;
+  color: #b8662a;
+  font-style: normal;
+}
+.theme-almanac h3 {
+  font-family: 'Cormorant Garamond', serif;
+  font-weight: 600;
+  font-size: 13px;
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
+  margin: 22px 0 8px;
+  color: #5e7148;
+}
+
+/* KEY TERMS */
+.theme-almanac .ch-key {
+  font-family: 'Cormorant Garamond', serif;
+  font-style: italic;
+  font-weight: 600;
+  font-size: 16px;
+  color: #5e7148;
+}
+
+/* CALLOUT */
+.theme-almanac .ch-callout {
+  border: 1px solid #b8662a;
+  padding: 18px 22px;
+  margin: 24px 0;
+  background: #f7eed5;
+  position: relative;
+}
+.theme-almanac .ch-callout::before,
+.theme-almanac .ch-callout::after {
+  content: '';
+  position: absolute;
+  width: 10px; height: 10px;
+  border: 1px solid #b8662a;
+  background: #f0e6cf;
+  transform: rotate(45deg);
+}
+.theme-almanac .ch-callout::before { top: -6px; left: 24px; }
+.theme-almanac .ch-callout::after { bottom: -6px; right: 24px; }
+.theme-almanac .ch-callout-label {
+  font-family: 'Cormorant Garamond', serif;
+  font-style: italic;
+  font-size: 14px;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: #b8662a;
+  margin-bottom: 6px;
+  font-weight: 600;
+}
+.theme-almanac .ch-callout p {
+  margin: 0;
+  font-style: italic;
+  font-size: 14.5px;
+  color: #3a2a1c;
+  line-height: 1.55;
+}
+
+/* DIVIDER */
+.theme-almanac .ch-divider {
+  border: none;
+  height: 18px;
+  margin: 28px 0;
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 18'><path d='M0 9 H80 M120 9 H200' stroke='%23b8662a' fill='none' stroke-width='0.8'/><path d='M100 9 m-8 0 a8 8 0 1 0 16 0 a8 8 0 1 0 -16 0 M100 4 v10 M95 9 h10' stroke='%23b8662a' fill='none' stroke-width='0.8'/></svg>");
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+/* WIDGET */
+.theme-almanac .ch-widget {
+  border: 1px double #b8662a;
+  padding: 20px 22px;
+  margin: 22px 0;
+  background: #f7eed5;
+}
+.theme-almanac .ch-widget-head {
+  margin-bottom: 12px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid rgba(184, 102, 42, 0.4);
+  text-align: center;
+}
+.theme-almanac .ch-widget-label {
+  font-family: 'Cormorant Garamond', serif;
+  font-style: italic;
+  font-size: 12px;
+  letter-spacing: 0.24em;
+  text-transform: uppercase;
+  color: #b8662a;
+  display: block;
+  margin-bottom: 4px;
+}
+.theme-almanac .ch-widget-title {
+  font-family: 'Cormorant Garamond', serif;
+  font-style: italic;
+  font-size: 22px;
+  font-weight: 500;
+  color: #3a2a1c;
+}
+.theme-almanac .ch-widget-sub {
+  margin: 0 0 14px;
+  color: #6a543d;
+  font-size: 13.5px;
+  font-style: italic;
+  text-align: center;
+}
+.theme-almanac .ch-widget-row {
+  display: flex; gap: 14px; margin-bottom: 14px;
+}
+.theme-almanac .ch-widget-field {
+  flex: 1; display: flex; flex-direction: column; gap: 4px;
+}
+.theme-almanac .ch-widget-fieldlabel {
+  font-family: 'Cormorant Garamond', serif;
+  font-style: italic;
+  font-size: 12px;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: #6a543d;
+}
+.theme-almanac .ch-widget-select {
+  background: #f0e6cf;
+  border: 1px solid #b8662a;
+  padding: 7px 10px;
+  font-family: 'Lora', serif;
+  font-size: 13.5px;
+  color: #3a2a1c;
+  font-style: italic;
+}
+.theme-almanac .ch-widget-meters {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px 22px;
+  margin-bottom: 14px;
+}
+.theme-almanac .ch-meter {
+  display: grid;
+  grid-template-columns: 84px 1fr 22px;
+  align-items: center;
+  gap: 10px;
+}
+.theme-almanac .ch-meter-label {
+  font-family: 'Cormorant Garamond', serif;
+  font-style: italic;
+  font-size: 12px;
+  letter-spacing: 0.08em;
+  color: #3a2a1c;
+}
+.theme-almanac .ch-meter-bar {
+  height: 5px;
+  background: #e3d4a8;
+  border: 1px solid #b8662a;
+  position: relative;
+  display: block;
+}
+.theme-almanac .ch-meter-bar > span {
+  position: absolute; left: 0; top: 0; bottom: 0;
+  background: #5e7148;
+  display: block;
+}
+.theme-almanac .ch-meter-num {
+  font-family: 'Cormorant Garamond', serif;
+  font-style: italic;
+  font-weight: 600;
+  text-align: right;
+  font-size: 14px;
+  color: #b8662a;
+}
+.theme-almanac .ch-widget-btn {
+  background: transparent;
+  color: #b8662a;
+  border: 1px solid #b8662a;
+  font-family: 'Cormorant Garamond', serif;
+  font-style: italic;
+  font-size: 13px;
+  letter-spacing: 0.1em;
+  padding: 8px 18px;
+  cursor: pointer;
+}
+.theme-almanac .ch-widget-btn:hover {
+  background: #b8662a;
+  color: #f0e6cf;
+}
+
+/* FIGURE */
+.theme-almanac .ch-figure {
+  margin: 26px 0;
+  text-align: center;
+}
+.theme-almanac .ch-figbox {
+  background: #e3d4a8;
+  color: #5e7148;
+  height: 180px;
+  position: relative;
+  border: 1px solid #b8662a;
+  overflow: hidden;
+}
+.theme-almanac .ch-figbox svg {
+  position: absolute; inset: 0; width: 100%; height: 100%;
+}
+.theme-almanac .ch-figbox-tag {
+  position: absolute; bottom: 10px; left: 50%;
+  transform: translateX(-50%);
+  font-family: 'Cormorant Garamond', serif;
+  font-style: italic;
+  font-size: 11.5px;
+  letter-spacing: 0.1em;
+  color: #6a543d;
+  background: #f0e6cf;
+  padding: 2px 10px;
+  border: 1px solid #b8662a;
+}
+.theme-almanac .ch-figure figcaption {
+  font-family: 'Lora', serif;
+  font-style: italic;
+  font-size: 13px;
+  line-height: 1.4;
+  margin-top: 10px;
+  color: #6a543d;
+  text-align: center;
+}
+.theme-almanac .ch-fig-num {
+  font-family: 'Cormorant Garamond', serif;
+  font-style: italic;
+  font-weight: 600;
+  font-size: 13px;
+  color: #b8662a;
+  margin-right: 6px;
+}
+
+/* QUOTE */
+.theme-almanac .ch-quote {
+  margin: 30px auto;
+  padding: 0 30px;
+  text-align: center;
+  position: relative;
+}
+.theme-almanac .ch-quote::before {
+  content: '“';
+  display: block;
+  font-family: 'Cormorant Garamond', serif;
+  font-size: 60px;
+  line-height: 0.6;
+  color: #b8662a;
+  margin-bottom: 6px;
+}
+.theme-almanac .ch-quote p {
+  font-family: 'Cormorant Garamond', serif;
+  font-style: italic;
+  font-size: 22px;
+  line-height: 1.32;
+  color: #3a2a1c;
+  margin: 0 0 12px;
+  font-weight: 500;
+}
+.theme-almanac .ch-quote cite {
+  font-family: 'Cormorant Garamond', serif;
+  font-style: italic;
+  font-size: 12.5px;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: #b8662a;
+}
+.theme-almanac .ch-quote cite::before { content: '— '; }
+
+/* TAKEAWAYS */
+.theme-almanac .ch-takeaways {
+  margin: 30px 0;
+  padding: 22px 26px;
+  background: #f7eed5;
+  border-top: 1px solid #b8662a;
+  border-bottom: 1px solid #b8662a;
+}
+.theme-almanac .ch-takeaways h2 {
+  font-family: 'Cormorant Garamond', serif;
+  font-style: italic;
+  border: none;
+  margin: 0 0 14px;
+  font-size: 22px;
+  color: #3a2a1c;
+  font-weight: 500;
+  padding: 0;
+  text-align: center;
+}
+.theme-almanac .ch-takeaways h2::after {
+  display: none;
+}
+.theme-almanac .ch-takeaways ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.theme-almanac .ch-takeaways li {
+  font-size: 14px;
+  line-height: 1.55;
+  position: relative;
+  padding-left: 26px;
+}
+.theme-almanac .ch-takeaways li::before {
+  content: '✻';
+  position: absolute;
+  left: 0;
+  color: #b8662a;
+  font-size: 14px;
+  top: 0;
+}
+
+/* LOOKAHEAD */
+.theme-almanac .ch-lookahead {
+  margin: 26px 0 18px;
+  text-align: center;
+  padding: 18px 20px;
+  border: 1px solid #5e7148;
+  background: rgba(94, 113, 72, 0.06);
+}
+.theme-almanac .ch-lookahead-label {
+  font-family: 'Cormorant Garamond', serif;
+  font-style: italic;
+  font-size: 13px;
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
+  color: #5e7148;
+  margin-bottom: 8px;
+  font-weight: 600;
+}
+.theme-almanac .ch-lookahead p {
+  margin: 0;
+  font-family: 'Lora', serif;
+  font-style: italic;
+  font-size: 14px;
+  color: #3a2a1c;
+  line-height: 1.5;
+}
+
+/* REFS */
+.theme-almanac .ch-refs {
+  margin-top: 26px;
+  padding-top: 18px;
+  border-top: 1px solid rgba(184, 102, 42, 0.4);
+}
+.theme-almanac .ch-refs h2 {
+  font-family: 'Cormorant Garamond', serif;
+  font-style: italic;
+  font-size: 14px;
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
+  color: #b8662a;
+  margin: 0 0 10px;
+  font-weight: 600;
+  text-align: center;
+  padding: 0;
+}
+.theme-almanac .ch-refs h2::after { display: none; }
+.theme-almanac .ch-refs p {
+  font-size: 11.5px;
+  line-height: 1.5;
+  text-indent: -1.6em;
+  padding-left: 1.6em;
+  color: #6a543d;
+  margin: 0 0 6px;
+  font-family: 'Lora', serif;
+}
+
+/* FOOT */
+.theme-almanac .ch-foot {
+  margin-top: 24px;
+  padding-top: 14px;
+  border-top: 1px solid rgba(184, 102, 42, 0.4);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-family: 'Cormorant Garamond', serif;
+  font-style: italic;
+  font-size: 12px;
+  letter-spacing: 0.12em;
+  color: #6a543d;
+}
+.theme-almanac .ch-foot-mark {
+  color: #b8662a;
+  font-size: 16px;
+}
diff --git a/src/themes/index.ts b/src/themes/index.ts
new file mode 100644
index 0000000..b12720f
--- /dev/null
+++ b/src/themes/index.ts
@@ -0,0 +1,114 @@
+// Re-export everything from themes.config so call sites that do
+// `import { getTheme } from '../themes'` continue to work.
+export {
+  CHAPTER_THEMES,
+  DEFAULT_CHAPTER_THEME_ID,
+  FONTS_URL,
+  THEMES,
+  getChapterTheme,
+  getTheme,
+  isLegacyChapterHtml,
+  renderChapterHtml,
+  wrapChapterHtml,
+  buildThemePromptBlock,
+} from './themes.config';
+
+export type {
+  ChapterTheme,
+  ChapterThemeId,
+  Theme,
+  ThemeMode,
+  ThemePalette,
+} from './themes.config';
+
+// ─── ElevenLabs voice options ─────────────────────────────────────────────
+//
+// All voices below are in the ElevenLabs premade library — automatically
+// present in every account, no manual "add to library" step required. The
+// IDs are stable across accounts. `accent` is kept in the type for API-shape
+// continuity (the prior Gemini integration used it); ElevenLabs handles
+// accent via the voice itself, so we leave it empty.
+
+export interface VoiceOption {
+  id: string;
+  label: string;
+  desc: string;
+  /** Preview MP3 (public CDN, no auth). The picker also resolves via the
+   *  ElevenLabs API if a static URL rotates. */
+  previewUrl?: string;
+  /** Free-text accent direction. Ignored by ElevenLabs; kept for legacy callers. */
+  accent: string;
+}
+
+export const VOICE_OPTIONS: VoiceOption[] = [
+  {
+    id: 'JBFqnCBsd6RMkjVDRZzb',
+    label: 'George',
+    desc: 'British male · gravelly mature narration — the go-to audiobook voice',
+    previewUrl:
+      'https://storage.googleapis.com/eleven-public-prod/premade/voices/JBFqnCBsd6RMkjVDRZzb/e6206d1a-0721-4787-aafb-06a6e705cac5.mp3',
+    accent: '',
+  },
+  {
+    id: 'onwK4e9ZLuTAKqWW03F9',
+    label: 'Daniel',
+    desc: 'British male · authoritative news-anchor delivery',
+    previewUrl:
+      'https://storage.googleapis.com/eleven-public-prod/premade/voices/onwK4e9ZLuTAKqWW03F9/7eee0236-1a72-4b86-b303-5dcadc007ba9.mp3',
+    accent: '',
+  },
+  {
+    id: 'Xb7hH8MSUJpSbSDYk0k2',
+    label: 'Alice',
+    desc: 'British female · confident, clear — strong for technical reading',
+    previewUrl:
+      'https://storage.googleapis.com/eleven-public-prod/premade/voices/Xb7hH8MSUJpSbSDYk0k2/d10f7534-11f6-41fe-a012-2de1e482d336.mp3',
+    accent: '',
+  },
+  {
+    id: 'pFZP5JQG7iQjIQuC4Bku',
+    label: 'Lily',
+    desc: 'British female · warm conversational — pairs well with humanities',
+    previewUrl:
+      'https://storage.googleapis.com/eleven-public-prod/premade/voices/pFZP5JQG7iQjIQuC4Bku/89b68b35-b3dd-4348-a84a-e3c1f32d8b04.mp3',
+    accent: '',
+  },
+  {
+    id: 'ThT5KcBeYPX3keUQqHPh',
+    label: 'Dorothy',
+    desc: 'British female · soft story-driven cadence',
+    previewUrl:
+      'https://storage.googleapis.com/eleven-public-prod/premade/voices/ThT5KcBeYPX3keUQqHPh/981f0855-6598-48d2-9f8f-b6d92fbbe3fc.mp3',
+    accent: '',
+  },
+  {
+    id: 'IKne3meq5aSn9XLyUdCD',
+    label: 'Charlie',
+    desc: 'Australian male · relaxed, natural — easy long-form listening',
+    previewUrl:
+      'https://storage.googleapis.com/eleven-public-prod/premade/voices/IKne3meq5aSn9XLyUdCD/102de6f2-22ed-43e0-a1f1-111fa75c5481.mp3',
+    accent: '',
+  },
+  {
+    id: 'nPczCjzI2devNBz1zQrb',
+    label: 'Brian',
+    desc: 'American male · deep, measured — gravitas for STEM',
+    previewUrl:
+      'https://storage.googleapis.com/eleven-public-prod/premade/voices/nPczCjzI2devNBz1zQrb/4001737b-cd56-461d-9d0e-a18e9eb02fdd.mp3',
+    accent: '',
+  },
+  {
+    id: 'EXAVITQu4vr4xnSDxMaL',
+    label: 'Sarah',
+    desc: 'American female · clean professional — neutral newsroom reading',
+    previewUrl:
+      'https://storage.googleapis.com/eleven-public-prod/premade/voices/EXAVITQu4vr4xnSDxMaL/6851ec91-9950-471f-8586-357c52539c39.mp3',
+    accent: '',
+  },
+];
+
+export const DEFAULT_VOICE_ID = 'JBFqnCBsd6RMkjVDRZzb'; // George
+
+export function getVoiceOption(voiceId: string | undefined): VoiceOption {
+  return VOICE_OPTIONS.find((v) => v.id === voiceId) ?? VOICE_OPTIONS[0];
+}
diff --git a/src/themes/notebook.css b/src/themes/notebook.css
new file mode 100644
index 0000000..500f6cb
--- /dev/null
+++ b/src/themes/notebook.css
@@ -0,0 +1,482 @@
+/* ClassBuild chapter theme — notebook
+   Scope: body.theme-notebook or any ancestor with class="theme-notebook"
+   Markup contract: see patches/themes-six.md */
+.theme-notebook {
+  font-family: 'IBM Plex Serif', Georgia, serif;
+  background:
+    linear-gradient(rgba(80, 110, 160, 0.08) 1px, transparent 1px) 0 0 / 100% 26px,
+    linear-gradient(90deg, rgba(80, 110, 160, 0.08) 1px, transparent 1px) 0 0 / 26px 100%,
+    #fbf9f3;
+  color: #1a2238;
+  padding: 60px 70px 44px 90px;
+  font-size: 15px;
+  line-height: 1.55;
+  position: relative;
+}
+.theme-notebook::before {
+  /* margin rule */
+  content: '';
+  position: absolute;
+  top: 0; bottom: 0; left: 62px;
+  width: 1px;
+  background: #c93b2a;
+  opacity: 0.35;
+}
+.theme-notebook::after {
+  /* punched holes */
+  content: '';
+  position: absolute;
+  top: 0; bottom: 0; left: 30px;
+  width: 12px;
+  background-image: radial-gradient(circle, rgba(0,0,0,0.05) 4.5px, transparent 5px);
+  background-size: 12px 88px;
+  background-repeat: repeat-y;
+  background-position: 0 60px;
+}
+.theme-notebook p { margin: 0 0 0.9em; }
+.theme-notebook em { font-style: italic; }
+
+/* HEAD */
+.theme-notebook .ch-head {
+  margin-bottom: 30px;
+  padding-bottom: 20px;
+  border-bottom: 1.5px solid #1a2238;
+  position: relative;
+}
+.theme-notebook .ch-eyebrow {
+  font-family: 'IBM Plex Mono', monospace;
+  font-size: 10.5px;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: #c93b2a;
+  margin-bottom: 14px;
+  font-weight: 600;
+}
+.theme-notebook .ch-eyebrow::before { content: '[ '; opacity: 0.6; }
+.theme-notebook .ch-eyebrow::after { content: ' ]'; opacity: 0.6; }
+.theme-notebook .ch-title {
+  font-family: 'IBM Plex Mono', monospace;
+  font-weight: 700;
+  font-size: 36px;
+  line-height: 1.1;
+  letter-spacing: -0.02em;
+  margin: 0 0 14px;
+  color: #1a2238;
+}
+.theme-notebook .ch-title em {
+  font-style: italic;
+  font-weight: 500;
+  color: #c93b2a;
+}
+.theme-notebook .ch-subtitle {
+  font-family: 'IBM Plex Serif', serif;
+  font-style: italic;
+  font-size: 16px;
+  line-height: 1.45;
+  color: #3a4458;
+  margin: 0 0 14px;
+  max-width: 38em;
+}
+.theme-notebook .ch-meta {
+  font-family: 'IBM Plex Mono', monospace;
+  font-size: 10.5px;
+  letter-spacing: 0.04em;
+  color: #6b758b;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.theme-notebook .ch-meta-dot {
+  width: 4px; height: 4px; background: #6b758b;
+  display: inline-block;
+}
+
+/* HOOK */
+.theme-notebook .ch-hook { margin-bottom: 26px; }
+.theme-notebook .ch-dropcap {
+  font-family: 'IBM Plex Mono', monospace;
+  font-weight: 700;
+  font-size: 28px;
+  color: #c93b2a;
+  margin-right: 4px;
+}
+
+/* HEADINGS */
+.theme-notebook h2 {
+  font-family: 'IBM Plex Mono', monospace;
+  font-size: 20px;
+  font-weight: 700;
+  line-height: 1.2;
+  margin: 28px 0 12px;
+  color: #1a2238;
+  letter-spacing: -0.01em;
+}
+.theme-notebook h2::before {
+  content: '§ ';
+  color: #c93b2a;
+  font-weight: 500;
+}
+.theme-notebook h3 {
+  font-family: 'IBM Plex Mono', monospace;
+  font-weight: 500;
+  font-size: 14px;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  margin: 22px 0 8px;
+  color: #1a2238;
+}
+.theme-notebook h3::before {
+  content: '› ';
+  color: #c93b2a;
+}
+
+/* KEY TERMS */
+.theme-notebook .ch-key {
+  font-family: 'IBM Plex Mono', monospace;
+  font-style: normal;
+  font-size: 13.5px;
+  background: #fff3cf;
+  padding: 1px 5px;
+  color: #1a2238;
+  font-weight: 500;
+}
+
+/* CALLOUT */
+.theme-notebook .ch-callout {
+  border: 1.5px dashed #c93b2a;
+  padding: 14px 18px;
+  margin: 22px 0;
+  background: #fef7f0;
+  position: relative;
+}
+.theme-notebook .ch-callout-label {
+  font-family: 'IBM Plex Mono', monospace;
+  font-size: 10px;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  color: #c93b2a;
+  font-weight: 600;
+  margin-bottom: 6px;
+  display: inline-block;
+  background: #fef7f0;
+  padding: 0 6px;
+  position: absolute;
+  top: -7px;
+  left: 12px;
+}
+.theme-notebook .ch-callout p {
+  margin: 0;
+  font-size: 14px;
+  color: #1a2238;
+  line-height: 1.5;
+  padding-top: 4px;
+}
+
+/* DIVIDER */
+.theme-notebook .ch-divider {
+  border: none;
+  height: 22px;
+  margin: 22px 0;
+  background-image: repeating-linear-gradient(90deg, #1a2238 0 6px, transparent 6px 14px);
+  background-position: center;
+  background-size: 100% 1.5px;
+  background-repeat: no-repeat;
+  position: relative;
+}
+
+/* WIDGET */
+.theme-notebook .ch-widget {
+  border: 1.5px solid #1a2238;
+  padding: 18px 20px;
+  margin: 22px 0;
+  background: #fbf9f3;
+  position: relative;
+}
+.theme-notebook .ch-widget::before {
+  /* taped-on label */
+  content: 'INTERACTIVE · WIDGET-01';
+  position: absolute;
+  top: -10px;
+  left: 16px;
+  background: #fff3cf;
+  font-family: 'IBM Plex Mono', monospace;
+  font-size: 9.5px;
+  letter-spacing: 0.14em;
+  padding: 2px 8px;
+  border: 1px solid #1a2238;
+  color: #1a2238;
+  font-weight: 500;
+}
+.theme-notebook .ch-widget-head {
+  margin-bottom: 12px;
+  padding-bottom: 10px;
+  border-bottom: 1px dashed #1a2238;
+}
+.theme-notebook .ch-widget-label { display: none; }
+.theme-notebook .ch-widget-title {
+  font-family: 'IBM Plex Mono', monospace;
+  font-size: 17px;
+  font-weight: 700;
+  color: #1a2238;
+}
+.theme-notebook .ch-widget-sub {
+  margin: 0 0 14px;
+  color: #3a4458;
+  font-size: 13.5px;
+  font-style: italic;
+}
+.theme-notebook .ch-widget-row {
+  display: flex; gap: 14px; margin-bottom: 14px;
+}
+.theme-notebook .ch-widget-field {
+  flex: 1; display: flex; flex-direction: column; gap: 4px;
+}
+.theme-notebook .ch-widget-fieldlabel {
+  font-family: 'IBM Plex Mono', monospace;
+  font-size: 10px;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: #6b758b;
+}
+.theme-notebook .ch-widget-fieldlabel::before { content: '> '; color: #c93b2a; }
+.theme-notebook .ch-widget-select {
+  background: #ffffff;
+  border: 1px solid #1a2238;
+  padding: 7px 10px;
+  font-family: 'IBM Plex Mono', monospace;
+  font-size: 13px;
+  color: #1a2238;
+}
+.theme-notebook .ch-widget-meters {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px 26px;
+  margin-bottom: 14px;
+  background:
+    linear-gradient(rgba(80, 110, 160, 0.05) 1px, transparent 1px) 0 0 / 100% 22px,
+    linear-gradient(90deg, rgba(80, 110, 160, 0.05) 1px, transparent 1px) 0 0 / 22px 100%;
+  padding: 8px;
+}
+.theme-notebook .ch-meter {
+  display: grid;
+  grid-template-columns: 84px 1fr 22px;
+  align-items: center;
+  gap: 8px;
+}
+.theme-notebook .ch-meter-label {
+  font-family: 'IBM Plex Mono', monospace;
+  font-size: 10px;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: #1a2238;
+}
+.theme-notebook .ch-meter-bar {
+  height: 14px;
+  background: #ffffff;
+  border: 1px solid #1a2238;
+  position: relative;
+  display: block;
+}
+.theme-notebook .ch-meter-bar > span {
+  position: absolute; left: 0; top: 0; bottom: 0;
+  background: repeating-linear-gradient(45deg, #1a2238 0 3px, transparent 3px 6px);
+  display: block;
+}
+.theme-notebook .ch-meter-num {
+  font-family: 'IBM Plex Mono', monospace;
+  font-weight: 700;
+  text-align: right;
+  font-size: 12px;
+  color: #1a2238;
+}
+.theme-notebook .ch-widget-btn {
+  background: #1a2238;
+  color: #fbf9f3;
+  border: none;
+  font-family: 'IBM Plex Mono', monospace;
+  font-size: 11px;
+  letter-spacing: 0.08em;
+  padding: 9px 14px;
+  cursor: pointer;
+}
+.theme-notebook .ch-widget-btn::before { content: '[ '; }
+.theme-notebook .ch-widget-btn::after { content: ' ]'; }
+
+/* FIGURE */
+.theme-notebook .ch-figure { margin: 26px 0; }
+.theme-notebook .ch-figbox {
+  background: #ffffff;
+  color: #1a2238;
+  height: 160px;
+  position: relative;
+  border: 1.5px solid #1a2238;
+  overflow: hidden;
+}
+.theme-notebook .ch-figbox svg {
+  position: absolute; inset: 0; width: 100%; height: 100%;
+}
+.theme-notebook .ch-figbox-tag {
+  position: absolute; bottom: 8px; left: 10px;
+  font-family: 'IBM Plex Mono', monospace;
+  font-size: 10px;
+  letter-spacing: 0.06em;
+  color: #1a2238;
+  background: #fff3cf;
+  padding: 2px 6px;
+  border: 1px solid #1a2238;
+}
+.theme-notebook .ch-figure figcaption {
+  font-family: 'IBM Plex Serif', serif;
+  font-size: 13px;
+  line-height: 1.4;
+  margin-top: 8px;
+  color: #3a4458;
+}
+.theme-notebook .ch-fig-num {
+  font-family: 'IBM Plex Mono', monospace;
+  font-size: 11px;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: #c93b2a;
+  font-weight: 600;
+  margin-right: 6px;
+}
+
+/* QUOTE */
+.theme-notebook .ch-quote {
+  border-left: 4px double #c93b2a;
+  padding: 6px 0 6px 18px;
+  margin: 26px 0;
+}
+.theme-notebook .ch-quote p {
+  font-family: 'IBM Plex Serif', serif;
+  font-style: italic;
+  font-size: 17px;
+  line-height: 1.45;
+  color: #1a2238;
+  margin: 0 0 8px;
+}
+.theme-notebook .ch-quote cite {
+  font-family: 'IBM Plex Mono', monospace;
+  font-style: normal;
+  font-size: 10.5px;
+  letter-spacing: 0.06em;
+  color: #6b758b;
+}
+.theme-notebook .ch-quote cite::before { content: '— '; }
+
+/* TAKEAWAYS */
+.theme-notebook .ch-takeaways {
+  border: 1.5px solid #1a2238;
+  padding: 18px 22px;
+  margin: 28px 0;
+  background: #fff3cf;
+  position: relative;
+}
+.theme-notebook .ch-takeaways h2 {
+  font-family: 'IBM Plex Mono', monospace;
+  border: none;
+  margin: 0 0 12px;
+  font-size: 13px;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  color: #1a2238;
+  font-weight: 700;
+  padding: 0;
+}
+.theme-notebook .ch-takeaways h2::before { content: '[ '; color: #c93b2a; }
+.theme-notebook .ch-takeaways h2::after { content: ' ]'; color: #c93b2a; }
+.theme-notebook .ch-takeaways ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  counter-reset: takeaway;
+}
+.theme-notebook .ch-takeaways li {
+  font-size: 13.5px;
+  line-height: 1.5;
+  position: relative;
+  padding-left: 28px;
+  counter-increment: takeaway;
+}
+.theme-notebook .ch-takeaways li::before {
+  content: '☐  ' counter(takeaway);
+  position: absolute;
+  left: 0;
+  font-family: 'IBM Plex Mono', monospace;
+  font-size: 11px;
+  color: #c93b2a;
+  top: 1px;
+  font-weight: 600;
+}
+
+/* LOOKAHEAD */
+.theme-notebook .ch-lookahead {
+  margin: 22px 0 18px;
+  padding: 14px 16px;
+  border-left: 4px solid #c93b2a;
+  background: #fef7f0;
+}
+.theme-notebook .ch-lookahead-label {
+  font-family: 'IBM Plex Mono', monospace;
+  font-size: 10px;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  color: #c93b2a;
+  margin-bottom: 6px;
+  font-weight: 600;
+}
+.theme-notebook .ch-lookahead-label::before { content: '→ '; }
+.theme-notebook .ch-lookahead p {
+  margin: 0;
+  font-size: 13.5px;
+  color: #1a2238;
+  line-height: 1.5;
+}
+
+/* REFS */
+.theme-notebook .ch-refs { margin-top: 24px; }
+.theme-notebook .ch-refs h2 {
+  font-family: 'IBM Plex Mono', monospace;
+  font-size: 11px;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  color: #1a2238;
+  margin: 0 0 10px;
+  font-weight: 600;
+}
+.theme-notebook .ch-refs h2::before { content: '['; color: #c93b2a; padding-right: 4px; }
+.theme-notebook .ch-refs h2::after { content: ']'; color: #c93b2a; padding-left: 4px; }
+.theme-notebook .ch-refs p {
+  font-size: 11px;
+  line-height: 1.5;
+  text-indent: -1.8em;
+  padding-left: 1.8em;
+  color: #3a4458;
+  margin: 0 0 6px;
+  font-family: 'IBM Plex Mono', monospace;
+}
+
+/* FOOT */
+.theme-notebook .ch-foot {
+  margin-top: 28px;
+  padding-top: 14px;
+  border-top: 1.5px solid #1a2238;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-family: 'IBM Plex Mono', monospace;
+  font-size: 10px;
+  letter-spacing: 0.04em;
+  color: #6b758b;
+}
+.theme-notebook .ch-foot-mark {
+  color: #c93b2a;
+  font-size: 13px;
+  font-weight: 700;
+}
+.theme-notebook .ch-foot-mark::before { content: '·· '; }
+.theme-notebook .ch-foot-mark::after { content: ' ··'; }
diff --git a/src/themes/press.css b/src/themes/press.css
new file mode 100644
index 0000000..59f2c38
--- /dev/null
+++ b/src/themes/press.css
@@ -0,0 +1,427 @@
+/* ClassBuild chapter theme — press
+   Scope: body.theme-press or any ancestor with class="theme-press"
+   Markup contract: see patches/themes-six.md */
+.theme-press {
+  font-family: 'Source Serif 4', Georgia, serif;
+  background: #f4efe3;
+  color: #14110d;
+  padding: 56px 70px 44px;
+  font-size: 15.5px;
+  line-height: 1.62;
+  letter-spacing: 0.005em;
+  text-rendering: optimizeLegibility;
+}
+.theme-press p { margin: 0 0 1em; }
+.theme-press em { font-style: italic; }
+
+/* HEAD */
+.theme-press .ch-head {
+  border-bottom: 1.5px solid #14110d;
+  padding-bottom: 24px;
+  margin-bottom: 32px;
+}
+.theme-press .ch-eyebrow {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 10.5px;
+  letter-spacing: 0.22em;
+  text-transform: uppercase;
+  color: #b1342a;
+  border-top: 3px solid #b1342a;
+  padding-top: 13px;
+  margin-bottom: 18px;
+  display: inline-block;
+}
+.theme-press .ch-title {
+  font-family: 'Libre Caslon Text', Georgia, serif;
+  font-weight: 700;
+  font-size: 54px;
+  line-height: 1.02;
+  letter-spacing: -0.012em;
+  margin: 0 0 18px;
+  color: #14110d;
+}
+.theme-press .ch-title em { font-style: italic; font-weight: 400; }
+.theme-press .ch-subtitle {
+  font-family: 'Libre Caslon Text', Georgia, serif;
+  font-style: italic;
+  font-weight: 400;
+  font-size: 19px;
+  line-height: 1.42;
+  color: #3a342c;
+  margin: 0 0 18px;
+  max-width: 36em;
+}
+.theme-press .ch-meta {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 10.5px;
+  letter-spacing: 0.08em;
+  color: #6b6357;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  text-transform: uppercase;
+}
+.theme-press .ch-meta-dot {
+  width: 3px; height: 3px; background: #6b6357; border-radius: 50%;
+  display: inline-block;
+}
+
+/* HOOK with drop cap */
+.theme-press .ch-hook { margin-bottom: 32px; }
+.theme-press .ch-dropcap {
+  float: left;
+  font-family: 'Libre Caslon Text', Georgia, serif;
+  font-size: 64px;
+  line-height: 0.88;
+  font-weight: 700;
+  padding: 6px 10px 0 0;
+  color: #14110d;
+}
+
+/* HEADINGS */
+.theme-press h2 {
+  font-family: 'Libre Caslon Text', Georgia, serif;
+  font-size: 28px;
+  font-weight: 700;
+  line-height: 1.15;
+  margin: 32px 0 14px;
+  border-bottom: 1px solid #14110d;
+  padding-bottom: 8px;
+  color: #14110d;
+}
+.theme-press h3 {
+  font-family: 'Libre Caslon Text', Georgia, serif;
+  font-style: italic;
+  font-weight: 400;
+  font-size: 21px;
+  margin: 24px 0 8px;
+  color: #14110d;
+}
+
+/* KEY TERMS */
+.theme-press .ch-key {
+  font-style: italic;
+  text-decoration: underline;
+  text-decoration-color: #b1342a;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 3px;
+  text-decoration-skip-ink: none;
+}
+
+/* CALLOUT */
+.theme-press .ch-callout {
+  border-left: 3px solid #b1342a;
+  padding: 14px 0 14px 20px;
+  margin: 24px 0;
+}
+.theme-press .ch-callout-label {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 10.5px;
+  letter-spacing: 0.22em;
+  text-transform: uppercase;
+  color: #b1342a;
+  margin-bottom: 6px;
+}
+.theme-press .ch-callout p {
+  margin: 0;
+  font-family: 'Libre Caslon Text', Georgia, serif;
+  font-style: italic;
+  font-size: 16px;
+  color: #3a342c;
+  line-height: 1.5;
+}
+
+/* DIVIDER */
+.theme-press .ch-divider {
+  border: none;
+  border-top: 1px solid #d5c7a8;
+  margin: 30px auto;
+  width: 100%;
+  position: relative;
+}
+.theme-press .ch-divider::after {
+  content: '❦';
+  position: absolute;
+  top: -10px;
+  left: 50%;
+  transform: translateX(-50%);
+  background: #f4efe3;
+  padding: 0 14px;
+  color: #b1342a;
+  font-size: 14px;
+}
+
+/* WIDGET */
+.theme-press .ch-widget {
+  border: 1px solid #14110d;
+  padding: 20px 22px;
+  margin: 22px 0;
+  background: #fbf7eb;
+}
+.theme-press .ch-widget-head {
+  display: flex;
+  align-items: baseline;
+  gap: 14px;
+  margin-bottom: 12px;
+  border-bottom: 1px solid #d5c7a8;
+  padding-bottom: 10px;
+}
+.theme-press .ch-widget-label {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 10px;
+  letter-spacing: 0.22em;
+  text-transform: uppercase;
+  color: #b1342a;
+}
+.theme-press .ch-widget-title {
+  font-family: 'Libre Caslon Text', Georgia, serif;
+  font-size: 19px;
+  font-weight: 700;
+}
+.theme-press .ch-widget-sub {
+  margin: 0 0 14px;
+  color: #3a342c;
+  font-size: 14px;
+  font-family: 'Libre Caslon Text', Georgia, serif;
+  font-style: italic;
+}
+.theme-press .ch-widget-row {
+  display: flex; gap: 12px; margin-bottom: 14px;
+}
+.theme-press .ch-widget-field {
+  flex: 1; display: flex; flex-direction: column; gap: 5px;
+}
+.theme-press .ch-widget-fieldlabel {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 9.5px;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: #6b6357;
+}
+.theme-press .ch-widget-select {
+  background: #f4efe3;
+  border: 1px solid #14110d;
+  padding: 7px 10px;
+  font-family: 'Source Serif 4', serif;
+  font-size: 13.5px;
+}
+.theme-press .ch-widget-meters {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px 26px;
+  margin-bottom: 14px;
+}
+.theme-press .ch-meter {
+  display: grid;
+  grid-template-columns: 78px 1fr 22px;
+  align-items: center;
+  gap: 10px;
+}
+.theme-press .ch-meter-label {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 9.5px;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: #3a342c;
+}
+.theme-press .ch-meter-bar {
+  height: 4px;
+  background: #e8dfc8;
+  position: relative;
+  display: block;
+}
+.theme-press .ch-meter-bar > span {
+  position: absolute; left: 0; top: 0; bottom: 0;
+  background: #b1342a;
+  display: block;
+}
+.theme-press .ch-meter-num {
+  font-family: 'JetBrains Mono', monospace;
+  font-weight: 500;
+  text-align: right;
+  font-size: 12px;
+}
+.theme-press .ch-widget-btn {
+  background: #14110d;
+  color: #f4efe3;
+  border: none;
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 10.5px;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  padding: 9px 16px;
+  cursor: pointer;
+}
+
+/* FIGURE */
+.theme-press .ch-figure { margin: 26px 0; }
+.theme-press .ch-figbox {
+  background: #ebe4d2;
+  color: #b1342a;
+  height: 170px;
+  position: relative;
+  border: 1px solid #14110d;
+  overflow: hidden;
+}
+.theme-press .ch-figbox svg {
+  position: absolute; inset: 0; width: 100%; height: 100%;
+}
+.theme-press .ch-figbox-tag {
+  position: absolute; bottom: 8px; left: 12px;
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 10px;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: #6b6357;
+  background: #f4efe3;
+  padding: 2px 6px;
+}
+.theme-press .ch-figure figcaption {
+  font-family: 'Libre Caslon Text', Georgia, serif;
+  font-style: italic;
+  font-size: 13.5px;
+  line-height: 1.4;
+  margin-top: 10px;
+  color: #3a342c;
+}
+.theme-press .ch-fig-num {
+  font-family: 'JetBrains Mono', monospace;
+  font-style: normal;
+  font-size: 10px;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: #b1342a;
+  margin-right: 6px;
+}
+
+/* QUOTE */
+.theme-press .ch-quote {
+  border-left: 3px solid #14110d;
+  padding: 6px 0 6px 22px;
+  margin: 28px 0;
+}
+.theme-press .ch-quote p {
+  font-family: 'Libre Caslon Text', Georgia, serif;
+  font-style: italic;
+  font-size: 22px;
+  line-height: 1.32;
+  color: #14110d;
+  margin: 0 0 10px;
+}
+.theme-press .ch-quote cite {
+  font-family: 'JetBrains Mono', monospace;
+  font-style: normal;
+  font-size: 10.5px;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: #6b6357;
+}
+
+/* TAKEAWAYS */
+.theme-press .ch-takeaways {
+  border-top: 1.5px solid #14110d;
+  border-bottom: 1.5px solid #14110d;
+  padding: 20px 0;
+  margin: 30px 0;
+}
+.theme-press .ch-takeaways h2 {
+  border: none;
+  margin: 0 0 12px;
+  font-size: 11px;
+  font-family: 'JetBrains Mono', monospace;
+  letter-spacing: 0.22em;
+  text-transform: uppercase;
+  color: #b1342a;
+  font-weight: 500;
+  padding: 0;
+}
+.theme-press .ch-takeaways ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.theme-press .ch-takeaways li {
+  font-size: 14.5px;
+  line-height: 1.5;
+  position: relative;
+  padding-left: 24px;
+}
+.theme-press .ch-takeaways li::before {
+  content: '§';
+  position: absolute;
+  left: 0;
+  font-family: 'Libre Caslon Text', Georgia, serif;
+  color: #b1342a;
+  font-style: italic;
+  font-size: 18px;
+  top: -2px;
+}
+
+/* LOOKAHEAD */
+.theme-press .ch-lookahead {
+  margin: 24px 0 18px;
+  padding: 16px 0 0;
+  border-top: 1px solid #d5c7a8;
+}
+.theme-press .ch-lookahead-label {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 10px;
+  letter-spacing: 0.22em;
+  text-transform: uppercase;
+  color: #b1342a;
+  margin-bottom: 8px;
+}
+.theme-press .ch-lookahead p {
+  margin: 0;
+  font-family: 'Libre Caslon Text', Georgia, serif;
+  font-style: italic;
+  font-size: 15px;
+  color: #3a342c;
+  line-height: 1.5;
+}
+
+/* REFS */
+.theme-press .ch-refs { margin-top: 24px; }
+.theme-press .ch-refs h2 {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 10.5px;
+  letter-spacing: 0.22em;
+  text-transform: uppercase;
+  color: #b1342a;
+  margin: 0 0 10px;
+  border: none;
+  padding: 0;
+  font-weight: 500;
+}
+.theme-press .ch-refs p {
+  font-size: 11.5px;
+  line-height: 1.5;
+  text-indent: -1.6em;
+  padding-left: 1.6em;
+  color: #3a342c;
+  margin: 0 0 6px;
+}
+
+/* FOOT */
+.theme-press .ch-foot {
+  margin-top: 32px;
+  padding-top: 16px;
+  border-top: 1.5px solid #14110d;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 10.5px;
+  letter-spacing: 0.08em;
+  color: #6b6357;
+  text-transform: uppercase;
+}
+.theme-press .ch-foot-mark {
+  color: #b1342a;
+  font-family: 'Libre Caslon Text', Georgia, serif;
+  font-size: 16px;
+  font-style: italic;
+}
diff --git a/src/themes/storybook.css b/src/themes/storybook.css
new file mode 100644
index 0000000..5dabe01
--- /dev/null
+++ b/src/themes/storybook.css
@@ -0,0 +1,489 @@
+/* ClassBuild chapter theme — storybook
+   Scope: body.theme-storybook or any ancestor with class="theme-storybook"
+   Markup contract: see patches/themes-six.md */
+.theme-storybook {
+  font-family: 'DM Sans', system-ui, sans-serif;
+  background: #fff8e7;
+  color: #1c2f4a;
+  padding: 56px 64px 44px;
+  font-size: 16.5px;
+  line-height: 1.6;
+  position: relative;
+}
+.theme-storybook p { margin: 0 0 1em; }
+.theme-storybook em { font-style: italic; }
+
+/* HEAD — color block on cream */
+.theme-storybook .ch-head {
+  background: #1c2f4a;
+  color: #fff8e7;
+  padding: 38px 36px 36px;
+  margin: -16px -28px 32px;
+  position: relative;
+}
+.theme-storybook .ch-head::after {
+  content: '';
+  position: absolute;
+  bottom: -14px;
+  left: 36px;
+  width: 64px;
+  height: 14px;
+  background: #f4c645;
+}
+.theme-storybook .ch-eyebrow {
+  font-family: 'DM Mono', monospace;
+  font-size: 11px;
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
+  color: #f4c645;
+  margin-bottom: 14px;
+  font-weight: 500;
+}
+.theme-storybook .ch-title {
+  font-family: 'DM Serif Display', Georgia, serif;
+  font-weight: 400;
+  font-size: 52px;
+  line-height: 1.02;
+  letter-spacing: -0.012em;
+  margin: 0 0 16px;
+  color: #fff8e7;
+}
+.theme-storybook .ch-title em {
+  font-style: italic;
+  color: #f4c645;
+}
+.theme-storybook .ch-subtitle {
+  font-family: 'DM Sans', sans-serif;
+  font-weight: 400;
+  font-size: 17px;
+  line-height: 1.45;
+  color: rgba(255, 248, 231, 0.85);
+  margin: 0 0 16px;
+  max-width: 32em;
+}
+.theme-storybook .ch-meta {
+  font-family: 'DM Mono', monospace;
+  font-size: 11px;
+  letter-spacing: 0.08em;
+  color: rgba(255, 248, 231, 0.65);
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  text-transform: uppercase;
+}
+.theme-storybook .ch-meta-dot {
+  width: 4px; height: 4px;
+  background: #f4c645;
+  display: inline-block;
+}
+
+/* HOOK */
+.theme-storybook .ch-hook {
+  margin-bottom: 32px;
+  font-size: 18px;
+  line-height: 1.55;
+  color: #1c2f4a;
+}
+.theme-storybook .ch-dropcap {
+  float: left;
+  font-family: 'DM Serif Display', serif;
+  font-size: 96px;
+  line-height: 0.82;
+  font-weight: 400;
+  padding: 4px 14px 0 0;
+  color: #d94f4f;
+}
+
+/* HEADINGS */
+.theme-storybook h2 {
+  font-family: 'DM Serif Display', serif;
+  font-size: 36px;
+  font-weight: 400;
+  line-height: 1.1;
+  margin: 36px 0 14px;
+  color: #1c2f4a;
+  display: flex;
+  align-items: baseline;
+  gap: 14px;
+}
+.theme-storybook h2::before {
+  content: '';
+  width: 28px;
+  height: 8px;
+  background: #d94f4f;
+  display: inline-block;
+  flex-shrink: 0;
+}
+.theme-storybook h3 {
+  font-family: 'DM Serif Display', serif;
+  font-style: italic;
+  font-weight: 400;
+  font-size: 22px;
+  margin: 24px 0 8px;
+  color: #4a8a6f;
+}
+
+/* KEY TERMS */
+.theme-storybook .ch-key {
+  background: linear-gradient(transparent 60%, #f4c645 60%);
+  padding: 0 2px;
+  font-weight: 500;
+  font-style: italic;
+}
+
+/* CALLOUT */
+.theme-storybook .ch-callout {
+  background: #d94f4f;
+  color: #fff8e7;
+  padding: 22px 26px;
+  margin: 26px 0;
+  position: relative;
+}
+.theme-storybook .ch-callout::before {
+  content: '';
+  position: absolute;
+  top: -10px;
+  right: 32px;
+  width: 36px;
+  height: 36px;
+  background: #f4c645;
+  transform: rotate(8deg);
+}
+.theme-storybook .ch-callout-label {
+  font-family: 'DM Mono', monospace;
+  font-size: 11px;
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
+  color: #f4c645;
+  margin-bottom: 8px;
+  font-weight: 500;
+  position: relative;
+  z-index: 1;
+}
+.theme-storybook .ch-callout p {
+  margin: 0;
+  font-family: 'DM Serif Display', serif;
+  font-size: 19px;
+  line-height: 1.35;
+  color: #fff8e7;
+  position: relative;
+  z-index: 1;
+}
+
+/* DIVIDER */
+.theme-storybook .ch-divider {
+  border: none;
+  height: 24px;
+  margin: 30px auto;
+  background-image: radial-gradient(circle, #1c2f4a 4px, transparent 4.5px);
+  background-size: 28px 24px;
+  background-repeat: repeat-x;
+  background-position: center;
+  width: 60%;
+}
+
+/* WIDGET */
+.theme-storybook .ch-widget {
+  background: #4a8a6f;
+  color: #fff8e7;
+  padding: 24px 26px;
+  margin: 26px 0;
+}
+.theme-storybook .ch-widget-head {
+  margin-bottom: 12px;
+  padding-bottom: 12px;
+  border-bottom: 2px solid #f4c645;
+}
+.theme-storybook .ch-widget-label {
+  font-family: 'DM Mono', monospace;
+  font-size: 11px;
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
+  color: #f4c645;
+  display: block;
+  margin-bottom: 4px;
+  font-weight: 500;
+}
+.theme-storybook .ch-widget-title {
+  font-family: 'DM Serif Display', serif;
+  font-size: 26px;
+  font-weight: 400;
+  color: #fff8e7;
+}
+.theme-storybook .ch-widget-sub {
+  margin: 0 0 16px;
+  color: rgba(255, 248, 231, 0.85);
+  font-size: 14.5px;
+}
+.theme-storybook .ch-widget-row {
+  display: flex; gap: 14px; margin-bottom: 16px;
+}
+.theme-storybook .ch-widget-field {
+  flex: 1; display: flex; flex-direction: column; gap: 5px;
+}
+.theme-storybook .ch-widget-fieldlabel {
+  font-family: 'DM Mono', monospace;
+  font-size: 10.5px;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: #f4c645;
+}
+.theme-storybook .ch-widget-select {
+  background: #fff8e7;
+  border: none;
+  padding: 9px 12px;
+  font-family: 'DM Sans', sans-serif;
+  font-size: 14px;
+  font-weight: 500;
+  color: #1c2f4a;
+}
+.theme-storybook .ch-widget-meters {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px 26px;
+  margin-bottom: 16px;
+}
+.theme-storybook .ch-meter {
+  display: grid;
+  grid-template-columns: 90px 1fr 24px;
+  align-items: center;
+  gap: 10px;
+}
+.theme-storybook .ch-meter-label {
+  font-family: 'DM Mono', monospace;
+  font-size: 10.5px;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: #fff8e7;
+  font-weight: 500;
+}
+.theme-storybook .ch-meter-bar {
+  height: 8px;
+  background: rgba(255, 248, 231, 0.25);
+  position: relative;
+  display: block;
+}
+.theme-storybook .ch-meter-bar > span {
+  position: absolute; left: 0; top: 0; bottom: 0;
+  background: #f4c645;
+  display: block;
+}
+.theme-storybook .ch-meter-num {
+  font-family: 'DM Serif Display', serif;
+  font-weight: 400;
+  text-align: right;
+  font-size: 18px;
+  color: #f4c645;
+}
+.theme-storybook .ch-widget-btn {
+  background: #f4c645;
+  color: #1c2f4a;
+  border: none;
+  font-family: 'DM Sans', sans-serif;
+  font-size: 13px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  padding: 11px 22px;
+  cursor: pointer;
+}
+
+/* FIGURE */
+.theme-storybook .ch-figure { margin: 28px 0; }
+.theme-storybook .ch-figbox {
+  background: #f4c645;
+  color: #1c2f4a;
+  height: 200px;
+  position: relative;
+  overflow: hidden;
+}
+.theme-storybook .ch-figbox svg {
+  position: absolute; inset: 0; width: 100%; height: 100%;
+}
+.theme-storybook .ch-figbox-tag {
+  position: absolute; bottom: 12px; left: 14px;
+  font-family: 'DM Mono', monospace;
+  font-size: 11px;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: #1c2f4a;
+  background: #fff8e7;
+  padding: 4px 10px;
+  font-weight: 500;
+}
+.theme-storybook .ch-figure figcaption {
+  font-family: 'DM Sans', sans-serif;
+  font-size: 13.5px;
+  line-height: 1.45;
+  margin-top: 12px;
+  color: #1c2f4a;
+}
+.theme-storybook .ch-fig-num {
+  font-family: 'DM Mono', monospace;
+  font-size: 11px;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: #d94f4f;
+  font-weight: 700;
+  margin-right: 8px;
+}
+
+/* QUOTE */
+.theme-storybook .ch-quote {
+  margin: 30px 0;
+  padding: 0 0 0 24px;
+  border-left: 8px solid #f4c645;
+}
+.theme-storybook .ch-quote p {
+  font-family: 'DM Serif Display', serif;
+  font-style: italic;
+  font-size: 26px;
+  line-height: 1.25;
+  color: #1c2f4a;
+  margin: 0 0 10px;
+}
+.theme-storybook .ch-quote cite {
+  font-family: 'DM Mono', monospace;
+  font-style: normal;
+  font-size: 11px;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: #d94f4f;
+  font-weight: 500;
+}
+
+/* TAKEAWAYS */
+.theme-storybook .ch-takeaways {
+  margin: 30px 0;
+  padding: 26px 28px;
+  background: #1c2f4a;
+  color: #fff8e7;
+  position: relative;
+}
+.theme-storybook .ch-takeaways::before {
+  content: '';
+  position: absolute;
+  top: 18px;
+  right: 18px;
+  width: 32px;
+  height: 32px;
+  background: #d94f4f;
+}
+.theme-storybook .ch-takeaways h2 {
+  border: none;
+  margin: 0 0 14px;
+  font-family: 'DM Serif Display', serif;
+  font-size: 24px;
+  color: #f4c645;
+  font-weight: 400;
+  padding: 0;
+  display: block;
+}
+.theme-storybook .ch-takeaways h2::before { display: none; }
+.theme-storybook .ch-takeaways ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.theme-storybook .ch-takeaways li {
+  font-size: 14.5px;
+  line-height: 1.55;
+  position: relative;
+  padding-left: 30px;
+  color: #fff8e7;
+}
+.theme-storybook .ch-takeaways li::before {
+  content: '✓';
+  position: absolute;
+  left: 0;
+  top: 1px;
+  color: #1c2f4a;
+  background: #f4c645;
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 700;
+  font-size: 13px;
+}
+
+/* LOOKAHEAD */
+.theme-storybook .ch-lookahead {
+  margin: 26px 0 20px;
+  padding: 20px 24px;
+  border: 3px solid #1c2f4a;
+  position: relative;
+}
+.theme-storybook .ch-lookahead-label {
+  font-family: 'DM Mono', monospace;
+  font-size: 11px;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: #d94f4f;
+  margin-bottom: 8px;
+  font-weight: 500;
+  background: #fff8e7;
+  padding: 0 8px;
+  display: inline-block;
+  position: absolute;
+  top: -10px;
+  left: 18px;
+}
+.theme-storybook .ch-lookahead p {
+  margin: 0;
+  font-family: 'DM Sans', sans-serif;
+  font-size: 14.5px;
+  color: #1c2f4a;
+  line-height: 1.5;
+}
+
+/* REFS */
+.theme-storybook .ch-refs {
+  margin-top: 24px;
+  padding-top: 16px;
+  border-top: 2px solid #1c2f4a;
+}
+.theme-storybook .ch-refs h2 {
+  font-family: 'DM Mono', monospace;
+  font-size: 11px;
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
+  color: #d94f4f;
+  margin: 0 0 10px;
+  padding: 0;
+  font-weight: 500;
+  display: block;
+}
+.theme-storybook .ch-refs h2::before { display: none; }
+.theme-storybook .ch-refs p {
+  font-size: 11.5px;
+  line-height: 1.55;
+  text-indent: -1.6em;
+  padding-left: 1.6em;
+  color: #1c2f4a;
+  margin: 0 0 6px;
+}
+
+/* FOOT */
+.theme-storybook .ch-foot {
+  margin-top: 26px;
+  padding-top: 14px;
+  border-top: 2px solid #d94f4f;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-family: 'DM Mono', monospace;
+  font-size: 11px;
+  letter-spacing: 0.08em;
+  color: #1c2f4a;
+  text-transform: uppercase;
+}
+.theme-storybook .ch-foot-mark {
+  color: #d94f4f;
+  font-family: 'DM Serif Display', serif;
+  font-size: 20px;
+  font-style: italic;
+}
diff --git a/src/themes/studio.css b/src/themes/studio.css
new file mode 100644
index 0000000..057ba36
--- /dev/null
+++ b/src/themes/studio.css
@@ -0,0 +1,465 @@
+/* ClassBuild chapter theme — studio
+   Scope: body.theme-studio or any ancestor with class="theme-studio"
+   Markup contract: see patches/themes-six.md */
+.theme-studio {
+  font-family: 'Manrope', system-ui, sans-serif;
+  background: #fafaf7;
+  color: #0a0a0a;
+  padding: 80px 90px 56px;
+  font-size: 14.5px;
+  line-height: 1.65;
+  font-weight: 400;
+}
+.theme-studio p { margin: 0 0 1.1em; }
+.theme-studio em { font-style: italic; }
+
+/* HEAD */
+.theme-studio .ch-head {
+  margin-bottom: 56px;
+  padding-bottom: 0;
+  border: none;
+}
+.theme-studio .ch-eyebrow {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 10.5px;
+  letter-spacing: 0.24em;
+  text-transform: uppercase;
+  color: #0a0a0a;
+  font-weight: 500;
+  margin-bottom: 36px;
+}
+.theme-studio .ch-eyebrow::after {
+  content: '';
+  display: inline-block;
+  width: 32px;
+  height: 1px;
+  background: #c9a382;
+  vertical-align: middle;
+  margin-left: 14px;
+}
+.theme-studio .ch-title {
+  font-family: 'Instrument Serif', serif;
+  font-weight: 400;
+  font-size: 76px;
+  line-height: 0.98;
+  letter-spacing: -0.022em;
+  margin: 0 0 24px;
+  color: #0a0a0a;
+  max-width: 14ch;
+}
+.theme-studio .ch-title em {
+  font-style: italic;
+}
+.theme-studio .ch-subtitle {
+  font-family: 'Manrope', sans-serif;
+  font-weight: 300;
+  font-size: 17px;
+  line-height: 1.4;
+  color: #4a4a4a;
+  margin: 0 0 28px;
+  max-width: 38em;
+  letter-spacing: -0.005em;
+}
+.theme-studio .ch-meta {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 10px;
+  letter-spacing: 0.16em;
+  color: #888;
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  text-transform: uppercase;
+}
+.theme-studio .ch-meta-dot {
+  width: 3px; height: 3px;
+  background: #c9a382;
+  display: inline-block;
+}
+
+/* HOOK */
+.theme-studio .ch-hook {
+  margin-bottom: 56px;
+  font-family: 'Instrument Serif', serif;
+  font-size: 24px;
+  font-style: italic;
+  line-height: 1.32;
+  color: #0a0a0a;
+  font-weight: 400;
+  max-width: 22em;
+  margin-left: auto;
+  margin-right: auto;
+}
+.theme-studio .ch-hook p { margin: 0 0 0.6em; }
+.theme-studio .ch-dropcap { color: inherit; }
+.theme-studio .ch-hook em { font-style: normal; color: #c9a382; }
+
+/* HEADINGS */
+.theme-studio h2 {
+  font-family: 'Instrument Serif', serif;
+  font-size: 46px;
+  font-weight: 400;
+  font-style: italic;
+  line-height: 1.1;
+  letter-spacing: -0.018em;
+  margin: 60px 0 18px;
+  color: #0a0a0a;
+  max-width: 18ch;
+}
+.theme-studio h3 {
+  font-family: 'JetBrains Mono', monospace;
+  font-weight: 500;
+  font-size: 11px;
+  letter-spacing: 0.22em;
+  text-transform: uppercase;
+  margin: 36px 0 12px;
+  color: #c9a382;
+}
+
+/* KEY TERMS */
+.theme-studio .ch-key {
+  font-family: 'Instrument Serif', serif;
+  font-style: italic;
+  font-size: 16.5px;
+  color: #0a0a0a;
+  border-bottom: 1px solid #c9a382;
+  padding-bottom: 1px;
+}
+
+/* CALLOUT */
+.theme-studio .ch-callout {
+  margin: 36px 0;
+  padding: 0;
+  border-top: 1px solid #0a0a0a;
+  border-bottom: 1px solid #0a0a0a;
+  padding: 22px 0;
+}
+.theme-studio .ch-callout-label {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 10px;
+  letter-spacing: 0.24em;
+  text-transform: uppercase;
+  color: #c9a382;
+  margin-bottom: 12px;
+  font-weight: 500;
+}
+.theme-studio .ch-callout p {
+  margin: 0;
+  font-family: 'Instrument Serif', serif;
+  font-style: italic;
+  font-size: 22px;
+  color: #0a0a0a;
+  line-height: 1.32;
+  max-width: 24em;
+}
+
+/* DIVIDER */
+.theme-studio .ch-divider {
+  border: none;
+  margin: 48px auto;
+  width: 80px;
+  border-top: 1px solid #c9a382;
+}
+
+/* WIDGET */
+.theme-studio .ch-widget {
+  margin: 36px 0;
+  padding: 28px 0 0;
+  border-top: 1px solid #0a0a0a;
+}
+.theme-studio .ch-widget-head {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  margin-bottom: 18px;
+  gap: 24px;
+}
+.theme-studio .ch-widget-label {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 10px;
+  letter-spacing: 0.24em;
+  text-transform: uppercase;
+  color: #c9a382;
+  font-weight: 500;
+}
+.theme-studio .ch-widget-title {
+  font-family: 'Instrument Serif', serif;
+  font-style: italic;
+  font-size: 32px;
+  font-weight: 400;
+  color: #0a0a0a;
+  letter-spacing: -0.01em;
+}
+.theme-studio .ch-widget-sub {
+  margin: 0 0 22px;
+  color: #4a4a4a;
+  font-size: 13.5px;
+  font-weight: 300;
+  max-width: 36em;
+}
+.theme-studio .ch-widget-row {
+  display: flex; gap: 16px; margin-bottom: 22px;
+}
+.theme-studio .ch-widget-field {
+  flex: 1; display: flex; flex-direction: column; gap: 6px;
+}
+.theme-studio .ch-widget-fieldlabel {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 9.5px;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: #888;
+}
+.theme-studio .ch-widget-select {
+  background: transparent;
+  border: none;
+  border-bottom: 1px solid #0a0a0a;
+  padding: 6px 0;
+  font-family: 'Instrument Serif', serif;
+  font-style: italic;
+  font-size: 18px;
+  color: #0a0a0a;
+}
+.theme-studio .ch-widget-meters {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px 36px;
+  margin-bottom: 22px;
+}
+.theme-studio .ch-meter {
+  display: grid;
+  grid-template-columns: 90px 1fr 28px;
+  align-items: center;
+  gap: 12px;
+}
+.theme-studio .ch-meter-label {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 9.5px;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: #0a0a0a;
+}
+.theme-studio .ch-meter-bar {
+  height: 1px;
+  background: #e0ddd4;
+  position: relative;
+  display: block;
+}
+.theme-studio .ch-meter-bar > span {
+  position: absolute; left: 0; top: -1px; bottom: -1px;
+  background: #c9a382;
+  display: block;
+}
+.theme-studio .ch-meter-num {
+  font-family: 'Instrument Serif', serif;
+  font-style: italic;
+  font-weight: 400;
+  text-align: right;
+  font-size: 20px;
+  color: #0a0a0a;
+}
+.theme-studio .ch-widget-btn {
+  background: transparent;
+  color: #0a0a0a;
+  border: none;
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 10.5px;
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
+  padding: 0;
+  cursor: pointer;
+  font-weight: 500;
+  border-bottom: 1px solid #0a0a0a;
+  padding-bottom: 3px;
+}
+.theme-studio .ch-widget-btn::after { content: ' →'; }
+
+/* FIGURE */
+.theme-studio .ch-figure { margin: 48px -20px; }
+.theme-studio .ch-figbox {
+  background: #ecebe6;
+  color: #c9a382;
+  height: 280px;
+  position: relative;
+  overflow: hidden;
+}
+.theme-studio .ch-figbox svg {
+  position: absolute; inset: 0; width: 100%; height: 100%;
+}
+.theme-studio .ch-figbox-tag {
+  position: absolute; bottom: 14px; left: 18px;
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 10px;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: #6a6a6a;
+}
+.theme-studio .ch-figure figcaption {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 10.5px;
+  line-height: 1.55;
+  margin-top: 14px;
+  color: #4a4a4a;
+  padding: 0 20px;
+  letter-spacing: 0.01em;
+}
+.theme-studio .ch-figure figcaption em {
+  font-family: 'Instrument Serif', serif;
+  font-style: italic;
+  font-size: 13px;
+}
+.theme-studio .ch-fig-num {
+  font-family: 'JetBrains Mono', monospace;
+  font-style: normal;
+  font-size: 10px;
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
+  color: #c9a382;
+  margin-right: 10px;
+  font-weight: 500;
+}
+
+/* QUOTE */
+.theme-studio .ch-quote {
+  margin: 56px 0;
+  padding: 0;
+  text-align: center;
+}
+.theme-studio .ch-quote p {
+  font-family: 'Instrument Serif', serif;
+  font-style: italic;
+  font-size: 34px;
+  line-height: 1.22;
+  color: #0a0a0a;
+  margin: 0 0 18px;
+  max-width: 20em;
+  margin-left: auto;
+  margin-right: auto;
+  letter-spacing: -0.018em;
+}
+.theme-studio .ch-quote cite {
+  font-family: 'JetBrains Mono', monospace;
+  font-style: normal;
+  font-size: 10px;
+  letter-spacing: 0.22em;
+  text-transform: uppercase;
+  color: #c9a382;
+}
+
+/* TAKEAWAYS */
+.theme-studio .ch-takeaways {
+  margin: 48px 0;
+  padding: 28px 0;
+  border-top: 1px solid #0a0a0a;
+  border-bottom: 1px solid #0a0a0a;
+}
+.theme-studio .ch-takeaways h2 {
+  font-family: 'JetBrains Mono', monospace;
+  font-style: normal;
+  border: none;
+  margin: 0 0 18px;
+  font-size: 10.5px;
+  letter-spacing: 0.24em;
+  text-transform: uppercase;
+  color: #c9a382;
+  font-weight: 500;
+  padding: 0;
+  max-width: none;
+}
+.theme-studio .ch-takeaways ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  counter-reset: tk;
+}
+.theme-studio .ch-takeaways li {
+  font-size: 14.5px;
+  line-height: 1.55;
+  position: relative;
+  padding-left: 44px;
+  counter-increment: tk;
+  color: #0a0a0a;
+}
+.theme-studio .ch-takeaways li::before {
+  content: counter(tk, decimal-leading-zero);
+  position: absolute;
+  left: 0;
+  top: 2px;
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 11px;
+  color: #c9a382;
+  letter-spacing: 0.06em;
+}
+
+/* LOOKAHEAD */
+.theme-studio .ch-lookahead {
+  margin: 36px 0 24px;
+}
+.theme-studio .ch-lookahead-label {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 10px;
+  letter-spacing: 0.24em;
+  text-transform: uppercase;
+  color: #c9a382;
+  margin-bottom: 10px;
+  font-weight: 500;
+}
+.theme-studio .ch-lookahead p {
+  margin: 0;
+  font-family: 'Instrument Serif', serif;
+  font-style: italic;
+  font-size: 22px;
+  color: #0a0a0a;
+  line-height: 1.32;
+  max-width: 24em;
+}
+
+/* REFS */
+.theme-studio .ch-refs {
+  margin-top: 36px;
+  padding-top: 18px;
+  border-top: 1px solid #c9a382;
+}
+.theme-studio .ch-refs h2 {
+  font-family: 'JetBrains Mono', monospace;
+  font-style: normal;
+  font-size: 10px;
+  letter-spacing: 0.24em;
+  text-transform: uppercase;
+  color: #c9a382;
+  margin: 0 0 10px;
+  font-weight: 500;
+  max-width: none;
+}
+.theme-studio .ch-refs p {
+  font-size: 11px;
+  line-height: 1.55;
+  text-indent: -1.6em;
+  padding-left: 1.6em;
+  color: #4a4a4a;
+  margin: 0 0 6px;
+  font-family: 'Manrope', sans-serif;
+}
+
+/* FOOT */
+.theme-studio .ch-foot {
+  margin-top: 32px;
+  padding-top: 18px;
+  border-top: 1px solid #0a0a0a;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 10px;
+  letter-spacing: 0.16em;
+  color: #888;
+  text-transform: uppercase;
+}
+.theme-studio .ch-foot-mark {
+  color: #c9a382;
+  font-family: 'Instrument Serif', serif;
+  font-size: 18px;
+  font-style: italic;
+}
diff --git a/src/themes/terminal.css b/src/themes/terminal.css
new file mode 100644
index 0000000..bd6e76c
--- /dev/null
+++ b/src/themes/terminal.css
@@ -0,0 +1,485 @@
+/* ClassBuild chapter theme — terminal
+   Scope: body.theme-terminal or any ancestor with class="theme-terminal"
+   Markup contract: see patches/themes-six.md */
+.theme-terminal {
+  font-family: 'IBM Plex Sans', system-ui, sans-serif;
+  background: #0d1117;
+  color: #d4dae0;
+  padding: 56px 64px 44px;
+  font-size: 15px;
+  line-height: 1.65;
+}
+.theme-terminal p { margin: 0 0 1em; }
+.theme-terminal em { font-style: italic; color: #e8b87d; }
+
+/* HEAD */
+.theme-terminal .ch-head {
+  margin-bottom: 36px;
+  padding-bottom: 22px;
+  border-bottom: 1px solid #1f2a37;
+}
+.theme-terminal .ch-eyebrow {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 11px;
+  letter-spacing: 0.06em;
+  color: #6ee7b7;
+  margin-bottom: 18px;
+  font-weight: 400;
+}
+.theme-terminal .ch-eyebrow::before { content: '$ '; color: #6ee7b7; }
+.theme-terminal .ch-eyebrow::after {
+  content: '_';
+  color: #6ee7b7;
+  margin-left: 8px;
+  animation: blink 1s infinite;
+}
+@keyframes blink {
+  0%, 50% { opacity: 1; }
+  51%, 100% { opacity: 0; }
+}
+.theme-terminal .ch-title {
+  font-family: 'JetBrains Mono', monospace;
+  font-weight: 700;
+  font-size: 34px;
+  line-height: 1.15;
+  letter-spacing: -0.02em;
+  margin: 0 0 18px;
+  color: #e8edf2;
+}
+.theme-terminal .ch-title em {
+  font-style: italic;
+  font-weight: 500;
+  color: #6ee7b7;
+}
+.theme-terminal .ch-subtitle {
+  font-family: 'IBM Plex Sans', sans-serif;
+  font-weight: 400;
+  font-size: 15px;
+  line-height: 1.5;
+  color: #9aa5b1;
+  margin: 0 0 16px;
+  max-width: 38em;
+}
+.theme-terminal .ch-meta {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 10.5px;
+  letter-spacing: 0.04em;
+  color: #6a7888;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.theme-terminal .ch-meta-dot {
+  width: 4px; height: 4px;
+  background: #6ee7b7;
+  display: inline-block;
+}
+
+/* HOOK */
+.theme-terminal .ch-hook {
+  margin-bottom: 26px;
+  padding: 16px 18px;
+  background: #131c26;
+  border-left: 3px solid #6ee7b7;
+  border-radius: 0;
+  position: relative;
+}
+.theme-terminal .ch-hook::before {
+  content: '// preamble.md';
+  position: absolute;
+  top: -10px;
+  left: 12px;
+  background: #0d1117;
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 10px;
+  color: #6a7888;
+  padding: 0 6px;
+}
+.theme-terminal .ch-dropcap {
+  font-family: 'JetBrains Mono', monospace;
+  font-weight: 700;
+  font-size: 24px;
+  color: #6ee7b7;
+  margin-right: 4px;
+}
+
+/* HEADINGS */
+.theme-terminal h2 {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 22px;
+  font-weight: 700;
+  line-height: 1.2;
+  margin: 32px 0 14px;
+  color: #e8edf2;
+  letter-spacing: -0.01em;
+}
+.theme-terminal h2::before {
+  content: '## ';
+  color: #6ee7b7;
+  font-weight: 500;
+}
+.theme-terminal h3 {
+  font-family: 'JetBrains Mono', monospace;
+  font-weight: 500;
+  font-size: 14px;
+  margin: 22px 0 8px;
+  color: #d4dae0;
+}
+.theme-terminal h3::before {
+  content: '### ';
+  color: #6ee7b7;
+}
+
+/* KEY TERMS */
+.theme-terminal .ch-key {
+  font-family: 'JetBrains Mono', monospace;
+  font-style: normal;
+  font-size: 13.5px;
+  color: #6ee7b7;
+  background: rgba(110, 231, 183, 0.08);
+  padding: 0 4px;
+}
+.theme-terminal .ch-key::before { content: '\u0060'; opacity: 0.5; }
+.theme-terminal .ch-key::after { content: '\u0060'; opacity: 0.5; }
+
+/* CALLOUT */
+.theme-terminal .ch-callout {
+  border-left: 3px solid #e8b87d;
+  background: #1a1610;
+  padding: 16px 18px;
+  margin: 22px 0;
+  position: relative;
+}
+.theme-terminal .ch-callout-label {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 11px;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: #e8b87d;
+  margin-bottom: 6px;
+  font-weight: 500;
+}
+.theme-terminal .ch-callout-label::before { content: '! NOTE — '; opacity: 0.6; }
+.theme-terminal .ch-callout p {
+  margin: 0;
+  font-size: 14px;
+  color: #d4dae0;
+  line-height: 1.55;
+}
+
+/* DIVIDER */
+.theme-terminal .ch-divider {
+  border: none;
+  height: 14px;
+  margin: 26px 0;
+  font-family: 'JetBrains Mono', monospace;
+  position: relative;
+  background: transparent;
+}
+.theme-terminal .ch-divider::before {
+  content: '~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~';
+  color: #2a3a4a;
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 14px;
+  letter-spacing: 0.2em;
+  display: block;
+  text-align: center;
+}
+
+/* WIDGET */
+.theme-terminal .ch-widget {
+  border: 1px solid #2a3a4a;
+  border-radius: 6px;
+  padding: 0;
+  margin: 22px 0;
+  background: #131c26;
+  overflow: hidden;
+}
+.theme-terminal .ch-widget-head {
+  background: #1f2a37;
+  padding: 10px 16px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  border-bottom: 1px solid #2a3a4a;
+}
+.theme-terminal .ch-widget-head::before {
+  content: '';
+  display: flex;
+  gap: 6px;
+  width: 38px;
+  height: 10px;
+  background:
+    radial-gradient(circle, #ff5f57 4px, transparent 5px) 0 50% / 12px 12px no-repeat,
+    radial-gradient(circle, #febc2e 4px, transparent 5px) 14px 50% / 12px 12px no-repeat,
+    radial-gradient(circle, #28c840 4px, transparent 5px) 28px 50% / 12px 12px no-repeat;
+}
+.theme-terminal .ch-widget-label {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 10.5px;
+  letter-spacing: 0.08em;
+  color: #6a7888;
+}
+.theme-terminal .ch-widget-title {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 13px;
+  font-weight: 500;
+  color: #d4dae0;
+  margin-left: auto;
+}
+.theme-terminal .ch-widget-sub {
+  margin: 14px 18px 14px;
+  color: #9aa5b1;
+  font-size: 13px;
+  font-family: 'JetBrains Mono', monospace;
+}
+.theme-terminal .ch-widget-sub::before { content: '// '; color: #6a7888; }
+.theme-terminal .ch-widget-row {
+  display: flex; gap: 14px; margin: 0 18px 16px; padding: 0;
+}
+.theme-terminal .ch-widget-field {
+  flex: 1; display: flex; flex-direction: column; gap: 5px;
+}
+.theme-terminal .ch-widget-fieldlabel {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 10.5px;
+  color: #6ee7b7;
+}
+.theme-terminal .ch-widget-fieldlabel::before { content: '--'; }
+.theme-terminal .ch-widget-select {
+  background: #0d1117;
+  border: 1px solid #2a3a4a;
+  padding: 7px 10px;
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 13px;
+  color: #e8b87d;
+  border-radius: 3px;
+}
+.theme-terminal .ch-widget-meters {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px 24px;
+  margin: 0 18px 16px;
+  padding: 0;
+}
+.theme-terminal .ch-meter {
+  display: grid;
+  grid-template-columns: 90px 1fr 28px;
+  align-items: center;
+  gap: 8px;
+}
+.theme-terminal .ch-meter-label {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 10.5px;
+  color: #9aa5b1;
+}
+.theme-terminal .ch-meter-bar {
+  height: 12px;
+  background: #0d1117;
+  border: 1px solid #2a3a4a;
+  border-radius: 2px;
+  position: relative;
+  display: block;
+  padding: 1px;
+}
+.theme-terminal .ch-meter-bar > span {
+  position: absolute; left: 1px; top: 1px; bottom: 1px;
+  background:
+    repeating-linear-gradient(90deg, #6ee7b7 0 5px, transparent 5px 7px);
+  display: block;
+}
+.theme-terminal .ch-meter-num {
+  font-family: 'JetBrains Mono', monospace;
+  font-weight: 500;
+  text-align: right;
+  font-size: 13px;
+  color: #6ee7b7;
+}
+.theme-terminal .ch-widget-btn {
+  background: #6ee7b7;
+  color: #0d1117;
+  border: none;
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  padding: 9px 16px;
+  cursor: pointer;
+  border-radius: 3px;
+  margin: 0 18px 16px;
+}
+.theme-terminal .ch-widget-btn::before { content: '▶ '; }
+
+/* FIGURE */
+.theme-terminal .ch-figure { margin: 26px 0; }
+.theme-terminal .ch-figbox {
+  background: #131c26;
+  color: #2a3a4a;
+  height: 180px;
+  position: relative;
+  border: 1px solid #2a3a4a;
+  border-radius: 4px;
+  overflow: hidden;
+}
+.theme-terminal .ch-figbox svg {
+  position: absolute; inset: 0; width: 100%; height: 100%;
+}
+.theme-terminal .ch-figbox-tag {
+  position: absolute; bottom: 10px; left: 12px;
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 10.5px;
+  color: #6a7888;
+  background: #0d1117;
+  padding: 2px 8px;
+  border: 1px solid #2a3a4a;
+  border-radius: 2px;
+}
+.theme-terminal .ch-figure figcaption {
+  font-family: 'IBM Plex Sans', sans-serif;
+  font-size: 13px;
+  line-height: 1.4;
+  margin-top: 10px;
+  color: #9aa5b1;
+}
+.theme-terminal .ch-fig-num {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 11px;
+  color: #6ee7b7;
+  font-weight: 500;
+  margin-right: 8px;
+}
+
+/* QUOTE */
+.theme-terminal .ch-quote {
+  border-left: 3px solid #6ee7b7;
+  background: rgba(110, 231, 183, 0.04);
+  padding: 14px 20px;
+  margin: 26px 0;
+  border-radius: 0 4px 4px 0;
+}
+.theme-terminal .ch-quote p {
+  font-family: 'IBM Plex Sans', sans-serif;
+  font-style: italic;
+  font-size: 17px;
+  line-height: 1.45;
+  color: #e8edf2;
+  margin: 0 0 10px;
+}
+.theme-terminal .ch-quote cite {
+  font-family: 'JetBrains Mono', monospace;
+  font-style: normal;
+  font-size: 10.5px;
+  color: #6a7888;
+}
+.theme-terminal .ch-quote cite::before { content: '— '; }
+
+/* TAKEAWAYS */
+.theme-terminal .ch-takeaways {
+  border: 1px solid #2a3a4a;
+  border-radius: 6px;
+  padding: 18px 22px;
+  margin: 30px 0;
+  background: #131c26;
+  position: relative;
+}
+.theme-terminal .ch-takeaways::before {
+  content: 'KEY_TAKEAWAYS.txt';
+  position: absolute;
+  top: -10px;
+  left: 14px;
+  background: #0d1117;
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 10.5px;
+  color: #6ee7b7;
+  padding: 0 8px;
+  letter-spacing: 0.04em;
+}
+.theme-terminal .ch-takeaways h2 {
+  display: none;
+}
+.theme-terminal .ch-takeaways ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.theme-terminal .ch-takeaways li {
+  font-size: 13.5px;
+  line-height: 1.55;
+  position: relative;
+  padding-left: 22px;
+  color: #d4dae0;
+  font-family: 'IBM Plex Sans', sans-serif;
+}
+.theme-terminal .ch-takeaways li::before {
+  content: '✓';
+  position: absolute;
+  left: 0;
+  top: 0;
+  color: #6ee7b7;
+  font-family: 'JetBrains Mono', monospace;
+  font-weight: 700;
+}
+
+/* LOOKAHEAD */
+.theme-terminal .ch-lookahead {
+  margin: 22px 0 18px;
+  padding: 14px 18px;
+  background: rgba(110, 231, 183, 0.04);
+  border-left: 3px solid #6ee7b7;
+}
+.theme-terminal .ch-lookahead-label {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 11px;
+  color: #6ee7b7;
+  margin-bottom: 6px;
+  font-weight: 500;
+}
+.theme-terminal .ch-lookahead-label::before { content: '→ '; }
+.theme-terminal .ch-lookahead p {
+  margin: 0;
+  font-size: 13.5px;
+  color: #d4dae0;
+  line-height: 1.5;
+}
+
+/* REFS */
+.theme-terminal .ch-refs { margin-top: 26px; }
+.theme-terminal .ch-refs h2 {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 12px;
+  color: #6a7888;
+  margin: 0 0 10px;
+  font-weight: 400;
+}
+.theme-terminal .ch-refs h2::before { content: '# '; color: #6ee7b7; }
+.theme-terminal .ch-refs p {
+  font-size: 11px;
+  line-height: 1.55;
+  text-indent: -1.6em;
+  padding-left: 1.6em;
+  color: #9aa5b1;
+  margin: 0 0 6px;
+  font-family: 'JetBrains Mono', monospace;
+}
+
+/* FOOT */
+.theme-terminal .ch-foot {
+  margin-top: 28px;
+  padding-top: 14px;
+  border-top: 1px solid #1f2a37;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 10.5px;
+  color: #6a7888;
+}
+.theme-terminal .ch-foot-mark {
+  color: #6ee7b7;
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 14px;
+}
+.theme-terminal .ch-foot-mark::before { content: ''; }
diff --git a/src/themes/themes.config.ts b/src/themes/themes.config.ts
new file mode 100644
index 0000000..b223878
--- /dev/null
+++ b/src/themes/themes.config.ts
@@ -0,0 +1,318 @@
+import pressCss from './press.css?raw';
+import notebookCss from './notebook.css?raw';
+import almanacCss from './almanac.css?raw';
+import storybookCss from './storybook.css?raw';
+import studioCss from './studio.css?raw';
+import terminalCss from './terminal.css?raw';
+
+export type ChapterThemeId =
+  | 'press'
+  | 'notebook'
+  | 'almanac'
+  | 'storybook'
+  | 'studio'
+  | 'terminal';
+
+export type ThemeMode = 'light' | 'dark';
+
+/**
+ * 5-role palette per the brief: bg · text · accent · muted · surface
+ */
+export type ThemePalette = readonly [
+  bg: string,
+  text: string,
+  accent: string,
+  muted: string,
+  surface: string,
+];
+
+export interface ChapterTheme {
+  id: ChapterThemeId;
+  name: string;
+  pitch: string;
+  pairing: string;
+  palette: ThemePalette;
+  mode: ThemeMode;
+  sample: { eyebrow: string; title: string };
+  /** Display family — drives the card preview's title and the chapter title. */
+  displayFont: string;
+  /** Body family — drives the card preview's body and chapter prose. */
+  bodyFont: string;
+  /** Mono family — drives meta strips, eyebrows, captions. */
+  monoFont: string;
+  /** Raw CSS, scoped to `.theme-{id}`. */
+  css: string;
+}
+
+export const CHAPTER_THEMES: readonly ChapterTheme[] = [
+  {
+    id: 'press',
+    name: 'Press',
+    pitch: 'Sunday broadsheet. Humanities, history, journalism.',
+    pairing: 'Libre Caslon · Source Serif 4 · JetBrains Mono',
+    palette: ['#f4efe3', '#14110d', '#b1342a', '#3a342c', '#d5c7a8'],
+    mode: 'light',
+    sample: { eyebrow: 'Chapter 3', title: 'A Brief History of the Estate System' },
+    displayFont: "'Libre Caslon Text', Georgia, serif",
+    bodyFont: "'Source Serif 4', Georgia, serif",
+    monoFont: "'JetBrains Mono', ui-monospace, monospace",
+    css: pressCss,
+  },
+  {
+    id: 'notebook',
+    name: 'Notebook',
+    pitch: "Engineer's graph paper. STEM, math, problem sets.",
+    pairing: 'IBM Plex Mono · IBM Plex Serif',
+    palette: ['#fbf9f3', '#1a2238', '#c93b2a', '#fff3cf', '#cad7e3'],
+    mode: 'light',
+    sample: { eyebrow: 'Lecture 5', title: 'Linear Maps and the Rank-Nullity Theorem' },
+    displayFont: "'IBM Plex Mono', ui-monospace, monospace",
+    bodyFont: "'IBM Plex Serif', Georgia, serif",
+    monoFont: "'IBM Plex Mono', ui-monospace, monospace",
+    css: notebookCss,
+  },
+  {
+    id: 'almanac',
+    name: 'Almanac',
+    pitch: "Naturalist's field guide. Biology, geography, food, crafts.",
+    pairing: 'Cormorant Garamond · Lora · JetBrains Mono',
+    palette: ['#f0e6cf', '#3a2a1c', '#b8662a', '#5e7148', '#f7eed5'],
+    mode: 'light',
+    sample: { eyebrow: 'Field Note 2', title: 'Identifying the Eastern Hardwoods' },
+    displayFont: "'Cormorant Garamond', Georgia, serif",
+    bodyFont: "'Lora', Georgia, serif",
+    monoFont: "'JetBrains Mono', ui-monospace, monospace",
+    css: almanacCss,
+  },
+  {
+    id: 'storybook',
+    name: 'Storybook',
+    pitch: 'Bold and friendly. Languages, intros, K-12.',
+    pairing: 'DM Serif Display · DM Sans · DM Mono',
+    palette: ['#fff8e7', '#1c2f4a', '#d94f4f', '#f4c645', '#4a8a6f'],
+    mode: 'light',
+    sample: { eyebrow: 'Lesson 4', title: 'Verbs that Move' },
+    displayFont: "'DM Serif Display', Georgia, serif",
+    bodyFont: "'DM Sans', system-ui, sans-serif",
+    monoFont: "'DM Mono', ui-monospace, monospace",
+    css: storybookCss,
+  },
+  {
+    id: 'studio',
+    name: 'Studio',
+    pitch: 'Modernist monograph. Art, architecture, design.',
+    pairing: 'Instrument Serif · Manrope · JetBrains Mono',
+    palette: ['#fafaf7', '#0a0a0a', '#c9a382', '#4a4a4a', '#ecebe6'],
+    mode: 'light',
+    sample: { eyebrow: 'Module 1', title: 'The Bauhaus and After' },
+    displayFont: "'Instrument Serif', Georgia, serif",
+    bodyFont: "'Manrope', system-ui, sans-serif",
+    monoFont: "'JetBrains Mono', ui-monospace, monospace",
+    css: studioCss,
+  },
+  {
+    id: 'terminal',
+    name: 'Terminal',
+    pitch: 'Dark dev docs. Programming, CS, sysadmin, ML.',
+    pairing: 'JetBrains Mono · IBM Plex Sans',
+    palette: ['#0d1117', '#e8edf2', '#6ee7b7', '#e8b87d', '#2a3a4a'],
+    mode: 'dark',
+    sample: { eyebrow: 'Day 6', title: 'Async Patterns and the Event Loop' },
+    displayFont: "'JetBrains Mono', ui-monospace, monospace",
+    bodyFont: "'IBM Plex Sans', system-ui, sans-serif",
+    monoFont: "'JetBrains Mono', ui-monospace, monospace",
+    css: terminalCss,
+  },
+] as const;
+
+export const DEFAULT_CHAPTER_THEME_ID: ChapterThemeId = 'press';
+
+export function getChapterTheme(themeId?: string): ChapterTheme {
+  return (
+    CHAPTER_THEMES.find((t) => t.id === themeId) ??
+    CHAPTER_THEMES.find((t) => t.id === DEFAULT_CHAPTER_THEME_ID)!
+  );
+}
+
+/** Consolidated Google Fonts link for all six themes. ~18KB on the wire. */
+export const FONTS_URL =
+  'https://fonts.googleapis.com/css2?' +
+  'family=Libre+Caslon+Text:ital,wght@0,400;0,700;1,400' +
+  '&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;0,8..60,700;1,8..60,400' +
+  '&family=JetBrains+Mono:wght@400;500;700' +
+  '&family=IBM+Plex+Mono:wght@400;500;600;700' +
+  '&family=IBM+Plex+Serif:ital,wght@0,400;0,600;0,700;1,400' +
+  '&family=IBM+Plex+Sans:wght@400;500;600' +
+  '&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500' +
+  '&family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400' +
+  '&family=DM+Serif+Display:ital@0;1' +
+  '&family=DM+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400' +
+  '&family=DM+Mono:wght@400;500' +
+  '&family=Instrument+Serif:ital@0;1' +
+  '&family=Manrope:wght@300;400;500;600;700;800' +
+  '&display=swap';
+
+/**
+ * Wrap a chapter body fragment (`<article class="ch">…</article>` + any widget
+ * scripts) into a self-contained HTML document styled by the chosen theme.
+ *
+ * Chapters are stored as fragments. This is the single source of truth for
+ * how a fragment becomes a viewable document — used by the in-app iframe
+ * preview, the .html download, and the publish/SCORM exporters.
+ */
+export function wrapChapterHtml(
+  fragment: string,
+  themeId?: string,
+  title?: string,
+): string {
+  const theme = getChapterTheme(themeId);
+  const safeTitle = (title ?? 'Chapter').replace(/[<&]/g, (c) =>
+    c === '<' ? '&lt;' : '&amp;',
+  );
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<title>${safeTitle}</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link rel="stylesheet" href="${FONTS_URL}">
+<style>
+*, *::before, *::after { box-sizing: border-box; }
+html, body { margin: 0; padding: 0; }
+${theme.css}
+</style>
+</head>
+<body class="theme-${theme.id}">
+${fragment}
+</body>
+</html>`;
+}
+
+/**
+ * Some legacy chapters (generated before the .ch-* contract) are stored as
+ * complete HTML documents with inlined theme CSS. Detect that case so we can
+ * render them as-is instead of double-wrapping a fragment.
+ */
+export function isLegacyChapterHtml(html: string): boolean {
+  const head = html.slice(0, 200).toLowerCase();
+  return head.includes('<!doctype') || head.includes('<html');
+}
+
+/**
+ * Render a chapter regardless of which storage format it's in. Use this at
+ * every render point (BuildPage iframe srcDoc, .html download, publishExporter,
+ * SCORM packager).
+ */
+export function renderChapterHtml(
+  html: string,
+  themeId?: string,
+  title?: string,
+): string {
+  if (isLegacyChapterHtml(html)) return html;
+  return wrapChapterHtml(html, themeId, title);
+}
+
+// ─── Back-compat: legacy Theme shape ──────────────────────────────────────
+//
+// The PPTX exporter, quiz template, weekly challenge template, course viewer
+// chrome, and CLI all read `theme.pageBg / cardBg / accent / textPrimary /
+// textSecondary / textMuted / accentLight / warmAccent / success / isDark`.
+// Map those fields off the new 5-role palette so those call sites keep working
+// without per-call site edits.
+
+export interface Theme {
+  id: string;
+  name: string;
+  pageBg: string;
+  cardBg: string;
+  elevated: string;
+  accent: string;
+  accentLight: string;
+  warmAccent: string;
+  textPrimary: string;
+  textSecondary: string;
+  textMuted: string;
+  success: string;
+  headingFont: string;
+  bodyFont: string;
+  isDark: boolean;
+}
+
+function deriveLegacy(t: ChapterTheme): Theme {
+  const [bg, text, accent, muted, surface] = t.palette;
+  return {
+    id: t.id,
+    name: t.name,
+    pageBg: bg,
+    cardBg: surface,
+    elevated: surface,
+    accent,
+    accentLight: lighten(accent, 0.18),
+    warmAccent: muted,
+    textPrimary: text,
+    textSecondary: mix(text, bg, 0.32),
+    textMuted: mix(text, bg, 0.55),
+    success: t.mode === 'dark' ? '#6ee7b7' : '#3d5c33',
+    headingFont: stripQuotes(t.displayFont),
+    bodyFont: stripQuotes(t.bodyFont),
+    isDark: t.mode === 'dark',
+  };
+}
+
+function stripQuotes(font: string): string {
+  const first = font.split(',')[0].trim();
+  return first.replace(/^['"]|['"]$/g, '');
+}
+
+function clamp(n: number): number {
+  return Math.max(0, Math.min(255, n));
+}
+
+function hexToRgb(hex: string): [number, number, number] {
+  const v = hex.replace('#', '');
+  const s = v.length === 3 ? v.split('').map((c) => c + c).join('') : v;
+  return [
+    parseInt(s.slice(0, 2), 16),
+    parseInt(s.slice(2, 4), 16),
+    parseInt(s.slice(4, 6), 16),
+  ];
+}
+
+function rgbToHex(r: number, g: number, b: number): string {
+  const h = (n: number) => clamp(Math.round(n)).toString(16).padStart(2, '0');
+  return `#${h(r)}${h(g)}${h(b)}`;
+}
+
+function lighten(hex: string, amount: number): string {
+  const [r, g, b] = hexToRgb(hex);
+  return rgbToHex(r + (255 - r) * amount, g + (255 - g) * amount, b + (255 - b) * amount);
+}
+
+function mix(hexA: string, hexB: string, t: number): string {
+  const [r1, g1, b1] = hexToRgb(hexA);
+  const [r2, g2, b2] = hexToRgb(hexB);
+  return rgbToHex(r1 * (1 - t) + r2 * t, g1 * (1 - t) + g2 * t, b1 * (1 - t) + b2 * t);
+}
+
+export const THEMES: readonly Theme[] = CHAPTER_THEMES.map(deriveLegacy);
+
+export function getTheme(themeId?: string): Theme {
+  return THEMES.find((t) => t.id === themeId) ?? deriveLegacy(getChapterTheme(themeId));
+}
+
+/**
+ * Legacy prompt-block helper kept for any prompt that still wants color hints.
+ * The chapter prompt no longer uses this — themes ship as separate CSS files —
+ * but the infographic prompt still uses it for palette guidance.
+ */
+export function buildThemePromptBlock(theme: Theme): string {
+  return `## VISUAL DESIGN
+Use these colors as a palette guide:
+- Page background: ${theme.pageBg}
+- Surface: ${theme.cardBg}
+- Primary accent: ${theme.accent}
+- Primary text: ${theme.textPrimary}
+- Muted accent: ${theme.warmAccent}`;
+}
diff --git a/src/types/course.ts b/src/types/course.ts
index e97f1a2..a6e33f2 100644
--- a/src/types/course.ts
+++ b/src/types/course.ts
@@ -10,7 +10,20 @@ export type PriorKnowledge = 'none' | 'some' | 'significant';
 
 export type ChapterLength = 'concise' | 'standard' | 'comprehensive';
 
-export type TeachingEnvironment = 'lecture-theatre' | 'collaborative' | 'flat-classroom' | 'online' | '';
+// Three meaningful modes for the activities prompt: a room where students
+// can't move (lecture theatre), a room where they can (active-classroom —
+// covers both flat rooms with moveable desks and pre-arranged group tables),
+// and an online/hybrid mode (breakout rooms, shared docs). The legacy
+// 'collaborative' and 'flat-classroom' values are kept on the type so older
+// persisted state still type-checks; both auto-migrate to 'active-classroom'
+// when the user next visits Setup.
+export type TeachingEnvironment =
+  | 'lecture-theatre'
+  | 'active-classroom'
+  | 'online'
+  | ''
+  | 'collaborative'    // legacy → 'active-classroom'
+  | 'flat-classroom';  // legacy → 'active-classroom'
 
 export interface CourseSetup {
   topic: string;
@@ -25,6 +38,9 @@ export interface CourseSetup {
   environmentNotes?: string;
   numChapters: number;
   chapterLength: ChapterLength;
+  /** Free-text override for reading length per chapter — passed verbatim to
+   *  the generator when set. Falls back to `chapterLength` enum when empty. */
+  chapterLengthBrief?: string;
   widgetsPerChapter: number;
   themeId?: string;
   voiceId?: string;
@@ -201,11 +217,12 @@ export interface GeneratedChapter {
   activityData?: Array<{ title: string; duration: string; description: string; materials: string; learningGoal: string; scalingNotes: string }>;
   activityDetails?: Record<number, ActivityDetail>;
   audioTranscript?: string;
-  audioUrl?: string; // blob URL from Gemini TTS (WAV)
+  audioUrl?: string; // in-session blob URL from ElevenLabs (MP3); dies on reload + stripped from persistence
+  audioDataUri?: string; // base64 data: URI of the MP3 — durable across reload (size-capped); not stripped
   slidesJson?: SlideData[];
   pptxUrl?: string; // blob URL
   infographicDataUri?: string; // data:image/jpeg;base64,...
-  infographicPrompt?: string; // the Claude-written prompt for Gemini
+  infographicPrompt?: string; // the Claude-written prompt for gpt-image-2
   weeklyChallengeData?: WeeklyChallengeData;
   /**
    * Canvas-template-shaped content for this chapter. Generated when the
@@ -240,10 +257,17 @@ export interface TemplateChapterContent {
 
 export interface SlideData {
   title: string;
-  bullets: string[];
   speakerNotes: string;
+  /** gpt-image-2 prompt describing the full editorial image for this slide. */
+  imagePrompt?: string;
+  /** Rendered image (data:image/jpeg;base64,…). Cached after first render. */
+  imageDataUri?: string;
+  // ── Legacy fields, kept for backwards-compat with persisted state from the
+  // old text-layout deck system. Not used by the new image-driven exporter
+  // except as a last-ditch fallback when a slide has no imagePrompt.
+  bullets?: string[];
   layout?: 'title' | 'content' | 'section' | 'big-idea' | 'quote' | 'two-column';
-  bodyText?: string; // Used by big-idea, quote, section layouts
+  bodyText?: string;
 }
 
 export type BloomLevel = 'remember' | 'understand' | 'apply' | 'analyze' | 'evaluate' | 'create';
@@ -259,6 +283,10 @@ export interface LearningObjective {
 export interface CurriculumMap {
   objectives: LearningObjective[];
   generatedAt: string;
+  /** Hash of the syllabus content at generation time. Used to detect when the
+   *  syllabus has been revised since the map was built, in which case the map
+   *  is stale and the UI prompts the user to regenerate. */
+  syllabusHash?: string;
 }
 
 export type StageId =
diff --git a/src/utils/activityDetail.ts b/src/utils/activityDetail.ts
new file mode 100644
index 0000000..4ba3070
--- /dev/null
+++ b/src/utils/activityDetail.ts
@@ -0,0 +1,28 @@
+import type { ActivityDetail } from '../types/course';
+
+/**
+ * Guarantees a fully-shaped ActivityDetail.
+ *
+ * The activity-detail model (Haiku) occasionally returns valid JSON that omits
+ * an array field — most often `variations` — and the `as ActivityDetail` cast
+ * at parse time does not validate it. Render/export sites then do
+ * `detail.variations.length` / `.map` / `.forEach` on `undefined`, which throws
+ * and takes down the entire Build phase (the ErrorBoundary catches it, but the
+ * malformed object is persisted, so reselecting the Activities tab re-crashes).
+ *
+ * Normalizing on parse (and defensively wherever a stored detail is read) keeps
+ * any missing field from ever reaching a `.length`/`.map`/`.forEach`.
+ */
+export function normalizeActivityDetail(
+  raw: Partial<ActivityDetail> | null | undefined,
+): ActivityDetail | undefined {
+  if (!raw) return undefined;
+  return {
+    steps: Array.isArray(raw.steps) ? raw.steps : [],
+    facilitationTips: Array.isArray(raw.facilitationTips) ? raw.facilitationTips : [],
+    commonPitfalls: Array.isArray(raw.commonPitfalls) ? raw.commonPitfalls : [],
+    debriefGuide: typeof raw.debriefGuide === 'string' ? raw.debriefGuide : '',
+    variations: Array.isArray(raw.variations) ? raw.variations : [],
+    assessmentIdeas: typeof raw.assessmentIdeas === 'string' ? raw.assessmentIdeas : '',
+  };
+}
diff --git a/src/utils/audio.ts b/src/utils/audio.ts
new file mode 100644
index 0000000..8052836
--- /dev/null
+++ b/src/utils/audio.ts
@@ -0,0 +1,37 @@
+/**
+ * Audio persistence helpers.
+ *
+ * In-session, narrated audio is held as a blob: URL (fast, cheap). But blob URLs
+ * die on reload AND are stripped from the persisted store, so audio used to
+ * vanish after a refresh. To make it durable we ALSO persist a base64 data: URI
+ * of the MP3 — capped, so a very long chapter can't re-bloat the saved snapshot
+ * (which is what stalled IndexedDB writes and lost content in the first place).
+ */
+
+/** ~6 MB of base64 ≈ ~4.5 MB MP3 ≈ ~4–5 min of narration. Above this we don't
+ *  persist the audio (it re-narrates from the saved transcript next session)
+ *  so the persisted course JSON stays small and saves reliably. */
+export const MAX_PERSISTED_AUDIO_CHARS = 6_000_000;
+
+export function blobToDataUri(blob: Blob): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve(reader.result as string);
+    reader.onerror = () => reject(reader.error ?? new Error('FileReader failed'));
+    reader.readAsDataURL(blob);
+  });
+}
+
+/**
+ * Returns a data: URI for the audio blob suitable for persistence, or undefined
+ * if it's too large to keep the saved snapshot lean (caller should then persist
+ * only the transcript so the audio re-narrates on demand).
+ */
+export async function persistableAudioDataUri(blob: Blob): Promise<string | undefined> {
+  try {
+    const uri = await blobToDataUri(blob);
+    return uri.length <= MAX_PERSISTED_AUDIO_CHARS ? uri : undefined;
+  } catch {
+    return undefined;
+  }
+}
diff --git a/src/utils/doiValidator.ts b/src/utils/doiValidator.ts
deleted file mode 100644
index 21e281d..0000000
--- a/src/utils/doiValidator.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-/**
- * Validate DOIs against the doi.org Handle API.
- * responseCode 1 = valid, anything else = invalid.
- * https://www.doi.org/the-identifier/resources/factsheets/doi-resolution-documentation
- */
-
-const DOI_HANDLE_API = 'https://doi.org/api/handles/';
-
-/** Normalize a DOI string — strip URL prefix, whitespace, trailing punctuation */
-function normalizeDoi(doi: string): string {
-  let d = doi.trim();
-  // Strip common URL prefixes
-  d = d.replace(/^https?:\/\/doi\.org\//, '');
-  d = d.replace(/^https?:\/\/dx\.doi\.org\//, '');
-  d = d.replace(/^doi:\s*/i, '');
-  // Strip trailing period or comma (common in pasted citations)
-  d = d.replace(/[.,;]+$/, '');
-  return d;
-}
-
-/**
- * Check if a single DOI resolves via the Handle API.
- * Returns true if valid, false if invalid or on network error.
- */
-async function checkDoi(doi: string): Promise<boolean> {
-  const normalized = normalizeDoi(doi);
-  if (!normalized || !normalized.includes('/')) return false;
-
-  try {
-    const response = await fetch(`${DOI_HANDLE_API}${normalized}`, {
-      method: 'GET',
-      headers: { 'Accept': 'application/json' },
-    });
-    if (!response.ok) return false;
-    const data = await response.json();
-    return data.responseCode === 1;
-  } catch {
-    // Network error — don't strip the DOI, give benefit of doubt
-    return true;
-  }
-}
-
-export interface DoiValidationResult {
-  doi: string;
-  valid: boolean;
-}
-
-/**
- * Validate an array of DOIs in parallel.
- * Returns a Map from original DOI string to validity.
- */
-export async function validateDois(dois: string[]): Promise<Map<string, boolean>> {
-  const unique = [...new Set(dois.filter(Boolean))];
-  const results = await Promise.all(
-    unique.map(async (doi): Promise<[string, boolean]> => [doi, await checkDoi(doi)])
-  );
-  return new Map(results);
-}
diff --git a/src/utils/download.ts b/src/utils/download.ts
new file mode 100644
index 0000000..786ed1e
--- /dev/null
+++ b/src/utils/download.ts
@@ -0,0 +1,14 @@
+/** Trigger a browser download for a string blob or a Blob. */
+export function downloadFile(
+  content: string | Blob,
+  filename: string,
+  type = 'text/html',
+): void {
+  const blob = content instanceof Blob ? content : new Blob([content], { type });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = filename;
+  a.click();
+  URL.revokeObjectURL(url);
+}
diff --git a/src/utils/errors.ts b/src/utils/errors.ts
index 3a2d633..e0c5b52 100644
--- a/src/utils/errors.ts
+++ b/src/utils/errors.ts
@@ -1,5 +1,5 @@
 /**
- * Convert an error from Claude, Gemini, ElevenLabs, or a raw fetch into a
+ * Convert an error from Claude, OpenAI, ElevenLabs, or a raw fetch into a
  * short, user-facing sentence. Used by the UI so tab-error banners and
  * toasts don't leak internal API noise like "HTTP 429: {"error":..."}.
  *
@@ -54,8 +54,8 @@ export function friendlyError(err: unknown, fallback = 'Something went wrong. Tr
     return 'CanvasClassBuild was updated while this tab was open. Refresh the page (Cmd/Ctrl+Shift+R) and retry.';
   }
 
-  // Network
-  if (/failed to fetch|network|econnreset|timeout|timed out|econnref/i.test(message)) {
+  // Network — includes the Anthropic SDK's APIConnectionError ("Connection error.")
+  if (/failed to fetch|network|connection error|econnreset|timeout|timed out|econnref/i.test(message)) {
     return 'Network error. Check your connection and retry.';
   }
 
@@ -71,6 +71,20 @@ export function friendlyError(err: unknown, fallback = 'Something went wrong. Tr
   return fallback;
 }
 
+/**
+ * True when an error is the result of a user-initiated cancel (AbortController
+ * fired). Call sites treat these as a silent no-op — never an error banner.
+ * Covers DOM AbortError, the Anthropic SDK's APIUserAbortError, and the
+ * generic "Request was aborted." message shape.
+ */
+export function isAbortError(err: unknown): boolean {
+  if (err == null) return false;
+  const name = (err as { name?: string }).name;
+  if (name === 'AbortError' || name === 'APIUserAbortError') return true;
+  const message = err instanceof Error ? err.message : String(err);
+  return /\baborted\b/i.test(message);
+}
+
 function getStatus(err: unknown): number | undefined {
   if (err == null || typeof err !== 'object') return undefined;
   const s = err as StatusLike;
diff --git a/src/utils/format.ts b/src/utils/format.ts
index 1c86a8b..6779c84 100644
--- a/src/utils/format.ts
+++ b/src/utils/format.ts
@@ -10,23 +10,53 @@ export function slugify(text: string): string {
 }
 
 /**
- * Extract a standalone HTML document from a Claude response that may wrap it
- * in a ```html fence, start mid-prose, or include commentary after </html>.
+ * Extract chapter HTML from a Claude response. Handles three formats:
+ *
+ *  1. NEW contract (current chapter prompt): `<article class="ch">…</article>`
+ *     plus any trailing `<script>` blocks for widget logic. Returned as a
+ *     fragment — the wrapping `<!DOCTYPE html>` envelope is added by
+ *     `wrapChapterHtml` from `src/themes/themes.config.ts`.
+ *
+ *  2. LEGACY full document (chapters generated under the old prompt):
+ *     `<!DOCTYPE html>…</html>`. Returned as-is so existing courseStore
+ *     entries keep rendering.
+ *
+ *  3. Either of the above wrapped in a ```html fence, or surrounded by
+ *     incidental prose. The wrapper is stripped.
  */
 export function extractHtml(text: string): string {
-  const htmlMatch = text.match(/```html\s*\n?([\s\S]*?)\n?```/);
-  if (htmlMatch) return htmlMatch[1];
-  const trimmed = text.trim();
-  if (trimmed.startsWith('<!DOCTYPE') || trimmed.startsWith('<html')) return trimmed;
-  const docIdx = text.indexOf('<!DOCTYPE');
-  const htmlIdx = text.indexOf('<html');
+  const fenced = text.match(/```html\s*\n?([\s\S]*?)\n?```/);
+  const body = fenced ? fenced[1] : text;
+  const trimmed = body.trim();
+
+  // Legacy full HTML document.
+  if (trimmed.startsWith('<!DOCTYPE') || trimmed.startsWith('<html')) {
+    const endHtml = trimmed.lastIndexOf('</html>');
+    return endHtml !== -1 ? trimmed.slice(0, endHtml + 7) : trimmed;
+  }
+
+  // New contract: starts with <article class="ch">.
+  const articleStart = body.indexOf('<article');
+  if (articleStart !== -1) {
+    // Extend to the last </script> (widgets) or </article> (no widgets).
+    const lastScript = body.lastIndexOf('</script>');
+    const lastArticle = body.lastIndexOf('</article>');
+    const endIdx = Math.max(lastScript === -1 ? -1 : lastScript + 9, lastArticle === -1 ? -1 : lastArticle + 10);
+    if (endIdx > articleStart) return body.slice(articleStart, endIdx);
+    return body.slice(articleStart);
+  }
+
+  // Fallback: legacy doc somewhere mid-response.
+  const docIdx = body.indexOf('<!DOCTYPE');
+  const htmlIdx = body.indexOf('<html');
   const startIdx = docIdx !== -1 ? docIdx : htmlIdx;
   if (startIdx !== -1) {
-    const endIdx = text.lastIndexOf('</html>');
-    if (endIdx !== -1) return text.slice(startIdx, endIdx + 7);
-    return text.slice(startIdx);
+    const endIdx = body.lastIndexOf('</html>');
+    if (endIdx !== -1) return body.slice(startIdx, endIdx + 7);
+    return body.slice(startIdx);
   }
-  return text;
+
+  return trimmed;
 }
 
 /**
diff --git a/src/utils/projectFile.ts b/src/utils/projectFile.ts
new file mode 100644
index 0000000..14742f2
--- /dev/null
+++ b/src/utils/projectFile.ts
@@ -0,0 +1,190 @@
+/**
+ * Project file save / restore.
+ *
+ * A `.classbuild.json` file is a portable snapshot of the course store, so a
+ * course survives cleared browser storage or moving machines. It carries the
+ * same slice of state as the persisted IndexedDB snapshot (mirroring
+ * courseStore's `partialize`, re-implemented here so nothing private leaks
+ * across module boundaries): chapters are included, but the heavyweight
+ * rendered binaries are stripped — in-session blob URLs (dead after reload
+ * anyway), the infographic JPEG, and the rendered 4K slide images (their
+ * prompts are kept so decks re-render). The size-capped `audioDataUri` stays.
+ *
+ * API keys are NEVER part of a project file.
+ */
+
+import { useCourseStore } from '../store/courseStore';
+import type {
+  CourseSetup,
+  CurriculumMap,
+  GeneratedChapter,
+  ResearchDossier,
+  StageId,
+  Syllabus,
+} from '../types/course';
+
+const PROJECT_FILE_FORMAT = 'classbuild-project';
+const PROJECT_FILE_VERSION = 1;
+
+/** The slice of course state carried in a project file. */
+export interface ProjectFileState {
+  currentStage: StageId;
+  completedStages: StageId[];
+  setup: CourseSetup;
+  syllabus: Syllabus | null;
+  syllabusConversation: Array<{ role: 'user' | 'assistant'; content: string }>;
+  researchDossiers: ResearchDossier[];
+  curriculumMap: CurriculumMap | null;
+  chapters: GeneratedChapter[];
+}
+
+export type ProjectFileParseResult =
+  | { ok: true; state: ProjectFileState; savedAt: string | null }
+  | { ok: false; error: string };
+
+function isStageId(value: unknown): value is StageId {
+  return (
+    value === 'landing' ||
+    value === 'setup' ||
+    value === 'syllabus' ||
+    value === 'research' ||
+    value === 'build' ||
+    value === 'export'
+  );
+}
+
+/**
+ * Serialize the current course into project-file JSON. Chapters are stripped
+ * exactly like the persisted snapshot: blob URLs and rendered binaries out,
+ * everything regenerable-from or small stays in. `JSON.stringify` drops the
+ * `undefined` fields from the output.
+ */
+export function buildProjectFile(): string {
+  const s = useCourseStore.getState();
+  const state: ProjectFileState = {
+    currentStage: s.currentStage,
+    completedStages: s.completedStages,
+    setup: s.setup,
+    syllabus: s.syllabus,
+    syllabusConversation: s.syllabusConversation,
+    researchDossiers: s.researchDossiers,
+    curriculumMap: s.curriculumMap,
+    chapters: s.chapters.map((c) => ({
+      ...c,
+      audioUrl: undefined,
+      pptxUrl: undefined,
+      infographicDataUri: undefined,
+      slidesJson: c.slidesJson?.map((slide) => ({ ...slide, imageDataUri: undefined })),
+    })),
+  };
+  return JSON.stringify(
+    {
+      format: PROJECT_FILE_FORMAT,
+      version: PROJECT_FILE_VERSION,
+      savedAt: new Date().toISOString(),
+      state,
+    },
+    null,
+    2,
+  );
+}
+
+/**
+ * Parse and validate project-file text. Validation is structural — enough to
+ * guarantee the store won't be handed something unusable — with the deep
+ * shapes typed loosely from the course types.
+ */
+export function parseProjectFile(text: string): ProjectFileParseResult {
+  let raw: unknown;
+  try {
+    raw = JSON.parse(text);
+  } catch {
+    return { ok: false, error: 'Not a ClassBuild project file (the file is not valid JSON).' };
+  }
+  if (typeof raw !== 'object' || raw === null || Array.isArray(raw)) {
+    return { ok: false, error: 'Not a ClassBuild project file.' };
+  }
+
+  const envelope = raw as Record<string, unknown>;
+  if (envelope.format !== PROJECT_FILE_FORMAT) {
+    return { ok: false, error: 'Not a ClassBuild project file.' };
+  }
+  if (typeof envelope.version !== 'number') {
+    return { ok: false, error: 'Not a ClassBuild project file (missing version).' };
+  }
+  if (envelope.version > PROJECT_FILE_VERSION) {
+    return {
+      ok: false,
+      error: 'Saved by a newer version of ClassBuild — update this app to open it.',
+    };
+  }
+
+  const stateRaw = envelope.state;
+  if (typeof stateRaw !== 'object' || stateRaw === null || Array.isArray(stateRaw)) {
+    return { ok: false, error: 'The project file is damaged — its course data is missing.' };
+  }
+  const candidate = stateRaw as Record<string, unknown>;
+
+  const setupRaw = candidate.setup;
+  if (
+    typeof setupRaw !== 'object' ||
+    setupRaw === null ||
+    Array.isArray(setupRaw) ||
+    typeof (setupRaw as Record<string, unknown>).topic !== 'string'
+  ) {
+    return { ok: false, error: 'The project file is damaged — no course setup found.' };
+  }
+
+  if (!Array.isArray(candidate.chapters)) {
+    return { ok: false, error: 'The project file is damaged — its chapters are missing.' };
+  }
+
+  const syllabusRaw = candidate.syllabus ?? null;
+  if (syllabusRaw !== null) {
+    if (
+      typeof syllabusRaw !== 'object' ||
+      Array.isArray(syllabusRaw) ||
+      !Array.isArray((syllabusRaw as Record<string, unknown>).chapters)
+    ) {
+      return { ok: false, error: 'The project file is damaged — its syllabus is malformed.' };
+    }
+  }
+
+  const state: ProjectFileState = {
+    currentStage: isStageId(candidate.currentStage) ? candidate.currentStage : 'setup',
+    completedStages: Array.isArray(candidate.completedStages)
+      ? (candidate.completedStages as unknown[]).filter(isStageId)
+      : [],
+    setup: setupRaw as CourseSetup,
+    syllabus: syllabusRaw as Syllabus | null,
+    syllabusConversation: Array.isArray(candidate.syllabusConversation)
+      ? (candidate.syllabusConversation as ProjectFileState['syllabusConversation'])
+      : [],
+    researchDossiers: Array.isArray(candidate.researchDossiers)
+      ? (candidate.researchDossiers as ResearchDossier[])
+      : [],
+    curriculumMap: (candidate.curriculumMap ?? null) as CurriculumMap | null,
+    chapters: candidate.chapters as GeneratedChapter[],
+  };
+
+  const savedAt = typeof envelope.savedAt === 'string' ? envelope.savedAt : null;
+  return { ok: true, state, savedAt };
+}
+
+/**
+ * Write a validated project-file state into the course store. Zustand's
+ * `setState` merges at the top level, so the store's actions stay intact;
+ * persistence middleware then writes the restored course to IndexedDB.
+ */
+export function applyProjectFile(state: ProjectFileState): void {
+  useCourseStore.setState({
+    currentStage: state.currentStage,
+    completedStages: state.completedStages,
+    setup: state.setup,
+    syllabus: state.syllabus,
+    syllabusConversation: state.syllabusConversation,
+    researchDossiers: state.researchDossiers,
+    curriculumMap: state.curriculumMap,
+    chapters: state.chapters,
+  });
+}
diff --git a/tests/components/ApiKeyPanel.test.tsx b/tests/components/ApiKeyPanel.test.tsx
deleted file mode 100644
index f5d7baa..0000000
--- a/tests/components/ApiKeyPanel.test.tsx
+++ /dev/null
@@ -1,308 +0,0 @@
-import { describe, it, expect, beforeEach, afterEach } from 'vitest';
-import { render, screen, waitFor, act } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { ApiKeyPanel } from '../../src/components/setup/ApiKeyPanel';
-import { useApiStore } from '../../src/store/apiStore';
-
-// ── Fetch mock helper ─────────────────────────────────────────────
-
-interface MockFetchCall {
-  url: string;
-  method: string;
-  authorization: string | null;
-  body: unknown;
-}
-
-function installMockFetch(handler: (call: MockFetchCall) => unknown = () => ({ ok: true })): {
-  calls: MockFetchCall[];
-  restore: () => void;
-} {
-  const calls: MockFetchCall[] = [];
-  const original = globalThis.fetch;
-  globalThis.fetch = (async (input: string | URL | Request, init?: RequestInit) => {
-    const url = typeof input === 'string' ? input : input instanceof URL ? input.toString() : input.url;
-    const method = init?.method ?? 'GET';
-    const headers = new Headers(init?.headers ?? {});
-    let body: unknown;
-    if (init?.body && typeof init.body === 'string') {
-      try {
-        body = JSON.parse(init.body);
-      } catch {
-        body = init.body;
-      }
-    }
-    const call: MockFetchCall = { url, method, authorization: headers.get('authorization'), body };
-    calls.push(call);
-    const result = handler(call);
-    if (result instanceof Response) return result;
-    return new Response(JSON.stringify(result), {
-      status: 200,
-      headers: { 'Content-Type': 'application/json' },
-    });
-  }) as typeof globalThis.fetch;
-  return {
-    calls,
-    restore: () => {
-      globalThis.fetch = original;
-    },
-  };
-}
-
-// ── Default store reset ───────────────────────────────────────────
-
-function resetApiStore() {
-  useApiStore.setState({
-    provider: 'anthropic',
-    researchBackend: 'anthropic',
-    advancedMode: false,
-    claudeApiKey: '',
-    geminiApiKey: '',
-    ollamaApiKey: '',
-    ollamaModel: 'gpt-oss:120b-cloud',
-    tavilyApiKey: '',
-    claudeKeyValid: null,
-    geminiKeyValid: null,
-    ollamaKeyValid: null,
-    tavilyKeyValid: null,
-    isValidatingClaude: false,
-    isValidatingGemini: false,
-    isValidatingOllama: false,
-    isValidatingTavily: false,
-  });
-}
-
-describe('<ApiKeyPanel /> — toggles', () => {
-  let fetchMock: ReturnType<typeof installMockFetch>;
-
-  beforeEach(() => {
-    resetApiStore();
-    fetchMock = installMockFetch();
-  });
-
-  afterEach(() => {
-    fetchMock.restore();
-  });
-
-  it('clicking the "Ollama Cloud" segment updates apiStore.provider', async () => {
-    const user = userEvent.setup();
-    render(<ApiKeyPanel />);
-
-    expect(useApiStore.getState().provider).toBe('anthropic');
-    await user.click(screen.getByRole('button', { name: /ollama cloud/i }));
-    expect(useApiStore.getState().provider).toBe('ollama');
-  });
-
-  it('hint text under the provider toggle reflects the selection', async () => {
-    const user = userEvent.setup();
-    render(<ApiKeyPanel />);
-
-    // Use distinctive sub-strings that only appear in the hint paragraph,
-    // not in any ProviderCard tagline that might match more loosely.
-    expect(screen.getByText(/Claude writes syllabus and chapter content/i)).toBeInTheDocument();
-    await user.click(screen.getByRole('button', { name: /ollama cloud/i }));
-    expect(
-      screen.getByText(/research stage uses whichever backend you pick below/i),
-    ).toBeInTheDocument();
-  });
-
-  it('clicking each research backend segment updates apiStore.researchBackend', async () => {
-    const user = userEvent.setup();
-    render(<ApiKeyPanel />);
-
-    expect(useApiStore.getState().researchBackend).toBe('anthropic');
-
-    await user.click(screen.getByRole('button', { name: /^tavily$/i }));
-    expect(useApiStore.getState().researchBackend).toBe('tavily');
-
-    await user.click(screen.getByRole('button', { name: /^wikipedia$/i }));
-    expect(useApiStore.getState().researchBackend).toBe('wikipedia');
-
-    await user.click(screen.getByRole('button', { name: /claude web search/i }));
-    expect(useApiStore.getState().researchBackend).toBe('anthropic');
-  });
-
-  it('research-hint text changes with the selected backend', async () => {
-    const user = userEvent.setup();
-    render(<ApiKeyPanel />);
-
-    // Match on the trailing portion of each hint — unique to the
-    // research-backend hint paragraph (not also present in provider cards).
-    expect(screen.getByText(/Requires the Claude key/i)).toBeInTheDocument();
-
-    await user.click(screen.getByRole('button', { name: /^tavily$/i }));
-    expect(screen.getByText(/Requires the Tavily key/i)).toBeInTheDocument();
-
-    await user.click(screen.getByRole('button', { name: /^wikipedia$/i }));
-    expect(screen.getByText(/No extra key needed/i)).toBeInTheDocument();
-  });
-});
-
-describe('<ApiKeyPanel /> — Ollama model input', () => {
-  let fetchMock: ReturnType<typeof installMockFetch>;
-
-  beforeEach(() => {
-    resetApiStore();
-    fetchMock = installMockFetch();
-  });
-
-  afterEach(() => {
-    fetchMock.restore();
-  });
-
-  it('hides the Ollama model input when provider !== "ollama"', () => {
-    useApiStore.setState({ ollamaApiKey: 'present' });
-    render(<ApiKeyPanel />);
-    expect(screen.queryByLabelText(/ollama model/i)).not.toBeInTheDocument();
-  });
-
-  it('hides the Ollama model input when provider="ollama" but no key is set', () => {
-    useApiStore.setState({ provider: 'ollama', ollamaApiKey: '' });
-    render(<ApiKeyPanel />);
-    expect(screen.queryByLabelText(/ollama model/i)).not.toBeInTheDocument();
-  });
-
-  it('shows the Ollama model input when provider="ollama" AND key is present', () => {
-    useApiStore.setState({ provider: 'ollama', ollamaApiKey: 'ollama-key' });
-    render(<ApiKeyPanel />);
-    const input = screen.getByLabelText(/ollama model/i) as HTMLInputElement;
-    expect(input).toBeInTheDocument();
-    expect(input.value).toBe('gpt-oss:120b-cloud');
-  });
-
-  it('editing the model input writes through to apiStore', async () => {
-    const user = userEvent.setup();
-    useApiStore.setState({ provider: 'ollama', ollamaApiKey: 'ollama-key' });
-    render(<ApiKeyPanel />);
-
-    const input = screen.getByLabelText(/ollama model/i) as HTMLInputElement;
-    await user.clear(input);
-    await user.type(input, 'qwen3-coder:480b-cloud');
-
-    expect(useApiStore.getState().ollamaModel).toBe('qwen3-coder:480b-cloud');
-  });
-});
-
-describe('<ApiKeyPanel /> — auto-validation on mount', () => {
-  let fetchMock: ReturnType<typeof installMockFetch>;
-
-  afterEach(() => {
-    fetchMock?.restore();
-  });
-
-  it('validates a stored Ollama key by POSTing /api/ollama-proxy with bearer auth', async () => {
-    resetApiStore();
-    useApiStore.setState({ ollamaApiKey: 'ollama-key-xyz' });
-    fetchMock = installMockFetch();
-
-    render(<ApiKeyPanel />);
-
-    await waitFor(() => {
-      expect(fetchMock.calls.some((c) => c.url === '/api/ollama-proxy')).toBe(true);
-    });
-
-    const ollamaCall = fetchMock.calls.find((c) => c.url === '/api/ollama-proxy')!;
-    expect(ollamaCall.method).toBe('POST');
-    expect(ollamaCall.authorization).toBe('Bearer ollama-key-xyz');
-    expect(ollamaCall.body).toMatchObject({ stream: false });
-
-    await waitFor(() => {
-      expect(useApiStore.getState().ollamaKeyValid).toBe(true);
-    });
-  });
-
-  it('validates a stored Tavily key against api.tavily.com/search', async () => {
-    resetApiStore();
-    useApiStore.setState({ tavilyApiKey: 'tvly-xyz' });
-    fetchMock = installMockFetch();
-
-    render(<ApiKeyPanel />);
-
-    await waitFor(() => {
-      expect(
-        fetchMock.calls.some((c) => c.url === 'https://api.tavily.com/search'),
-      ).toBe(true);
-    });
-
-    const tavilyCall = fetchMock.calls.find(
-      (c) => c.url === 'https://api.tavily.com/search',
-    )!;
-    expect(tavilyCall.authorization).toBe('Bearer tvly-xyz');
-
-    await waitFor(() => {
-      expect(useApiStore.getState().tavilyKeyValid).toBe(true);
-    });
-  });
-
-  it('validates a stored Gemini key against googleapis.com/.../models', async () => {
-    resetApiStore();
-    useApiStore.setState({ geminiApiKey: 'AIzaTEST' });
-    fetchMock = installMockFetch();
-
-    render(<ApiKeyPanel />);
-
-    await waitFor(() => {
-      expect(
-        fetchMock.calls.some((c) =>
-          c.url.startsWith(
-            'https://generativelanguage.googleapis.com/v1beta/models',
-          ),
-        ),
-      ).toBe(true);
-    });
-
-    const geminiCall = fetchMock.calls.find((c) =>
-      c.url.startsWith('https://generativelanguage.googleapis.com/'),
-    )!;
-    expect(geminiCall.url).toContain('key=AIzaTEST');
-
-    await waitFor(() => {
-      expect(useApiStore.getState().geminiKeyValid).toBe(true);
-    });
-  });
-
-  it('sets keyValid=false when the validation endpoint returns non-2xx', async () => {
-    resetApiStore();
-    useApiStore.setState({ tavilyApiKey: 'tvly-bad' });
-    fetchMock = installMockFetch(
-      () => new Response('forbidden', { status: 401 }),
-    );
-
-    render(<ApiKeyPanel />);
-
-    await waitFor(() => {
-      expect(useApiStore.getState().tavilyKeyValid).toBe(false);
-    });
-  });
-
-  it('skips validation when a stored key already has a recorded validation result', async () => {
-    resetApiStore();
-    useApiStore.setState({ tavilyApiKey: 'tvly-xyz', tavilyKeyValid: true });
-    fetchMock = installMockFetch();
-
-    render(<ApiKeyPanel />);
-
-    // Give the mount effect a chance to fire.
-    await act(async () => {
-      await new Promise((r) => setTimeout(r, 20));
-    });
-
-    expect(
-      fetchMock.calls.some((c) => c.url === 'https://api.tavily.com/search'),
-    ).toBe(false);
-  });
-
-  it('does not validate keys that are blank', async () => {
-    resetApiStore(); // all keys empty
-    fetchMock = installMockFetch();
-
-    render(<ApiKeyPanel />);
-
-    await act(async () => {
-      await new Promise((r) => setTimeout(r, 20));
-    });
-
-    // No validation endpoints called — only Claude's would route through
-    // the SDK, but it short-circuits on empty input too.
-    expect(fetchMock.calls).toHaveLength(0);
-  });
-});
diff --git a/tests/components/BuildPage.test.tsx b/tests/components/BuildPage.test.tsx
index 9083666..281b186 100644
--- a/tests/components/BuildPage.test.tsx
+++ b/tests/components/BuildPage.test.tsx
@@ -1,5 +1,5 @@
 import { describe, it, expect, beforeEach, vi } from 'vitest';
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { MemoryRouter } from 'react-router-dom';
 import { BuildPage } from '../../src/pages/BuildPage';
@@ -7,6 +7,7 @@ import { useCourseStore } from '../../src/store/courseStore';
 import { useApiStore } from '../../src/store/apiStore';
 import { useUiStore } from '../../src/store/uiStore';
 import { useTemplateStore } from '../../src/store/templateStore';
+import { generateTemplateChapter } from '../../src/services/template/generateChapter';
 import type { Syllabus, GeneratedChapter, ResearchDossier } from '../../src/types/course';
 
 // Network/streaming + any backend the page can fire on mount: stub so tests
@@ -16,6 +17,18 @@ vi.mock('../../src/services/claude/streaming', () => ({
   streamWithRetry: vi.fn(() => new Promise(() => {})),
 }));
 
+// BuildPage dynamic-imports this for the Canvas Module tab.
+vi.mock('../../src/services/template/generateChapter', () => ({
+  generateTemplateChapter: vi.fn(async () => ({
+    content: {
+      moduleOverviewHtml: '<p>Overview body</p>',
+      instructorNotes: [{ title: 'Note one', htmlContent: '<p>note</p>' }],
+      discussion: { title: 'Talk it over', promptHtml: '<p>prompt</p>' },
+    },
+    rawText: '',
+  })),
+}));
+
 const navigateMock = vi.fn();
 vi.mock('react-router-dom', async () => {
   const actual = await vi.importActual<typeof import('react-router-dom')>('react-router-dom');
@@ -63,9 +76,33 @@ function renderPage() {
   );
 }
 
+function activateTemplate() {
+  useCourseStore.setState({
+    setup: { ...useCourseStore.getState().setup, templateId: 'tpl-1' },
+  });
+  useTemplateStore.setState({
+    templates: [
+      {
+        id: 'tpl-1',
+        parserVersion: 3,
+        name: 'Stats Template',
+        uploadedAt: new Date().toISOString(),
+        fileSizeBytes: 1234,
+        modules: [],
+        images: [],
+        ltiResources: [],
+        courseSettings: {},
+        totalFiles: 5,
+      },
+    ],
+    activeTemplateId: 'tpl-1',
+  });
+}
+
 describe('<BuildPage />', () => {
   beforeEach(() => {
     navigateMock.mockClear();
+    vi.mocked(generateTemplateChapter).mockClear();
     useCourseStore.getState().reset();
     useUiStore.setState({
       error: null,
@@ -78,7 +115,6 @@ describe('<BuildPage />', () => {
     });
     useApiStore.setState({
       claudeApiKey: 'sk-x',
-      geminiApiKey: '',
       advancedMode: false,
     });
     useTemplateStore.setState({ templates: [], activeTemplateId: null });
@@ -91,11 +127,11 @@ describe('<BuildPage />', () => {
     }
   });
 
-  it('shows an empty state with a Back to Syllabus button when no syllabus is in the store', async () => {
+  it('shows an empty state with a Back to syllabus button when no syllabus is in the store', async () => {
     const user = userEvent.setup();
     renderPage();
 
-    expect(screen.getByText(/no syllabus available/i)).toBeInTheDocument();
+    expect(screen.getByText(/no syllabus generated yet/i)).toBeInTheDocument();
     await user.click(screen.getByRole('button', { name: /back to syllabus/i }));
     expect(navigateMock).toHaveBeenCalledWith('/syllabus');
   });
@@ -104,8 +140,8 @@ describe('<BuildPage />', () => {
     useCourseStore.setState({ syllabus: makeSyllabus(3) });
     renderPage();
 
-    expect(screen.getByRole('heading', { name: /^build$/i })).toBeInTheDocument();
-    expect(screen.getByText(/0\/3 classes/)).toBeInTheDocument();
+    expect(screen.getByRole('heading', { name: 'Intro to Statistics' })).toBeInTheDocument();
+    expect(screen.getByText(/0 of 3 chapters built/i)).toBeInTheDocument();
     expect(screen.getByRole('button', { name: /go to export/i })).toBeDisabled();
   });
 
@@ -126,10 +162,10 @@ describe('<BuildPage />', () => {
     expect(useCourseStore.getState().currentStage).toBe('export');
   });
 
-  it('shows "Generate All Classes" when no chapters exist, "Generate Remaining" once some exist', () => {
+  it('shows "Draft all chapters" when none exist, "Draft remaining chapters" once some do', () => {
     useCourseStore.setState({ syllabus: makeSyllabus(3) });
     const { unmount } = renderPage();
-    expect(screen.getByRole('button', { name: /generate all classes/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /draft all chapters/i })).toBeInTheDocument();
 
     unmount();
     useCourseStore.setState({
@@ -137,14 +173,13 @@ describe('<BuildPage />', () => {
       chapters: [makeChapter({ number: 1, title: 'Topic 1' })],
     });
     renderPage();
-    expect(screen.getByRole('button', { name: /generate remaining classes/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /draft remaining chapters/i })).toBeInTheDocument();
   });
 
-  it('shows the "Generate This Class" call-to-action when chapter has research but no content yet', async () => {
+  it('shows the "Draft this chapter" call-to-action when a chapter has research but no content yet', async () => {
     const user = userEvent.setup();
-    // Chapter 1 already generated (blocks the auto-gen effect, which only
-    // targets chapter 1). Chapter 2 has research but no content — that's
-    // the state we want to land on.
+    // Chapter 1 already generated; chapter 2 has research but no content —
+    // that's the state we want to land on.
     useCourseStore.setState({
       syllabus: makeSyllabus(2),
       researchDossiers: [makeDossier(2)],
@@ -153,14 +188,13 @@ describe('<BuildPage />', () => {
     renderPage();
 
     // Click the sidebar entry for chapter 2 to switch to it.
-    const sidebarRow = screen.getByText(/2\. topic 2/i);
-    await user.click(sidebarRow);
+    await user.click(screen.getByRole('button', { name: /topic 2/i }));
 
-    expect(screen.getByText(/class 2: topic 2/i)).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: /generate this class/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /view dossier/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /draft this chapter/i })).toBeInTheDocument();
   });
 
-  it('warns the user when the chapter has no research, offering both "Go to Research" and "Generate Anyway"', async () => {
+  it('warns the user when the chapter has no research, offering both "Go to Research" and "Draft anyway"', async () => {
     const user = userEvent.setup();
     useCourseStore.setState({
       syllabus: makeSyllabus(2),
@@ -169,31 +203,32 @@ describe('<BuildPage />', () => {
     });
     renderPage();
 
-    expect(screen.getByText(/no research has been conducted/i)).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: /go to research/i })).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: /generate anyway/i })).toBeInTheDocument();
+    expect(screen.getByText(/no research yet for this chapter/i)).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /draft anyway/i })).toBeInTheDocument();
 
     await user.click(screen.getByRole('button', { name: /go to research/i }));
     expect(navigateMock).toHaveBeenCalledWith('/research');
   });
 
-  it('shows the default tab set (Reading / Practice Quiz / In-Class Quiz / Discussion) for a generated chapter', () => {
+  it('shows the default tab set (Reading / Practice / Quizzes / Discussion) for a generated chapter', () => {
     useCourseStore.setState({
       syllabus: makeSyllabus(1),
       chapters: [makeChapter({ number: 1, title: 'Topic 1' })],
     });
     renderPage();
 
-    expect(screen.getByRole('button', { name: /^reading$/i })).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: /^practice quiz$/i })).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: /^in-class quiz$/i })).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: /^discussion$/i })).toBeInTheDocument();
+    expect(screen.getByRole('tab', { name: /^reading/i })).toBeInTheDocument();
+    expect(screen.getByRole('tab', { name: /^practice/i })).toBeInTheDocument();
+    expect(screen.getByRole('tab', { name: /^quizzes/i })).toBeInTheDocument();
+    expect(screen.getByRole('tab', { name: /^discussion/i })).toBeInTheDocument();
     // Advanced tabs hidden by default.
-    expect(screen.queryByRole('button', { name: /^weekly challenge$/i })).not.toBeInTheDocument();
-    expect(screen.queryByRole('button', { name: /^audiobook$/i })).not.toBeInTheDocument();
+    expect(screen.queryByRole('tab', { name: /^challenge/i })).not.toBeInTheDocument();
+    expect(screen.queryByRole('tab', { name: /^activities/i })).not.toBeInTheDocument();
+    expect(screen.queryByRole('tab', { name: /^audio/i })).not.toBeInTheDocument();
+    expect(screen.queryByRole('tab', { name: /^slides/i })).not.toBeInTheDocument();
   });
 
-  it('reveals the advanced tabs (Weekly Challenge / Activities / Audiobook / Slides) when advancedMode is on', () => {
+  it('reveals the advanced tabs (Challenge / Activities / Audio / Slides) when advancedMode is on', () => {
     useCourseStore.setState({
       syllabus: makeSyllabus(1),
       chapters: [makeChapter({ number: 1, title: 'Topic 1' })],
@@ -201,64 +236,66 @@ describe('<BuildPage />', () => {
     useApiStore.setState({ advancedMode: true });
     renderPage();
 
-    expect(screen.getByRole('button', { name: /^weekly challenge$/i })).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: /^activities$/i })).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: /^audiobook$/i })).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: /^slides$/i })).toBeInTheDocument();
-    // Infographic still hidden without Gemini key.
-    expect(screen.queryByRole('button', { name: /^infographic$/i })).not.toBeInTheDocument();
+    expect(screen.getByRole('tab', { name: /^challenge/i })).toBeInTheDocument();
+    expect(screen.getByRole('tab', { name: /^activities/i })).toBeInTheDocument();
+    expect(screen.getByRole('tab', { name: /^audio/i })).toBeInTheDocument();
+    expect(screen.getByRole('tab', { name: /^slides/i })).toBeInTheDocument();
   });
 
-  it('adds the Infographic tab only when both advancedMode and a Gemini key are configured', () => {
+  it('prepends the Canvas Module tab when a Canvas template is active', () => {
     useCourseStore.setState({
       syllabus: makeSyllabus(1),
       chapters: [makeChapter({ number: 1, title: 'Topic 1' })],
     });
-    useApiStore.setState({ advancedMode: true, geminiApiKey: 'gemini-key' });
+    activateTemplate();
     renderPage();
 
-    expect(screen.getByRole('button', { name: /^infographic$/i })).toBeInTheDocument();
+    const tabs = screen.getAllByRole('tab');
+    expect(tabs[0]).toHaveTextContent(/^canvas module/i);
+    expect(screen.getByRole('button', { name: /generate all canvas modules/i })).toBeInTheDocument();
   });
 
-  it('prepends the Canvas Module tab when a Canvas template is active', () => {
+  it('does not show the Canvas Module tab without a template', () => {
     useCourseStore.setState({
       syllabus: makeSyllabus(1),
       chapters: [makeChapter({ number: 1, title: 'Topic 1' })],
-      setup: { ...useCourseStore.getState().setup, templateId: 'tpl-1' },
     });
-    useTemplateStore.setState({
-      templates: [
-        {
-          id: 'tpl-1',
-          parserVersion: 3,
-          name: 'Stats Template',
-          uploadedAt: new Date().toISOString(),
-          fileSizeBytes: 1234,
-          modules: [],
-          images: [],
-          ltiResources: [],
-          courseSettings: {},
-          totalFiles: 5,
-        },
-      ],
-      activeTemplateId: 'tpl-1',
+    renderPage();
+
+    expect(screen.queryByRole('tab', { name: /^canvas module/i })).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: /canvas modules?/i })).not.toBeInTheDocument();
+  });
+
+  it('generates a Canvas module from the Canvas Module tab and stores it on the chapter', async () => {
+    const user = userEvent.setup();
+    useCourseStore.setState({
+      syllabus: makeSyllabus(1),
+      chapters: [makeChapter({ number: 1, title: 'Topic 1' })],
     });
+    activateTemplate();
+    useUiStore.setState({ activeTab: 'template-module' });
     renderPage();
 
-    expect(screen.getByRole('button', { name: /^canvas module$/i })).toBeInTheDocument();
+    await user.click(screen.getByRole('button', { name: /generate canvas module/i }));
+
+    await waitFor(() => expect(generateTemplateChapter).toHaveBeenCalledTimes(1));
+    await waitFor(() =>
+      expect(useCourseStore.getState().chapters[0].templateContent?.discussion.title).toBe(
+        'Talk it over',
+      ),
+    );
+    expect(await screen.findByText(/overview body/i)).toBeInTheDocument();
   });
 
   it('renders the chapter sidebar with one entry per chapter in the syllabus', () => {
     useCourseStore.setState({ syllabus: makeSyllabus(4) });
     renderPage();
 
-    // ChapterSidebar renders each chapter as "N. Title" in a single text
-    // node, so we match the full string.
-    expect(screen.getByText(/1\. topic 1/i)).toBeInTheDocument();
-    expect(screen.getByText(/4\. topic 4/i)).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /topic 1/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /topic 4/i })).toBeInTheDocument();
   });
 
-  it('shows the ResearchPanel header for a chapter with a research dossier', () => {
+  it('links to the research dossier for a chapter that has one', () => {
     useCourseStore.setState({
       syllabus: makeSyllabus(1),
       researchDossiers: [makeDossier(1)],
@@ -266,8 +303,7 @@ describe('<BuildPage />', () => {
     });
     renderPage();
 
-    // The panel is collapsed by default — only the header row is in the DOM.
-    expect(screen.getByText(/research — 1 source/i)).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /view dossier/i })).toBeInTheDocument();
   });
 
   it('renders a UI error banner from useUiStore.error', () => {
@@ -280,4 +316,75 @@ describe('<BuildPage />', () => {
 
     expect(screen.getByText(/generation failed for chapter 1/i)).toBeInTheDocument();
   });
+
+  describe('advanced-mode gating of batch generation', () => {
+    function seedResearched() {
+      useCourseStore.setState({
+        syllabus: makeSyllabus(2),
+        researchDossiers: [makeDossier(1), makeDossier(2)],
+        // Chapter 1 exists so the page's auto-draft-on-mount effect stays idle.
+        chapters: [makeChapter({ number: 1, title: 'Topic 1' })],
+      });
+    }
+
+    it('Canvas-focused mode: the batch dialog offers Canvas materials only', async () => {
+      const user = userEvent.setup();
+      seedResearched();
+      renderPage();
+
+      await user.click(screen.getByRole('button', { name: /draft remaining chapters/i }));
+
+      const dialog = await screen.findByRole('dialog');
+      expect(dialog).toHaveTextContent(/build all canvas materials/i);
+      expect(dialog).toHaveTextContent(/reading, quizzes, and discussion/i);
+      expect(dialog).not.toHaveTextContent(/audiobook/i);
+    });
+
+    it('Everything mode: the batch dialog offers the full set', async () => {
+      const user = userEvent.setup();
+      useApiStore.setState({ advancedMode: true });
+      seedResearched();
+      renderPage();
+
+      await user.click(screen.getByRole('button', { name: /draft remaining chapters/i }));
+
+      const dialog = await screen.findByRole('dialog');
+      expect(dialog).toHaveTextContent(/build everything/i);
+      expect(dialog).toHaveTextContent(/weekly challenge, discussion, activities, audiobook, slides/i);
+    });
+
+    it('sidebar counts only the visible materials (of 4) in Canvas-focused mode, of 8 in Everything mode', () => {
+      useCourseStore.setState({
+        syllabus: makeSyllabus(1),
+        chapters: [makeChapter({ number: 1, title: 'Topic 1' })],
+      });
+      const { unmount } = renderPage();
+      expect(screen.getByText(/1 of 4 drafted/i)).toBeInTheDocument();
+      unmount();
+
+      useApiStore.setState({ advancedMode: true });
+      renderPage();
+      expect(screen.getByText(/1 of 8 drafted/i)).toBeInTheDocument();
+    });
+
+    it('a chapter with all four Canvas materials reads as fully drafted without the advanced ones', () => {
+      useCourseStore.setState({
+        syllabus: makeSyllabus(1),
+        chapters: [
+          makeChapter({
+            number: 1,
+            title: 'Topic 1',
+            practiceQuizData: 'Q',
+            inClassQuizData: [{ question: 'q', correctAnswer: 'a', correctFeedback: 'f', distractors: [] }],
+            discussionData: [{ prompt: 'p', hook: 'h' }],
+          }),
+        ],
+      });
+      renderPage();
+
+      // Fully drafted → the sidebar swaps the "N of M" count for a ready marker.
+      expect(screen.queryByText(/of 8 drafted/i)).not.toBeInTheDocument();
+      expect(screen.queryByText(/\d of 4 drafted/i)).not.toBeInTheDocument();
+    });
+  });
 });
diff --git a/tests/components/ExportPage.test.tsx b/tests/components/ExportPage.test.tsx
index 7b19fbb..28cfbdb 100644
--- a/tests/components/ExportPage.test.tsx
+++ b/tests/components/ExportPage.test.tsx
@@ -1,10 +1,13 @@
 import { describe, it, expect, beforeEach, vi } from 'vitest';
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { MemoryRouter } from 'react-router-dom';
 import { ExportPage } from '../../src/pages/ExportPage';
 import { useCourseStore } from '../../src/store/courseStore';
 import { useUiStore } from '../../src/store/uiStore';
-import type { Syllabus, GeneratedChapter, CurriculumMap } from '../../src/types/course';
+import { useApiStore } from '../../src/store/apiStore';
+import { assembleImscc } from '../../src/services/export/imsccExporter';
+import type { Syllabus, GeneratedChapter } from '../../src/types/course';
 
 // Keep these heavy modules out of the test path — they're only exercised on
 // click handlers and we're testing render behavior.
@@ -12,6 +15,13 @@ vi.mock('../../src/services/claude/streaming', () => ({
   streamMessage: vi.fn(),
 }));
 
+// The cartridge build + save are exercised in their own tests; here we only
+// care how the page decides to call them.
+vi.mock('../../src/services/export/imsccExporter', () => ({
+  assembleImscc: vi.fn(async () => new Blob(['imscc'])),
+}));
+vi.mock('file-saver', () => ({ saveAs: vi.fn() }));
+
 function makeSyllabus(numChapters: number): Syllabus {
   return {
     courseTitle: 'Intro to Statistics',
@@ -35,10 +45,20 @@ function makeChapter(overrides: Partial<GeneratedChapter> & { number: number; ti
   };
 }
 
+function renderPage() {
+  return render(
+    <MemoryRouter>
+      <ExportPage />
+    </MemoryRouter>,
+  );
+}
+
 describe('<ExportPage />', () => {
   beforeEach(() => {
     useCourseStore.getState().reset();
+    vi.mocked(assembleImscc).mockClear();
     useUiStore.setState({ error: null, isGenerating: false });
+    useApiStore.setState({ claudeApiKey: 'sk-x', advancedMode: false });
     // jsdom/happy-dom don't implement URL.createObjectURL; download handlers
     // would blow up the suite if any test wires a click on them.
     if (!('createObjectURL' in URL)) {
@@ -50,47 +70,58 @@ describe('<ExportPage />', () => {
   });
 
   it('shows an empty state when no syllabus is loaded', () => {
-    render(<ExportPage />);
-    expect(screen.getByText(/no course data available/i)).toBeInTheDocument();
+    renderPage();
+    expect(screen.getByText(/no course in progress/i)).toBeInTheDocument();
   });
 
   it('renders the course title in the header once a syllabus is loaded', () => {
     useCourseStore.setState({ syllabus: makeSyllabus(3) });
-    render(<ExportPage />);
+    renderPage();
 
-    expect(screen.getByRole('heading', { name: /export course/i })).toBeInTheDocument();
-    expect(screen.getByText('Intro to Statistics')).toBeInTheDocument();
+    expect(screen.getByRole('heading', { name: 'Intro to Statistics' })).toBeInTheDocument();
+    expect(screen.getByText(/0 of 3 chapters drafted/i)).toBeInTheDocument();
   });
 
-  it('shows the three header actions: Publish, Download All, Export for Canvas', () => {
+  it('shows the header actions: Publish, Export for Canvas, Download, Project file', () => {
     useCourseStore.setState({ syllabus: makeSyllabus(3) });
-    render(<ExportPage />);
+    renderPage();
 
-    expect(screen.getByRole('button', { name: /publish course/i })).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: /download.*classes.*zip/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /publish/i })).toBeInTheDocument();
     expect(screen.getByRole('button', { name: /export for canvas/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /download .*zip/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /project file/i })).toBeInTheDocument();
   });
 
-  it('disables Publish / Download All / Export when no chapters are generated', () => {
+  it('disables Publish / Export for Canvas / Download when no chapters are generated', () => {
     useCourseStore.setState({ syllabus: makeSyllabus(3), chapters: [] });
-    render(<ExportPage />);
+    renderPage();
 
-    expect(screen.getByRole('button', { name: /publish course/i })).toBeDisabled();
-    expect(screen.getByRole('button', { name: /download.*classes.*zip/i })).toBeDisabled();
+    expect(screen.getByRole('button', { name: /publish/i })).toBeDisabled();
     expect(screen.getByRole('button', { name: /export for canvas/i })).toBeDisabled();
+    expect(screen.getByRole('button', { name: /download .*zip/i })).toBeDisabled();
+  });
+
+  it('enables Export for Canvas once at least one chapter exists', () => {
+    useCourseStore.setState({
+      syllabus: makeSyllabus(3),
+      chapters: [makeChapter({ number: 1, title: 'Chapter 1' })],
+    });
+    renderPage();
+
+    expect(screen.getByRole('button', { name: /export for canvas/i })).toBeEnabled();
   });
 
-  it('shows "Download N of M Classes" while not all chapters are ready', () => {
+  it('shows "Download N of M" while not all chapters are ready', () => {
     useCourseStore.setState({
       syllabus: makeSyllabus(5),
       chapters: [makeChapter({ number: 1, title: 'Chapter 1' }), makeChapter({ number: 2, title: 'Chapter 2' })],
     });
-    render(<ExportPage />);
+    renderPage();
 
-    expect(screen.getByRole('button', { name: /download 2 of 5 classes/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /download 2 of 5/i })).toBeInTheDocument();
   });
 
-  it('shows "Download All (ZIP)" once every chapter is generated', () => {
+  it('shows "Download all" once every chapter is generated', () => {
     useCourseStore.setState({
       syllabus: makeSyllabus(2),
       chapters: [
@@ -98,39 +129,39 @@ describe('<ExportPage />', () => {
         makeChapter({ number: 2, title: 'Chapter 2' }),
       ],
     });
-    render(<ExportPage />);
+    renderPage();
 
-    expect(screen.getByRole('button', { name: /download all \(zip\)/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /download all/i })).toBeInTheDocument();
   });
 
   it('renders a UI error banner when ui.error is set', () => {
     useCourseStore.setState({ syllabus: makeSyllabus(2) });
     useUiStore.setState({ error: 'Boom — something went wrong.' });
-    render(<ExportPage />);
+    renderPage();
 
     expect(screen.getByText('Boom — something went wrong.')).toBeInTheDocument();
   });
 
-  it('shows a "Generate Class" button for chapters that have not been generated yet', () => {
+  it('shows a "Draft class" button for chapters that have not been generated yet', () => {
     useCourseStore.setState({
       syllabus: makeSyllabus(3),
       chapters: [makeChapter({ number: 1, title: 'Chapter 1' })],
     });
-    render(<ExportPage />);
+    renderPage();
 
-    // Chapters 2 and 3 are not generated → 2 Generate Class buttons.
-    expect(screen.getAllByRole('button', { name: /generate class/i })).toHaveLength(2);
+    // Chapters 2 and 3 are not generated → 2 Draft class buttons.
+    expect(screen.getAllByRole('button', { name: /draft class/i })).toHaveLength(2);
   });
 
-  it('disables the Generate Class buttons while ui.isGenerating is true', () => {
+  it('disables the Draft class buttons while ui.isGenerating is true', () => {
     useCourseStore.setState({
       syllabus: makeSyllabus(2),
       chapters: [],
     });
     useUiStore.setState({ isGenerating: true });
-    render(<ExportPage />);
+    renderPage();
 
-    for (const btn of screen.getAllByRole('button', { name: /generate class/i })) {
+    for (const btn of screen.getAllByRole('button', { name: /draft class/i })) {
       expect(btn).toBeDisabled();
     }
   });
@@ -140,9 +171,9 @@ describe('<ExportPage />', () => {
       syllabus: makeSyllabus(1),
       chapters: [makeChapter({ number: 1, title: 'Chapter 1' })],
     });
-    render(<ExportPage />);
+    renderPage();
 
-    expect(screen.getByRole('button', { name: /reading \(\.html\)/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /^reading/i })).toBeInTheDocument();
     expect(screen.queryByRole('button', { name: /practice quiz/i })).not.toBeInTheDocument();
     expect(screen.queryByRole('button', { name: /slides/i })).not.toBeInTheDocument();
     expect(screen.queryByRole('button', { name: /audiobook/i })).not.toBeInTheDocument();
@@ -159,9 +190,9 @@ describe('<ExportPage />', () => {
         }),
       ],
     });
-    render(<ExportPage />);
+    renderPage();
 
-    expect(screen.getByRole('button', { name: /^practice quiz$/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /^practice quiz/i })).toBeInTheDocument();
   });
 
   it('shows both Weekly Challenge HTML and SCORM rows when challenge data is present', () => {
@@ -175,13 +206,13 @@ describe('<ExportPage />', () => {
         }),
       ],
     });
-    render(<ExportPage />);
+    renderPage();
 
-    expect(screen.getByRole('button', { name: /weekly challenge \(\.html\)/i })).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: /weekly challenge scorm/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /^weekly challenge/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /challenge scorm/i })).toBeInTheDocument();
   });
 
-  it('shows Teaching Resources row when discussions OR activities are present', () => {
+  it('shows the Teaching row when discussions OR activities are present', () => {
     useCourseStore.setState({
       syllabus: makeSyllabus(1),
       chapters: [
@@ -192,12 +223,12 @@ describe('<ExportPage />', () => {
         }),
       ],
     });
-    render(<ExportPage />);
+    renderPage();
 
-    expect(screen.getByRole('button', { name: /teaching resources/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /^teaching/i })).toBeInTheDocument();
   });
 
-  it('marks a chapter "Ready" when it has all 8 artifact types', () => {
+  it('marks a chapter ready when every artifact type is present', () => {
     useCourseStore.setState({
       syllabus: makeSyllabus(1),
       chapters: [
@@ -212,35 +243,19 @@ describe('<ExportPage />', () => {
           slidesJson: [{ title: 't', body: 'b' }] as unknown as GeneratedChapter['slidesJson'],
           audioUrl: 'blob:audio',
           discussionData: [{ prompt: 'p', hook: 'h' }],
-          infographicDataUri: 'data:image/jpeg;base64,xxx',
         }),
       ],
     });
-    render(<ExportPage />);
+    renderPage();
 
-    expect(screen.getByText(/^ready$/i)).toBeInTheDocument();
-    expect(screen.getByText(/all files ready/i)).toBeInTheDocument();
+    expect(screen.getByText(/all artifacts ready/i)).toBeInTheDocument();
   });
 
-  it('shows the Curriculum Alignment Matrix card only when curriculumMap is set', () => {
+  it('offers learning-outcomes generation, which replaces the old alignment-matrix card', () => {
     useCourseStore.setState({ syllabus: makeSyllabus(2) });
-    const { rerender } = render(<ExportPage />);
-    expect(screen.queryByText(/curriculum alignment matrix/i)).not.toBeInTheDocument();
+    renderPage();
 
-    useCourseStore.setState({
-      curriculumMap: {
-        objectives: [
-          { id: 'o1', text: 'Define mean', bloomLevel: 'Remember' },
-          { id: 'o2', text: 'Compute variance', bloomLevel: 'Apply' },
-        ],
-        chapterMap: {},
-      } as unknown as CurriculumMap,
-    });
-    rerender(<ExportPage />);
-
-    expect(screen.getByText(/curriculum alignment matrix/i)).toBeInTheDocument();
-    expect(screen.getByText(/2 learning objectives/i)).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: /download csv/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /generate learning outcomes/i })).toBeInTheDocument();
   });
 
   it('lets a user click the Reading row without crashing (smoke check on the download handler)', async () => {
@@ -249,9 +264,106 @@ describe('<ExportPage />', () => {
       syllabus: makeSyllabus(1),
       chapters: [makeChapter({ number: 1, title: 'Chapter 1' })],
     });
-    render(<ExportPage />);
+    renderPage();
 
-    await user.click(screen.getByRole('button', { name: /reading \(\.html\)/i }));
+    await user.click(screen.getByRole('button', { name: /^reading/i }));
     // No assertion needed — we're verifying the click doesn't throw.
   });
+
+  describe('Export for Canvas — slide decks', () => {
+    const unrendered = [
+      { title: 'A', speakerNotes: '', bullets: [], imagePrompt: 'a' },
+      { title: 'B', speakerNotes: '', bullets: [], imagePrompt: 'b' },
+    ] as unknown as GeneratedChapter['slidesJson'];
+
+    function seed(slidesJson?: GeneratedChapter['slidesJson']) {
+      useCourseStore.setState({
+        syllabus: makeSyllabus(1),
+        chapters: [makeChapter({ number: 1, title: 'Chapter 1', slidesJson })],
+      });
+    }
+
+    it('exports straight away when there are no unrendered decks', async () => {
+      const user = userEvent.setup();
+      seed(undefined);
+      renderPage();
+
+      await user.click(screen.getByRole('button', { name: /export for canvas/i }));
+
+      expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+      await waitFor(() => expect(assembleImscc).toHaveBeenCalledTimes(1));
+      expect(vi.mocked(assembleImscc).mock.calls[0][2]).toMatchObject({ renderMissingSlides: false });
+    });
+
+    it('asks before rendering when decks have unrendered images and a key is set', async () => {
+      const user = userEvent.setup();
+      useApiStore.setState({ openaiApiKey: 'sk-openai' });
+      seed(unrendered);
+      renderPage();
+
+      await user.click(screen.getByRole('button', { name: /export for canvas/i }));
+
+      const dialog = await screen.findByRole('dialog');
+      expect(dialog).toHaveTextContent(/2 images/i);
+      expect(assembleImscc).not.toHaveBeenCalled();
+      expect(within(dialog).getByRole('button', { name: /render & include decks/i })).toBeInTheDocument();
+    });
+
+    it('"Export without decks" exports without opting in to rendering', async () => {
+      const user = userEvent.setup();
+      useApiStore.setState({ openaiApiKey: 'sk-openai' });
+      seed(unrendered);
+      renderPage();
+
+      await user.click(screen.getByRole('button', { name: /export for canvas/i }));
+      const dialog = await screen.findByRole('dialog');
+      await user.click(within(dialog).getByRole('button', { name: /export without decks/i }));
+
+      await waitFor(() => expect(assembleImscc).toHaveBeenCalledTimes(1));
+      expect(vi.mocked(assembleImscc).mock.calls[0][2]).toMatchObject({ renderMissingSlides: false });
+    });
+
+    it('"Render & include decks" opts in and passes the OpenAI key', async () => {
+      const user = userEvent.setup();
+      useApiStore.setState({ openaiApiKey: 'sk-openai' });
+      seed(unrendered);
+      renderPage();
+
+      await user.click(screen.getByRole('button', { name: /export for canvas/i }));
+      const dialog = await screen.findByRole('dialog');
+      await user.click(within(dialog).getByRole('button', { name: /render & include decks/i }));
+
+      await waitFor(() => expect(assembleImscc).toHaveBeenCalledTimes(1));
+      expect(vi.mocked(assembleImscc).mock.calls[0][2]).toMatchObject({
+        renderMissingSlides: true,
+        openaiApiKey: 'sk-openai',
+      });
+    });
+
+    it('without an OpenAI key the dialog only offers to export without decks', async () => {
+      const user = userEvent.setup();
+      useApiStore.setState({ openaiApiKey: '' });
+      seed(unrendered);
+      renderPage();
+
+      await user.click(screen.getByRole('button', { name: /export for canvas/i }));
+      const dialog = await screen.findByRole('dialog');
+
+      expect(within(dialog).queryByRole('button', { name: /render & include decks/i })).not.toBeInTheDocument();
+      expect(within(dialog).getByRole('button', { name: /export without decks/i })).toBeInTheDocument();
+    });
+
+    it('cancelling the dialog exports nothing', async () => {
+      const user = userEvent.setup();
+      useApiStore.setState({ openaiApiKey: 'sk-openai' });
+      seed(unrendered);
+      renderPage();
+
+      await user.click(screen.getByRole('button', { name: /export for canvas/i }));
+      const dialog = await screen.findByRole('dialog');
+      await user.click(within(dialog).getByRole('button', { name: /cancel/i }));
+
+      expect(assembleImscc).not.toHaveBeenCalled();
+    });
+  });
 });
diff --git a/tests/components/ResearchPage.test.tsx b/tests/components/ResearchPage.test.tsx
index 55caa31..ac293bd 100644
--- a/tests/components/ResearchPage.test.tsx
+++ b/tests/components/ResearchPage.test.tsx
@@ -3,6 +3,7 @@ import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { MemoryRouter } from 'react-router-dom';
 import { ResearchPage } from '../../src/pages/ResearchPage';
+import { runResearch } from '../../src/services/research';
 import { useCourseStore } from '../../src/store/courseStore';
 import { useApiStore } from '../../src/store/apiStore';
 import { useUiStore } from '../../src/store/uiStore';
@@ -58,6 +59,7 @@ function renderPage() {
 describe('<ResearchPage />', () => {
   beforeEach(() => {
     navigateMock.mockClear();
+    vi.mocked(runResearch).mockClear();
     useCourseStore.getState().reset();
     useUiStore.setState({ error: null, isGenerating: false });
     // Default test state: anthropic backend, no claude key → backend-not-ready
@@ -116,25 +118,42 @@ describe('<ResearchPage />', () => {
     expect(useCourseStore.getState().currentStage).toBe('build');
   });
 
-  it('renders the dossier header + chapter tabs + first chapter detail when the backend is ready', () => {
+  it('renders the dossier header + a sidebar entry per chapter when the backend is ready', () => {
     useCourseStore.setState({ syllabus: makeSyllabus(3) });
     useApiStore.setState({ claudeApiKey: 'sk-x' });
     renderPage();
 
-    expect(screen.getByRole('heading', { name: /research dossiers/i })).toBeInTheDocument();
-    expect(screen.getByText(/0 of 3 classes researched/i)).toBeInTheDocument();
-    // First chapter's detail card.
-    expect(screen.getByRole('heading', { name: /class 1: topic 1/i })).toBeInTheDocument();
-    // Chapter tabs — one per chapter.
-    expect(screen.getByRole('button', { name: /^class 1$/i })).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: /^class 3$/i })).toBeInTheDocument();
+    expect(
+      screen.getByRole('heading', { name: /what does classbuild know about this material/i }),
+    ).toBeInTheDocument();
+    expect(screen.getByText(/0 of 3 chapters complete/i)).toBeInTheDocument();
+    // Dossier sidebar — one entry per chapter.
+    expect(screen.getByRole('button', { name: /topic 1/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /topic 2/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /topic 3/i })).toBeInTheDocument();
   });
 
-  it('hides the Skip Research button once at least one dossier exists', () => {
-    // The auto-start effect fires research on mount whenever the backend is
-    // ready and dossiers are empty, so the "no research started" state isn't
-    // stable in a ready-backend test. We test the post-research state: once
-    // a dossier exists, Skip Research is gone.
+  it('auto-starts research for the first chapter when the backend is ready', () => {
+    useCourseStore.setState({ syllabus: makeSyllabus(2) });
+    useApiStore.setState({ claudeApiKey: 'sk-x' });
+    renderPage();
+
+    expect(runResearch).toHaveBeenCalledTimes(1);
+    expect(runResearch).toHaveBeenCalledWith(
+      'anthropic',
+      expect.objectContaining({ chapterNumber: 1, chapterTitle: 'Topic 1' }),
+      expect.any(Function),
+    );
+  });
+
+  it('does not auto-start research while the backend is not configured', () => {
+    useCourseStore.setState({ syllabus: makeSyllabus(2) });
+    renderPage();
+
+    expect(runResearch).not.toHaveBeenCalled();
+  });
+
+  it('shows Skip research only until a dossier exists', () => {
     useCourseStore.setState({
       syllabus: makeSyllabus(2),
       researchDossiers: [makeDossier(1)],
@@ -142,11 +161,10 @@ describe('<ResearchPage />', () => {
     useApiStore.setState({ claudeApiKey: 'sk-x' });
     renderPage();
 
-    const skipButtons = screen.queryAllByRole('button', { name: /^skip research$/i });
-    expect(skipButtons).toHaveLength(0);
+    expect(screen.queryAllByRole('button', { name: /^skip research$/i })).toHaveLength(0);
   });
 
-  it('shows a completed dossier with source title and Verified badge', () => {
+  it('shows a completed dossier with its source and synthesis', () => {
     useCourseStore.setState({
       syllabus: makeSyllabus(2),
       researchDossiers: [makeDossier(1)],
@@ -154,13 +172,13 @@ describe('<ResearchPage />', () => {
     useApiStore.setState({ claudeApiKey: 'sk-x' });
     renderPage();
 
-    expect(screen.getByText('Smith 2020')).toBeInTheDocument();
-    expect(screen.getByText(/^verified$/i)).toBeInTheDocument();
-    expect(screen.getByRole('heading', { name: /synthesis/i })).toBeInTheDocument();
+    expect(screen.getByText(/smith 2020/i)).toBeInTheDocument();
     expect(screen.getByText(/synthesis notes for chapter/i)).toBeInTheDocument();
+    // Verified sources carry no warning tag.
+    expect(screen.queryByText(/^unverified$/i)).not.toBeInTheDocument();
   });
 
-  it('shows a "Verify" badge (not "Verified") for AI-generated sources', () => {
+  it('flags AI-generated sources as unverified', () => {
     useCourseStore.setState({
       syllabus: makeSyllabus(1),
       researchDossiers: [
@@ -174,28 +192,34 @@ describe('<ResearchPage />', () => {
     useApiStore.setState({ claudeApiKey: 'sk-x' });
     renderPage();
 
-    expect(screen.getByText(/^verify$/i)).toBeInTheDocument();
+    expect(screen.getByText(/^unverified$/i)).toBeInTheDocument();
+    expect(screen.getByText(/drafted from the model's knowledge/i)).toBeInTheDocument();
   });
 
-  it('disables "Previous Class" on the first chapter and "Research Next Class" on the last', async () => {
+  it('selecting an unresearched chapter in the sidebar starts research for it', async () => {
     const user = userEvent.setup();
-    useCourseStore.setState({ syllabus: makeSyllabus(2) });
+    // A dossier already exists, so nothing auto-starts on mount.
+    useCourseStore.setState({
+      syllabus: makeSyllabus(3),
+      researchDossiers: [makeDossier(1)],
+    });
     useApiStore.setState({ claudeApiKey: 'sk-x' });
     renderPage();
+    expect(runResearch).not.toHaveBeenCalled();
 
-    expect(screen.getByRole('button', { name: /previous class/i })).toBeDisabled();
-    expect(screen.getByRole('button', { name: /research next class/i })).toBeEnabled();
+    await user.click(screen.getByRole('button', { name: /topic 2/i }));
 
-    await user.click(screen.getByRole('button', { name: /research next class/i }));
-    expect(screen.getByRole('button', { name: /previous class/i })).toBeEnabled();
-    expect(screen.getByRole('button', { name: /research next class/i })).toBeDisabled();
+    expect(runResearch).toHaveBeenCalledWith(
+      'anthropic',
+      expect.objectContaining({ chapterNumber: 2 }),
+      expect.any(Function),
+    );
   });
 
-  it('shows the empty-state Start Research button for a chapter that has no dossier yet', () => {
+  it('shows the empty-state Start research button for a chapter that has no dossier yet', () => {
     // 3 chapters, dossier already exists for chapter 2 → the auto-start
     // effect skips (researchDossiers.length !== 0). The page lands on
-    // chapter 1, which has no dossier and isn't being researched → empty
-    // state is visible.
+    // chapter 1, which has no dossier and isn't being researched.
     useCourseStore.setState({
       syllabus: makeSyllabus(3),
       researchDossiers: [makeDossier(2)],
@@ -203,11 +227,11 @@ describe('<ResearchPage />', () => {
     useApiStore.setState({ claudeApiKey: 'sk-x' });
     renderPage();
 
-    expect(screen.getByText(/no research yet for this class/i)).toBeInTheDocument();
+    expect(screen.getByText(/no research yet for this chapter/i)).toBeInTheDocument();
     expect(screen.getByRole('button', { name: /start research/i })).toBeInTheDocument();
   });
 
-  it('Continue to Build advances to build stage and navigates', async () => {
+  it('Begin build advances to the build stage and navigates', async () => {
     const user = userEvent.setup();
     useCourseStore.setState({
       syllabus: makeSyllabus(2),
@@ -216,14 +240,14 @@ describe('<ResearchPage />', () => {
     useApiStore.setState({ claudeApiKey: 'sk-x' });
     renderPage();
 
-    await user.click(screen.getByRole('button', { name: /continue to build/i }));
+    await user.click(screen.getByRole('button', { name: /begin build/i }));
 
     expect(navigateMock).toHaveBeenCalledWith('/build');
     expect(useCourseStore.getState().completedStages).toContain('research');
     expect(useCourseStore.getState().currentStage).toBe('build');
   });
 
-  it('shows the "Research all remaining" link when more than one chapter is still unresearched', () => {
+  it('shows the "Research all remaining" button when more than one chapter is still unresearched', () => {
     useCourseStore.setState({ syllabus: makeSyllabus(4) });
     useApiStore.setState({ claudeApiKey: 'sk-x' });
     renderPage();
diff --git a/tests/components/SetupPage.test.tsx b/tests/components/SetupPage.test.tsx
new file mode 100644
index 0000000..1916ea1
--- /dev/null
+++ b/tests/components/SetupPage.test.tsx
@@ -0,0 +1,174 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { render, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { MemoryRouter } from 'react-router-dom';
+import { SetupPage } from '../../src/pages/SetupPage';
+import { useCourseStore } from '../../src/store/courseStore';
+import { useApiStore } from '../../src/store/apiStore';
+import { useUiStore } from '../../src/store/uiStore';
+
+const navigateMock = vi.fn();
+vi.mock('react-router-dom', async () => {
+  const actual = await vi.importActual<typeof import('react-router-dom')>('react-router-dom');
+  return { ...actual, useNavigate: () => navigateMock };
+});
+
+function renderPage() {
+  return render(
+    <MemoryRouter>
+      <SetupPage />
+    </MemoryRouter>,
+  );
+}
+
+const TOPIC = 'Cognitive Load Theory and how working memory shapes good teaching.';
+
+describe('<SetupPage /> provider / key gating', () => {
+  beforeEach(() => {
+    navigateMock.mockClear();
+    useCourseStore.getState().reset();
+    useUiStore.setState({ openKeysOnNextSetupVisit: false });
+    useApiStore.setState({
+      provider: 'anthropic',
+      researchBackend: 'anthropic',
+      advancedMode: false,
+      claudeApiKey: '',
+      ollamaApiKey: '',
+      tavilyApiKey: '',
+      claudeKeyValid: null,
+      ollamaKeyValid: null,
+    });
+  });
+
+  it('asks for a topic and an Anthropic key, and disables Begin, when both are missing', () => {
+    renderPage();
+
+    expect(screen.getByText(/add a course topic and your anthropic key/i)).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /begin · syllabus/i })).toBeDisabled();
+  });
+
+  it('enables Begin once there is a topic and a Claude key (Claude provider)', () => {
+    useCourseStore.getState().updateSetup({ topic: TOPIC });
+    useApiStore.setState({ claudeApiKey: 'sk-ant-x' });
+    renderPage();
+
+    expect(screen.getByRole('button', { name: /begin · syllabus/i })).toBeEnabled();
+  });
+
+  it('gates Begin on the Ollama key when Ollama is the active provider', () => {
+    useCourseStore.getState().updateSetup({ topic: TOPIC });
+    // A Claude key alone is not enough on the Ollama provider.
+    useApiStore.setState({ provider: 'ollama', claudeApiKey: 'sk-ant-x', ollamaApiKey: '' });
+    const { unmount } = renderPage();
+
+    expect(screen.getByText(/add your ollama key/i)).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /begin · syllabus/i })).toBeDisabled();
+    unmount();
+
+    useApiStore.setState({ ollamaApiKey: 'ollama-key' });
+    renderPage();
+    expect(screen.getByRole('button', { name: /begin · syllabus/i })).toBeEnabled();
+  });
+
+  it('clicking Begin completes setup and navigates to the syllabus', async () => {
+    const user = userEvent.setup();
+    useCourseStore.getState().updateSetup({ topic: TOPIC });
+    useApiStore.setState({ claudeApiKey: 'sk-ant-x' });
+    renderPage();
+
+    await user.click(screen.getByRole('button', { name: /begin · syllabus/i }));
+
+    expect(navigateMock).toHaveBeenCalledWith('/syllabus');
+    expect(useCourseStore.getState().completedStages).toContain('setup');
+  });
+
+  it('shows the optional Canvas template + outline section', () => {
+    renderPage();
+    expect(screen.getByText(/canvas template · optional/i)).toBeInTheDocument();
+  });
+});
+
+describe('<SetupPage /> API keys modal', () => {
+  beforeEach(() => {
+    // Opening the modal auto-validates any stored key — keep that off the network.
+    vi.stubGlobal('fetch', vi.fn(async () => ({ ok: false })));
+    useCourseStore.getState().reset();
+    useUiStore.setState({ openKeysOnNextSetupVisit: false });
+    useApiStore.setState({
+      provider: 'anthropic',
+      researchBackend: 'anthropic',
+      advancedMode: false,
+      claudeApiKey: '',
+      ollamaApiKey: '',
+      tavilyApiKey: '',
+      ollamaModel: 'gpt-oss:120b-cloud',
+    });
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
+  async function openModal() {
+    const user = userEvent.setup();
+    renderPage();
+    await user.click(screen.getByRole('button', { name: /set keys/i }));
+    const dialog = await screen.findByRole('dialog');
+    return { user, dialog };
+  }
+
+  it('switches the course-content provider to Ollama Cloud', async () => {
+    const { user, dialog } = await openModal();
+
+    await user.click(within(dialog).getByRole('button', { name: /ollama cloud/i }));
+
+    expect(useApiStore.getState().provider).toBe('ollama');
+  });
+
+  it('switches the research backend between Claude, Tavily and Wikipedia', async () => {
+    const { user, dialog } = await openModal();
+
+    await user.click(within(dialog).getByRole('button', { name: /^tavily/i }));
+    expect(useApiStore.getState().researchBackend).toBe('tavily');
+
+    await user.click(within(dialog).getByRole('button', { name: /^wikipedia/i }));
+    expect(useApiStore.getState().researchBackend).toBe('wikipedia');
+
+    await user.click(within(dialog).getByRole('button', { name: /^claude search/i }));
+    expect(useApiStore.getState().researchBackend).toBe('anthropic');
+  });
+
+  it('toggles advanced build outputs', async () => {
+    const { user, dialog } = await openModal();
+    expect(useApiStore.getState().advancedMode).toBe(false);
+
+    await user.click(within(dialog).getByRole('button', { name: /^everything/i }));
+    expect(useApiStore.getState().advancedMode).toBe(true);
+
+    await user.click(within(dialog).getByRole('button', { name: /^canvas-focused/i }));
+    expect(useApiStore.getState().advancedMode).toBe(false);
+  });
+
+  it('shows the Ollama model field only on the Ollama provider once a key is entered', async () => {
+    useApiStore.setState({ provider: 'ollama', ollamaApiKey: 'ollama-key' });
+    const user = userEvent.setup();
+    renderPage();
+    await user.click(screen.getByRole('button', { name: /manage keys/i }));
+    const dialog = await screen.findByRole('dialog');
+
+    const model = within(dialog).getByLabelText(/ollama model/i);
+    await user.clear(model);
+    await user.type(model, 'qwen3-coder:480b-cloud');
+
+    expect(useApiStore.getState().ollamaModel).toBe('qwen3-coder:480b-cloud');
+  });
+
+  it('keeps focus in a key field while typing (modal must not steal focus on re-render)', async () => {
+    const { user, dialog } = await openModal();
+
+    const claude = within(dialog).getByLabelText(/anthropic/i);
+    await user.type(claude, 'sk-ant-abc');
+
+    expect(useApiStore.getState().claudeApiKey).toBe('sk-ant-abc');
+  });
+});
diff --git a/tests/components/SyllabusPage.test.tsx b/tests/components/SyllabusPage.test.tsx
index b64613a..c13bb3b 100644
--- a/tests/components/SyllabusPage.test.tsx
+++ b/tests/components/SyllabusPage.test.tsx
@@ -60,9 +60,9 @@ describe('<SyllabusPage />', () => {
     useApiStore.setState({ claudeApiKey: '' });
   });
 
-  it('shows the "Generating Syllabus..." placeholder when no syllabus and no thinking yet', () => {
+  it('shows the drafting placeholder when no syllabus has arrived yet', () => {
     renderPage();
-    expect(screen.getByRole('heading', { name: /generating syllabus/i })).toBeInTheDocument();
+    expect(screen.getByRole('heading', { name: /drafting your syllabus/i })).toBeInTheDocument();
   });
 
   it('renders the course title and overview once a syllabus is loaded', () => {
@@ -81,54 +81,63 @@ describe('<SyllabusPage />', () => {
     expect(screen.getByText('Chapter 4')).toBeInTheDocument();
   });
 
-  it('disables "Continue to Research" when no syllabus is loaded yet', () => {
+  it('disables "Begin research" when no syllabus is loaded yet', () => {
     renderPage();
-    expect(screen.getByRole('button', { name: /continue to research/i })).toBeDisabled();
+    expect(screen.getByRole('button', { name: /begin research/i })).toBeDisabled();
   });
 
-  it('enables "Continue to Research" once the syllabus is in the store', () => {
+  it('enables "Begin research" once the syllabus is in the store', () => {
     useCourseStore.setState({ syllabus: makeSyllabus(2) });
     renderPage();
-    expect(screen.getByRole('button', { name: /continue to research/i })).toBeEnabled();
+    expect(screen.getByRole('button', { name: /begin research/i })).toBeEnabled();
   });
 
-  it('navigates to /research and advances the stage when "Continue to Research" is clicked', async () => {
+  it('navigates to /research and advances the stage when "Begin research" is clicked', async () => {
     const user = userEvent.setup();
     useCourseStore.setState({ syllabus: makeSyllabus(2) });
     renderPage();
 
-    await user.click(screen.getByRole('button', { name: /continue to research/i }));
+    await user.click(screen.getByRole('button', { name: /begin research/i }));
 
     expect(navigateMock).toHaveBeenCalledWith('/research');
     expect(useCourseStore.getState().completedStages).toContain('syllabus');
     expect(useCourseStore.getState().currentStage).toBe('research');
   });
 
-  it('disables "Show the Science" and "Curriculum Map" when there are no chapters yet', () => {
+  it('"Edit brief" goes back to the setup page', async () => {
+    const user = userEvent.setup();
+    useCourseStore.setState({ syllabus: makeSyllabus(2) });
     renderPage();
-    expect(screen.getByRole('button', { name: /show the science/i })).toBeDisabled();
-    expect(screen.getByRole('button', { name: /curriculum map/i })).toBeDisabled();
+
+    await user.click(screen.getByRole('button', { name: /edit brief/i }));
+
+    expect(navigateMock).toHaveBeenCalledWith('/setup');
   });
 
-  it('enables "Show the Science" once a syllabus is loaded', () => {
+  it('offers inline editing on drafted chapters', () => {
     useCourseStore.setState({ syllabus: makeSyllabus(2) });
     renderPage();
-    expect(screen.getByRole('button', { name: /show the science/i })).toBeEnabled();
+
+    expect(screen.getAllByRole('button', { name: /edit/i }).length).toBeGreaterThanOrEqual(2);
   });
 
-  it('shows a "Read more" affordance for overviews longer than 3 sentences and expands on click', async () => {
-    const user = userEvent.setup();
+  it('renders the full course overview', () => {
     useCourseStore.setState({ syllabus: makeSyllabus(2, 5) });
     renderPage();
 
-    // Initially clipped to 3 sentences.
-    expect(screen.queryByText(/sentence 5\./i)).not.toBeInTheDocument();
-    const readMore = screen.getByRole('button', { name: /read more/i });
-    await user.click(readMore);
-
-    // 5th sentence is now in the DOM, Read more flipped to Show less.
+    expect(screen.getByText(/sentence 1\./i)).toBeInTheDocument();
     expect(screen.getByText(/sentence 5\./i)).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: /show less/i })).toBeInTheDocument();
+  });
+
+  it('shows the Canvas template title editor only when a template is active', () => {
+    useCourseStore.setState({ syllabus: makeSyllabus(2) });
+    const { unmount } = renderPage();
+    expect(screen.queryByText(/template chapter titles/i)).not.toBeInTheDocument();
+    unmount();
+
+    useCourseStore.getState().updateSetup({ templateId: 'tpl-1' });
+    renderPage();
+    expect(screen.getByText(/template chapter titles/i)).toBeInTheDocument();
   });
 
   it('renders an error banner with a "Try again" link when ui.error is set', () => {
@@ -138,13 +147,4 @@ describe('<SyllabusPage />', () => {
     expect(screen.getByText(/model returned malformed json/i)).toBeInTheDocument();
     expect(screen.getByRole('button', { name: /try again/i })).toBeInTheDocument();
   });
-
-  it('shows the inline feedback prompt once the syllabus has been generated', () => {
-    useCourseStore.setState({ syllabus: makeSyllabus(2) });
-    renderPage();
-
-    // InlineFeedback's entry point — clicking it would expand the refinement
-    // textarea. Presence here confirms the refinement UI mounted.
-    expect(screen.getByRole('button', { name: /refine this syllabus/i })).toBeInTheDocument();
-  });
 });
diff --git a/tests/gemini-tts.test.ts b/tests/gemini-tts.test.ts
deleted file mode 100644
index 4d286dc..0000000
--- a/tests/gemini-tts.test.ts
+++ /dev/null
@@ -1,394 +0,0 @@
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
-import {
-  generatePcmAudio,
-  generateAudiobook,
-  GeminiTtsError,
-} from '../src/services/gemini/tts';
-
-// Gemini TTS returns 24 kHz / 16-bit / mono PCM. Test fixtures need to be
-// realistic-ish so the crossfade math has room to operate (it needs at least
-// fadeBytes = floor(80/1000 * 24000) * 2 = 3840 bytes per side).
-const FADE_BYTES = Math.floor((80 / 1000) * 24000) * 2; // 3840
-
-interface FetchCallRecord {
-  url: string;
-  body: Record<string, unknown> | undefined;
-}
-
-/**
- * Install a fetch mock that returns the next queued response per call.
- * Each entry can be a `Response`, a thrown error (use { error }), or a
- * convenience JSON payload with status.
- */
-function installFetchQueue(
-  entries: Array<
-    | { status: number; body: unknown }
-    | { status: number; text: string }
-    | { throw: Error }
-  >,
-): { calls: FetchCallRecord[]; restore: () => void } {
-  const calls: FetchCallRecord[] = [];
-  const original = globalThis.fetch;
-  let i = 0;
-  globalThis.fetch = (async (input: string | URL | Request, init?: RequestInit) => {
-    const url = typeof input === 'string' ? input : input instanceof URL ? input.toString() : input.url;
-    const body = init?.body ? JSON.parse(init.body as string) : undefined;
-    calls.push({ url, body });
-    const entry = entries[i++];
-    if (!entry) throw new Error(`fetch called more than expected — ${i} of ${entries.length}`);
-    if ('throw' in entry) throw entry.throw;
-    if ('text' in entry) {
-      return new Response(entry.text, { status: entry.status });
-    }
-    return new Response(JSON.stringify(entry.body), {
-      status: entry.status,
-      headers: { 'Content-Type': 'application/json' },
-    });
-  }) as typeof globalThis.fetch;
-  return { calls, restore: () => { globalThis.fetch = original; } };
-}
-
-/** Make a fake Gemini response whose inline audio is `pcm` base64-encoded. */
-function ttsResponse(pcm: Uint8Array): { status: number; body: unknown } {
-  // btoa in happy-dom handles binary strings.
-  let bin = '';
-  for (let i = 0; i < pcm.length; i++) bin += String.fromCharCode(pcm[i]);
-  const b64 = (globalThis as { btoa?: (s: string) => string }).btoa
-    ? (globalThis as { btoa: (s: string) => string }).btoa(bin)
-    : Buffer.from(pcm).toString('base64');
-  return {
-    status: 200,
-    body: {
-      candidates: [
-        { content: { parts: [{ inlineData: { data: b64, mimeType: 'audio/L16;rate=24000' } }] } },
-      ],
-    },
-  };
-}
-
-/** Build a deterministic PCM buffer of size `bytes` (must be even). */
-function makePcm(bytes: number, fill = 0x42): Uint8Array {
-  const out = new Uint8Array(bytes);
-  out.fill(fill);
-  return out;
-}
-
-describe('generatePcmAudio — input validation', () => {
-  it('throws GeminiTtsError on empty text', async () => {
-    await expect(generatePcmAudio('   ', 'k')).rejects.toBeInstanceOf(GeminiTtsError);
-    await expect(generatePcmAudio('   ', 'k')).rejects.toThrow(/empty text/i);
-  });
-
-  it('throws GeminiTtsError on empty apiKey', async () => {
-    await expect(generatePcmAudio('hi', '   ')).rejects.toBeInstanceOf(GeminiTtsError);
-    await expect(generatePcmAudio('hi', '   ')).rejects.toThrow(/api key is required/i);
-  });
-});
-
-describe('generatePcmAudio — happy path', () => {
-  let restoreFetch: (() => void) | null = null;
-
-  afterEach(() => {
-    restoreFetch?.();
-    restoreFetch = null;
-  });
-
-  it('POSTs to the default model endpoint with the API key in the query string', async () => {
-    const { calls, restore } = installFetchQueue([ttsResponse(makePcm(8))]);
-    restoreFetch = restore;
-
-    await generatePcmAudio('Hello.', 'key-with-special&char');
-
-    expect(calls).toHaveLength(1);
-    expect(calls[0].url).toContain('gemini-2.5-flash-preview-tts:generateContent');
-    // encodeURIComponent escapes the ampersand.
-    expect(calls[0].url).toContain('key=key-with-special%26char');
-  });
-
-  it('honors a custom modelId and voiceName, defaulting voice to "Kore" otherwise', async () => {
-    const { calls, restore } = installFetchQueue([ttsResponse(makePcm(8))]);
-    restoreFetch = restore;
-
-    await generatePcmAudio('Hello.', 'k', { modelId: 'gemini-2.0-tts', voiceName: 'Puck' });
-
-    expect(calls[0].url).toContain('gemini-2.0-tts:generateContent');
-    const body = calls[0].body as {
-      generationConfig: {
-        speechConfig: { voiceConfig: { prebuiltVoiceConfig: { voiceName: string } } };
-      };
-    };
-    expect(body.generationConfig.speechConfig.voiceConfig.prebuiltVoiceConfig.voiceName).toBe('Puck');
-  });
-
-  it('returns concatenated PCM with the documented 24 kHz / 16-bit / mono metadata', async () => {
-    const pcm = makePcm(16, 0x7f);
-    const { restore } = installFetchQueue([ttsResponse(pcm)]);
-    restoreFetch = restore;
-
-    const result = await generatePcmAudio('Hello.', 'k');
-
-    expect(result.sampleRate).toBe(24000);
-    expect(result.channels).toBe(1);
-    expect(result.bitsPerSample).toBe(16);
-    expect(result.pcm).toEqual(pcm);
-  });
-
-  it('calls onProgress once per chunk with 1-based current and total', async () => {
-    const { restore } = installFetchQueue([ttsResponse(makePcm(8))]);
-    restoreFetch = restore;
-
-    const onProgress = vi.fn();
-    await generatePcmAudio('Short.', 'k', { onProgress });
-
-    expect(onProgress).toHaveBeenCalledTimes(1);
-    expect(onProgress).toHaveBeenCalledWith(1, 1);
-  });
-});
-
-describe('generatePcmAudio — chunking & per-chunk prompt shape', () => {
-  let restoreFetch: (() => void) | null = null;
-  afterEach(() => { restoreFetch?.(); restoreFetch = null; });
-
-  it('splits long input across multiple generateContent calls, one per chunk', async () => {
-    // Two paragraphs, each well above MAX_CHUNK_CHARS=4000, separated by a
-    // paragraph break → chunkText() should split them into two chunks.
-    const para = 'word '.repeat(900); // ~4500 chars
-    const text = `${para}\n\n${para}`;
-
-    const pcm = makePcm(FADE_BYTES * 4, 0x10);
-    const { calls, restore } = installFetchQueue([ttsResponse(pcm), ttsResponse(pcm)]);
-    restoreFetch = restore;
-
-    await generatePcmAudio(text, 'k');
-
-    expect(calls).toHaveLength(2);
-  });
-
-  it('embeds "passage N of M" director notes on the first and later chunks differently', async () => {
-    const para = 'word '.repeat(900);
-    const text = `${para}\n\n${para}`;
-
-    const pcm = makePcm(FADE_BYTES * 4, 0x10);
-    const { calls, restore } = installFetchQueue([ttsResponse(pcm), ttsResponse(pcm)]);
-    restoreFetch = restore;
-
-    await generatePcmAudio(text, 'k');
-
-    const firstText = (calls[0].body as { contents: Array<{ parts: Array<{ text: string }> }> }).contents[0].parts[0].text;
-    const secondText = (calls[1].body as { contents: Array<{ parts: Array<{ text: string }> }> }).contents[0].parts[0].text;
-
-    expect(firstText).toContain('passage 1 of 2');
-    expect(firstText).toContain('opening of a calm, sustained reading');
-    expect(secondText).toContain('passage 2 of 2');
-    expect(secondText).toContain('Continue seamlessly from the previous passage');
-  });
-
-  it('injects an accent directive into every chunk prompt when provided', async () => {
-    const { calls, restore } = installFetchQueue([ttsResponse(makePcm(8))]);
-    restoreFetch = restore;
-
-    await generatePcmAudio('Hi.', 'k', { accent: 'British English accent from Oxford' });
-
-    const txt = (calls[0].body as { contents: Array<{ parts: Array<{ text: string }> }> }).contents[0].parts[0].text;
-    expect(txt).toContain('British English accent from Oxford');
-  });
-
-  it('omits the passage-counter directive when there is only one chunk', async () => {
-    const { calls, restore } = installFetchQueue([ttsResponse(makePcm(8))]);
-    restoreFetch = restore;
-
-    await generatePcmAudio('Short single chunk.', 'k');
-
-    const txt = (calls[0].body as { contents: Array<{ parts: Array<{ text: string }> }> }).contents[0].parts[0].text;
-    expect(txt).not.toMatch(/passage \d+ of \d+/);
-  });
-});
-
-describe('generatePcmAudio — retry & error handling', () => {
-  let restoreFetch: (() => void) | null = null;
-  let restoreSetTimeout: (() => void) | null = null;
-
-  beforeEach(() => {
-    // The retry path sleeps 500ms / 1000ms between attempts. Stub the
-    // global so tests don't actually wait, but keep callbacks async-ish.
-    const originalSetTimeout = globalThis.setTimeout;
-    globalThis.setTimeout = ((fn: () => void) => {
-      Promise.resolve().then(fn);
-      return 0 as unknown as ReturnType<typeof setTimeout>;
-    }) as typeof globalThis.setTimeout;
-    restoreSetTimeout = () => { globalThis.setTimeout = originalSetTimeout; };
-  });
-
-  afterEach(() => {
-    restoreFetch?.();
-    restoreSetTimeout?.();
-    restoreFetch = null;
-    restoreSetTimeout = null;
-  });
-
-  it('retries on 5xx and succeeds on the second attempt', async () => {
-    const { calls, restore } = installFetchQueue([
-      { status: 503, text: 'overloaded' },
-      ttsResponse(makePcm(8)),
-    ]);
-    restoreFetch = restore;
-
-    const result = await generatePcmAudio('Hi.', 'k');
-    expect(calls).toHaveLength(2);
-    expect(result.pcm.length).toBe(8);
-  });
-
-  it('fails fast on 4xx (no retry)', async () => {
-    const { calls, restore } = installFetchQueue([{ status: 401, text: 'unauthorized' }]);
-    restoreFetch = restore;
-
-    await expect(generatePcmAudio('Hi.', 'k')).rejects.toBeInstanceOf(GeminiTtsError);
-    expect(calls).toHaveLength(1);
-  });
-
-  it('attaches status and detail to the thrown GeminiTtsError', async () => {
-    const { restore } = installFetchQueue([{ status: 400, text: 'bad request: malformed input' }]);
-    restoreFetch = restore;
-
-    try {
-      await generatePcmAudio('Hi.', 'k');
-      throw new Error('expected to throw');
-    } catch (e) {
-      expect(e).toBeInstanceOf(GeminiTtsError);
-      const err = e as GeminiTtsError;
-      expect(err.status).toBe(400);
-      expect(err.detail).toContain('bad request');
-      expect(err.message).toContain('Gemini TTS returned 400');
-    }
-  });
-
-  it('retries on a thrown network error and gives up after MAX_ATTEMPTS=3', async () => {
-    const netErr = new Error('ECONNRESET');
-    const { calls, restore } = installFetchQueue([
-      { throw: netErr },
-      { throw: netErr },
-      { throw: netErr },
-    ]);
-    restoreFetch = restore;
-
-    await expect(generatePcmAudio('Hi.', 'k')).rejects.toThrow(/Network error/);
-    expect(calls).toHaveLength(3);
-  });
-
-  it('retries when the response has no audio inlineData (model returned text tokens)', async () => {
-    const { calls, restore } = installFetchQueue([
-      { status: 200, body: { candidates: [{ content: { parts: [{ text: 'oops' }] } }] } },
-      ttsResponse(makePcm(8)),
-    ]);
-    restoreFetch = restore;
-
-    await generatePcmAudio('Hi.', 'k');
-    expect(calls).toHaveLength(2);
-  });
-
-  it('retries when the audio payload decodes to zero bytes', async () => {
-    const { calls, restore } = installFetchQueue([
-      ttsResponse(new Uint8Array(0)),
-      ttsResponse(makePcm(8)),
-    ]);
-    restoreFetch = restore;
-
-    await generatePcmAudio('Hi.', 'k');
-    expect(calls).toHaveLength(2);
-  });
-});
-
-describe('generatePcmAudio — PCM joining & crossfade', () => {
-  let restoreFetch: (() => void) | null = null;
-  afterEach(() => { restoreFetch?.(); restoreFetch = null; });
-
-  it('returns a single chunk untouched when there is only one chunk', async () => {
-    const pcm = makePcm(8, 0xAA);
-    const { restore } = installFetchQueue([ttsResponse(pcm)]);
-    restoreFetch = restore;
-
-    const result = await generatePcmAudio('Hi.', 'k');
-    expect(result.pcm).toEqual(pcm);
-  });
-
-  it('joins two chunks losing exactly fadeBytes (3840) per junction in the merged length', async () => {
-    // Build two chunks bigger than the fade window so a real cosine crossfade
-    // runs. Each chunk is fadeBytes * 4 bytes (15360); the merged result
-    // should equal sum - fadeBytes.
-    const a = makePcm(FADE_BYTES * 4, 0x10);
-    const b = makePcm(FADE_BYTES * 4, 0x20);
-
-    const para = 'word '.repeat(900);
-    const text = `${para}\n\n${para}`;
-
-    const { restore } = installFetchQueue([ttsResponse(a), ttsResponse(b)]);
-    restoreFetch = restore;
-
-    const result = await generatePcmAudio(text, 'k');
-    expect(result.pcm.length).toBe(a.length + b.length - FADE_BYTES);
-    // First and last bytes outside the fade zone should be the original chunk
-    // body (no mixing applied there).
-    expect(result.pcm[0]).toBe(0x10);
-    expect(result.pcm[result.pcm.length - 1]).toBe(0x20);
-  });
-
-  it('falls back to a plain concat when one chunk is shorter than the fade window', async () => {
-    // Two-chunk path with one chunk too small to crossfade → behave like concat.
-    const a = makePcm(FADE_BYTES * 4, 0x10);
-    const b = makePcm(8, 0x20); // way smaller than fadeBytes
-    const para = 'word '.repeat(900);
-    const text = `${para}\n\n${para}`;
-
-    const { restore } = installFetchQueue([ttsResponse(a), ttsResponse(b)]);
-    restoreFetch = restore;
-
-    const result = await generatePcmAudio(text, 'k');
-    expect(result.pcm.length).toBe(a.length + b.length);
-    expect(result.pcm.slice(0, a.length)).toEqual(a);
-    expect(result.pcm.slice(a.length)).toEqual(b);
-  });
-});
-
-describe('generateAudiobook', () => {
-  let restoreFetch: (() => void) | null = null;
-  afterEach(() => { restoreFetch?.(); restoreFetch = null; });
-
-  it('wraps the PCM in a RIFF/WAVE container with the correct headers', async () => {
-    const pcm = makePcm(40, 0x33);
-    const { restore } = installFetchQueue([ttsResponse(pcm)]);
-    restoreFetch = restore;
-
-    const blob = await generateAudiobook('Hi.', 'k');
-    expect(blob.type).toBe('audio/wav');
-    expect(blob.size).toBe(44 + pcm.length);
-
-    const buf = new Uint8Array(await blob.arrayBuffer());
-    const ascii = (start: number, len: number) =>
-      String.fromCharCode(...buf.slice(start, start + len));
-    expect(ascii(0, 4)).toBe('RIFF');
-    expect(ascii(8, 4)).toBe('WAVE');
-    expect(ascii(12, 4)).toBe('fmt ');
-    expect(ascii(36, 4)).toBe('data');
-
-    const view = new DataView(buf.buffer);
-    // Sample rate at offset 24, little-endian uint32.
-    expect(view.getUint32(24, true)).toBe(24000);
-    // Channels (mono = 1) at offset 22, uint16.
-    expect(view.getUint16(22, true)).toBe(1);
-    // Bits per sample at offset 34, uint16.
-    expect(view.getUint16(34, true)).toBe(16);
-    // dataSize at offset 40 equals the PCM length.
-    expect(view.getUint32(40, true)).toBe(pcm.length);
-  });
-});
-
-describe('GeminiTtsError', () => {
-  it('preserves name, status, and detail', () => {
-    const e = new GeminiTtsError('boom', 503, 'overloaded detail');
-    expect(e.name).toBe('GeminiTtsError');
-    expect(e.message).toBe('boom');
-    expect(e.status).toBe(503);
-    expect(e.detail).toBe('overloaded detail');
-    expect(e).toBeInstanceOf(Error);
-  });
-});
diff --git a/tests/imscc-exporter.test.ts b/tests/imscc-exporter.test.ts
index 6cc3aa7..4961d4a 100644
--- a/tests/imscc-exporter.test.ts
+++ b/tests/imscc-exporter.test.ts
@@ -1,4 +1,4 @@
-import { describe, it, expect } from 'vitest';
+import { describe, it, expect, vi, afterEach } from 'vitest';
 import JSZip from 'jszip';
 import { assembleImscc } from '../src/services/export/imsccExporter';
 import type {
@@ -136,90 +136,386 @@ async function readText(zip: JSZip, path: string): Promise<string> {
   return f.async('string');
 }
 
-describe('assembleImscc', () => {
-  it('produces a parseable ZIP with a CC 1.1 manifest and Canvas course_settings', async () => {
+function parseXml(xml: string): Document {
+  const doc = new DOMParser().parseFromString(xml, 'application/xml');
+  if (doc.getElementsByTagName('parsererror').length > 0) {
+    throw new Error(`Not well-formed XML: ${xml.slice(0, 120)}`);
+  }
+  return doc;
+}
+
+/** All elements by local name (namespace-agnostic). */
+function all(doc: Document | Element, name: string): Element[] {
+  return Array.from(doc.getElementsByTagName('*')).filter((e) => e.localName === name);
+}
+
+function text(el: Element | undefined | null, name: string): string {
+  return (el ? all(el, name)[0]?.textContent : '') ?? '';
+}
+
+async function buildFull() {
+  const chapter = makeChapter({
+    practiceQuizData: practiceQuizMd,
+    inClassQuizData: inClassQuiz,
+    weeklyChallengeData: weeklyChallenge,
+    discussionData: [
+      { hook: 'Hot take', prompt: 'Are viruses alive?' },
+      { hook: 'Big picture', prompt: 'What is life?' },
+    ],
+  });
+  const blob = await assembleImscc(makeSyllabus(), [chapter]);
+  const zip = await unzipBlob(blob);
+  const manifest = parseXml(await readText(zip, 'imsmanifest.xml'));
+  const resources = new Map(all(manifest, 'resource').map((r) => [r.getAttribute('identifier')!, r]));
+  const modules = parseXml(await readText(zip, 'course_settings/module_meta.xml'));
+  return { zip, manifest, resources, modules };
+}
+
+describe('assembleImscc (native Canvas export)', () => {
+  it('writes a CC 1.1 manifest plus the native course_settings files', async () => {
     const blob = await assembleImscc(makeSyllabus(), [makeChapter()]);
     const zip = await unzipBlob(blob);
 
     const manifest = await readText(zip, 'imsmanifest.xml');
     expect(manifest).toContain('imsccv1p1');
     expect(manifest).toContain('<schemaversion>1.1.0</schemaversion>');
-    expect(manifest).toContain('Test Course');
 
-    // Canvas-specific course_settings extension
-    expect(zip.file('course_settings/course_settings.xml')).toBeTruthy();
-    expect(zip.file('course_settings/syllabus.html')).toBeTruthy();
-    expect(zip.file('course_settings/canvas_export.txt')).toBeTruthy();
+    for (const f of [
+      'course_settings/course_settings.xml',
+      'course_settings/module_meta.xml',
+      'course_settings/assignment_groups.xml',
+      'course_settings/files_meta.xml',
+      'course_settings/syllabus.html',
+      'course_settings/canvas_export.txt',
+    ]) {
+      expect(zip.file(f), f).toBeTruthy();
+    }
 
-    const courseSettings = await readText(zip, 'course_settings/course_settings.xml');
-    expect(courseSettings).toMatch(/<title>Test Course<\/title>/);
+    const settings = parseXml(await readText(zip, 'course_settings/course_settings.xml'));
+    expect(text(settings.documentElement, 'title')).toBe('Test Course');
+    expect(text(settings.documentElement, 'default_view')).toBe('modules');
   });
 
-  it('emits the reading HTML as a webcontent resource', async () => {
-    const blob = await assembleImscc(makeSyllabus(), [makeChapter()]);
-    const zip = await unzipBlob(blob);
+  it('puts the overview and a chapter outline in the syllabus, tagged intendeduse=syllabus', async () => {
+    const { zip, resources } = await buildFull();
 
-    const readingPath = 'chapter-1-chapter-one/reading.html';
-    expect(zip.file(readingPath)).toBeTruthy();
-    const reading = await readText(zip, readingPath);
-    expect(reading).toContain('Reading body');
+    const syllabus = await readText(zip, 'course_settings/syllabus.html');
+    expect(syllabus).toContain('A test course for the exporter unit tests.');
+    expect(syllabus).toContain('Chapter One');
+    const tagged = [...resources.values()].find((r) => r.getAttribute('intendeduse') === 'syllabus');
+    expect(tagged?.getAttribute('href')).toBe('course_settings/syllabus.html');
   });
 
-  it('emits QTI 1.2 assessments for practice + in-class + weekly challenge with auto-publish sidecars', async () => {
+  it('emits the reading as a native Canvas Page (no scripts/styles) plus the interactive original as a file', async () => {
     const chapter = makeChapter({
-      practiceQuizData: practiceQuizMd,
-      inClassQuizData: inClassQuiz,
-      weeklyChallengeData: weeklyChallenge,
+      htmlContent:
+        '<html><head><style>body{color:red}</style><script>alert(1)</script></head><body><h1>Reading body</h1><script>x()</script></body></html>',
     });
-    const blob = await assembleImscc(makeSyllabus(), [chapter]);
-    const zip = await unzipBlob(blob);
+    const zip = await unzipBlob(await assembleImscc(makeSyllabus(), [chapter]));
+
+    const page = await readText(zip, 'wiki_content/chapter-1-chapter-one-reading.html');
+    expect(page).toContain('Reading body');
+    expect(page).not.toMatch(/<script|<style/i);
+    expect(page).toContain('<meta name="workflow_state" content="active"/>');
+    expect(page).toMatch(/<meta name="identifier" content="g[0-9a-f]{32}"\/>/);
+
+    // Full-fidelity original is kept for download.
+    const original = await readText(zip, 'web_resources/chapter-1-chapter-one/reading-interactive.html');
+    expect(original).toContain('alert(1)');
+  });
+
+  it('builds one quiz per source with both QTI flavours and the right graded/practice type', async () => {
+    const { zip, resources, modules } = await buildFull();
+
+    const quizItems = all(modules, 'item').filter((i) => text(i, 'content_type') === 'Quizzes::Quiz');
+    expect(quizItems.map((i) => text(i, 'title'))).toEqual([
+      'Chapter One — Practice Quiz',
+      'Chapter One — In-Class Quiz',
+      'Week 1 Challenge — Chapter One',
+    ]);
+
+    const kinds: string[] = [];
+    for (const item of quizItems) {
+      const quizId = text(item, 'identifierref');
+      const res = resources.get(quizId)!;
+      expect(res.getAttribute('type')).toBe('imsqti_xmlv1p2/imscc_xmlv1p1/assessment');
+      const metaResId = all(res, 'dependency')[0].getAttribute('identifierref')!;
+      const metaRes = resources.get(metaResId)!;
+      const metaHref = metaRes.getAttribute('href')!;
+      expect(metaHref).toBe(`${quizId}/assessment_meta.xml`);
+      // The meta resource carries Canvas's native QTI too.
+      expect(all(metaRes, 'file').map((f) => f.getAttribute('href'))).toContain(
+        `non_cc_assessments/${quizId}.xml.qti`,
+      );
+      expect(zip.file(`${quizId}/assessment_qti.xml`)).toBeTruthy();
+      expect(zip.file(`non_cc_assessments/${quizId}.xml.qti`)).toBeTruthy();
+
+      const meta = parseXml(await readText(zip, metaHref));
+      kinds.push(text(meta.documentElement, 'quiz_type'));
+      expect(text(meta.documentElement, 'available')).toBe('true');
+    }
+    expect(kinds).toEqual(['practice_quiz', 'assignment', 'assignment']);
+  });
+
+  it('graded quizzes carry an assignment in the Assignments group; the practice quiz does not', async () => {
+    const { zip, resources, modules } = await buildFull();
+    const groups = parseXml(await readText(zip, 'course_settings/assignment_groups.xml'));
+    const groupId = all(groups, 'assignmentGroup')[0].getAttribute('identifier');
+    expect(text(all(groups, 'assignmentGroup')[0], 'title')).toBe('Assignments');
+
+    const metas: Document[] = [];
+    for (const item of all(modules, 'item').filter((i) => text(i, 'content_type') === 'Quizzes::Quiz')) {
+      const quizId = text(item, 'identifierref');
+      metas.push(parseXml(await readText(zip, `${quizId}/assessment_meta.xml`)));
+      void resources;
+    }
+    const [practice, inClass, challenge] = metas;
+    expect(all(practice, 'assignment')).toHaveLength(0);
+    for (const m of [inClass, challenge]) {
+      const a = all(m, 'assignment')[0];
+      expect(a).toBeTruthy();
+      expect(text(a, 'workflow_state')).toBe('published');
+      expect(text(a, 'submission_types')).toBe('online_quiz');
+      expect(text(a, 'assignment_group_identifierref')).toBe(groupId);
+    }
+  });
+
+  it('wires correct answers, Canvas question metadata, and drops non-MCQ challenge types', async () => {
+    const { zip, modules } = await buildFull();
+    const ids = all(modules, 'item')
+      .filter((i) => text(i, 'content_type') === 'Quizzes::Quiz')
+      .map((i) => text(i, 'identifierref'));
+    const [practiceId, inClassId, challengeId] = ids;
+
+    // Practice quiz: two MCQs parsed from markdown; first answer is correct.
+    const nativePractice = parseXml(await readText(zip, `non_cc_assessments/${practiceId}.xml.qti`));
+    const items = all(nativePractice, 'item');
+    expect(items).toHaveLength(2);
+    const labels = (el: Element) =>
+      all(el, 'qtimetadatafield').map((f) => [text(f, 'fieldlabel'), text(f, 'fieldentry')]);
+    const meta0 = Object.fromEntries(labels(items[0]));
+    expect(meta0.question_type).toBe('multiple_choice_question');
+    expect(meta0.points_possible).toBe('1.0');
+    expect(meta0.original_answer_ids).toBe('1,2,3,4');
+    expect(meta0.assessment_question_identifierref).toMatch(/^g[0-9a-f]{32}$/);
+    // Correct answer ("The platypus") is label 1.
+    expect(all(items[0], 'varequal')[0].textContent).toBe('1');
+    expect(items[0].textContent).toContain('Which mammal lays eggs?');
+
+    // The CC-profile twin points at the same questions the native file references.
+    const cc = parseXml(await readText(zip, `${practiceId}/assessment_qti.xml`));
+    expect(all(cc, 'item').map((i) => i.getAttribute('ident'))).toContain(
+      meta0.assessment_question_identifierref,
+    );
+
+    // In-class: one question.
+    expect(all(parseXml(await readText(zip, `non_cc_assessments/${inClassId}.xml.qti`)), 'item')).toHaveLength(1);
+    // Challenge: 5 source questions, only mcq + two-stage convert.
+    expect(all(parseXml(await readText(zip, `non_cc_assessments/${challengeId}.xml.qti`)), 'item')).toHaveLength(2);
+  });
+
+  it('emits published native discussions linked through a topic-meta resource', async () => {
+    const { zip, resources, modules } = await buildFull();
+    const topics = all(modules, 'item').filter((i) => text(i, 'content_type') === 'DiscussionTopic');
+    expect(topics).toHaveLength(2);
+
+    const topicId = text(topics[0], 'identifierref');
+    const res = resources.get(topicId)!;
+    expect(res.getAttribute('type')).toBe('imsdt_xmlv1p1');
+    const topicXml = await readText(zip, `${topicId}.xml`);
+    expect(topicXml).toContain('imsdt_v1p1');
+    expect(topicXml).toContain('Hot take');
+    expect(topicXml).toContain('Are viruses alive?');
+
+    const metaId = all(res, 'dependency')[0].getAttribute('identifierref')!;
+    const meta = parseXml(await readText(zip, `${metaId}.xml`));
+    expect(text(meta.documentElement, 'topic_id')).toBe(topicId);
+    expect(text(meta.documentElement, 'workflow_state')).toBe('active');
+    expect(text(meta.documentElement, 'discussion_type')).toBe('threaded');
+  });
+
+  it('module_meta items mirror the manifest organization, in order, and resolve to resources', async () => {
+    const { manifest, resources, modules } = await buildFull();
+
+    const mods = all(modules, 'module');
+    expect(mods).toHaveLength(1);
+    expect(text(mods[0], 'title')).toBe('Chapter 1: Chapter One');
+    expect(text(mods[0], 'workflow_state')).toBe('active');
 
-    // Practice quiz: two MCQs from the markdown
-    const practiceQti = await readText(zip, 'chapter-1-chapter-one/practice-quiz.xml');
-    expect(practiceQti).toContain('questestinterop');
-    expect(practiceQti.match(/<item /g)?.length).toBe(2);
-    expect(practiceQti).toContain('Which mammal lays eggs?');
-
-    // Practice quiz auto-publish sidecar
-    const practiceMeta = await readText(zip, 'chapter-1-chapter-one/practice-quiz-meta.xml');
-    expect(practiceMeta).toContain('canvas.instructure.com');
-    expect(practiceMeta).toContain('<published>true</published>');
-    expect(practiceMeta).toContain('<workflow_state>published</workflow_state>');
-
-    // In-class: one MCQ
-    const inClassQti = await readText(zip, 'chapter-1-chapter-one/in-class-quiz.xml');
-    expect(inClassQti.match(/<item /g)?.length).toBe(1);
-    expect(inClassQti).toContain('What is 2+2?');
-    expect(zip.file('chapter-1-chapter-one/in-class-quiz-meta.xml')).toBeTruthy();
-
-    // Weekly challenge: 5 source questions but only 2 (mcq + two-stage)
-    // convert to QTI. Lossy types (assertion-reason, agreement-matrix,
-    // slider-estimation) are dropped.
-    const challengeQti = await readText(zip, 'chapter-1-chapter-one/weekly-challenge.xml');
-    expect(challengeQti.match(/<item /g)?.length).toBe(2);
-    expect(zip.file('chapter-1-chapter-one/weekly-challenge-meta.xml')).toBeTruthy();
-  });
-
-  it('emits native discussion topics with auto-publish sidecars', async () => {
+    const metaItems = all(mods[0], 'item');
+    expect(metaItems.map((i) => text(i, 'content_type'))).toEqual([
+      'WikiPage',
+      'Quizzes::Quiz',
+      'Quizzes::Quiz',
+      'Quizzes::Quiz',
+      'DiscussionTopic',
+      'DiscussionTopic',
+      'Attachment', // teaching-resources.docx
+      'Attachment', // interactive reading, download
+    ]);
+    expect(metaItems.map((i) => text(i, 'position'))).toEqual(['1', '2', '3', '4', '5', '6', '7', '8']);
+
+    // Every module item resolves to a manifest resource…
+    for (const i of metaItems) expect(resources.has(text(i, 'identifierref'))).toBe(true);
+
+    // …and the manifest organization lists the same item identifiers.
+    const org = all(manifest, 'organization')[0];
+    const orgItemIds = all(org, 'item')
+      .map((i) => i.getAttribute('identifier'))
+      .filter((id): id is string => !!id && id !== 'LearningModules');
+    for (const i of metaItems) expect(orgItemIds).toContain(i.getAttribute('identifier'));
+  });
+
+  it('is internally consistent: unique ids, every referenced file exists, deps resolve', async () => {
+    const { zip, manifest, resources } = await buildFull();
+
+    const allIds = [...all(manifest, 'resource'), ...all(manifest, 'item')]
+      .map((e) => e.getAttribute('identifier'))
+      .filter(Boolean);
+    expect(new Set(allIds).size).toBe(allIds.length);
+
+    for (const res of resources.values()) {
+      for (const f of all(res, 'file')) expect(zip.file(f.getAttribute('href')!), f.getAttribute('href')!).toBeTruthy();
+      const href = res.getAttribute('href');
+      if (href) expect(zip.file(href), href).toBeTruthy();
+      for (const d of all(res, 'dependency')) expect(resources.has(d.getAttribute('identifierref')!)).toBe(true);
+    }
+    // Every XML part is well-formed.
+    for (const name of Object.keys(zip.files)) {
+      if (/\.(xml|qti)$/.test(name)) parseXml(await readText(zip, name));
+    }
+  });
+
+  it('is deterministic: exporting the same course twice yields identical identifiers', async () => {
+    const chapter = makeChapter({ practiceQuizData: practiceQuizMd });
+    const a = await readText(await unzipBlob(await assembleImscc(makeSyllabus(), [chapter])), 'imsmanifest.xml');
+    const b = await readText(await unzipBlob(await assembleImscc(makeSyllabus(), [chapter])), 'imsmanifest.xml');
+    expect(a).toBe(b);
+  });
+
+  it('escapes HTML in prompts and discussion text instead of injecting markup', async () => {
     const chapter = makeChapter({
-      discussionData: [
-        { hook: 'Hot take', prompt: 'Are viruses alive?' },
-        { hook: 'Big picture', prompt: 'What is life?' },
+      inClassQuizData: [
+        {
+          question: 'Is <b>bold</b> & "quoted" safe?',
+          correctAnswer: 'Yes <i>indeed</i>',
+          correctFeedback: 'Because <script>x</script>',
+          distractors: [{ text: 'No', feedback: 'n' }],
+        },
       ],
+      discussionData: [{ hook: 'A&B', prompt: 'Use <em>care</em>' }],
     });
-    const blob = await assembleImscc(makeSyllabus(), [chapter]);
-    const zip = await unzipBlob(blob);
+    const zip = await unzipBlob(await assembleImscc(makeSyllabus(), [chapter]));
+    const quizPath = Object.keys(zip.files).find((n) => n.endsWith('.xml.qti'))!;
+    const qti = parseXml(await readText(zip, quizPath));
+    // The prompt is stored as escaped HTML text — decoded once by the XML parser.
+    const prompt = all(qti, 'mattext')[0].textContent!;
+    expect(prompt).toContain('&lt;b&gt;bold&lt;/b&gt;');
+    expect(prompt).not.toContain('<b>');
+
+    const topicNames = Object.keys(zip.files).filter((n) => /^g[0-9a-f]{32}\.xml$/.test(n));
+    const topicXml = (await Promise.all(topicNames.map((n) => readText(zip, n)))).find((x) => x.includes('<topic '))!;
+    expect(topicXml).toContain('&amp;lt;em&amp;gt;care');
+  });
+
+  it('adds a Course resources module for the curriculum matrix', async () => {
+    const zip = await unzipBlob(
+      await assembleImscc(makeSyllabus(), [makeChapter()], { curriculumCsv: 'a,b\n1,2\n' }),
+    );
+    expect(await readText(zip, 'web_resources/course/curriculum-alignment-matrix.csv')).toContain('a,b');
+    const modules = parseXml(await readText(zip, 'course_settings/module_meta.xml'));
+    expect(all(modules, 'module').map((m) => text(m, 'title'))).toEqual([
+      'Chapter 1: Chapter One',
+      'Course resources',
+    ]);
+    const files = await readText(zip, 'course_settings/files_meta.xml');
+    expect(files).toContain('curriculum-alignment-matrix.csv');
+  });
+});
+
+describe('assembleImscc — slide decks', () => {
+  afterEach(() => {
+    vi.doUnmock('../src/services/export/pptxExporter');
+    vi.resetModules();
+  });
+
+  const slides = [
+    { title: 'A', speakerNotes: '', bullets: [], imagePrompt: 'prompt a' },
+    { title: 'B', speakerNotes: '', bullets: [], imagePrompt: 'prompt b' },
+  ];
 
-    const disc1 = await readText(zip, 'chapter-1-chapter-one/discussions/disc-1.xml');
-    expect(disc1).toContain('imsdt_v1p1');
-    expect(disc1).toContain('Hot take');
-    expect(disc1).toContain('Are viruses alive?');
+  async function loadWithFakePptx() {
+    const generatePptx = vi.fn(
+      async (
+        sl: unknown[],
+        _c: string,
+        _t: string,
+        _theme: string | undefined,
+        _key: string,
+        opts: { onSlideRendered?: (i: number, uri: string) => void; onProgress?: (c: number, t: number, p: string) => void },
+      ) => {
+        // Pretend two images were rendered.
+        sl.forEach((_, i) => opts.onSlideRendered?.(i, `data:image/png;base64,${i}`));
+        opts.onProgress?.(sl.length, sl.length, 'packing');
+        return { blob: new Blob(['PPTX']), renderedImages: {} };
+      },
+    );
+    vi.doMock('../src/services/export/pptxExporter', () => ({ generatePptx }));
+    const mod = await import('../src/services/export/imsccExporter');
+    return { assembleImscc: mod.assembleImscc, generatePptx };
+  }
 
-    const meta1 = await readText(zip, 'chapter-1-chapter-one/discussions/disc-1-meta.xml');
-    expect(meta1).toContain('canvas.instructure.com');
-    expect(meta1).toContain('<published>true</published>');
+  async function files(blob: Blob) {
+    return Object.keys((await JSZip.loadAsync(await blob.arrayBuffer())).files);
+  }
+
+  it('omits slides.pptx and never calls the image API when slides are unrendered and no opt-in', async () => {
+    const { assembleImscc, generatePptx } = await loadWithFakePptx();
+    const blob = await assembleImscc(makeSyllabus(), [makeChapter({ slidesJson: slides })], {
+      openaiApiKey: 'sk-test',
+    });
+
+    expect(generatePptx).not.toHaveBeenCalled();
+    expect((await files(blob)).some((f) => f.endsWith('slides.pptx'))).toBe(false);
+  });
+
+  it('bundles the deck from cached images without re-rendering', async () => {
+    const { assembleImscc, generatePptx } = await loadWithFakePptx();
+    const rendered = slides.map((sl) => ({ ...sl, imageDataUri: 'data:image/png;base64,x' }));
+    const blob = await assembleImscc(makeSyllabus(), [makeChapter({ slidesJson: rendered })], {
+      openaiApiKey: 'sk-test',
+    });
+
+    expect(generatePptx).toHaveBeenCalledTimes(1);
+    const opts = generatePptx.mock.calls[0][5] as { preRendered: Record<number, string> };
+    expect(Object.keys(opts.preRendered)).toEqual(['0', '1']);
+    expect((await files(blob)).some((f) => f.endsWith('slides.pptx'))).toBe(true);
+  });
+
+  it('renders and bundles missing decks only when renderMissingSlides is set, reporting progress', async () => {
+    const { assembleImscc, generatePptx } = await loadWithFakePptx();
+    const onSlideRendered = vi.fn();
+    const onSlideProgress = vi.fn();
+    const blob = await assembleImscc(makeSyllabus(), [makeChapter({ slidesJson: slides })], {
+      openaiApiKey: 'sk-test',
+      renderMissingSlides: true,
+      onSlideRendered,
+      onSlideProgress,
+    });
+
+    expect(generatePptx).toHaveBeenCalledTimes(1);
+    expect(onSlideRendered).toHaveBeenCalledWith(1, 0, 'data:image/png;base64,0');
+    expect(onSlideRendered).toHaveBeenCalledWith(1, 1, 'data:image/png;base64,1');
+    expect(onSlideProgress).toHaveBeenCalledWith(1, 2, 2, 'packing');
+    expect((await files(blob)).some((f) => f.endsWith('slides.pptx'))).toBe(true);
+  });
+
+  it('never renders without an OpenAI key, even when asked to', async () => {
+    const { assembleImscc, generatePptx } = await loadWithFakePptx();
+    await assembleImscc(makeSyllabus(), [makeChapter({ slidesJson: slides })], {
+      renderMissingSlides: true,
+    });
 
-    expect(zip.file('chapter-1-chapter-one/discussions/disc-2.xml')).toBeTruthy();
-    expect(zip.file('chapter-1-chapter-one/discussions/disc-2-meta.xml')).toBeTruthy();
+    expect(generatePptx).not.toHaveBeenCalled();
   });
 });
diff --git a/tests/pptx-exporter.test.ts b/tests/pptx-exporter.test.ts
index c7a0698..b5e3df9 100644
--- a/tests/pptx-exporter.test.ts
+++ b/tests/pptx-exporter.test.ts
@@ -1,8 +1,12 @@
-import { describe, it, expect } from 'vitest';
+import { describe, it, expect, vi, afterEach } from 'vitest';
 import JSZip from 'jszip';
 import { generatePptx } from '../src/services/export/pptxExporter';
 import type { SlideData } from '../src/types/course';
 
+// 1×1 transparent PNG — stands in for a rendered slide image.
+const PIXEL =
+  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==';
+
 function makeSlide(overrides: Partial<SlideData> & { title: string }): SlideData {
   return {
     bullets: [],
@@ -12,16 +16,21 @@ function makeSlide(overrides: Partial<SlideData> & { title: string }): SlideData
 }
 
 async function loadPptx(blob: Blob): Promise<JSZip> {
-  const buf = await blob.arrayBuffer();
-  return JSZip.loadAsync(buf);
+  return JSZip.loadAsync(await blob.arrayBuffer());
 }
 
+afterEach(() => {
+  vi.unstubAllGlobals();
+});
+
 describe('generatePptx', () => {
   it('produces a non-empty .pptx blob (valid OOXML zip)', async () => {
-    const blob = await generatePptx(
-      [makeSlide({ title: 'Hello', layout: 'title', bodyText: 'Sub' })],
+    const { blob } = await generatePptx(
+      [makeSlide({ title: 'Hello', bodyText: 'Sub' })],
       'Stats',
       'Ch 1',
+      undefined,
+      'sk-test',
     );
     expect(blob).toBeInstanceOf(Blob);
     expect(blob.size).toBeGreaterThan(0);
@@ -32,87 +41,89 @@ describe('generatePptx', () => {
   });
 
   it('writes one slide file per SlideData entry', async () => {
-    const blob = await generatePptx(
+    const { blob } = await generatePptx(
       [
-        makeSlide({ title: 'Title', layout: 'title' }),
-        makeSlide({ title: 'Body', layout: 'content', bullets: ['a', 'b'] }),
-        makeSlide({ title: 'Outro', layout: 'big-idea', bodyText: 'A thought' }),
+        makeSlide({ title: 'One' }),
+        makeSlide({ title: 'Two', bullets: ['a', 'b'] }),
+        makeSlide({ title: 'Three', bodyText: 'A thought' }),
       ],
       'Stats',
       'Ch 1',
+      undefined,
+      'sk-test',
     );
     const zip = await loadPptx(blob);
-    const slideXmls = Object.keys(zip.files).filter(n => /^ppt\/slides\/slide\d+\.xml$/.test(n));
+    const slideXmls = Object.keys(zip.files).filter((n) => /^ppt\/slides\/slide\d+\.xml$/.test(n));
     expect(slideXmls).toHaveLength(3);
   });
 
-  it('exercises every layout branch without throwing', async () => {
-    // One slide per layout — verifies each builder runs to completion.
-    const slides: SlideData[] = [
-      makeSlide({ title: 'Title slide', layout: 'title', bodyText: 'hook' }),
-      makeSlide({ title: 'Section', layout: 'section', bodyText: 'sub' }),
-      makeSlide({ title: 'Content', layout: 'content', bullets: ['x', 'y'] }),
-      makeSlide({ title: 'Big', layout: 'big-idea', bodyText: 'BIG' }),
-      makeSlide({ title: '— Einstein', layout: 'quote', bodyText: 'Imagination > knowledge.' }),
-      makeSlide({ title: 'Two-col', layout: 'two-column', bullets: ['L1'], bodyText: JSON.stringify(['R1', 'R2']) }),
-      // No layout = default to 'content'.
-      makeSlide({ title: 'Default', bullets: ['d1'] }),
-    ];
-    const blob = await generatePptx(slides, 'Course', 'Chapter');
-    const zip = await loadPptx(blob);
-    const slideXmls = Object.keys(zip.files).filter(n => /^ppt\/slides\/slide\d+\.xml$/.test(n));
-    expect(slideXmls).toHaveLength(slides.length);
-  });
+  it('uses pre-rendered images without calling the image API', async () => {
+    const fetchSpy = vi.fn(() => {
+      throw new Error('network must not be touched when every slide is pre-rendered');
+    });
+    vi.stubGlobal('fetch', fetchSpy);
 
-  it('attaches the speaker-notes text to the slide that supplied them', async () => {
-    const blob = await generatePptx(
-      [
-        makeSlide({ title: 'With notes', layout: 'content', speakerNotes: 'Say this aloud.' }),
-        makeSlide({ title: 'Without notes', layout: 'content' }),
-      ],
+    const slides = [
+      makeSlide({ title: 'A', imagePrompt: 'a prompt' }),
+      makeSlide({ title: 'B', imagePrompt: 'b prompt' }),
+    ];
+    const { blob, renderedImages } = await generatePptx(
+      slides,
       'Course',
       'Ch',
+      undefined,
+      'sk-test',
+      { preRendered: { 0: PIXEL, 1: PIXEL } },
     );
+
+    expect(fetchSpy).not.toHaveBeenCalled();
+    expect(Object.keys(renderedImages)).toEqual(['0', '1']);
     const zip = await loadPptx(blob);
-    // pptxgenjs writes a notesSlide XML for every slide (it's part of the
-    // OOXML spec), but the speaker text only appears in slides that opted in.
-    const notes1 = await zip.file('ppt/notesSlides/notesSlide1.xml')?.async('string') ?? '';
-    const notes2 = await zip.file('ppt/notesSlides/notesSlide2.xml')?.async('string') ?? '';
-    expect(notes1).toContain('Say this aloud.');
-    expect(notes2).not.toContain('Say this aloud.');
+    const media = Object.keys(zip.files).filter((n) => n.startsWith('ppt/media/'));
+    expect(media.length).toBeGreaterThan(0);
   });
 
-  it('parses two-column bodyText as a JSON array of right-column bullets when valid', async () => {
-    const blob = await generatePptx(
-      [makeSlide({ title: 'Compare', layout: 'two-column', bullets: ['L1', 'L2'], bodyText: '["R1","R2","R3"]' })],
+  it('falls back to a text-only slide when a slide has no image', async () => {
+    const { blob } = await generatePptx(
+      [makeSlide({ title: 'Text only', bodyText: 'plain body copy' })],
       'Course',
       'Ch',
+      undefined,
+      'sk-test',
     );
     const zip = await loadPptx(blob);
     const slideXml = await zip.file('ppt/slides/slide1.xml')!.async('string');
-    // Three right-column items show up as text runs.
-    expect(slideXml).toContain('R1');
-    expect(slideXml).toContain('R2');
-    expect(slideXml).toContain('R3');
-    expect(slideXml).toContain('L1');
+    expect(slideXml).toContain('Text only');
+    expect(slideXml).toContain('plain body copy');
   });
 
-  it('falls back to using bodyText as a single right-column bullet when it is not JSON', async () => {
-    const blob = await generatePptx(
-      [makeSlide({ title: 'Compare', layout: 'two-column', bullets: ['L1'], bodyText: 'plain right column' })],
+  it('attaches the speaker-notes text to the slide that supplied them', async () => {
+    const { blob } = await generatePptx(
+      [
+        makeSlide({ title: 'With notes', speakerNotes: 'Say this aloud.' }),
+        makeSlide({ title: 'Without notes' }),
+      ],
       'Course',
       'Ch',
+      undefined,
+      'sk-test',
     );
     const zip = await loadPptx(blob);
-    const slideXml = await zip.file('ppt/slides/slide1.xml')!.async('string');
-    expect(slideXml).toContain('plain right column');
+    // pptxgenjs writes a notesSlide XML for every slide (it's part of the
+    // OOXML spec), but the speaker text only appears in slides that opted in.
+    const notes1 = (await zip.file('ppt/notesSlides/notesSlide1.xml')?.async('string')) ?? '';
+    const notes2 = (await zip.file('ppt/notesSlides/notesSlide2.xml')?.async('string')) ?? '';
+    expect(notes1).toContain('Say this aloud.');
+    expect(notes2).not.toContain('Say this aloud.');
   });
 
   it('writes the course title and chapter title into the .pptx metadata', async () => {
-    const blob = await generatePptx(
-      [makeSlide({ title: 'A', layout: 'content' })],
+    const { blob } = await generatePptx(
+      [makeSlide({ title: 'A' })],
       'Stats 101',
       'The Replication Crisis',
+      undefined,
+      'sk-test',
     );
     const zip = await loadPptx(blob);
     const coreXml = await zip.file('docProps/core.xml')!.async('string');
@@ -120,13 +131,15 @@ describe('generatePptx', () => {
     expect(coreXml).toContain('Stats 101');
   });
 
-  it('honors a custom themeId without throwing (themes resolve to a registered palette)', async () => {
-    const blob = await generatePptx(
-      [makeSlide({ title: 'Themed', layout: 'content' })],
-      'Course',
-      'Ch',
-      'midnight',
+  it('refuses to build an empty deck', async () => {
+    await expect(generatePptx([], 'Course', 'Ch', undefined, 'sk-test')).rejects.toThrow(
+      /zero slides/i,
     );
-    expect(blob.size).toBeGreaterThan(0);
+  });
+
+  it('requires an OpenAI key (slides are rendered as images)', async () => {
+    await expect(
+      generatePptx([makeSlide({ title: 'A' })], 'Course', 'Ch', undefined, '  '),
+    ).rejects.toThrow(/OpenAI API key/i);
   });
 });
diff --git a/tests/store-course.test.ts b/tests/store-course.test.ts
index ef43060..11d95d8 100644
--- a/tests/store-course.test.ts
+++ b/tests/store-course.test.ts
@@ -68,7 +68,7 @@ describe('useCourseStore', () => {
     expect(s().setup.topic).toBe('Stats');
     expect(s().setup.numChapters).toBe(8);
     // Other defaults are preserved.
-    expect(s().setup.themeId).toBe('midnight');
+    expect(s().setup.themeId).toBe('press');
   });
 
   it('setSyllabus stores the syllabus AND clears any existing curriculumMap (it gets re-built later)', () => {
diff --git a/tests/template-imscc-exporter.test.ts b/tests/template-imscc-exporter.test.ts
index 6c50b8c..c8acfe1 100644
--- a/tests/template-imscc-exporter.test.ts
+++ b/tests/template-imscc-exporter.test.ts
@@ -282,3 +282,167 @@ describe('assembleTemplateImscc (round-trip)', () => {
     expect(noteItems.length).toBeGreaterThanOrEqual(4);
   });
 });
+
+// ── Real-Canvas-shaped template: awkward-but-real features ──
+
+async function buildCanvasShapedTemplate(): Promise<Uint8Array> {
+  const zip = new JSZip();
+  const ns = 'xmlns="http://canvas.instructure.com/xsd/cccv1p0"';
+  zip.file(
+    'course_settings/module_meta.xml',
+    `<?xml version="1.0" encoding="UTF-8"?>
+<modules ${ns}>
+  <module identifier="mod_begin">
+    <title>Begin Here: Introductory Module</title>
+    <workflow_state>active</workflow_state>
+    <position>5</position>
+    <require_sequential_progress>true</require_sequential_progress>
+    <locked>false</locked>
+    <completion_requirements>
+      <completion_requirement><item_identifierref>item_welcome</item_identifierref><type>must_view</type></completion_requirement>
+    </completion_requirements>
+    <items>
+      <item identifier="item_welcome"><content_type>WikiPage</content_type><workflow_state>active</workflow_state><title>Welcome</title><identifierref>r_welcome</identifierref><position>1</position><new_tab/><indent>0</indent><link_settings_json>null</link_settings_json></item>
+      <item identifier="item_link"><content_type>ExternalUrl</content_type><workflow_state>unpublished</workflow_state><title>Help desk</title><identifierref>g_inline_only</identifierref><url>https://example.edu/help</url><position>2</position><new_tab>true</new_tab><indent>1</indent><link_settings_json>{"selection_width":800}</link_settings_json></item>
+      <item identifier="item_quiz"><content_type>Quizzes::Quiz</content_type><workflow_state>active</workflow_state><title>Syllabus quiz</title><identifierref>r_quiz</identifierref><position>3</position><new_tab/><indent>0</indent><link_settings_json>null</link_settings_json></item>
+    </items>
+  </module>
+  <module identifier="mod_pattern">
+    <title>Module 1: (Example to Edit)</title>
+    <workflow_state>active</workflow_state>
+    <position>6</position>
+    <items>
+      <item identifier="item_old_over"><content_type>WikiPage</content_type><workflow_state>active</workflow_state><title>Module 1 Overview</title><identifierref>r_old_over</identifierref><position>1</position><indent>0</indent></item>
+      <item identifier="item_old_notes"><content_type>WikiPage</content_type><workflow_state>active</workflow_state><title>M1 Instructor Notes: (Example to Edit)</title><identifierref>r_old_notes</identifierref><position>2</position><indent>0</indent></item>
+      <item identifier="item_old_disc"><content_type>DiscussionTopic</content_type><workflow_state>active</workflow_state><title>M1 Discussion: (Example to Edit)</title><identifierref>r_old_disc</identifierref><position>3</position><indent>0</indent></item>
+    </items>
+  </module>
+</modules>`,
+  );
+  zip.file(
+    'imsmanifest.xml',
+    `<?xml version="1.0" encoding="UTF-8"?>
+<manifest identifier="tpl" xmlns="http://www.imsglobal.org/xsd/imsccv1p1/imscp_v1p1">
+  <organizations><organization identifier="org_1" structure="rooted-hierarchy">
+    <item identifier="LearningModules">
+      <item identifier="mod_begin"><title>Begin Here: Introductory Module</title>
+        <item identifier="item_welcome" identifierref="r_welcome"><title>Welcome</title></item>
+        <item identifier="item_link" identifierref="r_weblink"><title>Help desk</title></item>
+        <item identifier="item_quiz" identifierref="r_quiz"><title>Syllabus quiz</title></item>
+      </item>
+      <item identifier="mod_pattern"><title>Module 1: (Example to Edit)</title>
+        <item identifier="item_old_over" identifierref="r_old_over"><title>Module 1 Overview</title></item>
+        <item identifier="item_old_notes" identifierref="r_old_notes"><title>M1 Instructor Notes: (Example to Edit)</title></item>
+        <item identifier="item_old_disc" identifierref="r_old_disc"><title>M1 Discussion: (Example to Edit)</title></item>
+      </item>
+    </item>
+  </organization></organizations>
+  <resources>
+    <resource identifier="r_syll" type="associatedcontent/imscc_xmlv1p1/learning-application-resource" href="course_settings/syllabus.html" intendeduse="syllabus"><file href="course_settings/syllabus.html"/></resource>
+    <resource identifier="r_welcome" type="webcontent" href="wiki_content/welcome.html"><file href="wiki_content/welcome.html"/></resource>
+    <resource identifier="r_weblink" type="imswl_xmlv1p1"><file href="r_weblink.xml"/></resource>
+    <resource identifier="r_quiz" type="imsqti_xmlv1p2/imscc_xmlv1p1/assessment"><file href="r_quiz/assessment_qti.xml"/><dependency identifierref="r_quiz_meta"/></resource>
+    <resource identifier="r_quiz_meta" type="associatedcontent/imscc_xmlv1p1/learning-application-resource" href="r_quiz/assessment_meta.xml"><file href="r_quiz/assessment_meta.xml"/><file href="non_cc_assessments/r_quiz.xml.qti"/></resource>
+    <resource identifier="r_old_over" type="webcontent" href="wiki_content/old-over.html"><file href="wiki_content/old-over.html"/></resource>
+    <resource identifier="r_old_notes" type="webcontent" href="wiki_content/old-notes.html"><file href="wiki_content/old-notes.html"/></resource>
+    <resource identifier="r_old_disc" type="imsdt_xmlv1p1"><file href="r_old_disc.xml"/><dependency identifierref="r_old_disc_meta"/></resource>
+    <resource identifier="r_old_disc_meta" type="associatedcontent/imscc_xmlv1p1/learning-application-resource" href="r_old_disc_meta.xml"><file href="r_old_disc_meta.xml"/></resource>
+  </resources>
+</manifest>`,
+  );
+  zip.file('course_settings/syllabus.html', '<html><body>old</body></html>');
+  zip.file('course_settings/course_settings.xml', `<?xml version="1.0"?><course ${ns}><title>Tpl</title></course>`);
+  zip.file('wiki_content/welcome.html', '<html><body>Welcome</body></html>');
+  zip.file('r_weblink.xml', '<webLink/>');
+  zip.file('r_quiz/assessment_qti.xml', '<questestinterop/>');
+  zip.file('r_quiz/assessment_meta.xml', `<quiz ${ns}/>`);
+  zip.file('non_cc_assessments/r_quiz.xml.qti', '<questestinterop/>');
+  zip.file('wiki_content/old-over.html', '<html><body>OLD OVERVIEW</body></html>');
+  zip.file('wiki_content/old-notes.html', '<html><body>OLD NOTES</body></html>');
+  zip.file('r_old_disc.xml', '<topic/>');
+  zip.file('r_old_disc_meta.xml', `<topicMeta ${ns}/>`);
+  return zip.generateAsync({ type: 'uint8array' });
+}
+
+describe('assembleTemplateImscc — fidelity to a real Canvas-shaped template', () => {
+  const syllabus: Syllabus = {
+    courseTitle: 'T',
+    courseOverview: 'o',
+    chapters: [
+      { number: 1, title: 'Module 1: Cells', narrative: 'n', keyConcepts: ['c'], widgets: [], scienceAnnotations: [], spacingConnections: [] },
+    ],
+  };
+  const content: TemplateChapterContent = {
+    moduleOverviewHtml: '<p>NEW OVERVIEW</p>',
+    instructorNotes: [{ title: 'Pacing', htmlContent: '<p>NEW NOTES</p>' }],
+    discussion: { title: 'Q', promptHtml: '<p>NEW PROMPT</p>' },
+  };
+
+  async function run() {
+    const bytes = await buildCanvasShapedTemplate();
+    const template = await parseImsccTemplate({ file: bytes, name: 'real-shape' });
+    const chapters = [
+      { number: 1, title: 'Module 1: Cells', htmlContent: '', templateContent: content },
+    ] as GeneratedChapter[];
+    const out = await assembleTemplateImscc({ syllabus, chapters, template, templateBlob: bytes });
+    return JSZip.loadAsync(new Uint8Array(await out.arrayBuffer()));
+  }
+
+  it('passes verbatim modules through intact: URL, link settings, completion requirements, sequential flag', async () => {
+    const zip = await run();
+    const mm = await zip.file('course_settings/module_meta.xml')!.async('string');
+
+    // The external link keeps its URL (it was dropped before, so Canvas discarded the item).
+    expect(mm).toContain('<url>https://example.edu/help</url>');
+    expect(mm).toContain('{"selection_width":800}');
+    expect(mm).toContain('<new_tab>true</new_tab>');
+    expect(mm).toContain('<indent>1</indent>');
+    // Module-level settings that used to be hard-coded away.
+    expect(mm).toContain('<require_sequential_progress>true</require_sequential_progress>');
+    expect(mm).toContain('<completion_requirement>');
+    expect(mm).toContain('<type>must_view</type>');
+    // Renumbered to the front (was position 5).
+    const begin = mm.slice(mm.indexOf('identifier="mod_begin"'), mm.indexOf('</module>'));
+    expect(begin).toMatch(/<\/title>\s*<workflow_state>active<\/workflow_state>\s*<position>1<\/position>/);
+  });
+
+  it('keeps the original manifest linkage for verbatim items (no dangling references)', async () => {
+    const zip = await run();
+    const manifest = await zip.file('imsmanifest.xml')!.async('string');
+    const ids = new Set([...manifest.matchAll(/<resource identifier="([^"]+)"/g)].map((m) => m[1]));
+    // The external link's org item points at its web-link resource, not at the module_meta id.
+    expect(manifest).toMatch(/<item identifier="item_link" identifierref="r_weblink">/);
+    for (const m of manifest.matchAll(/<item identifier="[^"]+" identifierref="([^"]+)"/g)) {
+      expect(ids.has(m[1]), `dangling identifierref ${m[1]}`).toBe(true);
+    }
+  });
+
+  it('keeps resource dependencies and intendeduse, so verbatim quizzes keep their metadata', async () => {
+    const zip = await run();
+    const manifest = await zip.file('imsmanifest.xml')!.async('string');
+    expect(manifest).toMatch(/<resource identifier="r_quiz"[^>]*>[\s\S]*?<dependency identifierref="r_quiz_meta"\/>/);
+    expect(manifest).toMatch(/<resource identifier="r_syll"[^>]*intendeduse="syllabus"/);
+    expect(zip.file('non_cc_assessments/r_quiz.xml.qti')).toBeTruthy();
+  });
+
+  it("removes the replaced pattern module's files and metadata resources from the archive", async () => {
+    const zip = await run();
+    const manifest = await zip.file('imsmanifest.xml')!.async('string');
+
+    // Canvas's native importer scans wiki_content/ directly, so stale pages must be physically gone.
+    for (const gone of ['wiki_content/old-over.html', 'wiki_content/old-notes.html', 'r_old_disc.xml', 'r_old_disc_meta.xml']) {
+      expect(zip.file(gone), gone).toBeNull();
+    }
+    for (const id of ['r_old_over', 'r_old_notes', 'r_old_disc', 'r_old_disc_meta']) {
+      expect(manifest).not.toContain(`identifier="${id}"`);
+    }
+    // Verbatim content stays.
+    expect(zip.file('wiki_content/welcome.html')).toBeTruthy();
+    expect(zip.file('r_quiz/assessment_meta.xml')).toBeTruthy();
+    // And the generated replacement is present.
+    const pages = Object.keys(zip.files).filter((n) => n.startsWith('wiki_content/') && !n.endsWith('/'));
+    const bodies = await Promise.all(pages.map((n) => zip.file(n)!.async('string')));
+    expect(bodies.some((b) => b.includes('NEW OVERVIEW'))).toBe(true);
+    expect(bodies.some((b) => b.includes('OLD'))).toBe(false);
+  });
+});
diff --git a/tests/template-parser.test.ts b/tests/template-parser.test.ts
index 02e6c33..c4295eb 100644
--- a/tests/template-parser.test.ts
+++ b/tests/template-parser.test.ts
@@ -283,3 +283,56 @@ describe('parseImsccTemplate', () => {
     );
   });
 });
+
+describe('parseImsccTemplate — shape of a real Canvas export', () => {
+  // Canvas's own exporter writes discussion (imsdt) and quiz resources WITHOUT an
+  // `href` attribute — the file is only listed in a <file> child. The example
+  // discussion used to be silently dropped because only `href` was consulted.
+  it('resolves the example discussion when its resource has no href attribute', async () => {
+    const { default: JSZip } = await import('jszip');
+    const zip = new JSZip();
+    const ns = 'xmlns="http://canvas.instructure.com/xsd/cccv1p0"';
+    zip.file(
+      'course_settings/module_meta.xml',
+      `<?xml version="1.0" encoding="UTF-8"?>
+<modules ${ns}>
+  <module identifier="m1"><title>Module 1: Real Topic</title><workflow_state>active</workflow_state><position>1</position>
+    <items>
+      <item identifier="i1"><content_type>WikiPage</content_type><workflow_state>active</workflow_state><title>Module 1 Overview</title><identifierref>r_over</identifierref><position>1</position><indent>0</indent></item>
+      <item identifier="i2"><content_type>WikiPage</content_type><workflow_state>active</workflow_state><title>M1 Instructor Notes: Pacing</title><identifierref>r_notes</identifierref><position>2</position><indent>0</indent></item>
+      <item identifier="i3"><content_type>DiscussionTopic</content_type><workflow_state>active</workflow_state><title>M1 Discussion: What surprised you?</title><identifierref>r_disc</identifierref><position>3</position><indent>0</indent></item>
+    </items>
+  </module>
+</modules>`,
+    );
+    zip.file(
+      'imsmanifest.xml',
+      `<?xml version="1.0" encoding="UTF-8"?>
+<manifest identifier="m" xmlns="http://www.imsglobal.org/xsd/imsccv1p1/imscp_v1p1"><resources>
+  <resource identifier="r_over" type="webcontent" href="wiki_content/over.html"><file href="wiki_content/over.html"/></resource>
+  <resource identifier="r_notes" type="webcontent" href="wiki_content/notes.html"><file href="wiki_content/notes.html"/></resource>
+  <resource identifier="r_disc" type="imsdt_xmlv1p1"><file href="r_disc.xml"/></resource>
+</resources></manifest>`,
+    );
+    zip.file('wiki_content/over.html', '<html><body><p>Overview body</p></body></html>');
+    zip.file('wiki_content/notes.html', '<html><body><p>Note body</p></body></html>');
+    zip.file(
+      'r_disc.xml',
+      `<?xml version="1.0" encoding="UTF-8"?><topic xmlns="http://www.imsglobal.org/xsd/imsccv1p1/imsdt_v1p1"><title>M1 Discussion: What surprised you?</title><text texttype="text/html">&lt;p&gt;Share one surprising idea.&lt;/p&gt;</text></topic>`,
+    );
+
+    const t = await parseImsccTemplate({
+      file: await zip.generateAsync({ type: 'uint8array' }),
+      name: 'real-shape',
+    });
+
+    expect(t.modules[0].classification).toBe('example-pattern');
+    const ex = t.examplePatternContent!;
+    expect(ex.moduleOverviewHtml).toContain('Overview body');
+    expect(ex.instructorNotes[0].htmlContent).toContain('Note body');
+    expect(ex.discussion).toBeDefined();
+    expect(ex.discussion!.promptHtml).toContain('Share one surprising idea.');
+    expect(ex.discussion!.title).toBe('What surprised you?');
+  });
+});
+
diff --git a/tools/render-themed-artifacts.mjs b/tools/render-themed-artifacts.mjs
new file mode 100644
index 0000000..8f8405a
--- /dev/null
+++ b/tools/render-themed-artifacts.mjs
@@ -0,0 +1,65 @@
+/**
+ * Rebuild each example course's practice-quiz and weekly-challenge HTML in its
+ * CHAPTER theme (Terminal/Studio/Almanac/Press/Storybook/Notebook), so the
+ * downloadable reading + quiz + challenge all share one theme. Codex is the
+ * ClassBuild site chrome only — never a course output.
+ *
+ * Runs the SPA's own templates via Vite SSR (so the theme `?raw` CSS imports
+ * resolve). Reads quiz data from <cli>/output/<slug>/quizzes/NN_practice.md and
+ * challenge data from weekly-challenge/NN_challenge.json; overwrites the .html.
+ *
+ *   node tools/render-themed-artifacts.mjs [slug]
+ */
+import { createServer } from 'vite';
+import fs from 'node:fs/promises';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const HERE = path.dirname(fileURLToPath(import.meta.url));
+const CLI = path.resolve(HERE, '../../classbuild-cli');
+
+const COURSES = [
+  { slug: 'game-theory', theme: 'terminal' },
+  { slug: 'leadership-through-crisis', theme: 'studio' },
+  { slug: 'raising-a-puppy', theme: 'almanac' },
+  { slug: 'science-and-art-of-tea', theme: 'press' },
+  { slug: 'training-for-your-first-marathon', theme: 'storybook' },
+  { slug: 'understanding-your-sleep', theme: 'notebook' },
+];
+
+const only = process.argv.slice(2).find((a) => !a.startsWith('-'));
+const pad = (n) => String(n).padStart(2, '0');
+
+const vite = await createServer({ server: { middlewareMode: true }, appType: 'custom', logLevel: 'warn' });
+const { buildQuizHtml } = await vite.ssrLoadModule('/src/templates/quizTemplate.ts');
+const { buildWeeklyChallengeHtml } = await vite.ssrLoadModule('/src/templates/weeklyChallengeTemplate.ts');
+
+for (const c of COURSES) {
+  if (only && c.slug !== only) continue;
+  const out = path.join(CLI, 'output', c.slug);
+  const course = JSON.parse(await fs.readFile(path.join(out, 'course.json'), 'utf8'));
+  const courseTitle = course.syllabus.courseTitle;
+  const chTitle = (n) => course.syllabus.chapters.find((x) => x.number === n)?.title ?? `Chapter ${n}`;
+
+  let q = 0, w = 0;
+  const qDir = path.join(out, 'quizzes');
+  for (const f of (await fs.readdir(qDir)).filter((f) => /^\d+_practice\.md$/.test(f)).sort()) {
+    const num = parseInt(f, 10);
+    const data = await fs.readFile(path.join(qDir, f), 'utf8');
+    const html = buildQuizHtml(chTitle(num), data, courseTitle, c.theme);
+    await fs.writeFile(path.join(qDir, `${pad(num)}_practice.html`), html);
+    q++;
+  }
+  const wDir = path.join(out, 'weekly-challenge');
+  for (const f of (await fs.readdir(wDir)).filter((f) => /^\d+_challenge\.json$/.test(f)).sort()) {
+    const num = parseInt(f, 10);
+    const cdata = JSON.parse(await fs.readFile(path.join(wDir, f), 'utf8'));
+    const title = `Week ${num} Challenge — ${chTitle(num)}`;
+    const html = buildWeeklyChallengeHtml(title, cdata, courseTitle, c.theme);
+    await fs.writeFile(path.join(wDir, `${pad(num)}_challenge.html`), html);
+    w++;
+  }
+  console.log(`${c.slug.padEnd(34)} → ${c.theme}: ${q} quizzes, ${w} challenges`);
+}
+
+await vite.close();
diff --git a/tools/validate-imscc.py b/tools/validate-imscc.py
new file mode 100644
index 0000000..d620ebc
--- /dev/null
+++ b/tools/validate-imscc.py
@@ -0,0 +1,211 @@
+"""Offline structural validation of a Common Cartridge (.imscc) for Canvas import.
+
+Checks the things Canvas's importer is strict about: well-formed XML, manifest
+integrity (every referenced file exists, identifiers unique, item->resource
+links resolve), resource types, QTI shape, and Canvas-specific extras.
+
+Usage: python tools/validate-imscc.py path/to/course.imscc
+Exit code is 1 if any hard problem is found. This is a structural check only —
+it cannot prove Canvas will accept the package; do a real import for that.
+"""
+import sys
+import zipfile
+import re
+from collections import Counter
+from xml.etree import ElementTree as ET
+
+path = sys.argv[1]
+z = zipfile.ZipFile(path)
+names = z.namelist()
+nameset = set(names)
+problems, warnings, info = [], [], []
+
+def local(tag):
+    return tag.split('}', 1)[-1]
+
+# 1. Archive basics
+if 'imsmanifest.xml' not in nameset:
+    problems.append('imsmanifest.xml missing at archive root')
+bad = z.testzip()
+if bad:
+    problems.append(f'corrupt zip member: {bad}')
+dirs = [n for n in names if n.endswith('/')]
+backslash = [n for n in names if '\\' in n]
+if backslash:
+    problems.append(f'backslash paths in archive: {backslash[:3]}')
+dupes = [n for n, c in Counter(names).items() if c > 1]
+if dupes:
+    problems.append(f'duplicate archive entries: {dupes[:3]}')
+
+# 2. Every .xml/.html parses
+xml_ok = 0
+for n in names:
+    if n.endswith('.xml') or n.endswith('.qti'):
+        try:
+            ET.fromstring(z.read(n))
+            xml_ok += 1
+        except ET.ParseError as e:
+            problems.append(f'not well-formed XML: {n}: {e}')
+info.append(f'{xml_ok} XML files parse cleanly; {len(names)} entries total')
+
+# 3. Manifest integrity
+man = ET.fromstring(z.read('imsmanifest.xml'))
+ns = man.tag.split('}')[0].strip('{') if '}' in man.tag else ''
+info.append(f'manifest namespace: {ns}')
+if 'imscc' not in ns and 'imsglobal' not in ns:
+    warnings.append(f'unexpected manifest namespace: {ns}')
+
+ids = []
+resources = {}
+for el in man.iter():
+    t = local(el.tag)
+    if t == 'resource':
+        rid = el.get('identifier')
+        ids.append(rid)
+        resources[rid] = el
+    elif t in ('item', 'organization', 'manifest'):
+        if el.get('identifier'):
+            ids.append(el.get('identifier'))
+dup_ids = [i for i, c in Counter(ids).items() if c > 1]
+if dup_ids:
+    problems.append(f'duplicate identifiers in manifest: {dup_ids[:5]}')
+
+missing_files = []
+for rid, el in resources.items():
+    href = el.get('href')
+    if href and href not in nameset:
+        missing_files.append((rid, href))
+    for f in el:
+        if local(f.tag) == 'file':
+            fh = f.get('href')
+            if fh and fh not in nameset:
+                missing_files.append((rid, fh))
+if missing_files:
+    problems.append(f'{len(missing_files)} manifest references to files not in the archive, e.g. {missing_files[:3]}')
+
+bad_refs = []
+items = 0
+for el in man.iter():
+    if local(el.tag) == 'item':
+        items += 1
+        ref = el.get('identifierref')
+        if ref and ref not in resources:
+            bad_refs.append(ref)
+if bad_refs:
+    problems.append(f'item identifierref pointing at unknown resources: {bad_refs[:5]}')
+info.append(f'{len(resources)} resources, {items} organization items')
+
+# files in archive that no resource claims (informational)
+claimed = set()
+for el in resources.values():
+    if el.get('href'):
+        claimed.add(el.get('href'))
+    for f in el:
+        if local(f.tag) == 'file':
+            claimed.add(f.get('href'))
+unclaimed = [n for n in names if not n.endswith('/') and n != 'imsmanifest.xml' and n not in claimed]
+if unclaimed:
+    warnings.append(f'{len(unclaimed)} archive files not claimed by any resource (Canvas ignores them): {unclaimed[:4]}')
+
+# 4. Resource types
+types = Counter(el.get('type') for el in resources.values())
+info.append('resource types: ' + ', '.join(f'{k} x{v}' for k, v in types.items()))
+known = re.compile(r'^(webcontent|imsdt_xmlv1p\d|imsqti_xmlv1p\d/imscc_xmlv1p\d/assessment|associatedcontent/imscc_xmlv1p\d/learning-application-resource|imsbasiclti_xmlv1p\d|imswl_xmlv1p\d|imsqti_xmlv1p\d/.*)$')
+for rid, el in resources.items():
+    if not known.match(el.get('type') or ''):
+        warnings.append(f'unrecognised resource type for {rid}: {el.get("type")}')
+
+# 5. QTI sanity
+qti = [n for n in names if n.endswith('.xml') and b'<questestinterop' in z.read(n)]
+for n in qti:
+    root = ET.fromstring(z.read(n))
+    q_items = [e for e in root.iter() if local(e.tag) == 'item']
+    if not q_items:
+        problems.append(f'QTI file with no items: {n}')
+    for it in q_items:
+        # every MC item needs a response_lid + at least one varequal in respcondition
+        if not any(local(e.tag) == 'response_lid' for e in it.iter()):
+            warnings.append(f'{n}: item {it.get("ident")} has no response_lid')
+        if not any(local(e.tag) == 'varequal' for e in it.iter()):
+            warnings.append(f'{n}: item {it.get("ident")} has no varequal (no correct answer wired)')
+info.append(f'{len(qti)} QTI assessment files')
+
+# 6. Canvas extras
+cs = [n for n in names if 'course_settings' in n]
+info.append(f'course_settings files: {len(cs)}')
+html_pages = [n for n in names if n.endswith('.html')]
+info.append(f'{len(html_pages)} html pages; discussion topics: {sum(1 for n in names if "discussion" in n.lower() and n.endswith(".xml"))}')
+big = [(n, z.getinfo(n).file_size) for n in names if z.getinfo(n).file_size > 5 * 1024 * 1024]
+if big:
+    warnings.append(f'large files (>5MB): {big}')
+# external http(s) refs inside html that will break offline
+ext = Counter()
+for n in html_pages:
+    for m in re.findall(rb'(?:src|href)=["\'](https?://[^"\']+)', z.read(n)):
+        ext[m.decode().split('/')[2]] += 1
+if ext:
+    warnings.append('external hosts referenced from pages (need internet in Canvas): ' + ', '.join(f'{h} x{c}' for h, c in ext.items()))
+
+# 7. Native-Canvas-format rules. A package carrying course_settings/canvas_export.txt
+# is read by Canvas's NATIVE importer, which ignores plain manifest content: modules
+# come from module_meta.xml, pages from wiki_content/, quizzes from non_cc_assessments/.
+# A cartridge that fails these still "imports" - it just silently drops the content.
+if 'course_settings/canvas_export.txt' in nameset:
+    info.append('native Canvas export marker present: applying native-format rules')
+    ids_all = set(resources)
+    if 'course_settings/module_meta.xml' not in nameset:
+        problems.append('native marker present but course_settings/module_meta.xml is missing: Canvas will create NO modules')
+    else:
+        mm = ET.fromstring(z.read('course_settings/module_meta.xml'))
+        mod_items = [e for e in mm.iter() if local(e.tag) == 'item']
+        org_ids = {e.get('identifier') for e in man.iter() if local(e.tag) == 'item'}
+        for it in mod_items:
+            ref = (next((c.text for c in it if local(c.tag) == 'identifierref'), None))
+            ctype = next((c.text for c in it if local(c.tag) == 'content_type'), None)
+            # Sub-headers have no resource, and external-URL / LTI items carry their
+            # target inline (their identifierref intentionally matches nothing) - Canvas's
+            # own exporter writes both. Only resource-backed item types must resolve.
+            if ctype in ('WikiPage', 'Quizzes::Quiz', 'DiscussionTopic', 'Attachment', 'Assignment') and ref not in ids_all:
+                problems.append(f'module_meta {ctype} item points at unknown resource {ref}')
+            if it.get('identifier') not in org_ids:
+                warnings.append(f'module_meta item {it.get("identifier")} is not in the manifest organization')
+            if ctype not in ('WikiPage', 'Quizzes::Quiz', 'DiscussionTopic', 'Attachment', 'Assignment', 'ExternalUrl', 'ContextExternalTool', 'ContextModuleSubHeader'):
+                warnings.append(f'unusual module item content_type {ctype}')
+        info.append(f'{len([e for e in mm.iter() if local(e.tag) == "module"])} modules, {len(mod_items)} module items in module_meta.xml')
+
+    for n in [n for n in names if n.startswith('wiki_content/') and n.endswith('.html')]:
+        body = z.read(n)
+        if n not in claimed:
+            problems.append(f'{n}: not listed in the manifest, but the native importer scans wiki_content/ directly: it would be imported as a stray page')
+        if b'name="identifier"' not in body:
+            problems.append(f'{n}: wiki page has no <meta name="identifier">: Canvas cannot match it')
+        if re.search(rb'<script|<style', body, re.I):
+            warnings.append(f'{n}: <script>/<style> will be stripped by Canvas')
+
+    for rid, el in resources.items():
+        if el.get('type') == 'imsqti_xmlv1p2/imscc_xmlv1p1/assessment':
+            qfiles = [f.get('href') for f in el if local(f.tag) == 'file']
+            deps = [d.get('identifierref') for d in el if local(d.tag) == 'dependency']
+            meta_res = resources.get(deps[0]) if deps else None
+            if meta_res is None:
+                problems.append(f'quiz resource {rid} has no assessment_meta dependency')
+                continue
+            mfiles = [f.get('href') for f in meta_res if local(f.tag) == 'file']
+            if not any(f.startswith('non_cc_assessments/') and f.endswith('.xml.qti') for f in mfiles):
+                problems.append(f'quiz {rid}: native importer needs non_cc_assessments/<id>.xml.qti in its meta resource - quiz would import with no questions')
+            if not any(f.endswith('assessment_meta.xml') for f in mfiles):
+                problems.append(f'quiz {rid}: meta resource lacks assessment_meta.xml')
+    for n in [n for n in names if n.startswith('non_cc_assessments/') and n.endswith('.xml.qti')]:
+        t = z.read(n)
+        if b'<item ' in t and b'question_type' not in t:
+            problems.append(f'{n}: items lack the Canvas question_type metadata')
+
+print(f'== {path}')
+for i in info:
+    print('  info   ', i)
+for w in warnings:
+    print('  WARN   ', w)
+for p in problems:
+    print('  PROBLEM', p)
+print('RESULT:', 'FAIL' if problems else 'PASS', f'({len(problems)} problems, {len(warnings)} warnings)')
+sys.exit(1 if problems else 0)