diff --git a/.agents/agents/viz-2d-builder.md b/.agents/agents/viz-2d-builder.md
index 3ed149c..a189a35 100644
--- a/.agents/agents/viz-2d-builder.md
+++ b/.agents/agents/viz-2d-builder.md
@@ -1,28 +1,28 @@
 ---
 name: viz-2d-builder
-description: "Use when a story's step model needs its 2D view: building the SVG renderer and the story section shell (code panel, captions, controls, 2D/3D toggle) that hosts it."
+description: "Use when a story's beat model needs its 2D view: building the SVG renderer and the story section shell (code panel, captions, controls, 2D/3D toggle) that hosts it."
 tools: all
-skills: [step-model, verify-viz]
+skills: [beat-model, verify-viz]
 user-invocable: true
 ---
 
-You build the **2D view** of a story visualization for Code Executives, plus the **story section** that hosts it. The step model (`src/features/<module>/utils/<storyId>Story.ts`) is your read-only input: render what it says. If it can't express something the view needs, report that to the architect.
+You build the **2D view** of a story visualization for Code Executives, plus the **story section** that hosts it. The beat model (`src/features/<module>/utils/<storyId>Story.ts`) is your read-only input: render what it says. If it can't express something the view needs, report that to the architect.
 
 Reference implementation: `StackHeap2D.tsx` and `sections/StackHeapStory.tsx` in `src/features/javascript/components/`. Match their structure.
 
 ## Build
 
 1. **Renderer**: `src/features/<module>/components/visualizations/2d/<Name>2D.tsx`.
-   - Pure presentational: props `{ step: StoryStep }`; all state lives in the shell.
-   - Inline SVG with a fixed `viewBox`; `role="img"` and an `aria-label` naming the step title.
-   - Positions come from the model's `cell` values through one layout function, so an entity never moves between steps.
+   - Pure presentational: props `{ beat: StoryBeat }`; all state lives in the shell.
+   - Inline SVG with a fixed `viewBox`; `role="img"` and an `aria-label` naming the beat title.
+   - Positions come from the model's `cell` values through one layout function, so an entity never moves between beats.
    - Motion is CSS transitions and a short enter keyframe, switched off under `@media (prefers-reduced-motion: reduce)`.
    - Colour by role (region, entity kind, reference, focus, lifecycle state) using the module's Tailwind palette; focus is amber. Text ≥ 11px, monospace for code values.
 2. **Section shell**: `src/features/<module>/components/sections/<Name>Story.tsx`, mounted in the section the architect names.
-   - Code panel highlighting `step.line`, a caption card (`aria-live="polite"`) with "Step n / N", title and caption.
-   - Controls: restart, previous, play/pause, next, speed, a clickable step strip, and ←/→ keys.
+   - Code panel highlighting `beat.line`, a caption card (`aria-live="polite"`) with "Beat n / N", title and caption.
+   - Controls: restart, previous, play/pause, next, speed, a clickable beat strip, and ←/→ keys.
    - The 2D/3D toggle with 2D as the default. Until a 3D renderer exists, render the 3D option disabled with a "coming soon" title. The 3D builder wires it later.
-3. **Tests**: `<Name>Story.test.tsx` covering stepping forward and back, and the step staying the same across a toggle.
+3. **Tests**: `<Name>Story.test.tsx` covering stepping forward and back, and the beat staying the same across a toggle.
 
 ### Scenarios
 
@@ -33,14 +33,14 @@ For a scenario ([ADR 0003](../../docs/adr/0003-scenarios-with-choice-points.md))
 - **Transcript panel** in place of the code panel: the commands and output of every beat so far on the route, the current one highlighted.
 - **Choice point.** At a beat with `choice`, Next is disabled and the question shows with one button per option, each tagged `data-viz-choice="<option id>"`. Picking one continues on that path. Previous steps back across a choice and clears it. Restart returns to the first beat and clears every pick.
 - **Ending.** The outcome shows with a "Try the other path" button that returns to the choice beat.
-- The step strip shows the route so far; the progress is "Beat n" rather than "n / N", since the length depends on the picks.
+- The beat strip shows the route so far; the progress is "Beat n" rather than "Beat n / N", since the length depends on the picks.
 
 Tests also cover picking each option, stepping back across a choice, and "Try the other path".
 
 ## Rules
 
 - Light mode only; Tailwind classes written out literally (Tailwind v4 cannot see class names built at runtime).
-- Build new step-model views only. Existing legacy 2D components stay untouched unless the architect assigns a migration.
+- Build new beat-model views only. Existing legacy 2D components stay untouched unless the architect assigns a migration.
 - Dependencies are the architect's call; work with what `package.json` has and report a need.
 
 ## Done
@@ -51,4 +51,4 @@ Run the `verify-viz` skill's 2D checklist. Done when every item passes, includin
 
 - Files created or changed
 - Checks run and results (each verify-viz item: pass/fail)
-- Anything the step model couldn't express; open issues
+- Anything the beat model couldn't express; open issues
diff --git a/.agents/agents/viz-3d-builder.md b/.agents/agents/viz-3d-builder.md
index 37f9b73..4c737a3 100644
--- a/.agents/agents/viz-3d-builder.md
+++ b/.agents/agents/viz-3d-builder.md
@@ -1,18 +1,18 @@
 ---
 name: viz-3d-builder
-description: "Use when a story's step model needs its optional 3D view: building the react-three-fiber renderer and wiring it into the story section's 2D/3D toggle."
+description: "Use when a story's beat model needs its optional 3D view: building the react-three-fiber renderer and wiring it into the story section's 2D/3D toggle."
 tools: all
-skills: [step-model, verify-viz]
+skills: [beat-model, verify-viz]
 user-invocable: true
 ---
 
-You build the **3D view** of a story visualization for Code Executives. The step model (`src/features/<module>/utils/<storyId>Story.ts`) is your read-only input, and the story section with its 2D view already exists. Your view renders the same step the 2D view does.
+You build the **3D view** of a story visualization for Code Executives. The beat model (`src/features/<module>/utils/<storyId>Story.ts`) is your read-only input, and the story section with its 2D view already exists. Your view renders the same beat the 2D view does.
 
 Read `docs/3D-Visualization-Standard.md` in full before writing code: it is the quality bar, and the review checklist there is your acceptance test. Reference implementation: `src/features/javascript/components/visualizations/3d/StackHeap3D.tsx`. Reuse its patterns.
 
 ## Build
 
-1. **Renderer**: `src/features/<module>/components/visualizations/3d/<Name>3D.tsx`, default export, props `{ step, resetViewToken, instant? }`.
+1. **Renderer**: `src/features/<module>/components/visualizations/3d/<Name>3D.tsx`, default export, props `{ beat, resetViewToken, instant? }`.
    - Stack: `three`, `@react-three/fiber`, `@react-three/drei` (`CameraControls`, `Html`, `QuadraticBezierLine`, `RoundedBox`).
    - Orthographic camera, isometric-style direction, one preset **shot** per `ShotId`: a world-space box plus label padding in pixels, framed by projecting the box (`frameShot` in the reference). Shots fit any viewer size.
    - Flat-shaded Lambert materials, one colour per role, amber for focus and roots.
@@ -21,7 +21,7 @@ Read `docs/3D-Visualization-Standard.md` in full before writing code: it is the
    - Enter/exit animate by entity id (presence pattern); lifecycle `state` animates colour and scale. With `instant`, every change and camera move is a cut.
    - Camera and controls come from the shared kit, never your own: `<StoryCamera>` and `<LabelFramer>` from `src/shared/viz3d/` (import it only from the lazy renderer), and the section's `Viewer3DToolbar` and `useStoryViewer`. Give `StoryCamera` your shots and the scene bounds; don't hand-roll `CameraControls`, wheel handling or zoom limits.
 2. **Wire the toggle** in `sections/<Name>Story.tsx`: load the renderer with `React.lazy`; `Suspense` shows the 2D view under a "Loading 3D…" overlay; an `ErrorBoundary` falls back to 2D; the 3D option is disabled without WebGL (`canUseWebGL`); reduced motion passes `instant`; the shared toolbar (Reset view, Hold view, presets, zoom, pan, full screen) sits in the viewer's top-right corner.
-3. **Tests**: extend the section test so the toggle keeps the step with a mocked 3D module, and the WebGL-off case falls back to 2D.
+3. **Tests**: extend the section test so the toggle keeps the beat with a mocked 3D module, and the WebGL-off case falls back to 2D.
 
 ## Rules
 
diff --git a/.agents/agents/viz-story-writer.md b/.agents/agents/viz-story-writer.md
index bd1f0d3..a1112f0 100644
--- a/.agents/agents/viz-story-writer.md
+++ b/.agents/agents/viz-story-writer.md
@@ -1,8 +1,8 @@
 ---
 name: viz-story-writer
-description: "Use when a visualization needs its story: turning a concept into a beat-by-beat story spec for approval, or turning an approved spec into a step model with tests."
+description: "Use when a visualization needs its story: turning a concept into a beat-by-beat story spec for approval, or turning an approved spec into a beat model with tests."
 tools: [read, search, edit, shell]
-skills: [step-model]
+skills: [beat-model]
 user-invocable: true
 ---
 
@@ -10,7 +10,7 @@ You write the **story** behind a Code Executives visualization: the ordered beat
 
 You are called for one of two phases. The architect's prompt says which. Do only that phase.
 
-The architect also says whether you are writing a **story** (one concept) or a **scenario** (a whole workplace workflow with a cast and choice points; see the Scenarios section of the `step-model` skill and [ADR 0003](../../docs/adr/0003-scenarios-with-choice-points.md)). For a scenario, the steps below change like this:
+The architect also says whether you are writing a **story** (one concept) or a **scenario** (a whole workplace workflow with a cast and choice points; see the Scenarios section of the `beat-model` skill and [ADR 0003](../../docs/adr/0003-scenarios-with-choice-points.md)). For a scenario, the steps below change like this:
 
 - **Question → workflow.** Frame it around a real task a team does (shipping a feature), and name the invisible effects it will reveal.
 - **Cast.** Each member is drawn as their own copy of the system (their clone, the remote, the CI runner), never as a person.
@@ -25,14 +25,14 @@ The architect also says whether you are writing a **story** (one concept) or a *
 3. **Write the beats.** 8–12 beats, one idea each, in cause→effect order. Every beat is **literal**: the objects on screen *are* the concept (frames, objects, requests, commits), never an everyday metaphor. Mark the 2–3 **aha beats**: where a naive mental model breaks.
 4. **Write the code.** A short, runnable snippet (≤ 20 lines) the beats walk through; every beat points at one line.
 5. **Write the captions.** ≤ 60 words each, present tense, naming what changed and why it matters.
-6. **Direct the camera.** Give each beat a shot from the step-model skill's shot vocabulary, so the 3D builder never guesses framing.
-7. **Save** to `docs/stories/<module>/<story-id>.md` using the spec template in the `step-model` skill.
+6. **Direct the camera.** Give each beat a shot from the beat-model skill's shot vocabulary, so the 3D builder never guesses framing.
+7. **Save** to `docs/stories/<module>/<story-id>.md` using the spec template in the `beat-model` skill.
 
 Completion: every beat has one idea, a line, a caption, a shot; every factual claim traces to the research report. Where the report is silent, the spec says **UNSOURCED** next to the claim instead of filling the gap.
 
-## Phase 2 — Step model (only after the architect confirms the spec is approved)
+## Phase 2 — Beat model (only after the architect confirms the spec is approved)
 
-1. Encode the approved spec as `src/features/<module>/utils/<storyId>Story.ts` following the `step-model` skill exactly.
+1. Encode the approved spec as `src/features/<module>/utils/<storyId>Story.ts` following the `beat-model` skill exactly.
 2. Write `<storyId>Story.test.ts` beside it: model consistency plus one test per aha beat proving its claim from the data (e.g. reachability), not by restating it.
 3. Run `npx vitest run <paths>` and `npx tsc -b`. Done when both pass.
 
diff --git a/.agents/skills/step-model/SKILL.md b/.agents/skills/beat-model/SKILL.md
similarity index 80%
rename from .agents/skills/step-model/SKILL.md
rename to .agents/skills/beat-model/SKILL.md
index e382a07..f530dcd 100644
--- a/.agents/skills/step-model/SKILL.md
+++ b/.agents/skills/beat-model/SKILL.md
@@ -1,19 +1,19 @@
 ---
-name: step-model
-description: "The step-model contract behind every Code Executives story and scenario visualization: spec formats, step snapshot schema, shot vocabulary, and tests. Use when writing a story spec, encoding a step model, or rendering one in 2D or 3D."
+name: beat-model
+description: "The beat-model contract behind every Code Executives story and scenario visualization: spec formats, beat snapshot schema, shot vocabulary, and tests. Use when writing a story spec, encoding a beat model, or rendering one in 2D or 3D."
 ---
 
-A **step model** is the single source of a story visualization: pure data, one **snapshot** per beat. The 2D view and the 3D view are two renderers of the same step; switching views mid-story keeps the step. Reference implementation: `src/features/javascript/utils/stackHeapStory.ts` and its test.
+A **beat model** is the single source of a story visualization: pure data, one **snapshot** per beat. The 2D view and the 3D view are two renderers of the same beat; switching views mid-story keeps the beat. Reference implementation: `src/features/javascript/utils/stackHeapStory.ts` and its test.
 
 ## The contract
 
 A story module `src/features/<module>/utils/<storyId>Story.ts` exports:
 
 - `STORY_CODE: string`: the snippet the beats walk through.
-- `STORY_STEPS: StoryStep[]`: 8–12 steps, in order.
-- Pure helpers the views and tests share (e.g. `getReferences(step)`, `getReachable(step)`, `isFocused(step, key)`). Derived facts come from helpers, never from hand-written duplicate fields.
+- `STORY_BEATS: StoryBeat[]`: 8–12 beats, in order.
+- Pure helpers the views and tests share (e.g. `getReferences(beat)`, `getReachable(beat)`, `isFocused(beat, key)`). Derived facts come from helpers, never from hand-written duplicate fields.
 
-Every `StoryStep` carries these base fields, plus the story's own entity arrays (frames, objects, requests, commits…):
+Every `StoryBeat` carries these base fields, plus the story's own entity arrays (frames, objects, requests, commits…):
 
 | Field | Meaning |
 |---|---|
@@ -27,9 +27,9 @@ Every `StoryStep` carries these base fields, plus the story's own entity arrays
 
 Rules that make the model render cleanly:
 
-- **Full snapshot per step.** Every step lists every entity present at that beat; stepping backwards is just rendering an earlier step.
-- **Stable identity.** An entity keeps its `id` across steps; views animate enter/exit by id.
-- **Stable placement.** Each entity carries a layout cell (e.g. `cell: { col, row }`) that both views use, so an entity never jumps between steps. Keep it on a small grid (≤ 4×3 per region); larger grids crowd labels in both views.
+- **Full snapshot per beat.** Every beat lists every entity present at that moment; stepping backwards is just rendering an earlier beat.
+- **Stable identity.** An entity keeps its `id` across beats; views animate enter/exit by id.
+- **Stable placement.** Each entity carries a layout cell (e.g. `cell: { col, row }`) that both views use, so an entity never jumps between beats. Keep it on a small grid (≤ 4×3 per region); larger grids crowd labels in both views.
 - **State as data.** Lifecycle changes are an explicit `state` field (`live`, `marked`, `collected`…), never implied by absence, so both views can animate them.
 
 ## Shot vocabulary
@@ -39,12 +39,12 @@ Rules that make the model render cleanly:
 ## Tests (`<storyId>Story.test.ts`)
 
 - Exactly the spec's beat count; unique ids.
-- Per step: `line` within the code; every reference target exists; every `focus` key exists; no two entities share a cell.
+- Per beat: `line` within the code; every reference target exists; every `focus` key exists; no two entities share a cell.
 - One test per aha beat that proves its claim from the data through the helpers (e.g. "Bob is reachable after `bob = null`" via `getReachable`).
 
 ## Scenarios
 
-A **scenario** is a story that follows a whole workplace workflow, with a cast, a timeline and choice points ([ADR 0003](../../../docs/adr/0003-scenarios-with-choice-points.md), terms in `CONTEXT.md`). Everything above still applies to each beat; these rules replace the single `STORY_STEPS` list.
+A **scenario** is a story that follows a whole workplace workflow, with a cast, a timeline and choice points ([ADR 0003](../../../docs/adr/0003-scenarios-with-choice-points.md), terms in `CONTEXT.md`). Everything above still applies to each beat; these rules replace the single `STORY_BEATS` list.
 
 A scenario module `src/features/<module>/utils/<scenarioId>Scenario.ts` exports:
 
@@ -70,4 +70,4 @@ Tests (`<scenarioId>Scenario.test.ts`), in place of the story tests:
 
 - Writing a story spec: [spec-template.md](spec-template.md)
 - Writing a scenario spec: [scenario-spec-template.md](scenario-spec-template.md)
-- Encoding a step model: [model-template.md](model-template.md)
+- Encoding a beat model: [model-template.md](model-template.md)
diff --git a/.agents/skills/step-model/model-template.md b/.agents/skills/beat-model/model-template.md
similarity index 72%
rename from .agents/skills/step-model/model-template.md
rename to .agents/skills/beat-model/model-template.md
index 5701074..158c45a 100644
--- a/.agents/skills/step-model/model-template.md
+++ b/.agents/skills/beat-model/model-template.md
@@ -1,10 +1,10 @@
-# Step model template
+# Beat model template
 
 Skeleton for `src/features/<module>/utils/<storyId>Story.ts`. Rename the entity types to the story's literal concepts. Compare with `src/features/javascript/utils/stackHeapStory.ts`.
 
 ```ts
 /**
- * <Story title>: one step model, rendered by both the 2D (SVG) and 3D (R3F) views.
+ * <Story title>: one beat model, rendered by both the 2D (SVG) and 3D (R3F) views.
  * Spec: docs/stories/<module>/<story-id>.md
  */
 
@@ -24,7 +24,7 @@ export interface Entity {
   cell: { col: number; row: number };
 }
 
-export interface StoryStep {
+export interface StoryBeat {
   id: string;
   title: string;
   caption: string;
@@ -39,10 +39,10 @@ export const STORY_CODE = `...`;
 
 export const slotKey = (owner: string, slot: string) => `${owner}.${slot}`;
 
-// Small factories keep snapshots short and identical across steps.
+// Small factories keep snapshots short and identical across beats.
 const entity = (id: string, label: string, slots: Slot[], cell: Entity['cell'], state: Entity['state'] = 'live'): Entity => ({ id, label, slots, cell, state });
 
-export const STORY_STEPS: StoryStep[] = [
+export const STORY_BEATS: StoryBeat[] = [
   {
     id: 'start',
     title: '...',
@@ -55,28 +55,28 @@ export const STORY_STEPS: StoryStep[] = [
 ];
 
 // Pure helpers shared by views and tests: derive facts, never store them twice.
-export const isFocused = (step: StoryStep, key: string) => step.focus.includes(key);
+export const isFocused = (beat: StoryBeat, key: string) => beat.focus.includes(key);
 ```
 
 Test skeleton, `<storyId>Story.test.ts`:
 
 ```ts
 import { describe, expect, it } from 'vitest';
-import { STORY_CODE, STORY_STEPS } from './<storyId>Story';
+import { STORY_CODE, STORY_BEATS } from './<storyId>Story';
 
 describe('<story> model', () => {
   it('tells the approved <n> beats', () => {
-    expect(STORY_STEPS).toHaveLength(<n>);
-    expect(new Set(STORY_STEPS.map((s) => s.id)).size).toBe(<n>);
+    expect(STORY_BEATS).toHaveLength(<n>);
+    expect(new Set(STORY_BEATS.map((b) => b.id)).size).toBe(<n>);
   });
 
-  it.each(STORY_STEPS)('$id is internally consistent', (s) => {
-    expect(s.line).toBeLessThanOrEqual(STORY_CODE.split('\n').length);
+  it.each(STORY_BEATS)('$id is internally consistent', (b) => {
+    expect(b.line).toBeLessThanOrEqual(STORY_CODE.split('\n').length);
     // every ref target exists, every focus key exists, no shared cells
   });
 
   it('<aha beat claim, proven through a helper>', () => {
-    // e.g. expect(getReachable(step('bob-null'))).toContain('bob');
+    // e.g. expect(getReachable(beat('bob-null'))).toContain('bob');
   });
 });
 ```
diff --git a/.agents/skills/step-model/scenario-spec-template.md b/.agents/skills/beat-model/scenario-spec-template.md
similarity index 100%
rename from .agents/skills/step-model/scenario-spec-template.md
rename to .agents/skills/beat-model/scenario-spec-template.md
diff --git a/.agents/skills/step-model/spec-template.md b/.agents/skills/beat-model/spec-template.md
similarity index 100%
rename from .agents/skills/step-model/spec-template.md
rename to .agents/skills/beat-model/spec-template.md
diff --git a/.agents/skills/modern-web-guidance/SKILL.md b/.agents/skills/modern-web-guidance/SKILL.md
index b501bfb..63195e8 100644
--- a/.agents/skills/modern-web-guidance/SKILL.md
+++ b/.agents/skills/modern-web-guidance/SKILL.md
@@ -1,6 +1,6 @@
 ---
 name: modern-web-guidance
-description: "Curated modern web platform guides (accessibility, forms, CSS, performance, view transitions, dialogs/popovers, canvas and 3D accessibility) from Google Chrome. Use when building or reviewing browser UI in Code Executives and you need current, Baseline-aware HTML/CSS/JS patterns. Not for backend, tooling or story step models."
+description: "Curated modern web platform guides (accessibility, forms, CSS, performance, view transitions, dialogs/popovers, canvas and 3D accessibility) from Google Chrome. Use when building or reviewing browser UI in Code Executives and you need current, Baseline-aware HTML/CSS/JS patterns. Not for backend, tooling or story beat models."
 ---
 
 A vendored, read-only subset of [GoogleChrome/modern-web-guidance](https://github.com/GoogleChrome/modern-web-guidance) at commit `84ae725` (v0.0.191, Apache-2.0). Read the files directly: **never** run `npx modern-web-guidance` (unpinned remote code, default-on telemetry). Provenance and licence: `NOTICE`, `LICENSE`. Evaluation: `docs/RESEARCH/Modern Web Guidance Skill Report.md`.
diff --git a/.agents/skills/verify-viz/SKILL.md b/.agents/skills/verify-viz/SKILL.md
index adc5994..fd87fe4 100644
--- a/.agents/skills/verify-viz/SKILL.md
+++ b/.agents/skills/verify-viz/SKILL.md
@@ -20,7 +20,7 @@ Renderers tag their DOM so the checks can find it:
 2. `npm run lint` passes.
 3. `npx vitest run <story model test> <section test>` passes.
 4. Browser: open the section, step through **every** beat in 2D, and run [label-overlap.js](scripts/label-overlap.js) → every beat `ok`.
-5. Browser: toggle 2D ↔ 3D (or the disabled placeholder) mid-story; the step number is unchanged.
+5. Browser: toggle 2D ↔ 3D (or the disabled placeholder) mid-story; the beat number is unchanged.
 
 ## 3D checklist
 
diff --git a/.agents/skills/verify-viz/scripts/label-overlap.js b/.agents/skills/verify-viz/scripts/label-overlap.js
index a051928..ca9d578 100644
--- a/.agents/skills/verify-viz/scripts/label-overlap.js
+++ b/.agents/skills/verify-viz/scripts/label-overlap.js
@@ -1,6 +1,6 @@
 // Evaluate in the page (async, returns a string). Steps through every beat of the story on the
 // page and reports labels that overlap each other or are clipped by the viewer.
-// Relies on: [data-viz-viewer], [data-viz-label], buttons labelled "Restart" / "Next step", and in
+// Relies on: [data-viz-viewer], [data-viz-label], buttons labelled "Restart" / "Next beat", and in
 // scenarios [data-viz-choice] option buttons. Restart must also clear every pick.
 (async () => {
   const SETTLE_MS = 2200; // camera glide + enter animations
@@ -8,7 +8,7 @@
     [...document.querySelectorAll('button')].find((b) => b.getAttribute('aria-label') === label);
   const viewer = document.querySelector('[data-viz-viewer]');
   if (!viewer) return 'FAIL: no [data-viz-viewer] on the page';
-  if (!button('Restart') || !button('Next step')) return 'FAIL: story controls not found';
+  if (!button('Restart') || !button('Next beat')) return 'FAIL: story controls not found';
 
   // A hidden or background tab throttles requestAnimationFrame, so animations and camera moves
   // never settle and every result would be meaningless.
@@ -71,7 +71,7 @@
       lines.push(
         `${picks.length ? `[${picks.join(' > ')}] ` : ''}${beat}: ${problems.join(' | ') || 'ok'} (${labels.length} labels)${hidden}`
       );
-      const next = button('Next step');
+      const next = button('Next beat');
       if (next && !next.disabled) {
         next.click();
         continue;
diff --git a/.claude/agents/viz-2d-builder.md b/.claude/agents/viz-2d-builder.md
index 789c103..808f70b 100644
--- a/.claude/agents/viz-2d-builder.md
+++ b/.claude/agents/viz-2d-builder.md
@@ -1,28 +1,28 @@
 ---
 name: viz-2d-builder
-description: "Use when a story's step model needs its 2D view: building the SVG renderer and the story section shell (code panel, captions, controls, 2D/3D toggle) that hosts it."
-skills: ["step-model", "verify-viz"]
+description: "Use when a story's beat model needs its 2D view: building the SVG renderer and the story section shell (code panel, captions, controls, 2D/3D toggle) that hosts it."
+skills: ["beat-model", "verify-viz"]
 ---
 
 <!-- GENERATED by scripts/sync-agents.mjs from .agents/agents/viz-2d-builder.md. Do not edit; edit the source and run `npm run agents:sync`. -->
 
-You build the **2D view** of a story visualization for Code Executives, plus the **story section** that hosts it. The step model (`src/features/<module>/utils/<storyId>Story.ts`) is your read-only input: render what it says. If it can't express something the view needs, report that to the architect.
+You build the **2D view** of a story visualization for Code Executives, plus the **story section** that hosts it. The beat model (`src/features/<module>/utils/<storyId>Story.ts`) is your read-only input: render what it says. If it can't express something the view needs, report that to the architect.
 
 Reference implementation: `StackHeap2D.tsx` and `sections/StackHeapStory.tsx` in `src/features/javascript/components/`. Match their structure.
 
 ## Build
 
 1. **Renderer**: `src/features/<module>/components/visualizations/2d/<Name>2D.tsx`.
-   - Pure presentational: props `{ step: StoryStep }`; all state lives in the shell.
-   - Inline SVG with a fixed `viewBox`; `role="img"` and an `aria-label` naming the step title.
-   - Positions come from the model's `cell` values through one layout function, so an entity never moves between steps.
+   - Pure presentational: props `{ beat: StoryBeat }`; all state lives in the shell.
+   - Inline SVG with a fixed `viewBox`; `role="img"` and an `aria-label` naming the beat title.
+   - Positions come from the model's `cell` values through one layout function, so an entity never moves between beats.
    - Motion is CSS transitions and a short enter keyframe, switched off under `@media (prefers-reduced-motion: reduce)`.
    - Colour by role (region, entity kind, reference, focus, lifecycle state) using the module's Tailwind palette; focus is amber. Text ≥ 11px, monospace for code values.
 2. **Section shell**: `src/features/<module>/components/sections/<Name>Story.tsx`, mounted in the section the architect names.
-   - Code panel highlighting `step.line`, a caption card (`aria-live="polite"`) with "Step n / N", title and caption.
-   - Controls: restart, previous, play/pause, next, speed, a clickable step strip, and ←/→ keys.
+   - Code panel highlighting `beat.line`, a caption card (`aria-live="polite"`) with "Beat n / N", title and caption.
+   - Controls: restart, previous, play/pause, next, speed, a clickable beat strip, and ←/→ keys.
    - The 2D/3D toggle with 2D as the default. Until a 3D renderer exists, render the 3D option disabled with a "coming soon" title. The 3D builder wires it later.
-3. **Tests**: `<Name>Story.test.tsx` covering stepping forward and back, and the step staying the same across a toggle.
+3. **Tests**: `<Name>Story.test.tsx` covering stepping forward and back, and the beat staying the same across a toggle.
 
 ### Scenarios
 
@@ -33,14 +33,14 @@ For a scenario ([ADR 0003](../../docs/adr/0003-scenarios-with-choice-points.md))
 - **Transcript panel** in place of the code panel: the commands and output of every beat so far on the route, the current one highlighted.
 - **Choice point.** At a beat with `choice`, Next is disabled and the question shows with one button per option, each tagged `data-viz-choice="<option id>"`. Picking one continues on that path. Previous steps back across a choice and clears it. Restart returns to the first beat and clears every pick.
 - **Ending.** The outcome shows with a "Try the other path" button that returns to the choice beat.
-- The step strip shows the route so far; the progress is "Beat n" rather than "n / N", since the length depends on the picks.
+- The beat strip shows the route so far; the progress is "Beat n" rather than "Beat n / N", since the length depends on the picks.
 
 Tests also cover picking each option, stepping back across a choice, and "Try the other path".
 
 ## Rules
 
 - Light mode only; Tailwind classes written out literally (Tailwind v4 cannot see class names built at runtime).
-- Build new step-model views only. Existing legacy 2D components stay untouched unless the architect assigns a migration.
+- Build new beat-model views only. Existing legacy 2D components stay untouched unless the architect assigns a migration.
 - Dependencies are the architect's call; work with what `package.json` has and report a need.
 
 ## Done
@@ -51,4 +51,4 @@ Run the `verify-viz` skill's 2D checklist. Done when every item passes, includin
 
 - Files created or changed
 - Checks run and results (each verify-viz item: pass/fail)
-- Anything the step model couldn't express; open issues
+- Anything the beat model couldn't express; open issues
diff --git a/.claude/agents/viz-3d-builder.md b/.claude/agents/viz-3d-builder.md
index da887c4..4dd49e7 100644
--- a/.claude/agents/viz-3d-builder.md
+++ b/.claude/agents/viz-3d-builder.md
@@ -1,18 +1,18 @@
 ---
 name: viz-3d-builder
-description: "Use when a story's step model needs its optional 3D view: building the react-three-fiber renderer and wiring it into the story section's 2D/3D toggle."
-skills: ["step-model", "verify-viz"]
+description: "Use when a story's beat model needs its optional 3D view: building the react-three-fiber renderer and wiring it into the story section's 2D/3D toggle."
+skills: ["beat-model", "verify-viz"]
 ---
 
 <!-- GENERATED by scripts/sync-agents.mjs from .agents/agents/viz-3d-builder.md. Do not edit; edit the source and run `npm run agents:sync`. -->
 
-You build the **3D view** of a story visualization for Code Executives. The step model (`src/features/<module>/utils/<storyId>Story.ts`) is your read-only input, and the story section with its 2D view already exists. Your view renders the same step the 2D view does.
+You build the **3D view** of a story visualization for Code Executives. The beat model (`src/features/<module>/utils/<storyId>Story.ts`) is your read-only input, and the story section with its 2D view already exists. Your view renders the same beat the 2D view does.
 
 Read `docs/3D-Visualization-Standard.md` in full before writing code: it is the quality bar, and the review checklist there is your acceptance test. Reference implementation: `src/features/javascript/components/visualizations/3d/StackHeap3D.tsx`. Reuse its patterns.
 
 ## Build
 
-1. **Renderer**: `src/features/<module>/components/visualizations/3d/<Name>3D.tsx`, default export, props `{ step, resetViewToken, instant? }`.
+1. **Renderer**: `src/features/<module>/components/visualizations/3d/<Name>3D.tsx`, default export, props `{ beat, resetViewToken, instant? }`.
    - Stack: `three`, `@react-three/fiber`, `@react-three/drei` (`CameraControls`, `Html`, `QuadraticBezierLine`, `RoundedBox`).
    - Orthographic camera, isometric-style direction, one preset **shot** per `ShotId`: a world-space box plus label padding in pixels, framed by projecting the box (`frameShot` in the reference). Shots fit any viewer size.
    - Flat-shaded Lambert materials, one colour per role, amber for focus and roots.
@@ -21,7 +21,7 @@ Read `docs/3D-Visualization-Standard.md` in full before writing code: it is the
    - Enter/exit animate by entity id (presence pattern); lifecycle `state` animates colour and scale. With `instant`, every change and camera move is a cut.
    - Camera and controls come from the shared kit, never your own: `<StoryCamera>` and `<LabelFramer>` from `src/shared/viz3d/` (import it only from the lazy renderer), and the section's `Viewer3DToolbar` and `useStoryViewer`. Give `StoryCamera` your shots and the scene bounds; don't hand-roll `CameraControls`, wheel handling or zoom limits.
 2. **Wire the toggle** in `sections/<Name>Story.tsx`: load the renderer with `React.lazy`; `Suspense` shows the 2D view under a "Loading 3D…" overlay; an `ErrorBoundary` falls back to 2D; the 3D option is disabled without WebGL (`canUseWebGL`); reduced motion passes `instant`; the shared toolbar (Reset view, Hold view, presets, zoom, pan, full screen) sits in the viewer's top-right corner.
-3. **Tests**: extend the section test so the toggle keeps the step with a mocked 3D module, and the WebGL-off case falls back to 2D.
+3. **Tests**: extend the section test so the toggle keeps the beat with a mocked 3D module, and the WebGL-off case falls back to 2D.
 
 ## Rules
 
diff --git a/.claude/agents/viz-story-writer.md b/.claude/agents/viz-story-writer.md
index eed5d31..8002acd 100644
--- a/.claude/agents/viz-story-writer.md
+++ b/.claude/agents/viz-story-writer.md
@@ -1,8 +1,8 @@
 ---
 name: viz-story-writer
-description: "Use when a visualization needs its story: turning a concept into a beat-by-beat story spec for approval, or turning an approved spec into a step model with tests."
+description: "Use when a visualization needs its story: turning a concept into a beat-by-beat story spec for approval, or turning an approved spec into a beat model with tests."
 tools: Read, Grep, Glob, Edit, Write, Bash
-skills: ["step-model"]
+skills: ["beat-model"]
 ---
 
 <!-- GENERATED by scripts/sync-agents.mjs from .agents/agents/viz-story-writer.md. Do not edit; edit the source and run `npm run agents:sync`. -->
@@ -11,7 +11,7 @@ You write the **story** behind a Code Executives visualization: the ordered beat
 
 You are called for one of two phases. The architect's prompt says which. Do only that phase.
 
-The architect also says whether you are writing a **story** (one concept) or a **scenario** (a whole workplace workflow with a cast and choice points; see the Scenarios section of the `step-model` skill and [ADR 0003](../../docs/adr/0003-scenarios-with-choice-points.md)). For a scenario, the steps below change like this:
+The architect also says whether you are writing a **story** (one concept) or a **scenario** (a whole workplace workflow with a cast and choice points; see the Scenarios section of the `beat-model` skill and [ADR 0003](../../docs/adr/0003-scenarios-with-choice-points.md)). For a scenario, the steps below change like this:
 
 - **Question → workflow.** Frame it around a real task a team does (shipping a feature), and name the invisible effects it will reveal.
 - **Cast.** Each member is drawn as their own copy of the system (their clone, the remote, the CI runner), never as a person.
@@ -26,14 +26,14 @@ The architect also says whether you are writing a **story** (one concept) or a *
 3. **Write the beats.** 8–12 beats, one idea each, in cause→effect order. Every beat is **literal**: the objects on screen *are* the concept (frames, objects, requests, commits), never an everyday metaphor. Mark the 2–3 **aha beats**: where a naive mental model breaks.
 4. **Write the code.** A short, runnable snippet (≤ 20 lines) the beats walk through; every beat points at one line.
 5. **Write the captions.** ≤ 60 words each, present tense, naming what changed and why it matters.
-6. **Direct the camera.** Give each beat a shot from the step-model skill's shot vocabulary, so the 3D builder never guesses framing.
-7. **Save** to `docs/stories/<module>/<story-id>.md` using the spec template in the `step-model` skill.
+6. **Direct the camera.** Give each beat a shot from the beat-model skill's shot vocabulary, so the 3D builder never guesses framing.
+7. **Save** to `docs/stories/<module>/<story-id>.md` using the spec template in the `beat-model` skill.
 
 Completion: every beat has one idea, a line, a caption, a shot; every factual claim traces to the research report. Where the report is silent, the spec says **UNSOURCED** next to the claim instead of filling the gap.
 
-## Phase 2 — Step model (only after the architect confirms the spec is approved)
+## Phase 2 — Beat model (only after the architect confirms the spec is approved)
 
-1. Encode the approved spec as `src/features/<module>/utils/<storyId>Story.ts` following the `step-model` skill exactly.
+1. Encode the approved spec as `src/features/<module>/utils/<storyId>Story.ts` following the `beat-model` skill exactly.
 2. Write `<storyId>Story.test.ts` beside it: model consistency plus one test per aha beat proving its claim from the data (e.g. reachability), not by restating it.
 3. Run `npx vitest run <paths>` and `npx tsc -b`. Done when both pass.
 
diff --git a/.claude/skills/step-model/SKILL.md b/.claude/skills/beat-model/SKILL.md
similarity index 78%
rename from .claude/skills/step-model/SKILL.md
rename to .claude/skills/beat-model/SKILL.md
index 052b684..688ef6b 100644
--- a/.claude/skills/step-model/SKILL.md
+++ b/.claude/skills/beat-model/SKILL.md
@@ -1,21 +1,21 @@
 ---
-name: step-model
-description: "The step-model contract behind every Code Executives story and scenario visualization: spec formats, step snapshot schema, shot vocabulary, and tests. Use when writing a story spec, encoding a step model, or rendering one in 2D or 3D."
+name: beat-model
+description: "The beat-model contract behind every Code Executives story and scenario visualization: spec formats, beat snapshot schema, shot vocabulary, and tests. Use when writing a story spec, encoding a beat model, or rendering one in 2D or 3D."
 ---
 
-<!-- GENERATED by scripts/sync-agents.mjs from .agents/skills/step-model/SKILL.md. Do not edit; edit the source and run `npm run agents:sync`. -->
+<!-- GENERATED by scripts/sync-agents.mjs from .agents/skills/beat-model/SKILL.md. Do not edit; edit the source and run `npm run agents:sync`. -->
 
-A **step model** is the single source of a story visualization: pure data, one **snapshot** per beat. The 2D view and the 3D view are two renderers of the same step; switching views mid-story keeps the step. Reference implementation: `src/features/javascript/utils/stackHeapStory.ts` and its test.
+A **beat model** is the single source of a story visualization: pure data, one **snapshot** per beat. The 2D view and the 3D view are two renderers of the same beat; switching views mid-story keeps the beat. Reference implementation: `src/features/javascript/utils/stackHeapStory.ts` and its test.
 
 ## The contract
 
 A story module `src/features/<module>/utils/<storyId>Story.ts` exports:
 
 - `STORY_CODE: string`: the snippet the beats walk through.
-- `STORY_STEPS: StoryStep[]`: 8–12 steps, in order.
-- Pure helpers the views and tests share (e.g. `getReferences(step)`, `getReachable(step)`, `isFocused(step, key)`). Derived facts come from helpers, never from hand-written duplicate fields.
+- `STORY_BEATS: StoryBeat[]`: 8–12 beats, in order.
+- Pure helpers the views and tests share (e.g. `getReferences(beat)`, `getReachable(beat)`, `isFocused(beat, key)`). Derived facts come from helpers, never from hand-written duplicate fields.
 
-Every `StoryStep` carries these base fields, plus the story's own entity arrays (frames, objects, requests, commits…):
+Every `StoryBeat` carries these base fields, plus the story's own entity arrays (frames, objects, requests, commits…):
 
 | Field | Meaning |
 |---|---|
@@ -29,9 +29,9 @@ Every `StoryStep` carries these base fields, plus the story's own entity arrays
 
 Rules that make the model render cleanly:
 
-- **Full snapshot per step.** Every step lists every entity present at that beat; stepping backwards is just rendering an earlier step.
-- **Stable identity.** An entity keeps its `id` across steps; views animate enter/exit by id.
-- **Stable placement.** Each entity carries a layout cell (e.g. `cell: { col, row }`) that both views use, so an entity never jumps between steps. Keep it on a small grid (≤ 4×3 per region); larger grids crowd labels in both views.
+- **Full snapshot per beat.** Every beat lists every entity present at that moment; stepping backwards is just rendering an earlier beat.
+- **Stable identity.** An entity keeps its `id` across beats; views animate enter/exit by id.
+- **Stable placement.** Each entity carries a layout cell (e.g. `cell: { col, row }`) that both views use, so an entity never jumps between beats. Keep it on a small grid (≤ 4×3 per region); larger grids crowd labels in both views.
 - **State as data.** Lifecycle changes are an explicit `state` field (`live`, `marked`, `collected`…), never implied by absence, so both views can animate them.
 
 ## Shot vocabulary
@@ -41,12 +41,12 @@ Rules that make the model render cleanly:
 ## Tests (`<storyId>Story.test.ts`)
 
 - Exactly the spec's beat count; unique ids.
-- Per step: `line` within the code; every reference target exists; every `focus` key exists; no two entities share a cell.
+- Per beat: `line` within the code; every reference target exists; every `focus` key exists; no two entities share a cell.
 - One test per aha beat that proves its claim from the data through the helpers (e.g. "Bob is reachable after `bob = null`" via `getReachable`).
 
 ## Scenarios
 
-A **scenario** is a story that follows a whole workplace workflow, with a cast, a timeline and choice points ([ADR 0003](../../../docs/adr/0003-scenarios-with-choice-points.md), terms in `CONTEXT.md`). Everything above still applies to each beat; these rules replace the single `STORY_STEPS` list.
+A **scenario** is a story that follows a whole workplace workflow, with a cast, a timeline and choice points ([ADR 0003](../../../docs/adr/0003-scenarios-with-choice-points.md), terms in `CONTEXT.md`). Everything above still applies to each beat; these rules replace the single `STORY_BEATS` list.
 
 A scenario module `src/features/<module>/utils/<scenarioId>Scenario.ts` exports:
 
@@ -72,4 +72,4 @@ Tests (`<scenarioId>Scenario.test.ts`), in place of the story tests:
 
 - Writing a story spec: [spec-template.md](spec-template.md)
 - Writing a scenario spec: [scenario-spec-template.md](scenario-spec-template.md)
-- Encoding a step model: [model-template.md](model-template.md)
+- Encoding a beat model: [model-template.md](model-template.md)
diff --git a/.claude/skills/step-model/model-template.md b/.claude/skills/beat-model/model-template.md
similarity index 72%
rename from .claude/skills/step-model/model-template.md
rename to .claude/skills/beat-model/model-template.md
index 5701074..158c45a 100644
--- a/.claude/skills/step-model/model-template.md
+++ b/.claude/skills/beat-model/model-template.md
@@ -1,10 +1,10 @@
-# Step model template
+# Beat model template
 
 Skeleton for `src/features/<module>/utils/<storyId>Story.ts`. Rename the entity types to the story's literal concepts. Compare with `src/features/javascript/utils/stackHeapStory.ts`.
 
 ```ts
 /**
- * <Story title>: one step model, rendered by both the 2D (SVG) and 3D (R3F) views.
+ * <Story title>: one beat model, rendered by both the 2D (SVG) and 3D (R3F) views.
  * Spec: docs/stories/<module>/<story-id>.md
  */
 
@@ -24,7 +24,7 @@ export interface Entity {
   cell: { col: number; row: number };
 }
 
-export interface StoryStep {
+export interface StoryBeat {
   id: string;
   title: string;
   caption: string;
@@ -39,10 +39,10 @@ export const STORY_CODE = `...`;
 
 export const slotKey = (owner: string, slot: string) => `${owner}.${slot}`;
 
-// Small factories keep snapshots short and identical across steps.
+// Small factories keep snapshots short and identical across beats.
 const entity = (id: string, label: string, slots: Slot[], cell: Entity['cell'], state: Entity['state'] = 'live'): Entity => ({ id, label, slots, cell, state });
 
-export const STORY_STEPS: StoryStep[] = [
+export const STORY_BEATS: StoryBeat[] = [
   {
     id: 'start',
     title: '...',
@@ -55,28 +55,28 @@ export const STORY_STEPS: StoryStep[] = [
 ];
 
 // Pure helpers shared by views and tests: derive facts, never store them twice.
-export const isFocused = (step: StoryStep, key: string) => step.focus.includes(key);
+export const isFocused = (beat: StoryBeat, key: string) => beat.focus.includes(key);
 ```
 
 Test skeleton, `<storyId>Story.test.ts`:
 
 ```ts
 import { describe, expect, it } from 'vitest';
-import { STORY_CODE, STORY_STEPS } from './<storyId>Story';
+import { STORY_CODE, STORY_BEATS } from './<storyId>Story';
 
 describe('<story> model', () => {
   it('tells the approved <n> beats', () => {
-    expect(STORY_STEPS).toHaveLength(<n>);
-    expect(new Set(STORY_STEPS.map((s) => s.id)).size).toBe(<n>);
+    expect(STORY_BEATS).toHaveLength(<n>);
+    expect(new Set(STORY_BEATS.map((b) => b.id)).size).toBe(<n>);
   });
 
-  it.each(STORY_STEPS)('$id is internally consistent', (s) => {
-    expect(s.line).toBeLessThanOrEqual(STORY_CODE.split('\n').length);
+  it.each(STORY_BEATS)('$id is internally consistent', (b) => {
+    expect(b.line).toBeLessThanOrEqual(STORY_CODE.split('\n').length);
     // every ref target exists, every focus key exists, no shared cells
   });
 
   it('<aha beat claim, proven through a helper>', () => {
-    // e.g. expect(getReachable(step('bob-null'))).toContain('bob');
+    // e.g. expect(getReachable(beat('bob-null'))).toContain('bob');
   });
 });
 ```
diff --git a/.claude/skills/step-model/scenario-spec-template.md b/.claude/skills/beat-model/scenario-spec-template.md
similarity index 100%
rename from .claude/skills/step-model/scenario-spec-template.md
rename to .claude/skills/beat-model/scenario-spec-template.md
diff --git a/.claude/skills/step-model/spec-template.md b/.claude/skills/beat-model/spec-template.md
similarity index 100%
rename from .claude/skills/step-model/spec-template.md
rename to .claude/skills/beat-model/spec-template.md
diff --git a/.claude/skills/modern-web-guidance/SKILL.md b/.claude/skills/modern-web-guidance/SKILL.md
index 8f36322..6c10c95 100644
--- a/.claude/skills/modern-web-guidance/SKILL.md
+++ b/.claude/skills/modern-web-guidance/SKILL.md
@@ -1,6 +1,6 @@
 ---
 name: modern-web-guidance
-description: "Curated modern web platform guides (accessibility, forms, CSS, performance, view transitions, dialogs/popovers, canvas and 3D accessibility) from Google Chrome. Use when building or reviewing browser UI in Code Executives and you need current, Baseline-aware HTML/CSS/JS patterns. Not for backend, tooling or story step models."
+description: "Curated modern web platform guides (accessibility, forms, CSS, performance, view transitions, dialogs/popovers, canvas and 3D accessibility) from Google Chrome. Use when building or reviewing browser UI in Code Executives and you need current, Baseline-aware HTML/CSS/JS patterns. Not for backend, tooling or story beat models."
 ---
 
 <!-- GENERATED by scripts/sync-agents.mjs from .agents/skills/modern-web-guidance/SKILL.md. Do not edit; edit the source and run `npm run agents:sync`. -->
diff --git a/.claude/skills/verify-viz/SKILL.md b/.claude/skills/verify-viz/SKILL.md
index 3e159e3..b6e63bf 100644
--- a/.claude/skills/verify-viz/SKILL.md
+++ b/.claude/skills/verify-viz/SKILL.md
@@ -22,7 +22,7 @@ Renderers tag their DOM so the checks can find it:
 2. `npm run lint` passes.
 3. `npx vitest run <story model test> <section test>` passes.
 4. Browser: open the section, step through **every** beat in 2D, and run [label-overlap.js](scripts/label-overlap.js) → every beat `ok`.
-5. Browser: toggle 2D ↔ 3D (or the disabled placeholder) mid-story; the step number is unchanged.
+5. Browser: toggle 2D ↔ 3D (or the disabled placeholder) mid-story; the beat number is unchanged.
 
 ## 3D checklist
 
diff --git a/.claude/skills/verify-viz/scripts/label-overlap.js b/.claude/skills/verify-viz/scripts/label-overlap.js
index a051928..ca9d578 100644
--- a/.claude/skills/verify-viz/scripts/label-overlap.js
+++ b/.claude/skills/verify-viz/scripts/label-overlap.js
@@ -1,6 +1,6 @@
 // Evaluate in the page (async, returns a string). Steps through every beat of the story on the
 // page and reports labels that overlap each other or are clipped by the viewer.
-// Relies on: [data-viz-viewer], [data-viz-label], buttons labelled "Restart" / "Next step", and in
+// Relies on: [data-viz-viewer], [data-viz-label], buttons labelled "Restart" / "Next beat", and in
 // scenarios [data-viz-choice] option buttons. Restart must also clear every pick.
 (async () => {
   const SETTLE_MS = 2200; // camera glide + enter animations
@@ -8,7 +8,7 @@
     [...document.querySelectorAll('button')].find((b) => b.getAttribute('aria-label') === label);
   const viewer = document.querySelector('[data-viz-viewer]');
   if (!viewer) return 'FAIL: no [data-viz-viewer] on the page';
-  if (!button('Restart') || !button('Next step')) return 'FAIL: story controls not found';
+  if (!button('Restart') || !button('Next beat')) return 'FAIL: story controls not found';
 
   // A hidden or background tab throttles requestAnimationFrame, so animations and camera moves
   // never settle and every result would be meaningless.
@@ -71,7 +71,7 @@
       lines.push(
         `${picks.length ? `[${picks.join(' > ')}] ` : ''}${beat}: ${problems.join(' | ') || 'ok'} (${labels.length} labels)${hidden}`
       );
-      const next = button('Next step');
+      const next = button('Next beat');
       if (next && !next.disabled) {
         next.click();
         continue;
diff --git a/.github/agents/viz-2d-builder.agent.md b/.github/agents/viz-2d-builder.agent.md
index 86e38e6..79dda4e 100644
--- a/.github/agents/viz-2d-builder.agent.md
+++ b/.github/agents/viz-2d-builder.agent.md
@@ -1,31 +1,31 @@
 ---
 name: "viz-2d-builder"
-description: "Use when a story's step model needs its 2D view: building the SVG renderer and the story section shell (code panel, captions, controls, 2D/3D toggle) that hosts it."
+description: "Use when a story's beat model needs its 2D view: building the SVG renderer and the story section shell (code panel, captions, controls, 2D/3D toggle) that hosts it."
 user-invocable: true
 agents: []
 ---
 
 <!-- GENERATED by scripts/sync-agents.mjs from .agents/agents/viz-2d-builder.md. Do not edit; edit the source and run `npm run agents:sync`. -->
 
-Skills for this role (in `.agents/skills/`): `step-model`, `verify-viz`. Load them before starting.
+Skills for this role (in `.agents/skills/`): `beat-model`, `verify-viz`. Load them before starting.
 
-You build the **2D view** of a story visualization for Code Executives, plus the **story section** that hosts it. The step model (`src/features/<module>/utils/<storyId>Story.ts`) is your read-only input: render what it says. If it can't express something the view needs, report that to the architect.
+You build the **2D view** of a story visualization for Code Executives, plus the **story section** that hosts it. The beat model (`src/features/<module>/utils/<storyId>Story.ts`) is your read-only input: render what it says. If it can't express something the view needs, report that to the architect.
 
 Reference implementation: `StackHeap2D.tsx` and `sections/StackHeapStory.tsx` in `src/features/javascript/components/`. Match their structure.
 
 ## Build
 
 1. **Renderer**: `src/features/<module>/components/visualizations/2d/<Name>2D.tsx`.
-   - Pure presentational: props `{ step: StoryStep }`; all state lives in the shell.
-   - Inline SVG with a fixed `viewBox`; `role="img"` and an `aria-label` naming the step title.
-   - Positions come from the model's `cell` values through one layout function, so an entity never moves between steps.
+   - Pure presentational: props `{ beat: StoryBeat }`; all state lives in the shell.
+   - Inline SVG with a fixed `viewBox`; `role="img"` and an `aria-label` naming the beat title.
+   - Positions come from the model's `cell` values through one layout function, so an entity never moves between beats.
    - Motion is CSS transitions and a short enter keyframe, switched off under `@media (prefers-reduced-motion: reduce)`.
    - Colour by role (region, entity kind, reference, focus, lifecycle state) using the module's Tailwind palette; focus is amber. Text ≥ 11px, monospace for code values.
 2. **Section shell**: `src/features/<module>/components/sections/<Name>Story.tsx`, mounted in the section the architect names.
-   - Code panel highlighting `step.line`, a caption card (`aria-live="polite"`) with "Step n / N", title and caption.
-   - Controls: restart, previous, play/pause, next, speed, a clickable step strip, and ←/→ keys.
+   - Code panel highlighting `beat.line`, a caption card (`aria-live="polite"`) with "Beat n / N", title and caption.
+   - Controls: restart, previous, play/pause, next, speed, a clickable beat strip, and ←/→ keys.
    - The 2D/3D toggle with 2D as the default. Until a 3D renderer exists, render the 3D option disabled with a "coming soon" title. The 3D builder wires it later.
-3. **Tests**: `<Name>Story.test.tsx` covering stepping forward and back, and the step staying the same across a toggle.
+3. **Tests**: `<Name>Story.test.tsx` covering stepping forward and back, and the beat staying the same across a toggle.
 
 ### Scenarios
 
@@ -36,14 +36,14 @@ For a scenario ([ADR 0003](../../docs/adr/0003-scenarios-with-choice-points.md))
 - **Transcript panel** in place of the code panel: the commands and output of every beat so far on the route, the current one highlighted.
 - **Choice point.** At a beat with `choice`, Next is disabled and the question shows with one button per option, each tagged `data-viz-choice="<option id>"`. Picking one continues on that path. Previous steps back across a choice and clears it. Restart returns to the first beat and clears every pick.
 - **Ending.** The outcome shows with a "Try the other path" button that returns to the choice beat.
-- The step strip shows the route so far; the progress is "Beat n" rather than "n / N", since the length depends on the picks.
+- The beat strip shows the route so far; the progress is "Beat n" rather than "Beat n / N", since the length depends on the picks.
 
 Tests also cover picking each option, stepping back across a choice, and "Try the other path".
 
 ## Rules
 
 - Light mode only; Tailwind classes written out literally (Tailwind v4 cannot see class names built at runtime).
-- Build new step-model views only. Existing legacy 2D components stay untouched unless the architect assigns a migration.
+- Build new beat-model views only. Existing legacy 2D components stay untouched unless the architect assigns a migration.
 - Dependencies are the architect's call; work with what `package.json` has and report a need.
 
 ## Done
@@ -54,4 +54,4 @@ Run the `verify-viz` skill's 2D checklist. Done when every item passes, includin
 
 - Files created or changed
 - Checks run and results (each verify-viz item: pass/fail)
-- Anything the step model couldn't express; open issues
+- Anything the beat model couldn't express; open issues
diff --git a/.github/agents/viz-3d-builder.agent.md b/.github/agents/viz-3d-builder.agent.md
index e948c1f..4b9a650 100644
--- a/.github/agents/viz-3d-builder.agent.md
+++ b/.github/agents/viz-3d-builder.agent.md
@@ -1,21 +1,21 @@
 ---
 name: "viz-3d-builder"
-description: "Use when a story's step model needs its optional 3D view: building the react-three-fiber renderer and wiring it into the story section's 2D/3D toggle."
+description: "Use when a story's beat model needs its optional 3D view: building the react-three-fiber renderer and wiring it into the story section's 2D/3D toggle."
 user-invocable: true
 agents: []
 ---
 
 <!-- GENERATED by scripts/sync-agents.mjs from .agents/agents/viz-3d-builder.md. Do not edit; edit the source and run `npm run agents:sync`. -->
 
-Skills for this role (in `.agents/skills/`): `step-model`, `verify-viz`. Load them before starting.
+Skills for this role (in `.agents/skills/`): `beat-model`, `verify-viz`. Load them before starting.
 
-You build the **3D view** of a story visualization for Code Executives. The step model (`src/features/<module>/utils/<storyId>Story.ts`) is your read-only input, and the story section with its 2D view already exists. Your view renders the same step the 2D view does.
+You build the **3D view** of a story visualization for Code Executives. The beat model (`src/features/<module>/utils/<storyId>Story.ts`) is your read-only input, and the story section with its 2D view already exists. Your view renders the same beat the 2D view does.
 
 Read `docs/3D-Visualization-Standard.md` in full before writing code: it is the quality bar, and the review checklist there is your acceptance test. Reference implementation: `src/features/javascript/components/visualizations/3d/StackHeap3D.tsx`. Reuse its patterns.
 
 ## Build
 
-1. **Renderer**: `src/features/<module>/components/visualizations/3d/<Name>3D.tsx`, default export, props `{ step, resetViewToken, instant? }`.
+1. **Renderer**: `src/features/<module>/components/visualizations/3d/<Name>3D.tsx`, default export, props `{ beat, resetViewToken, instant? }`.
    - Stack: `three`, `@react-three/fiber`, `@react-three/drei` (`CameraControls`, `Html`, `QuadraticBezierLine`, `RoundedBox`).
    - Orthographic camera, isometric-style direction, one preset **shot** per `ShotId`: a world-space box plus label padding in pixels, framed by projecting the box (`frameShot` in the reference). Shots fit any viewer size.
    - Flat-shaded Lambert materials, one colour per role, amber for focus and roots.
@@ -24,7 +24,7 @@ Read `docs/3D-Visualization-Standard.md` in full before writing code: it is the
    - Enter/exit animate by entity id (presence pattern); lifecycle `state` animates colour and scale. With `instant`, every change and camera move is a cut.
    - Camera and controls come from the shared kit, never your own: `<StoryCamera>` and `<LabelFramer>` from `src/shared/viz3d/` (import it only from the lazy renderer), and the section's `Viewer3DToolbar` and `useStoryViewer`. Give `StoryCamera` your shots and the scene bounds; don't hand-roll `CameraControls`, wheel handling or zoom limits.
 2. **Wire the toggle** in `sections/<Name>Story.tsx`: load the renderer with `React.lazy`; `Suspense` shows the 2D view under a "Loading 3D…" overlay; an `ErrorBoundary` falls back to 2D; the 3D option is disabled without WebGL (`canUseWebGL`); reduced motion passes `instant`; the shared toolbar (Reset view, Hold view, presets, zoom, pan, full screen) sits in the viewer's top-right corner.
-3. **Tests**: extend the section test so the toggle keeps the step with a mocked 3D module, and the WebGL-off case falls back to 2D.
+3. **Tests**: extend the section test so the toggle keeps the beat with a mocked 3D module, and the WebGL-off case falls back to 2D.
 
 ## Rules
 
diff --git a/.github/agents/viz-story-writer.agent.md b/.github/agents/viz-story-writer.agent.md
index caf2117..dda4319 100644
--- a/.github/agents/viz-story-writer.agent.md
+++ b/.github/agents/viz-story-writer.agent.md
@@ -1,6 +1,6 @@
 ---
 name: "viz-story-writer"
-description: "Use when a visualization needs its story: turning a concept into a beat-by-beat story spec for approval, or turning an approved spec into a step model with tests."
+description: "Use when a visualization needs its story: turning a concept into a beat-by-beat story spec for approval, or turning an approved spec into a beat model with tests."
 tools: ["read", "search", "edit", "execute"]
 user-invocable: true
 agents: []
@@ -8,13 +8,13 @@ agents: []
 
 <!-- GENERATED by scripts/sync-agents.mjs from .agents/agents/viz-story-writer.md. Do not edit; edit the source and run `npm run agents:sync`. -->
 
-Skills for this role (in `.agents/skills/`): `step-model`. Load them before starting.
+Skills for this role (in `.agents/skills/`): `beat-model`. Load them before starting.
 
 You write the **story** behind a Code Executives visualization: the ordered beats a learner steps through. You own the story's content; the 2D and 3D builders only render it. The architect (the session that dispatched you) owns everything else.
 
 You are called for one of two phases. The architect's prompt says which. Do only that phase.
 
-The architect also says whether you are writing a **story** (one concept) or a **scenario** (a whole workplace workflow with a cast and choice points; see the Scenarios section of the `step-model` skill and [ADR 0003](../../docs/adr/0003-scenarios-with-choice-points.md)). For a scenario, the steps below change like this:
+The architect also says whether you are writing a **story** (one concept) or a **scenario** (a whole workplace workflow with a cast and choice points; see the Scenarios section of the `beat-model` skill and [ADR 0003](../../docs/adr/0003-scenarios-with-choice-points.md)). For a scenario, the steps below change like this:
 
 - **Question → workflow.** Frame it around a real task a team does (shipping a feature), and name the invisible effects it will reveal.
 - **Cast.** Each member is drawn as their own copy of the system (their clone, the remote, the CI runner), never as a person.
@@ -29,14 +29,14 @@ The architect also says whether you are writing a **story** (one concept) or a *
 3. **Write the beats.** 8–12 beats, one idea each, in cause→effect order. Every beat is **literal**: the objects on screen *are* the concept (frames, objects, requests, commits), never an everyday metaphor. Mark the 2–3 **aha beats**: where a naive mental model breaks.
 4. **Write the code.** A short, runnable snippet (≤ 20 lines) the beats walk through; every beat points at one line.
 5. **Write the captions.** ≤ 60 words each, present tense, naming what changed and why it matters.
-6. **Direct the camera.** Give each beat a shot from the step-model skill's shot vocabulary, so the 3D builder never guesses framing.
-7. **Save** to `docs/stories/<module>/<story-id>.md` using the spec template in the `step-model` skill.
+6. **Direct the camera.** Give each beat a shot from the beat-model skill's shot vocabulary, so the 3D builder never guesses framing.
+7. **Save** to `docs/stories/<module>/<story-id>.md` using the spec template in the `beat-model` skill.
 
 Completion: every beat has one idea, a line, a caption, a shot; every factual claim traces to the research report. Where the report is silent, the spec says **UNSOURCED** next to the claim instead of filling the gap.
 
-## Phase 2 — Step model (only after the architect confirms the spec is approved)
+## Phase 2 — Beat model (only after the architect confirms the spec is approved)
 
-1. Encode the approved spec as `src/features/<module>/utils/<storyId>Story.ts` following the `step-model` skill exactly.
+1. Encode the approved spec as `src/features/<module>/utils/<storyId>Story.ts` following the `beat-model` skill exactly.
 2. Write `<storyId>Story.test.ts` beside it: model consistency plus one test per aha beat proving its claim from the data (e.g. reachability), not by restating it.
 3. Run `npx vitest run <paths>` and `npx tsc -b`. Done when both pass.
 
diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md
index 8ec76dc..601556d 100644
--- a/.github/copilot-instructions.md
+++ b/.github/copilot-instructions.md
@@ -13,15 +13,21 @@ workflow are in [AGENTS.md](../AGENTS.md); architecture decisions are in [docs/a
 - Keep the Axios guardrails in `package.json` `overrides`. Workflow actions are pinned to full commit SHAs with minimal `permissions`.
 
 ### Visualizations
-- New visualizations are **stories**: one step model (`src/features/<module>/utils/<storyId>Story.ts`, pure data, tested) rendered by a 2D view and, optionally, a 3D view. Both views render the same step; 2D is the default.
+- New visualizations are **stories**: one beat model (`src/features/<module>/utils/<storyId>Story.ts`, pure data, tested) rendered by a 2D view and, optionally, a 3D view. Both views render the same beat; 2D is the default.
 - Literal, not metaphor: draw the concept itself (frames, objects, requests), never everyday stand-ins.
 - A **scenario** is a story that follows a whole workplace workflow, with a cast, a timeline and up to 2 choice points whose paths never rejoin ([ADR 0003](../docs/adr/0003-scenarios-with-choice-points.md)). Scenarios live in the module's Visualization page, deep-linked with `?scenario=<id>`. Terms are defined in [CONTEXT.md](../CONTEXT.md).
 - 3D follows [docs/3D-Visualization-Standard.md](../docs/3D-Visualization-Standard.md). three.js is imported only from a `React.lazy` renderer and never reaches the entry bundle; `manualChunks` has no rule for it.
 - Motion respects `useReducedMotion` (`src/shared/hooks`).
 
+### Playground
+- There is exactly one Playground, at `/playground` (`src/features/playground/`). No module gets a playground of its own ([ADR 0004](../docs/adr/0004-playground-traces-share-the-snapshot.md)).
+- A trace's steps and a story's beats hold the same snapshot and are drawn by the same 2D and 3D views. A lens chooses which regions are drawn; it never brings its own renderer.
+- A trace is never presented as a story: no authored captions, and no garbage-collection sweep, because a run cannot observe one.
+- JavaScript first; other languages emit the same snapshot.
+
 ### Code
 - Icon props are typed `LucideIcon`: R3F's global JSX types make a bare `React.ElementType` reject `className`.
-- Light mode only. Tailwind v4 can't see class names built at runtime (`bg-${color}-50`): write classes out literally or map them through a fixed object.
+- Light mode only, except the Playground, which is dark ([ADR 0004](../docs/adr/0004-playground-traces-share-the-snapshot.md)). Tailwind v4 can't see class names built at runtime (`bg-${color}-50`): write classes out literally or map them through a fixed object.
 - Browser support: use Baseline widely available web features directly; a newer feature needs a fallback. The `modern-web-guidance` skill (vendored, read its files, never run its npx CLI) has the patterns.
 - Tests sit next to the code as `*.test.ts(x)`.
 
diff --git a/AGENTS.md b/AGENTS.md
index c3a5aff..a06075c 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -21,15 +21,21 @@ After editing anything in `.agents/`, run `npm run agents:sync` and commit the g
 - Keep the Axios guardrails in `package.json` `overrides`. Workflow actions are pinned to full commit SHAs with minimal `permissions`.
 
 ### Visualizations
-- New visualizations are **stories**: one step model (`src/features/<module>/utils/<storyId>Story.ts`, pure data, tested) rendered by a 2D view and, optionally, a 3D view. Both views render the same step; 2D is the default.
+- New visualizations are **stories**: one beat model (`src/features/<module>/utils/<storyId>Story.ts`, pure data, tested) rendered by a 2D view and, optionally, a 3D view. Both views render the same beat; 2D is the default.
 - Literal, not metaphor: draw the concept itself (frames, objects, requests), never everyday stand-ins.
 - A **scenario** is a story that follows a whole workplace workflow, with a cast, a timeline and up to 2 choice points whose paths never rejoin ([ADR 0003](docs/adr/0003-scenarios-with-choice-points.md)). Scenarios live in the module's Visualization page, deep-linked with `?scenario=<id>`. Terms are defined in [CONTEXT.md](CONTEXT.md).
 - 3D follows [docs/3D-Visualization-Standard.md](docs/3D-Visualization-Standard.md). three.js is imported only from a `React.lazy` renderer and never reaches the entry bundle; `manualChunks` has no rule for it.
 - Motion respects `useReducedMotion` (`src/shared/hooks`).
 
+### Playground
+- There is exactly one Playground, at `/playground` (`src/features/playground/`). No module gets a playground of its own ([ADR 0004](docs/adr/0004-playground-traces-share-the-snapshot.md)).
+- A trace's steps and a story's beats hold the same snapshot and are drawn by the same 2D and 3D views. A lens chooses which regions are drawn; it never brings its own renderer.
+- A trace is never presented as a story: no authored captions, and no garbage-collection sweep, because a run cannot observe one.
+- JavaScript first; other languages emit the same snapshot.
+
 ### Code
 - Icon props are typed `LucideIcon`: R3F's global JSX types make a bare `React.ElementType` reject `className`.
-- Light mode only. Tailwind v4 can't see class names built at runtime (`bg-${color}-50`): write classes out literally or map them through a fixed object.
+- Light mode only, except the Playground, which is dark ([ADR 0004](docs/adr/0004-playground-traces-share-the-snapshot.md)). Tailwind v4 can't see class names built at runtime (`bg-${color}-50`): write classes out literally or map them through a fixed object.
 - Browser support: use Baseline widely available web features directly; a newer feature needs a fallback. The `modern-web-guidance` skill (vendored, read its files, never run its npx CLI) has the patterns.
 - Tests sit next to the code as `*.test.ts(x)`.
 
@@ -49,12 +55,12 @@ The session you talk to is the **architect**: it analyzes, plans, decides, and d
 
 | Specialist | Owns |
 |---|---|
-| `viz-story-writer` | Story or scenario spec (`docs/stories/<module>/<id>.md`), then the step model and its tests |
+| `viz-story-writer` | Story or scenario spec (`docs/stories/<module>/<id>.md`), then the beat model and its tests |
 | `viz-2d-builder` | SVG renderer and the story section shell with the 2D/3D toggle |
 | `viz-3d-builder` | The lazy R3F renderer, wired into the toggle |
 | `module-quiz-generator` | `quiz-banks/<module>.quiz.json` |
 
-Story pipeline: story writer (spec) → **owner approves the spec** → story writer (step model) → 2D builder → 3D builder. The architect stops at the approval gate every time.
+Story pipeline: story writer (spec) → **owner approves the spec** → story writer (beat model) → 2D builder → 3D builder. The architect stops at the approval gate every time.
 
 When dispatching a specialist, give it the module, section, story id, and the files it may touch. Each specialist returns a report of ≤ 200 words: files touched, checks run with pass/fail, open issues. Read the diff only when the report raises a doubt. Specialists work within installed dependencies; adding one is the architect's call, with the owner's approval.
 
diff --git a/CONTEXT.md b/CONTEXT.md
index 2572ee9..83150cb 100644
--- a/CONTEXT.md
+++ b/CONTEXT.md
@@ -8,20 +8,48 @@ A site that teaches programming by showing, step by step, what code and tools do
 A visualization of one concept, told as a sequence of beats and drawn literally (frames, objects, commits, refs), never as an everyday metaphor.
 _Avoid_: Animation, demo, walkthrough
 
+**Snapshot**:
+The full state at one moment: every entity present, with its values and references. A snapshot is what a view draws.
+_Avoid_: State, frame, diff
+
 **Beat**:
-One moment of a story: a full snapshot of every entity present, with a title, a caption and a shot.
-_Avoid_: Slide, frame, stage
+One authored moment of a story: a snapshot with a title, a caption and a shot.
+_Avoid_: Slide, frame, stage, step (a step is recorded, not authored)
+
+**Beat model**:
+The pure data behind a story: its beats in order, or for a scenario its paths, each beat holding one snapshot.
+_Avoid_: Step model (the old name), script, storyboard
+
+**Region**:
+A fixed area of the scene that holds one kind of entity, such as the stack or the heap, or one cast member's copy of the system.
+_Avoid_: Zone, panel, layer
+
+**Entity**:
+One thing drawn in a snapshot, such as a frame, an object or a commit, with an identity that stays the same from one snapshot to the next.
+_Avoid_: Node, item, element
+
+**Cell**:
+An entity's fixed position within its region, the same in every view.
+_Avoid_: Coordinate, grid position
 
-**Step model**:
-The pure data behind a story, one snapshot per beat, that every view renders.
-_Avoid_: Script, storyboard
+**Slot**:
+A named place in an entity that holds either a value or a reference.
+_Avoid_: Field, property, variable
+
+**Reference**:
+A link from a slot to another entity.
+_Avoid_: Pointer, edge, arrow
+
+**Focus**:
+The entities and slots a beat or step spotlights. An author chooses a beat's focus; a step's focus is whatever that step changed.
+_Avoid_: Highlight, selection
 
 **View**:
-One rendering of a step model: 2D (the default) or 3D. Switching views keeps the beat.
+One way of drawing a snapshot: 2D (the default) or 3D. Switching views keeps the beat or step.
 _Avoid_: Mode, renderer (for the user-facing concept)
 
 **Shot**:
-The part of the scene a beat is framed on: an overview, one region, or a bridge between regions.
+A part of the scene that the author named and framed a beat on. An overview, one region and a bridge between regions are the common kinds. Steps have no shot.
 _Avoid_: Camera angle, zoom level
 
 **Scenario**:
@@ -40,10 +68,50 @@ _Avoid_: Branch (overloaded with Git), fork, decision
 The linear run of beats that follows one option of a choice point.
 _Avoid_: Branch, route, track
 
+**Timeline**:
+The clock times at which a scenario's cast acts, in order.
+_Avoid_: Schedule; never the steps of a trace
+
 **Transcript**:
-The running log of a scenario: at each beat, who acted, when, the command they ran, and what it printed.
-_Avoid_: Console, log, terminal
+The running log of a scenario: at each beat, who acted, when, the command they ran or the action they took, and what it printed.
+_Avoid_: Log, terminal, console (the Console belongs to the Playground)
 
 **Hold view**:
 The learner's choice to keep their own camera across beats instead of each beat's shot.
 _Avoid_: Free camera, lock camera
+
+## Playground
+
+**Playground**:
+The one place where a learner runs their own code and watches what it does to state. There is exactly one; no module has a playground of its own.
+_Avoid_: Sandbox, editor, IDE, code lab
+
+**Trace**:
+The record of one run of the learner's code in the Playground: a sequence of steps. A trace is recorded, never authored or approved, so it is not a story.
+_Avoid_: Story, timeline, recording, execution
+
+**Step**:
+One moment of a trace: the snapshot recorded when one statement ran, with the line that ran.
+_Avoid_: Beat, snapshot (the snapshot is the state a step holds)
+
+**Console**:
+What the learner's code printed during a run, in order. It has no cast and no clock times, so it is not a transcript.
+_Avoid_: Transcript, output, log
+
+**Lens**:
+The learner's choice of which part of a snapshot the Playground draws, such as the stack and heap or the stack and queues. A lens is independent of the view: any lens can be drawn in 2D or 3D.
+_Avoid_: View, mode, visualization
+
+**Example**:
+Prebuilt code the learner can load into the Playground to run and watch, with a suggested lens and no goal.
+_Avoid_: Snippet, template, scenario, demo
+
+**Exercise**:
+A task in the Playground with a goal, checks that pass or fail on the learner's code, and hints.
+_Avoid_: Problem, challenge, kata, test
+
+## Modules
+
+**Marble diagram tool**:
+The RxJS module's interactive diagram: the learner writes a stream as marbles, picks an operator and sees the stream it produces. It does not run the learner's code, so it is not a playground.
+_Avoid_: RxJS playground, marble playground
diff --git a/docs/3D-Visualization-Standard.md b/docs/3D-Visualization-Standard.md
index 4bfa1ce..88e560f 100644
--- a/docs/3D-Visualization-Standard.md
+++ b/docs/3D-Visualization-Standard.md
@@ -18,17 +18,17 @@ This standard exists so that doesn't happen again.
 
 1. **3D must teach, not decorate.** Use 3D only where depth carries meaning: layers, regions, references crossing space. If the 2D view explains it just as well, don't build 3D.
 2. **Literal, not metaphor.** Draw the concept itself: frames, objects, references. No kitchens, libraries or robots.
-3. **3D is an option, and 2D is the default.** Both views render **one step model**. Switching views keeps the learner on the same step.
-4. **A guided camera the learner can take over.** Every step has a preset shot and the camera glides to it. The learner can orbit, pan and zoom; the next step glides back to its shot unless **Hold view** is on, and **Reset view** returns to the preset. The plain scroll wheel never zooms the scene, so page scrolling keeps working. See [Viewer controls](#viewer-controls).
-5. **The learner sets the pace.** Provide step back/forward, play/pause and speed, and keep the defaults slow. Each step is a full snapshot, so stepping backwards costs nothing.
+3. **3D is an option, and 2D is the default.** Both views render **one beat model**. Switching views keeps the learner on the same beat.
+4. **A guided camera the learner can take over.** Every beat has a preset shot and the camera glides to it. The learner can orbit, pan and zoom; the next beat glides back to its shot unless **Hold view** is on, and **Reset view** returns to the preset. The plain scroll wheel never zooms the scene, so page scrolling keeps working. See [Viewer controls](#viewer-controls).
+5. **The learner sets the pace.** Provide step back/forward, play/pause and speed, and keep the defaults slow. Each beat is a full snapshot, so stepping backwards costs nothing.
 6. **Labels are always readable.** Labels are DOM elements (drei `<Html>`) that always face the camera, sit on or beside their object, and are never smaller than 11px. Use `zIndexRange={[10, 0]}` so they never cover site chrome.
 
 ## Quality bar (references)
 
 | Aspect | Reference |
 |---|---|
-| Teaching pace, one idea per step | [Bartosz Ciechanowski](https://ciechanow.ski/) |
-| Guided camera per step in a CS scene | [LLM Visualization (Bycroft)](https://bbycroft.net/llm) |
+| Teaching pace, one idea per beat | [Bartosz Ciechanowski](https://ciechanow.ski/) |
+| Guided camera per beat in a CS scene | [LLM Visualization (Bycroft)](https://bbycroft.net/llm) |
 | Visual language: isometric, clean, readable | [Cloudcraft](https://www.cloudcraft.co/), [Isoflow](https://isoflow.io/) |
 | Performance and graceful fallback | [How we built the GitHub globe](https://github.blog/engineering/engineering-principles/how-we-built-the-github-globe/) |
 | Polish ceiling (look only, not the navigation) | [Bruno Simon](https://bruno-simon.com/), [R3F examples](https://r3f.docs.pmnd.rs/getting-started/examples) |
@@ -39,10 +39,10 @@ This standard exists so that doesn't happen again.
 ## Architecture
 
 ```
-utils/<story>.ts               step model + scenario (pure data, unit-tested)
-visualizations/2d/<Name>2D.tsx SVG renderer of one step
-visualizations/3d/<Name>3D.tsx R3F renderer of one step (lazy chunk)
-sections/<Story>.tsx           shell: code panel, narration, controls, 2D/3D toggle
+utils/<story>.ts               beat model (pure data, unit-tested)
+visualizations/2d/<Name>2D.tsx SVG renderer of one beat
+visualizations/3d/<Name>3D.tsx R3F renderer of one beat (lazy chunk)
+sections/<Story>.tsx           shell: code panel, caption, controls, 2D/3D toggle
 ```
 
 - **Tech:** `three`, `@react-three/fiber` and `@react-three/drei` (`CameraControls`, `Html`, `QuadraticBezierLine`, `RoundedBox`).
@@ -80,13 +80,13 @@ Every 3D story uses the shared toolbar and camera (`src/shared/components/viz/Vi
 1. From the 3D view alone, a learner can explain the story's key insight (for the prototype: *why Bob survives `bob = null`*).
 2. Every label is readable at every preset shot (isometric preset). Zooming, panning and the other presets never show a clipped label.
 3. It runs smoothly on a normal laptop. 3D loads only on toggle, and 2D pages are the same size as before.
-4. Switching views mid-story keeps the step.
+4. Switching views mid-story keeps the beat.
 5. With no WebGL or with reduced motion on, it falls back correctly.
 6. It meets the look and feel of the references above.
 
 ## Prototype: JavaScript › Memory Heap › "Stack ↔ Heap"
 
-- **Story:** 10 steps following `makeUser('Ada')` / `makeUser('Bob')`: frames pushed and popped, a heap-to-heap reference, `bob = null` (Bob survives through Ada), `ada = null`, the GC mark phase, and the GC sweep.
+- **Story:** 10 beats following `makeUser('Ada')` / `makeUser('Bob')`: frames pushed and popped, a heap-to-heap reference, `bob = null` (Bob survives through Ada), `ada = null`, the GC mark phase, and the GC sweep.
 - **Model:** `src/features/javascript/utils/stackHeapStory.ts`, with tests covering reachability and consistency.
 - **Views:** `StackHeap2D.tsx` and `StackHeap3D.tsx`. The shell is `sections/StackHeapStory.tsx`, mounted in `MemoryHeap.tsx`.
-- **Rollout gate:** don't roll out to other modules until the owner signs off on the checklist. After that, replace the hand-authored scenario with traces from the playground's `JsInstrumenter`, then pick the next module.
+- **Rollout gate:** don't roll out to other modules until the owner signs off on the checklist. After that, replace the hand-authored beats with traces from the playground's `JsInstrumenter`, then pick the next module.
diff --git a/docs/RESEARCH/Playground Audit 2026-10.md b/docs/RESEARCH/Playground Audit 2026-10.md
new file mode 100644
index 0000000..8e300d7
--- /dev/null
+++ b/docs/RESEARCH/Playground Audit 2026-10.md	
@@ -0,0 +1,51 @@
+# Playground audit, October 2026
+
+Findings from running `/playground` in a browser and reading `src/features/playground/` on 2026-10-11 (commit `51a0ecc`). This records what is true today. It is not a plan.
+
+## State of the 3D work
+
+- Three visualizations use the step model with a 2D view and a lazy 3D view: JavaScript "Stack ↔ Heap" (#168), Git "What is a branch, really?" (#170) and the Git "Ship a feature" scenario (#173). Shared viewer controls landed in #172.
+- `docs/3D-Visualization-Standard.md` and ADR 0001 still say "Prototype" and gate rollout on the owner's sign-off, although Git has shipped two 3D views.
+- The three 3D renderers (566, 834 and 1,047 lines) each redefine `PALETTE`, `damp`, `labelStyle`, `SHOTS`, `SCENE_BOUNDS` and `Scene`. The two Git renderers also duplicate `Label`, `CommitBlock`, `commitPos`, `parentArc` and the card constants.
+- The canvas and 3D accessibility guides in the `modern-web-guidance` skill (#182) arrived after the 3D views and have not been applied to them.
+- The standard's own follow-up is still open: replace the hand-authored Stack ↔ Heap story with traces from the playground's `JsInstrumenter`.
+
+## What happened when I ran the playground
+
+| Test | Result |
+|---|---|
+| Default JS snippet, Event Loop lens | 8 steps. Microtask and task queues are empty on every step. The `setTimeout` and `.then` callbacks are never stepped into. With an empty stack the header reads "Processing Task Queue". |
+| Default JS snippet, console | The `setTimeout(…, 1000)` log never appears. |
+| "Closures & Scope" example, Heap & Stack lens | 12 steps and no heap objects. At global scope the lens shows "No heap or stack data in current step". `increment()` is never entered and `count` never appears. |
+| "Promise Chain" example (TypeScript) | Fails with `Unexpected token ':'`. No timeline. |
+| Console output | Strings render as `&quot;Hello, World!&quot;`; the TypeScript error renders as `&amp;#x27;`. |
+| 1024px-wide viewport | The toolbar clips and the Run button is off screen. |
+
+Not tested: Python (needs the Pyodide download), the Data Structures lens, the Streams lens, touch input, reduced motion.
+
+## Causes in the code
+
+- **Empty heap and queues.** The tracker runtime in `services/instrumentCode.ts` writes `heapObjects: []`, `microtaskQueue: []` and `macrotaskQueue: []` on every step. `instrumentation/PythonInstrumenter.ts` does the same. `HeapStackLens` and `EventLoopLens` read those fields, so they have nothing to draw.
+- **No object identity.** `safeClone` deep-copies each value (depth 3, 20 keys) on every step. Two variables that point at one object become two unrelated copies, so a reference cannot be drawn.
+- **Functions inside expressions are not traced.** `instrumentNode` only descends through statements. Arrow callbacks, object methods and function expressions get no `enterFunction`/`step` calls.
+- **One flat variable list.** `collectScopeVars` captures the variables visible at the current statement. Frames below the top of the stack carry no variables.
+- **Results are reported too early.** `SandboxFrame.tsx` posts the result 50 ms after the synchronous code ends, so later timers never reach the console or the timeline.
+- **TypeScript is not transpiled.** `handleRun` in `PlaygroundApp.tsx` passes TypeScript source straight to acorn and the sandbox. A comment in `hooks/useSandbox.ts` says the code "should be transpiled before passing to execute".
+- **Different vocabularies.** The story step model (`StoryStep`: frames with slots, `refId`, heap objects with stable cells and states, a camera shot) is richer than the playground's `StateSnapshot`. The two also both export a type named `StackFrame` with different shapes.
+- **Different themes.** The playground is dark (`data-theme="playground"`); the stories and the 3D palette are light, and AGENTS.md says "Light mode only".
+- **Different renderers.** Playground lenses use React Flow or plain DOM; stories use SVG and react-three-fiber.
+
+## Other playgrounds in the repository
+
+Reported by an explorer agent from reading the code; nothing here was run in a browser.
+
+- **`src/components/playground/` (old).** A LeetCode-style shell (problem, tests, submit, score, debug stepper) that never runs the user's code: Run, Test and Submit are `setTimeout` mocks (`Playground.tsx:65-97`) and Submit always returns "accepted" with score 100. Its only real execution path (`utils/instrument.ts`, `new Function` on the main thread, no sandbox or timeout) is unreachable.
+  - Mounted by `features/bigo/BigOPage.tsx` and `features/datastructures/DataStructuresPage.tsx`, linked from `Sidebar.tsx`, `moduleNavigation.ts` and both modules' Introduction sections, and advertised in the README.
+  - Worth carrying over: the problem/test/hint schema (`types/playground.ts`), `data/problems.ts` (1,266 lines, imported by nothing), the `ProblemDisplay` and `TestRunner` UI, and the achievement logic in `utils/scoring.ts`.
+  - Dead: `PerformanceAnalyzer` and `hooks/usePlayground.ts` (never imported, fabricated numbers).
+  - `utils/instrument.ts` is also used by the JavaScript `CallStack.tsx` and `MemoryHeap.tsx`, so it cannot be deleted with the rest.
+- **`src/components/rxjs/playground/`.** Mounted only in the RxJS Visualization Tool section. `MarblePlayground` works but simulates operators by pattern matching (`map`, `filter`, `take` only) rather than running RxJS. `CodePlayground` prints canned output.
+
+## A limit to keep in mind
+
+JavaScript cannot observe real garbage collection. A tracer can compute which objects became unreachable from the roots, which is what the Stack ↔ Heap story's tests already do, but it cannot show an actual sweep.
diff --git a/docs/RESEARCH/Playground Design Research.md b/docs/RESEARCH/Playground Design Research.md
new file mode 100644
index 0000000..79181dc
--- /dev/null
+++ b/docs/RESEARCH/Playground Design Research.md	
@@ -0,0 +1,157 @@
+# **Playground Design Research: Tracing, Visualization and Practice**
+
+Research for turning `/playground` into the "practice after theory" place. Compiled 2026-10-11 from primary sources where they could be reached (tool source code, official docs, the authors' papers). Anything not confirmed from a primary source is tagged **(unverified)**. Observations about this repository come from reading the code, not from running it.
+
+## **Summary**
+
+The tools that teach best (Python Tutor, Thonny, Loupe) all do the same three things: they run the program to completion under a hard step limit, record a **full snapshot of frames and heap at every step** with objects named by small stable ids, and let the learner scrub forwards and backwards in the browser. Python Tutor's published trace format is almost the same shape as this project's story step model (`frames` with slots that hold a value or a `refId`, `objects` keyed by id), so the cheapest high-value move is to make the playground tracer emit that shape and let the existing 2D and 3D story renderers act as lenses. No reviewed tool shows heap identity and the microtask/task queues together for arbitrary code: Python Tutor refuses async entirely, and the event-loop tools (Loupe, JS Visualizer 9000) show no heap. The gap is real and reachable with deeper AST instrumentation plus a traced event loop inside the sandbox; an interpreter is not required. The research on learning is consistent that what the learner *does* with a visualization (predicting, answering, changing) matters more than what it draws, and the evidence for 3D is mixed: it helps for structural overview and hurts through occlusion, navigation cost and clutter, which supports the house rule that 3D is optional and only where depth carries meaning.
+
+## **A. Comparison of tools**
+
+| Tool | What it shows | How it traces | Limits | What we could borrow |
+|---|---|---|---|---|
+| **Python Tutor** (Guo) | Frames, heap objects, pointers, closures' parent frames, stdout, per line | Python: runs under `bdb`, records a complete stack+heap snapshot per executed line, sends one JSON trace; stepping is client-side [S1]. JS: Node run with `--expose-debug-as=Debug`, stepping through V8 debug break events; object ids are a hidden `smallObjId_hidden_` property added with `Object.defineProperty` [S3] | 1,000 steps (originally 300) [S1][S3]; JS backend is server-side, ES6 only, Node v6, "very brittle" per its own header [S3][S5]; **no async, timers, promises, DOM** [S4]; closures are inlined as `parent:x` because V8 scopes are not tied to frames [S3]; not for mobile [S4] | Trace format (`REF` ids, `frame_id`, `parent_frame_id_list`, `is_zombie`, event types incl. `instruction_limit_reached`) [S2]; layout heuristics: append new objects at the bottom, never move a rendered object [S1]; "fits on a blackboard" scope [S4] |
+| **Loupe** (Roberts) | Call stack, Web APIs, callback queue, render queue | `falafel` rewrites `CallExpression`/`BinaryExpression` with before/after hooks; a busy-wait `delay` slows execution so the animation keeps up [S6] | Live animation, not a recorded trace; no microtask queue component in the source tree [S6]; no heap. Web-worker execution is **(unverified)**: described in a secondary write-up only | Expression-level hook points (before/after a call) rather than statement-only |
+| **JS Visualizer 9000** (Hopding) | Call stack, task queue, microtask queue | **Server-side**: Node `worker_threads`, `async_hooks` (`init/before/after/promiseResolve`) for promises, timeouts and microtasks, plus Babel/`falafel` function enter/exit wrapping, inside `vm2` [S7] | Needs a server; `async_hooks` does not exist in browsers; no heap or variables; `vm2`'s own README says sandbox escapes keep being found [S8] | The event vocabulary: `InitPromise`, `ResolvePromise`, `EnqueueMicrotask`, `DequeueMicrotask`, `InitTimeout`, `BeforeTimeout`, `EnterFunction`, `ExitFunction` [S7] |
+| **ui.dev JavaScript Visualizer** | Execution contexts, hoisting, scopes, closures | **(unverified)**: no primary description found | **(unverified)** | The creation-phase vs execution-phase framing, if confirmed |
+| **Lydia Hallie, "JavaScript Visualized"** | Hand-authored animations of event loop, promises, hoisting | Not traced: made in Keynote and screen-recorded, per the author's own comment [S9] | Fixed examples | Pacing and one-idea-per-frame; proof that authored scenarios teach well alongside free code |
+| **Algorithm Visualizer** | Arrays, graphs, logs for algorithms | Author calls tracer APIs (`Array1DTracer.select/patch`, `Tracer.delay()`); `tracers.*` libraries "extract visualizing commands from code" [S10] | Learner must annotate code; only what is annotated is shown | An opt-in `viz.*` API for data-structure lenses where automatic detection is unreliable |
+| **VisuAlgo** | Pre-built algorithm animations with pseudo-code | **(unverified)**: about page not reachable | Not arbitrary code **(unverified)** | E-lecture mode and auto-generated quiz questions **(unverified)** |
+| **Recursion tree visualizers** (e.g. brpapa) | Call tree of a recursive function | **(unverified)**: tagged `aws-lambda`, so likely server-side | Third-party reports: function must be named `fn`, globals break it **(unverified)** | A call-tree lens derived from enter/exit events we already record |
+| **Thonny** | Expression-by-expression evaluation; each call in its own window with locals; optional "name → id → value" heap mode [S11] | Desktop Python IDE; mechanism **(unverified)** | Not web | Two fidelity levels for the same run: simple values first, references on demand |
+| **Replay.io** | Time-travel debugging of a recorded browser session | Records non-deterministic inputs at the system-library boundary and re-executes deterministically; determinism is targeted at the JS level [S12] | Needs a custom runtime | The principle only: record once, re-derive any view afterwards |
+| **rr** | Record and reverse-execute native processes under gdb | Records kernel inputs and non-deterministic CPU effects; emulates a single core [S13] | Linux, specific CPUs | Reverse "who last wrote this?" queries are possible on a snapshot trace too |
+| **Quokka / Wallaby** | Inline values next to code, value explorer | Transpiles, then "adjusts your code" (instrumentation), runs in Node [S14] | Editor plugin; "Time Machine" details **(unverified)** | Inline value annotations in the editor gutter for the current step |
+| **StackBlitz WebContainers** | Full Node toolchain in a tab | Browser-based Node runtime [S15]; internals and header requirements **(unverified)** | Commercial terms for non-OSS use; no tracing API documented | Not a fit: heavy, and it does not expose state |
+| **Sandpack** (CodeSandbox) | Bundled preview in an iframe | Client talks to a hosted bundler iframe by `dispatch`/`listen` messages [S16] | Depends on a hosted bundler by default; no state tracing | The iframe message protocol pattern we already use |
+| **Observable runtime** | Reactive cells | Dataflow: variables recompute when inputs change; observers get `pending/fulfilled/rejected` [S17] | Different execution model from plain JS | "Change an input, everything downstream updates" for parameterised scenarios |
+| **JS-Interpreter** (Fraser) | n/a (engine) | Interpreter in JS with `step()`, exposed state stack and scopes, serialisable state [S18] | **ES5 only**, about 200x slower than native, no `let`, no promises [S18] | Reference for how an interpreter exposes scopes |
+| **Sval** | n/a (engine) | Acorn-based interpreter, "latest" ES [S19] | No step or hook API documented [S19] | Little without forking |
+| **quickjs-emscripten** | n/a (engine) | QuickJS compiled to WASM; host drives the promise job queue with `executePendingJobs()`, interrupt handler, memory limit [S20] | No stepping, debugger or heap-inspection API; about 500 KB to 1.3 MB of WASM [S20] | Host-controlled job queue is the cleanest proof that "we own the event loop" is the right model |
+| **Jalangi2** | n/a (analysis framework) | Source instrumentation with analysis callbacks; ships a shadow-memory analysis (`SMemory.js`) [S21] | Targets ES5.1; ES6 untested [S21] | The design: every operation calls a hook, analyses are plug-ins |
+
+## **B. Techniques for the gaps**
+
+**B1. Object identity and the heap graph.** Python Tutor's JS backend tags each object once with a hidden non-enumerable id and emits `["REF", id]` wherever it is referenced, so two variables pointing at one object visibly share it [S3]. In the browser a `WeakMap<object, number>` does the same without touching the object: keys are held weakly, compared by reference, and the feature is Baseline widely available [S22]. The current tracker (`services/instrumentCode.ts`) deep-clones values with `safeClone`, which destroys identity: `a` and `b` aliasing one array become two copies.
+*Suggestion:* replace `safeClone` with an encoder that assigns ids from a `WeakMap`, walks from the frame variables (depth and node caps as today), and writes each object once into `heap[id]` with slots that are either a primitive or `{ refId }`. Reachability from frames is then computed, not guessed, which is exactly what `stackHeapStory.ts` asserts in its tests.
+
+**B2. Closures and scope chains.** Python Tutor models this with `frame_id`, `parent_frame_id_list` and `is_zombie` (a returned frame kept alive by a closure) [S2]; its V8-based JS backend could not tie scopes to frames and fell back to inlining [S3]. Instrumentation can do better than the debugger here because we control function entry.
+*Suggestion:* on `enterFunction`, allocate a scope record with an id and the id of the scope where the function was *created* (capture it when the function expression is evaluated, stored in a `WeakMap<function, scopeId>`). A scope that is still referenced by a live function after its frame pops stays in the snapshot as a "retained scope". This draws the scope chain literally.
+
+**B3. Microtask and task queues.** The ordering rules are short: after each task, when the stack is empty, the whole microtask queue drains, including microtasks queued while draining, before the next task [S23]. Three ways to observe it:
+- *Engine hooks:* `async_hooks` gives exact events but is Node-only [S7].
+- *Patching globals in the sandbox:* wrap `setTimeout`, `queueMicrotask` and `Promise.prototype.then` so each records enqueue, start and end. Native `await` does not go through a patchable `then`; Angular's docs say `async/await` "cannot be patched effectively" by ZoneJS and must be downleveled [S24]. With an AST pass we can instead rewrite `await x` to report suspend and resume around it.
+- *Owning the loop:* QuickJS shows the model: nothing asynchronous runs until the host calls `executePendingJobs()` [S20].
+*Suggestion:* inside the sandbox, replace `setTimeout`/`setInterval`/`queueMicrotask` with traced versions backed by our own queues and a virtual clock, and drive them with a small loop (run script, drain microtasks, take next task). Promise reactions are recorded by wrapping `then`/`catch`/`finally` and by the `await` rewrite. Timers then fire instantly and deterministically, and the queue contents at every step are known rather than inferred. Validate the loop against the MDN/HTML ordering examples as unit tests. Whether a wrapped `then` plus `await` rewrite reproduces every native ordering edge case is **(unverified)** and needs a test corpus.
+
+**B4. Step limits and infinite loops.** Python Tutor stops at a fixed number of executed lines and emits a dedicated `instruction_limit_reached` event with a readable message [S1][S2]. `loop-protect` inserts a time check into every loop and cannot catch runaway recursion [S25]. Pyodide can only be interrupted from another thread through a `SharedArrayBuffer`, which needs a worker and cross-origin isolation headers [S26]. Local observation: `__tracker__.step` currently *returns silently* once `MAX_STEPS` is reached, so an infinite loop keeps spinning without recording, and the in-iframe `setTimeout` watchdog cannot fire while the same thread is busy.
+*Suggestion:* make the step budget *throw* a `StepLimitError` (counted on every step, loop iteration and function entry), surface it as a final trace event, and keep the partial trace. As a hard backstop run JS in a Web Worker inside the sandboxed iframe and `terminate()` it on timeout. For Python, count steps in the trace function and raise; treat the `SharedArrayBuffer` interrupt as optional.
+
+**B5. TypeScript without a heavy compiler.** Type stripping replaces annotations with whitespace so line and column numbers are unchanged and no source map is needed; this is how Node runs `.ts` and how `ts-blank-space` works [S27][S28]. It rejects enums, runtime namespaces, parameter properties and `import =` [S27][S28]; `erasableSyntaxOnly` flags the same constructs [S29]. Sucrase strips types too, also handles enums, and does not type-check [S30]. Local observation: a grep found no transpile step in the playground; `useSandbox.ts` only says TS "should be transpiled before passing to execute", and `acorn` cannot parse annotations.
+*Suggestion:* position-preserving stripping is the right fit because the tracer reports original line numbers. Options, cheapest first: (1) ask Monaco's bundled TypeScript worker for emit output, no new dependency, line preservation **(unverified)**; (2) a stripping library (new dependency, owner approval and the `add-dependency` skill apply). Either way, restrict playground TS to erasable syntax and say so in the UI.
+
+**B6. Python heap under Pyodide.** Python Tutor's Python trace is the reference: full stack and heap per line, heap keyed by object id [S1][S2]. CPython 3.12 added `sys.monitoring` with `LINE`, `PY_START`, `PY_RETURN` and per-location disabling [S31]; the playground pins Pyodide v0.27.7, whose Python version is **(unverified)** (recent Pyodide releases ship 3.13 and 3.14 [S32]).
+*Suggestion:* keep `sys.settrace`, and in the trace callback encode `frame.f_locals` with `id(obj)` as the heap key into the *same* snapshot schema as JS, so every lens works for both languages. Follow Python Tutor's choice to draw immutable primitives inline in the frame to avoid arrow clutter [S4]. Consider `sys.monitoring` only if tracing speed becomes a problem.
+
+## **C. 3D and spatial visualization**
+
+- **Guided camera, text-led.** Ciechanowski's articles pair one mechanism per figure with prose, sliders that scrub state, drag-to-rotate, colour-coded named parts and a global pause [S33]. Bycroft's LLM visualization is a 3D model of a network "running inference" [S34]; its walkthrough UI could not be read by the fetch tool, so the guided-camera description in the 3D standard is **(unverified)** here.
+- **Evidence for 3D.** CodeCity's controlled experiment (41 participants) found a statistically significant gain in correctness and reduction in completion time for program-comprehension tasks [S35]; effect sizes and the baseline tool are **(unverified)**. Against that, Cockburn and McKenzie found spatial-memory performance fell as users gained more freedom to use the third dimension, and users rated those interfaces more cluttered (abstract only) [S36]. Shneiderman argues that disorienting navigation, complex actions and occlusion slow people down, and that good 3D interfaces need overviews, fewer actions and prompt feedback [S37]. A 2026 VR study of software-evolution visualization concluded immersive views do not universally beat traditional ones (search summary only, **unverified**) [S38].
+- **Reading of the evidence (inference).** 3D earns its place for *structure with a meaningful third axis* and loses on precise reading, text and anything occluded. For program state the candidates are: stack above heap with references crossing the gap; scope chain as nested depth; the event loop as lanes (stack, microtasks, tasks) with callbacks moving between them. Flat lists, arrays and variable tables gain nothing.
+*Suggestion:* in the playground, offer 3D only on lenses that pass that test (heap/stack and scope chain first), reuse `src/shared/viz3d/` and the shared toolbar, and derive each step's shot automatically from the trace: frame the frame or object that changed, which is the `focus` field of the story step model. Keep 2D the default and keep labels in the DOM.
+
+## **D. Pedagogy for a practice playground**
+
+- **Engagement beats graphics.** The meta-study of 24 algorithm-visualization experiments concluded that how learners use the technology matters more than what it shows (abstract and secondary summaries) [S39]. The ITiCSE engagement taxonomy orders activity as no viewing, viewing, responding, changing, constructing, presenting [S40]. Guo's own paper lists "question prompts, mini-quizzes, textual annotations" as the missing active-engagement features [S1].
+- **Predict before run.** PRIMM (Predict, Run, Investigate, Modify, Make) was evaluated with 493 students aged 11 to 14 in 13 schools; the PRIMM group outperformed the control on the post-test [S41].
+- **References are the core misconception.** In a study of 90 first-year students, about one third held non-viable models of value assignment and only 17% held a viable model of reference assignment; visualization combined with *cognitive conflict* (confronting a wrong prediction) worked better than visualization alone [S42].
+- **Async misconceptions.** No peer-reviewed study of novice misconceptions about the JS event loop was found. The commonly cited ones (a zero-delay timer runs immediately; promises are threads; timer delay is exact; promise callbacks and timers run in call order) come from tutorials and are **(unverified)** as research findings. MDN's ordering example is a ready-made prediction exercise [S23].
+- **Explorables and learnable programming.** Victor: show the state, make flow visible and controllable through time, start concrete, and note that live re-execution alone "misses the point" [S43]; explorable explanations let the reader change the author's assumptions [S44].
+- **Parsons problems.** The 2022 ITiCSE review covers the literature; a 2023 follow-up reports evidence for learning common patterns and for distractors (search summaries only, **unverified**) [S45].
+*Suggestion:* add a "Predict" mode to the timeline: before a marked step the view freezes and asks one question whose answer is in the next snapshot ("what does `b[0]` hold now?", "which callback runs next?"), then reveals it. Questions can be generated from the trace: aliasing questions wherever two slots share a `refId`, ordering questions wherever both queues are non-empty. Link lessons to the playground with a URL that carries snippet id, lens and step (the existing `?scenario=<id>` convention), and make each example a short PRIMM ladder: predict, run, investigate with the lens, then a "modify so that…" task checked against the console output or final heap.
+
+## **E. Layout and accessibility**
+
+- **Layout precedent.** Python Tutor puts code and the step slider on the left and frames/objects on the right, with every interaction after the trace arrives happening client-side [S1]. It states plainly that it is not for mobile [S4].
+- **Small screens.** Monaco's FAQ answers "No" to mobile browser support [S46]; CodeMirror 6 advertises native selection and editing on phones and screen-reader support [S47]. WCAG 2.2 Reflow requires no two-dimensional scrolling at 320 CSS px, with an exception for content such as diagrams and editing interfaces that need two dimensions [S48].
+- **Canvas and 3D.** The HTML spec requires canvas fallback content that "conveys essentially the same function or purpose" and a one-to-one mapping from interactive regions to focusable fallback elements [S49]. The vendored `modern-web-guidance` guides describe HTML-in-Canvas (`layoutsubtree`) for exposing canvas content, which needs a feature check and a fallback (local files, not Baseline widely available).
+*Suggestion:* desktop: editor left, visualization right, timeline as a full-width strip under both, console as a collapsible drawer. Below about 768 px: one pane at a time behind tabs (Code, Visualize, Console) with the timeline pinned at the bottom, and a read-only highlighted code view plus a plain `<textarea>` editing fallback instead of Monaco. Accessibility: every step produces a one-sentence narration in an `aria-live="polite"` region ("line 9: `ada.friends` now references Bob"), and the snapshot is also rendered as DOM tables (frames, heap, queues) that serve as the canvas fallback; the 2D SVG and the 3D view are both projections of that same data. Keep the existing keyboard map (arrows to step) and `useReducedMotion`.
+
+## **Ranked ideas (payoff for effort)**
+
+1. **Adopt one snapshot schema shaped like Python Tutor's trace and the story step model** (frames with slots, heap keyed by id, `refId` references, explicit event types). It unlocks every item below and lets `StackHeap2D`/`StackHeap3D` become playground lenses, which is the rollout step the 3D standard already names.
+2. **Stable object ids with a `WeakMap` and a reachability walk** in place of `safeClone`. Small change, fixes the largest teaching gap (aliasing).
+3. **Step budget that throws, partial trace kept, Worker `terminate()` as backstop.** Fixes a present correctness risk.
+4. **Predict mode on the timeline**, with questions generated from the trace. Highest learning payoff per line of code according to [S39][S41][S42].
+5. **Traced event loop in the sandbox** (own queues, virtual clock, `await` rewrite). Gives the event-loop lens real data; moderate effort, needs an ordering test corpus.
+6. **Scope records with creation-scope ids** for closures and retained scopes.
+7. **Lesson deep links and PRIMM ladders** (`?scenario`/snippet, lens, step).
+8. **Position-preserving TypeScript stripping**, erasable syntax only.
+9. **Python parity** by emitting the same schema from the `settrace` wrapper with `id()` keys.
+10. **Step narration and DOM table mirror** for accessibility, plus the tabbed small-screen layout.
+
+## **Tracer architecture: instrumentation or interpreter**
+
+Stay with **AST instrumentation running on the browser's own engine**, and deepen it (expression-level hooks, ids, scope records, a traced event loop). Reasons: it keeps current ES syntax for free, adds no large payload, runs at near-native speed, and Loupe, JS Visualizer 9000, Quokka and Jalangi2 all show the approach scales to the events we need [S6][S7][S14][S21]. The interpreter route gives total visibility and true pause/resume, but JS-Interpreter is ES5-only and about 200x slower [S18], Sval documents no step hooks [S19], and QuickJS-in-WASM has no stepping or heap API, so it would still need the same instrumentation while adding 0.5 to 1.3 MB [S20]. **Trade-off accepted:** instrumentation sees only what it rewrites. Built-in internals (native `await` scheduling, callbacks invoked by `Array.prototype.map`, getters, engine GC) are invisible unless each is given a hook, and the traced event loop is our model of the specification rather than the engine itself, so it must be tested against known orderings.
+
+## **Could not verify**
+
+- Python Tutor's original repository (`pgbovine/OnlinePythonTutor`) now returns 404; the trace-format doc and `jslogger.js` were read from a third-party backup fork [S2][S3]. The UIST 2021 design-guidelines paper was not retrieved.
+- How ui.dev's JavaScript Visualizer, VisuAlgo, Thonny and the recursion visualizers obtain their traces.
+- Loupe's use of a Web Worker; Bycroft's walkthrough and camera behaviour; WebContainers internals.
+- CodeCity effect sizes; full results of Cockburn and McKenzie; the 2026 VR study; Parsons-problem findings; the original Hundhausen and Naps texts (abstracts and summaries only).
+- Any peer-reviewed research on novice misconceptions about the JS event loop.
+- That Monaco's TypeScript worker emit preserves line numbers; the Python version in Pyodide v0.27.7; `executePendingJobs` accepting a job count; that a wrapped `then` plus `await` rewrite matches native ordering in all cases.
+
+## **Sources**
+
+- [S1] Guo, "Online Python Tutor: Embeddable Web-Based Program Visualization for CS Education", SIGCSE 2013. https://pg.ucsd.edu/publications/Online-Python-Tutor-web-based-program-visualization_SIGCSE-2013.pdf
+- [S2] Online Python Tutor, "Execution Trace Format" (backup fork of the original repo). https://github.com/zetaloop/OnlinePythonTutor-Backup/blob/HEAD/v3/docs/opt-trace-format.md
+- [S3] Online Python Tutor JS backend `jslogger.js` (same backup fork). https://github.com/zetaloop/OnlinePythonTutor-Backup/blob/HEAD/v4-cokapi/backends/javascript/jslogger.js
+- [S4] Python Tutor, "Unsupported features". https://github.com/pythontutor-dev/pythontutor/blob/master/unsupported-features.md
+- [S5] Python Tutor, JavaScript visualizer guide for teachers. https://pythontutor.com/articles/javascript-visualizer.html
+- [S6] Loupe source (`lib/instrument-code.js`, `lib/delay.js`, `components/`). https://github.com/latentflip/loupe
+- [S7] JS Visualizer 9000 server (`src/worker/worker.js`, README). https://github.com/Hopding/js-visualizer-9000-server ; client: https://github.com/Hopding/js-visualizer-9000-client
+- [S8] vm2 README, security disclaimer. https://github.com/patriksimek/vm2
+- [S9] Lydia Hallie, "JavaScript Visualized: Event Loop" (post and comments). https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif
+- [S10] Algorithm Visualizer `tracers.js`. https://github.com/algorithm-visualizer/tracers.js
+- [S11] Thonny. https://thonny.org/
+- [S12] Replay, "How Replay works". https://blog.replay.io/how-replay-works
+- [S13] rr project. https://rr-project.org/
+- [S14] Quokka.js, "How does it work?". https://www.quokkajs.com/docs/how-does-it-work.html
+- [S15] WebContainers introduction. https://webcontainers.io/guides/introduction
+- [S16] Sandpack client docs. https://sandpack.codesandbox.io/docs/advanced-usage/client
+- [S17] Observable runtime. https://github.com/observablehq/runtime
+- [S18] JS-Interpreter documentation. https://neil.fraser.name/software/JS-Interpreter/docs.html
+- [S19] Sval. https://github.com/Siubaak/sval
+- [S20] quickjs-emscripten. https://github.com/justjake/quickjs-emscripten
+- [S21] Jalangi2. https://github.com/Samsung/jalangi2
+- [S22] MDN, `WeakMap`. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakMap
+- [S23] MDN, "Using microtasks in JavaScript with queueMicrotask()". https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide
+- [S24] Angular, zoneless guide (v19). https://v19.angular.dev/guide/experimental/zoneless
+- [S25] loop-protect. https://github.com/jsbin/loop-protect
+- [S26] Pyodide, "Interrupting execution". https://pyodide.org/en/stable/usage/keyboard-interrupts.html
+- [S27] Node.js, "Modules: TypeScript" (type stripping). https://nodejs.org/api/typescript.html
+- [S28] Bloomberg, ts-blank-space. https://bloomberg.github.io/ts-blank-space/
+- [S29] TypeScript, `erasableSyntaxOnly`. https://www.typescriptlang.org/tsconfig/erasableSyntaxOnly.html
+- [S30] Sucrase. https://github.com/alangpierce/sucrase
+- [S31] Python docs, `sys.monitoring`. https://docs.python.org/3/library/sys.monitoring.html
+- [S32] Pyodide changelog. https://pyodide.org/en/stable/project/changelog.html
+- [S33] Ciechanowski, "Mechanical Watch". https://ciechanow.ski/mechanical-watch/
+- [S34] Bycroft, llm-viz. https://github.com/bbycroft/llm-viz ; https://bbycroft.net/llm
+- [S35] Wettel, Lanza, Robbes, "Software Systems as Cities: A Controlled Experiment", ICSE 2011 (abstract). https://2011.icse-conferences.org/content/software-systems-cities-controlled-experiment.html
+- [S36] Cockburn, McKenzie, "Evaluating the Effectiveness of Spatial Memory in 2D and 3D Physical and Virtual Environments", CHI 2002. https://dx.doi.org/10.1145/503376.503413
+- [S37] Shneiderman, "Why Not Make Interfaces Better than 3D Reality?", IEEE CG&A 2003. https://drum.lib.umd.edu/handle/1903/6523
+- [S38] "Immersion vs. familiarity: A controlled experiment of software evolution visualization in virtual reality", Empirical Software Engineering 2026. https://link.springer.com/article/10.1007/s10664-026-10836-0
+- [S39] Hundhausen, Douglas, Stasko, "A Meta-Study of Algorithm Visualization Effectiveness", JVLC 2002, DOI 10.1006/JVLC.2002.0237. https://www.academia.edu/15636659/A_Meta_Study_of_Algorithm_Visualization_Effectiveness
+- [S40] Naps et al., "Exploring the role of visualization and engagement in computer science education", ITiCSE-WGR 2002. https://rex.libraries.wsu.edu/esploro/outputs/journalArticle/Exploring-the-role-of-visualization-and/99900547176001842
+- [S41] Sentance, Waite, Kallia, "Teaching computer programming with PRIMM: a sociocultural perspective", Computer Science Education 2019, DOI 10.1080/08993408.2019.1608781. https://qmro.qmul.ac.uk/xmlui/handle/123456789/57800
+- [S42] Ma, Ferguson, Roper, Wood, "Investigating the viability of mental models held by novice programmers" (2007) and follow-ups. https://strathprints.strath.ac.uk/3145/ ; https://strathprints.strath.ac.uk/32524/
+- [S43] Victor, "Learnable Programming". https://worrydream.com/LearnableProgramming/
+- [S44] Victor, "Explorable Explanations". https://worrydream.com/ExplorableExplanations/
+- [S45] Ericson et al., "Parsons Problems and Beyond", ITiCSE-WGR 2022. https://aaltodoc.aalto.fi/items/a77c8afa-0f57-4ef6-85d2-4f982776677c
+- [S46] Monaco Editor README (FAQ). https://github.com/microsoft/monaco-editor
+- [S47] CodeMirror. https://codemirror.net/
+- [S48] W3C, Understanding SC 1.4.10 Reflow. https://www.w3.org/WAI/WCAG22/Understanding/reflow.html
+- [S49] HTML Standard, the `canvas` element. https://html.spec.whatwg.org/multipage/canvas.html
+- Local: `docs/3D-Visualization-Standard.md`, `docs/Playground-Developer-Guide.md`, `src/features/playground/services/instrumentCode.ts`, `src/features/javascript/utils/stackHeapStory.ts`, `.agents/skills/modern-web-guidance/guides/visual-design/`.
diff --git a/docs/adr/0001-optional-3d-with-one-step-model.md b/docs/adr/0001-optional-3d-with-one-step-model.md
index 5704579..3e055f3 100644
--- a/docs/adr/0001-optional-3d-with-one-step-model.md
+++ b/docs/adr/0001-optional-3d-with-one-step-model.md
@@ -1,4 +1,4 @@
-# 0001: Optional 3D views rendered from one step model
+# 0001: Optional 3D views rendered from one beat model
 
 - Status: accepted (2026-09-25); prototype in PR #168
 - Details: [docs/3D-Visualization-Standard.md](../3D-Visualization-Standard.md)
@@ -9,8 +9,8 @@ A first round of 3D (raw Three.js, a custom engine, metaphor scenes such as an a
 
 ## Decision
 
-- Visualizations are **stories**: a step model of pure-data snapshots, one per beat, with tests. Views render a step; they hold no story state.
-- The 2D SVG view is the default. A 3D view is optional and renders the same step model, so switching views keeps the step.
+- Visualizations are **stories**: a beat model of pure-data snapshots, one per beat, with tests. Views render a beat; they hold no story state.
+- The 2D SVG view is the default. A 3D view is optional and renders the same beat model, so switching views keeps the beat.
 - 3D uses `three` + `@react-three/fiber` + `@react-three/drei`. It is literal (no metaphors), uses an orthographic isometric camera with a preset shot per beat, flat-shaded limited colours, and DOM labels.
 - The 3D renderer is `React.lazy`-loaded; three.js never reaches the entry bundle. Without WebGL, or on error, the story falls back to 2D; reduced motion turns motion into cuts.
 
@@ -18,5 +18,5 @@ A first round of 3D (raw Three.js, a custom engine, metaphor scenes such as an a
 
 - One story definition serves both views; tests prove each story's key claims against the data.
 - The 3D chunk (~260 KB gzip for the prototype) costs only learners who choose 3D.
-- Existing 2D visualizations predate the step model and stay as they are until migrated one by one.
+- Existing 2D visualizations predate the beat model and stay as they are until migrated one by one.
 - Rolling 3D out beyond the prototype waits for the owner's sign-off on the standard's review checklist.
diff --git a/docs/adr/0003-scenarios-with-choice-points.md b/docs/adr/0003-scenarios-with-choice-points.md
index 900ac8f..4903b37 100644
--- a/docs/adr/0003-scenarios-with-choice-points.md
+++ b/docs/adr/0003-scenarios-with-choice-points.md
@@ -9,7 +9,7 @@ Stories teach one concept each. The owner also wants learners to follow a whole
 
 ## Decision
 
-- A **scenario** is a kind of story: the same step model (full snapshot per beat, stable ids and cells, state as data), the same 2D and optional 3D views, and the same pipeline and approval gate. It adds a **cast**, a **timeline** and a **transcript** (who acted, when, what they ran, what it printed).
+- A **scenario** is a kind of story: the same beat model (full snapshot per beat, stable ids and cells, state as data), the same 2D and optional 3D views, and the same pipeline and approval gate. It adds a **cast**, a **timeline** and a **transcript** (who acted, when, what they ran, what it printed).
 - A scenario has a main path that may end at a **choice point**. Each option runs its own **path** to its own ending, and a path may end at one more choice point. At most 2 choice points; main path 5–10 beats, other paths 3–6, at most 24 beats in total.
 - **Paths never rejoin.** Each ending shows an outcome summary and offers the other path.
 - Each member of the cast is drawn as their own copy of the system (their clone, the remote, the CI runner), never as a person. People appear only as name tags.
diff --git a/docs/adr/0004-playground-traces-share-the-snapshot.md b/docs/adr/0004-playground-traces-share-the-snapshot.md
new file mode 100644
index 0000000..cd6a71a
--- /dev/null
+++ b/docs/adr/0004-playground-traces-share-the-snapshot.md
@@ -0,0 +1,46 @@
+# 0004: Playground traces share the story snapshot and are recorded by instrumentation
+
+- Status: accepted (2026-10-11)
+- Glossary: [CONTEXT.md](../../CONTEXT.md) (playground, trace, step, snapshot, lens, focus, example, exercise)
+- Evidence: [Playground Audit 2026-10](../RESEARCH/Playground%20Audit%202026-10.md), [Playground Design Research](../RESEARCH/Playground%20Design%20Research.md)
+
+## Context
+
+Stories teach a concept through authored beats, drawn in 2D and optionally 3D ([ADR 0001](0001-optional-3d-with-one-step-model.md)). The owner wants the Playground to be the practice half of the site: after the theory, a learner runs their own code and watches what happens underneath, in the same 2D and 3D views.
+
+The October 2026 audit found that the Playground cannot do this today:
+
+- Its tracer records a line, a call stack and one flat list of variables. The heap and both queues are always empty.
+- Values are deep-copied on every step, so two variables that point at one object look like two objects. A reference cannot be drawn.
+- Callbacks, object methods and function expressions are not traced. TypeScript does not run.
+- Stories and the Playground describe the same things with two incompatible shapes, and draw them with different technology (SVG and react-three-fiber against React Flow).
+- Two other "playgrounds" exist. `src/components/playground/` is a problem-and-tests shell that never runs the learner's code. The RxJS module has a marble tool that simulates three operators.
+
+## Decision
+
+1. **One snapshot, two sources.** A story's beat and a trace's step both hold a snapshot: entities with stable identities, slots, and references between them. A beat adds what an author wrote (title, caption, shot, focus). A step adds what the run produced (the line that ran) and a focus derived from what that step changed. A step has no shot.
+2. **One set of views.** The 2D and 3D views draw a snapshot and do not know whether it came from a beat or a step. The Playground's lenses are rebuilt on these views; a lens chooses which regions are drawn, and every lens can be shown in 2D or 3D. The rules of ADR 0001 and the 3D standard apply unchanged: 2D is the default, 3D is lazy-loaded, and without WebGL or on error the view falls back to 2D.
+3. **Traces are recorded by instrumenting the learner's code and running it on the browser's own engine**, inside the existing sandbox. The tracer gives each object a stable identity, records variables per frame, follows functions wherever they are written, and records the microtask and task queues.
+4. **A trace is never presented as a story.** It has no approved spec, no captions and no aha beat. Unreachable objects may be marked as unreachable, because that is computed from the snapshot. A garbage-collection sweep is never shown in a trace, because a run cannot observe one.
+5. **There is exactly one Playground.** `src/components/playground/` is retired and its code removed. What is worth keeping moves into the Playground as exercises: the task, checks and hints structure and the existing problem set. The RxJS tool stays in its module as the marble diagram tool, and its stub code editor is removed.
+6. **The Playground is dark.** It is the one exception to the site's light-mode rule. Views therefore take their colours from a palette with a light and a dark variant, where each colour keeps its one role.
+7. **JavaScript first.** The snapshot and the views are language-neutral. The JavaScript tracer is built first, TypeScript runs through it once its types are stripped, and Python follows later by emitting the same snapshot.
+
+## Considered options
+
+- **Run the code in a JavaScript interpreter** (JS-Interpreter, Sval, QuickJS in WebAssembly). An interpreter would see everything, including the real queues, and could pause mid-statement. Rejected: JS-Interpreter supports only ES5 and is about 200 times slower; Sval documents no step hooks; QuickJS exposes no stepping or heap API, so it would need the same instrumentation and add 0.5 to 1.3 MB.
+- **Keep the Playground's own snapshot shape and lenses, and add 3D lenses beside them.** Rejected: every concept would be drawn twice, in two styles, and a learner moving from a story to the Playground would see a different picture of the same thing.
+- **Generate a story from a run**, with captions written by rules. Rejected: a story is approved by the owner and proves its key claim with a test. Generated captions on arbitrary code can be wrong, and the learner cannot tell.
+- **Keep the old playground beside the new one.** Rejected: it does not run code, and two playgrounds split both the learner's attention and the maintenance.
+
+## Consequences
+
+- **The tracer sees only what it rewrites.** Work the engine does on its own stays invisible unless it is given a hook: callbacks called by built-ins such as `Array.prototype.map`, getters, and how a native `await` is scheduled.
+- **The queues are the tracer's model of the specification, not the engine's own queues.** The model needs a test corpus of known orderings, and the Playground must say so where it matters.
+- **Arbitrary code has no author.** Stories place entities in hand-picked cells and check every label by hand. Traces need automatic placement, limits on how much is drawn, and a clear message when a snapshot is too large to draw.
+- **The step limit must stop the run.** Today the tracker stops recording at its limit while the code keeps running, so an infinite loop never ends. The limit has to end the run and keep the partial trace.
+- **The existing stories change.** Their types move to the shared snapshot, and the Stack ↔ Heap views become the first shared views. The three 3D renderers currently duplicate their palette, labels and scene helpers; this decision requires extracting them.
+- **Names change.** "Step model" becomes "beat model" in `AGENTS.md`, the `step-model` skill, ADR 0001, the 3D standard and the code, in one dedicated pass. Playground code stops using "snapshot", "timeline" and "example snippet" in their old senses.
+- **`AGENTS.md` changes on acceptance.** "Light mode only" gains the Playground exception, and this ADR is linked from it.
+- **Pages lose a section.** Removing the old playground takes a section out of the Big-O and Data Structures pages, their sidebar and navigation entries, and the README. `src/utils/instrument.ts` stays, because the JavaScript module's Call Stack and Memory Heap sections use it.
+- **Open, decided later:** whether the Data Structures and Streams lenses survive as lenses; how TypeScript types are stripped (Monaco's own TypeScript worker needs no new dependency, a stripping library does); and whether exercises carry achievements.
diff --git a/docs/stories/README.md b/docs/stories/README.md
index 8da4e58..d7c4c6c 100644
--- a/docs/stories/README.md
+++ b/docs/stories/README.md
@@ -1,3 +1,3 @@
 # Story specs
 
-One file per story visualization, `docs/stories/<module>/<story-id>.md`, written by the `viz-story-writer` agent from the template in `.agents/skills/step-model/spec-template.md`. A spec is approved by the owner before its step model is written; after that it records why each beat exists.
+One file per story visualization, `docs/stories/<module>/<story-id>.md`, written by the `viz-story-writer` agent from the template in `.agents/skills/beat-model/spec-template.md`. A spec is approved by the owner before its beat model is written; after that it records why each beat exists.
diff --git a/docs/stories/git/ship-a-feature.md b/docs/stories/git/ship-a-feature.md
index d055095..4308e2c 100644
--- a/docs/stories/git/ship-a-feature.md
+++ b/docs/stories/git/ship-a-feature.md
@@ -113,7 +113,7 @@ Outcome (ending): Merging preserved the true history: every SHA you pushed survi
 
 Aha beats:
 
-- main#5 `looks-up-to-date`: breaks "`origin/main` is GitHub's `main`" and "up to date means up to date with the server". Test: at this beat `isStale(step, 'you.origin/main')` is true (`a1f0` vs `c9d1`), and it turns false only at `fetch`.
+- main#5 `looks-up-to-date`: breaks "`origin/main` is GitHub's `main`" and "up to date means up to date with the server". Test: at this beat `isStale(beat, 'you.origin/main')` is true (`a1f0` vs `c9d1`), and it turns false only at `fetch`.
 - rebase#1 `rebase-copies`: breaks "rebase moves my commit". Test: `you.d4e2` and `you.f1a3` both exist with the same message and different parents, and `d4e2` is still reachable from `you.origin/feature/search`.
 - rebase#2 `rebase-push-rejected`: breaks "once I've integrated `main`, my push will go through". Test: `isAncestor(route, 'you', 'd4e2', 'f1a3')` is false while `origin.feature/search` names `d4e2`; the contrast test on `merge-push` shows `isAncestor(…, 'd4e2', 'e5a6')` is true.
 
diff --git a/src/features/git/components/sections/BranchPointersStory.test.tsx b/src/features/git/components/sections/BranchPointersStory.test.tsx
index bc8b060..d62caab 100644
--- a/src/features/git/components/sections/BranchPointersStory.test.tsx
+++ b/src/features/git/components/sections/BranchPointersStory.test.tsx
@@ -2,7 +2,7 @@ import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { render, screen, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import type { BranchPointers3DProps } from '../visualizations/3d/BranchPointers3D';
-import { STORY_STEPS } from '../../utils/branchPointersStory';
+import { STORY_BEATS } from '../../utils/branchPointersStory';
 
 const webgl = vi.hoisted(() => ({ available: true }));
 const motion = vi.hoisted(() => ({ reduced: false }));
@@ -13,7 +13,7 @@ vi.mock('../../../../shared/hooks', async (importOriginal) => ({
   useReducedMotion: () => motion.reduced,
 }));
 vi.mock('../visualizations/3d/BranchPointers3D', () => ({
-  default: ({ step, instant, camera }: BranchPointers3DProps) => (
+  default: ({ beat, instant, camera }: BranchPointers3DProps) => (
     <div
       data-testid="scene-3d"
       data-instant={String(Boolean(instant))}
@@ -21,14 +21,14 @@ vi.mock('../visualizations/3d/BranchPointers3D', () => ({
       data-hold={String(camera.hold)}
       data-command={camera.command?.kind ?? ''}
     >
-      {step.id}
+      {beat.id}
     </div>
   ),
 }));
 
 import BranchPointersStory from './BranchPointersStory';
 
-const total = STORY_STEPS.length;
+const total = STORY_BEATS.length;
 const VIEW_KEY = 'code-executives.branch-pointers-story.view';
 
 describe('BranchPointersStory', () => {
@@ -38,20 +38,20 @@ describe('BranchPointersStory', () => {
     motion.reduced = false;
   });
 
-  it('starts in 2D on step 1 and steps forward and back', async () => {
+  it('starts in 2D on beat 1 and steps forward and back', async () => {
     const user = userEvent.setup();
     render(<BranchPointersStory />);
 
     expect(screen.getByRole('radio', { name: /2d/i })).toHaveAttribute('aria-checked', 'true');
-    expect(screen.getByText(`Step 1 / ${total}`)).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: 'Previous step' })).toBeDisabled();
+    expect(screen.getByText(`Beat 1 / ${total}`)).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Previous beat' })).toBeDisabled();
 
-    await user.click(screen.getByRole('button', { name: 'Next step' }));
-    expect(screen.getByText(`Step 2 / ${total}`)).toBeInTheDocument();
+    await user.click(screen.getByRole('button', { name: 'Next beat' }));
+    expect(screen.getByText(`Beat 2 / ${total}`)).toBeInTheDocument();
     expect(screen.getByRole('img', { name: /A branch is just a label/ })).toBeInTheDocument();
 
-    await user.click(screen.getByRole('button', { name: 'Previous step' }));
-    expect(screen.getByText(`Step 1 / ${total}`)).toBeInTheDocument();
+    await user.click(screen.getByRole('button', { name: 'Previous beat' }));
+    expect(screen.getByText(`Beat 1 / ${total}`)).toBeInTheDocument();
     expect(screen.getByRole('img', { name: /A commit points to its parent/ })).toBeInTheDocument();
   });
 
@@ -61,11 +61,11 @@ describe('BranchPointersStory', () => {
 
     screen.getByLabelText(/Branch pointers story/).focus();
     for (let i = 0; i < total + 2; i++) await user.keyboard('{ArrowRight}');
-    expect(screen.getByText(`Step ${total} / ${total}`)).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: 'Next step' })).toBeDisabled();
+    expect(screen.getByText(`Beat ${total} / ${total}`)).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Next beat' })).toBeDisabled();
 
     await user.keyboard('{ArrowLeft}');
-    expect(screen.getByText(`Step ${total - 1} / ${total}`)).toBeInTheDocument();
+    expect(screen.getByText(`Beat ${total - 1} / ${total}`)).toBeInTheDocument();
   });
 
   it('shows the literal HEAD file: a branch name, then a commit id when detached', async () => {
@@ -74,48 +74,48 @@ describe('BranchPointersStory', () => {
     const headCard = () => container.querySelector('[data-ref="HEAD"]')!;
 
     expect(headCard()).toHaveTextContent('ref: refs/heads/main');
-    const detached = STORY_STEPS.findIndex((s) => s.id === 'detached-head');
+    const detached = STORY_BEATS.findIndex((s) => s.id === 'detached-head');
     for (let i = 0; i < detached; i++)
-      await user.click(screen.getByRole('button', { name: 'Next step' }));
+      await user.click(screen.getByRole('button', { name: 'Next beat' }));
     expect(headCard()).toHaveTextContent('b2c4');
     expect(headCard()).toHaveTextContent('DETACHED');
     expect(headCard()).not.toHaveTextContent('ref: refs/heads');
   });
 
-  it('keeps the current step when switching to 3D and back', async () => {
+  it('keeps the current beat when switching to 3D and back', async () => {
     const user = userEvent.setup();
     render(<BranchPointersStory />);
 
-    for (let i = 0; i < 6; i++) await user.click(screen.getByRole('button', { name: 'Next step' }));
-    expect(screen.getByText(`Step 7 / ${total}`)).toBeInTheDocument();
+    for (let i = 0; i < 6; i++) await user.click(screen.getByRole('button', { name: 'Next beat' }));
+    expect(screen.getByText(`Beat 7 / ${total}`)).toBeInTheDocument();
 
     await user.click(screen.getByRole('radio', { name: /3d/i }));
     expect(await screen.findByTestId('scene-3d')).toHaveTextContent('merge-two-parents');
-    expect(screen.getByText(`Step 7 / ${total}`)).toBeInTheDocument();
+    expect(screen.getByText(`Beat 7 / ${total}`)).toBeInTheDocument();
     expect(screen.getByRole('button', { name: 'Reset view' })).toBeInTheDocument();
 
-    await user.click(screen.getByRole('button', { name: 'Next step' }));
+    await user.click(screen.getByRole('button', { name: 'Next beat' }));
     expect(screen.getByTestId('scene-3d')).toHaveTextContent('detached-head');
 
     await user.click(screen.getByRole('radio', { name: /2d/i }));
     expect(screen.queryByTestId('scene-3d')).not.toBeInTheDocument();
     expect(screen.queryByRole('button', { name: 'Reset view' })).not.toBeInTheDocument();
-    expect(screen.getByText(`Step 8 / ${total}`)).toBeInTheDocument();
+    expect(screen.getByText(`Beat 8 / ${total}`)).toBeInTheDocument();
     expect(
       screen.getByRole('img', { name: /HEAD points straight at a commit/ })
     ).toBeInTheDocument();
   });
 
-  it('drives the 3D camera from the viewer toolbar and keys without losing the step', async () => {
+  it('drives the 3D camera from the viewer toolbar and keys without losing the beat', async () => {
     const user = userEvent.setup();
     const { container } = render(<BranchPointersStory />);
 
-    await user.click(screen.getByRole('button', { name: 'Next step' }));
+    await user.click(screen.getByRole('button', { name: 'Next beat' }));
     await user.click(screen.getByRole('radio', { name: /3d/i }));
     const scene = await screen.findByTestId('scene-3d');
-    const stepText = screen.getByText(/^Step 2 \//);
+    const beatText = screen.getByText(/^Beat 2 \//);
 
-    // Reset view lives in the viewer's toolbar now, not in the step controls.
+    // Reset view lives in the viewer's toolbar now, not in the beat controls.
     const viewerEl = container.querySelector<HTMLElement>('[data-viz-viewer]')!;
     const reset = within(viewerEl).getByRole('button', { name: 'Reset view' });
 
@@ -127,7 +127,7 @@ describe('BranchPointersStory', () => {
     expect(scene).toHaveAttribute('data-hold', 'true');
     await user.keyboard('{Shift>}{ArrowRight}{/Shift}');
     expect(scene).toHaveAttribute('data-command', 'orbit');
-    expect(stepText).toHaveTextContent(/^Step 2 \//);
+    expect(beatText).toHaveTextContent(/^Beat 2 \//);
 
     await user.click(reset);
     expect(scene).toHaveAttribute('data-preset', 'iso');
@@ -135,7 +135,7 @@ describe('BranchPointersStory', () => {
     expect(scene).toHaveAttribute('data-command', 'reset');
 
     await user.keyboard('{ArrowRight}');
-    expect(screen.getByText(/^Step 3 \//)).toBeInTheDocument();
+    expect(screen.getByText(/^Beat 3 \//)).toBeInTheDocument();
   });
 
   it('falls back to 2D when WebGL is unavailable', () => {
diff --git a/src/features/git/components/sections/BranchPointersStory.tsx b/src/features/git/components/sections/BranchPointersStory.tsx
index 8e1287f..fb96e79 100644
--- a/src/features/git/components/sections/BranchPointersStory.tsx
+++ b/src/features/git/components/sections/BranchPointersStory.tsx
@@ -15,7 +15,7 @@ import { useReducedMotion, useStoryViewer } from '../../../../shared/hooks';
 import Viewer3DToolbar from '../../../../shared/components/viz/Viewer3DToolbar';
 import { Viewer3DHint, WheelZoomHint } from '../../../../shared/components/viz/ViewerHints';
 import BranchPointers2D from '../visualizations/2d/BranchPointers2D';
-import { STORY_CODE, STORY_STEPS } from '../../utils/branchPointersStory';
+import { STORY_CODE, STORY_BEATS } from '../../utils/branchPointersStory';
 import { canUseWebGL } from '../../../../shared/utils/webgl';
 
 // three.js + R3F only download when the learner switches to 3D.
@@ -47,8 +47,8 @@ const BranchPointersStory: React.FC = () => {
   const rootRef = useRef<HTMLDivElement>(null);
 
   const view: View = webgl && chosenView === '3d' ? '3d' : '2d';
-  const step = STORY_STEPS[index];
-  const last = STORY_STEPS.length - 1;
+  const beat = STORY_BEATS[index];
+  const last = STORY_BEATS.length - 1;
 
   const chooseView = (v: View) => {
     setChosenView(v);
@@ -77,7 +77,7 @@ const BranchPointersStory: React.FC = () => {
   const viewer = useStoryViewer({ rootRef, is3D: view === '3d', step: go });
   const fullscreen = viewer.fullscreen.isFullscreen;
 
-  const view2D = <BranchPointers2D step={step} />;
+  const view2D = <BranchPointers2D beat={beat} />;
 
   return (
     <div
@@ -97,7 +97,7 @@ const BranchPointersStory: React.FC = () => {
             What is a branch, really?
           </h3>
           <p className="mt-1 text-xs text-slate-600">
-            A {STORY_STEPS.length}-step story. Commits never move; branches and HEAD are small files
+            A {STORY_BEATS.length}-beat story. Commits never move; branches and HEAD are small files
             that point at them.
           </p>
         </div>
@@ -140,7 +140,7 @@ const BranchPointersStory: React.FC = () => {
           <div className="overflow-x-auto rounded-xl border border-slate-700 bg-slate-900 py-3 shadow">
             <pre className="text-[12.5px] leading-6" aria-label="Story code">
               {CODE_LINES.map((text, i) => {
-                const active = i + 1 === step.line;
+                const active = i + 1 === beat.line;
                 return (
                   <div
                     key={i}
@@ -170,10 +170,10 @@ const BranchPointersStory: React.FC = () => {
             aria-live="polite"
           >
             <div className="mb-1 text-[11px] font-semibold uppercase tracking-wide text-orange-600">
-              Step {index + 1} / {STORY_STEPS.length}
+              Beat {index + 1} / {STORY_BEATS.length}
             </div>
-            <h4 className="mb-2 text-base font-bold text-slate-900">{step.title}</h4>
-            <p className="text-sm leading-relaxed text-slate-700">{step.caption}</p>
+            <h4 className="mb-2 text-base font-bold text-slate-900">{beat.title}</h4>
+            <p className="text-sm leading-relaxed text-slate-700">{beat.caption}</p>
           </div>
         </div>
 
@@ -207,7 +207,7 @@ const BranchPointersStory: React.FC = () => {
                     </div>
                   }
                 >
-                  <BranchPointers3D step={step} camera={viewer.camera} instant={reducedMotion} />
+                  <BranchPointers3D beat={beat} camera={viewer.camera} instant={reducedMotion} />
                 </Suspense>
               </ErrorBoundary>
             ) : (
@@ -239,7 +239,7 @@ const BranchPointersStory: React.FC = () => {
             >
               <RotateCcw className="h-4 w-4" />
             </ControlButton>
-            <ControlButton label="Previous step" onClick={() => go(-1)} disabled={index === 0}>
+            <ControlButton label="Previous beat" onClick={() => go(-1)} disabled={index === 0}>
               <ChevronLeft className="h-4 w-4" />
             </ControlButton>
             <ControlButton
@@ -252,12 +252,12 @@ const BranchPointersStory: React.FC = () => {
             >
               {playing ? <Pause className="h-4 w-4" /> : <Play className="h-4 w-4" />}
             </ControlButton>
-            <ControlButton label="Next step" onClick={() => go(1)} disabled={index === last}>
+            <ControlButton label="Next beat" onClick={() => go(1)} disabled={index === last}>
               <ChevronRight className="h-4 w-4" />
             </ControlButton>
 
             <div className="mx-1 flex gap-1" aria-hidden>
-              {STORY_STEPS.map((s, i) => (
+              {STORY_BEATS.map((s, i) => (
                 <button
                   key={s.id}
                   type="button"
diff --git a/src/features/git/components/sections/ShipAFeatureScenario.test.tsx b/src/features/git/components/sections/ShipAFeatureScenario.test.tsx
index 224b073..2e21d96 100644
--- a/src/features/git/components/sections/ShipAFeatureScenario.test.tsx
+++ b/src/features/git/components/sections/ShipAFeatureScenario.test.tsx
@@ -28,8 +28,8 @@ type User = ReturnType<typeof userEvent.setup>;
 
 const MAIN = routeFor([]);
 const CHOICE_BEAT = MAIN.length; // 1-based beat number of the choice point
-const next = (user: User) => user.click(screen.getByRole('button', { name: 'Next step' }));
-const prev = (user: User) => user.click(screen.getByRole('button', { name: 'Previous step' }));
+const next = (user: User) => user.click(screen.getByRole('button', { name: 'Next beat' }));
+const prev = (user: User) => user.click(screen.getByRole('button', { name: 'Previous beat' }));
 const choice = (id: string) =>
   document.querySelector<HTMLButtonElement>(`[data-viz-choice="${id}"]`);
 const strip = () => screen.getByTestId('route-strip').querySelectorAll('button');
@@ -40,7 +40,7 @@ async function toChoice(user: User) {
 }
 
 async function toEnd(user: User) {
-  while (!screen.getByRole('button', { name: 'Next step' }).hasAttribute('disabled'))
+  while (!screen.getByRole('button', { name: 'Next beat' }).hasAttribute('disabled'))
     await next(user);
 }
 
@@ -60,12 +60,12 @@ describe('ShipAFeatureScenario', { timeout: 20_000 }, () => {
     expect(screen.getByRole('radio', { name: /2d/i })).toHaveAttribute('aria-checked', 'true');
     expect(screen.getByText('Beat 1')).toBeInTheDocument();
     expect(scene('Branch off main')).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: 'Previous step' })).toBeDisabled();
+    expect(screen.getByRole('button', { name: 'Previous beat' })).toBeDisabled();
     expect(choice('rebase')).toBeNull();
 
     await toChoice(user);
     expect(screen.getByText(`Beat ${CHOICE_BEAT}`)).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: 'Next step' })).toBeDisabled();
+    expect(screen.getByRole('button', { name: 'Next beat' })).toBeDisabled();
     expect(
       screen.getByText("How do you bring Sam's work into feature/search?")
     ).toBeInTheDocument();
@@ -111,7 +111,7 @@ describe('ShipAFeatureScenario', { timeout: 20_000 }, () => {
 
     await user.click(screen.getByRole('button', { name: /Try the other path/ }));
     expect(screen.getByText(`Beat ${CHOICE_BEAT}`)).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: 'Next step' })).toBeDisabled();
+    expect(screen.getByRole('button', { name: 'Next beat' })).toBeDisabled();
     expect(strip()).toHaveLength(CHOICE_BEAT);
 
     await user.click(choice('merge')!);
@@ -143,7 +143,7 @@ describe('ShipAFeatureScenario', { timeout: 20_000 }, () => {
     await prev(user);
     expect(screen.getByText(`Beat ${CHOICE_BEAT}`)).toBeInTheDocument();
     expect(choice('rebase')).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: 'Next step' })).toBeDisabled();
+    expect(screen.getByRole('button', { name: 'Next beat' })).toBeDisabled();
     expect(strip()).toHaveLength(CHOICE_BEAT);
   });
 
@@ -159,7 +159,7 @@ describe('ShipAFeatureScenario', { timeout: 20_000 }, () => {
     expect(strip()).toHaveLength(CHOICE_BEAT);
 
     await toChoice(user);
-    expect(screen.getByRole('button', { name: 'Next step' })).toBeDisabled();
+    expect(screen.getByRole('button', { name: 'Next beat' })).toBeDisabled();
     expect(choice('merge')).toBeInTheDocument();
   });
 
diff --git a/src/features/git/components/sections/ShipAFeatureScenario.tsx b/src/features/git/components/sections/ShipAFeatureScenario.tsx
index 0106dd0..d9d8d5f 100644
--- a/src/features/git/components/sections/ShipAFeatureScenario.tsx
+++ b/src/features/git/components/sections/ShipAFeatureScenario.tsx
@@ -390,7 +390,7 @@ const ShipAFeatureScenario: React.FC = () => {
             <ControlButton label="Restart" onClick={restart}>
               <RotateCcw className="h-4 w-4" />
             </ControlButton>
-            <ControlButton label="Previous step" onClick={() => go(-1)} disabled={index === 0}>
+            <ControlButton label="Previous beat" onClick={() => go(-1)} disabled={index === 0}>
               <ChevronLeft className="h-4 w-4" />
             </ControlButton>
             <ControlButton
@@ -404,7 +404,7 @@ const ShipAFeatureScenario: React.FC = () => {
             >
               {playing ? <Pause className="h-4 w-4" /> : <Play className="h-4 w-4" />}
             </ControlButton>
-            <ControlButton label="Next step" onClick={() => go(1)} disabled={index === last}>
+            <ControlButton label="Next beat" onClick={() => go(1)} disabled={index === last}>
               <ChevronRight className="h-4 w-4" />
             </ControlButton>
 
diff --git a/src/features/git/components/visualizations/2d/BranchPointers2D.tsx b/src/features/git/components/visualizations/2d/BranchPointers2D.tsx
index 71f3524..cd49264 100644
--- a/src/features/git/components/visualizations/2d/BranchPointers2D.tsx
+++ b/src/features/git/components/visualizations/2d/BranchPointers2D.tsx
@@ -8,11 +8,11 @@ import {
   isRefFocused,
   type Commit,
   type Ref,
-  type StoryStep,
+  type StoryBeat,
 } from '../../../utils/branchPointersStory';
 
 interface BranchPointers2DProps {
-  step: StoryStep;
+  beat: StoryBeat;
 }
 
 const W = 680;
@@ -63,7 +63,7 @@ interface Point {
   y: number;
 }
 
-/** The one layout function: model cells to SVG coordinates, identical for every step. */
+/** The one layout function: model cells to SVG coordinates, identical for every beat. */
 const nodeCenter = (c: Commit): Point => ({
   x: NODE_X0 + c.cell.col * NODE_DX,
   y: NODE_Y0 + c.cell.row * NODE_DY,
@@ -154,14 +154,14 @@ interface Arrow {
   faded: boolean;
 }
 
-function buildArrows(step: StoryStep): Arrow[] {
+function buildArrows(beat: StoryBeat): Arrow[] {
   const arrows: Arrow[] = [];
-  const cards = new Map(step.refs.map((r) => [r.id as string, refBox(r)]));
+  const cards = new Map(beat.refs.map((r) => [r.id as string, refBox(r)]));
   const liveAt = (col: number, row: number) =>
-    step.commits.some((c) => c.state !== 'collected' && c.cell.col === col && c.cell.row < row);
+    beat.commits.some((c) => c.state !== 'collected' && c.cell.col === col && c.cell.row < row);
 
-  for (const ref of getReferences(step)) {
-    const focused = isRefFocused(step, ref);
+  for (const ref of getReferences(beat)) {
+    const focused = isRefFocused(beat, ref);
     const arrow = (d: string, color: ArrowColor, width: number, faded = false) =>
       arrows.push({
         id: ref.id,
@@ -172,8 +172,8 @@ function buildArrows(step: StoryStep): Arrow[] {
       });
 
     if (ref.kind === 'parent') {
-      const child = getCommit(step, ref.fromOwner);
-      const parent = getCommit(step, ref.to);
+      const child = getCommit(beat, ref.fromOwner);
+      const parent = getCommit(beat, ref.to);
       if (!child || !parent) continue;
       arrow(
         parentPath(nodeCenter(child), nodeCenter(parent)),
@@ -186,12 +186,12 @@ function buildArrows(step: StoryStep): Arrow[] {
       if (ref.toKind === 'ref') {
         arrow(headToCardPath(head, cards.get(ref.to)!), 'head', 2);
       } else {
-        const target = getCommit(step, ref.to);
+        const target = getCommit(beat, ref.to);
         if (target) arrow(headToCommitPath(head, nodeCenter(target)), 'detached', 2.6);
       }
     } else {
       const card = cards.get(ref.fromOwner);
-      const target = getCommit(step, ref.to);
+      const target = getCommit(beat, ref.to);
       if (!card || !target) continue;
       arrow(
         branchPath(card, nodeCenter(target), liveAt(target.cell.col, target.cell.row)),
@@ -218,17 +218,17 @@ const STATE_TAG: Record<Commit['state'], string | null> = {
   collected: null,
 };
 
-const BranchPointers2D: React.FC<BranchPointers2DProps> = ({ step }) => {
-  const arrows = buildArrows(step);
-  const detached = isDetached(step);
-  const reflogFocused = isFocused(step, 'head-reflog');
+const BranchPointers2D: React.FC<BranchPointers2DProps> = ({ beat }) => {
+  const arrows = buildArrows(beat);
+  const detached = isDetached(beat);
+  const reflogFocused = isFocused(beat, 'head-reflog');
 
   return (
     <svg
       viewBox={`0 0 ${W} ${H}`}
       className="h-full w-full"
       role="img"
-      aria-label={`Branch pointers: ${step.title}`}
+      aria-label={`Branch pointers: ${beat.title}`}
     >
       <style>{`
         .bp-enter { animation: bp-fade 450ms ease-out both; }
@@ -301,7 +301,7 @@ const BranchPointers2D: React.FC<BranchPointers2DProps> = ({ step }) => {
       >
         COMMIT GRAPH
       </text>
-      {step.phase && (
+      {beat.phase && (
         <text
           x={W - 20}
           y={GRAPH_TOP + 18}
@@ -311,7 +311,7 @@ const BranchPointers2D: React.FC<BranchPointers2DProps> = ({ step }) => {
           fontFamily={MONO}
           className="fill-rose-600"
         >
-          {step.phase === 'expire' ? 'reflog expire' : 'gc --prune'}
+          {beat.phase === 'expire' ? 'reflog expire' : 'gc --prune'}
         </text>
       )}
 
@@ -332,9 +332,9 @@ const BranchPointers2D: React.FC<BranchPointers2DProps> = ({ step }) => {
       ))}
 
       {/* Commits */}
-      {step.commits.map((c) => {
+      {beat.commits.map((c) => {
         const p = nodeCenter(c);
-        const focused = isFocused(step, c.id);
+        const focused = isFocused(beat, c.id);
         const tag = STATE_TAG[c.state];
         const live = c.state === 'live';
         const unreachable = c.state === 'unreachable';
@@ -400,9 +400,9 @@ const BranchPointers2D: React.FC<BranchPointers2DProps> = ({ step }) => {
       })}
 
       {/* Ref cards */}
-      {step.refs.map((r) => {
+      {beat.refs.map((r) => {
         const b = refBox(r);
-        const focused = isFocused(step, r.id);
+        const focused = isFocused(beat, r.id);
         if (r.kind === 'reflog') {
           const count = r.entries.length;
           return (
@@ -438,7 +438,7 @@ const BranchPointers2D: React.FC<BranchPointers2DProps> = ({ step }) => {
                 .git/{r.path}
               </text>
               {r.entries.map((e, i) => {
-                const hot = reflogFocused && isFocused(step, e.commit);
+                const hot = reflogFocused && isFocused(beat, e.commit);
                 const y = b.y + 30 + i * REFLOG_LINE;
                 return (
                   <g
@@ -564,7 +564,7 @@ const BranchPointers2D: React.FC<BranchPointers2DProps> = ({ step }) => {
                   isHead ? (detached ? 'fill-rose-700' : 'fill-pink-800') : 'fill-orange-700'
                 }
               >
-                {r.kind === 'head' ? headFileText(step) : r.kind === 'branch' ? r.target : ''}
+                {r.kind === 'head' ? headFileText(beat) : r.kind === 'branch' ? r.target : ''}
               </text>
             </g>
           </g>
diff --git a/src/features/git/components/visualizations/3d/BranchPointers3D.tsx b/src/features/git/components/visualizations/3d/BranchPointers3D.tsx
index 6f45cad..3419c69 100644
--- a/src/features/git/components/visualizations/3d/BranchPointers3D.tsx
+++ b/src/features/git/components/visualizations/3d/BranchPointers3D.tsx
@@ -24,14 +24,14 @@ import {
   type Reference,
   type ReflogRef,
   type ShotId,
-  type StoryStep,
+  type StoryBeat,
 } from '../../../utils/branchPointersStory';
 import type { CameraState } from '../../../../../shared/components/viz/viewerCamera';
 import { LabelFramer, StoryCamera } from '../../../../../shared/viz3d/camera';
 import { boundsOf, type Box3, type Shot, type V3 } from '../../../../../shared/viz3d/frameShot';
 
 /**
- * 3D renderer for the Branch Pointers story. Pure view: everything it draws comes from `step`.
+ * 3D renderer for the Branch Pointers story. Pure view: everything it draws comes from `beat`.
  * Style rules (docs/3D-Visualization-Standard.md): isometric-style orthographic camera,
  * flat-shaded limited palette, DOM labels that always face the viewer, preset shot per beat.
  *
@@ -41,7 +41,7 @@ import { boundsOf, type Box3, type Shot, type V3 } from '../../../../../shared/v
  */
 
 export interface BranchPointers3DProps {
-  step: StoryStep;
+  beat: StoryBeat;
   /** The learner's camera: view preset, Hold view, pan mode and one-shot commands. */
   camera: CameraState;
   /** Reduced motion: no tweening, instant camera cuts. */
@@ -343,14 +343,14 @@ const RefCard: React.FC<{
   ref_: HeadRef | BranchRef;
   exiting: boolean;
   focused: boolean;
-  step: StoryStep;
+  beat: StoryBeat;
   instant: boolean;
   compact: boolean;
-}> = ({ ref_, exiting, focused, step, instant, compact }) => {
+}> = ({ ref_, exiting, focused, beat, instant, compact }) => {
   const group = useRef<THREE.Group>(null);
   const mat = useRef<THREE.MeshLambertMaterial>(null);
   const isHead = ref_.kind === 'head';
-  const detached = isHead && isDetached(step);
+  const detached = isHead && isDetached(beat);
   const id = ref_.id as CardId;
   const color = useMemo(
     () => new THREE.Color(isHead ? (detached ? PALETTE.detached : PALETTE.head) : PALETTE.branch),
@@ -364,7 +364,7 @@ const RefCard: React.FC<{
   });
 
   const [cx, , cz] = cardCenter(id);
-  const text = ref_.kind === 'head' ? headFileText(step) : ref_.target;
+  const text = ref_.kind === 'head' ? headFileText(beat) : ref_.target;
   return (
     <group position={[cx, SHELF_Y, cz]}>
       <group ref={group} scale={[1, instant ? 1 : 0.01, 1]}>
@@ -434,11 +434,11 @@ const RefCard: React.FC<{
 
 const ReflogCard: React.FC<{
   reflog: ReflogRef;
-  step: StoryStep;
+  beat: StoryBeat;
   instant: boolean;
   compact: boolean;
-}> = ({ reflog, step, instant, compact }) => {
-  const focused = isFocused(step, reflog.id);
+}> = ({ reflog, beat, instant, compact }) => {
+  const focused = isFocused(beat, reflog.id);
   const shown = reflog.entries.slice(0, REFLOG_ROWS);
   const older = reflog.entries.length - shown.length;
   return (
@@ -476,7 +476,7 @@ const ReflogCard: React.FC<{
           )}
         </div>
         {shown.map((e, i) => {
-          const hot = focused && isFocused(step, e.commit);
+          const hot = focused && isFocused(beat, e.commit);
           return (
             <div
               key={`${e.commit}:${e.action}`}
@@ -528,10 +528,10 @@ function commitTop(c: Commit, from: V3): V3 {
 function dropOnto(
   start: V3,
   target: Commit,
-  step: StoryStep,
+  beat: StoryBeat,
   lift = 1.2
 ): Pick<ArrowSpec, 'start' | 'mid' | 'end'> {
-  const blocked = step.commits.some(
+  const blocked = beat.commits.some(
     (c) =>
       c.state !== 'collected' &&
       c.cell.col === target.cell.col &&
@@ -560,30 +560,30 @@ function parentArc(child: Commit, parent: Commit): Pick<ArrowSpec, 'start' | 'mi
   return { start, mid, end };
 }
 
-function buildArrows(step: StoryStep): ArrowSpec[] {
+function buildArrows(beat: StoryBeat): ArrowSpec[] {
   const arrows: ArrowSpec[] = [];
   const push = (
     ref: Reference,
     kind: ArrowKind,
     pts: Pick<ArrowSpec, 'start' | 'mid' | 'end'>,
     faded = false
-  ) => arrows.push({ id: ref.id, kind, ...pts, focused: isRefFocused(step, ref), faded });
+  ) => arrows.push({ id: ref.id, kind, ...pts, focused: isRefFocused(beat, ref), faded });
 
-  const refs = getReferences(step);
+  const refs = getReferences(beat);
   // The reflog only draws an arrow where it is the last thing keeping a commit alive.
-  for (const r of getReferences(step, { includeReflog: true }))
-    if (r.kind === 'reflog' && reachabilityState(step, r.to) === 'reflog-only') refs.push(r);
+  for (const r of getReferences(beat, { includeReflog: true }))
+    if (r.kind === 'reflog' && reachabilityState(beat, r.to) === 'reflog-only') refs.push(r);
 
   for (const ref of refs) {
     if (ref.kind === 'parent') {
-      const child = getCommit(step, ref.fromOwner);
-      const parent = getCommit(step, ref.to);
+      const child = getCommit(beat, ref.fromOwner);
+      const parent = getCommit(beat, ref.to);
       if (child && parent) push(ref, 'parent', parentArc(child, parent), child.state !== 'live');
     } else if (ref.kind === 'reflog') {
-      const target = getCommit(step, ref.to);
+      const target = getCommit(beat, ref.to);
       if (!target) continue;
       const start: V3 = [REFLOG_POS[0] + REFLOG_SIZE[0] / 2 + 0.05, WING_Y + 0.3, REFLOG_POS[2]];
-      push(ref, 'reflog', dropOnto(start, target, step, 0.6), true);
+      push(ref, 'reflog', dropOnto(start, target, beat, 0.6), true);
     } else if (ref.fromOwner === 'HEAD') {
       const [hx] = cardCenter('HEAD');
       if (ref.toKind === 'ref') {
@@ -600,17 +600,17 @@ function buildArrows(step: StoryStep): ArrowSpec[] {
         push(ref, 'head', { start, mid, end });
       } else {
         // Detached: HEAD dives from its foot straight onto a commit, under every branch card.
-        const target = getCommit(step, ref.to);
+        const target = getCommit(beat, ref.to);
         if (!target) continue;
         const start: V3 = [hx + CARD_W.HEAD / 2 - 0.1, SHELF_Y + 0.05, SHELF_Z + 0.4];
-        push(ref, 'detached', dropOnto(start, target, step, 0.5));
+        push(ref, 'detached', dropOnto(start, target, beat, 0.5));
       }
     } else {
-      const target = getCommit(step, ref.to);
+      const target = getCommit(beat, ref.to);
       if (!target) continue;
       const [bx] = cardCenter(ref.fromOwner as CardId);
       const start: V3 = [bx, SHELF_Y + 0.05, SHELF_Z + CARD_D / 2 + 0.1];
-      push(ref, 'branch', dropOnto(start, target, step));
+      push(ref, 'branch', dropOnto(start, target, beat));
     }
   }
   return arrows;
@@ -721,22 +721,22 @@ const RegionLabel: React.FC<{ position: V3; children: React.ReactNode }> = ({
   </Html>
 );
 
-const Scene: React.FC<BranchPointers3DProps> = ({ step, camera, instant = false }) => {
-  const commits = usePresence(step.commits, commitKey, 700);
+const Scene: React.FC<BranchPointers3DProps> = ({ beat, camera, instant = false }) => {
+  const commits = usePresence(beat.commits, commitKey, 700);
   const cardRefs = useMemo(
-    () => step.refs.filter((r): r is HeadRef | BranchRef => r.kind !== 'reflog'),
-    [step.refs]
+    () => beat.refs.filter((r): r is HeadRef | BranchRef => r.kind !== 'reflog'),
+    [beat.refs]
   );
   const cards = usePresence(cardRefs, cardKey, 500);
-  const reflog = getRef(step, 'head-reflog');
+  const reflog = getRef(beat, 'head-reflog');
   // Narrow viewers get terser ref labels (no path prefixes, no reflog verbs) to keep them apart.
   const compact = useThree((s) => s.size.width) < COMPACT_BELOW;
   // Compact labels overhang less: the reflog needs less room on the left.
   const shot = useMemo(() => {
-    const s = SHOTS[step.shot];
+    const s = SHOTS[beat.shot];
     return compact ? { ...s, pad: { ...s.pad, left: Math.min(s.pad.left, 44) } } : s;
-  }, [step.shot, compact]);
-  const arrows = buildArrows(step);
+  }, [beat.shot, compact]);
+  const arrows = buildArrows(beat);
 
   const floorCenter: V3 = [
     (FLOOR_MIN[0] + FLOOR_MAX[0]) / 2,
@@ -789,7 +789,7 @@ const Scene: React.FC<BranchPointers3DProps> = ({ step, camera, instant = false
           key={item.id}
           commit={item}
           exiting={exiting}
-          focused={isFocused(step, item.id)}
+          focused={isFocused(beat, item.id)}
           instant={instant}
         />
       ))}
@@ -799,14 +799,14 @@ const Scene: React.FC<BranchPointers3DProps> = ({ step, camera, instant = false
           key={item.id}
           ref_={item}
           exiting={exiting}
-          focused={isFocused(step, item.id)}
-          step={step}
+          focused={isFocused(beat, item.id)}
+          beat={beat}
           instant={instant}
           compact={compact}
         />
       ))}
 
-      {reflog && <ReflogCard reflog={reflog} step={step} instant={instant} compact={compact} />}
+      {reflog && <ReflogCard reflog={reflog} beat={beat} instant={instant} compact={compact} />}
 
       {arrows.map((a) => (
         <Arrow key={a.id} spec={a} instant={instant} />
@@ -824,7 +824,7 @@ const BranchPointers3D: React.FC<BranchPointers3DProps> = (props) => (
     dpr={[1, 2]}
     camera={{ position: [10, 10, 14], zoom: 30, near: -100, far: 200 }}
     gl={{ antialias: true, powerPreference: 'high-performance' }}
-    aria-label={`3D view of branch pointers: ${props.step.title}`}
+    aria-label={`3D view of branch pointers: ${props.beat.title}`}
     role="img"
   >
     <Scene {...props} />
diff --git a/src/features/git/utils/branchPointersStory.test.ts b/src/features/git/utils/branchPointersStory.test.ts
index bbfddc8..70b76e0 100644
--- a/src/features/git/utils/branchPointersStory.test.ts
+++ b/src/features/git/utils/branchPointersStory.test.ts
@@ -10,30 +10,30 @@ import {
   reachabilityState,
   resolveHead,
   STORY_CODE,
-  STORY_STEPS,
+  STORY_BEATS,
   slotKey,
-  type StoryStep,
+  type StoryBeat,
 } from './branchPointersStory';
 
-const step = (id: string) => STORY_STEPS.find((s) => s.id === id)!;
-const prev = (id: string) => STORY_STEPS[STORY_STEPS.findIndex((s) => s.id === id) - 1];
+const beat = (id: string) => STORY_BEATS.find((s) => s.id === id)!;
+const prev = (id: string) => STORY_BEATS[STORY_BEATS.findIndex((s) => s.id === id) - 1];
 const codeLines = STORY_CODE.split('\n').length;
 const words = (text: string) => text.trim().split(/\s+/).length;
-const branchTargets = (s: StoryStep) =>
+const branchTargets = (s: StoryBeat) =>
   Object.fromEntries(getBranches(s).map((b) => [b.id, b.target]));
 
 describe('branch pointers story model', () => {
   it('tells the approved 12 beats', () => {
-    expect(STORY_STEPS).toHaveLength(12);
-    expect(new Set(STORY_STEPS.map((s) => s.id)).size).toBe(12);
+    expect(STORY_BEATS).toHaveLength(12);
+    expect(new Set(STORY_BEATS.map((s) => s.id)).size).toBe(12);
   });
 
   it('uses copy-pasteable 4-character SHAs in the code', () => {
     expect(STORY_CODE).toContain('git switch --detach b2c4');
-    for (const s of STORY_STEPS) for (const c of s.commits) expect(c.id).toMatch(/^[0-9a-f]{4}$/);
+    for (const s of STORY_BEATS) for (const c of s.commits) expect(c.id).toMatch(/^[0-9a-f]{4}$/);
   });
 
-  it.each(STORY_STEPS)('$id is internally consistent', (s) => {
+  it.each(STORY_BEATS)('$id is internally consistent', (s) => {
     expect(s.line).toBeGreaterThanOrEqual(1);
     expect(s.line).toBeLessThanOrEqual(codeLines);
     expect(words(s.title)).toBeLessThanOrEqual(8);
@@ -74,9 +74,9 @@ describe('branch pointers story model', () => {
     expect(getRef(s, 'head-reflog')!.entries[0].commit).toBe(resolveHead(s));
   });
 
-  it('keeps every entity identical in identity and placement across steps', () => {
+  it('keeps every entity identical in identity and placement across beats', () => {
     const seen = new Map<string, string>();
-    for (const s of STORY_STEPS) {
+    for (const s of STORY_BEATS) {
       for (const c of s.commits) {
         const sig = JSON.stringify([c.message, c.parents, c.cell]);
         expect(seen.get(c.id) ?? sig).toBe(sig);
@@ -91,7 +91,7 @@ describe('branch pointers story model', () => {
   });
 
   it('derives every commit state from reachability', () => {
-    for (const s of STORY_STEPS)
+    for (const s of STORY_BEATS)
       for (const c of s.commits)
         if (c.state === 'collected')
           expect(getReachable(s, { includeReflog: true }).has(c.id)).toBe(false);
@@ -100,7 +100,7 @@ describe('branch pointers story model', () => {
 
   it('#2 creating a branch adds one pointer and leaves the graph unchanged', () => {
     const before = prev('branch-is-a-label');
-    const s = step('branch-is-a-label');
+    const s = beat('branch-is-a-label');
     expect(s.commits).toEqual(before.commits);
     expect(getBranches(before).map((b) => b.id)).toEqual(['main']);
     expect(branchTargets(s)).toEqual({ main: 'b2c4', feature: 'b2c4' });
@@ -109,8 +109,8 @@ describe('branch pointers story model', () => {
   });
 
   it('#3 committing moves only the branch HEAD names', () => {
-    const before = step('branch-is-a-label');
-    const s = step('only-head-branch-moves');
+    const before = beat('branch-is-a-label');
+    const s = beat('only-head-branch-moves');
     const moved = getBranches(s)
       .filter((b) => branchTargets(before)[b.id] !== b.target)
       .map((b) => b.id);
@@ -121,9 +121,9 @@ describe('branch pointers story model', () => {
   });
 
   it('only ever moves the HEAD-named branch, and never while detached', () => {
-    for (let i = 1; i < STORY_STEPS.length; i++) {
-      const a = STORY_STEPS[i - 1];
-      const b = STORY_STEPS[i];
+    for (let i = 1; i < STORY_BEATS.length; i++) {
+      const a = STORY_BEATS[i - 1];
+      const b = STORY_BEATS[i];
       for (const br of getBranches(b)) {
         const was = branchTargets(a)[br.id];
         if (was !== undefined && was !== br.target) expect(getHeadBranch(a)).toBe(br.id);
@@ -132,34 +132,34 @@ describe('branch pointers story model', () => {
   });
 
   it('points a detached HEAD straight at a commit, not a branch card', () => {
-    const s = step('detached-head');
+    const s = beat('detached-head');
     const head = getReferences(s).find((r) => r.id === 'HEAD.target')!;
     expect(head).toMatchObject({ to: 'b2c4', toKind: 'commit' });
     expect(headFileText(s)).toBe('b2c4');
-    const onBranch = getReferences(step('switch-back')).find((r) => r.id === 'HEAD.target')!;
+    const onBranch = getReferences(beat('switch-back')).find((r) => r.id === 'HEAD.target')!;
     expect(onBranch).toMatchObject({ to: 'main', toKind: 'ref' });
   });
 
   it('#10 keeps f6b1 reachable only through the reflog after switching away', () => {
-    const s = step('orphaned-commit');
+    const s = beat('orphaned-commit');
     const pointsAtF6 = getReferences(s).filter((r) => r.to === 'f6b1');
     expect(pointsAtF6).toEqual([]);
     expect(getReachable(s).has('f6b1')).toBe(false);
     expect(getReflogCommits(s)).toContain('f6b1');
     expect(getReachable(s, { includeReflog: true }).has('f6b1')).toBe(true);
     // One beat earlier, HEAD alone kept it alive.
-    expect(getReachable(step('detached-commit')).has('f6b1')).toBe(true);
+    expect(getReachable(beat('detached-commit')).has('f6b1')).toBe(true);
   });
 
   it('#11 leaves f6b1 unreachable once the reflog entry expires', () => {
-    const s = step('reflog-expired');
+    const s = beat('reflog-expired');
     expect(getReflogCommits(s)).not.toContain('f6b1');
     expect(getReachable(s, { includeReflog: true }).has('f6b1')).toBe(false);
     expect(reachabilityState(s, 'f6b1')).toBe('unreachable');
   });
 
   it('#12 collects f6b1 while a branch still reaches every other commit', () => {
-    const s = step('gc-collects');
+    const s = beat('gc-collects');
     expect(s.commits.find((c) => c.id === 'f6b1')!.state).toBe('collected');
     const fromBranches = new Set<string>();
     for (const b of getBranches(s)) {
diff --git a/src/features/git/utils/branchPointersStory.ts b/src/features/git/utils/branchPointersStory.ts
index 59e258e..2de1b44 100644
--- a/src/features/git/utils/branchPointersStory.ts
+++ b/src/features/git/utils/branchPointersStory.ts
@@ -1,8 +1,8 @@
 /**
- * Branch Pointers story: one step model, rendered by both the 2D (SVG) and 3D (R3F) views.
+ * Branch Pointers story: one beat model, rendered by both the 2D (SVG) and 3D (R3F) views.
  * Spec: docs/stories/git/branch-pointers.md
  *
- * Every step is a full snapshot, so stepping backwards is free and switching views
+ * Every beat is a full snapshot, so stepping backwards is free and switching views
  * mid-story keeps the learner on the same beat. Commit ids are 4-character fake SHAs.
  */
 
@@ -71,7 +71,7 @@ export type RefId = Ref['id'];
 
 export type GcPhase = 'expire' | 'prune';
 
-export interface StoryStep {
+export interface StoryBeat {
   id: string;
   title: string;
   caption: string;
@@ -88,7 +88,7 @@ export interface StoryStep {
 export type ReferenceKind = 'parent' | 'ref' | 'reflog';
 
 export interface Reference {
-  /** Unique per step, e.g. `e5a6.parents.1`, `HEAD.target`, `head-reflog.f6b1`. */
+  /** Unique per beat, e.g. `e5a6.parents.1`, `HEAD.target`, `head-reflog.f6b1`. */
   id: string;
   kind: ReferenceKind;
   /** Slot key the arrow starts from, e.g. `e5a6.parents`, `main.target`, `head-reflog`. */
@@ -114,7 +114,7 @@ git gc --prune=now`;
 export const slotKey = (owner: string, slot: string) => `${owner}.${slot}`;
 
 // ---------------------------------------------------------------------------
-// Factories: identity, message, parents and cell never change across steps.
+// Factories: identity, message, parents and cell never change across beats.
 
 const commit =
   (id: string, message: string, parents: string[], cell: Cell) =>
@@ -188,7 +188,7 @@ const mergedCommits = () => [a1f0(), b2c4(), c3d8(), d4e2(), e5a6()];
 
 // ---------------------------------------------------------------------------
 
-export const STORY_STEPS: StoryStep[] = [
+export const STORY_BEATS: StoryBeat[] = [
   {
     id: 'commit-parent',
     title: 'A commit points to its parent',
@@ -328,55 +328,55 @@ export const STORY_STEPS: StoryStep[] = [
 // ---------------------------------------------------------------------------
 // Pure helpers shared by views and tests: derive facts, never store them twice.
 
-export const getCommit = (step: StoryStep, id: string) => step.commits.find((c) => c.id === id);
+export const getCommit = (beat: StoryBeat, id: string) => beat.commits.find((c) => c.id === id);
 
-export const getRef = <K extends RefId>(step: StoryStep, id: K) =>
-  step.refs.find((r) => r.id === id) as Extract<Ref, { id: K }> | undefined;
+export const getRef = <K extends RefId>(beat: StoryBeat, id: K) =>
+  beat.refs.find((r) => r.id === id) as Extract<Ref, { id: K }> | undefined;
 
-export const getHead = (step: StoryStep): HeadRef => getRef(step, 'HEAD')!;
+export const getHead = (beat: StoryBeat): HeadRef => getRef(beat, 'HEAD')!;
 
-export const getBranches = (step: StoryStep): BranchRef[] =>
-  step.refs.filter((r): r is BranchRef => r.kind === 'branch');
+export const getBranches = (beat: StoryBeat): BranchRef[] =>
+  beat.refs.filter((r): r is BranchRef => r.kind === 'branch');
 
 /** The branch HEAD names, or `null` when HEAD is detached. */
-export const getHeadBranch = (step: StoryStep): BranchId | null => {
-  const t = getHead(step).target;
+export const getHeadBranch = (beat: StoryBeat): BranchId | null => {
+  const t = getHead(beat).target;
   return t.kind === 'branch' ? t.branch : null;
 };
 
-export const isDetached = (step: StoryStep) => getHeadBranch(step) === null;
+export const isDetached = (beat: StoryBeat) => getHeadBranch(beat) === null;
 
 /** The commit HEAD resolves to, through its branch when symbolic. */
-export const resolveHead = (step: StoryStep): string => {
-  const t = getHead(step).target;
+export const resolveHead = (beat: StoryBeat): string => {
+  const t = getHead(beat).target;
   if (t.kind === 'commit') return t.commit;
-  return getRef(step, t.branch)!.target;
+  return getRef(beat, t.branch)!.target;
 };
 
 /** Text of the `.git/HEAD` file: `ref: refs/heads/main` or a commit id. */
-export const headFileText = (step: StoryStep): string => {
-  const t = getHead(step).target;
+export const headFileText = (beat: StoryBeat): string => {
+  const t = getHead(beat).target;
   return t.kind === 'branch' ? `ref: refs/heads/${t.branch}` : t.commit;
 };
 
 /** Commit ids the HEAD reflog still lists, newest first, without duplicates. */
-export const getReflogCommits = (step: StoryStep): string[] => {
-  const reflog = getRef(step, 'head-reflog');
+export const getReflogCommits = (beat: StoryBeat): string[] => {
+  const reflog = getRef(beat, 'head-reflog');
   return reflog ? [...new Set(reflog.entries.map((e) => e.commit))] : [];
 };
 
 /**
- * Every arrow in a step: parent arrows (child to parent), ref arrows (HEAD to a branch
+ * Every arrow in a beat: parent arrows (child to parent), ref arrows (HEAD to a branch
  * card or, when detached, straight to a commit; each branch to its commit) and, with
  * `includeReflog`, one arrow from the head-reflog card to each commit it lists.
  * Collected commits draw no arrows.
  */
 export function getReferences(
-  step: StoryStep,
+  beat: StoryBeat,
   { includeReflog = false }: { includeReflog?: boolean } = {}
 ): Reference[] {
   const refs: Reference[] = [];
-  for (const c of step.commits) {
+  for (const c of beat.commits) {
     if (c.state === 'collected') continue;
     const from = slotKey(c.id, 'parents');
     c.parents.forEach((p, i) =>
@@ -390,7 +390,7 @@ export function getReferences(
       })
     );
   }
-  for (const r of step.refs) {
+  for (const r of beat.refs) {
     if (r.kind === 'head') {
       const from = slotKey('HEAD', 'target');
       const to = r.target.kind === 'branch' ? r.target.branch : r.target.commit;
@@ -402,7 +402,7 @@ export function getReferences(
     }
   }
   if (includeReflog) {
-    for (const id of getReflogCommits(step))
+    for (const id of getReflogCommits(beat))
       refs.push({
         id: `head-reflog.${id}`,
         kind: 'reflog',
@@ -420,15 +420,15 @@ export function getReferences(
  * `includeReflog`), following parent arrows. Collected commits are gone and reach nothing.
  */
 export function getReachable(
-  step: StoryStep,
+  beat: StoryBeat,
   { includeReflog = false }: { includeReflog?: boolean } = {}
 ): Set<string> {
-  const refs = getReferences(step, { includeReflog });
+  const refs = getReferences(beat, { includeReflog });
   const queue = refs.filter((r) => r.kind !== 'parent' && r.toKind === 'commit').map((r) => r.to);
   const reached = new Set<string>();
   while (queue.length) {
     const id = queue.shift()!;
-    if (reached.has(id) || getCommit(step, id)?.state === 'collected') continue;
+    if (reached.has(id) || getCommit(beat, id)?.state === 'collected') continue;
     reached.add(id);
     for (const r of refs) if (r.kind === 'parent' && r.fromOwner === id) queue.push(r.to);
   }
@@ -436,13 +436,13 @@ export function getReachable(
 }
 
 /** The state reachability implies for a commit that has not been collected. */
-export function reachabilityState(step: StoryStep, id: string): Exclude<CommitState, 'collected'> {
-  if (getReachable(step).has(id)) return 'live';
-  if (getReachable(step, { includeReflog: true }).has(id)) return 'reflog-only';
+export function reachabilityState(beat: StoryBeat, id: string): Exclude<CommitState, 'collected'> {
+  if (getReachable(beat).has(id)) return 'live';
+  if (getReachable(beat, { includeReflog: true }).has(id)) return 'reflog-only';
   return 'unreachable';
 }
 
-export const isFocused = (step: StoryStep, key: string) => step.focus.includes(key);
+export const isFocused = (beat: StoryBeat, key: string) => beat.focus.includes(key);
 
 /** An arrow is spotlighted when its source slot (or owner, for the reflog) is in focus. */
-export const isRefFocused = (step: StoryStep, ref: Reference) => step.focus.includes(ref.from);
+export const isRefFocused = (beat: StoryBeat, ref: Reference) => beat.focus.includes(ref.from);
diff --git a/src/features/javascript/components/sections/StackHeapStory.test.tsx b/src/features/javascript/components/sections/StackHeapStory.test.tsx
index 2222be1..80646c8 100644
--- a/src/features/javascript/components/sections/StackHeapStory.test.tsx
+++ b/src/features/javascript/components/sections/StackHeapStory.test.tsx
@@ -7,14 +7,14 @@ const webgl = vi.hoisted(() => ({ available: true }));
 
 vi.mock('../../../../shared/utils/webgl', () => ({ canUseWebGL: () => webgl.available }));
 vi.mock('../visualizations/3d/StackHeap3D', () => ({
-  default: ({ step, camera }: StackHeap3DProps) => (
+  default: ({ beat, camera }: StackHeap3DProps) => (
     <div
       data-testid="scene-3d"
       data-preset={camera.preset}
       data-hold={String(camera.hold)}
       data-command={camera.command?.kind ?? ''}
     >
-      {step.id}
+      {beat.id}
     </div>
   ),
 }));
@@ -27,45 +27,45 @@ describe('StackHeapStory', () => {
     webgl.available = true;
   });
 
-  it('starts in 2D on step 1 and steps forward and back', async () => {
+  it('starts in 2D on beat 1 and steps forward and back', async () => {
     const user = userEvent.setup();
     render(<StackHeapStory />);
 
     expect(screen.getByRole('radio', { name: /2d/i })).toHaveAttribute('aria-checked', 'true');
-    expect(screen.getByText('Step 1 / 10')).toBeInTheDocument();
+    expect(screen.getByText('Beat 1 / 10')).toBeInTheDocument();
 
-    await user.click(screen.getByRole('button', { name: 'Next step' }));
+    await user.click(screen.getByRole('button', { name: 'Next beat' }));
     expect(screen.getByText('main() is called')).toBeInTheDocument();
 
-    await user.click(screen.getByRole('button', { name: 'Previous step' }));
+    await user.click(screen.getByRole('button', { name: 'Previous beat' }));
     expect(screen.getByText('The program starts')).toBeInTheDocument();
   });
 
-  it('keeps the current step when switching to 3D and back', async () => {
+  it('keeps the current beat when switching to 3D and back', async () => {
     const user = userEvent.setup();
     render(<StackHeapStory />);
 
-    for (let i = 0; i < 6; i++) await user.click(screen.getByRole('button', { name: 'Next step' }));
+    for (let i = 0; i < 6; i++) await user.click(screen.getByRole('button', { name: 'Next beat' }));
     await user.click(screen.getByRole('radio', { name: /3d/i }));
 
     expect(await screen.findByTestId('scene-3d')).toHaveTextContent('bob-null');
-    expect(screen.getByText('Step 7 / 10')).toBeInTheDocument();
+    expect(screen.getByText('Beat 7 / 10')).toBeInTheDocument();
 
     await user.click(screen.getByRole('radio', { name: /2d/i }));
     expect(screen.queryByTestId('scene-3d')).not.toBeInTheDocument();
     expect(screen.getByRole('img', { name: /bob = null/ })).toBeInTheDocument();
   });
 
-  it('drives the 3D camera from the viewer toolbar and keys without losing the step', async () => {
+  it('drives the 3D camera from the viewer toolbar and keys without losing the beat', async () => {
     const user = userEvent.setup();
     const { container } = render(<StackHeapStory />);
 
-    await user.click(screen.getByRole('button', { name: 'Next step' }));
+    await user.click(screen.getByRole('button', { name: 'Next beat' }));
     await user.click(screen.getByRole('radio', { name: /3d/i }));
     const scene = await screen.findByTestId('scene-3d');
-    const stepText = screen.getByText(/^Step 2 \//);
+    const beatText = screen.getByText(/^Beat 2 \//);
 
-    // Reset view lives in the viewer's toolbar now, not in the step controls.
+    // Reset view lives in the viewer's toolbar now, not in the beat controls.
     const viewerEl = container.querySelector<HTMLElement>('[data-viz-viewer]')!;
     const reset = within(viewerEl).getByRole('button', { name: 'Reset view' });
 
@@ -77,7 +77,7 @@ describe('StackHeapStory', () => {
     expect(scene).toHaveAttribute('data-hold', 'true');
     await user.keyboard('{Shift>}{ArrowRight}{/Shift}');
     expect(scene).toHaveAttribute('data-command', 'orbit');
-    expect(stepText).toHaveTextContent(/^Step 2 \//);
+    expect(beatText).toHaveTextContent(/^Beat 2 \//);
 
     await user.click(reset);
     expect(scene).toHaveAttribute('data-preset', 'iso');
@@ -85,7 +85,7 @@ describe('StackHeapStory', () => {
     expect(scene).toHaveAttribute('data-command', 'reset');
 
     await user.keyboard('{ArrowRight}');
-    expect(screen.getByText(/^Step 3 \//)).toBeInTheDocument();
+    expect(screen.getByText(/^Beat 3 \//)).toBeInTheDocument();
   });
 
   it('falls back to 2D when WebGL is unavailable', async () => {
diff --git a/src/features/javascript/components/sections/StackHeapStory.tsx b/src/features/javascript/components/sections/StackHeapStory.tsx
index 932b450..b678ee8 100644
--- a/src/features/javascript/components/sections/StackHeapStory.tsx
+++ b/src/features/javascript/components/sections/StackHeapStory.tsx
@@ -15,7 +15,7 @@ import { useReducedMotion, useStoryViewer } from '../../../../shared/hooks';
 import Viewer3DToolbar from '../../../../shared/components/viz/Viewer3DToolbar';
 import { Viewer3DHint, WheelZoomHint } from '../../../../shared/components/viz/ViewerHints';
 import StackHeap2D from '../visualizations/2d/StackHeap2D';
-import { STORY_CODE, STORY_STEPS } from '../../utils/stackHeapStory';
+import { STORY_CODE, STORY_BEATS } from '../../utils/stackHeapStory';
 import { canUseWebGL } from '../../../../shared/utils/webgl';
 
 // three.js + R3F only download when the learner switches to 3D.
@@ -47,8 +47,8 @@ const StackHeapStory: React.FC = () => {
   const rootRef = useRef<HTMLDivElement>(null);
 
   const view: View = webgl && chosenView === '3d' ? '3d' : '2d';
-  const step = STORY_STEPS[index];
-  const last = STORY_STEPS.length - 1;
+  const beat = STORY_BEATS[index];
+  const last = STORY_BEATS.length - 1;
 
   const chooseView = (v: View) => {
     setChosenView(v);
@@ -77,7 +77,7 @@ const StackHeapStory: React.FC = () => {
   const viewer = useStoryViewer({ rootRef, is3D: view === '3d', step: go });
   const fullscreen = viewer.fullscreen.isFullscreen;
 
-  const view2D = <StackHeap2D step={step} />;
+  const view2D = <StackHeap2D beat={beat} />;
 
   return (
     <div
@@ -97,7 +97,7 @@ const StackHeapStory: React.FC = () => {
             Stack ↔ Heap: who keeps an object alive?
           </h3>
           <p className="mt-1 text-xs text-slate-600">
-            A 10-step story. Frames come and go; objects live as long as a root can reach them.
+            A 10-beat story. Frames come and go; objects live as long as a root can reach them.
           </p>
         </div>
 
@@ -139,7 +139,7 @@ const StackHeapStory: React.FC = () => {
           <div className="overflow-x-auto rounded-xl border border-slate-700 bg-slate-900 py-3 shadow">
             <pre className="text-[12.5px] leading-6" aria-label="Story code">
               {CODE_LINES.map((text, i) => {
-                const active = i + 1 === step.line;
+                const active = i + 1 === beat.line;
                 return (
                   <div
                     key={i}
@@ -169,10 +169,10 @@ const StackHeapStory: React.FC = () => {
             aria-live="polite"
           >
             <div className="mb-1 text-[11px] font-semibold uppercase tracking-wide text-indigo-600">
-              Step {index + 1} / {STORY_STEPS.length}
+              Beat {index + 1} / {STORY_BEATS.length}
             </div>
-            <h4 className="mb-2 text-base font-bold text-slate-900">{step.title}</h4>
-            <p className="text-sm leading-relaxed text-slate-700">{step.caption}</p>
+            <h4 className="mb-2 text-base font-bold text-slate-900">{beat.title}</h4>
+            <p className="text-sm leading-relaxed text-slate-700">{beat.caption}</p>
           </div>
         </div>
 
@@ -206,7 +206,7 @@ const StackHeapStory: React.FC = () => {
                     </div>
                   }
                 >
-                  <StackHeap3D step={step} camera={viewer.camera} instant={reducedMotion} />
+                  <StackHeap3D beat={beat} camera={viewer.camera} instant={reducedMotion} />
                 </Suspense>
               </ErrorBoundary>
             ) : (
@@ -238,7 +238,7 @@ const StackHeapStory: React.FC = () => {
             >
               <RotateCcw className="h-4 w-4" />
             </ControlButton>
-            <ControlButton label="Previous step" onClick={() => go(-1)} disabled={index === 0}>
+            <ControlButton label="Previous beat" onClick={() => go(-1)} disabled={index === 0}>
               <ChevronLeft className="h-4 w-4" />
             </ControlButton>
             <ControlButton
@@ -251,12 +251,12 @@ const StackHeapStory: React.FC = () => {
             >
               {playing ? <Pause className="h-4 w-4" /> : <Play className="h-4 w-4" />}
             </ControlButton>
-            <ControlButton label="Next step" onClick={() => go(1)} disabled={index === last}>
+            <ControlButton label="Next beat" onClick={() => go(1)} disabled={index === last}>
               <ChevronRight className="h-4 w-4" />
             </ControlButton>
 
             <div className="mx-1 flex gap-1" aria-hidden>
-              {STORY_STEPS.map((s, i) => (
+              {STORY_BEATS.map((s, i) => (
                 <button
                   key={s.id}
                   type="button"
diff --git a/src/features/javascript/components/visualizations/2d/StackHeap2D.tsx b/src/features/javascript/components/visualizations/2d/StackHeap2D.tsx
index 9ce9dba..14972a0 100644
--- a/src/features/javascript/components/visualizations/2d/StackHeap2D.tsx
+++ b/src/features/javascript/components/visualizations/2d/StackHeap2D.tsx
@@ -7,11 +7,11 @@ import {
   type HeapObject,
   type Reference,
   type StackFrame,
-  type StoryStep,
+  type StoryBeat,
 } from '../../../utils/stackHeapStory';
 
 interface StackHeap2DProps {
-  step: StoryStep;
+  beat: StoryBeat;
 }
 
 const W = 800;
@@ -82,16 +82,16 @@ const slotY = (box: Box, index: number) => box.y + FRAME_HEADER + index * ROW_H
 
 function refPath(
   ref: Reference,
-  step: StoryStep,
+  beat: StoryBeat,
   frames: Map<string, Box>,
   objects: Map<string, Box>
 ): string | null {
   const target = objects.get(ref.to);
-  const targetObj = step.objects.find((o) => o.id === ref.to);
+  const targetObj = beat.objects.find((o) => o.id === ref.to);
   const owner =
     ref.fromKind === 'frame'
-      ? step.frames.find((f) => f.id === ref.fromOwner)
-      : step.objects.find((o) => o.id === ref.fromOwner);
+      ? beat.frames.find((f) => f.id === ref.fromOwner)
+      : beat.objects.find((o) => o.id === ref.fromOwner);
   const ownerBox =
     ref.fromKind === 'frame' ? frames.get(ref.fromOwner) : objects.get(ref.fromOwner);
   if (!target || !targetObj || !owner || !ownerBox) return null;
@@ -101,7 +101,7 @@ function refPath(
   const ty = target.y + FRAME_HEADER / 2;
 
   if (ref.fromKind === 'object') {
-    const src = step.objects.find((o) => o.id === ref.fromOwner)!;
+    const src = beat.objects.find((o) => o.id === ref.fromOwner)!;
     if (targetObj.cell.col <= src.cell.col && targetObj.cell.row > src.cell.row) {
       // Down-left: leave from the bottom, enter from the top.
       const sx = ownerBox.x + ownerBox.w / 2;
@@ -116,18 +116,18 @@ function refPath(
   return `M ${sx} ${sy} C ${sx + dx} ${sy}, ${tx - dx} ${ty}, ${tx} ${ty}`;
 }
 
-const StackHeap2D: React.FC<StackHeap2DProps> = ({ step }) => {
-  const frames = layoutFrames(step.frames);
-  const objects = layoutObjects(step.objects);
-  const refs = getReferences(step);
-  const marking = step.gcPhase === 'mark';
+const StackHeap2D: React.FC<StackHeap2DProps> = ({ beat }) => {
+  const frames = layoutFrames(beat.frames);
+  const objects = layoutObjects(beat.objects);
+  const refs = getReferences(beat);
+  const marking = beat.gcPhase === 'mark';
 
   return (
     <svg
       viewBox={`0 0 ${W} ${H}`}
       className="h-full w-full"
       role="img"
-      aria-label={`Stack and heap: ${step.title}`}
+      aria-label={`Stack and heap: ${beat.title}`}
     >
       <style>{`
         .sh-enter { animation: sh-fade 450ms ease-out both; }
@@ -205,10 +205,10 @@ const StackHeap2D: React.FC<StackHeap2DProps> = ({ step }) => {
       </text>
 
       {/* Frames */}
-      {step.frames.map((f, i) => {
+      {beat.frames.map((f, i) => {
         const b = frames.get(f.id)!;
-        const top = i === step.frames.length - 1;
-        const focused = isFocused(step, f.id);
+        const top = i === beat.frames.length - 1;
+        const focused = isFocused(beat, f.id);
         return (
           <g key={f.id} className="sh-enter" data-viz-label>
             <rect
@@ -253,9 +253,9 @@ const StackHeap2D: React.FC<StackHeap2DProps> = ({ step }) => {
                 fontSize={12}
                 fontFamily="ui-monospace, monospace"
                 className={
-                  isFocused(step, slotKey(f.id, s.name)) ? 'fill-amber-700' : 'fill-slate-700'
+                  isFocused(beat, slotKey(f.id, s.name)) ? 'fill-amber-700' : 'fill-slate-700'
                 }
-                fontWeight={isFocused(step, slotKey(f.id, s.name)) ? 700 : 400}
+                fontWeight={isFocused(beat, slotKey(f.id, s.name)) ? 700 : 400}
               >
                 {s.name} = {s.refId ? '●→' : s.value}
               </text>
@@ -266,9 +266,9 @@ const StackHeap2D: React.FC<StackHeap2DProps> = ({ step }) => {
 
       {/* References (drawn under objects) */}
       {refs.map((r) => {
-        const d = refPath(r, step, frames, objects);
+        const d = refPath(r, beat, frames, objects);
         if (!d) return null;
-        const focused = isRefFocused(step, r);
+        const focused = isRefFocused(beat, r);
         return (
           <path
             key={r.id}
@@ -283,9 +283,9 @@ const StackHeap2D: React.FC<StackHeap2DProps> = ({ step }) => {
       })}
 
       {/* Heap objects */}
-      {step.objects.map((o) => {
+      {beat.objects.map((o) => {
         const b = objects.get(o.id)!;
-        const focused = isFocused(step, o.id);
+        const focused = isFocused(beat, o.id);
         const isArray = o.kind === 'array';
         const unmarked = o.state === 'unmarked';
         const collected = o.state === 'collected';
@@ -361,9 +361,9 @@ const StackHeap2D: React.FC<StackHeap2DProps> = ({ step }) => {
                   fontSize={12}
                   fontFamily="ui-monospace, monospace"
                   className={
-                    isFocused(step, slotKey(o.id, s.name)) ? 'fill-amber-700' : 'fill-slate-700'
+                    isFocused(beat, slotKey(o.id, s.name)) ? 'fill-amber-700' : 'fill-slate-700'
                   }
-                  fontWeight={isFocused(step, slotKey(o.id, s.name)) ? 700 : 400}
+                  fontWeight={isFocused(beat, slotKey(o.id, s.name)) ? 700 : 400}
                 >
                   {isArray ? `[${s.name}]` : s.name}: {s.refId ? '●→' : s.value}
                 </text>
diff --git a/src/features/javascript/components/visualizations/3d/StackHeap3D.tsx b/src/features/javascript/components/visualizations/3d/StackHeap3D.tsx
index e582ae2..824851d 100644
--- a/src/features/javascript/components/visualizations/3d/StackHeap3D.tsx
+++ b/src/features/javascript/components/visualizations/3d/StackHeap3D.tsx
@@ -17,20 +17,20 @@ import {
   type Reference,
   type ShotId,
   type StackFrame,
-  type StoryStep,
+  type StoryBeat,
 } from '../../../utils/stackHeapStory';
 import type { CameraState } from '../../../../../shared/components/viz/viewerCamera';
 import { LabelFramer, StoryCamera } from '../../../../../shared/viz3d/camera';
 import { boundsOf, type Box3, type Shot, type V3 } from '../../../../../shared/viz3d/frameShot';
 
 /**
- * 3D renderer for the Stack & Heap story. Pure view: everything it draws comes from `step`.
+ * 3D renderer for the Stack & Heap story. Pure view: everything it draws comes from `beat`.
  * Style rules (docs/3D-Visualization-Standard.md): isometric-style orthographic camera,
  * flat-shaded limited palette, DOM labels that always face the viewer, preset shot per beat.
  */
 
 export interface StackHeap3DProps {
-  step: StoryStep;
+  beat: StoryBeat;
   /** The learner's camera: view preset, Hold view, pan mode and one-shot commands. */
   camera: CameraState;
   /** Reduced motion: no tweening, instant camera cuts. */
@@ -138,9 +138,9 @@ const FrameSlab: React.FC<{
   isTop: boolean;
   focused: boolean;
   root: boolean;
-  step: StoryStep;
+  beat: StoryBeat;
   instant: boolean;
-}> = ({ entry, exiting, isTop, focused, root, step, instant }) => {
+}> = ({ entry, exiting, isTop, focused, root, beat, instant }) => {
   const group = useRef<THREE.Group>(null);
   const mat = useRef<THREE.MeshLambertMaterial>(null);
   const targetY = frameY(entry.index) + (exiting ? 1.6 : 0);
@@ -190,7 +190,7 @@ const FrameSlab: React.FC<{
             </div>
             <div className="flex gap-2.5">
               {entry.frame.slots.map((s) => {
-                const f = isFocused(step, slotKey(entry.frame.id, s.name));
+                const f = isFocused(beat, slotKey(entry.frame.id, s.name));
                 return (
                   <span key={s.name} className={f ? 'font-bold text-amber-700' : 'text-slate-600'}>
                     {s.name}: {s.refId ? '●→' : s.value}
@@ -211,9 +211,9 @@ const HeapBlock: React.FC<{
   object: HeapObject;
   exiting: boolean;
   focused: boolean;
-  step: StoryStep;
+  beat: StoryBeat;
   instant: boolean;
-}> = ({ object, exiting, focused, step, instant }) => {
+}> = ({ object, exiting, focused, beat, instant }) => {
   const group = useRef<THREE.Group>(null);
   const mat = useRef<THREE.MeshLambertMaterial>(null);
   const size = OBJ_SIZE[object.kind];
@@ -225,7 +225,7 @@ const HeapBlock: React.FC<{
   // The GC shot adds UNMARKED/RECLAIMED badges, widening every label until neighbours in a
   // row meet over the gap between columns. With no stack arcs to cover on those beats, each
   // column's label leans outward (left column left, right column right) to open that gap.
-  const labelX = step.shot === 'gc' ? (object.cell.col === 0 ? '-80%' : '-20%') : '-50%';
+  const labelX = beat.shot === 'gc' ? (object.cell.col === 0 ? '-80%' : '-20%') : '-50%';
   const baseColor = useMemo(
     () =>
       new THREE.Color(
@@ -308,7 +308,7 @@ const HeapBlock: React.FC<{
               <div className="text-slate-400">(empty)</div>
             ) : (
               object.slots.map((s) => {
-                const f = isFocused(step, slotKey(object.id, s.name));
+                const f = isFocused(beat, slotKey(object.id, s.name));
                 return (
                   <div key={s.name} className={f ? 'font-bold text-amber-700' : 'text-slate-600'}>
                     {object.kind === 'array' ? `[${s.name}]` : s.name}: {s.refId ? '●→' : s.value}
@@ -324,14 +324,14 @@ const HeapBlock: React.FC<{
 
 // ---- References -----------------------------------------------------------------------
 
-function refEndpoints(ref: Reference, step: StoryStep): { start: V3; end: V3; mid: V3 } | null {
-  const target = step.objects.find((o) => o.id === ref.to);
+function refEndpoints(ref: Reference, beat: StoryBeat): { start: V3; end: V3; mid: V3 } | null {
+  const target = beat.objects.find((o) => o.id === ref.to);
   if (!target) return null;
   const th = OBJ_SIZE[target.kind][1];
 
   if (ref.fromKind === 'frame') {
-    const index = step.frames.findIndex((f) => f.id === ref.fromOwner);
-    const frame = step.frames[index];
+    const index = beat.frames.findIndex((f) => f.id === ref.fromOwner);
+    const frame = beat.frames[index];
     if (!frame) return null;
     const slotIdx = frame.slots.findIndex((s) => slotKey(frame.id, s.name) === ref.from);
     const z = -FRAME_SIZE[2] / 4 + (slotIdx * FRAME_SIZE[2]) / 2;
@@ -347,7 +347,7 @@ function refEndpoints(ref: Reference, step: StoryStep): { start: V3; end: V3; mi
     return { start, end, mid };
   }
 
-  const source = step.objects.find((o) => o.id === ref.fromOwner);
+  const source = beat.objects.find((o) => o.id === ref.fromOwner);
   if (!source) return null;
   const sh = OBJ_SIZE[source.kind][1];
   // Heap → heap: a low bridge between the facing top edges, below the object labels.
@@ -453,15 +453,15 @@ const RootPulse: React.FC = () => {
 const frameKey = (e: FrameEntry) => e.frame.id;
 const objectKey = (o: HeapObject) => o.id;
 
-const Scene: React.FC<StackHeap3DProps> = ({ step, camera, instant = false }) => {
+const Scene: React.FC<StackHeap3DProps> = ({ beat, camera, instant = false }) => {
   const frameEntries = useMemo(
-    () => step.frames.map((frame, index) => ({ frame, index })),
-    [step.frames]
+    () => beat.frames.map((frame, index) => ({ frame, index })),
+    [beat.frames]
   );
   const frames = usePresence(frameEntries, frameKey, 700);
-  const objects = usePresence(step.objects, objectKey, 700);
-  const refs = getReferences(step);
-  const marking = step.gcPhase === 'mark';
+  const objects = usePresence(beat.objects, objectKey, 700);
+  const refs = getReferences(beat);
+  const marking = beat.gcPhase === 'mark';
 
   return (
     <>
@@ -510,10 +510,10 @@ const Scene: React.FC<StackHeap3DProps> = ({ step, camera, instant = false }) =>
           key={item.frame.id}
           entry={item}
           exiting={exiting}
-          isTop={!exiting && item.index === step.frames.length - 1}
-          focused={isFocused(step, item.frame.id)}
+          isTop={!exiting && item.index === beat.frames.length - 1}
+          focused={isFocused(beat, item.frame.id)}
           root={marking}
-          step={step}
+          beat={beat}
           instant={instant}
         />
       ))}
@@ -523,16 +523,16 @@ const Scene: React.FC<StackHeap3DProps> = ({ step, camera, instant = false }) =>
           key={item.id}
           object={item}
           exiting={exiting}
-          focused={isFocused(step, item.id)}
-          step={step}
+          focused={isFocused(beat, item.id)}
+          beat={beat}
           instant={instant}
         />
       ))}
 
       {refs.map((r) => {
-        const pts = refEndpoints(r, step);
+        const pts = refEndpoints(r, beat);
         return pts ? (
-          <RefArc key={r.id} {...pts} focused={isRefFocused(step, r)} instant={instant} />
+          <RefArc key={r.id} {...pts} focused={isRefFocused(beat, r)} instant={instant} />
         ) : null;
       })}
 
@@ -540,7 +540,7 @@ const Scene: React.FC<StackHeap3DProps> = ({ step, camera, instant = false }) =>
 
       <LabelFramer />
       <StoryCamera
-        shot={SHOTS[step.shot]}
+        shot={SHOTS[beat.shot]}
         bounds={SCENE_BOUNDS}
         camera={camera}
         instant={instant}
@@ -556,7 +556,7 @@ const StackHeap3D: React.FC<StackHeap3DProps> = (props) => (
     dpr={[1, 2]}
     camera={{ position: [10, 10, 14], zoom: 40, near: -100, far: 200 }}
     gl={{ antialias: true, powerPreference: 'high-performance' }}
-    aria-label={`3D view of the stack and heap: ${props.step.title}`}
+    aria-label={`3D view of the stack and heap: ${props.beat.title}`}
     role="img"
   >
     <Scene {...props} />
diff --git a/src/features/javascript/utils/stackHeapStory.test.ts b/src/features/javascript/utils/stackHeapStory.test.ts
index e8b396d..9ebe302 100644
--- a/src/features/javascript/utils/stackHeapStory.test.ts
+++ b/src/features/javascript/utils/stackHeapStory.test.ts
@@ -1,16 +1,16 @@
 import { describe, expect, it } from 'vitest';
-import { getReachable, getReferences, STORY_CODE, STORY_STEPS, slotKey } from './stackHeapStory';
+import { getReachable, getReferences, STORY_CODE, STORY_BEATS, slotKey } from './stackHeapStory';
 
-const step = (id: string) => STORY_STEPS.find((s) => s.id === id)!;
+const beat = (id: string) => STORY_BEATS.find((s) => s.id === id)!;
 const codeLines = STORY_CODE.split('\n').length;
 
 describe('stack & heap story model', () => {
   it('tells the agreed 10 beats', () => {
-    expect(STORY_STEPS).toHaveLength(10);
-    expect(new Set(STORY_STEPS.map((s) => s.id)).size).toBe(10);
+    expect(STORY_BEATS).toHaveLength(10);
+    expect(new Set(STORY_BEATS.map((s) => s.id)).size).toBe(10);
   });
 
-  it.each(STORY_STEPS)('$id is internally consistent', (s) => {
+  it.each(STORY_BEATS)('$id is internally consistent', (s) => {
     expect(s.line).toBeGreaterThanOrEqual(1);
     expect(s.line).toBeLessThanOrEqual(codeLines);
     const objectIds = new Set(s.objects.map((o) => o.id));
@@ -29,13 +29,13 @@ describe('stack & heap story model', () => {
   });
 
   it('keeps Ada alive after her creating frame is popped', () => {
-    const s = step('return-ada');
+    const s = beat('return-ada');
     expect(s.frames.map((f) => f.id)).not.toContain('makeUser');
     expect(getReachable(s)).toContain('ada');
   });
 
   it('keeps Bob reachable through Ada after bob = null', () => {
-    const s = step('bob-null');
+    const s = beat('bob-null');
     const direct = getReferences(s)
       .filter((r) => r.fromKind === 'frame')
       .map((r) => r.to);
@@ -44,10 +44,10 @@ describe('stack & heap story model', () => {
   });
 
   it('has nothing reachable once ada = null, and GC marks accordingly', () => {
-    expect(getReachable(step('ada-null')).size).toBe(0);
-    const mark = step('gc-mark');
+    expect(getReachable(beat('ada-null')).size).toBe(0);
+    const mark = beat('gc-mark');
     for (const o of mark.objects)
       expect(o.state).toBe(getReachable(mark).has(o.id) ? 'marked' : 'unmarked');
-    expect(step('gc-sweep').objects.every((o) => o.state === 'collected')).toBe(true);
+    expect(beat('gc-sweep').objects.every((o) => o.state === 'collected')).toBe(true);
   });
 });
diff --git a/src/features/javascript/utils/stackHeapStory.ts b/src/features/javascript/utils/stackHeapStory.ts
index 0366e81..9f3dbae 100644
--- a/src/features/javascript/utils/stackHeapStory.ts
+++ b/src/features/javascript/utils/stackHeapStory.ts
@@ -1,7 +1,7 @@
 /**
- * Stack & Heap story: one step model, rendered by both the 2D (SVG) and 3D (R3F) views.
+ * Stack & Heap story: one beat model, rendered by both the 2D (SVG) and 3D (R3F) views.
  *
- * Every step is a full snapshot, so stepping backwards is free and switching views
+ * Every beat is a full snapshot, so stepping backwards is free and switching views
  * mid-story keeps the learner on the same beat.
  */
 
@@ -37,7 +37,7 @@ export interface HeapObject {
 
 export type GcPhase = 'mark' | 'sweep';
 
-export interface StoryStep {
+export interface StoryBeat {
   id: string;
   title: string;
   caption: string;
@@ -147,7 +147,7 @@ const allObjects = (state: HeapObjectState) => [
   bobFriends(state),
 ];
 
-export const STORY_STEPS: StoryStep[] = [
+export const STORY_BEATS: StoryBeat[] = [
   {
     id: 'start',
     title: 'The program starts',
@@ -285,10 +285,10 @@ export const STORY_STEPS: StoryStep[] = [
   },
 ];
 
-/** Every reference edge in a step, from stack slots and from heap object slots. */
-export function getReferences(step: StoryStep): Reference[] {
+/** Every reference edge in a beat, from stack slots and from heap object slots. */
+export function getReferences(beat: StoryBeat): Reference[] {
   const refs: Reference[] = [];
-  for (const frame of step.frames) {
+  for (const frame of beat.frames) {
     for (const slot of frame.slots) {
       if (slot.refId) {
         const from = slotKey(frame.id, slot.name);
@@ -296,7 +296,7 @@ export function getReferences(step: StoryStep): Reference[] {
       }
     }
   }
-  for (const object of step.objects) {
+  for (const object of beat.objects) {
     if (object.state === 'collected') continue;
     for (const slot of object.slots) {
       if (slot.refId) {
@@ -309,8 +309,8 @@ export function getReferences(step: StoryStep): Reference[] {
 }
 
 /** Object ids reachable from the roots (every stack frame), following references. */
-export function getReachable(step: StoryStep): Set<string> {
-  const refs = getReferences(step);
+export function getReachable(beat: StoryBeat): Set<string> {
+  const refs = getReferences(beat);
   const reached = new Set<string>();
   const queue = refs.filter((r) => r.fromKind === 'frame').map((r) => r.to);
   while (queue.length) {
@@ -322,7 +322,7 @@ export function getReachable(step: StoryStep): Set<string> {
   return reached;
 }
 
-export const isFocused = (step: StoryStep, key: string) => step.focus.includes(key);
+export const isFocused = (beat: StoryBeat, key: string) => beat.focus.includes(key);
 
 /** An edge is spotlighted when its source slot is in focus. */
-export const isRefFocused = (step: StoryStep, ref: Reference) => step.focus.includes(ref.from);
+export const isRefFocused = (beat: StoryBeat, ref: Reference) => beat.focus.includes(ref.from);
diff --git a/src/shared/components/viz/viewerCamera.ts b/src/shared/components/viz/viewerCamera.ts
index 7da5db0..2ecfa09 100644
--- a/src/shared/components/viz/viewerCamera.ts
+++ b/src/shared/components/viz/viewerCamera.ts
@@ -25,7 +25,7 @@ export type CameraCommandInput =
 /** Everything a 3D renderer needs to drive its camera, owned by the story section. */
 export interface CameraState {
   preset: ViewPreset;
-  /** On: a new step keeps the learner's camera instead of gliding to its shot. */
+  /** On: a new beat keeps the learner's camera instead of gliding to its shot. */
   hold: boolean;
   /** On: left-drag (and one finger) pans instead of orbiting. */
   pan: boolean;
diff --git a/src/shared/hooks/useStoryViewer.ts b/src/shared/hooks/useStoryViewer.ts
index 85548a2..c20ce43 100644
--- a/src/shared/hooks/useStoryViewer.ts
+++ b/src/shared/hooks/useStoryViewer.ts
@@ -30,7 +30,7 @@ export interface StoryViewer {
   toggleHold: () => void;
   togglePan: () => void;
   command: (c: CameraCommandInput) => void;
-  /** Isometric preset, Hold view off, and the step's shot re-framed. */
+  /** Isometric preset, Hold view off, and the beat's shot re-framed. */
   reset: () => void;
   fullscreen: Fullscreen;
   onKeyDown: (e: KeyboardEvent) => void;
diff --git a/src/shared/viz3d/camera.tsx b/src/shared/viz3d/camera.tsx
index c3af1f9..7106f47 100644
--- a/src/shared/viz3d/camera.tsx
+++ b/src/shared/viz3d/camera.tsx
@@ -32,7 +32,7 @@ const wheelPixels = (e: WheelEvent) =>
   e.deltaMode === 1 ? e.deltaY * 33 : e.deltaMode === 2 ? e.deltaY * 400 : e.deltaY;
 
 export interface StoryCameraProps {
-  /** The step's preset shot. */
+  /** The beat's preset shot. */
   shot: Shot;
   /** The scene's extent plus a margin: panning keeps the target inside it. */
   bounds: Box3;
@@ -44,9 +44,9 @@ export interface StoryCameraProps {
 }
 
 /**
- * Frames each step's shot from the learner's view preset and lets them take over: orbit
+ * Frames each beat's shot from the learner's view preset and lets them take over: orbit
  * (left-drag, one finger), pan (right-drag, pan mode, two fingers), zoom (toolbar, Ctrl/⌘ +
- * wheel, pinch; plain wheel only in full screen). Hold view keeps the camera across steps.
+ * wheel, pinch; plain wheel only in full screen). Hold view keeps the camera across beats.
  */
 export const StoryCamera: React.FC<StoryCameraProps> = ({
   shot,