diff --git a/AGENTS.md b/AGENTS.md
index 38ddf783..48057ea3 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -3,6 +3,8 @@
 
 SharpLsp is an open-source, editor-agnostic .NET LSP (C# + F#) built in Rust: one server, the complete .NET development experience in every editor. Stack: C#, Rust, TypeScript
 
+All large files like videos MUST go in Git LFS
+
 **Aim #1: Fix the .NET developer experience.**
 Match and surpass Visual Studio, Rider, and C# Dev Kit — no proprietary dependencies, licenses, or vendor lock-in.
 
@@ -104,8 +106,9 @@ F# ahead of C# on every new feature. F# never takes the back seat.
 
 # Git
 
-> ⛔️ **Don't touch git** unless the user asks or a skill demands it.
-
+> ⛔️ **Don't make git changes like creating new branches** unless the user asks or a skill demands it.
+- Commit and push to submodules before commiting and pushing the feature branch
+- Commit and push after each major change
 - **One feature branch**, never `git worktree`. Work the open one; several open → merge them immediately
 - **Never push to `main`.** PR → CI green → squash-merge → delete the branch
 - **Own every PR until green**: `gh pr merge --auto --squash`, then fix and push until all checks pass
diff --git a/Makefile b/Makefile
index 809dac3f..ef12acdc 100644
--- a/Makefile
+++ b/Makefile
@@ -795,7 +795,7 @@ _test-tooling:
 	node --test tools/vsix/chunk-once.test.mjs
 	@echo "==> Running repo tooling tests..."
 	node --test tools/netcoredbg/custody.test.mjs tools/make/reinstall-loop.test.mjs tools/make/vsix-rebuild.test.mjs tools/vsix/rebuild-contract.test.mjs tools/vsix/debug-cleanup.test.mjs tools/audit/dotnet-vulnerable.test.mjs \
-		tools/rider/gradle.test.mjs tools/vsix/resolve-symlink-stubs.test.mjs
+		tools/rider/gradle.test.mjs tools/vsix/resolve-symlink-stubs.test.mjs tools/make/vsix-profiles.test.mjs
 
 _website-build:
 	@echo "==> Building website..."
@@ -807,13 +807,13 @@ _website-dev:
 
 # [WEB-DESIGN-MEDIA] Shoot and publish one website film from the packaged VSIX:
 # `make _film FILM=fsharp`, or `PUBLISH=1` to publish the last shoot again.
-# The films live in src/website/tools/profiler-film/films; its README says how.
+# The films live in src/website/tools/video/films; its README says how.
 _film:
 	@test -n "$(FILM)" || { echo "usage: make _film FILM=<film> [PUBLISH=1]" >&2; exit 1; }
 	$(if $(PUBLISH),,$(MAKE) _build-vsix VSIX_PREBUILT=1)
 	@# Install once: npm ci would wipe the voice model kokoro-js caches in node_modules.
-	test -d src/website/tools/profiler-film/node_modules || npm ci --prefix src/website/tools/profiler-film
-	node src/website/tools/profiler-film/film.mjs $(FILM) $(if $(PUBLISH),--publish,)
+	test -d src/website/tools/video/node_modules || npm ci --prefix src/website/tools/video
+	node src/website/tools/video/film.mjs $(FILM) $(if $(PUBLISH),--publish,)
 
 _test-website:
 	@echo "==> Running website Playwright tests..."
@@ -839,6 +839,8 @@ _lint-zed:
 _lint-vsix: _check-vsix-chunks _check-sdk-pin _check-spec-citations
 	# The profiler contributions are generated from the shared UI library ([PROFILER-SHARED-LIBRARY-VSCODE]).
 	node tools/vsix/sync-profiler-contributions.mjs --check
+	# The tutorial's types are generated from its typeDiagram model ([TUTORIAL-MODEL]).
+	node tools/vsix/tutorial-model.mjs --check
 	node --test tools/ci/security-gates.test.mjs tools/ci/changed-files.test.mjs tools/ci/vsix-coverage.test.mjs \
 		tools/ci/spec-citations.test.mjs tools/vsix/signals-bundle.test.mjs
 	npm run lint:eslint --prefix $(VSCODE_DIR)
@@ -1107,6 +1109,11 @@ _deploy-sidecars:
 # The extension identifier, read from the manifest that defines it. Hardcoding it
 # is how the previous uninstall target came to name an extension id that had not
 # existed for months, silently uninstalling nothing. [DIST-VSIX-DEV-INSTALL]
+# The VS Code profiles, joined by "|", that hold their own copy of SharpLsp: the
+# install loop replaces it in each, not only in the default profile. Override
+# with VSCODE_PROFILES='A|B', or VSCODE_PROFILES= for the default profile only.
+# [DIST-VSIX-DEV-INSTALL]
+VSCODE_PROFILES ?= $(shell node tools/vsix/vscode-profiles.mjs $(EXTENSION_ID))
 EXTENSION_ID = $(shell node -e "const p=require('./$(VSCODE_DIR)/package.json');process.stdout.write(p.publisher+'.'+p.name)")
 
 # The per-OS half of the install loop: where the VS Code CLI lives, and how stale
@@ -1154,13 +1161,17 @@ RESOLVE_CODE = \
 # SharpLsp loaded in VS Code pretending to be the change under test.
 # `_build-vsix` pulls in `_build-rust` and `_build-dotnet`, so the Rust host and
 # both sidecar binaries are rebuilt here, not reused from the cleaned tree.
+#
+# The profiles holding SharpLsp are read BEFORE the uninstall, which removes it
+# from them, and handed to both ends of the loop.
 reinstall-vsix:
 	@echo "==> Uninstall, full clean, rebuild and reinstall for $(HOST_PLATFORM)..."
-	$(MAKE) uninstall-vsix
-	$(MAKE) _kill
-	$(MAKE) _clean-artifacts
-	$(MAKE) _build-vsix
-	$(MAKE) install-vsix
+	@profiles='$(VSCODE_PROFILES)'; \
+		$(MAKE) uninstall-vsix VSCODE_PROFILES="$$profiles" && \
+		$(MAKE) _kill && \
+		$(MAKE) _clean-artifacts && \
+		$(MAKE) _build-vsix && \
+		$(MAKE) install-vsix VSCODE_PROFILES="$$profiles"
 
 install-vsix:
 	@test -f $(DEV_VSIX) || { \
@@ -1169,7 +1180,11 @@ install-vsix:
 	}
 	@echo "==> Installing $(DEV_VSIX)..."
 	@$(RESOLVE_CODE); \
-		"$$code_cli" --install-extension "$(DEV_VSIX)" --force
+		"$$code_cli" --install-extension "$(DEV_VSIX)" --force || exit 1; \
+		list='$(VSCODE_PROFILES)'; IFS='|'; for profile in $$list; do \
+			echo "==> ...and into VS Code profile '$$profile'"; \
+			"$$code_cli" --install-extension "$(DEV_VSIX)" --force --profile "$$profile" || exit 1; \
+		done
 	@echo "==> $(EXTENSION_ID) installed. Reload VS Code to pick it up."
 
 # Uninstalling what is not installed is a success, not a failure: the reinstall
@@ -1177,7 +1192,10 @@ install-vsix:
 uninstall-vsix:
 	@echo "==> Uninstalling $(EXTENSION_ID)..."
 	@$(RESOLVE_CODE); \
-		"$$code_cli" --uninstall-extension "$(EXTENSION_ID)" || true
+		"$$code_cli" --uninstall-extension "$(EXTENSION_ID)" || true; \
+		list='$(VSCODE_PROFILES)'; IFS='|'; for profile in $$list; do \
+			"$$code_cli" --uninstall-extension "$(EXTENSION_ID)" --profile "$$profile" || true; \
+		done
 
 # ── Install (private) ─────────────────────────────────────────────
 
diff --git a/docs/models/vscode-tutorial.td b/docs/models/vscode-tutorial.td
new file mode 100644
index 00000000..f0661049
--- /dev/null
+++ b/docs/models/vscode-tutorial.td
@@ -0,0 +1,40 @@
+typeDiagram
+
+# The interactive tutorial's model ([TUTORIAL-MODEL]). The extension's
+# src/tutorial/model.generated.ts is generated from this file by
+# tools/vsix/tutorial-model.mjs; never edit that file by hand.
+
+# A language the tutorial teaches. F# is taught first.
+union TutorialLanguage {
+  FSharp
+  CSharp
+}
+
+# One thing the user does in the live editor.
+union TutorialAction {
+  # Open a source file of the language in an editor.
+  OpenFile
+  # Hover a symbol, and SharpLsp answers with Quick Info.
+  Hover
+  # Trigger completion, and SharpLsp answers with items.
+  Completion
+  # Go to a symbol's definition, and SharpLsp answers with a location.
+  Definition
+  # Find all references, and SharpLsp answers with locations.
+  References
+  # Invoke code actions (Cmd+. / Ctrl+.), and SharpLsp answers with fixes and refactorings.
+  CodeAction
+  # Show the Solution Explorer.
+  SolutionExplorer
+}
+
+# A step of one language's walkthrough.
+type TutorialStep {
+  language: TutorialLanguage
+  action: TutorialAction
+}
+
+# Every step the user has carried out, persisted across sessions.
+type TutorialProgress {
+  done: List<TutorialStep>
+}
diff --git a/docs/specs/DESIGN-SYSTEM.md b/docs/specs/DESIGN-SYSTEM.md
index 0f70f2fe..9fc3b85d 100644
--- a/docs/specs/DESIGN-SYSTEM.md
+++ b/docs/specs/DESIGN-SYSTEM.md
@@ -126,7 +126,8 @@ Page-level grids and marketing card styles must not leak into `.prose`. Do not r
 
 Screenshots and video of a SharpLsp feature show the real extension, never a mock-up.
 
-- **Capture.** Product films are shot by `src/website/tools/profiler-film/` (its README says how). Every shot runs on `kit/set.mjs`'s `onSet`: an isolated VS Code (its own user-data and extensions directories, never the user's editor) running the packaged VSIX against a real .NET demo from `demos/`. A walkthrough is one file in `films/`, a list of scenes that `film.mjs` shoots as real-time clips and publishes; `kit/acts/` tells the shared stories (the CPU and memory loops, the language features, the Solution Explorer), so each film supplies only its words, its demo and its edits. The profiler films run on the C# Storefront demo and its F# twin, FsStorefront; the language films run on `Shop.slnx`, both in one solution, and show F# before C#. Every F# claim the docs make is shown on F# code. Every feature page's still, and every figure in the launch post, is shot the same way by `films/doc-stills.mjs`; no page shows a capture from any other source. The composited one-minute film is `films/profiler/`: `capture.mjs` records stills and screencasts, and `render.mjs` turns them into the site's assets.
+- **Capture.** Product films are shot by `src/website/tools/video/` (its README says how). Every shot runs on `kit/set.mjs`'s `onSet`: an isolated VS Code (its own user-data and extensions directories, never the user's editor) running the packaged VSIX against a real .NET demo from `demos/`. Each film is a folder of its own, `films/<name>/`, holding only its words, timings and edits (`film.mjs`, and `narration.json` when narrated); all shared code is in `kit/`. A walkthrough's `film.mjs` is a list of scenes that the entry point `film.mjs` shoots as real-time clips and publishes through the one film camera ([WEB-DESIGN-MEDIA-CAMERA]); `kit/acts/` tells the shared stories (the CPU and memory loops, the language features, the Solution Explorer), so each film supplies only its words, its demo and its edits. The profiler films run on the C# Storefront demo and its F# twin, FsStorefront; the language films run on `Shop.slnx`, both in one solution, and show F# before C#. Every F# claim the docs make is shown on F# code. Every feature page's still, and every figure in the launch post, is shot the same way by `films/doc-stills/`; no page shows a capture from any other source. The composited one-minute film, `films/profiler/`, goes through the same entry point: its `film.mjs` names its own shoot (`capture.mjs`, stills and screencasts) and its own publish (`render.mjs`, which steps `film.html` frame by frame into the site's assets).
+- **Lessons.** A lesson teaches one feature end to end: a narrated slide film (`kit/lesson/`) that names the shortcut, explains where the feature's results come from, shows each step on real footage, shows the code before and after, explains what happens underneath, and recaps. Its footage is cut from the feature's published walkthrough, cropped clear of the walkthrough's step caption, so it never shows a mocked editor, and a fast-forwarded stretch keeps its speed badge. Slides are typography and diagrams only; code shown on a slide is text, never a drawing of the editor. Each slide holds until its lines are spoken, and each item appears as the line naming it starts. New lessons start from `templates/lesson/`; `films/refactoring-lesson/` is the reference. The docs page the lesson teaches leads with it, follows its steps in prose with code to try, and keeps the walkthrough as the one-take recording.
 - **Honesty.** Footage plays in real time unless the frame says otherwise: every fast-forwarded stretch carries an on-screen speed marker, and captions name time-lapses. Motion graphics (title cards, camera moves, highlights, the cursor) frame the footage but never alter what the editor shows.
 - **Privacy.** No frame may show a user name, home directory or hostname. The demo runs from a neutral temporary path, and the editor runs on a copy-on-write clone of the .NET install under that path, with its login-shell environment off, so every path it prints is neutral. A terminal appears only where the feature runs in one (F# Interactive, a build task, a contributor's command line), and a shell terminal starts with no profile and a bare `$ ` prompt.
 - **Formats.**
@@ -136,10 +137,30 @@ Screenshots and video of a SharpLsp feature show the real extension, never a moc
   - Marketing pages may autoplay a film only when it is muted and looping; docs pages use controls and are never muted.
   - Every autoplaying video pauses and shows its controls under `prefers-reduced-motion: reduce`.
   - Every video ships a WebP poster, the films and the recordings alike.
-- **Narration.** A walkthrough may be narrated (`kit/sound/`). Its reviewed script (`films/<film>.narration.json`) is spoken by Kokoro-82M through `kokoro-js` on the capturing machine, never by a speech service or the operating system's voices, whose licences forbid publishing. Each line starts just after its scene's cut, and a scene holds its last frame until its line ends. The music is an original score synthesised from code (`kit/sound/score.mjs`), so no film carries licensed or sampled music, and it ducks under the voice. A narrated film ships AAC in its MP4 and Opus in its WebM, plays unmuted with controls, and carries WebVTT captions in every site language (`<id>.<lang>.vtt`, the page's own language shown by default), listed under `captions` in the catalogue.
+- **Narration.** A walkthrough may be narrated (`kit/sound/`). Its reviewed script (`films/<name>/narration.json`) is spoken by Kokoro-82M through `kokoro-js` on the capturing machine, never by a speech service or the operating system's voices, whose licences forbid publishing. Each line starts just after its scene's cut, and a scene holds its last frame until its line ends. The music is an original score synthesised from code (`kit/sound/score.mjs` for walkthroughs, the quicker `kit/sound/drive.mjs` for lessons), so no film carries licensed or sampled music, and it ducks under the voice. A narrated film ships AAC in its MP4 and Opus in its WebM, plays unmuted with controls, and carries WebVTT captions in every site language (`<id>.<lang>.vtt`, the page's own language shown by default), listed under `captions` in the catalogue.
 - **One catalogue.** Every video on the site is declared once in `src/website/src/_data/videos.json`: encodings, size, length, upload date, the `page` that explains it, and its label and caption in each language. Every video also ships a 1200x630 JPEG social card, `<id>-card.jpg`, cut from its poster frame by `kit/encode.mjs`. Pages place a video with the `{% video "<id>" %}` shortcode (`src/website/video-figure.js`) and never repeat `<video>` markup. The shortcode renders in the page's language and emits a schema.org `VideoObject` whose name is the player's label, so search results describe exactly what a reader hears.
 - **Placement.** A video goes wherever a page talks about what it shows: the home page (the profiler film autoplaying in the hero, the CPU recording in the profiler section), every docs page with a feature to show (its own narrated walkthrough, after the page's introduction; the profiler docs add both recordings, the F# language page the F# profiling walkthrough too), and every blog post that discusses the profiler or the editor experience, in every language the page is published in. The Zed page has no film: Zed is a native application, and filming it would mean recording the real desktop.
 
+## [WEB-DESIGN-MEDIA-CAMERA] Film Camera
+
+Every walkthrough is cut through one camera, `kit/zoom.mjs` in `src/website/tools/video/`, so the films move alike and no film keys a camera move by hand.
+
+- **Track.** While a clip records, the workbench samples twenty times a second where the film's pointer and the editor's text cursor are, and every widget the editor has open beside them: a hover, the completion list and its details, signature help, a peek, the rename box, a code-action or context menu, a dialog, the Settings editor and the Problems panel. A widget is framed once it has stayed open a moment, and the palette only when a film dwells on it. Each step caption is logged with its time (`kit/track.mjs`). The shoot saves the track beside its clip.
+- **Framing.** A clip opens on the whole workbench. The camera then pushes in on the pointer or the text cursor, whichever moved last, framed where it comes to rest rather than along the way it glides or jumps, together with every open widget and everything that happens in the next 1.5 seconds, as close as 2× and never past the workbench's edge. It holds while the action stays in frame, and moves when the action leaves it. After two quiet seconds with nothing open, it pulls back to the whole workbench when the quiet lasts at least 2.5 seconds longer.
+- **Motion.** Every move eases in and out over 0.8 seconds, starting 0.35 seconds before the action it frames. Fast-forwarded footage is paced so its moves look the same on screen.
+- **Sharpness.** Each frame of the cut is cropped from the 3200×2000 footage and scaled to the film's 1920-pixel width, so the deepest zoom loses no detail.
+- **Captions.** The step caption and speed badge are laid over the cut after the camera (`kit/captions.mjs`), in the same place in every frame, so the camera never moves or crops them. The camera keeps what it frames clear of their band at the foot of the frame.
+- **Poster.** A film's poster is a frame of the cut as it plays, camera and caption included.
+
+## [WEB-DESIGN-MEDIA-CHAPTERS] Film Chapters
+
+A film marks the runs of its cut that show one step of the VS Code tutorial ([TUTORIAL-STEPS]), so the tutorial panel ([TUTORIAL-PANEL]) plays a step's own run, not the whole film from a guessed second.
+
+- **Marks.** A scene names its step with `chapter` (`scene(clip, n, text, act, { chapter })`): a step key such as `FSharp.Hover`, or the action alone (`SolutionExplorer`) when both languages share the shot. Consecutive scenes with one mark make one chapter; a mark on scenes apart fails the film. The scene's step caption titles the chapter.
+- **Track.** Publishing writes `<id>.chapters.vtt` beside the video (`kit/chapters.mjs`, through `kit/vtt.mjs`, the one WebVTT writer captions use too): one cue per chapter, its identifier the mark, timed in the cut with every hold before it. A film with no marks publishes no track.
+- **The tutorial's film.** `films/vscode-tutorial/` is shot for the panel: one shot per tutorial step, F# first, each doing exactly what its step asks, so every step has a chapter of one film, framed by the camera ([WEB-DESIGN-MEDIA-CAMERA]).
+- **On the site.** A chaptered film is catalogued with `"chapters": true`. Its player carries the track as `<track kind="chapters">`, and `{% chapters "<id>" %}` lists the chapters: each one's start, linked to the film's watch page at that second (`?t=`), and its step's title as the VS Code walkthrough shows it in the page's language (`walkthrough.<Language>.<Action>.title` in the extension's `package.nls*.json`; a step both languages share takes the F# title). The docs Tutorial page (`/docs/tutorial/`, Set up group) leads with `vscode-tutorial` and lists its chapters.
+
 ## [WEB-DESIGN-MEDIA-DISCOVERY] Video Search and Sharing
 
 Every catalogued video can be found in Google's video results and plays in social previews. The rules follow Google's [video SEO best practices](https://developers.google.com/search/docs/appearance/video), [VideoObject structured data](https://developers.google.com/search/docs/appearance/structured-data/video) and [video sitemaps](https://developers.google.com/search/docs/crawling-indexing/sitemaps/video-sitemaps).
diff --git a/docs/specs/DIAGNOSTICS-SPEC.md b/docs/specs/DIAGNOSTICS-SPEC.md
index eb0b78b7..b149958d 100644
--- a/docs/specs/DIAGNOSTICS-SPEC.md
+++ b/docs/specs/DIAGNOSTICS-SPEC.md
@@ -312,6 +312,10 @@ Before workspace creation, SharpLsp applies this restore gate:
 
 The gate is mandatory because unresolved `<PackageReference>` items can produce CS0246/CS0234 diagnostics on the first pull.
 
+**F#.** Before the F# sidecar loads a project ([SHARPLSP-ARCHITECTURE-PROJECTS-FSHARP-OWNING] included), it restores it again (`dotnet msbuild -t:Restore`) when its `obj/project.assets.json` names a package that none of the assets file's package folders holds. Clearing the NuGet cache leaves a built project in exactly that state: MSBuild trusts the build's assets cache, so its design-time command line references none of the packages. The netstandard reference pack is one of them, and without its core library FCS aborts every check, so hover, completion and navigation answer nothing. A project that has never been restored is not restored by this gate. The log names the project, how many packages are gone and the first of them, then whether the restore succeeded.
+
+**C# owning projects.** The C# sidecar never restores a project it loads only because the user opened one of its files ([SHARPLSP-ARCHITECTURE-PROJECTS-CSHARP-OWNING]). An owner with no `obj/project.assets.json` stays unloaded, and the edit reports `dotnet restore <owner>` as the remedy. Opening a file must leave the user's project exactly as it was.
+
 ## [DIAG-PERFORMANCE] Performance Targets
 
 | Metric | Target |
diff --git a/docs/specs/DISTRIBUTION-SPEC.md b/docs/specs/DISTRIBUTION-SPEC.md
index 03728857..79f3d486 100644
--- a/docs/specs/DISTRIBUTION-SPEC.md
+++ b/docs/specs/DISTRIBUTION-SPEC.md
@@ -285,8 +285,17 @@ and types `make` finds the actions where `make` looks for them.
 | Target | Contract |
 |---|---|
 | `make reinstall-vsix` | uninstall → kill → `clean` → `_build-vsix` (Rust host + both sidecars + extension, payload verified, packaged for the host platform) → install. The whole loop. |
-| `make install-vsix` | install `dist/sharplsp.vsix` as it stands. Fails if it is absent. |
-| `make uninstall-vsix` | remove the installed extension. Succeeds when nothing is installed. |
+| `make install-vsix` | install `dist/sharplsp.vsix` as it stands, into the default profile and every VS Code profile that holds its own copy of SharpLsp. Fails if it is absent. |
+| `make uninstall-vsix` | remove the installed extension from the default profile and those profiles. Succeeds when nothing is installed. |
+
+**Profiles.** The VS Code CLI installs into the default profile unless told
+`--profile`, and a window whose workspace is associated with another profile keeps
+running that profile's copy: a reinstall that misses it leaves the developer on an
+old build. `tools/vsix/vscode-profiles.mjs` lists the profiles whose own
+`extensions.json` holds SharpLsp (a profile sharing the default profile's extensions
+needs nothing more). `reinstall-vsix` reads that list before it uninstalls, and the
+install puts the new build into each profile on it. `VSCODE_PROFILES='A|B'` overrides
+the list; an empty value means the default profile only.
 
 Requirements:
 
diff --git a/docs/specs/SHARPLSP-SPEC.md b/docs/specs/SHARPLSP-SPEC.md
index 6729b977..0e2f4659 100644
--- a/docs/specs/SHARPLSP-SPEC.md
+++ b/docs/specs/SHARPLSP-SPEC.md
@@ -216,6 +216,26 @@ Definition finds the declaration in Roslyn's compilation by the documentation id
 
 When MSBuild cannot report the command line, or Roslyn cannot emit an image at all, the reference stands on its DLL and a warning names the project and the reason. A DLL that does not exist is left for the compiler to report.
 
+#### [SHARPLSP-ARCHITECTURE-PROJECTS-FSHARP-OWNING] F# Files Outside the Loaded Solution
+
+A file no loaded F# project compiles still answers, from the project that owns it (#414). When the editor opens or edits such a `.fs` or `.fsi` file, the F# sidecar looks for its owner: the nearest `.fsproj`, in the file's directory or a parent, whose `<Compile>` items list the file. It loads that project in the background beside the workspace's own, exactly as a solution project loads, with its references prepared. The workspace's projects stay loaded and keep answering.
+
+The load runs once per owner, however many edits arrive while it runs. It never blocks the edit that started it, because the host forwards edits synchronously. A file with no owner answers as before, from the workspace's first project. The log names the project loaded and the file that needed it, or why it could not load.
+
+#### [SHARPLSP-ARCHITECTURE-PROJECTS-CSHARP-OWNING] C# Files Outside the Loaded Solution
+
+C# follows the F# rule above. When the editor opens or edits a `.cs` file that no loaded project compiles, the C# sidecar finds its owner: the first `.csproj`, in name order, in the nearest directory at or above the file that holds one. An SDK project compiles every `.cs` file beneath it.
+
+The owner loads in the background into the same Roslyn solution:
+- F# projects it reaches load as placeholders ([SHARPLSP-ARCHITECTURE-PROJECTS-OWNERSHIP]).
+- A project the solution already holds is linked, never loaded twice.
+
+Opening a file never restores or builds a project the workspace did not load:
+- An owner with no `obj/project.assets.json` is not loaded. The edit fails with a message naming the owner and `dotnet restore`.
+- A restored owner loads with `$(OutDir)` in the sidecar's scratch folder. A design-time build creates its output folder, and the user's own output folders must stay exactly as they built them ([DEBUG-FEATURES-LAUNCH-BUILD]).
+
+The edit that started the load is held and applied once the project lands, so hover, completion and navigation answer from the owner. The load runs once per owner and never blocks the edit. A project that is already loaded is never reloaded. The log names the project and the file, or why it could not load.
+
 ### [SHARPLSP-ARCHITECTURE-BINARIES] Binary Layout and Installation
 
 Every per-platform VSIX MUST bundle `sharplsp`.
diff --git a/docs/specs/VSCODE-TUTORIAL-SPEC.md b/docs/specs/VSCODE-TUTORIAL-SPEC.md
new file mode 100644
index 00000000..84dc3214
--- /dev/null
+++ b/docs/specs/VSCODE-TUTORIAL-SPEC.md
@@ -0,0 +1,125 @@
+# VS Code Interactive Tutorial Spec `[TUTORIAL]`
+
+**Status:** active · **Owner:** VS Code extension (`src/editors/vscode/src/tutorial/`) · **Issue:** #412 · **Plan:** [VSCODE-TUTORIAL-PLAN.md](../plans/VSCODE-TUTORIAL-PLAN.md)
+
+---
+
+## Goal `[TUTORIAL-GOAL]`
+
+When SharpLsp first opens, it teaches itself in the user's own editor. A video panel plays a short film for the current step while the user carries out the step's action in the live editor. Once the action works, the step ticks itself off and the next film starts.
+
+A step ticks only when SharpLsp itself answers the action. A hover that returns no Quick Info, or a definition request that finds nothing, does not count. The user never clicks a "Mark done" button: the evidence is the real response.
+
+F# is taught first ([TUTORIAL-STEPS]). The tutorial works in desktop VS Code and in browser VS Code served from the user's machine (`code serve-web`), because both run the extension host, and so SharpLsp, locally ([TUTORIAL-BROWSER]).
+
+## Model `[TUTORIAL-MODEL]`
+
+The model is defined in typeDiagram, in [docs/models/vscode-tutorial.td](../models/vscode-tutorial.td). The extension's `src/tutorial/model.generated.ts` is generated from it by `node tools/vsix/tutorial-model.mjs`, and `make _lint-vsix` fails when the generated file is stale (`--check`).
+
+```mermaid
+flowchart LR
+  LSP[SharpLsp response] -->|middleware| Detect
+  Editor[Active editor / tree view] --> Detect
+  Detect[Detection] -->|withStep| Progress[(progress Signal)]
+  Progress --> Store[globalState]
+  Progress --> Context[context keys]
+  Progress --> Panel[Video panel]
+  Context --> Walkthrough[Get Started walkthrough]
+```
+
+## Steps `[TUTORIAL-STEPS]`
+
+Each language has the same seven steps, in this order. The F# walkthrough is contributed first and is the one the first run opens.
+
+| Action | The user | Ticks when | Film |
+|--------|----------|------------|------|
+| `OpenFile` | opens a source file of the language | an editor of the language becomes active | F#: `fsharp-language`; C#: `getting-started` |
+| `Hover` | hovers a symbol | `textDocument/hover` answers with content | `hover` |
+| `Completion` | triggers completion | `textDocument/completion` answers with at least one item | `code-completions` |
+| `Definition` | goes to a definition | `textDocument/definition` answers with at least one location | `navigation` |
+| `References` | finds all references | `textDocument/references` answers with at least one location | `navigation` |
+| `CodeAction` | invokes code actions (Cmd+. or Ctrl+.) | `textDocument/codeAction`, invoked by the user, answers with at least one action | `refactoring-lesson`, from its F# chapter (0:44) or C# chapter (1:56) |
+| `SolutionExplorer` | shows the Solution Explorer | the Solution Explorer view becomes visible | `sharplsp-tour` |
+
+The films are the website's published films, served from `https://sharplsp.dev/assets/videos/<film>.mp4`: H.264 MP4, never WebM, because VS Code's Electron has no WebM demuxer (a WebM fails with `DEMUXER_ERROR_COULD_NOT_OPEN`). The step table in `src/tutorial/steps.ts` is the only place that names them, and the chapter a step starts at. `refactoring-lesson` is a narrated lesson film ([WEB-DESIGN-MEDIA] Lessons).
+
+## Detection `[TUTORIAL-DETECT]`
+
+### LSP Responses `[TUTORIAL-DETECT-LSP]`
+
+A `sendRequest` middleware sits outside the request hold ([DIST-FAILURE-UX] rule 6), and observes each response after it arrives. It never changes, delays or drops a response, and an exception inside it never reaches the request.
+
+A response counts toward a step when all of these hold:
+
+1. The request is one of the five methods in [TUTORIAL-STEPS]. A code action request counts only when its `context.triggerKind` is `Invoked` (1): VS Code also asks automatically as the caret moves, and that is not the user acting.
+2. Its `textDocument.uri` names a document VS Code has open, with language `fsharp` or `csharp`. That language picks the walkthrough.
+3. The response is *meaningful*:
+   - for hover, a non-null result whose `contents` is a non-empty string, a non-empty array, or a markup or marked string with non-empty `value`;
+   - for completion, a non-empty array, or a list whose `items` is non-empty;
+   - for definition and references, a single location or a non-empty array of locations;
+   - for code actions, a non-empty array.
+
+A request that fails, or is cancelled, never counts.
+
+### Editor Events `[TUTORIAL-DETECT-EDITOR]`
+
+- `OpenFile` ticks when the active text editor's document is a `file` or `untitled` document with language `fsharp` or `csharp`. The first-run check applies to the editor already active at activation, too.
+- `SolutionExplorer` ticks for **both** languages when the Solution Explorer view becomes visible, including when it is already visible at activation. The Solution Explorer is shared by both languages.
+
+## Progress `[TUTORIAL-PROGRESS]`
+
+Progress is a `Signal<TutorialProgress>` in `src/tutorial/progress.ts`, the single source of truth ([VSCODE-REACTIVITY-STATE]). Recording a step that is already done is a no-op that notifies nobody.
+
+- **Persistence:** every change is written to `globalState` under `sharplsp.tutorial.progress`, and read back at activation. A stored value that is not a valid progress (`isTutorialProgress`) is discarded with a warning, and the tutorial starts empty.
+- **Context keys:** every change sets `sharplsp.tutorial.<Language>.<Action>` (for example `sharplsp.tutorial.FSharp.Hover`) to whether the step is done. The walkthrough reads these keys ([TUTORIAL-WALKTHROUGH]).
+- **Reset:** the command `sharplsp.tutorial.reset` clears progress, so every step, every context key and the panel return to their starting state.
+
+## Walkthrough `[TUTORIAL-WALKTHROUGH]`
+
+The manifest contributes two walkthroughs to VS Code's Get Started page: `sharplsp.tutorial.fsharp` ("Learn SharpLsp with F#") first, then `sharplsp.tutorial.csharp`. Each lists the seven steps in [TUTORIAL-STEPS] order.
+
+- Each step's `completionEvents` is exactly `onContext:sharplsp.tutorial.<Language>.<Action>`, so the tick comes from [TUTORIAL-PROGRESS], never from a click.
+- The `OpenFile` step's description links `sharplsp.tutorial.openFile` with the language, which opens a file of that language as [TUTORIAL-OPEN-FILE] picks it.
+- Every step's description links `sharplsp.tutorial.open`, which shows the video panel.
+- Step titles and descriptions are localized in `package.nls.json`, `package.nls.ja.json` and `package.nls.zh-cn.json`.
+
+## Open File `[TUTORIAL-OPEN-FILE]`
+
+`sharplsp.tutorial.openFile` (the panel's "Open one for me") opens a file SharpLsp answers in, so every later step works there. A file outside the loaded solution gets no semantic answers: no hover, completion or navigation.
+
+- With a solution loaded, it opens the solution's first file of the language that declares at least one symbol. If the solution has none, it says "There is no F# file in the loaded solution" and opens nothing. It never falls back to a file outside the solution.
+- With no solution loaded yet, it opens the workspace's first file of the language, skipping `bin`, `obj`, `node_modules` and `.git`.
+- It logs the file it opens.
+
+## Video Panel `[TUTORIAL-PANEL]`
+
+`sharplsp.tutorial.open` shows a single webview panel, "SharpLsp Tutorial", beside the active editor, or in column two when no editor is active (in column one, the next file opened would replace it). Running it again reveals the same panel where it is. It takes an optional language, which defaults to F#.
+
+- **Contents:** a language switch (F#, then C#), the selected language's seven steps, each marked done or not, and the current step's film. The current step is the first step not yet done. When all seven are done, the panel says so and shows no film.
+- **Reactivity:** the panel is a projection of the progress signal and the selected language. A change posts the new view to the webview, which updates in place. The film element is replaced only when the current step's film changes, so a tick that leaves the same film current does not restart it.
+- **Film:** `<video>` with `controls`, `autoplay`, `loop` and `playsinline`. It autoplays muted, because VS Code's windows set `autoplayPolicy: user-gesture-required` and a webview cannot autoplay with sound before the viewer clicks. The films are narrated ([WEB-DESIGN-MEDIA]), so while a film is muted the panel shows a **🔊 Sound on** button beneath it. A click unmutes the film. From then on every film the panel swaps in plays with its sound. Its poster is `<film>-poster.webp`, and its captions are `<film>.en.vtt`. A film the website publishes without captions (today `sharplsp-tour`) gets no caption track. A step with a chapter opens its film there with a media fragment (`<film>.mp4#t=<seconds>`); the panel swaps the film when the film or its chapter changes. The content security policy allows media, images and captions from `https://sharplsp.dev` only, plus `media.githubusercontent.com` and `raw.githubusercontent.com` for a film the site has not deployed yet (served from one pinned commit until it does), and scripts by nonce only. If the film cannot load (for example offline), the panel shows the step's instructions in its place.
+- **Format:** MP4 only. Desktop VS Code's Electron decodes H.264 and AAC but cannot open a WebM, so the panel never names a `.webm`.
+
+### Film Report `[TUTORIAL-PANEL-FILM-REPORT]`
+
+The webview reports each film to the extension: `loading` when it swaps the film in, `ready` once the film's metadata loads, and `error` with the `MediaError` code and message. Every report says whether the film is muted. The extension logs each report, `error` as a warning, so a film that will not play is never a silent failure. `TutorialPanel.film()` returns the last report as a test seam.
+
+## First Run `[TUTORIAL-FIRST-RUN]`
+
+On the first activation after install, SharpLsp opens the F# walkthrough and the video panel beside it, then records `sharplsp.tutorial.shown` in `globalState` so it never opens them on its own again.
+
+- The setting `sharplsp.tutorial.showOnStartup` (default `true`) turns this off.
+- It never runs when the extension host runs in test mode (`ExtensionMode.Test`). Suites open the tutorial through its commands.
+- The tutorial is available at any time from the command palette ("SharpLsp: Open Tutorial") and from the Get Started page.
+
+## Browser `[TUTORIAL-BROWSER]`
+
+`code serve-web` serves VS Code to a browser and runs the extension host on the user's machine, so SharpLsp, its sidecars and the tutorial work unchanged. vscode.dev and github.dev cannot run SharpLsp: they have no local extension host.
+
+## Testing `[TUTORIAL-TESTING]`
+
+`src/test/suite/tutorial.test.ts` drives the real extension against the real fixture solution:
+
+- The pure rules: meaningful responses, step lookup, the current step, and progress validation.
+- The manifest: the two walkthroughs, F# first, with the six steps in order, each completing on exactly its own context key.
+- The live editor: opening an F# file, hovering, completing, going to definition, and finding references each tick their own F# step (and no C# step). The panel's view, the persisted progress and the reset follow.
diff --git a/src/editors/vscode/media/tutorial/panel.css b/src/editors/vscode/media/tutorial/panel.css
new file mode 100644
index 00000000..40115bdf
--- /dev/null
+++ b/src/editors/vscode/media/tutorial/panel.css
@@ -0,0 +1,68 @@
+/* The tutorial panel ([TUTORIAL-PANEL]). Colors come from the editor's theme. */
+body {
+  margin: 0;
+  padding: 16px;
+  color: var(--vscode-foreground);
+  background: var(--vscode-editor-background);
+  font-family: var(--vscode-font-family);
+  font-size: var(--vscode-font-size);
+}
+
+nav {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 12px;
+}
+
+button {
+  padding: 4px 12px;
+  border: 1px solid var(--vscode-button-border, transparent);
+  border-radius: 2px;
+  color: var(--vscode-button-secondaryForeground);
+  background: var(--vscode-button-secondaryBackground);
+  cursor: pointer;
+}
+
+button[aria-pressed='true'],
+#open-file,
+#sound {
+  color: var(--vscode-button-foreground);
+  background: var(--vscode-button-background);
+}
+
+h1 {
+  margin: 0 0 4px;
+  font-size: 1.3em;
+  font-weight: 600;
+}
+
+#film video {
+  display: block;
+  width: 100%;
+  max-height: 60vh;
+  margin: 12px 0;
+  background: #000;
+}
+
+ol {
+  padding-left: 0;
+  list-style: none;
+}
+
+.step {
+  padding: 4px 0;
+  color: var(--vscode-descriptionForeground);
+}
+
+.step[data-done='true'] {
+  color: var(--vscode-testing-iconPassed);
+}
+
+.step[aria-current='step'] {
+  font-weight: 600;
+  color: var(--vscode-foreground);
+}
+
+#offline {
+  color: var(--vscode-descriptionForeground);
+}
diff --git a/src/editors/vscode/media/tutorial/panel.js b/src/editors/vscode/media/tutorial/panel.js
new file mode 100644
index 00000000..e3c3de8d
--- /dev/null
+++ b/src/editors/vscode/media/tutorial/panel.js
@@ -0,0 +1,179 @@
+// The tutorial panel's webview script. Implements [TUTORIAL-PANEL]: it renders
+// each PanelView the extension posts, in place, and swaps the film only when
+// the current step's film changes, so a tick never restarts the playing film.
+// @ts-check
+(function () {
+  const vscode = acquireVsCodeApi();
+  /** @type {string} */
+  let playing = '';
+
+  /** @param {string} tag @param {string} text @param {string} [className] */
+  function element(tag, text, className) {
+    const node = document.createElement(tag);
+    node.textContent = text;
+    if (className) node.className = className;
+    return node;
+  }
+
+  /** @param {HTMLElement} root @param {Node[]} children */
+  function replaceChildren(root, children) {
+    root.replaceChildren(...children);
+  }
+
+  function renderLanguages(view) {
+    const buttons = view.languages.map((language) => {
+      const button = element('button', `${language.label} ${language.done}/${language.total}`);
+      button.dataset.language = language.kind;
+      button.setAttribute('aria-pressed', String(language.selected));
+      return button;
+    });
+    replaceChildren(document.getElementById('languages'), buttons);
+  }
+
+  function renderSteps(view) {
+    const items = view.steps.map((step) => {
+      const item = element('li', `${step.done ? '✓' : '○'} ${step.title}`, 'step');
+      item.dataset.done = String(step.done);
+      if (step.current) item.setAttribute('aria-current', 'step');
+      return item;
+    });
+    replaceChildren(document.getElementById('steps'), items);
+  }
+
+  /** The origins the extension allows films from, written into the page by panel.ts. */
+  const filmOrigins = (document.body.dataset.filmOrigins || '').split(' ').filter(Boolean);
+
+  /** `raw` as a URL on an allowed film origin, or '' for anything else. */
+  /** @param {unknown} raw */
+  function filmUrl(raw) {
+    try {
+      const url = new URL(String(raw));
+      return filmOrigins.includes(url.origin) ? url.href : '';
+    } catch {
+      return '';
+    }
+  }
+
+  /** The film's URL, opened at its chapter with a media fragment. */
+  function filmSource(film) {
+    const video = filmUrl(film.video);
+    const start = Number(film.start);
+    return video && start > 0 ? `${video}#t=${start}` : video;
+  }
+
+  /** Tell the extension how the film fared, so a failure is logged, never silent. */
+  /** @param {'loading' | 'ready' | 'error'} state @param {HTMLVideoElement} video */
+  function report(state, video) {
+    const error = video.error;
+    vscode.postMessage({
+      type: 'film',
+      state,
+      src: video.currentSrc || video.src,
+      detail: error ? `MediaError ${error.code}: ${error.message}` : '',
+      muted: video.muted,
+    });
+  }
+
+  /**
+   * Whether the viewer turned the sound on. VS Code lets a film autoplay only muted until
+   * the viewer clicks in the panel; from then on every film plays with its narration.
+   */
+  let soundOn = false;
+
+  /** Show "Sound on" while the shown film is muted. */
+  /** @param {HTMLVideoElement | undefined} video */
+  function renderSound(video) {
+    document.getElementById('sound').hidden = !video || !video.muted;
+  }
+
+  function turnSoundOn() {
+    soundOn = true;
+    const video = document.querySelector('#film video');
+    if (!(video instanceof HTMLVideoElement)) return;
+    video.muted = false;
+    video.play().catch(() => undefined);
+    report('ready', video);
+  }
+
+  function filmElement(film) {
+    const video = document.createElement('video');
+    Object.assign(video, {
+      controls: true,
+      autoplay: true,
+      muted: !soundOn,
+      loop: true,
+      playsInline: true,
+    });
+    video.crossOrigin = 'anonymous';
+    video.poster = filmUrl(film.poster);
+    video.src = filmSource(film);
+    const captions = filmUrl(film.captions);
+    if (captions) {
+      video.append(
+        Object.assign(document.createElement('track'), {
+          kind: 'captions',
+          srclang: 'en',
+          label: 'English',
+          src: captions,
+          default: true,
+        }),
+      );
+    }
+    video.addEventListener('loadedmetadata', () => report('ready', video));
+    video.addEventListener('volumechange', () => renderSound(video));
+    video.addEventListener('error', () => {
+      document.getElementById('offline').removeAttribute('hidden');
+      report('error', video);
+    });
+    return video;
+  }
+
+  function renderFilm(current) {
+    const source = current ? filmSource(current.film) : '';
+    // A step whose film has no usable URL still differs from "no step": it shows the fallback.
+    const key = current ? `film:${source}` : '';
+    if (key === playing) return;
+    playing = key;
+    const offline = document.getElementById('offline');
+    offline.toggleAttribute('hidden', !current || Boolean(source));
+    const video = source ? filmElement(current.film) : undefined;
+    replaceChildren(document.getElementById('film'), video ? [video] : []);
+    renderSound(video);
+    if (video) report('loading', video);
+    else if (current) {
+      const detail = 'the step names no film URL on an allowed origin';
+      vscode.postMessage({ type: 'film', state: 'error', src: '', detail, muted: true });
+    }
+  }
+
+  function renderCurrent(view) {
+    const current = view.current;
+    document.getElementById('title').textContent = current ? current.title : 'All done';
+    document.getElementById('instruction').textContent = current
+      ? current.instruction
+      : 'You have carried out every step in the live editor.';
+    document.getElementById('open-file').hidden = !(current && current.opensFile);
+    renderFilm(current);
+  }
+
+  window.addEventListener('message', (event) => {
+    // The extension's messages arrive from the webview's own origin; nothing else may drive it.
+    if (event.origin !== window.origin) return;
+    if (event.data && event.data.type === 'view') {
+      renderLanguages(event.data.view);
+      renderSteps(event.data.view);
+      renderCurrent(event.data.view);
+    }
+  });
+
+  document.addEventListener('click', (event) => {
+    const target = event.target instanceof Element ? event.target.closest('button') : null;
+    if (!target) return;
+    if (target.dataset.language)
+      vscode.postMessage({ type: 'language', language: target.dataset.language });
+    if (target.id === 'open-file') vscode.postMessage({ type: 'openFile' });
+    if (target.id === 'sound') turnSoundOn();
+  });
+
+  vscode.postMessage({ type: 'ready' });
+})();
diff --git a/src/editors/vscode/package.json b/src/editors/vscode/package.json
index ab031580..7b08a348 100644
--- a/src/editors/vscode/package.json
+++ b/src/editors/vscode/package.json
@@ -282,6 +282,13 @@
           "scope": "resource",
           "order": 12
         },
+        "sharplsp.tutorial.showOnStartup": {
+          "type": "boolean",
+          "default": true,
+          "markdownDescription": "%setting.tutorial.showOnStartup%",
+          "scope": "application",
+          "order": 21
+        },
         "sharplsp.profiler.sampleRate": {
           "type": "number",
           "default": 100,
@@ -885,6 +892,21 @@
         "category": "%category%",
         "icon": "$(debug-alt)"
       },
+      {
+        "command": "sharplsp.tutorial.open",
+        "title": "%cmd.tutorial.open%",
+        "category": "%category%"
+      },
+      {
+        "command": "sharplsp.tutorial.openFile",
+        "title": "%cmd.tutorial.openFile%",
+        "category": "%category%"
+      },
+      {
+        "command": "sharplsp.tutorial.reset",
+        "title": "%cmd.tutorial.reset%",
+        "category": "%category%"
+      },
       {
         "command": "sharplsp.profiler.profileStart",
         "title": "Start Profiling",
@@ -1438,6 +1460,190 @@
         "key": "ctrl+alt+shift+p",
         "mac": "cmd+alt+shift+p"
       }
+    ],
+    "walkthroughs": [
+      {
+        "id": "sharplsp.tutorial.fsharp",
+        "title": "%walkthrough.FSharp.title%",
+        "description": "%walkthrough.FSharp.description%",
+        "steps": [
+          {
+            "id": "FSharp.OpenFile",
+            "title": "%walkthrough.FSharp.OpenFile.title%",
+            "description": "%walkthrough.FSharp.OpenFile.description%",
+            "media": {
+              "image": "icons/sharplsp.svg",
+              "altText": "SharpLsp"
+            },
+            "completionEvents": [
+              "onContext:sharplsp.tutorial.FSharp.OpenFile"
+            ]
+          },
+          {
+            "id": "FSharp.Hover",
+            "title": "%walkthrough.FSharp.Hover.title%",
+            "description": "%walkthrough.FSharp.Hover.description%",
+            "media": {
+              "image": "icons/sharplsp.svg",
+              "altText": "SharpLsp"
+            },
+            "completionEvents": [
+              "onContext:sharplsp.tutorial.FSharp.Hover"
+            ]
+          },
+          {
+            "id": "FSharp.Completion",
+            "title": "%walkthrough.FSharp.Completion.title%",
+            "description": "%walkthrough.FSharp.Completion.description%",
+            "media": {
+              "image": "icons/sharplsp.svg",
+              "altText": "SharpLsp"
+            },
+            "completionEvents": [
+              "onContext:sharplsp.tutorial.FSharp.Completion"
+            ]
+          },
+          {
+            "id": "FSharp.Definition",
+            "title": "%walkthrough.FSharp.Definition.title%",
+            "description": "%walkthrough.FSharp.Definition.description%",
+            "media": {
+              "image": "icons/sharplsp.svg",
+              "altText": "SharpLsp"
+            },
+            "completionEvents": [
+              "onContext:sharplsp.tutorial.FSharp.Definition"
+            ]
+          },
+          {
+            "id": "FSharp.References",
+            "title": "%walkthrough.FSharp.References.title%",
+            "description": "%walkthrough.FSharp.References.description%",
+            "media": {
+              "image": "icons/sharplsp.svg",
+              "altText": "SharpLsp"
+            },
+            "completionEvents": [
+              "onContext:sharplsp.tutorial.FSharp.References"
+            ]
+          },
+          {
+            "id": "FSharp.CodeAction",
+            "title": "%walkthrough.FSharp.CodeAction.title%",
+            "description": "%walkthrough.FSharp.CodeAction.description%",
+            "media": {
+              "image": "icons/sharplsp.svg",
+              "altText": "SharpLsp"
+            },
+            "completionEvents": [
+              "onContext:sharplsp.tutorial.FSharp.CodeAction"
+            ]
+          },
+          {
+            "id": "FSharp.SolutionExplorer",
+            "title": "%walkthrough.FSharp.SolutionExplorer.title%",
+            "description": "%walkthrough.FSharp.SolutionExplorer.description%",
+            "media": {
+              "image": "icons/sharplsp.svg",
+              "altText": "SharpLsp"
+            },
+            "completionEvents": [
+              "onContext:sharplsp.tutorial.FSharp.SolutionExplorer"
+            ]
+          }
+        ]
+      },
+      {
+        "id": "sharplsp.tutorial.csharp",
+        "title": "%walkthrough.CSharp.title%",
+        "description": "%walkthrough.CSharp.description%",
+        "steps": [
+          {
+            "id": "CSharp.OpenFile",
+            "title": "%walkthrough.CSharp.OpenFile.title%",
+            "description": "%walkthrough.CSharp.OpenFile.description%",
+            "media": {
+              "image": "icons/sharplsp.svg",
+              "altText": "SharpLsp"
+            },
+            "completionEvents": [
+              "onContext:sharplsp.tutorial.CSharp.OpenFile"
+            ]
+          },
+          {
+            "id": "CSharp.Hover",
+            "title": "%walkthrough.CSharp.Hover.title%",
+            "description": "%walkthrough.CSharp.Hover.description%",
+            "media": {
+              "image": "icons/sharplsp.svg",
+              "altText": "SharpLsp"
+            },
+            "completionEvents": [
+              "onContext:sharplsp.tutorial.CSharp.Hover"
+            ]
+          },
+          {
+            "id": "CSharp.Completion",
+            "title": "%walkthrough.CSharp.Completion.title%",
+            "description": "%walkthrough.CSharp.Completion.description%",
+            "media": {
+              "image": "icons/sharplsp.svg",
+              "altText": "SharpLsp"
+            },
+            "completionEvents": [
+              "onContext:sharplsp.tutorial.CSharp.Completion"
+            ]
+          },
+          {
+            "id": "CSharp.Definition",
+            "title": "%walkthrough.CSharp.Definition.title%",
+            "description": "%walkthrough.CSharp.Definition.description%",
+            "media": {
+              "image": "icons/sharplsp.svg",
+              "altText": "SharpLsp"
+            },
+            "completionEvents": [
+              "onContext:sharplsp.tutorial.CSharp.Definition"
+            ]
+          },
+          {
+            "id": "CSharp.References",
+            "title": "%walkthrough.CSharp.References.title%",
+            "description": "%walkthrough.CSharp.References.description%",
+            "media": {
+              "image": "icons/sharplsp.svg",
+              "altText": "SharpLsp"
+            },
+            "completionEvents": [
+              "onContext:sharplsp.tutorial.CSharp.References"
+            ]
+          },
+          {
+            "id": "CSharp.CodeAction",
+            "title": "%walkthrough.CSharp.CodeAction.title%",
+            "description": "%walkthrough.CSharp.CodeAction.description%",
+            "media": {
+              "image": "icons/sharplsp.svg",
+              "altText": "SharpLsp"
+            },
+            "completionEvents": [
+              "onContext:sharplsp.tutorial.CSharp.CodeAction"
+            ]
+          },
+          {
+            "id": "CSharp.SolutionExplorer",
+            "title": "%walkthrough.CSharp.SolutionExplorer.title%",
+            "description": "%walkthrough.CSharp.SolutionExplorer.description%",
+            "media": {
+              "image": "icons/sharplsp.svg",
+              "altText": "SharpLsp"
+            },
+            "completionEvents": [
+              "onContext:sharplsp.tutorial.CSharp.SolutionExplorer"
+            ]
+          }
+        ]
+      }
     ]
   },
   "scripts": {
@@ -1501,6 +1707,7 @@
     "dist/profiler-graph-licenses.txt",
     "icons/",
     "language-configuration/",
+    "media/",
     "package.nls.json",
     "package.nls.*.json",
     "shipwright.json",
diff --git a/src/editors/vscode/package.nls.ja.json b/src/editors/vscode/package.nls.ja.json
index 42d0ae45..93352cb6 100644
--- a/src/editors/vscode/package.nls.ja.json
+++ b/src/editors/vscode/package.nls.ja.json
@@ -79,5 +79,41 @@
   "cmd.hotReload.toggle": "ホットリロードを切り替え",
   "cmd.test.runAtCursor": "カーソル位置のテストを実行",
   "cmd.test.debugAtCursor": "カーソル位置のテストをデバッグ",
-  "cmd.debugProgram": "プログラムをデバッグ"
+  "cmd.debugProgram": "プログラムをデバッグ",
+  "walkthrough.FSharp.title": "F# で SharpLsp を学ぶ",
+  "walkthrough.FSharp.description": "各ステップの短い映像を見てから、実際のエディターで操作してください。SharpLsp が応答すると、ステップは自動的に完了になります。",
+  "walkthrough.FSharp.OpenFile.title": "F# ファイルを開く",
+  "walkthrough.FSharp.OpenFile.description": "F# ファイルを開くと、SharpLsp はすぐに動き始めます。\n[F# ファイルを開く](command:sharplsp.tutorial.openFile?%5B%22FSharp%22%5D)\n[映像を見る](command:sharplsp.tutorial.open?%5B%22FSharp%22%5D)",
+  "walkthrough.FSharp.Hover.title": "シンボルにホバーする",
+  "walkthrough.FSharp.Hover.description": "関数、型、値の上にマウスを置いてください。SharpLsp がクイック情報を表示すると完了になります。\n[映像を見る](command:sharplsp.tutorial.open?%5B%22FSharp%22%5D)",
+  "walkthrough.FSharp.Completion.title": "コードを補完する",
+  "walkthrough.FSharp.Completion.description": "値の後にドットを入力するか、Ctrl+Space を押してください。SharpLsp が補完候補を表示すると完了になります。\n[映像を見る](command:sharplsp.tutorial.open?%5B%22FSharp%22%5D)",
+  "walkthrough.FSharp.Definition.title": "定義へ移動する",
+  "walkthrough.FSharp.Definition.description": "シンボルにカーソルを置いて F12 を押してください。SharpLsp が定義を見つけると完了になります。\n[映像を見る](command:sharplsp.tutorial.open?%5B%22FSharp%22%5D)",
+  "walkthrough.FSharp.References.title": "すべての参照を検索する",
+  "walkthrough.FSharp.References.description": "シンボルにカーソルを置いて Shift+F12 を押してください。SharpLsp が参照を見つけると完了になります。\n[映像を見る](command:sharplsp.tutorial.open?%5B%22FSharp%22%5D)",
+  "walkthrough.FSharp.CodeAction.title": "コードアクションでコードを修正する",
+  "walkthrough.FSharp.CodeAction.description": "警告またはエラーにカーソルを置き、Cmd+.（Windows と Linux では Ctrl+.）を押して修正を選んでください。SharpLsp がコードアクションを提示すると完了になります。\n[レッスンを見る](command:sharplsp.tutorial.open?%5B%22FSharp%22%5D)",
+  "walkthrough.FSharp.SolutionExplorer.title": "ソリューション エクスプローラーを開く",
+  "walkthrough.FSharp.SolutionExplorer.description": "アクティビティ バーの SharpLsp アイコンをクリックすると、ソリューション、プロジェクト、ファイルが表示されます。\n[映像を見る](command:sharplsp.tutorial.open?%5B%22FSharp%22%5D)",
+  "walkthrough.CSharp.title": "C# で SharpLsp を学ぶ",
+  "walkthrough.CSharp.description": "各ステップの短い映像を見てから、実際のエディターで操作してください。SharpLsp が応答すると、ステップは自動的に完了になります。",
+  "walkthrough.CSharp.OpenFile.title": "C# ファイルを開く",
+  "walkthrough.CSharp.OpenFile.description": "C# ファイルを開くと、SharpLsp はすぐに動き始めます。\n[C# ファイルを開く](command:sharplsp.tutorial.openFile?%5B%22CSharp%22%5D)\n[映像を見る](command:sharplsp.tutorial.open?%5B%22CSharp%22%5D)",
+  "walkthrough.CSharp.Hover.title": "シンボルにホバーする",
+  "walkthrough.CSharp.Hover.description": "関数、型、値の上にマウスを置いてください。SharpLsp がクイック情報を表示すると完了になります。\n[映像を見る](command:sharplsp.tutorial.open?%5B%22CSharp%22%5D)",
+  "walkthrough.CSharp.Completion.title": "コードを補完する",
+  "walkthrough.CSharp.Completion.description": "値の後にドットを入力するか、Ctrl+Space を押してください。SharpLsp が補完候補を表示すると完了になります。\n[映像を見る](command:sharplsp.tutorial.open?%5B%22CSharp%22%5D)",
+  "walkthrough.CSharp.Definition.title": "定義へ移動する",
+  "walkthrough.CSharp.Definition.description": "シンボルにカーソルを置いて F12 を押してください。SharpLsp が定義を見つけると完了になります。\n[映像を見る](command:sharplsp.tutorial.open?%5B%22CSharp%22%5D)",
+  "walkthrough.CSharp.References.title": "すべての参照を検索する",
+  "walkthrough.CSharp.References.description": "シンボルにカーソルを置いて Shift+F12 を押してください。SharpLsp が参照を見つけると完了になります。\n[映像を見る](command:sharplsp.tutorial.open?%5B%22CSharp%22%5D)",
+  "walkthrough.CSharp.CodeAction.title": "コードアクションでコードを修正する",
+  "walkthrough.CSharp.CodeAction.description": "警告またはエラーにカーソルを置き、Cmd+.（Windows と Linux では Ctrl+.）を押して修正を選んでください。SharpLsp がコードアクションを提示すると完了になります。\n[レッスンを見る](command:sharplsp.tutorial.open?%5B%22CSharp%22%5D)",
+  "walkthrough.CSharp.SolutionExplorer.title": "ソリューション エクスプローラーを開く",
+  "walkthrough.CSharp.SolutionExplorer.description": "アクティビティ バーの SharpLsp アイコンをクリックすると、ソリューション、プロジェクト、ファイルが表示されます。\n[映像を見る](command:sharplsp.tutorial.open?%5B%22CSharp%22%5D)",
+  "cmd.tutorial.open": "チュートリアルを開く",
+  "cmd.tutorial.openFile": "チュートリアル用のソース ファイルを開く",
+  "cmd.tutorial.reset": "チュートリアルの進捗をリセット",
+  "setting.tutorial.showOnStartup": "SharpLsp の初回起動時に、インタラクティブ チュートリアル (F# のウォークスルーと映像パネル) を開きます。"
 }
diff --git a/src/editors/vscode/package.nls.json b/src/editors/vscode/package.nls.json
index 66e3b6da..1569bbfe 100644
--- a/src/editors/vscode/package.nls.json
+++ b/src/editors/vscode/package.nls.json
@@ -89,5 +89,41 @@
   "debugger.launch.requireExactSource": "Only bind breakpoints when the source matches the loaded symbols.",
   "debugger.launch.symbolOptions": "Where to look for debug symbols.",
   "task.build.command": "Which dotnet build verb this task runs.",
-  "task.run.file": "The source file this task runs."
+  "task.run.file": "The source file this task runs.",
+  "walkthrough.FSharp.title": "Learn SharpLsp with F#",
+  "walkthrough.FSharp.description": "Watch a short film for each step, then do it in the live editor. Each step ticks itself when SharpLsp answers.",
+  "walkthrough.FSharp.OpenFile.title": "Open an F# file",
+  "walkthrough.FSharp.OpenFile.description": "SharpLsp starts working as soon as an F# file is open.\n[Open an F# file](command:sharplsp.tutorial.openFile?%5B%22FSharp%22%5D)\n[Watch the film](command:sharplsp.tutorial.open?%5B%22FSharp%22%5D)",
+  "walkthrough.FSharp.Hover.title": "Hover a symbol",
+  "walkthrough.FSharp.Hover.description": "Rest the mouse on a function, type or value. The step ticks when SharpLsp shows its Quick Info.\n[Watch the film](command:sharplsp.tutorial.open?%5B%22FSharp%22%5D)",
+  "walkthrough.FSharp.Completion.title": "Complete code",
+  "walkthrough.FSharp.Completion.description": "Type a dot after a value, or press Ctrl+Space. The step ticks when SharpLsp offers completions.\n[Watch the film](command:sharplsp.tutorial.open?%5B%22FSharp%22%5D)",
+  "walkthrough.FSharp.Definition.title": "Go to a definition",
+  "walkthrough.FSharp.Definition.description": "Put the caret on a symbol and press F12. The step ticks when SharpLsp finds the definition.\n[Watch the film](command:sharplsp.tutorial.open?%5B%22FSharp%22%5D)",
+  "walkthrough.FSharp.References.title": "Find all references",
+  "walkthrough.FSharp.References.description": "Put the caret on a symbol and press Shift+F12. The step ticks when SharpLsp finds its references.\n[Watch the film](command:sharplsp.tutorial.open?%5B%22FSharp%22%5D)",
+  "walkthrough.FSharp.CodeAction.title": "Fix code with a code action",
+  "walkthrough.FSharp.CodeAction.description": "Put the caret on a warning or error, press Cmd+. (Ctrl+. on Windows and Linux), and pick a fix. The step ticks when SharpLsp offers code actions.\n[Watch the lesson](command:sharplsp.tutorial.open?%5B%22FSharp%22%5D)",
+  "walkthrough.FSharp.SolutionExplorer.title": "Open the Solution Explorer",
+  "walkthrough.FSharp.SolutionExplorer.description": "Click the SharpLsp icon in the activity bar to see the solution, its projects and their files.\n[Watch the film](command:sharplsp.tutorial.open?%5B%22FSharp%22%5D)",
+  "walkthrough.CSharp.title": "Learn SharpLsp with C#",
+  "walkthrough.CSharp.description": "Watch a short film for each step, then do it in the live editor. Each step ticks itself when SharpLsp answers.",
+  "walkthrough.CSharp.OpenFile.title": "Open a C# file",
+  "walkthrough.CSharp.OpenFile.description": "SharpLsp starts working as soon as a C# file is open.\n[Open a C# file](command:sharplsp.tutorial.openFile?%5B%22CSharp%22%5D)\n[Watch the film](command:sharplsp.tutorial.open?%5B%22CSharp%22%5D)",
+  "walkthrough.CSharp.Hover.title": "Hover a symbol",
+  "walkthrough.CSharp.Hover.description": "Rest the mouse on a function, type or value. The step ticks when SharpLsp shows its Quick Info.\n[Watch the film](command:sharplsp.tutorial.open?%5B%22CSharp%22%5D)",
+  "walkthrough.CSharp.Completion.title": "Complete code",
+  "walkthrough.CSharp.Completion.description": "Type a dot after a value, or press Ctrl+Space. The step ticks when SharpLsp offers completions.\n[Watch the film](command:sharplsp.tutorial.open?%5B%22CSharp%22%5D)",
+  "walkthrough.CSharp.Definition.title": "Go to a definition",
+  "walkthrough.CSharp.Definition.description": "Put the caret on a symbol and press F12. The step ticks when SharpLsp finds the definition.\n[Watch the film](command:sharplsp.tutorial.open?%5B%22CSharp%22%5D)",
+  "walkthrough.CSharp.References.title": "Find all references",
+  "walkthrough.CSharp.References.description": "Put the caret on a symbol and press Shift+F12. The step ticks when SharpLsp finds its references.\n[Watch the film](command:sharplsp.tutorial.open?%5B%22CSharp%22%5D)",
+  "walkthrough.CSharp.CodeAction.title": "Fix code with a code action",
+  "walkthrough.CSharp.CodeAction.description": "Put the caret on a warning or error, press Cmd+. (Ctrl+. on Windows and Linux), and pick a fix. The step ticks when SharpLsp offers code actions.\n[Watch the lesson](command:sharplsp.tutorial.open?%5B%22CSharp%22%5D)",
+  "walkthrough.CSharp.SolutionExplorer.title": "Open the Solution Explorer",
+  "walkthrough.CSharp.SolutionExplorer.description": "Click the SharpLsp icon in the activity bar to see the solution, its projects and their files.\n[Watch the film](command:sharplsp.tutorial.open?%5B%22CSharp%22%5D)",
+  "cmd.tutorial.open": "Open Tutorial",
+  "cmd.tutorial.openFile": "Open a Tutorial Source File",
+  "cmd.tutorial.reset": "Reset Tutorial Progress",
+  "setting.tutorial.showOnStartup": "Open the interactive tutorial (the F# walkthrough and its film panel) the first time SharpLsp starts."
 }
diff --git a/src/editors/vscode/package.nls.zh-cn.json b/src/editors/vscode/package.nls.zh-cn.json
index 55f716c8..5a5995b5 100644
--- a/src/editors/vscode/package.nls.zh-cn.json
+++ b/src/editors/vscode/package.nls.zh-cn.json
@@ -79,5 +79,41 @@
   "cmd.hotReload.toggle": "切换热重载",
   "cmd.test.runAtCursor": "在光标处运行测试",
   "cmd.test.debugAtCursor": "在光标处调试测试",
-  "cmd.debugProgram": "调试程序"
+  "cmd.debugProgram": "调试程序",
+  "walkthrough.FSharp.title": "通过 F# 学习 SharpLsp",
+  "walkthrough.FSharp.description": "先观看每一步的短片，然后在实际编辑器中完成操作。SharpLsp 一作出响应，该步骤就会自动勾选。",
+  "walkthrough.FSharp.OpenFile.title": "打开一个 F# 文件",
+  "walkthrough.FSharp.OpenFile.description": "只要打开一个 F# 文件，SharpLsp 就会开始工作。\n[打开一个 F# 文件](command:sharplsp.tutorial.openFile?%5B%22FSharp%22%5D)\n[观看短片](command:sharplsp.tutorial.open?%5B%22FSharp%22%5D)",
+  "walkthrough.FSharp.Hover.title": "悬停查看符号",
+  "walkthrough.FSharp.Hover.description": "将鼠标停在函数、类型或值上。SharpLsp 显示快速信息后，此步骤即完成。\n[观看短片](command:sharplsp.tutorial.open?%5B%22FSharp%22%5D)",
+  "walkthrough.FSharp.Completion.title": "补全代码",
+  "walkthrough.FSharp.Completion.description": "在值后输入一个点，或按 Ctrl+Space。SharpLsp 给出补全项后，此步骤即完成。\n[观看短片](command:sharplsp.tutorial.open?%5B%22FSharp%22%5D)",
+  "walkthrough.FSharp.Definition.title": "转到定义",
+  "walkthrough.FSharp.Definition.description": "将光标放在符号上并按 F12。SharpLsp 找到定义后，此步骤即完成。\n[观看短片](command:sharplsp.tutorial.open?%5B%22FSharp%22%5D)",
+  "walkthrough.FSharp.References.title": "查找所有引用",
+  "walkthrough.FSharp.References.description": "将光标放在符号上并按 Shift+F12。SharpLsp 找到引用后，此步骤即完成。\n[观看短片](command:sharplsp.tutorial.open?%5B%22FSharp%22%5D)",
+  "walkthrough.FSharp.CodeAction.title": "用代码操作修复代码",
+  "walkthrough.FSharp.CodeAction.description": "将光标放在警告或错误上，按 Cmd+.（Windows 和 Linux 上为 Ctrl+.），然后选择一个修复。SharpLsp 提供代码操作后，此步骤即完成。\n[观看课程](command:sharplsp.tutorial.open?%5B%22FSharp%22%5D)",
+  "walkthrough.FSharp.SolutionExplorer.title": "打开解决方案资源管理器",
+  "walkthrough.FSharp.SolutionExplorer.description": "点击活动栏中的 SharpLsp 图标，即可查看解决方案、其中的项目和文件。\n[观看短片](command:sharplsp.tutorial.open?%5B%22FSharp%22%5D)",
+  "walkthrough.CSharp.title": "通过 C# 学习 SharpLsp",
+  "walkthrough.CSharp.description": "先观看每一步的短片，然后在实际编辑器中完成操作。SharpLsp 一作出响应，该步骤就会自动勾选。",
+  "walkthrough.CSharp.OpenFile.title": "打开一个 C# 文件",
+  "walkthrough.CSharp.OpenFile.description": "只要打开一个 C# 文件，SharpLsp 就会开始工作。\n[打开一个 C# 文件](command:sharplsp.tutorial.openFile?%5B%22CSharp%22%5D)\n[观看短片](command:sharplsp.tutorial.open?%5B%22CSharp%22%5D)",
+  "walkthrough.CSharp.Hover.title": "悬停查看符号",
+  "walkthrough.CSharp.Hover.description": "将鼠标停在函数、类型或值上。SharpLsp 显示快速信息后，此步骤即完成。\n[观看短片](command:sharplsp.tutorial.open?%5B%22CSharp%22%5D)",
+  "walkthrough.CSharp.Completion.title": "补全代码",
+  "walkthrough.CSharp.Completion.description": "在值后输入一个点，或按 Ctrl+Space。SharpLsp 给出补全项后，此步骤即完成。\n[观看短片](command:sharplsp.tutorial.open?%5B%22CSharp%22%5D)",
+  "walkthrough.CSharp.Definition.title": "转到定义",
+  "walkthrough.CSharp.Definition.description": "将光标放在符号上并按 F12。SharpLsp 找到定义后，此步骤即完成。\n[观看短片](command:sharplsp.tutorial.open?%5B%22CSharp%22%5D)",
+  "walkthrough.CSharp.References.title": "查找所有引用",
+  "walkthrough.CSharp.References.description": "将光标放在符号上并按 Shift+F12。SharpLsp 找到引用后，此步骤即完成。\n[观看短片](command:sharplsp.tutorial.open?%5B%22CSharp%22%5D)",
+  "walkthrough.CSharp.CodeAction.title": "用代码操作修复代码",
+  "walkthrough.CSharp.CodeAction.description": "将光标放在警告或错误上，按 Cmd+.（Windows 和 Linux 上为 Ctrl+.），然后选择一个修复。SharpLsp 提供代码操作后，此步骤即完成。\n[观看课程](command:sharplsp.tutorial.open?%5B%22CSharp%22%5D)",
+  "walkthrough.CSharp.SolutionExplorer.title": "打开解决方案资源管理器",
+  "walkthrough.CSharp.SolutionExplorer.description": "点击活动栏中的 SharpLsp 图标，即可查看解决方案、其中的项目和文件。\n[观看短片](command:sharplsp.tutorial.open?%5B%22CSharp%22%5D)",
+  "cmd.tutorial.open": "打开教程",
+  "cmd.tutorial.openFile": "打开教程源文件",
+  "cmd.tutorial.reset": "重置教程进度",
+  "setting.tutorial.showOnStartup": "SharpLsp 首次启动时打开交互式教程（F# 演练及其短片面板）。"
 }
diff --git a/src/editors/vscode/src/client.ts b/src/editors/vscode/src/client.ts
index ec83bc3e..3cb38ffe 100644
--- a/src/editors/vscode/src/client.ts
+++ b/src/editors/vscode/src/client.ts
@@ -30,6 +30,7 @@ import { detectRuntimePlatform } from './platform.js';
 import * as state from './state.js';
 import { type SharpLspStatusBar, ServerState } from './status.js';
 import { dotnetHostEnvironment } from './dotnetRuntime.js';
+import { observeResponses } from './tutorial/detect.js';
 
 /**
  * The language client, without the stock `workspace/executeCommand` feature.
@@ -136,8 +137,13 @@ export async function start(
     errorHandler: makeErrorHandler(statusBar),
     // After every (re)start a request waits for its document's didOpen, so it
     // never reaches a fresh server ahead of the document it is about. Razor
-    // markup adds the HTML service's completion and hover answers.
-    middleware: { ...openSync.middleware, ...razorHtml.middleware },
+    // markup adds the HTML service's completion and hover answers. The tutorial
+    // watches the answers that come back ([TUTORIAL-DETECT-LSP]).
+    middleware: {
+      ...openSync.middleware,
+      ...razorHtml.middleware,
+      sendRequest: observeResponses(openSync.middleware.sendRequest),
+    },
   };
 
   const client = new SharpLspClient(EXTENSION_ID, EXTENSION_NAME, serverOptions, clientOptions);
diff --git a/src/editors/vscode/src/constants.ts b/src/editors/vscode/src/constants.ts
index 39f4ddef..899de40c 100644
--- a/src/editors/vscode/src/constants.ts
+++ b/src/editors/vscode/src/constants.ts
@@ -72,6 +72,12 @@ export const CMD_RUN_PROGRAM = 'sharplsp.runProgram';
 export const CMD_TEST_RUN_AT_CURSOR = 'sharplsp.test.runAtCursor';
 export const CMD_TEST_DEBUG_AT_CURSOR = 'sharplsp.test.debugAtCursor';
 
+// Interactive tutorial ([TUTORIAL])
+export const CMD_TUTORIAL_OPEN = 'sharplsp.tutorial.open';
+export const CMD_TUTORIAL_OPEN_FILE = 'sharplsp.tutorial.openFile';
+export const CMD_TUTORIAL_RESET = 'sharplsp.tutorial.reset';
+export const CONFIG_TUTORIAL_SHOW_ON_STARTUP = 'tutorial.showOnStartup';
+
 export const VIEW_SOLUTION_EXPLORER = 'sharplsp.solutionExplorer';
 export const VIEW_PROFILER = 'sharplsp.profiler.processes';
 export const VIEW_TEST_EXPLORER = 'sharplsp.testExplorer';
diff --git a/src/editors/vscode/src/extension.ts b/src/editors/vscode/src/extension.ts
index d9b58b2f..f54382c5 100644
--- a/src/editors/vscode/src/extension.ts
+++ b/src/editors/vscode/src/extension.ts
@@ -58,6 +58,7 @@ import {
 import { initProjectDepsStore } from './project-deps-store.js';
 import { DEFAULT_SORT_POLICY } from './sort-members-policy.js';
 import { samePath } from './paths';
+import { registerTutorial, type TutorialApi } from './tutorial/register.js';
 
 /** Public API exported from activate() for tests and other extensions. */
 export interface SharpLspExtensionApi {
@@ -75,6 +76,8 @@ export interface SharpLspExtensionApi {
   readonly logUri: vscode.Uri;
   /** The focused project's active target framework, as the status bar shows it. [NETFX-CONTEXT] */
   readonly targetFrameworkStatus?: TargetFrameworkStatus;
+  /** The interactive tutorial's progress and panel ([TUTORIAL-TESTING]). */
+  readonly tutorial?: TutorialApi;
 }
 
 let lspClient: LanguageClient | undefined;
@@ -83,6 +86,7 @@ let explorerProvider: SolutionExplorerProvider | undefined;
 let profilerUi: SharpLspProfiler | undefined;
 let testController: SharpLspTestController | undefined;
 let targetFrameworks: TargetFrameworkUi | undefined;
+let tutorial: TutorialApi | undefined;
 
 interface DeploymentDiagnostic {
   readonly componentId: string;
@@ -182,6 +186,7 @@ async function activateInner(context: ExtensionContext): Promise<SharpLspExtensi
   explorerProvider.initSortContext();
   log.info('step 8: registerCommands');
   registerCommands(context);
+  tutorial = registerTutorial(context, solutionTreeView);
   log.info('step 9: registerAllModuleCommands');
   registerBuildCommands(context);
   registerNuGetCommands(context);
@@ -282,6 +287,7 @@ async function activateInner(context: ExtensionContext): Promise<SharpLspExtensi
     testController,
     logUri: context.logUri,
     targetFrameworkStatus: targetFrameworks.status,
+    tutorial,
   };
 }
 
@@ -315,6 +321,7 @@ function degradedApi(context: ExtensionContext): SharpLspExtensionApi {
     testController: testController ?? new SharpLspTestController(),
     logUri: context.logUri,
     ...(targetFrameworks === undefined ? {} : { targetFrameworkStatus: targetFrameworks.status }),
+    ...(tutorial === undefined ? {} : { tutorial }),
   };
 }
 
diff --git a/src/editors/vscode/src/open-sync.ts b/src/editors/vscode/src/open-sync.ts
index 88eb01a8..d14e3b73 100644
--- a/src/editors/vscode/src/open-sync.ts
+++ b/src/editors/vscode/src/open-sync.ts
@@ -104,7 +104,7 @@ function isOpenIn(selector: DocumentSelector, uri: string): boolean {
 }
 
 /** The document a request is about - its `textDocument.uri` - if it names one. */
-function requestDocumentUri(param: unknown): string | undefined {
+export function requestDocumentUri(param: unknown): string | undefined {
   const document = isRecord(param) ? param.textDocument : undefined;
   return isRecord(document) && typeof document.uri === 'string' ? document.uri : undefined;
 }
diff --git a/src/editors/vscode/src/test/suite/context-menus.test.ts b/src/editors/vscode/src/test/suite/context-menus.test.ts
index f85918d3..63e9f61c 100644
--- a/src/editors/vscode/src/test/suite/context-menus.test.ts
+++ b/src/editors/vscode/src/test/suite/context-menus.test.ts
@@ -30,9 +30,7 @@ import { activeExplorerProvider } from './explorer-kit';
 import { useLspTestSuite } from './lsp-suite-kit';
 import {
   EXTENSION_ID,
-  openSharpLspPanel,
   pollUntilResult,
-  takeScreenshot,
   assertContainsAll,
   assertContainsNone,
 } from './test-helpers';
@@ -264,8 +262,6 @@ suite('Context Menu — Context Values on Tree Nodes', () => {
   test("solution node has contextValue 'solution'", async function () {
     this.timeout(COMMAND_MS);
     requireSolutionNode(tree);
-    await openSharpLspPanel();
-    await takeScreenshot('vscode-solution-explorer-context-menu.png');
   });
 
   for (const [contextValue, label] of CONTEXT_VALUES) {
@@ -619,8 +615,6 @@ suite('Context Menu — Project Node Commands Execute', () => {
     );
     // Assert solution explorer tree still has project node visible.
     requireNode(tree().getChildren(), '', 'project');
-    await openSharpLspPanel();
-    await takeScreenshot('vscode-context-menu-open-project.png');
   });
 
   for (const cmd of BUILD_COMMANDS) {
diff --git a/src/editors/vscode/src/test/suite/diagnostics.test.ts b/src/editors/vscode/src/test/suite/diagnostics.test.ts
index 72e1739e..118e7d72 100644
--- a/src/editors/vscode/src/test/suite/diagnostics.test.ts
+++ b/src/editors/vscode/src/test/suite/diagnostics.test.ts
@@ -4,12 +4,8 @@ import * as path from 'node:path';
 import * as vscode from 'vscode';
 import {
   closeAllEditors,
-  loadFixtureSolution,
-  openSharpLspPanel,
   replaceDocumentContent,
   setupLspTestSuite,
-  settleForScreenshot,
-  takeScreenshot,
   teardownLspTestSuite,
   waitForDiagnostics,
   waitForDiagnosticsCleared,
@@ -205,15 +201,7 @@ suite('Diagnostics / Problems Panel', () => {
     );
     assert.deepEqual([...new Set(keys)], keys, 'no diagnostic may be published twice');
 
-    // Load fixture solution so Solution Explorer is populated in the screenshot.
-    if (process.env['SHARPLSP_SCREENSHOTS']) {
-      await loadFixtureSolution(workspaceRoot);
-    }
-    // Open Problems panel so diagnostics are visible in the screenshot.
     await vscode.commands.executeCommand('workbench.actions.view.problems');
-    await settleForScreenshot(1000);
-    await openSharpLspPanel();
-    await takeScreenshot('vscode-diagnostics-page.png');
   });
 
   test('file with missing type shows diagnostics', async function () {
diff --git a/src/editors/vscode/src/test/suite/extension.test.ts b/src/editors/vscode/src/test/suite/extension.test.ts
index 967d47d1..0546ffa6 100644
--- a/src/editors/vscode/src/test/suite/extension.test.ts
+++ b/src/editors/vscode/src/test/suite/extension.test.ts
@@ -15,11 +15,7 @@ import * as vscode from 'vscode';
 import {
   EXTENSION_ID,
   flattenSymbolNames,
-  loadFixtureSolution,
   openCSharpFile,
-  openSharpLspPanel,
-  settleForScreenshot,
-  takeScreenshot,
   waitForDocumentSymbols,
   assertContainsAll,
   openCSharpOutline,
@@ -229,16 +225,9 @@ suite('Extension Activation & Configuration', () => {
   // ── Configuration ────────────────────────────────────────────
 
   test('sharplsp.lspPath setting is contributed', async function () {
-    // The ASSERTIONS here are instant — `config.inspect` reads a contribution
-    // point out of the extension manifest — and on CI so is the rest: the
-    // documentation screenshot and its render settle are both no-ops unless
-    // SHARPLSP_SCREENSHOTS is set, leaving one command round trip.
-    //
-    // The budget has to cover the SCREENSHOT run as well, though, and there the
-    // workbench must paint the filtered Settings list before the capture is worth
-    // anything. That settle is longer than `COMMAND_MS` on its own, so this asks
-    // for one round trip plus one settle.
-    this.timeout(COMMAND_MS + SETTLE_MS);
+    // The assertions are instant — `config.inspect` reads a contribution point
+    // out of the extension manifest — leaving one command round trip.
+    this.timeout(COMMAND_MS);
     // Interaction 1 — contributed, documented, defaulted to "use the bundled binary".
     const property = assertContributedSetting('sharplsp.lspPath', '');
     assert.strictEqual(property.type, 'string', 'lspPath names a path, so it is a string setting');
@@ -260,8 +249,6 @@ suite('Extension Activation & Configuration', () => {
 
     // Interaction 4 — the user opens Settings filtered to sharplsp and sees it.
     await vscode.commands.executeCommand('workbench.action.openSettings', 'sharplsp');
-    await settleForScreenshot(1500);
-    await takeScreenshot('vscode-configuration-page.png');
     await vscode.commands.executeCommand('workbench.action.closeActiveEditor');
   });
 
@@ -401,13 +388,6 @@ suite('Extension Activation & Configuration', () => {
     );
     assert.strictEqual(fsDoc.languageId, 'fsharp', 'the F# split keeps its own language');
     assert.strictEqual(doc.languageId, 'csharp', 'and the C# side is unchanged by the split');
-    // Nothing below asserts on the split settling; the pause is for the picture.
-    await settleForScreenshot(800);
-    if (process.env['SHARPLSP_SCREENSHOTS']) {
-      await loadFixtureSolution(vscode.workspace.workspaceFolders?.[0]?.uri.fsPath ?? '');
-    }
-    await openSharpLspPanel();
-    await takeScreenshot('vscode-editors-page.png');
   });
 
   test('extension contributes fsharp language', async function () {
@@ -499,20 +479,6 @@ suite('Extension Activation & Configuration', () => {
       'and answer identically — a restart changes nothing about the document',
     );
     assert.ok(sharpLspExtension().isActive, 'the extension survives its own restart');
-
-    if (process.env['SHARPLSP_SCREENSHOTS']) {
-      const ws = vscode.workspace.workspaceFolders?.[0]?.uri.fsPath ?? '';
-      const calcUri = vscode.Uri.file(`${ws}/Calculator.cs`);
-      const calcDoc = await vscode.workspace.openTextDocument(calcUri);
-      await vscode.window.showTextDocument(calcDoc, { preview: false });
-      await waitForDocumentSymbols(calcUri);
-      await loadFixtureSolution(vscode.workspace.workspaceFolders?.[0]?.uri.fsPath ?? '');
-    }
-    // Close any bottom panel, open SharpLsp sidebar — shows Rust host + Roslyn sidecar in action.
-    await vscode.commands.executeCommand('workbench.action.closePanel');
-    await openSharpLspPanel();
-    await settleForScreenshot(1_000);
-    await takeScreenshot('vscode-architecture-page.png');
   });
 
   // ── C# Language Configuration ──────────────────────────────
diff --git a/src/editors/vscode/src/test/suite/fsharp-lsp-cross-language-rename.test.ts b/src/editors/vscode/src/test/suite/fsharp-lsp-cross-language-rename.test.ts
index b2457338..28c342e2 100644
--- a/src/editors/vscode/src/test/suite/fsharp-lsp-cross-language-rename.test.ts
+++ b/src/editors/vscode/src/test/suite/fsharp-lsp-cross-language-rename.test.ts
@@ -391,7 +391,10 @@ async function buildCrossLanguageFixtures(): Promise<void> {
     'dotnet',
     ['build', FIXTURE_SOLUTION, '--configuration', 'Debug', '--nologo', '--verbosity', 'minimal'],
     { cwd: path.dirname(FIXTURE_SOLUTION), encoding: 'utf8', timeout: DOTNET_CLI_MS },
-  );
+  ).catch((error: { stdout?: string; stderr?: string }) => {
+    // A failed build names its cause only in its own output; surface it.
+    throw new Error(`fixture build failed:\n${error.stdout ?? ''}\n${error.stderr ?? ''}`);
+  });
   assert.strictEqual(typeof result.stdout, 'string');
   assert.strictEqual(typeof result.stderr, 'string');
   assert.ok(result.stdout.trim().length > 0, 'real fixture build must report output');
diff --git a/src/editors/vscode/src/test/suite/hover.test.ts b/src/editors/vscode/src/test/suite/hover.test.ts
index 4816ca7f..6db83f22 100644
--- a/src/editors/vscode/src/test/suite/hover.test.ts
+++ b/src/editors/vscode/src/test/suite/hover.test.ts
@@ -9,8 +9,6 @@ import {
   pollUntilResult,
   replaceDocumentContent,
   setupLspTestSuite,
-  settleForScreenshot,
-  takeScreenshot,
   teardownLspTestSuite,
   waitForDocumentSymbols,
   waitForHoverResult,
@@ -147,15 +145,6 @@ suite('Hover / Quick Info', () => {
       completionEditor.selection.active.isEqual(completionPosition),
       'Completion cursor must be after this.',
     );
-    await vscode.commands.executeCommand('editor.action.triggerSuggest');
-    // Wait for widget to appear — no other commands that could dismiss it.
-    await settleForScreenshot(2500);
-    // No openSharpLspPanel() — the completion dropdown IS the feature; keep editor visible.
-    await takeScreenshot('vscode-completions-page.png');
-
-    // Dismiss suggestion widget then switch back to HoverMulti.cs for go-to-definition.
-    await vscode.commands.executeCommand('hideSuggestWidget');
-
     const goToEditor = await vscode.window.showTextDocument(
       await vscode.workspace.openTextDocument(completionUri),
       {
@@ -176,17 +165,12 @@ suite('Hover / Quick Info', () => {
     assert.ok(definitions[0]!.uri.fsPath.endsWith('.cs'), 'Definition must point to a .cs file');
     assert.ok(definitions[0]!.range.start.line >= 0, 'Definition must have valid line');
 
-    // Trigger peek definition on the call-site reference.
     goToEditor.selection = new vscode.Selection(definitionPosition, definitionPosition);
     goToEditor.revealRange(new vscode.Range(definitionPosition, definitionPosition));
     assert.ok(
       goToEditor.selection.active.isEqual(definitionPosition),
       'Definition cursor must be on Add',
     );
-    await settleForScreenshot(300);
-    await vscode.commands.executeCommand('editor.action.peekDefinition');
-    await settleForScreenshot(3000);
-    await takeScreenshot('vscode-go-to-definition-page.png');
   });
 
   // ── Hover Range ─────────────────────────────────────────────────
@@ -493,16 +477,6 @@ suite('Hover / Quick Info', () => {
       'the hover ranges over the method name',
     );
     assert.ok(md.includes('n'), 'and the parameter name appears in the rendered documentation');
-
-    // Position cursor on Factorial and trigger the hover widget visually.
-    const editor = vscode.window.activeTextEditor;
-    assert.ok(editor, 'Must have active text editor');
-    editor.selection = new vscode.Selection(new vscode.Position(7, 21), new vscode.Position(7, 21));
-    await vscode.commands.executeCommand('editor.action.showHover');
-    // Wait for the hover widget to render in the DOM before screenshotting.
-    await settleForScreenshot(2000);
-    // Screenshot with hover tooltip visible — sidecar waits for .monaco-hover to appear.
-    await takeScreenshot('vscode-hover-page.png');
   });
 
   // ── [Obsolete] deprecation ────────────────────────────────────
diff --git a/src/editors/vscode/src/test/suite/lsp-integration-semantic.test.ts b/src/editors/vscode/src/test/suite/lsp-integration-semantic.test.ts
index c93b6000..be10eab8 100644
--- a/src/editors/vscode/src/test/suite/lsp-integration-semantic.test.ts
+++ b/src/editors/vscode/src/test/suite/lsp-integration-semantic.test.ts
@@ -15,13 +15,9 @@ import * as path from 'node:path';
 import * as vscode from 'vscode';
 import {
   closeAllEditors,
-  loadFixtureSolution,
   openExistingFile,
-  openSharpLspPanel,
   pollUntilResult,
   setupLspTestSuite,
-  settleForScreenshot,
-  takeScreenshot,
   teardownLspTestSuite,
   waitForDocumentSymbols,
   pollProvider,
@@ -417,24 +413,6 @@ suite('LSP Integration — Code Actions & Refactoring', () => {
       actions.some((action) => /unused|remove/i.test(action.title)),
       `an unused local must offer its removal; offered: ${titles.join(' | ')}`,
     );
-
-    // Load fixture solution so SharpLsp panel shows Solution Explorer.
-    if (process.env['SHARPLSP_SCREENSHOTS']) {
-      await loadFixtureSolution(workspaceRoot);
-    }
-    await openSharpLspPanel();
-    await vscode.window.showTextDocument(await vscode.workspace.openTextDocument(uri), {
-      preview: false,
-    });
-
-    // Trigger the lightbulb in the editor so it's visible in the screenshot.
-    const editor = vscode.window.activeTextEditor;
-    assert.ok(editor, 'Must have active editor');
-    editor.selection = new vscode.Selection(new vscode.Position(6, 18), new vscode.Position(6, 18));
-    editor.revealRange(new vscode.Range(new vscode.Position(6, 18), new vscode.Position(6, 18)));
-    await vscode.commands.executeCommand('editor.action.quickFix');
-    await settleForScreenshot(2000);
-    await takeScreenshot('vscode-refactoring.png');
   });
 });
 
diff --git a/src/editors/vscode/src/test/suite/lsp-integration.test.ts b/src/editors/vscode/src/test/suite/lsp-integration.test.ts
index 358d9723..6ff0a1e8 100644
--- a/src/editors/vscode/src/test/suite/lsp-integration.test.ts
+++ b/src/editors/vscode/src/test/suite/lsp-integration.test.ts
@@ -20,14 +20,10 @@ import * as vscode from 'vscode';
 import {
   closeAllEditors,
   flattenSymbolNames,
-  loadFixtureSolution,
   openCSharpFile,
   openExistingFile,
-  openSharpLspPanel,
   pollUntilResult,
   replaceDocumentContent,
-  settleForScreenshot,
-  takeScreenshot,
   waitForDocumentSymbols,
   waitForFoldingRanges,
   waitForSelectionRanges,
@@ -647,13 +643,6 @@ suite('LSP Integration — Fixture Files', () => {
         `and ${method} sits inside it`,
       );
     }
-
-    // Load fixture solution so Solution Explorer is populated in the screenshot.
-    if (process.env['SHARPLSP_SCREENSHOTS']) {
-      await loadFixtureSolution(fixtureDir);
-    }
-    await openSharpLspPanel();
-    await takeScreenshot('vscode-getting-started-page.png');
   });
 
   test('Calculator.cs has folding ranges for regions', async function () {
@@ -716,12 +705,6 @@ suite('LSP Integration — Fixture Files', () => {
       'unfoldAll to restore every visible line',
     );
     assert.strictEqual(restored, linesBefore, 'and unfolding restores every line');
-
-    // Keep the editor focused so the folded regions are clearly visible.
-    await vscode.commands.executeCommand('editor.foldAll');
-    await vscode.commands.executeCommand('workbench.action.closePanel');
-    await settleForScreenshot(500);
-    await takeScreenshot('code-folding.png');
   });
 
   test('Nested.cs returns nested class hierarchy', async function () {
@@ -747,11 +730,6 @@ suite('LSP Integration — Fixture Files', () => {
     assertSymbolShape(symbolNamed(symbols, 'Inner'), vscode.SymbolKind.Class, doc);
     assertSymbolShape(symbolNamed(symbols, 'AnotherInner'), vscode.SymbolKind.Class, doc);
     assertSymbolShape(symbolNamed(symbols, 'InnerMethod'), vscode.SymbolKind.Method, doc);
-
-    // Keep editor focused so nested class structure is visible.
-    await vscode.commands.executeCommand('workbench.action.closePanel');
-    await settleForScreenshot(500);
-    await takeScreenshot('nested-classes.png');
   });
 
   test('Empty.cs returns no symbols', async function () {
diff --git a/src/editors/vscode/src/test/suite/nuget-browser.test.ts b/src/editors/vscode/src/test/suite/nuget-browser.test.ts
index 2628852d..29ea7c42 100644
--- a/src/editors/vscode/src/test/suite/nuget-browser.test.ts
+++ b/src/editors/vscode/src/test/suite/nuget-browser.test.ts
@@ -6,9 +6,7 @@ import { type LanguageClient } from 'vscode-languageclient/node';
 import { NuGetBrowserPanel } from '../../nuget-browser.js';
 import {
   EXTENSION_ID,
-  openSharpLspPanel,
   pollUntilResult,
-  takeScreenshot,
   assertContainsAll,
   assertContainsNone,
 } from './test-helpers';
@@ -231,11 +229,6 @@ suite('NuGet Browser', () => {
     return { panel, feed, getClient: feed.getClient };
   }
 
-  async function takeNuGetScreenshot(filename: string): Promise<void> {
-    await openSharpLspPanel();
-    await takeScreenshot(filename);
-  }
-
   /**
    * BUG REGRESSION: Browse tab was empty on initial panel load because
    * the constructor only called loadInstalledPackages() without ever
@@ -328,7 +321,6 @@ suite('NuGet Browser', () => {
         [],
         'no spinner may be left running once the initial load has resolved',
       );
-      await takeNuGetScreenshot('vscode-nuget-browse.png');
     } finally {
       panel.dispose();
     }
@@ -390,7 +382,6 @@ suite('NuGet Browser', () => {
           installedHtml.toLowerCase().includes('newtonsoft'),
         'Package details must show author or description',
       );
-      await takeNuGetScreenshot('vscode-nuget-installed.png');
     } finally {
       panel.dispose();
     }
@@ -527,7 +518,6 @@ suite('NuGet Browser', () => {
           `${pkg.id} does not match the query and must not still be on screen`,
         );
       }
-      await takeNuGetScreenshot('vscode-nuget-search.png');
     } finally {
       panel.dispose();
     }
@@ -718,7 +708,6 @@ suite('NuGet Browser', () => {
         INSTALLED_FIXTURE_PACKAGE.id,
         'clicking a package must select it',
       );
-      await takeNuGetScreenshot('vscode-nuget-package-details.png');
     } finally {
       panel.dispose();
     }
diff --git a/src/editors/vscode/src/test/suite/run-debug-contributions.test.ts b/src/editors/vscode/src/test/suite/run-debug-contributions.test.ts
index 9c7dba83..9e330432 100644
--- a/src/editors/vscode/src/test/suite/run-debug-contributions.test.ts
+++ b/src/editors/vscode/src/test/suite/run-debug-contributions.test.ts
@@ -46,6 +46,7 @@ import {
   commandConstants,
   commandEntry,
   configurationAttributes,
+  contributedViewIds,
   expectedPairs,
   frameworkSegments,
   initialConfigurations,
@@ -551,8 +552,11 @@ suite('Run/Debug manifest contributions', () => {
       '.resetViewLocation',
       '.toggleVisibility',
     ];
+    // Exactly `<contributed view id><suffix>`: a suffix match alone would also
+    // swallow SharpLsp's own `sharplsp.tutorial.open`.
+    const viewIds = contributedViewIds();
     const workbenchOwned = (id: string): boolean =>
-      VIEW_SUFFIXES.some((suffix) => id.endsWith(suffix));
+      viewIds.some((view) => VIEW_SUFFIXES.some((suffix) => id === `${view}${suffix}`));
     const registeredOurs = [...registered]
       .filter((id) => id.startsWith(PREFIX) && !workbenchOwned(id))
       .sort();
diff --git a/src/editors/vscode/src/test/suite/run-debug-manifest-kit.ts b/src/editors/vscode/src/test/suite/run-debug-manifest-kit.ts
index cba530a9..61c94751 100644
--- a/src/editors/vscode/src/test/suite/run-debug-manifest-kit.ts
+++ b/src/editors/vscode/src/test/suite/run-debug-manifest-kit.ts
@@ -127,6 +127,16 @@ export function sharpLspIds(): string[] {
     .sort();
 }
 
+/** Every view id the manifest contributes, across all of `contributes.views`' containers. */
+export function contributedViewIds(): string[] {
+  const views: unknown = contributes().views;
+  assert.ok(isRecord(views), 'contributes.views must be an object');
+  return Object.values(views)
+    .flatMap((list: unknown) => (Array.isArray(list) ? list : []))
+    .map((view: unknown) => (isRecord(view) ? String(view.id) : ''))
+    .filter((id) => id !== '');
+}
+
 /** The single manifest entry for `id`; fails naming what IS contributed. */
 export function commandEntry(id: string): Record<string, any> {
   const matches = commandEntries().filter((entry) => entry.command === id);
diff --git a/src/editors/vscode/src/test/suite/solution-explorer.test.ts b/src/editors/vscode/src/test/suite/solution-explorer.test.ts
index 7d8bcc63..856bdcf6 100644
--- a/src/editors/vscode/src/test/suite/solution-explorer.test.ts
+++ b/src/editors/vscode/src/test/suite/solution-explorer.test.ts
@@ -6,11 +6,8 @@ import {
   EXTENSION_ID,
   flattenSymbolNames,
   openCSharpFile,
-  openSharpLspPanel,
   pollUntilResult,
   replaceDocumentContent,
-  settleForScreenshot,
-  takeScreenshot,
   waitForDocumentSymbols,
   pollSymbols,
   assertContainsAll,
@@ -260,8 +257,8 @@ suite('Solution Explorer & Workspace Symbols', () => {
       'declared exactly once',
     );
 
-    // Interaction 3 - it is the container `openSharpLspPanel` reveals, so the
-    // id in the manifest and the id the extension opens are the same string.
+    // Interaction 3 - the container id is openable, so the id in the manifest
+    // and the id the workbench opens are the same string.
     await assert.doesNotReject(async () => {
       await vscode.commands.executeCommand('workbench.view.extension.sharplsp-explorer');
     }, 'the container id must be openable as workbench.view.extension.<id>');
@@ -455,11 +452,7 @@ EndGlobal`,
     // Verify ICalculator has Add method too.
     childNamed(iface, 'Add', vscode.SymbolKind.Method);
 
-    await openSharpLspPanel();
-    // Refresh the tree view so the UI renders the loaded solution before screenshotting.
     await vscode.commands.executeCommand('sharplsp.refreshExplorer');
-    await settleForScreenshot(2000);
-    await takeScreenshot('solution-explorer.png');
 
     api.explorerProvider.getChildren; // keep reference
   });
diff --git a/src/editors/vscode/src/test/suite/tutorial.test.ts b/src/editors/vscode/src/test/suite/tutorial.test.ts
new file mode 100644
index 00000000..7cc7df03
--- /dev/null
+++ b/src/editors/vscode/src/test/suite/tutorial.test.ts
@@ -0,0 +1,467 @@
+// Implements [TUTORIAL-TESTING].
+import * as assert from 'node:assert/strict';
+import * as vscode from 'vscode';
+import type { SharpLspExtensionApi } from '../../extension.js';
+import { isMeaningful, isUserRequest, stepForResponse } from '../../tutorial/detect.js';
+import type { TutorialProgress } from '../../tutorial/model.generated.js';
+import {
+  currentStep,
+  EMPTY_PROGRESS,
+  isTutorialProgress,
+  withStep,
+} from '../../tutorial/progress.js';
+import type { PanelView } from '../../tutorial/panel-view.js';
+import {
+  contextKey,
+  filmOf,
+  LANGUAGES,
+  stepKey,
+  stepOf,
+  stepsOf,
+  titleOf,
+} from '../../tutorial/steps.js';
+import {
+  openFSharpFixture,
+  pollDefinition,
+  pollHover,
+  pollReferences,
+  positionOf,
+} from './fsharp-helpers';
+import { waitForCodeActions } from './refactor-test-helpers';
+import {
+  EXTENSION_ID,
+  closeAllEditors,
+  pollSymbols,
+  pollUntilResult,
+  setupLspTestSuite,
+  teardownLspTestSuite,
+} from './test-helpers';
+import { COMMAND_MS, LSP_RESPONSE_MS, SIDECAR_COLD_MS } from './test-timeouts';
+
+type Tutorial = NonNullable<SharpLspExtensionApi['tutorial']>;
+
+const LOCATION = {
+  uri: 'file:///a.fs',
+  range: { start: { line: 0, character: 0 }, end: { line: 0, character: 1 } },
+};
+const QUICK_FIX = { title: 'Fix', kind: 'quickfix' };
+const INVOKED = { context: { diagnostics: [], triggerKind: 1 } };
+const AUTOMATIC = { context: { diagnostics: [], triggerKind: 2 } };
+const CALL = '= Geometry.totalArea';
+const MEMBER = CALL.indexOf('totalArea');
+
+/** The first symbol with no children: a function, type or value, never a namespace keyword. */
+/** Containers a hover on whose keyword (`namespace`, `module`) answers nothing. */
+const CONTAINERS = new Set([
+  vscode.SymbolKind.Namespace,
+  vscode.SymbolKind.Module,
+  vscode.SymbolKind.Package,
+]);
+
+/** The first symbol, depth first, that is a declaration rather than a container. */
+function firstDeclaration(
+  symbols: readonly vscode.DocumentSymbol[],
+): vscode.DocumentSymbol | undefined {
+  for (const symbol of symbols) {
+    const found = CONTAINERS.has(symbol.kind) ? firstDeclaration(symbol.children) : symbol;
+    if (found) return found;
+  }
+  return undefined;
+}
+
+function done(tutorial: Tutorial): Set<string> {
+  return new Set(tutorial.progress.value.done.map(stepKey));
+}
+
+/** Wait until SharpLsp's answer has ticked `key`. */
+async function ticked(tutorial: Tutorial, key: string): Promise<Set<string>> {
+  return pollUntilResult(
+    async () => Promise.resolve(done(tutorial)),
+    (keys) => keys.has(key),
+    COMMAND_MS,
+    100,
+    `the tutorial to tick ${key}`,
+  );
+}
+
+function view(tutorial: Tutorial): PanelView {
+  const shown = tutorial.panel.view();
+  const tabs = vscode.window.tabGroups.all.map((group) =>
+    group.tabs.map(
+      (tab) => `${String(group.viewColumn)}:${tab.label}${tab.isPreview ? '(preview)' : ''}`,
+    ),
+  );
+  assert.ok(shown, `the tutorial panel is open and shows a view; tabs: ${JSON.stringify(tabs)}`);
+  return shown;
+}
+
+function assertCurrent(tutorial: Tutorial, key: string | null, film?: string): void {
+  const current = view(tutorial).current;
+  assert.equal(current?.key ?? null, key, `the panel's current step is ${String(key)}`);
+  if (film !== undefined)
+    assert.equal(current?.film.video.endsWith(`/${film}.mp4`), true, `the panel plays ${film}`);
+}
+
+suite('Interactive tutorial [TUTORIAL]', () => {
+  let tmpDir: string;
+  let tutorial: Tutorial;
+
+  suiteSetup(async function () {
+    this.timeout(SIDECAR_COLD_MS);
+    ({ tmpDir } = await setupLspTestSuite('tutorial-'));
+    const api = await vscode.extensions
+      .getExtension<SharpLspExtensionApi>(EXTENSION_ID)
+      ?.activate();
+    assert.ok(api?.tutorial, 'the extension API exposes the tutorial');
+    tutorial = api.tutorial;
+    await vscode.commands.executeCommand('sharplsp.tutorial.reset');
+  });
+
+  suiteTeardown(async () => {
+    await closeAllEditors();
+    teardownLspTestSuite(tmpDir);
+  });
+
+  test('[TUTORIAL-DETECT-LSP] only a meaningful SharpLsp answer ticks a step', () => {
+    // Hover: content that shows something, in any of the protocol's shapes.
+    assert.equal(isMeaningful('Hover', null), false);
+    assert.equal(isMeaningful('Hover', { contents: '  ' }), false);
+    assert.equal(isMeaningful('Hover', { contents: { kind: 'markdown', value: '' } }), false);
+    assert.equal(
+      isMeaningful('Hover', { contents: ['', { language: 'fsharp', value: 'int' }] }),
+      true,
+    );
+    // Completion: an array or a list, with at least one item.
+    assert.equal(isMeaningful('Completion', []), false);
+    assert.equal(isMeaningful('Completion', { isIncomplete: false, items: [] }), false);
+    assert.equal(
+      isMeaningful('Completion', { isIncomplete: false, items: [{ label: 'map' }] }),
+      true,
+    );
+    // Definition and references: one location, or a non-empty list.
+    assert.equal(isMeaningful('Definition', null), false);
+    assert.equal(isMeaningful('Definition', LOCATION), true);
+    assert.equal(isMeaningful('References', []), false);
+    assert.equal(isMeaningful('References', [LOCATION]), true);
+    // Code actions: at least one action offered.
+    assert.equal(isMeaningful('CodeAction', null), false);
+    assert.equal(isMeaningful('CodeAction', []), false);
+    assert.equal(isMeaningful('CodeAction', [QUICK_FIX]), true);
+  });
+
+  test('[TUTORIAL-DETECT-LSP] only a code action the user invoked ticks, never the automatic lightbulb', () => {
+    assert.equal(isUserRequest('CodeAction', INVOKED), true);
+    assert.equal(isUserRequest('CodeAction', AUTOMATIC), false);
+    assert.equal(isUserRequest('CodeAction', undefined), false, 'no context, no proof');
+    assert.equal(isUserRequest('Hover', undefined), true, 'only code actions run unasked');
+    assert.deepEqual(
+      stepForResponse('textDocument/codeAction', 'fsharp', [QUICK_FIX], INVOKED),
+      stepOf('FSharp', 'CodeAction'),
+    );
+    assert.equal(
+      stepForResponse('textDocument/codeAction', 'csharp', [QUICK_FIX], AUTOMATIC),
+      undefined,
+      'the editor asking on a caret move is not the user',
+    );
+    assert.equal(stepForResponse('textDocument/codeAction', 'fsharp', [], INVOKED), undefined);
+  });
+
+  test('[TUTORIAL-DETECT-LSP] the request method and the document language pick the step', () => {
+    const hover = { contents: { kind: 'markdown', value: 'val x: int' } };
+    assert.deepEqual(
+      stepForResponse('textDocument/hover', 'fsharp', hover),
+      stepOf('FSharp', 'Hover'),
+    );
+    assert.deepEqual(
+      stepForResponse('textDocument/references', 'csharp', [LOCATION]),
+      stepOf('CSharp', 'References'),
+    );
+    assert.equal(
+      stepForResponse('textDocument/hover', 'razor', hover),
+      undefined,
+      'Razor is not taught',
+    );
+    assert.equal(
+      stepForResponse('textDocument/hover', undefined, hover),
+      undefined,
+      'no open document',
+    );
+    assert.equal(stepForResponse('textDocument/documentSymbol', 'fsharp', [LOCATION]), undefined);
+    assert.equal(stepForResponse('textDocument/hover', 'fsharp', null), undefined);
+  });
+
+  test('[TUTORIAL-PROGRESS] progress is ordered, idempotent and validated when restored', () => {
+    const hover = stepOf('FSharp', 'Hover');
+    const once: TutorialProgress = withStep(EMPTY_PROGRESS, hover);
+    assert.equal(
+      withStep(once, hover),
+      once,
+      'recording a done step again returns the same object',
+    );
+    assert.deepEqual(currentStep(EMPTY_PROGRESS, 'FSharp'), stepOf('FSharp', 'OpenFile'));
+    assert.deepEqual(
+      currentStep(withStep(once, stepOf('FSharp', 'OpenFile')), 'FSharp'),
+      stepOf('FSharp', 'Completion'),
+    );
+    const all = stepsOf('CSharp').reduce(withStep, EMPTY_PROGRESS);
+    assert.equal(currentStep(all, 'CSharp'), undefined, 'every C# step done');
+    assert.equal(isTutorialProgress(once), true);
+    assert.equal(
+      isTutorialProgress({ done: [{ language: { kind: 'Rust' }, action: { kind: 'Hover' } }] }),
+      false,
+    );
+    assert.equal(isTutorialProgress({ done: 'all' }), false);
+    assert.equal(isTutorialProgress(undefined), false);
+  });
+
+  test('[TUTORIAL-PANEL] every film is an MP4 from the website or its pinned commit, never a WebM, which VS Code cannot demux', () => {
+    for (const step of LANGUAGES.flatMap(stepsOf)) {
+      const film = filmOf(step);
+      assert.match(
+        film.video,
+        /^https:\/\/(sharplsp\.dev\/assets\/videos|media\.githubusercontent\.com\/media\/Nimblesite\/SharpLsp\/[0-9a-f]{40}\/src\/website\/src\/assets\/videos)\/[a-z-]+\.mp4$/,
+      );
+      assert.match(film.poster, /-poster\.webp$/);
+      const assets = film.poster.replace(/-poster\.webp$/, '');
+      assert.equal(film.captions === null || film.captions === `${assets}.en.vtt`, true);
+      assert.equal(film.video.endsWith(`/${assets.split('/').pop() ?? ''}.mp4`), true);
+    }
+    assert.equal(filmOf(stepOf('FSharp', 'Hover')).captions?.endsWith('/hover.en.vtt'), true);
+    assert.equal(
+      filmOf(stepOf('CSharp', 'SolutionExplorer')).captions,
+      null,
+      'sharplsp-tour has no captions',
+    );
+    assert.equal(
+      filmOf(stepOf('FSharp', 'OpenFile')).video.endsWith('/fsharp-language.mp4'),
+      true,
+      'F# opens on the F# film',
+    );
+    // Code actions play the FilmMakers' lesson, each language from its own chapter.
+    const fsharpFix = filmOf(stepOf('FSharp', 'CodeAction'));
+    const csharpFix = filmOf(stepOf('CSharp', 'CodeAction'));
+    // Not deployed yet: GitHub serves the LFS MP4, and the poster and captions, from one commit.
+    assert.match(
+      fsharpFix.video,
+      /^https:\/\/media\.githubusercontent\.com\/media\/.+\/refactoring-lesson\.mp4$/,
+    );
+    assert.match(
+      fsharpFix.poster,
+      /^https:\/\/raw\.githubusercontent\.com\/.+\/refactoring-lesson-poster\.webp$/,
+    );
+    assert.equal(fsharpFix.captions, fsharpFix.poster.replace('-poster.webp', '.en.vtt'));
+    assert.deepEqual([fsharpFix.start, csharpFix.start], [44, 116], 'F# fixes at 0:44, C# at 1:56');
+    assert.equal(filmOf(stepOf('FSharp', 'Hover')).start, 0, 'other films play from the start');
+    assert.deepEqual(
+      [titleOf(stepOf('FSharp', 'OpenFile')), titleOf(stepOf('CSharp', 'OpenFile'))],
+      ['Open an F# file', 'Open a C# file'],
+      'each language takes its own article',
+    );
+  });
+
+  test('[TUTORIAL-WALKTHROUGH] the F# walkthrough comes first, and each step completes on its own context key', async () => {
+    // The raw manifest: `packageJSON` arrives already localized, its `%keys%` replaced.
+    const extension = vscode.extensions.getExtension(EXTENSION_ID);
+    assert.ok(extension, 'the extension is installed');
+    const raw = await vscode.workspace.fs.readFile(
+      vscode.Uri.joinPath(extension.extensionUri, 'package.json'),
+    );
+    const manifest = JSON.parse(new TextDecoder().decode(raw)) as {
+      contributes: {
+        walkthroughs: {
+          id: string;
+          steps: { id: string; description: string; completionEvents: string[] }[];
+        }[];
+      };
+    };
+    const walkthroughs = manifest.contributes.walkthroughs;
+    assert.deepEqual(
+      walkthroughs.map((w) => w.id),
+      ['sharplsp.tutorial.fsharp', 'sharplsp.tutorial.csharp'],
+    );
+    LANGUAGES.forEach((language, index) => {
+      const steps = walkthroughs[index]?.steps ?? [];
+      assert.deepEqual(
+        steps.map((s) => s.id),
+        stepsOf(language).map(stepKey),
+        `${language} steps, in order`,
+      );
+      steps.forEach((s, i) => {
+        const step = stepsOf(language)[i];
+        assert.ok(step);
+        assert.deepEqual(
+          s.completionEvents,
+          [`onContext:${contextKey(step)}`],
+          `${s.id} completes on its key only`,
+        );
+        assert.match(
+          s.description,
+          /^%walkthrough\.\w+\.\w+\.description%$/,
+          `${s.id} is localized`,
+        );
+      });
+    });
+  });
+
+  test('[TUTORIAL-PANEL] opening the tutorial shows the first F# step, its film and a locked-down webview', async function () {
+    this.timeout(COMMAND_MS * 2);
+    await closeAllEditors();
+    await vscode.commands.executeCommand('sharplsp.tutorial.reset');
+    await vscode.commands.executeCommand('sharplsp.tutorial.open');
+    assertCurrent(tutorial, 'FSharp.OpenFile', 'fsharp-language');
+    assert.deepEqual(
+      view(tutorial).steps.map((s) => s.done),
+      [false, false, false, false, false, false, false],
+    );
+    assert.deepEqual(
+      view(tutorial).languages.map((l) => [l.kind, l.selected, l.done]),
+      [
+        ['FSharp', true, 0],
+        ['CSharp', false, 0],
+      ],
+    );
+    const html = tutorial.panel.html() ?? '';
+    assert.match(html, /default-src 'none'/, 'nothing loads unless the policy names it');
+    assert.match(
+      html,
+      /media-src https:\/\/sharplsp\.dev https:\/\/media\.githubusercontent\.com https:\/\/raw\.githubusercontent\.com;/,
+      'films come from the website, or GitHub until it deploys, only',
+    );
+    assert.match(
+      html,
+      /<body data-film-origins="https:\/\/sharplsp\.dev https:\/\/media\.githubusercontent\.com https:\/\/raw\.githubusercontent\.com">/,
+      'the script accepts film URLs only on the origins the policy names',
+    );
+    assert.match(
+      html,
+      /<script nonce="[^"]+" src="[^"]+panel\.js"><\/script>/,
+      'the one script runs by nonce',
+    );
+    const film = await pollUntilResult(
+      async () => Promise.resolve(tutorial.panel.film()),
+      (report) => report !== undefined && report.state !== 'loading',
+      LSP_RESPONSE_MS,
+      200,
+      'the webview to report how the film fared',
+    );
+    assert.equal(film?.state, 'ready', `the film loads in the editor's webview: ${film?.detail}`);
+    assert.equal(film?.detail, '', 'no media error');
+    assert.match(film?.src ?? '', /^https:\/\/sharplsp\.dev\/.+\/fsharp-language\.mp4$/);
+    // VS Code lets a webview autoplay only muted until the viewer clicks in it.
+    assert.equal(film?.muted, true, 'the narrated film autoplays muted, as VS Code requires');
+    assert.match(
+      html,
+      /<button id="sound" hidden>🔊 Sound on<\/button>/,
+      'the panel offers the narration a click away',
+    );
+  });
+
+  test('[TUTORIAL-DETECT] carrying out the F# steps in the live editor ticks each one, and no C# step', async function () {
+    this.timeout(SIDECAR_COLD_MS * 2);
+    const { doc, uri } = await openFSharpFixture('Usage.fs');
+    assert.ok((await ticked(tutorial, 'FSharp.OpenFile')).has('FSharp.OpenFile'));
+    assertCurrent(tutorial, 'FSharp.Hover', 'hover');
+
+    const member = positionOf(doc, CALL, MEMBER + 2);
+    await pollHover(uri, member);
+    assert.equal(
+      (await ticked(tutorial, 'FSharp.Hover')).has('CSharp.Hover'),
+      false,
+      'an F# hover ticks no C# step',
+    );
+    assertCurrent(tutorial, 'FSharp.Completion', 'code-completions');
+
+    await pollUntilResult(
+      async () =>
+        vscode.commands.executeCommand<vscode.CompletionList>(
+          'vscode.executeCompletionItemProvider',
+          uri,
+          positionOf(doc, CALL, MEMBER),
+          '.',
+        ),
+      (list) => list.items.length > 0,
+      LSP_RESPONSE_MS,
+      1_000,
+      'F# member completion after Geometry.',
+    );
+    await ticked(tutorial, 'FSharp.Completion');
+    assertCurrent(tutorial, 'FSharp.Definition', 'navigation');
+
+    await pollDefinition(uri, member);
+    await ticked(tutorial, 'FSharp.Definition');
+    await pollReferences(uri, positionOf(doc, 'let double', 4), 2);
+    await ticked(tutorial, 'FSharp.References');
+    assertCurrent(tutorial, 'FSharp.CodeAction', 'refactoring-lesson');
+
+    const fixes = await openFSharpFixture('CodeFixes.fs');
+    const unusedOpen = fixes.doc.lineAt(positionOf(fixes.doc, 'open System.Text').line).range;
+    await waitForCodeActions({
+      uri: fixes.uri,
+      range: unusedOpen,
+      kind: vscode.CodeActionKind.QuickFix,
+      predicate: (items) => items.some((item) => item.title === 'Remove unused open'),
+      timeoutMs: LSP_RESPONSE_MS,
+    });
+    const keys = await ticked(tutorial, 'FSharp.CodeAction');
+    assert.deepEqual(
+      [...keys].filter((key) => key.startsWith('CSharp.')),
+      [],
+      'no C# step ticked',
+    );
+    assertCurrent(tutorial, 'FSharp.SolutionExplorer', 'sharplsp-tour');
+  });
+
+  test('[TUTORIAL-DETECT-EDITOR] the Solution Explorer ticks both languages, and C# picks up where it stands', async function () {
+    this.timeout(LSP_RESPONSE_MS * 2);
+    await vscode.commands.executeCommand('workbench.view.extension.sharplsp-explorer');
+    await ticked(tutorial, 'FSharp.SolutionExplorer');
+    assert.ok(
+      done(tutorial).has('CSharp.SolutionExplorer'),
+      'the explorer is shared by both languages',
+    );
+    assertCurrent(tutorial, null);
+    assert.equal(view(tutorial).languages[0]?.done, 7, 'all seven F# steps done');
+
+    await vscode.commands.executeCommand('sharplsp.tutorial.openFile', 'CSharp');
+    assert.equal(
+      vscode.window.activeTextEditor?.document.languageId,
+      'csharp',
+      'the command opened a C# file',
+    );
+    await ticked(tutorial, 'CSharp.OpenFile');
+    await vscode.commands.executeCommand('sharplsp.tutorial.open', 'CSharp');
+    assert.equal(view(tutorial).language, 'CSharp');
+    assertCurrent(tutorial, 'CSharp.Hover', 'hover');
+  });
+
+  test('[TUTORIAL-PROGRESS] reset returns every step and the panel to the start', async () => {
+    assert.ok(done(tutorial).size > 0, 'there is progress to reset');
+    await vscode.commands.executeCommand('sharplsp.tutorial.reset');
+    assert.equal(done(tutorial).size, 0, 'no step is done');
+    assertCurrent(tutorial, 'CSharp.OpenFile', 'getting-started');
+    assert.deepEqual(
+      view(tutorial).languages.map((l) => l.done),
+      [0, 0],
+    );
+  });
+
+  test('[TUTORIAL-OPEN-FILE] the file the tutorial opens is one SharpLsp answers hover in', async function () {
+    this.timeout(SIDECAR_COLD_MS * 2);
+    await closeAllEditors();
+    await vscode.commands.executeCommand('sharplsp.tutorial.openFile', 'FSharp');
+    const doc = vscode.window.activeTextEditor?.document;
+    assert.equal(doc?.languageId, 'fsharp', 'the command opened an F# file');
+    assert.ok((await ticked(tutorial, 'FSharp.OpenFile')).has('FSharp.OpenFile'));
+    // FCS's first outline can hold the namespace alone; wait for the declarations inside it.
+    const symbols = await pollSymbols(doc.uri, (found) => firstDeclaration(found) !== undefined);
+    const symbol = firstDeclaration(symbols);
+    assert.ok(symbol, 'the opened file declares a symbol to rest the mouse on');
+    assert.ok(
+      (await vscode.workspace.findFiles('**/*.fsproj')).length > 0,
+      'the workspace has an F# project, and the file opened lies in one',
+    );
+    const hovers = await pollHover(doc.uri, symbol.selectionRange.start);
+    assert.ok(hovers.length > 0, `hover answers on ${symbol.name} in ${doc.uri.fsPath}`);
+    assert.ok((await ticked(tutorial, 'FSharp.Hover')).has('FSharp.Hover'));
+  });
+});
diff --git a/src/editors/vscode/src/tutorial/detect.ts b/src/editors/vscode/src/tutorial/detect.ts
new file mode 100644
index 00000000..eb93d5f5
--- /dev/null
+++ b/src/editors/vscode/src/tutorial/detect.ts
@@ -0,0 +1,101 @@
+// Implements [TUTORIAL-DETECT-LSP]: a step ticks only on SharpLsp's real, meaningful answer.
+import { workspace, type CancellationToken } from 'vscode';
+import type { MessageSignature, Middleware } from 'vscode-languageclient/node';
+import * as log from '../log.js';
+import { requestDocumentUri } from '../open-sync.js';
+import { getErrorMessage, isRecord } from '../utils.js';
+import type { TutorialStep } from './model.generated.js';
+import { record } from './progress.js';
+import { type ActionKind, actionOfMethod, languageOfId, stepOf } from './steps.js';
+
+/** The `sendRequest` middleware shape the client installs. */
+export type SendRequest = NonNullable<Middleware['sendRequest']>;
+
+/** Hover content that shows something: a non-empty string, value or list. */
+function hasContent(contents: unknown): boolean {
+  if (typeof contents === 'string') return contents.trim() !== '';
+  if (Array.isArray(contents)) return contents.some(hasContent);
+  return isRecord(contents) && hasContent(contents.value);
+}
+
+/** One location or a non-empty list of them. */
+function hasLocations(result: unknown): boolean {
+  return Array.isArray(result) ? result.length > 0 : isRecord(result);
+}
+
+function hasItems(result: unknown): boolean {
+  if (Array.isArray(result)) return result.length > 0;
+  return isRecord(result) && Array.isArray(result.items) && result.items.length > 0;
+}
+
+/** Whether `result` is an answer that shows the user something for `action`. */
+export function isMeaningful(action: ActionKind, result: unknown): boolean {
+  switch (action) {
+    case 'Hover':
+      return isRecord(result) && hasContent(result.contents);
+    case 'Completion':
+    case 'CodeAction':
+      return hasItems(result);
+    case 'Definition':
+    case 'References':
+      return hasLocations(result);
+    case 'OpenFile':
+    case 'SolutionExplorer':
+      return false;
+  }
+}
+
+/** LSP `CodeActionTriggerKind.Invoked`: the user asked (Cmd+., the lightbulb), not the editor. */
+const INVOKED = 1;
+
+/** Whether the user, not the editor, made the request: code actions also run automatically. */
+export function isUserRequest(action: ActionKind, param: unknown): boolean {
+  if (action !== 'CodeAction') return true;
+  return isRecord(param) && isRecord(param.context) && param.context.triggerKind === INVOKED;
+}
+
+/** The step a response ticks, if any: a tracked method, a taught language, a meaningful answer. */
+export function stepForResponse(
+  method: string,
+  languageId: string | undefined,
+  result: unknown,
+  param?: unknown,
+): TutorialStep | undefined {
+  const action = actionOfMethod(method);
+  const language = languageId === undefined ? undefined : languageOfId(languageId);
+  if (action === undefined || language === undefined) return undefined;
+  const ticks = isUserRequest(action, param) && isMeaningful(action, result);
+  return ticks ? stepOf(language, action) : undefined;
+}
+
+function languageIdOf(param: unknown): string | undefined {
+  const uri = requestDocumentUri(param);
+  return workspace.textDocuments.find((document) => document.uri.toString() === uri)?.languageId;
+}
+
+/** Record the step a response ticks. Never throws: the response is the user's, not ours. */
+function note(type: string | MessageSignature, param: unknown, result: unknown): void {
+  try {
+    const method = typeof type === 'string' ? type : type.method;
+    const step = stepForResponse(method, languageIdOf(param), result, param);
+    if (step !== undefined) record(step);
+  } catch (error: unknown) {
+    log.warn(`Tutorial could not observe a response: ${getErrorMessage(error)}`);
+  }
+}
+
+/** `inner` (or the bare request), observing each response and returning it unchanged. */
+export function observeResponses(inner?: SendRequest): SendRequest {
+  return async <P, R>(
+    type: string | MessageSignature,
+    param: P | undefined,
+    token: CancellationToken | undefined,
+    next: (type: string | MessageSignature, param?: P, token?: CancellationToken) => Promise<R>,
+  ): Promise<R> => {
+    const result = await (inner === undefined
+      ? next(type, param, token)
+      : inner(type, param, token, next));
+    note(type, param, result);
+    return result;
+  };
+}
diff --git a/src/editors/vscode/src/tutorial/model.generated.ts b/src/editors/vscode/src/tutorial/model.generated.ts
new file mode 100644
index 00000000..834f425f
--- /dev/null
+++ b/src/editors/vscode/src/tutorial/model.generated.ts
@@ -0,0 +1,23 @@
+// @generated by tools/vsix/tutorial-model.mjs from docs/models/vscode-tutorial.td.
+// DO NOT EDIT BY HAND: edit the model and run `node tools/vsix/tutorial-model.mjs`.
+// Implements [TUTORIAL-MODEL].
+
+export type TutorialLanguage = { kind: 'FSharp' } | { kind: 'CSharp' };
+
+export type TutorialAction =
+  | { kind: 'OpenFile' }
+  | { kind: 'Hover' }
+  | { kind: 'Completion' }
+  | { kind: 'Definition' }
+  | { kind: 'References' }
+  | { kind: 'CodeAction' }
+  | { kind: 'SolutionExplorer' };
+
+export interface TutorialStep {
+  language: TutorialLanguage;
+  action: TutorialAction;
+}
+
+export interface TutorialProgress {
+  done: TutorialStep[];
+}
diff --git a/src/editors/vscode/src/tutorial/panel-view.ts b/src/editors/vscode/src/tutorial/panel-view.ts
new file mode 100644
index 00000000..3f60be33
--- /dev/null
+++ b/src/editors/vscode/src/tutorial/panel-view.ts
@@ -0,0 +1,86 @@
+// Implements [TUTORIAL-PANEL]: what the video panel shows, as a pure projection of progress.
+import type { TutorialProgress } from './model.generated.js';
+import { currentStep, isDone } from './progress.js';
+import {
+  type Film,
+  filmOf,
+  instructionOf,
+  LANGUAGES,
+  type LanguageKind,
+  languageLabel,
+  stepKey,
+  stepsOf,
+  titleOf,
+} from './steps.js';
+
+export interface LanguageView {
+  readonly kind: LanguageKind;
+  readonly label: string;
+  readonly selected: boolean;
+  readonly done: number;
+  readonly total: number;
+}
+
+export interface StepView {
+  readonly key: string;
+  readonly title: string;
+  readonly done: boolean;
+  readonly current: boolean;
+}
+
+export interface CurrentView {
+  readonly key: string;
+  readonly title: string;
+  readonly instruction: string;
+  readonly film: Film;
+  /** The step offers "Open one for me" ([TUTORIAL-WALKTHROUGH]). */
+  readonly opensFile: boolean;
+}
+
+export interface PanelView {
+  readonly language: LanguageKind;
+  readonly languages: readonly LanguageView[];
+  readonly steps: readonly StepView[];
+  /** `null` once every step of the language is done. */
+  readonly current: CurrentView | null;
+}
+
+function languageView(
+  progress: TutorialProgress,
+  kind: LanguageKind,
+  selected: LanguageKind,
+): LanguageView {
+  const steps = stepsOf(kind);
+  const done = steps.filter((step) => isDone(progress, step)).length;
+  return {
+    kind,
+    label: languageLabel(kind),
+    selected: kind === selected,
+    done,
+    total: steps.length,
+  };
+}
+
+function currentView(progress: TutorialProgress, language: LanguageKind): CurrentView | null {
+  const step = currentStep(progress, language);
+  if (step === undefined) return null;
+  return {
+    key: stepKey(step),
+    title: titleOf(step),
+    instruction: instructionOf(step),
+    film: filmOf(step),
+    opensFile: step.action.kind === 'OpenFile',
+  };
+}
+
+export function panelView(progress: TutorialProgress, language: LanguageKind): PanelView {
+  const current = currentView(progress, language);
+  const steps = stepsOf(language).map((step) => ({
+    key: stepKey(step),
+    title: titleOf(step),
+    done: isDone(progress, step),
+    current: current?.key === stepKey(step),
+  }));
+  const languages = LANGUAGES.map((kind) => languageView(progress, kind, language));
+  return { language, languages, steps, current };
+}
diff --git a/src/editors/vscode/src/tutorial/panel.ts b/src/editors/vscode/src/tutorial/panel.ts
new file mode 100644
index 00000000..35c41054
--- /dev/null
+++ b/src/editors/vscode/src/tutorial/panel.ts
@@ -0,0 +1,171 @@
+// Implements [TUTORIAL-PANEL]: one webview beside the editor, a live projection of progress.
+import { randomBytes } from 'node:crypto';
+import * as vscode from 'vscode';
+import { effect, Signal } from '../signals.js';
+import * as log from '../log.js';
+import { isRecord } from '../utils.js';
+import { type PanelView, panelView } from './panel-view.js';
+import { progress } from './progress.js';
+import { FILM_ORIGINS, type LanguageKind, LANGUAGES } from './steps.js';
+
+const VIEW_TYPE = 'sharplsp.tutorial';
+const TITLE = 'SharpLsp Tutorial';
+
+/** What the webview last reported about its film ([TUTORIAL-PANEL-FILM-REPORT]). */
+export interface FilmReport {
+  readonly state: 'loading' | 'ready' | 'error';
+  readonly src: string;
+  /** The media error, empty unless `state` is `error`. */
+  readonly detail: string;
+  /** Whether the film plays without its sound. */
+  readonly muted: boolean;
+}
+
+const FILM_STATES: readonly FilmReport['state'][] = ['loading', 'ready', 'error'];
+
+function filmReportOf(message: Record<string, unknown>): FilmReport | undefined {
+  const state = FILM_STATES.find((s) => s === message.state);
+  const { src, detail, muted } = message;
+  return state === undefined ||
+    typeof src !== 'string' ||
+    typeof detail !== 'string' ||
+    typeof muted !== 'boolean'
+    ? undefined
+    : { state, src, detail, muted };
+}
+
+/** The panel's handle, and the test seam onto what it shows. */
+export interface TutorialPanel {
+  open(language: LanguageKind): void;
+  /** What the panel shows now, or `undefined` while it is closed. */
+  view(): PanelView | undefined;
+  /** The panel's HTML, or `undefined` while it is closed. */
+  html(): string | undefined;
+  /** How the shown film fared, or `undefined` before the webview reports. */
+  film(): FilmReport | undefined;
+}
+
+function shellHtml(webview: vscode.Webview, media: vscode.Uri): string {
+  const nonce = randomBytes(16).toString('base64');
+  const script = webview.asWebviewUri(vscode.Uri.joinPath(media, 'panel.js')).toString();
+  const style = webview.asWebviewUri(vscode.Uri.joinPath(media, 'panel.css')).toString();
+  const csp = [
+    "default-src 'none'",
+    `style-src ${webview.cspSource}`,
+    `script-src 'nonce-${nonce}'`,
+    `media-src ${FILM_ORIGINS.join(' ')}`,
+    `img-src ${FILM_ORIGINS.join(' ')}`,
+  ].join('; ');
+  return `<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8">
+<meta http-equiv="Content-Security-Policy" content="${csp}">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<link rel="stylesheet" href="${style}"><title>${TITLE}</title></head>
+<body data-film-origins="${FILM_ORIGINS.join(' ')}"><nav id="languages"></nav><h1 id="title"></h1><p id="instruction"></p>
+<button id="open-file" hidden>Open one for me</button>
+<div id="film"></div><button id="sound" hidden>🔊 Sound on</button><p id="offline" hidden>The film could not load. Follow the instruction above.</p>
+<ol id="steps"></ol><script nonce="${nonce}" src="${script}"></script></body></html>`;
+}
+
+function languageOf(message: Record<string, unknown>): LanguageKind | undefined {
+  return LANGUAGES.find((kind) => kind === message.language);
+}
+
+/**
+ * Beside the active editor, or column two when none is active: `Beside` with no
+ * editor lands in column one, where the next file opened replaces the panel.
+ */
+function panelColumn(): vscode.ViewColumn {
+  return vscode.window.activeTextEditor === undefined
+    ? vscode.ViewColumn.Two
+    : vscode.ViewColumn.Beside;
+}
+
+/** The panel, created on first `open` and recreated after the user closes it. */
+class TutorialPanelHost implements TutorialPanel {
+  private readonly language = new Signal<LanguageKind>('FSharp');
+  private readonly media: vscode.Uri;
+  private panel: vscode.WebviewPanel | undefined;
+  private shown: PanelView | undefined;
+  private filmReport: FilmReport | undefined;
+
+  constructor(
+    extensionUri: vscode.Uri,
+    private readonly openFile: (language: LanguageKind) => void,
+  ) {
+    this.media = vscode.Uri.joinPath(extensionUri, 'media', 'tutorial');
+  }
+
+  public open(language: LanguageKind): void {
+    this.language.value = language;
+    this.panel ??= this.create();
+    this.panel.reveal(undefined, true);
+  }
+
+  public view(): PanelView | undefined {
+    return this.shown;
+  }
+
+  public html(): string | undefined {
+    return this.panel?.webview.html;
+  }
+
+  public film(): FilmReport | undefined {
+    return this.filmReport;
+  }
+
+  private create(): vscode.WebviewPanel {
+    const panel = vscode.window.createWebviewPanel(
+      VIEW_TYPE,
+      TITLE,
+      { viewColumn: panelColumn(), preserveFocus: true },
+      { enableScripts: true, retainContextWhenHidden: true, localResourceRoots: [this.media] },
+    );
+    panel.webview.html = shellHtml(panel.webview, this.media);
+    const stop = effect(() => {
+      this.post(panel, panelView(progress.value, this.language.value));
+    });
+    const listener = panel.webview.onDidReceiveMessage((message: unknown) => {
+      this.onMessage(message);
+    });
+    panel.onDidDispose(() => {
+      stop();
+      listener.dispose();
+      this.panel = undefined;
+      this.shown = undefined;
+      this.filmReport = undefined;
+    });
+    return panel;
+  }
+
+  private post(panel: vscode.WebviewPanel, view: PanelView): void {
+    this.shown = view;
+    void panel.webview.postMessage({ type: 'view', view });
+  }
+
+  private onMessage(message: unknown): void {
+    if (!isRecord(message)) return;
+    if (message.type === 'ready' && this.panel !== undefined && this.shown !== undefined) {
+      this.post(this.panel, this.shown);
+    }
+    if (message.type === 'language')
+      this.language.value = languageOf(message) ?? this.language.value;
+    if (message.type === 'openFile') this.openFile(this.language.value);
+    if (message.type === 'film') this.noteFilm(message);
+  }
+
+  private noteFilm(message: Record<string, unknown>): void {
+    const report = filmReportOf(message);
+    if (report === undefined) return;
+    this.filmReport = report;
+    const line = `Tutorial film ${report.state}: ${report.src} ${report.detail}`.trimEnd();
+    if (report.state === 'error') log.warn(line);
+    else log.info(line);
+  }
+}
+
+export function createTutorialPanel(
+  context: vscode.ExtensionContext,
+  openFile: (language: LanguageKind) => void,
+): TutorialPanel {
+  return new TutorialPanelHost(context.extensionUri, openFile);
+}
diff --git a/src/editors/vscode/src/tutorial/progress.ts b/src/editors/vscode/src/tutorial/progress.ts
new file mode 100644
index 00000000..ea42333a
--- /dev/null
+++ b/src/editors/vscode/src/tutorial/progress.ts
@@ -0,0 +1,56 @@
+// Implements [TUTORIAL-PROGRESS]: the single source of truth for what the user has done.
+import { Signal } from '../signals.js';
+import { isRecord } from '../utils.js';
+import type { TutorialProgress, TutorialStep } from './model.generated.js';
+import { ACTIONS, ALL_STEPS, LANGUAGES, type LanguageKind, stepKey, stepsOf } from './steps.js';
+
+export const EMPTY_PROGRESS: TutorialProgress = { done: [] };
+
+export function isDone(progress: TutorialProgress, step: TutorialStep): boolean {
+  const key = stepKey(step);
+  return progress.done.some((done) => stepKey(done) === key);
+}
+
+/** `progress` with `step` done; the SAME object when it already was, so no one is notified. */
+export function withStep(progress: TutorialProgress, step: TutorialStep): TutorialProgress {
+  return isDone(progress, step) ? progress : { done: [...progress.done, step] };
+}
+
+/** The language's first step not yet done, or `undefined` once all are. */
+export function currentStep(
+  progress: TutorialProgress,
+  language: LanguageKind,
+): TutorialStep | undefined {
+  return stepsOf(language).find((step) => !isDone(progress, step));
+}
+
+/** Whether a stored value is a progress this version understands. */
+export function isTutorialProgress(value: unknown): value is TutorialProgress {
+  return isRecord(value) && Array.isArray(value.done) && value.done.every(isKnownStep);
+}
+
+function isKnownStep(value: unknown): boolean {
+  if (!isRecord(value) || !isRecord(value.language) || !isRecord(value.action)) return false;
+  const { language, action } = value;
+  return (
+    LANGUAGES.some((kind) => kind === language.kind) && ACTIONS.some((kind) => kind === action.kind)
+  );
+}
+
+/** Every step, paired with whether it is done: what the context keys mirror. */
+export function stepStates(
+  progress: TutorialProgress,
+): readonly { readonly step: TutorialStep; readonly done: boolean }[] {
+  return ALL_STEPS.map((step) => ({ step, done: isDone(progress, step) }));
+}
+
+/** The live progress. Written only through `record` and `resetProgress`. */
+export const progress = new Signal<TutorialProgress>(EMPTY_PROGRESS);
+
+export function record(step: TutorialStep): void {
+  progress.value = withStep(progress.value, step);
+}
+
+export function resetProgress(): void {
+  progress.value = EMPTY_PROGRESS;
+}
diff --git a/src/editors/vscode/src/tutorial/register.ts b/src/editors/vscode/src/tutorial/register.ts
new file mode 100644
index 00000000..ee69d74b
--- /dev/null
+++ b/src/editors/vscode/src/tutorial/register.ts
@@ -0,0 +1,145 @@
+// Implements [TUTORIAL-DETECT-EDITOR], [TUTORIAL-PROGRESS] and [TUTORIAL-FIRST-RUN].
+import * as vscode from 'vscode';
+import {
+  CMD_TUTORIAL_OPEN,
+  CMD_TUTORIAL_OPEN_FILE,
+  CMD_TUTORIAL_RESET,
+  CONFIG_SECTION,
+  CONFIG_TUTORIAL_SHOW_ON_STARTUP,
+} from '../constants.js';
+import * as log from '../log.js';
+import { effect, type Signal } from '../signals.js';
+import { getErrorMessage } from '../utils.js';
+import type { TutorialProgress } from './model.generated.js';
+import { createTutorialPanel, type TutorialPanel } from './panel.js';
+import {
+  EMPTY_PROGRESS,
+  isTutorialProgress,
+  progress,
+  record,
+  resetProgress,
+  stepStates,
+} from './progress.js';
+import {
+  contextKey,
+  type LanguageKind,
+  LANGUAGES,
+  languageLabel,
+  languageOfId,
+  stepOf,
+} from './steps.js';
+import { tutorialSourceFile } from './source-file.js';
+
+const PROGRESS_KEY = 'sharplsp.tutorial.progress';
+const SHOWN_KEY = 'sharplsp.tutorial.shown';
+
+/** The tutorial's test seam on the extension API ([TUTORIAL-TESTING]). */
+export interface TutorialApi {
+  readonly progress: Signal<TutorialProgress>;
+  readonly panel: TutorialPanel;
+}
+
+function restore(state: vscode.Memento): TutorialProgress {
+  const stored = state.get<unknown>(PROGRESS_KEY);
+  if (stored === undefined || isTutorialProgress(stored)) return stored ?? EMPTY_PROGRESS;
+  log.warn('Tutorial: discarding stored progress this version does not understand');
+  return EMPTY_PROGRESS;
+}
+
+/** Persist every change, and mirror it into the walkthrough's context keys. */
+function mirror(context: vscode.ExtensionContext): void {
+  const stop = effect(() => {
+    const current = progress.value;
+    void context.globalState.update(PROGRESS_KEY, current);
+    for (const { step, done } of stepStates(current)) {
+      void vscode.commands.executeCommand('setContext', contextKey(step), done);
+    }
+  });
+  context.subscriptions.push({ dispose: stop });
+}
+
+function noteEditor(editor: vscode.TextEditor | undefined): void {
+  const document = editor?.document;
+  if (document === undefined || !['file', 'untitled'].includes(document.uri.scheme)) return;
+  const language = languageOfId(document.languageId);
+  if (language !== undefined) record(stepOf(language, 'OpenFile'));
+}
+
+function noteExplorer(visible: boolean): void {
+  if (!visible) return;
+  for (const language of LANGUAGES) record(stepOf(language, 'SolutionExplorer'));
+}
+
+function watchEditor(context: vscode.ExtensionContext, explorer: vscode.TreeView<unknown>): void {
+  context.subscriptions.push(
+    vscode.window.onDidChangeActiveTextEditor(noteEditor),
+    explorer.onDidChangeVisibility((event) => {
+      noteExplorer(event.visible);
+    }),
+  );
+  noteEditor(vscode.window.activeTextEditor);
+  noteExplorer(explorer.visible);
+}
+
+/** Open a `language` file the server has loaded ([TUTORIAL-OPEN-FILE]). */
+async function openFirstFile(language: LanguageKind): Promise<void> {
+  const file = await tutorialSourceFile(language);
+  if (file.kind === 'none') {
+    const where = file.where === 'solution' ? 'the loaded solution' : 'this workspace';
+    void vscode.window.showInformationMessage(
+      `There is no ${languageLabel(language)} file in ${where}.`,
+    );
+    return;
+  }
+  log.info(`Tutorial: opening ${file.uri.toString()} for ${language}`);
+  await vscode.window.showTextDocument(file.uri, {
+    viewColumn: vscode.ViewColumn.One,
+    preview: false,
+  });
+}
+
+function languageArg(value: unknown): LanguageKind {
+  return LANGUAGES.find((language) => language === value) ?? 'FSharp';
+}
+
+function registerCommands(context: vscode.ExtensionContext, panel: TutorialPanel): void {
+  context.subscriptions.push(
+    vscode.commands.registerCommand(CMD_TUTORIAL_OPEN, (language?: unknown) => {
+      panel.open(languageArg(language));
+    }),
+    vscode.commands.registerCommand(CMD_TUTORIAL_OPEN_FILE, async (language?: unknown) => {
+      await openFirstFile(languageArg(language));
+    }),
+    vscode.commands.registerCommand(CMD_TUTORIAL_RESET, resetProgress),
+  );
+}
+
+/** Open the F# walkthrough and the panel once per install ([TUTORIAL-FIRST-RUN]). */
+async function firstRun(context: vscode.ExtensionContext, panel: TutorialPanel): Promise<void> {
+  const enabled = vscode.workspace
+    .getConfiguration(CONFIG_SECTION)
+    .get<boolean>(CONFIG_TUTORIAL_SHOW_ON_STARTUP, true);
+  if (context.extensionMode === vscode.ExtensionMode.Test || !enabled) return;
+  if (context.globalState.get<boolean>(SHOWN_KEY) === true) return;
+  await context.globalState.update(SHOWN_KEY, true);
+  const walkthrough = `${context.extension.id}#sharplsp.tutorial.fsharp`;
+  await vscode.commands.executeCommand('workbench.action.openWalkthrough', walkthrough, false);
+  panel.open('FSharp');
+}
+
+export function registerTutorial(
+  context: vscode.ExtensionContext,
+  explorer: vscode.TreeView<unknown>,
+): TutorialApi {
+  progress.value = restore(context.globalState);
+  mirror(context);
+  const panel = createTutorialPanel(context, (language) => {
+    void openFirstFile(language);
+  });
+  registerCommands(context, panel);
+  watchEditor(context, explorer);
+  void firstRun(context, panel).catch((error: unknown) => {
+    log.warn(`Tutorial first run failed: ${getErrorMessage(error)}`);
+  });
+  return { progress, panel };
+}
diff --git a/src/editors/vscode/src/tutorial/source-file.ts b/src/editors/vscode/src/tutorial/source-file.ts
new file mode 100644
index 00000000..45c133e8
--- /dev/null
+++ b/src/editors/vscode/src/tutorial/source-file.ts
@@ -0,0 +1,44 @@
+// Implements [TUTORIAL-OPEN-FILE]: the file the tutorial opens is one the server has loaded,
+// so hover, completion and navigation answer in it.
+import * as vscode from 'vscode';
+import { fileUri, hasExtension } from '../paths.js';
+import { symbolsState } from '../state.js';
+import { type LanguageKind, projectExtension, sourceExtension } from './steps.js';
+
+const OPEN_FILE_EXCLUDE = '**/{bin,obj,node_modules,.git}/**';
+
+/** Where the tutorial finds a file: in the loaded solution, or a workspace project when none is loaded. */
+export type SourceFile =
+  | { readonly kind: 'found'; readonly uri: vscode.Uri }
+  | { readonly kind: 'none'; readonly where: 'solution' | 'workspace' };
+
+/** The loaded solution's first `language` file that declares something. */
+function solutionFile(language: LanguageKind): SourceFile | undefined {
+  const symbols = symbolsState.value;
+  if (symbols.kind !== 'loaded') return undefined;
+  const extension = sourceExtension(language);
+  const file = symbols.response.projects
+    .flatMap((project) => project.symbols)
+    .find((entry) => entry.symbols.length > 0 && hasExtension(entry.file, extension));
+  return file === undefined
+    ? { kind: 'none', where: 'solution' }
+    : { kind: 'found', uri: fileUri(file.file) };
+}
+
+/** The first `language` file under a `language` project's directory: one the server can load. */
+async function workspaceFile(language: LanguageKind): Promise<SourceFile> {
+  const glob = `**/*${projectExtension(language)}`;
+  const projects = await vscode.workspace.findFiles(glob, OPEN_FILE_EXCLUDE);
+  for (const project of projects.sort((a, b) => a.fsPath.localeCompare(b.fsPath))) {
+    const directory = vscode.Uri.joinPath(project, '..');
+    const sources = new vscode.RelativePattern(directory, `**/*${sourceExtension(language)}`);
+    const [uri] = await vscode.workspace.findFiles(sources, OPEN_FILE_EXCLUDE, 1);
+    if (uri !== undefined) return { kind: 'found', uri };
+  }
+  return { kind: 'none', where: 'workspace' };
+}
+
+/** The `language` file `sharplsp.tutorial.openFile` opens. */
+export async function tutorialSourceFile(language: LanguageKind): Promise<SourceFile> {
+  return solutionFile(language) ?? (await workspaceFile(language));
+}
diff --git a/src/editors/vscode/src/tutorial/steps.ts b/src/editors/vscode/src/tutorial/steps.ts
new file mode 100644
index 00000000..cb5e7662
--- /dev/null
+++ b/src/editors/vscode/src/tutorial/steps.ts
@@ -0,0 +1,204 @@
+// Implements [TUTORIAL-STEPS]: the step table, the only place that names a film.
+import type { TutorialAction, TutorialLanguage, TutorialStep } from './model.generated.js';
+
+export type LanguageKind = TutorialLanguage['kind'];
+export type ActionKind = TutorialAction['kind'];
+
+/** The taught languages, F# first ([TUTORIAL-GOAL]). */
+export const LANGUAGES: readonly LanguageKind[] = ['FSharp', 'CSharp'];
+
+/** Each language's steps, in walkthrough order. */
+export const ACTIONS: readonly ActionKind[] = [
+  'OpenFile',
+  'Hover',
+  'Completion',
+  'Definition',
+  'References',
+  'CodeAction',
+  'SolutionExplorer',
+];
+
+/** Where the website publishes its films ([TUTORIAL-PANEL]). */
+export const FILM_ORIGIN = 'https://sharplsp.dev';
+
+/** The commit whose website assets hold films the site has not deployed yet. */
+const FILM_COMMIT = '8b0fa431ce701d73af897192247305864e216dd9';
+const FILM_PATH = `Nimblesite/SharpLsp/${FILM_COMMIT}/src/website/src/assets/videos`;
+/** GitHub serves a film's LFS MP4 from one host, and its poster and captions from another. */
+const GITHUB_MEDIA = 'https://media.githubusercontent.com';
+const GITHUB_RAW = 'https://raw.githubusercontent.com';
+
+/** Every origin a film, its poster or its captions load from: the panel's policy allows these only. */
+export const FILM_ORIGINS: readonly string[] = [FILM_ORIGIN, GITHUB_MEDIA, GITHUB_RAW];
+
+/** Films still waiting for the site to deploy: GitHub serves them from `FILM_COMMIT` until then. */
+const UNDEPLOYED_FILMS: ReadonlySet<string> = new Set(['refactoring-lesson']);
+
+/** Films the website publishes without an English caption track. */
+const UNCAPTIONED_FILMS: ReadonlySet<string> = new Set(['sharplsp-tour']);
+
+interface LanguageFacts {
+  /** VS Code's language id. */
+  readonly id: string;
+  readonly label: string;
+  /** The indefinite article before the label: "an F# file", "a C# file". */
+  readonly article: 'a' | 'an';
+  /** The source file extension, lower-case with its dot. */
+  readonly extension: string;
+  /** The project file extension, lower-case with its dot. */
+  readonly project: string;
+  readonly openFileFilm: string;
+}
+
+const LANGUAGE_FACTS: Record<LanguageKind, LanguageFacts> = {
+  FSharp: {
+    id: 'fsharp',
+    label: 'F#',
+    article: 'an',
+    extension: '.fs',
+    project: '.fsproj',
+    openFileFilm: 'fsharp-language',
+  },
+  CSharp: {
+    id: 'csharp',
+    label: 'C#',
+    article: 'a',
+    extension: '.cs',
+    project: '.csproj',
+    openFileFilm: 'getting-started',
+  },
+};
+
+interface ActionFacts {
+  /** The LSP request whose meaningful response ticks the step ([TUTORIAL-DETECT-LSP]). */
+  readonly method?: string;
+  /** The film; `undefined` means the language's own `openFileFilm`. */
+  readonly film?: string;
+  /** Seconds into the film where each language's chapter starts; `undefined` plays from 0. */
+  readonly filmStart?: Readonly<Record<LanguageKind, number>>;
+  readonly title: (language: LanguageFacts) => string;
+  readonly instruction: (language: LanguageFacts) => string;
+}
+
+const ACTION_FACTS: Record<ActionKind, ActionFacts> = {
+  OpenFile: {
+    title: (l) => `Open ${l.article} ${l.label} file`,
+    instruction: (l) => `Open any ${l.label} source file in the editor.`,
+  },
+  Hover: {
+    method: 'textDocument/hover',
+    film: 'hover',
+    title: () => 'Hover a symbol',
+    instruction: (l) => `Rest the mouse on a function, type or value in the ${l.label} file.`,
+  },
+  Completion: {
+    method: 'textDocument/completion',
+    film: 'code-completions',
+    title: () => 'Complete code',
+    instruction: () => 'Type a dot after a value, or press Ctrl+Space, and pick an item.',
+  },
+  Definition: {
+    method: 'textDocument/definition',
+    film: 'navigation',
+    title: () => 'Go to a definition',
+    instruction: () => 'Put the caret on a symbol and press F12.',
+  },
+  References: {
+    method: 'textDocument/references',
+    film: 'navigation',
+    title: () => 'Find all references',
+    instruction: () => 'Put the caret on a symbol and press Shift+F12.',
+  },
+  CodeAction: {
+    method: 'textDocument/codeAction',
+    // The FilmMakers' lesson: F# quick fixes at 0:44, C# generate method at 1:56.
+    film: 'refactoring-lesson',
+    filmStart: { FSharp: 44, CSharp: 116 },
+    title: () => 'Fix code with a code action',
+    instruction: () =>
+      'Put the caret on a warning or error, press Cmd+. (Ctrl+. on Windows and Linux), and pick a fix.',
+  },
+  SolutionExplorer: {
+    film: 'sharplsp-tour',
+    title: () => 'Open the Solution Explorer',
+    instruction: () => 'Click the SharpLsp icon in the activity bar.',
+  },
+};
+
+export function stepOf(language: LanguageKind, action: ActionKind): TutorialStep {
+  return { language: { kind: language }, action: { kind: action } };
+}
+
+/** `FSharp.Hover`: a step's identity, stable across sessions. */
+export function stepKey(step: TutorialStep): string {
+  return `${step.language.kind}.${step.action.kind}`;
+}
+
+/** The context key the walkthrough completes on ([TUTORIAL-WALKTHROUGH]). */
+export function contextKey(step: TutorialStep): string {
+  return `sharplsp.tutorial.${stepKey(step)}`;
+}
+
+export function stepsOf(language: LanguageKind): readonly TutorialStep[] {
+  return ACTIONS.map((action) => stepOf(language, action));
+}
+
+export const ALL_STEPS: readonly TutorialStep[] = LANGUAGES.flatMap(stepsOf);
+
+export function languageOfId(languageId: string): LanguageKind | undefined {
+  return LANGUAGES.find((language) => LANGUAGE_FACTS[language].id === languageId);
+}
+
+export function actionOfMethod(method: string): ActionKind | undefined {
+  return ACTIONS.find((action) => ACTION_FACTS[action].method === method);
+}
+
+export function languageLabel(language: LanguageKind): string {
+  return LANGUAGE_FACTS[language].label;
+}
+
+export function sourceExtension(language: LanguageKind): string {
+  return LANGUAGE_FACTS[language].extension;
+}
+
+export function projectExtension(language: LanguageKind): string {
+  return LANGUAGE_FACTS[language].project;
+}
+
+export function titleOf(step: TutorialStep): string {
+  return ACTION_FACTS[step.action.kind].title(LANGUAGE_FACTS[step.language.kind]);
+}
+
+export function instructionOf(step: TutorialStep): string {
+  return ACTION_FACTS[step.action.kind].instruction(LANGUAGE_FACTS[step.language.kind]);
+}
+
+export interface Film {
+  readonly video: string;
+  readonly poster: string;
+  /** `null` when the film has no English captions. */
+  readonly captions: string | null;
+  /** Seconds into the film where the step's chapter starts. */
+  readonly start: number;
+}
+
+/** Where a film's MP4 and its other assets live: the website, or GitHub until it deploys. */
+function filmBases(name: string): { readonly video: string; readonly assets: string } {
+  if (!UNDEPLOYED_FILMS.has(name)) {
+    const site = `${FILM_ORIGIN}/assets/videos/${name}`;
+    return { video: site, assets: site };
+  }
+  return {
+    video: `${GITHUB_MEDIA}/media/${FILM_PATH}/${name}`,
+    assets: `${GITHUB_RAW}/${FILM_PATH}/${name}`,
+  };
+}
+
+export function filmOf(step: TutorialStep): Film {
+  const facts = ACTION_FACTS[step.action.kind];
+  const name = facts.film ?? LANGUAGE_FACTS[step.language.kind].openFileFilm;
+  const { video, assets } = filmBases(name);
+  const captions = UNCAPTIONED_FILMS.has(name) ? null : `${assets}.en.vtt`;
+  const start = facts.filmStart?.[step.language.kind] ?? 0;
+  return { video: `${video}.mp4`, poster: `${assets}-poster.webp`, captions, start };
+}
diff --git a/src/editors/vscode/test-chunks.json b/src/editors/vscode/test-chunks.json
index 57db9df9..3e274eba 100644
--- a/src/editors/vscode/test-chunks.json
+++ b/src/editors/vscode/test-chunks.json
@@ -45,7 +45,8 @@
         "fsharp-lsp-codefix-generation.test.js",
         "fsharp-lsp-rename-symbols.test.js",
         "fsharp-lsp-rename-edge.test.js",
-        "fsharp-lsp-cross-language-rename.test.js"
+        "fsharp-lsp-cross-language-rename.test.js",
+        "tutorial.test.js"
       ]
     },
     "razor": {
diff --git a/src/sidecars/SharpLsp.Sidecar.CSharp.Tests/DotnetBuild.cs b/src/sidecars/SharpLsp.Sidecar.CSharp.Tests/DotnetBuild.cs
index bbd771c3..93798662 100644
--- a/src/sidecars/SharpLsp.Sidecar.CSharp.Tests/DotnetBuild.cs
+++ b/src/sidecars/SharpLsp.Sidecar.CSharp.Tests/DotnetBuild.cs
@@ -12,12 +12,13 @@ namespace SharpLsp.Sidecar.CSharp.Tests;
 internal static class DotnetBuild
 {
     /// <summary>
-    /// Build <paramref name="project"/> and its project references, returning the exit code
+    /// Build <paramref name="project"/> and its project references, with any extra
+    /// <paramref name="arguments"/> such as a framework, returning the exit code
     /// and merged output. Build servers are off: on Linux an MSBuild node kept for reuse
     /// inherits the redirected pipes and outlives the build, so its output never ends and
     /// reading it never returns — a multi-targeted project builds on such a node.
     /// </summary>
-    public static (int ExitCode, string Output) Run(string project)
+    public static (int ExitCode, string Output) Run(string project, params string[] arguments)
     {
         var startInfo = new ProcessStartInfo("dotnet")
         {
@@ -33,6 +34,10 @@ public static (int ExitCode, string Output) Run(string project)
             RedirectStandardOutput = true,
             RedirectStandardError = true,
         };
+        foreach (var argument in arguments)
+        {
+            startInfo.ArgumentList.Add(argument);
+        }
         using var build =
             Process.Start(startInfo) ?? throw new InvalidOperationException("dotnet did not start");
         // Drain both pipes at once: reading them in turn deadlocks once the unread one fills.
diff --git a/src/sidecars/SharpLsp.Sidecar.CSharp.Tests/WorkspaceManagerOwningProjectTests.cs b/src/sidecars/SharpLsp.Sidecar.CSharp.Tests/WorkspaceManagerOwningProjectTests.cs
new file mode 100644
index 00000000..84f87534
--- /dev/null
+++ b/src/sidecars/SharpLsp.Sidecar.CSharp.Tests/WorkspaceManagerOwningProjectTests.cs
@@ -0,0 +1,211 @@
+using System.Diagnostics;
+using SharpLsp.Sidecar.Common;
+using SharpLsp.Sidecar.CSharp.Workspace;
+
+#pragma warning disable CA1515 // Types can be internal
+#pragma warning disable RS1035 // Path.GetTempPath / Process banned for analyzers — we're tests
+
+namespace SharpLsp.Sidecar.CSharp.Tests;
+
+/// <summary>
+/// [SHARPLSP-ARCHITECTURE-PROJECTS-CSHARP-OWNING]: a C# file that no loaded project compiles
+/// answers from the project that owns it. Opening the file in the editor is enough, and the
+/// workspace's own projects stay loaded (GitHub #414).
+/// </summary>
+[System.Diagnostics.CodeAnalysis.SuppressMessage(
+    "Reliability",
+    "CA2007:Consider calling ConfigureAwait on the awaited task",
+    Justification = "xUnit test methods run on the synchronization-context-free test pool"
+)]
+public sealed class WorkspaceManagerOwningProjectTests : IDisposable
+{
+    private const string Project = """
+        <Project Sdk="Microsoft.NET.Sdk">
+          <PropertyGroup>
+            <TargetFramework>net10.0</TargetFramework>
+          </PropertyGroup>
+        </Project>
+        """;
+
+    private readonly string _root = NativePaths.Temp($"sharplsp-wm-owning-{Guid.NewGuid():N}");
+    private readonly string _home;
+    private readonly string _homeSource;
+    private readonly string _lone;
+    private readonly string _guard;
+
+    public WorkspaceManagerOwningProjectTests()
+    {
+        _home = Write("Home/Home.csproj", Project);
+        _homeSource = Write(
+            "Home/Greeter.cs",
+            "namespace Home;\n\n/// <summary>Says hello.</summary>\n"
+                + "public static class Greeter\n{\n    public static string Hello() => \"hi\";\n}\n"
+        );
+        _lone = Write("Lone/Lone.csproj", Project);
+        _guard = Write(
+            "Lone/Guard.cs",
+            "namespace Lone;\n\npublic static class Guard\n{\n"
+                + "    /// <summary>Throws when the value is null.</summary>\n"
+                + "    public static T AgainstNull<T>(T? value) where T : class =>\n"
+                + "        value ?? throw new System.ArgumentNullException(nameof(value));\n\n"
+                + "    public static int Count = AgainstNull(\"x\").Length;\n}\n"
+        );
+        Build(_home);
+    }
+
+    private static void Build(string project, params string[] arguments)
+    {
+        var (exitCode, output) = DotnetBuild.Run(project, arguments);
+        Assert.True(exitCode == 0, $"dotnet build {project} must succeed:\n{output}");
+    }
+
+    public void Dispose()
+    {
+        try
+        {
+            Directory.Delete(_root, true);
+        }
+        catch (IOException) { }
+    }
+
+    [Fact]
+    public async Task A_file_outside_the_loaded_project_answers_hover_from_the_project_that_owns_it()
+    {
+        Build(_lone);
+        using var manager = await OpenGuardAsync();
+
+        var againstNull = await HoverWithinAsync(manager, _guard, 5, 23);
+        Assert.True(
+            againstNull is not null,
+            $"hover answers in {_guard}, which only Lone.csproj compiles"
+        );
+        Assert.Contains("AgainstNull", againstNull.Contents, StringComparison.Ordinal);
+        Assert.Contains(
+            "Throws when the value is null.",
+            againstNull.Contents,
+            StringComparison.Ordinal
+        );
+
+        var length = await HoverWithinAsync(manager, _guard, 8, 47);
+        Assert.True(length is not null, "a second symbol answers from the same project");
+        Assert.Contains("int", length.Contents, StringComparison.Ordinal);
+
+        // The project the workspace opened still answers: it was never replaced.
+        var greeter = await HoverWithinAsync(manager, _homeSource, 3, 20);
+        Assert.True(greeter is not null, "the workspace's own file still answers");
+        Assert.Contains("Says hello.", greeter.Contents, StringComparison.Ordinal);
+    }
+
+    /// <summary>
+    /// [DIAG-RESTORE]: opening a file never builds or restores a project the workspace did not
+    /// load. An owner never restored, as a fresh clone leaves Serilog, is left exactly as it
+    /// is, and the edit says why the file has no project and what to run.
+    /// </summary>
+    [Fact]
+    public async Task A_file_whose_owning_project_was_never_restored_leaves_it_untouched()
+    {
+        var obj = NativePaths.Join(NativePaths.DirectoryOf(_lone), "obj");
+        Assert.False(Directory.Exists(obj), "the owner starts unrestored");
+        using var manager = await OpenHomeAsync();
+
+        var opened = await manager.UpdateDocumentTextAsync(
+            _guard,
+            await File.ReadAllTextAsync(_guard)
+        );
+        var message = opened.Match(_ => "ok", err => err);
+        Assert.Contains("Lone.csproj", message, StringComparison.Ordinal);
+        Assert.Contains("dotnet restore", message, StringComparison.Ordinal);
+        Assert.False(Directory.Exists(obj), "opening the file restored nothing");
+
+        var hover = await manager.GetHoverAsync(_guard, 5, 23);
+        Assert.Null(+hover);
+        Assert.False(Directory.Exists(obj), "asking it a question built nothing either");
+    }
+
+    /// <summary>
+    /// Loading an owner writes nothing a build would: one built for net8.0 of its two
+    /// frameworks still has net8.0 output only, so a launch that reads the output folders
+    /// still sees what the user built ([DEBUG-FEATURES-LAUNCH-BUILD]).
+    /// </summary>
+    [Fact]
+    public async Task Loading_an_owner_built_for_one_of_its_frameworks_adds_no_output_for_the_other()
+    {
+        _ = Write(
+            "Lone/Lone.csproj",
+            Project.Replace(
+                "<TargetFramework>net10.0</TargetFramework>",
+                "<TargetFrameworks>net8.0;net10.0</TargetFrameworks><LangVersion>latest</LangVersion>",
+                StringComparison.Ordinal
+            )
+        );
+        Build(_lone, "--framework", "net8.0");
+        var outputs = NativePaths.Join(NativePaths.DirectoryOf(_lone), "bin", "Debug");
+        using var manager = await OpenHomeAsync();
+        var opened = await manager.UpdateDocumentTextAsync(
+            _guard,
+            await File.ReadAllTextAsync(_guard)
+        );
+        Assert.False(opened.IsError, opened.Match(_ => "ok", err => err));
+
+        var length = await HoverWithinAsync(manager, _guard, 8, 47);
+        Assert.True(length is not null, $"hover answers in {_guard} from its built owner");
+        Assert.Contains("string.Length", length.Contents, StringComparison.Ordinal);
+        Assert.Equal(["net8.0"], [.. Directory.GetDirectories(outputs).Select(NativePaths.NameOf)]);
+    }
+
+    /// <summary>A manager on the Home project, which never compiles Guard.cs.</summary>
+    private async Task<WorkspaceManager> OpenHomeAsync()
+    {
+        var manager = new WorkspaceManager();
+#pragma warning disable CS0618 // Obsolete OpenAsync placeholder
+        var open = await manager.OpenAsync(_home);
+#pragma warning restore CS0618
+        Assert.False(open.IsError, open.Match(_ => "ok", err => err));
+        return manager;
+    }
+
+    /// <summary>A manager on the Home project, with Guard.cs, which Home never compiles, opened.</summary>
+    private async Task<WorkspaceManager> OpenGuardAsync()
+    {
+        var manager = await OpenHomeAsync();
+        var opened = await manager.UpdateDocumentTextAsync(
+            _guard,
+            await File.ReadAllTextAsync(_guard)
+        );
+        Assert.False(opened.IsError, opened.Match(_ => "ok", err => err));
+        return manager;
+    }
+
+    /// <summary>
+    /// The hover at (<paramref name="line"/>, <paramref name="character"/>), polled until it
+    /// answers or a minute passes: the owning project loads in the background.
+    /// </summary>
+    private static async Task<HoverResult?> HoverWithinAsync(
+        WorkspaceManager manager,
+        string file,
+        int line,
+        int character
+    )
+    {
+        var clock = Stopwatch.StartNew();
+        while (clock.Elapsed < TimeSpan.FromSeconds(60))
+        {
+            var hover = await manager.GetHoverAsync(file, line, character);
+            Assert.False(hover.IsError, hover.Match(_ => "ok", err => err));
+            if (+hover is { } answer)
+            {
+                return answer;
+            }
+            await Task.Delay(250);
+        }
+        return null;
+    }
+
+    private string Write(string relative, string text)
+    {
+        var path = NativePaths.Join(_root, relative);
+        _ = Directory.CreateDirectory(NativePaths.DirectoryOf(path));
+        File.WriteAllText(path, text);
+        return path;
+    }
+}
diff --git a/src/sidecars/SharpLsp.Sidecar.CSharp/Workspace/DotnetRestore.cs b/src/sidecars/SharpLsp.Sidecar.CSharp/Workspace/DotnetRestore.cs
new file mode 100644
index 00000000..cafe40e2
--- /dev/null
+++ b/src/sidecars/SharpLsp.Sidecar.CSharp/Workspace/DotnetRestore.cs
@@ -0,0 +1,106 @@
+using System.Diagnostics;
+using Outcome;
+using Serilog;
+using RestoreResult = Outcome.Result<Outcome.Unit, string>;
+
+namespace SharpLsp.Sidecar.CSharp.Workspace;
+
+/// <summary>
+/// Runs <c>dotnet restore</c> on one project, such as a file-based app's generated project.
+/// Implements [DIAG-RESTORE].
+/// </summary>
+internal static class DotnetRestore
+{
+    private static readonly TimeSpan KillWait = TimeSpan.FromSeconds(10);
+
+    /// <summary>
+    /// The project at <paramref name="projectPath"/> restored, with
+    /// <paramref name="properties"/> set; a failure carries what the restore printed.
+    /// </summary>
+    internal static async Task<RestoreResult> RunAsync(
+        string projectPath,
+        string workingDirectory,
+        IReadOnlyDictionary<string, string> properties,
+        CancellationToken ct
+    )
+    {
+        using var process = Process.Start(StartInfo(projectPath, workingDirectory, properties));
+        if (process is null)
+        {
+            return RestoreResult.Failure("Could not start `dotnet restore`.");
+        }
+
+        var standardOutput = process.StandardOutput.ReadToEndAsync(ct);
+        var standardError = process.StandardError.ReadToEndAsync(ct);
+        await WaitForExitAsync(process, ct).ConfigureAwait(false);
+        var detail = await DetailAsync(standardOutput, standardError).ConfigureAwait(false);
+        return process.ExitCode == 0
+            ? new RestoreResult.Ok<Unit, string>(Unit.Value)
+            : RestoreResult.Failure(detail);
+    }
+
+    private static ProcessStartInfo StartInfo(
+        string projectPath,
+        string workingDirectory,
+        IReadOnlyDictionary<string, string> properties
+    )
+    {
+        var startInfo = new ProcessStartInfo("dotnet")
+        {
+            WorkingDirectory = workingDirectory,
+            CreateNoWindow = true,
+            UseShellExecute = false,
+            RedirectStandardOutput = true,
+            RedirectStandardError = true,
+        };
+        startInfo.ArgumentList.Add("restore");
+        startInfo.ArgumentList.Add(projectPath);
+        startInfo.ArgumentList.Add("--verbosity");
+        startInfo.ArgumentList.Add("quiet");
+        foreach (var (name, value) in properties)
+        {
+            startInfo.ArgumentList.Add($"-p:{name}={value}");
+        }
+        return startInfo;
+    }
+
+    private static async Task WaitForExitAsync(Process process, CancellationToken ct)
+    {
+        try
+        {
+            await process.WaitForExitAsync(ct).ConfigureAwait(false);
+        }
+        catch (OperationCanceledException)
+        {
+            KillProcessTree(process);
+            throw;
+        }
+    }
+
+    private static void KillProcessTree(Process process)
+    {
+        try
+        {
+            process.Kill(entireProcessTree: true);
+            // Kill only STARTS termination. Until the restore has exited it still stands in the
+            // app's folder, which Windows refuses to delete. [SCRIPT-LIFECYCLE]
+            _ = process.WaitForExit(KillWait);
+        }
+        catch (Exception exception)
+        {
+            Log.Debug(exception, "Could not terminate cancelled package restore");
+        }
+    }
+
+    private static async Task<string> DetailAsync(
+        Task<string> standardOutput,
+        Task<string> standardError
+    )
+    {
+        var error = (await standardError.ConfigureAwait(false)).Trim();
+        var output = (await standardOutput.ConfigureAwait(false)).Trim();
+        return error.Length > 0 ? error
+            : output.Length > 0 ? output
+            : "no output";
+    }
+}
diff --git a/src/sidecars/SharpLsp.Sidecar.CSharp/Workspace/FileBasedPackageResolver.cs b/src/sidecars/SharpLsp.Sidecar.CSharp/Workspace/FileBasedPackageResolver.cs
index c1935018..7947965d 100644
--- a/src/sidecars/SharpLsp.Sidecar.CSharp/Workspace/FileBasedPackageResolver.cs
+++ b/src/sidecars/SharpLsp.Sidecar.CSharp/Workspace/FileBasedPackageResolver.cs
@@ -32,7 +32,6 @@ internal static class FileBasedPackageResolver
 {
     private static readonly string DefaultTargetFramework = $"net{Environment.Version.Major}.0";
     private static readonly TimeSpan RestoreLockTimeout = TimeSpan.FromMinutes(5);
-    private static readonly TimeSpan KillWait = TimeSpan.FromSeconds(10);
 
     public static async Task<FileBasedProjectResult> ResolveAsync(
         Closure closure,
@@ -248,19 +247,13 @@ private static async Task<RestoreResult> RestoreAsync(
         CancellationToken ct
     )
     {
-        using var process = Process.Start(RestoreStartInfo(context));
-        if (process is null)
-        {
-            return RestoreResult.Failure("Could not start `dotnet restore`.");
-        }
-
-        var standardOutput = process.StandardOutput.ReadToEndAsync(ct);
-        var standardError = process.StandardError.ReadToEndAsync(ct);
-        await WaitForExitAsync(process, ct).ConfigureAwait(false);
-        var detail = await RestoreDetailAsync(standardOutput, standardError).ConfigureAwait(false);
-        return process.ExitCode == 0
-            ? new RestoreResult.Ok<Unit, string>(Unit.Value)
-            : RestoreResult.Failure(RestoreFailure(packages, detail));
+        var restored = await DotnetRestore
+            .RunAsync(context.ProjectPath, context.AppDirectory, context.Properties, ct)
+            .ConfigureAwait(false);
+        return restored.Match(
+            ok => new RestoreResult.Ok<Unit, string>(ok),
+            detail => RestoreResult.Failure(RestoreFailure(packages, detail))
+        );
     }
 
     private static string RestoreFailure(IReadOnlyList<PackageRef> packages, string detail)
@@ -270,75 +263,6 @@ private static string RestoreFailure(IReadOnlyList<PackageRef> packages, string
             : $"Restore failed for {Describe(packages)}: {detail}";
     }
 
-    private static ProcessStartInfo RestoreStartInfo(RestoreContext context)
-    {
-        var startInfo = new ProcessStartInfo("dotnet")
-        {
-            WorkingDirectory = context.AppDirectory,
-            CreateNoWindow = true,
-            UseShellExecute = false,
-            RedirectStandardOutput = true,
-            RedirectStandardError = true,
-        };
-        startInfo.ArgumentList.Add("restore");
-        startInfo.ArgumentList.Add(context.ProjectPath);
-        startInfo.ArgumentList.Add("--verbosity");
-        startInfo.ArgumentList.Add("quiet");
-        AddPropertyArguments(startInfo, context.Properties);
-        return startInfo;
-    }
-
-    private static void AddPropertyArguments(
-        ProcessStartInfo startInfo,
-        IReadOnlyDictionary<string, string> properties
-    )
-    {
-        foreach (var (name, value) in properties)
-        {
-            startInfo.ArgumentList.Add($"-p:{name}={value}");
-        }
-    }
-
-    private static async Task WaitForExitAsync(Process process, CancellationToken ct)
-    {
-        try
-        {
-            await process.WaitForExitAsync(ct).ConfigureAwait(false);
-        }
-        catch (OperationCanceledException)
-        {
-            KillProcessTree(process);
-            throw;
-        }
-    }
-
-    private static void KillProcessTree(Process process)
-    {
-        try
-        {
-            process.Kill(entireProcessTree: true);
-            // Kill only STARTS termination. Until the restore has exited it still stands in the
-            // app's folder, which Windows refuses to delete. [SCRIPT-LIFECYCLE]
-            _ = process.WaitForExit(KillWait);
-        }
-        catch (Exception exception)
-        {
-            Log.Debug(exception, "Could not terminate cancelled file-based package restore");
-        }
-    }
-
-    private static async Task<string> RestoreDetailAsync(
-        Task<string> standardOutput,
-        Task<string> standardError
-    )
-    {
-        var error = (await standardError.ConfigureAwait(false)).Trim();
-        var output = (await standardOutput.ConfigureAwait(false)).Trim();
-        return error.Length > 0 ? error
-            : output.Length > 0 ? output
-            : "no output";
-    }
-
     private static async Task<FileBasedProjectResult> LoadReferencesAsync(
         RestoreContext context,
         CancellationToken ct
diff --git a/src/sidecars/SharpLsp.Sidecar.CSharp/Workspace/RoslynProjectLoading.cs b/src/sidecars/SharpLsp.Sidecar.CSharp/Workspace/RoslynProjectLoading.cs
index 4bf47eda..e70df48b 100644
--- a/src/sidecars/SharpLsp.Sidecar.CSharp/Workspace/RoslynProjectLoading.cs
+++ b/src/sidecars/SharpLsp.Sidecar.CSharp/Workspace/RoslynProjectLoading.cs
@@ -50,6 +50,41 @@ CancellationToken ct
                 .ConfigureAwait(false);
     }
 
+    /// <summary>
+    /// What loading <paramref name="project"/> adds to <paramref name="solution"/>: its own
+    /// info, any reference the solution lacks, and a placeholder per F# project it reaches.
+    /// A project the solution holds is linked, never loaded twice.
+    /// Implements [SHARPLSP-ARCHITECTURE-PROJECTS-CSHARP-OWNING].
+    /// </summary>
+    internal static async Task<IReadOnlyList<ProjectInfo>> LoadBesideAsync(
+        MSBuildWorkspace workspace,
+        Solution solution,
+        string project,
+        CancellationToken ct
+    )
+    {
+        var placeholders = FSharpReachedFrom([project]).Select(Placeholder).ToList();
+        var map = ProjectMap.Create(placeholders.Aggregate(solution, (s, p) => s.AddProject(p)));
+        var loader = new MSBuildProjectLoader(workspace, OutsideTheProject(workspace));
+        var infos = await loader
+            .LoadProjectInfoAsync(project, map, cancellationToken: ct)
+            .ConfigureAwait(false);
+        return [.. placeholders, .. infos];
+    }
+
+    /// <summary>
+    /// The workspace's properties with <c>$(OutDir)</c> in the sidecar's own scratch folder:
+    /// a design-time build creates its output folder, and a project the user never loaded
+    /// keeps exactly the output folders they built ([DEBUG-FEATURES-LAUNCH-BUILD]).
+    /// </summary>
+    private static ImmutableDictionary<string, string> OutsideTheProject(MSBuildWorkspace workspace)
+    {
+        return workspace.Properties.SetItem(
+            "OutDir",
+            NativePaths.AsDirectory(NativePaths.Temp("sharplsp-owning-output"))
+        );
+    }
+
     /// <summary>
     /// A solution no F# project is reachable from, in ONE batch. Roslyn starts and tears down
     /// a BuildHost process per <c>LoadProjectInfoAsync</c> call, so project-by-project loading
@@ -168,7 +203,7 @@ private static ProjectInfo Placeholder(string fsproj)
     /// <paramref name="solution"/> with the projects of <paramref name="infos"/> it lacks: a
     /// project loaded as one project's reference comes back again when it is asked for.
     /// </summary>
-    private static Solution WithNew(Solution solution, IEnumerable<ProjectInfo> infos)
+    internal static Solution WithNew(Solution solution, IEnumerable<ProjectInfo> infos)
     {
         return infos
             .Where(info => solution.GetProject(info.Id) is null)
diff --git a/src/sidecars/SharpLsp.Sidecar.CSharp/Workspace/WorkspaceManager.OwningProject.cs b/src/sidecars/SharpLsp.Sidecar.CSharp/Workspace/WorkspaceManager.OwningProject.cs
new file mode 100644
index 00000000..b056dd6f
--- /dev/null
+++ b/src/sidecars/SharpLsp.Sidecar.CSharp/Workspace/WorkspaceManager.OwningProject.cs
@@ -0,0 +1,131 @@
+using System.Collections.Concurrent;
+using Outcome;
+using Serilog;
+using SharpLsp.Sidecar.Common;
+using VoidResult = Outcome.Result<Outcome.Unit, string>;
+
+namespace SharpLsp.Sidecar.CSharp.Workspace;
+
+/// <summary>
+/// Loads the project that owns a C# file no loaded project compiles, beside the workspace's
+/// own projects, so a file opened from outside the solution still answers (GitHub #414).
+/// Implements [SHARPLSP-ARCHITECTURE-PROJECTS-CSHARP-OWNING].
+/// </summary>
+internal sealed partial class WorkspaceManager
+{
+    /// <summary>The owning-project loads in flight, so a burst of edits loads each owner once.</summary>
+    private readonly ConcurrentDictionary<string, Task> _owningLoads = new(NativePaths.Comparer);
+
+    /// <summary>
+    /// Start loading the project that owns <paramref name="filePath"/>, holding
+    /// <paramref name="newText"/> until it lands. A failure when no unloaded project owns it,
+    /// or when its owner was never restored: opening a file never restores or builds a
+    /// project the workspace did not load ([DIAG-RESTORE]). The caller holds
+    /// <see cref="_solutionMutationLock" />.
+    /// </summary>
+    private VoidResult AdoptOwner(string filePath, string newText)
+    {
+        var owner =
+            _workspace is null || !NativePaths.HasExtension(filePath, ".cs")
+                ? null
+                : OwningProject(filePath);
+        if (owner is null || _solution!.Projects.Any(p => NativePaths.AreEqual(p.FilePath, owner)))
+        {
+            return VoidResult.Failure($"Document not found: {filePath}");
+        }
+
+        if (
+            !File.Exists(
+                NativePaths.Join(NativePaths.DirectoryOf(owner), "obj", "project.assets.json")
+            )
+        )
+        {
+            return VoidResult.Failure(
+                $"{filePath} belongs to {owner}, which was never restored: run `dotnet restore {owner}`."
+            );
+        }
+
+        _pendingTextEdits[filePath] = newText;
+        _ = _owningLoads.GetOrAdd(owner, _ => Task.Run(() => AdoptNowAsync(owner, filePath)));
+        return new VoidResult.Ok<Unit, string>(Unit.Value);
+    }
+
+    /// <summary>
+    /// The first <c>.csproj</c>, in name order, of the nearest directory at or above
+    /// <paramref name="filePath"/>'s that holds one: an SDK project compiles every
+    /// <c>.cs</c> file beneath it.
+    /// </summary>
+    private static string? OwningProject(string filePath)
+    {
+        var directory = NativePaths.DirectoryOf(filePath);
+        while (directory.Length > 0)
+        {
+            if (ProjectsIn(directory).FirstOrDefault() is { } owner)
+            {
+                return owner;
+            }
+            var parent = NativePaths.DirectoryOf(directory);
+            directory = NativePaths.AreEqual(parent, directory) ? "" : parent;
+        }
+        return null;
+    }
+
+    /// <summary>The <c>.csproj</c> files in <paramref name="directory"/>, in name order.</summary>
+    private static IEnumerable<string> ProjectsIn(string directory)
+    {
+        try
+        {
+            return Directory.GetFiles(directory, "*.csproj").Order(NativePaths.Comparer);
+        }
+        catch (IOException)
+        {
+            return [];
+        }
+        catch (UnauthorizedAccessException)
+        {
+            return [];
+        }
+    }
+
+    /// <summary>Load <paramref name="owner"/> beside the workspace, logging the outcome.</summary>
+    private async Task AdoptNowAsync(string owner, string filePath)
+    {
+        try
+        {
+            var infos = await RoslynProjectLoading
+                .LoadBesideAsync(_workspace!, _solution!, owner, CancellationToken.None)
+                .ConfigureAwait(false);
+            await AddOwnerAsync(infos).ConfigureAwait(false);
+            Log.Information(
+                "C# loaded {Project}, which owns {File}, beside the workspace",
+                owner,
+                filePath
+            );
+        }
+        catch (Exception ex)
+        {
+            Log.Warning(ex, "C# could not load {Project}, which owns {File}", owner, filePath);
+        }
+        finally
+        {
+            _ = _owningLoads.TryRemove(owner, out _);
+        }
+    }
+
+    /// <summary>The loaded projects into the live solution, then the edits held for them.</summary>
+    private async Task AddOwnerAsync(IReadOnlyList<Microsoft.CodeAnalysis.ProjectInfo> infos)
+    {
+        await _solutionMutationLock.WaitAsync().ConfigureAwait(false);
+        try
+        {
+            _solution = AddCrossLanguageMetadataReferences(
+                RoslynProjectLoading.WithNew(_solution!, infos)
+            );
+            ReplayPendingTextEdits();
+        }
+        finally
+        {
+            _ = _solutionMutationLock.Release();
+        }
+    }
+}
diff --git a/src/sidecars/SharpLsp.Sidecar.CSharp/Workspace/WorkspaceManager.cs b/src/sidecars/SharpLsp.Sidecar.CSharp/Workspace/WorkspaceManager.cs
index 3bc17377..f8f1a0fb 100644
--- a/src/sidecars/SharpLsp.Sidecar.CSharp/Workspace/WorkspaceManager.cs
+++ b/src/sidecars/SharpLsp.Sidecar.CSharp/Workspace/WorkspaceManager.cs
@@ -171,7 +171,7 @@ public async Task<VoidResult> UpdateDocumentTextAsync(
                 var document = await FindDocumentAsync(filePath, ct).ConfigureAwait(false);
                 if (document is null)
                 {
-                    return VoidResult.Failure($"Document not found: {filePath}");
+                    return AdoptOwner(filePath, newText);
                 }
 
                 _solution = TargetFrameworks.WithTextInEveryContext(
diff --git a/src/sidecars/SharpLsp.Sidecar.FSharp.Tests/FSharpCSharpReferenceTests.fs b/src/sidecars/SharpLsp.Sidecar.FSharp.Tests/FSharpCSharpReferenceTests.fs
index ff28b9f0..b2180a07 100644
--- a/src/sidecars/SharpLsp.Sidecar.FSharp.Tests/FSharpCSharpReferenceTests.fs
+++ b/src/sidecars/SharpLsp.Sidecar.FSharp.Tests/FSharpCSharpReferenceTests.fs
@@ -7,7 +7,6 @@
 module SharpLsp.Sidecar.FSharp.Tests.FSharpCSharpReferenceTests
 
 open System
-open System.Diagnostics
 open System.IO
 open System.Threading
 open System.Xml.Linq
@@ -18,6 +17,7 @@ open Xunit
 open SharpLsp.Sidecar.Common
 open SharpLsp.Sidecar.FSharp
 open SharpLsp.Sidecar.FSharp.Tests.FSharpCoverageTests
+open SharpLsp.Sidecar.FSharp.Tests.FSharpResolvedReferenceTests
 
 /// `Base`: the abstract class `Greeter` derives from, declared at line 2 (0-based).
 let private namedSource =
@@ -100,18 +100,6 @@ let private writeProject root (name: string) extension (frameworks: string) file
     File.WriteAllText(path, source)
     path
 
-/// Restore `project` with the dotnet CLI; the test fails when restore does.
-let private restore (project: string) =
-    let info = ProcessStartInfo("dotnet", $"restore \"{project}\" --nologo -v q", RedirectStandardOutput = true)
-
-    match Process.Start info with
-    | null -> failwith "dotnet restore did not start"
-    | started ->
-        use proc = started
-        let output = proc.StandardOutput.ReadToEnd()
-        proc.WaitForExit()
-        Assert.True((proc.ExitCode = 0), $"dotnet restore failed: {output}")
-
 /// Base, Core and App — App reading Core, Core reading Base, all `net48;net10.0` —
 /// restored, never built, loaded as one folder.
 let private openSolution () =
diff --git a/src/sidecars/SharpLsp.Sidecar.FSharp.Tests/FSharpDesignTimeTests.fs b/src/sidecars/SharpLsp.Sidecar.FSharp.Tests/FSharpDesignTimeTests.fs
index a5a0b56e..a40a4dc5 100644
--- a/src/sidecars/SharpLsp.Sidecar.FSharp.Tests/FSharpDesignTimeTests.fs
+++ b/src/sidecars/SharpLsp.Sidecar.FSharp.Tests/FSharpDesignTimeTests.fs
@@ -62,7 +62,8 @@ let private onFramework, onModern, sharedInFramework, sharedInModern = (5, 6), (
 
 let private frameworks (value: string) = element "TargetFrameworks" [ value ]
 
-let private dotnet (dir: string) (args: string) =
+/// Run the dotnet CLI in `dir`; the test fails when it does.
+let internal dotnet (dir: string) (args: string) =
     match Process.Start(ProcessStartInfo("dotnet", args, WorkingDirectory = dir, RedirectStandardOutput = true)) with
     | null -> failwith $"dotnet {args} did not start"
     | started ->
diff --git a/src/sidecars/SharpLsp.Sidecar.FSharp.Tests/FSharpOwningProjectTests.fs b/src/sidecars/SharpLsp.Sidecar.FSharp.Tests/FSharpOwningProjectTests.fs
new file mode 100644
index 00000000..dcf9011a
--- /dev/null
+++ b/src/sidecars/SharpLsp.Sidecar.FSharp.Tests/FSharpOwningProjectTests.fs
@@ -0,0 +1,152 @@
+/// A file no loaded project compiles answers from the project that owns it: the editor
+/// opening the file is enough, and the workspace's own projects stay loaded (GitHub #414).
+/// Implements [SHARPLSP-ARCHITECTURE-PROJECTS-FSHARP-OWNING].
+module SharpLsp.Sidecar.FSharp.Tests.FSharpOwningProjectTests
+
+open System
+open System.Diagnostics
+open System.IO
+open System.Threading.Tasks
+open MessagePack
+open Xunit
+open SharpLsp.Sidecar.Common
+open SharpLsp.Sidecar.FSharp
+open SharpLsp.Sidecar.FSharp.Tests.SidecarEndToEndTests
+open SharpLsp.Sidecar.FSharp.Tests.FSharpResolvedReferenceTests
+
+/// `perimeter` at (3, 4) carries a doc comment; `fence` at (5, 4) is a float.
+let private loneSource =
+    String.Join(
+        "\n",
+        [ "module Lone.Shapes"
+          ""
+          "/// The perimeter of a square."
+          "let perimeter (side: float) = 4.0 * side"
+          ""
+          "let fence = perimeter 2.5"
+          "" ]
+    )
+
+/// A real project, outside the workspace the sidecar opened, compiling `Shapes.fs`
+/// with `properties` in its property group.
+let private writeProject (properties: string) =
+    let dir = NativePaths.Temp($"sharplsp-owning-{Guid.NewGuid():N}", "Lone")
+    Directory.CreateDirectory dir |> ignore
+
+    File.WriteAllText(
+        NativePaths.Resolve(dir, "Lone.fsproj"),
+        $"""<Project Sdk="Microsoft.NET.Sdk">
+  <PropertyGroup>
+{properties}
+  </PropertyGroup>
+  <ItemGroup>
+    <Compile Include="Shapes.fs" />
+  </ItemGroup>
+</Project>"""
+    )
+
+    let source = NativePaths.Resolve(dir, "Shapes.fs")
+    File.WriteAllText(source, loneSource)
+    dir, source
+
+let private writeLoneProject () =
+    writeProject
+        """    <TargetFramework>net10.0</TargetFramework>
+    <DisableImplicitFSharpCoreReference>true</DisableImplicitFSharpCoreReference>"""
+
+/// The hover at (`line`, `character`), polled until it answers or a minute passes:
+/// the owning project loads in the background, after the editor opens the file.
+let private hoverWithin (fixture: SidecarFixture) file line character =
+    task {
+        let clock = Stopwatch.StartNew()
+        let mutable answer: HoverResult option = None
+
+        while answer.IsNone && clock.Elapsed < TimeSpan.FromSeconds 60.0 do
+            let! response = fixture.Send("textDocument/hover", posPayload file line character)
+            Assert.Null(response.Error)
+
+            if response.Payload <> [| 0xC0uy |] then
+                answer <- Some(deserialize<HoverResult> response.Payload)
+            else
+                do! Task.Delay 250
+
+        return answer
+    }
+
+let private opened (fixture: SidecarFixture) file =
+    task {
+        let text = File.ReadAllText file
+        let payload = MessagePackSerializer.Serialize({ DidChangeRequest.FilePath = file; NewText = text })
+        let! response = fixture.Send("textDocument/didChange", payload)
+        Assert.Null(response.Error)
+    }
+
+[<Fact>]
+let ``a file outside the loaded workspace answers hover from the project that owns it`` () =
+    task {
+        let fixture = new SidecarFixture()
+        let lifetime = fixture :> IAsyncLifetime
+        let loneDir, shapes = writeLoneProject ()
+
+        try
+            do! lifetime.InitializeAsync()
+            do! opened fixture shapes
+
+            let! perimeter = hoverWithin fixture shapes 3 4
+            Assert.True(perimeter.IsSome, $"hover answers in {shapes}, which only Lone.fsproj compiles")
+            Assert.Contains("perimeter", perimeter.Value.Contents)
+            Assert.Contains("The perimeter of a square.", perimeter.Value.Contents)
+
+            let! fence = hoverWithin fixture shapes 5 4
+            Assert.True(fence.IsSome, "a second symbol answers from the same project")
+            Assert.Contains("float", fence.Value.Contents)
+
+            // The workspace the sidecar opened still answers: its project was never replaced.
+            let! add = hoverWithin fixture fixture.Src 6 4
+            Assert.True(add.IsSome, "the workspace's own file still answers")
+            Assert.Contains("Adds two numbers", add.Value.Contents)
+        finally
+            lifetime.DisposeAsync().GetAwaiter().GetResult()
+            try Directory.Delete(NativePaths.DirectoryOf loneDir, true) with _ -> ()
+    }
+
+/// fstoolkit's shape: several target frameworks, a netstandard one first, FSharp.Core
+/// and the netstandard reference pack from NuGet — restored into a packages folder of
+/// the project's own and resolved once, as any build leaves it, then emptied, as
+/// clearing the NuGet cache leaves a built project. The assets file and the build's
+/// assets cache still name every package; none is on disk, and MSBuild, trusting
+/// the cache, reports compiler arguments that reference none of them.
+let private writeEmptiedProject () =
+    let dir, source =
+        writeProject
+            """    <TargetFrameworks>netstandard2.1;net10.0</TargetFrameworks>
+    <RestorePackagesPath>$(MSBuildProjectDirectory)/packages</RestorePackagesPath>"""
+
+    let project = NativePaths.Resolve(dir, "Lone.fsproj")
+    restore project
+    FSharpDesignTimeTests.dotnet dir "msbuild Lone.fsproj -nologo -t:ResolvePackageAssets -p:TargetFramework=netstandard2.1"
+    Directory.Delete(NativePaths.Resolve(dir, "packages"), true)
+    dir, source
+
+/// [DIAG-RESTORE]: a project whose restored packages have left the disk is restored
+/// again before it loads, so the file still checks against FSharp.Core and netstandard.
+[<Fact>]
+let ``a file whose project lost its restored packages answers hover once they are restored`` () =
+    task {
+        let fixture = new SidecarFixture()
+        let lifetime = fixture :> IAsyncLifetime
+        let loneDir, shapes = writeEmptiedProject ()
+
+        try
+            do! lifetime.InitializeAsync()
+            do! opened fixture shapes
+
+            let! perimeter = hoverWithin fixture shapes 3 4
+            Assert.True(perimeter.IsSome, $"hover answers in {shapes} once its packages are back")
+            Assert.Contains("float -> float", perimeter.Value.Contents)
+            Assert.Contains("The perimeter of a square.", perimeter.Value.Contents)
+            Assert.True(Directory.Exists(NativePaths.Resolve(loneDir, "packages", "fsharp.core")), "FSharp.Core was restored")
+        finally
+            lifetime.DisposeAsync().GetAwaiter().GetResult()
+            try Directory.Delete(NativePaths.DirectoryOf loneDir, true) with _ -> ()
+    }
diff --git a/src/sidecars/SharpLsp.Sidecar.FSharp.Tests/FSharpResolvedReferenceTests.fs b/src/sidecars/SharpLsp.Sidecar.FSharp.Tests/FSharpResolvedReferenceTests.fs
index aac04a85..e9c932f7 100644
--- a/src/sidecars/SharpLsp.Sidecar.FSharp.Tests/FSharpResolvedReferenceTests.fs
+++ b/src/sidecars/SharpLsp.Sidecar.FSharp.Tests/FSharpResolvedReferenceTests.fs
@@ -8,7 +8,6 @@
 module SharpLsp.Sidecar.FSharp.Tests.FSharpResolvedReferenceTests
 
 open System
-open System.Diagnostics
 open System.IO
 open System.Threading
 open System.Xml.Linq
@@ -78,16 +77,8 @@ let private writeMultiTargeted root name (source: string) (references: string li
     writeTargeting root name "net48;net10.0" source references
 
 /// Restore `project` with the dotnet CLI; the test fails when restore does.
-let private restore (project: string) =
-    let info = ProcessStartInfo("dotnet", $"restore \"{project}\" --nologo -v q", RedirectStandardOutput = true)
-
-    match Process.Start info with
-    | null -> failwith "dotnet restore did not start"
-    | started ->
-        use proc = started
-        let output = proc.StandardOutput.ReadToEnd()
-        proc.WaitForExit()
-        Assert.True((proc.ExitCode = 0), $"dotnet restore failed: {output}")
+let internal restore (project: string) =
+    FSharpDesignTimeTests.dotnet (NativePaths.DirectoryOf project) $"restore \"{project}\" --nologo -v q"
 
 /// Lib and App — App referencing Lib, both `net48;net10.0` — restored, never built, loaded as one folder.
 let private openSolution () =
diff --git a/src/sidecars/SharpLsp.Sidecar.FSharp.Tests/FSharpSymbolsTests.fs b/src/sidecars/SharpLsp.Sidecar.FSharp.Tests/FSharpSymbolsTests.fs
index 6ae9c8f2..c1851e25 100644
--- a/src/sidecars/SharpLsp.Sidecar.FSharp.Tests/FSharpSymbolsTests.fs
+++ b/src/sidecars/SharpLsp.Sidecar.FSharp.Tests/FSharpSymbolsTests.fs
@@ -44,6 +44,55 @@ let ``documentSymbols returns top-level types and nested members`` () =
         Assert.Contains("Value", names)
     }
 
+/// A namespace of doc-commented declarations, the shape of the tutorial's fixture.
+let private documented =
+    String.concat
+        "\n"
+        [ "namespace Documented"
+          ""
+          "/// A geometric shape."
+          "type Shape ="
+          "    | Circle of radius: float"
+          ""
+          "/// Shapes and what they cover."
+          "module Geometry ="
+          "    /// The area of a shape."
+          "    let area (Circle r) = r * r"
+          "" ]
+
+/// Every symbol in a tree, top level and nested.
+let rec private allSymbols (items: FSharpSymbols.SymbolItem list) =
+    items |> List.collect (fun item -> item :: allSymbols item.Children)
+
+/// The text a symbol's selectionRange covers in `lines`.
+let private selected (lines: string[]) (item: FSharpSymbols.SymbolItem) =
+    Assert.Equal(item.SelStartLine, item.SelEndLine)
+    lines[item.SelStartLine].Substring(item.SelStartCharacter, item.SelEndCharacter - item.SelStartCharacter)
+
+/// LSP 3.17: selectionRange is "the range that should be selected and revealed when
+/// this symbol is being picked, e.g. the name of a function". A doc comment is not
+/// the name: an editor that reveals it, or hovers there, lands on `///`. [FS-DOCSYMBOL]
+[<Fact>]
+let ``documentSymbols selects each declaration's name, never its doc comment`` () =
+    task {
+        let file = NativePaths.Temp($"sharplsp-docsym-{System.Guid.NewGuid():N}.fs")
+        File.WriteAllText(file, documented)
+
+        try
+            let! symbols = FSharpSymbols.documentSymbols (FSharpWorkspace.create ()) file
+            let lines = documented.Split('\n')
+            let byName name = allSymbols symbols |> List.find (fun item -> item.Name = name)
+
+            Assert.Equal("Shape", selected lines (byName "Shape"))
+            Assert.Equal((3, 5), ((byName "Shape").SelStartLine, (byName "Shape").SelStartCharacter))
+            Assert.Equal("Geometry", selected lines (byName "Geometry"))
+            Assert.Equal("area", selected lines (byName "area"))
+            // The outer range still spans the declaration, so it contains the selection.
+            Assert.True((byName "Shape").StartLine <= 3 && (byName "Shape").EndLine >= 4)
+        finally
+            File.Delete file
+    }
+
 [<Fact>]
 let ``documentSymbols on a missing file returns empty`` () =
     task {
diff --git a/src/sidecars/SharpLsp.Sidecar.FSharp.Tests/SharpLsp.Sidecar.FSharp.Tests.fsproj b/src/sidecars/SharpLsp.Sidecar.FSharp.Tests/SharpLsp.Sidecar.FSharp.Tests.fsproj
index c1c206c1..ed6abf86 100644
--- a/src/sidecars/SharpLsp.Sidecar.FSharp.Tests/SharpLsp.Sidecar.FSharp.Tests.fsproj
+++ b/src/sidecars/SharpLsp.Sidecar.FSharp.Tests/SharpLsp.Sidecar.FSharp.Tests.fsproj
@@ -34,6 +34,7 @@
     <Compile Include="FSharpMultiProjectTests.fs" />
     <Compile Include="FSharpResolvedReferenceTests.fs" />
     <Compile Include="FSharpCSharpReferenceTests.fs" />
+    <Compile Include="FSharpOwningProjectTests.fs" />
   </ItemGroup>
 
   <ItemGroup>
diff --git a/src/sidecars/SharpLsp.Sidecar.FSharp/FSharpAssets.fs b/src/sidecars/SharpLsp.Sidecar.FSharp/FSharpAssets.fs
index e5902d4f..03a4cdad 100644
--- a/src/sidecars/SharpLsp.Sidecar.FSharp/FSharpAssets.fs
+++ b/src/sidecars/SharpLsp.Sidecar.FSharp/FSharpAssets.fs
@@ -123,3 +123,39 @@ let packageReferenceArgs (assemblies: PackageAssembly list) : string array =
     |> List.filter (fun assembly -> File.Exists assembly.Path)
     |> List.map (fun assembly -> $"-r:{assembly.Path}")
     |> List.toArray
+
+/// The folder, relative to a package root, of a `libraries` entry that is a package.
+let private packageFolder (library: JsonProperty) =
+    match tryProp library.Value "type", tryProp library.Value "path" with
+    | Some kind, Some path when kind.GetString() = "package" -> path.GetString() |> Option.ofObj
+    | _ -> None
+
+/// The packages an assets document names that none of its package folders holds.
+let private absentFrom (document: JsonDocument) =
+    let roots =
+        tryProp document.RootElement "packageFolders"
+        |> Option.map (fun folders -> folders.EnumerateObject() |> Seq.map _.Name |> List.ofSeq)
+        |> Option.defaultValue []
+
+    let onDisk (folder: string) = roots |> List.exists (fun root -> Directory.Exists(NativePaths.Resolve(root, folder)))
+
+    tryProp document.RootElement "libraries"
+    |> Option.map (fun libraries -> libraries.EnumerateObject() |> Seq.choose packageFolder |> Seq.filter (onDisk >> not) |> List.ofSeq)
+    |> Option.defaultValue []
+
+/// The restored packages of `fsprojPath` that have left the disk since it was restored,
+/// as clearing the NuGet cache leaves them: its assets file names them, no package folder
+/// holds them. None for a project never restored, or whose assets file cannot be read.
+/// [DIAG-RESTORE]
+let missingPackages (fsprojPath: string) : string list =
+    let path = assetsPath fsprojPath
+
+    if not (File.Exists path) then
+        []
+    else
+        try
+            use document = JsonDocument.Parse(File.ReadAllText path)
+            absentFrom document
+        with ex ->
+            Log.Debug(ex, "[F# Assets] assets parse failed")
+            []
diff --git a/src/sidecars/SharpLsp.Sidecar.FSharp/FSharpDesignTime.fs b/src/sidecars/SharpLsp.Sidecar.FSharp/FSharpDesignTime.fs
index e0b1d803..b92cac93 100644
--- a/src/sidecars/SharpLsp.Sidecar.FSharp/FSharpDesignTime.fs
+++ b/src/sidecars/SharpLsp.Sidecar.FSharp/FSharpDesignTime.fs
@@ -313,10 +313,26 @@ let private builtEntry checker fallback path (frameworks: string list) (built: s
 let private readsCSharp (fsprojPath: string) =
     FSharpProjectLoading.referencedProjects ".csproj" fsprojPath |> Seq.isEmpty |> not
 
-/// Load one project: from MSBuild when it targets several frameworks or reads a C#
-/// project, else by hand.
+/// Restore `path` again when packages it restored have left the disk: MSBuild trusts the
+/// build's assets cache, so it would report compiler arguments that reference none of
+/// them, and FCS cannot check a file without its core library. [DIAG-RESTORE]
+let private restoreWhenStale (path: string) ct =
+    task {
+        match FSharpAssets.missingPackages path with
+        | [] -> ()
+        | missing ->
+            Log.Information("F# project {Path} restores: {Count} restored packages are gone, {Package} first", path, missing.Length, missing.Head)
+
+            match! runMsbuild path [ "-t:Restore" ] ct with
+            | Ok _ -> Log.Information("F# project {Path} restored", path)
+            | Error reason -> Log.Warning("F# project {Path} could not restore: {Reason}", path, reason)
+    }
+
+/// Load one project, restored again first when its packages are gone: from MSBuild when
+/// it targets several frameworks or reads a C# project, else by hand.
 let loadEntry (checker: FSharpChecker) (fallback: string -> FSharpProjectOptions) (path: string) ct =
     task {
+        do! restoreWhenStale path ct
         let options = fallback path
         let readsCSharp = readsCSharp path
 
diff --git a/src/sidecars/SharpLsp.Sidecar.FSharp/FSharpOwningProject.fs b/src/sidecars/SharpLsp.Sidecar.FSharp/FSharpOwningProject.fs
new file mode 100644
index 00000000..f7c7fcb8
--- /dev/null
+++ b/src/sidecars/SharpLsp.Sidecar.FSharp/FSharpOwningProject.fs
@@ -0,0 +1,85 @@
+/// Loads the project that owns a file no loaded project compiles, beside the workspace's
+/// own, so a file opened from outside the solution still answers (GitHub #414).
+/// Implements [SHARPLSP-ARCHITECTURE-PROJECTS-FSHARP-OWNING].
+module SharpLsp.Sidecar.FSharp.FSharpOwningProject
+
+open System
+open System.Collections.Concurrent
+open System.IO
+open System.Runtime.CompilerServices
+open System.Threading
+open System.Threading.Tasks
+open Serilog
+open SharpLsp.Sidecar.Common
+open SharpLsp.Sidecar.FSharp.FSharpWorkspace
+
+/// The `.fsproj` files in `directory`, in name order; none when it cannot be read.
+let private projectsIn (directory: string) =
+    try
+        Directory.GetFiles(directory, "*.fsproj") |> Array.sort
+    with _ ->
+        [||]
+
+/// True when `project` lists `filePath` among its Compile items.
+let private compiles (filePath: string) (project: string) =
+    try
+        FSharpProjectLoading.parseFsprojSourceFiles project
+        |> Array.exists (fun source -> NativePaths.AreEqual(source, filePath))
+    with ex ->
+        Log.Debug(ex, "F# project {Project} could not be read", project)
+        false
+
+/// The nearest `.fsproj` at or above `filePath`'s directory that compiles it.
+let tryOwningProject (filePath: string) =
+    let rec search (directory: string) =
+        match projectsIn directory |> Array.tryFind (compiles filePath) with
+        | Some owner -> Some owner
+        | None ->
+            let parent = NativePaths.DirectoryOf directory
+            if String.IsNullOrEmpty parent || NativePaths.AreEqual(parent, directory) then None else search parent
+
+    search (NativePaths.DirectoryOf filePath)
+
+/// Load `owner` into `state` beside the workspace's projects, its references prepared.
+let private load (state: FSharpWorkspaceState) (owner: string) (ct: CancellationToken) =
+    task {
+        let! entry = FSharpDesignTime.loadEntry state.Checker (buildProjectOptions state) owner ct
+        let key = NativePaths.NormalizeFullPath owner
+        state.References[key] <- FSharpProjectGraph.fsharpReferences owner
+        state.Projects[key] <- entry
+
+        match FSharpDesignTime.builtFramework entry with
+        | Some framework -> do! prepareReferencedBuilds state entry framework ct
+        | None -> ()
+    }
+
+/// The owning-project loads in flight for each workspace, so a burst of edits loads once.
+let private pending = ConditionalWeakTable<FSharpWorkspaceState, ConcurrentDictionary<string, Task>>()
+
+let private needsOwner (state: FSharpWorkspaceState) (filePath: string) =
+    state.IsLoaded
+    && (NativePaths.HasExtension(filePath, ".fs") || NativePaths.HasExtension(filePath, ".fsi"))
+    && (projectOf state filePath).IsNone
+
+/// Load `owner` now, logging the outcome; never throws.
+let private adoptNow state (inFlight: ConcurrentDictionary<string, Task>) (owner: string) path : Task =
+    task {
+        try
+            try
+                do! load state owner CancellationToken.None
+                Log.Information("F# loaded {Project}, which owns {File}, beside the workspace", owner, path)
+            with ex ->
+                Log.Warning(ex, "F# could not load {Project}, which owns {File}", owner, path)
+        finally
+            inFlight.TryRemove(owner) |> ignore
+    }
+
+/// Load the project owning `filePath` in the background, when no loaded project compiles it.
+let adoptOwner (state: FSharpWorkspaceState) (filePath: string) =
+    let path = NativePaths.NormalizeFullPath filePath
+
+    match if needsOwner state path then tryOwningProject path else None with
+    | None -> Task.CompletedTask
+    | Some owner ->
+        let inFlight = pending.GetValue(state, fun _ -> ConcurrentDictionary(NativePaths.Comparer))
+        inFlight.GetOrAdd(owner, fun _ -> Task.Run(fun () -> adoptNow state inFlight owner path))
diff --git a/src/sidecars/SharpLsp.Sidecar.FSharp/FSharpSemanticNavigation.fs b/src/sidecars/SharpLsp.Sidecar.FSharp/FSharpSemanticNavigation.fs
index d900e693..91deefbb 100644
--- a/src/sidecars/SharpLsp.Sidecar.FSharp/FSharpSemanticNavigation.fs
+++ b/src/sidecars/SharpLsp.Sidecar.FSharp/FSharpSemanticNavigation.fs
@@ -36,7 +36,7 @@ let private definesOf (checkResults: FSharpCheckFileResults) =
 /// Every token of one line, and the lexer state the next line starts in. A CRLF
 /// line's `\r` is dropped first: left on a `#if` line, it keeps the lexer from
 /// entering the inactive branch at all.
-let private scanLine (tokenizer: FSharpSourceTokenizer) (text: string) state =
+let internal scanLine (tokenizer: FSharpSourceTokenizer) (text: string) state =
     let lineTokenizer = tokenizer.CreateLineTokenizer(text.TrimEnd '\r')
 
     let rec scan state tokens =
diff --git a/src/sidecars/SharpLsp.Sidecar.FSharp/FSharpSidecar.fs b/src/sidecars/SharpLsp.Sidecar.FSharp/FSharpSidecar.fs
index 76e08c8c..c80b3e80 100644
--- a/src/sidecars/SharpLsp.Sidecar.FSharp/FSharpSidecar.fs
+++ b/src/sidecars/SharpLsp.Sidecar.FSharp/FSharpSidecar.fs
@@ -85,6 +85,9 @@ type FSharpSidecar() =
                 try
                     let request = MessagePackSerializer.Deserialize<DidChangeRequest>(payload, cancellationToken = ct)
                     FSharpWorkspace.applyDidChange workspace request.FilePath request.NewText
+                    // A file no loaded project compiles loads its own project, in the
+                    // background: the host waits on this reply. [SHARPLSP-ARCHITECTURE-PROJECTS-FSHARP-OWNING]
+                    FSharpOwningProject.adoptOwner workspace request.FilePath |> ignore
                     return Helpers.serializeOk "ok" ct
                 with ex ->
                     return ByteResult.Failure(ex.Message)
diff --git a/src/sidecars/SharpLsp.Sidecar.FSharp/FSharpSymbols.fs b/src/sidecars/SharpLsp.Sidecar.FSharp/FSharpSymbols.fs
index 92086513..275966d5 100644
--- a/src/sidecars/SharpLsp.Sidecar.FSharp/FSharpSymbols.fs
+++ b/src/sidecars/SharpLsp.Sidecar.FSharp/FSharpSymbols.fs
@@ -7,6 +7,7 @@ module SharpLsp.Sidecar.FSharp.FSharpSymbols
 open FSharp.Compiler.CodeAnalysis
 open FSharp.Compiler.EditorServices
 open FSharp.Compiler.Text
+open FSharp.Compiler.Tokenization
 open Serilog
 
 /// A document symbol in the sidecar's neutral domain shape. Maps onto the wire
@@ -69,11 +70,40 @@ let private posMin (a: pos) (b: pos) : pos =
 let private posMax (a: pos) (b: pos) : pos =
     if a.Line > b.Line || (a.Line = b.Line && a.Column >= b.Column) then a else b
 
+/// FCS's own lexer, which finds a declaration's name among its tokens.
+let private tokenizer = FSharpSourceTokenizer([], None, None, None)
+
+/// True when `token` on `text`, at or after `fromColumn`, is the identifier `name`
+/// (a backticked name's ticks stripped).
+let private isName (text: string) (name: string) fromColumn (token: FSharpTokenInfo) =
+    token.CharClass = FSharpTokenCharKind.Identifier
+    && token.ColorClass <> FSharpTokenColorKind.InactiveCode
+    && token.LeftColumn >= fromColumn
+    && text.Substring(token.LeftColumn, token.RightColumn - token.LeftColumn + 1).Trim('`') = name
+
+/// The range of `name`'s identifier token inside `range`, lexed with FCS's lexer:
+/// FCS widens a type's or module's range over its doc comment and attributes, and
+/// LSP's selectionRange is the name alone. None when no identifier token spells it.
+let private nameRange (lines: string[]) (name: string) (range: range) =
+    let rec search line fromColumn state =
+        if line >= min lines.Length range.EndLine then
+            None
+        else
+            let tokens, next = FSharpSemanticNavigation.scanLine tokenizer lines[line] state
+
+            match tokens |> List.tryFind (isName lines[line] name fromColumn) with
+            | Some token ->
+                let at column = Position.mkPos (line + 1) column
+                Some(Range.mkRange range.FileName (at token.LeftColumn) (at (token.RightColumn + 1)))
+            | None -> search (line + 1) 0 next
+
+    search (range.StartLine - 1) range.StartColumn FSharpTokenizerLexState.Initial
+
 /// Build a SymbolItem from a navigation item and its already-mapped children.
 /// The outer range is the union of the identifier range and the body range so
 /// it always contains the selection (LSP requires selectionRange ⊆ range).
-let private toItem (children: SymbolItem list) (nav: NavigationItem) : SymbolItem =
-    let ident = nav.Range
+let private toItem (lines: string[]) (children: SymbolItem list) (nav: NavigationItem) : SymbolItem =
+    let ident = nameRange lines nav.LogicalName nav.Range |> Option.defaultValue nav.Range
     let body = nav.BodyRange
     let outerStart = posMin ident.Start body.Start
     let outerEnd = posMax ident.End body.End
@@ -90,9 +120,9 @@ let private toItem (children: SymbolItem list) (nav: NavigationItem) : SymbolIte
       Children = children }
 
 /// Map one top-level declaration (and its nested members) to a SymbolItem tree.
-let private toTopLevel (decl: NavigationTopLevelDeclaration) : SymbolItem =
-    let children = decl.Nested |> Array.map (toItem []) |> Array.toList
-    toItem children decl.Declaration
+let private toTopLevel lines (decl: NavigationTopLevelDeclaration) : SymbolItem =
+    let children = decl.Nested |> Array.map (toItem lines []) |> Array.toList
+    toItem lines children decl.Declaration
 
 /// The parsing options of the project that compiles the file — its defines decide
 /// which `#if` branch outlines — or the defaults when no project is loaded.
@@ -112,7 +142,8 @@ let documentSymbols (state: FSharpWorkspace.FSharpWorkspaceState) (filePath: str
             let options = parsingOptions state filePath
             let! parseResults = state.Checker.ParseFile(filePath, sourceText, options)
             let nav = parseResults.GetNavigationItems()
-            return nav.Declarations |> Array.map toTopLevel |> Array.toList
+            let lines = source.Split('\n')
+            return nav.Declarations |> Array.map (toTopLevel lines) |> Array.toList
         with ex ->
             Log.Debug(ex, "[F# DocumentSymbols] failed")
             return []
diff --git a/src/sidecars/SharpLsp.Sidecar.FSharp/SharpLsp.Sidecar.FSharp.fsproj b/src/sidecars/SharpLsp.Sidecar.FSharp/SharpLsp.Sidecar.FSharp.fsproj
index de33a626..9a1e005e 100644
--- a/src/sidecars/SharpLsp.Sidecar.FSharp/SharpLsp.Sidecar.FSharp.fsproj
+++ b/src/sidecars/SharpLsp.Sidecar.FSharp/SharpLsp.Sidecar.FSharp.fsproj
@@ -55,6 +55,7 @@
     <Compile Include="FSharpProjectGraph.fs" />
     <Compile Include="FSharpSemanticNavigation.fs" />
     <Compile Include="FSharpWorkspace.fs" />
+    <Compile Include="FSharpOwningProject.fs" />
     <Compile Include="FSharpTargetFrameworks.fs" />
     <Compile Include="FSharpPackages.fs" />
     <Compile Include="FSharpReferences.fs" />
diff --git a/src/website/eleventy.config.js b/src/website/eleventy.config.js
index b3f914d3..ba5539cd 100644
--- a/src/website/eleventy.config.js
+++ b/src/website/eleventy.config.js
@@ -5,7 +5,7 @@ import markdownIt from "markdown-it";
 import { existsSync, lstatSync, readdirSync, readFileSync, unlinkSync, writeFileSync } from "fs";
 import { dirname, join } from "path";
 import { fileURLToPath } from "url";
-import { videoFigure, videoPlayer } from "./video-figure.js";
+import { chapterList, videoFigure, videoPlayer } from "./video-figure.js";
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 const pluginLayouts = join(__dirname, "node_modules/eleventy-plugin-techdoc/templates/layouts");
@@ -143,6 +143,10 @@ export default function (eleventyConfig) {
   });
   // [WEB-DESIGN-MEDIA-DISCOVERY] The bare player a video's embed page is made of.
   eleventyConfig.addShortcode("videoPlayer", (id, lang) => videoPlayer(id, lang));
+  // [WEB-DESIGN-MEDIA-CHAPTERS] `{% chapters "<id>" %}` lists a chaptered film's steps.
+  eleventyConfig.addShortcode("chapters", function (id) {
+    return chapterList(id, this.ctx?.lang ?? "en");
+  });
 
   eleventyConfig.addPassthroughCopy("src/assets");
   eleventyConfig.addPassthroughCopy("src/favicon.ico");
diff --git a/src/website/src/_data/i18n.json b/src/website/src/_data/i18n.json
index 526d84d0..fffd9c0c 100644
--- a/src/website/src/_data/i18n.json
+++ b/src/website/src/_data/i18n.json
@@ -143,6 +143,7 @@
     "docs": {
       "title": "Documentation",
       "gettingStarted": "Getting Started",
+      "tutorial": "Tutorial",
       "fsharp": "F# Language Support",
       "blazor": "Blazor & Razor",
       "architecture": "Architecture",
@@ -346,6 +347,7 @@
     "docs": {
       "title": "文档",
       "gettingStarted": "快速入门",
+      "tutorial": "教程",
       "fsharp": "F# 语言支持",
       "blazor": "Blazor 与 Razor",
       "architecture": "架构",
@@ -549,6 +551,7 @@
     "docs": {
       "title": "ドキュメント",
       "gettingStarted": "はじめに",
+      "tutorial": "チュートリアル",
       "fsharp": "F# 言語サポート",
       "blazor": "Blazor と Razor",
       "architecture": "アーキテクチャ",
diff --git a/src/website/src/_data/navigation.json b/src/website/src/_data/navigation.json
index ce40a3dd..9d9bb095 100644
--- a/src/website/src/_data/navigation.json
+++ b/src/website/src/_data/navigation.json
@@ -5,7 +5,7 @@
     { "text": "GitHub", "url": "https://github.com/Nimblesite/SharpLsp", "external": true }
   ],
   "docs": [
-    { "group": "setUp", "pages": { "": "gettingStarted", "editors/": "editorSetup", "zed/": "zed", "configuration/": "configuration" } },
+    { "group": "setUp", "pages": { "": "gettingStarted", "tutorial/": "tutorial", "editors/": "editorSetup", "zed/": "zed", "configuration/": "configuration" } },
     {
       "group": "writeCode",
       "pages": {
diff --git a/src/website/src/_data/videos.json b/src/website/src/_data/videos.json
index c0989096..02531ef4 100644
--- a/src/website/src/_data/videos.json
+++ b/src/website/src/_data/videos.json
@@ -156,13 +156,37 @@
       }
     }
   },
+  "vscode-tutorial": {
+    "page": "/docs/tutorial/",
+    "encodings": ["mp4", "webm"],
+    "width": 1920,
+    "height": 1200,
+    "duration": "PT3M49S",
+    "uploadDate": "2026-10-20T22:20:13+11:00",
+    "chapters": true,
+    "captions": ["en", "ja", "zh"],
+    "text": {
+      "en": {
+        "label": "The SharpLsp tutorial in VS Code: open an F# and a C# file, hover, complete, go to a definition, find references, fix code with a code action, and open the Solution Explorer",
+        "caption": "Narrated, with original music and captions. Every step of the interactive tutorial, F# first, then C#, recorded in VS Code on the Shop demo. One chapter per step; the tutorial panel in VS Code plays each step's chapter."
+      },
+      "zh": {
+        "label": "VS Code 中的 SharpLsp 教程：打开 F# 和 C# 文件、悬停、补全、转到定义、查找引用、用代码操作修复代码，以及打开解决方案资源管理器",
+        "caption": "带旁白、原创配乐和字幕。交互式教程的每一步，先 F# 后 C#，在 VS Code 中基于 Shop 演示录制。每一步一个章节；VS Code 中的教程面板会播放当前步骤的章节。"
+      },
+      "ja": {
+        "label": "VS Code の SharpLsp チュートリアル：F# と C# のファイルを開き、ホバー、補完、定義へ移動、参照の検索、コードアクションでの修正、ソリューションエクスプローラーを開く",
+        "caption": "ナレーション、オリジナル音楽、字幕付き。インタラクティブ チュートリアルの全ステップを、F#、次に C# の順に、VS Code で Shop デモを使って収録しました。ステップごとに 1 チャプターで、VS Code のチュートリアル パネルが現在のステップのチャプターを再生します。"
+      }
+    }
+  },
   "getting-started": {
     "page": "/docs/",
     "encodings": ["mp4", "webm"],
     "width": 1920,
     "height": 1200,
-    "duration": "PT1M4S",
-    "uploadDate": "2026-10-18T23:29:29+11:00",
+    "duration": "PT1M5S",
+    "uploadDate": "2026-10-20T19:40:00+11:00",
     "captions": ["en", "ja", "zh"],
     "text": {
       "en": {
@@ -230,8 +254,8 @@
     "encodings": ["mp4", "webm"],
     "width": 1920,
     "height": 1200,
-    "duration": "PT1M53S",
-    "uploadDate": "2026-10-18T22:53:05+11:00",
+    "duration": "PT1M55S",
+    "uploadDate": "2026-10-20T19:40:00+11:00",
     "captions": ["en", "ja", "zh"],
     "text": {
       "en": {
@@ -254,7 +278,7 @@
     "width": 1920,
     "height": 1200,
     "duration": "PT2M38S",
-    "uploadDate": "2026-10-20T14:13:00+11:00",
+    "uploadDate": "2026-10-20T18:39:00+11:00",
     "captions": ["en", "ja", "zh"],
     "text": {
       "en": {
@@ -276,8 +300,8 @@
     "encodings": ["mp4", "webm"],
     "width": 1920,
     "height": 1200,
-    "duration": "PT1M9S",
-    "uploadDate": "2026-10-18T22:59:43+11:00",
+    "duration": "PT1M13S",
+    "uploadDate": "2026-10-20T19:40:00+11:00",
     "captions": ["en", "ja", "zh"],
     "text": {
       "en": {
@@ -299,8 +323,8 @@
     "encodings": ["mp4", "webm"],
     "width": 1920,
     "height": 1200,
-    "duration": "PT1M15S",
-    "uploadDate": "2026-10-18T23:16:35+11:00",
+    "duration": "PT1M17S",
+    "uploadDate": "2026-10-20T19:40:00+11:00",
     "captions": ["en", "ja", "zh"],
     "text": {
       "en": {
@@ -322,8 +346,8 @@
     "encodings": ["mp4", "webm"],
     "width": 1920,
     "height": 1200,
-    "duration": "PT1M0S",
-    "uploadDate": "2026-10-18T23:57:10+11:00",
+    "duration": "PT1M1S",
+    "uploadDate": "2026-10-20T20:05:00+11:00",
     "captions": ["en", "ja", "zh"],
     "text": {
       "en": {
@@ -363,6 +387,29 @@
       }
     }
   },
+  "refactoring-lesson": {
+    "page": "/docs/refactoring/",
+    "encodings": ["mp4", "webm"],
+    "width": 1920,
+    "height": 1080,
+    "duration": "PT3M49S",
+    "uploadDate": "2026-10-20T18:42:00+11:00",
+    "captions": ["en", "ja", "zh"],
+    "text": {
+      "en": {
+        "label": "Lesson: code actions in SharpLsp, from Cmd+. to F# quick fixes, generated match cases, rename across files, C# generate method and add using",
+        "caption": "A narrated lesson with original music and captions. Slides teach each step; every editor clip is real footage from the refactoring walkthrough, recorded in VS Code. Fast-forwarded stretches are marked on screen."
+      },
+      "zh": {
+        "label": "课程：SharpLsp 中的代码操作，从 Cmd+. 到 F# 快速修复、生成 match 用例、跨文件重命名、C# 生成方法和添加 using",
+        "caption": "带旁白、原创配乐和字幕的课程。幻灯片讲解每一步；所有编辑器片段都是重构演示中在 VS Code 里录制的真实画面。快进的片段在画面上有标注。"
+      },
+      "ja": {
+        "label": "レッスン：SharpLsp のコードアクション。Cmd+. から F# のクイックフィックス、match ケースの生成、ファイルをまたぐ名前の変更、C# のメソッド生成と using の追加まで",
+        "caption": "ナレーション、オリジナル音楽、字幕付きのレッスン。スライドで各ステップを解説し、エディターの映像はすべてリファクタリングのウォークスルーで VS Code から収録した実際の映像です。早送りの部分は画面上に表示されます。"
+      }
+    }
+  },
   "refactoring": {
     "page": "/docs/refactoring/",
     "encodings": ["mp4", "webm"],
diff --git a/src/website/src/assets/videos/blazor-card.jpg b/src/website/src/assets/videos/blazor-card.jpg
index c862d86a..57f1ed9d 100644
Binary files a/src/website/src/assets/videos/blazor-card.jpg and b/src/website/src/assets/videos/blazor-card.jpg differ
diff --git a/src/website/src/assets/videos/blazor-poster.webp b/src/website/src/assets/videos/blazor-poster.webp
index 899f3dce..634ce346 100644
Binary files a/src/website/src/assets/videos/blazor-poster.webp and b/src/website/src/assets/videos/blazor-poster.webp differ
diff --git a/src/website/src/assets/videos/blazor.en.vtt b/src/website/src/assets/videos/blazor.en.vtt
index 1e4af6e3..1d1dc9e0 100644
--- a/src/website/src/assets/videos/blazor.en.vtt
+++ b/src/website/src/assets/videos/blazor.en.vtt
@@ -4,23 +4,23 @@ WEBVTT
 [Gentle music]
 Blazor components get the same C# engine as the rest of your code. Hover any expression in the markup, and Roslyn answers, with your XML docs.
 
-00:16.617 --> 00:25.704
+00:16.883 --> 00:25.971
 Completion works inside Razor expressions too. The members come from Roslyn, and each edit lands in the Razor file, never in generated code.
 
-00:37.150 --> 00:46.068
+00:37.517 --> 00:46.435
 The markup around it is still HTML. Element names and HTML hovers come from VS Code's own HTML service.
 
-01:00.150 --> 01:06.498
+01:00.083 --> 01:06.431
 Make a mistake, and the error shows on the Razor line that caused it, in the editor and in the Problems panel.
 
-01:24.983 --> 01:34.729
+01:25.150 --> 01:34.896
 Go to Definition jumps from the markup into the code block. Find All References lists every use in the Razor file, with the generated scaffolding left out.
 
-01:43.350 --> 01:47.468
+01:43.417 --> 01:47.535
 Rename a field in the code block, and every use in the markup follows.
 
-02:00.283 --> 02:06.736
+02:00.417 --> 02:06.869
 From C#, Go to Definition on a component opens its Razor file, not a generated class.
 
-02:19.350 --> 02:25.148
+02:19.583 --> 02:25.381
 Rename a tag, and its closing tag changes with it. Elements and code blocks fold, too.
diff --git a/src/website/src/assets/videos/blazor.ja.vtt b/src/website/src/assets/videos/blazor.ja.vtt
index 9948532a..5a809fe9 100644
--- a/src/website/src/assets/videos/blazor.ja.vtt
+++ b/src/website/src/assets/videos/blazor.ja.vtt
@@ -4,23 +4,23 @@ WEBVTT
 [穏やかな音楽]
 Blazor のコンポーネントにも、ほかのコードと同じ C# エンジンが働きます。マークアップのどの式にホバーしても、Roslyn が XML ドキュメント付きで答えます。
 
-00:16.617 --> 00:25.704
+00:16.883 --> 00:25.971
 補完は Razor の式の中でも動きます。メンバーは Roslyn から届き、編集はすべて、生成されたコードではなく Razor ファイルに反映されます。
 
-00:37.150 --> 00:46.068
+00:37.517 --> 00:46.435
 その周りのマークアップは HTML のままです。要素名と HTML のホバーは、VS Code 自身の HTML サービスが提供します。
 
-01:00.150 --> 01:06.498
+01:00.083 --> 01:06.431
 間違えると、エラーは原因となった Razor の行に表示されます。エディターでも、問題パネルでも同じです。
 
-01:24.983 --> 01:34.729
+01:25.150 --> 01:34.896
 定義へ移動すると、マークアップからコードブロックへジャンプします。「すべての参照を検索」は、Razor ファイル内の使用箇所をすべて一覧にし、生成された足場のコードは含めません。
 
-01:43.350 --> 01:47.468
+01:43.417 --> 01:47.535
 コードブロックのフィールド名を変更すると、マークアップ内の使用箇所もすべて追従します。
 
-02:00.283 --> 02:06.736
+02:00.417 --> 02:06.869
 C# からコンポーネントの定義へ移動すると、生成されたクラスではなく、その Razor ファイルが開きます。
 
-02:19.350 --> 02:25.148
+02:19.583 --> 02:25.381
 タグ名を変えると、閉じタグも一緒に変わります。要素とコードブロックは折りたたむこともできます。
diff --git a/src/website/src/assets/videos/blazor.mp4 b/src/website/src/assets/videos/blazor.mp4
index a4028c36..2149bb4e 100644
--- a/src/website/src/assets/videos/blazor.mp4
+++ b/src/website/src/assets/videos/blazor.mp4
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:cf50d70b13336bd58f650de4bc96c6dbc6f1fd5f7c52578874e1c166f2441fcd
-size 6187192
+oid sha256:6fad8ff93d029e7f219430872d3a3449b925898808b611509ae38a0aba0fac88
+size 13763312
diff --git a/src/website/src/assets/videos/blazor.webm b/src/website/src/assets/videos/blazor.webm
index 9a86030c..c7e31f23 100644
--- a/src/website/src/assets/videos/blazor.webm
+++ b/src/website/src/assets/videos/blazor.webm
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:1b145b9bfbf82d5196b4a3d1aab728f79005eb42d4dbe75c069bafa56b68ae45
-size 6844296
+oid sha256:399717819a100d709bc9620a41334fa80a6137eb23ae5517e4cc936deeabe99c
+size 13048098
diff --git a/src/website/src/assets/videos/blazor.zh.vtt b/src/website/src/assets/videos/blazor.zh.vtt
index 6958f844..55dbfd39 100644
--- a/src/website/src/assets/videos/blazor.zh.vtt
+++ b/src/website/src/assets/videos/blazor.zh.vtt
@@ -4,23 +4,23 @@ WEBVTT
 [舒缓的音乐]
 Blazor 组件和你的其他代码使用同一个 C# 引擎。在标记中悬停任意表达式，Roslyn 就会显示它的信息，并附上你的 XML 文档。
 
-00:16.617 --> 00:25.704
+00:16.883 --> 00:25.971
 补全在 Razor 表达式中同样可用。成员来自 Roslyn，每次编辑都落在 Razor 文件里，绝不会写进生成的代码。
 
-00:37.150 --> 00:46.068
+00:37.517 --> 00:46.435
 周围的标记依然是 HTML。元素名称和 HTML 悬停信息来自 VS Code 自带的 HTML 服务。
 
-01:00.150 --> 01:06.498
+01:00.083 --> 01:06.431
 一旦写错，错误就会显示在引起它的那一行 Razor 代码上，编辑器和问题面板里都能看到。
 
-01:24.983 --> 01:34.729
+01:25.150 --> 01:34.896
 转到定义会从标记跳进代码块。查找所有引用会列出 Razor 文件中的每一处用法，生成的脚手架代码不会混进来。
 
-01:43.350 --> 01:47.468
+01:43.417 --> 01:47.535
 在代码块里重命名一个字段，标记中的每一处用法都会随之更新。
 
-02:00.283 --> 02:06.736
+02:00.417 --> 02:06.869
 在 C# 中对组件转到定义，打开的是它的 Razor 文件，而不是生成的类。
 
-02:19.350 --> 02:25.148
+02:19.583 --> 02:25.381
 修改一个标签的名称，它的结束标签也会一起改变。元素和代码块同样可以折叠。
diff --git a/src/website/src/assets/videos/code-completions-card.jpg b/src/website/src/assets/videos/code-completions-card.jpg
index cadc886c..4d073a3c 100644
Binary files a/src/website/src/assets/videos/code-completions-card.jpg and b/src/website/src/assets/videos/code-completions-card.jpg differ
diff --git a/src/website/src/assets/videos/code-completions-poster.webp b/src/website/src/assets/videos/code-completions-poster.webp
index 2983ee46..1f857845 100644
Binary files a/src/website/src/assets/videos/code-completions-poster.webp and b/src/website/src/assets/videos/code-completions-poster.webp differ
diff --git a/src/website/src/assets/videos/code-completions.chapters.vtt b/src/website/src/assets/videos/code-completions.chapters.vtt
new file mode 100644
index 00000000..2cab5fb7
--- /dev/null
+++ b/src/website/src/assets/videos/code-completions.chapters.vtt
@@ -0,0 +1,9 @@
+WEBVTT
+
+FSharp.Completion
+00:00.000 --> 00:23.767
+F#: list functions after a dot, then the record's fields
+
+CSharp.Completion
+00:23.767 --> 01:12.867
+C#: Roslyn completion, member by member
diff --git a/src/website/src/assets/videos/code-completions.en.vtt b/src/website/src/assets/videos/code-completions.en.vtt
index 9d0a30a8..32969320 100644
--- a/src/website/src/assets/videos/code-completions.en.vtt
+++ b/src/website/src/assets/videos/code-completions.en.vtt
@@ -4,8 +4,8 @@ WEBVTT
 [Gentle music]
 SharpLsp completes F# with the F# compiler itself. Type List dot for every list function, narrow it to minBy, and inside the lambda, the record's fields are right there.
 
-00:22.017 --> 00:32.605
+00:24.117 --> 00:34.705
 In C#, completion comes straight from Roslyn: LINQ's MinBy, then the product's properties. Accepting an item replaces the word you're typing, never appends to it.
 
-00:44.983 --> 00:54.218
+00:48.650 --> 00:57.885
 Need a type from a namespace you haven't imported? Press Control Space, accept it, and SharpLsp adds the using directive at the top of the file.
diff --git a/src/website/src/assets/videos/code-completions.ja.vtt b/src/website/src/assets/videos/code-completions.ja.vtt
index aed508e6..2d46d6a4 100644
--- a/src/website/src/assets/videos/code-completions.ja.vtt
+++ b/src/website/src/assets/videos/code-completions.ja.vtt
@@ -4,8 +4,8 @@ WEBVTT
 [穏やかな音楽]
 SharpLsp は F# コンパイラーそのものを使って F# を補完します。List. と打てばリスト関数がすべて並び、minBy まで絞り込めます。ラムダの中では、レコードのフィールドがすぐに出てきます。
 
-00:22.017 --> 00:32.605
+00:24.117 --> 00:34.705
 C# では、補完は Roslyn から直接届きます。LINQ の MinBy、そして製品のプロパティ。項目を確定すると、入力中の単語が置き換わり、後ろに付け足されることはありません。
 
-00:44.983 --> 00:54.218
+00:48.650 --> 00:57.885
 まだインポートしていない名前空間の型が必要ですか？Control+Space を押して確定すれば、SharpLsp がファイルの先頭に using ディレクティブを追加します。
diff --git a/src/website/src/assets/videos/code-completions.mp4 b/src/website/src/assets/videos/code-completions.mp4
index 1e566286..51c68a2e 100644
--- a/src/website/src/assets/videos/code-completions.mp4
+++ b/src/website/src/assets/videos/code-completions.mp4
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:3f58700a5e74195485809fff22e9d8944efc33476ebcb99780fcccee3363a3e8
-size 3523220
+oid sha256:dd74499e5efd690312d58e34c8781a061bd9c926b14f77d7335ac1266353be47
+size 8928300
diff --git a/src/website/src/assets/videos/code-completions.webm b/src/website/src/assets/videos/code-completions.webm
index 724ea923..8f0ce650 100644
--- a/src/website/src/assets/videos/code-completions.webm
+++ b/src/website/src/assets/videos/code-completions.webm
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:49d236cdd99c345bbfe5cc0edd015dcb395b23ab97b6833458913e2741735c9f
-size 4058295
+oid sha256:b345349c895b73a6d74dc2f6602c5627951a75f5c040734b2cc1ef07ea26f167
+size 9052868
diff --git a/src/website/src/assets/videos/code-completions.zh.vtt b/src/website/src/assets/videos/code-completions.zh.vtt
index 8f65f4c0..0e44c481 100644
--- a/src/website/src/assets/videos/code-completions.zh.vtt
+++ b/src/website/src/assets/videos/code-completions.zh.vtt
@@ -4,8 +4,8 @@ WEBVTT
 [舒缓的音乐]
 SharpLsp 直接用 F# 编译器来补全 F#。输入 List. 就能看到所有列表函数，缩小到 minBy；在 lambda 里，记录的字段就在眼前。
 
-00:22.017 --> 00:32.605
+00:24.117 --> 00:34.705
 在 C# 中，补全直接来自 Roslyn：先是 LINQ 的 MinBy，然后是商品的属性。接受某一项会替换你正在输入的单词，而不是追加在后面。
 
-00:44.983 --> 00:54.218
+00:48.650 --> 00:57.885
 需要一个尚未导入的命名空间里的类型？按 Control+Space 并接受，SharpLsp 就会在文件顶部加上 using 指令。
diff --git a/src/website/src/assets/videos/fsharp-language-card.jpg b/src/website/src/assets/videos/fsharp-language-card.jpg
index b33ba56f..67f7a6fb 100644
Binary files a/src/website/src/assets/videos/fsharp-language-card.jpg and b/src/website/src/assets/videos/fsharp-language-card.jpg differ
diff --git a/src/website/src/assets/videos/fsharp-language-poster.webp b/src/website/src/assets/videos/fsharp-language-poster.webp
index 51eb019f..869fddbf 100644
Binary files a/src/website/src/assets/videos/fsharp-language-poster.webp and b/src/website/src/assets/videos/fsharp-language-poster.webp differ
diff --git a/src/website/src/assets/videos/fsharp-language.chapters.vtt b/src/website/src/assets/videos/fsharp-language.chapters.vtt
new file mode 100644
index 00000000..ae36e587
--- /dev/null
+++ b/src/website/src/assets/videos/fsharp-language.chapters.vtt
@@ -0,0 +1,21 @@
+WEBVTT
+
+FSharp.Hover
+00:00.000 --> 00:16.000
+Hover any F# symbol: its signature, from the F# compiler
+
+FSharp.Completion
+00:16.000 --> 00:39.367
+Completion knows your types: List functions, then record fields
+
+FSharp.Definition
+00:39.367 --> 00:47.333
+Go to Definition (F12) crosses files
+
+FSharp.References
+00:47.333 --> 00:58.600
+Find All References (Shift+F12), project-wide
+
+FSharp.CodeAction
+00:58.600 --> 01:11.433
+Quick fixes write code: generate the missing union case
diff --git a/src/website/src/assets/videos/fsharp-language.en.vtt b/src/website/src/assets/videos/fsharp-language.en.vtt
index e82b28b6..03e2e4a7 100644
--- a/src/website/src/assets/videos/fsharp-language.en.vtt
+++ b/src/website/src/assets/videos/fsharp-language.en.vtt
@@ -4,20 +4,20 @@ WEBVTT
 [Gentle music]
 This is F# in VS Code with SharpLsp. Hover any symbol, and the F# compiler tells you exactly what it is: the parser, the basket picker, the pricing.
 
-00:16.683 --> 00:26.025
+00:16.350 --> 00:25.691
 Completion knows your types. Type List dot for every list function, and narrow it down to minBy. Inside the lambda, the record's fields are right there.
 
-00:40.717 --> 00:45.265
+00:39.717 --> 00:44.265
 Press F12 on a type to jump to its definition, even in another file.
 
-00:48.550 --> 00:54.600
+00:47.683 --> 00:53.733
 Shift F12 finds every reference across the project, including code you haven't saved yet.
 
-00:59.817 --> 01:07.702
+00:58.950 --> 01:06.836
 Quick fixes write code for you. This match misses a case. Press Command dot, and SharpLsp generates the missing case.
 
-01:11.583 --> 01:20.580
+01:11.783 --> 01:20.780
 Rename a function with F2, and SharpLsp renames it across the whole project. Program.fs already calls it by its new name.
 
-01:30.917 --> 01:40.832
+01:33.050 --> 01:42.966
 And to try an idea, send code to F# Interactive and run it on the spot. That's F# in SharpLsp. First class, free, and open source.
diff --git a/src/website/src/assets/videos/fsharp-language.ja.vtt b/src/website/src/assets/videos/fsharp-language.ja.vtt
index 50f05aa3..ae81807e 100644
--- a/src/website/src/assets/videos/fsharp-language.ja.vtt
+++ b/src/website/src/assets/videos/fsharp-language.ja.vtt
@@ -4,20 +4,20 @@ WEBVTT
 [穏やかな音楽]
 これは SharpLsp を入れた VS Code の F# です。シンボルにホバーすると、F# コンパイラーがその正体を正確に教えてくれます。パーサー、バスケットの選択、価格計算。
 
-00:16.683 --> 00:26.025
+00:16.350 --> 00:25.691
 補完は型を理解しています。List. と打てばリスト関数がすべて並び、minBy まで絞り込めます。ラムダの中では、レコードのフィールドがすぐに出てきます。
 
-00:40.717 --> 00:45.265
+00:39.717 --> 00:44.265
 型の上で F12 を押すと、別のファイルにあっても定義へジャンプします。
 
-00:48.550 --> 00:54.600
+00:47.683 --> 00:53.733
 Shift+F12 で、まだ保存していないコードも含めて、プロジェクト全体の参照をすべて見つけます。
 
-00:59.817 --> 01:07.702
+00:58.950 --> 01:06.836
 クイックフィックスがコードを書いてくれます。この match にはケースが足りません。Command+. を押すと、SharpLsp が足りないケースを生成します。
 
-01:11.583 --> 01:20.580
+01:11.783 --> 01:20.780
 F2 で関数の名前を変えると、SharpLsp がプロジェクト全体で名前を変えます。Program.fs はもう新しい名前で呼び出しています。
 
-01:30.917 --> 01:40.832
+01:33.050 --> 01:42.966
 アイデアを試したいときは、コードを F# Interactive に送ってその場で実行できます。これが SharpLsp の F# です。ファーストクラスで、無料、そしてオープンソースです。
diff --git a/src/website/src/assets/videos/fsharp-language.mp4 b/src/website/src/assets/videos/fsharp-language.mp4
index 905d8f6b..dde9d9ea 100644
--- a/src/website/src/assets/videos/fsharp-language.mp4
+++ b/src/website/src/assets/videos/fsharp-language.mp4
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:4363520c1f856b889b312af62371e6862d1b9710067654dada59c382dc602641
-size 5216121
+oid sha256:fa20d369b62c4c678c1acf27dfbb326492228d338771c49a9b19c051aa7be7a9
+size 12427922
diff --git a/src/website/src/assets/videos/fsharp-language.webm b/src/website/src/assets/videos/fsharp-language.webm
index c1bd59de..6e12977a 100644
--- a/src/website/src/assets/videos/fsharp-language.webm
+++ b/src/website/src/assets/videos/fsharp-language.webm
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:0ae28cbdc41c326b3297a9d43662e05aab9abc1cb013530224739680dc4c01a6
-size 5787457
+oid sha256:dd5dc1028f1d3aa1c2127392b1874ec3992df26e28d47f51d5a85d5765b57726
+size 12307322
diff --git a/src/website/src/assets/videos/fsharp-language.zh.vtt b/src/website/src/assets/videos/fsharp-language.zh.vtt
index 1a32bc75..95144e7b 100644
--- a/src/website/src/assets/videos/fsharp-language.zh.vtt
+++ b/src/website/src/assets/videos/fsharp-language.zh.vtt
@@ -4,20 +4,20 @@ WEBVTT
 [舒缓的音乐]
 这是装有 SharpLsp 的 VS Code 中的 F#。将鼠标悬停在任意符号上，F# 编译器会准确告诉你它是什么：解析器、购物篮挑选、价格计算。
 
-00:16.683 --> 00:26.025
+00:16.350 --> 00:25.691
 补全了解你的类型。输入 List. 就能看到所有列表函数，再缩小到 minBy。在 lambda 里，记录的字段就在眼前。
 
-00:40.717 --> 00:45.265
+00:39.717 --> 00:44.265
 在类型上按 F12，即使它在另一个文件里，也能跳转到定义。
 
-00:48.550 --> 00:54.600
+00:47.683 --> 00:53.733
 Shift+F12 会找出整个项目中的所有引用，包括你还没保存的代码。
 
-00:59.817 --> 01:07.702
+00:58.950 --> 01:06.836
 快速修复会替你写代码。这个 match 漏了一个分支。按 Command+.，SharpLsp 就会生成缺失的分支。
 
-01:11.583 --> 01:20.580
+01:11.783 --> 01:20.780
 用 F2 重命名一个函数，SharpLsp 会在整个项目中重命名它。Program.fs 已经在用新名字调用它了。
 
-01:30.917 --> 01:40.832
+01:33.050 --> 01:42.966
 想试试某个想法？把代码发送到 F# Interactive，当场运行。这就是 SharpLsp 中的 F#。一等公民，免费，而且开源。
diff --git a/src/website/src/assets/videos/getting-started-card.jpg b/src/website/src/assets/videos/getting-started-card.jpg
index 8fa5ac7b..80383a8a 100644
Binary files a/src/website/src/assets/videos/getting-started-card.jpg and b/src/website/src/assets/videos/getting-started-card.jpg differ
diff --git a/src/website/src/assets/videos/getting-started-poster.webp b/src/website/src/assets/videos/getting-started-poster.webp
index 970bd6da..fe5a6b6d 100644
Binary files a/src/website/src/assets/videos/getting-started-poster.webp and b/src/website/src/assets/videos/getting-started-poster.webp differ
diff --git a/src/website/src/assets/videos/getting-started.chapters.vtt b/src/website/src/assets/videos/getting-started.chapters.vtt
new file mode 100644
index 00000000..2a300be9
--- /dev/null
+++ b/src/website/src/assets/videos/getting-started.chapters.vtt
@@ -0,0 +1,13 @@
+WEBVTT
+
+SolutionExplorer
+00:00.000 --> 00:13.033
+Open a folder with a solution: C# and F# load together
+
+FSharp.OpenFile
+00:13.033 --> 00:27.567
+F#: the F# compiler behind every answer
+
+CSharp.OpenFile
+00:27.567 --> 00:50.100
+C#: Roslyn behind every answer
diff --git a/src/website/src/assets/videos/getting-started.en.vtt b/src/website/src/assets/videos/getting-started.en.vtt
index f5d3c98e..99e9d8ec 100644
--- a/src/website/src/assets/videos/getting-started.en.vtt
+++ b/src/website/src/assets/videos/getting-started.en.vtt
@@ -4,11 +4,11 @@ WEBVTT
 [Gentle music]
 This is SharpLsp in VS Code. Open a folder with a solution or a project, and SharpLsp loads it, with C# and F# side by side.
 
-00:13.150 --> 00:18.934
+00:13.383 --> 00:19.168
 F# is first class. The F# compiler answers every hover, completion and jump.
 
-00:27.550 --> 00:34.396
+00:27.917 --> 00:34.763
 C# runs on Roslyn, the compiler itself, for completion, diagnostics, fixes and refactorings.
 
-00:50.017 --> 01:02.286
+00:50.450 --> 01:02.720
 And the tools come with it: a profiler, a NuGet browser, test lenses and debugging. Install SharpLsp from the Marketplace or Open VSX. It's free, and open source.
diff --git a/src/website/src/assets/videos/getting-started.ja.vtt b/src/website/src/assets/videos/getting-started.ja.vtt
index 31023844..59a19fc1 100644
--- a/src/website/src/assets/videos/getting-started.ja.vtt
+++ b/src/website/src/assets/videos/getting-started.ja.vtt
@@ -4,11 +4,11 @@ WEBVTT
 [穏やかな音楽]
 これが VS Code の SharpLsp です。ソリューションやプロジェクトのあるフォルダーを開くと、SharpLsp が読み込みます。C# と F# が並んで表示されます。
 
-00:13.150 --> 00:18.934
+00:13.383 --> 00:19.168
 F# はファーストクラスです。ホバー、補完、ジャンプのすべてに F# コンパイラーが答えます。
 
-00:27.550 --> 00:34.396
+00:27.917 --> 00:34.763
 C# は、コンパイラーそのものである Roslyn で動きます。補完、診断、修正、リファクタリングまで。
 
-00:50.017 --> 01:02.286
+00:50.450 --> 01:02.720
 さらにツールも付いてきます。プロファイラー、NuGet ブラウザー、テストレンズ、デバッグ。SharpLsp は Marketplace または Open VSX からインストールできます。無料で、オープンソースです。
diff --git a/src/website/src/assets/videos/getting-started.mp4 b/src/website/src/assets/videos/getting-started.mp4
index 0ed95746..e0355604 100644
--- a/src/website/src/assets/videos/getting-started.mp4
+++ b/src/website/src/assets/videos/getting-started.mp4
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:ec5ab7fc4aef3ee9f75db883223df6a14df71684aecf1c74f8670d9c2fa49e6d
-size 3019908
+oid sha256:25bc963f62108c017e1da836387e2e10d90dbb0ef164e436d82a144a78043cf5
+size 6420567
diff --git a/src/website/src/assets/videos/getting-started.webm b/src/website/src/assets/videos/getting-started.webm
index 02f6758d..69c5d5d0 100644
--- a/src/website/src/assets/videos/getting-started.webm
+++ b/src/website/src/assets/videos/getting-started.webm
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:0f869c63b4e44e9550628f4a074edafa9227d775f0f8dec5400d8ac937a27caf
-size 3646903
+oid sha256:00c21dbf9df289d804c295ac2b2dbc38735261a6f4d53ea01f80079173777bd9
+size 6356854
diff --git a/src/website/src/assets/videos/getting-started.zh.vtt b/src/website/src/assets/videos/getting-started.zh.vtt
index 8b7bb76f..00ee9a6a 100644
--- a/src/website/src/assets/videos/getting-started.zh.vtt
+++ b/src/website/src/assets/videos/getting-started.zh.vtt
@@ -4,11 +4,11 @@ WEBVTT
 [舒缓的音乐]
 这就是 VS Code 中的 SharpLsp。打开一个包含解决方案或项目的文件夹，SharpLsp 就会加载它，C# 和 F# 并排呈现。
 
-00:13.150 --> 00:18.934
+00:13.383 --> 00:19.168
 F# 是一等公民。每一次悬停、补全和跳转，都由 F# 编译器作答。
 
-00:27.550 --> 00:34.396
+00:27.917 --> 00:34.763
 C# 由编译器本身 Roslyn 驱动：补全、诊断、修复和重构。
 
-00:50.017 --> 01:02.286
+00:50.450 --> 01:02.720
 工具也一并奉上：性能分析器、NuGet 浏览器、测试 CodeLens 和调试。从 Marketplace 或 Open VSX 安装 SharpLsp。它免费，而且开源。
diff --git a/src/website/src/assets/videos/hover-card.jpg b/src/website/src/assets/videos/hover-card.jpg
index 347c49e7..92bba853 100644
Binary files a/src/website/src/assets/videos/hover-card.jpg and b/src/website/src/assets/videos/hover-card.jpg differ
diff --git a/src/website/src/assets/videos/hover-poster.webp b/src/website/src/assets/videos/hover-poster.webp
index 1409a53b..6545b8df 100644
Binary files a/src/website/src/assets/videos/hover-poster.webp and b/src/website/src/assets/videos/hover-poster.webp differ
diff --git a/src/website/src/assets/videos/hover.chapters.vtt b/src/website/src/assets/videos/hover.chapters.vtt
new file mode 100644
index 00000000..6437fbbd
--- /dev/null
+++ b/src/website/src/assets/videos/hover.chapters.vtt
@@ -0,0 +1,9 @@
+WEBVTT
+
+FSharp.Hover
+00:00.000 --> 00:37.533
+F#: the inferred signature, with your doc comment
+
+CSharp.Hover
+00:37.533 --> 00:56.200
+C#: XML docs rendered, and the type behind var
diff --git a/src/website/src/assets/videos/hover.en.vtt b/src/website/src/assets/videos/hover.en.vtt
index 1fcab857..fd847807 100644
--- a/src/website/src/assets/videos/hover.en.vtt
+++ b/src/website/src/assets/videos/hover.en.vtt
@@ -7,8 +7,8 @@ Hover a symbol to see exactly what it is. In F#, SharpLsp shows the signature th
 00:19.217 --> 00:25.185
 Union cases work the same way, and so do .NET types, shown just as F# sees them.
 
-00:37.083 --> 00:43.715
+00:37.883 --> 00:44.515
 C# hovers come from Roslyn: your XML docs, rendered, and the real type behind every var.
 
-00:55.083 --> 01:01.061
+00:56.550 --> 01:02.527
 And hover reads the code you haven't saved. Change a doc comment, and the next hover already shows it.
diff --git a/src/website/src/assets/videos/hover.ja.vtt b/src/website/src/assets/videos/hover.ja.vtt
index c6cdacf9..fed0f780 100644
--- a/src/website/src/assets/videos/hover.ja.vtt
+++ b/src/website/src/assets/videos/hover.ja.vtt
@@ -7,8 +7,8 @@ WEBVTT
 00:19.217 --> 00:25.185
 共用体ケースも同じです。.NET の型も、F# から見たとおりの姿で表示されます。
 
-00:37.083 --> 00:43.715
+00:37.883 --> 00:44.515
 C# のホバーは Roslyn から届きます。XML ドキュメントはきれいに表示され、var の背後にある本当の型もわかります。
 
-00:55.083 --> 01:01.061
+00:56.550 --> 01:02.527
 さらに、ホバーはまだ保存していないコードも読み取ります。ドキュメントコメントを変えれば、次のホバーにはもう反映されています。
diff --git a/src/website/src/assets/videos/hover.mp4 b/src/website/src/assets/videos/hover.mp4
index 15ca365d..32010b32 100644
--- a/src/website/src/assets/videos/hover.mp4
+++ b/src/website/src/assets/videos/hover.mp4
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:91d865ffcbd28a588f611c216eca05bd6dab3a0635bba81b93c1113a5e2f1ba3
-size 2730419
+oid sha256:78919643354b10c07217a9ed626ca4f5dc922921ae8d915596006525b6830de3
+size 6307789
diff --git a/src/website/src/assets/videos/hover.webm b/src/website/src/assets/videos/hover.webm
index 39bd6606..7e5ce3d9 100644
--- a/src/website/src/assets/videos/hover.webm
+++ b/src/website/src/assets/videos/hover.webm
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:1be50faa8c501a3edb053093150815f4c7dd798e82941532ebc2f2d8284e9b48
-size 3068573
+oid sha256:45b5e849b23df12b7a780206c0fd4823763e67597e98e32400ab45d4a663d252
+size 6226202
diff --git a/src/website/src/assets/videos/hover.zh.vtt b/src/website/src/assets/videos/hover.zh.vtt
index 185a5d5a..4182190c 100644
--- a/src/website/src/assets/videos/hover.zh.vtt
+++ b/src/website/src/assets/videos/hover.zh.vtt
@@ -7,8 +7,8 @@ WEBVTT
 00:19.217 --> 00:25.185
 联合用例也是一样，.NET 类型同样如此，以 F# 看到的样子显示。
 
-00:37.083 --> 00:43.715
+00:37.883 --> 00:44.515
 C# 的悬停信息来自 Roslyn：渲染好的 XML 文档，以及每个 var 背后的真实类型。
 
-00:55.083 --> 01:01.061
+00:56.550 --> 01:02.527
 而且悬停会读取你还没保存的代码。修改一条文档注释，下一次悬停就已经显示出来了。
diff --git a/src/website/src/assets/videos/navigation-card.jpg b/src/website/src/assets/videos/navigation-card.jpg
index cb196c63..ea143775 100644
Binary files a/src/website/src/assets/videos/navigation-card.jpg and b/src/website/src/assets/videos/navigation-card.jpg differ
diff --git a/src/website/src/assets/videos/navigation-poster.webp b/src/website/src/assets/videos/navigation-poster.webp
index 8cc0dd15..978ba8e7 100644
Binary files a/src/website/src/assets/videos/navigation-poster.webp and b/src/website/src/assets/videos/navigation-poster.webp differ
diff --git a/src/website/src/assets/videos/navigation.chapters.vtt b/src/website/src/assets/videos/navigation.chapters.vtt
new file mode 100644
index 00000000..bdc99e87
--- /dev/null
+++ b/src/website/src/assets/videos/navigation.chapters.vtt
@@ -0,0 +1,13 @@
+WEBVTT
+
+FSharp.Definition
+00:00.000 --> 00:14.667
+F12 jumps to a definition, in F#…
+
+CSharp.Definition
+00:14.667 --> 00:31.400
+…and in C#
+
+CSharp.References
+00:31.400 --> 00:44.400
+Shift+F12: every reference, in a peek window
diff --git a/src/website/src/assets/videos/navigation.en.vtt b/src/website/src/assets/videos/navigation.en.vtt
index 18363847..e8c996dd 100644
--- a/src/website/src/assets/videos/navigation.en.vtt
+++ b/src/website/src/assets/videos/navigation.en.vtt
@@ -4,11 +4,11 @@ WEBVTT
 [Gentle music]
 Press F12 on any symbol to jump to its definition. In F#, the F# compiler resolves it across files: here, a union case declared in another file.
 
-00:15.417 --> 00:20.745
+00:15.017 --> 00:20.345
 In C#, Roslyn does the same, from the program straight into the checkout pipeline.
 
-00:31.183 --> 00:38.397
+00:31.750 --> 00:38.963
 Shift F12 finds every reference across the solution, in a peek window you can browse without losing your place.
 
-00:43.950 --> 00:51.096
+00:44.750 --> 00:51.896
 It works for the framework too. F12 on JsonSerializer opens its source, decompiled from the assembly.
diff --git a/src/website/src/assets/videos/navigation.ja.vtt b/src/website/src/assets/videos/navigation.ja.vtt
index 5bf6ece7..3d6f4671 100644
--- a/src/website/src/assets/videos/navigation.ja.vtt
+++ b/src/website/src/assets/videos/navigation.ja.vtt
@@ -4,11 +4,11 @@ WEBVTT
 [穏やかな音楽]
 シンボルの上で F12 を押すと、その定義へジャンプします。F# では F# コンパイラーがファイルをまたいで解決します。ここでは、別のファイルで宣言された共用体ケースです。
 
-00:15.417 --> 00:20.745
+00:15.017 --> 00:20.345
 C# では Roslyn が同じことをします。プログラムからチェックアウトパイプラインへ一直線です。
 
-00:31.183 --> 00:38.397
+00:31.750 --> 00:38.963
 Shift+F12 でソリューション全体の参照をすべて見つけます。ピークウィンドウなので、今いる場所を見失わずに見て回れます。
 
-00:43.950 --> 00:51.096
+00:44.750 --> 00:51.896
 フレームワークにも使えます。JsonSerializer の上で F12 を押すと、アセンブリから逆コンパイルしたソースが開きます。
diff --git a/src/website/src/assets/videos/navigation.mp4 b/src/website/src/assets/videos/navigation.mp4
index 2633f128..1fb1272f 100644
--- a/src/website/src/assets/videos/navigation.mp4
+++ b/src/website/src/assets/videos/navigation.mp4
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:7419d4dbb3ad684775ed19659e121dafbdea2efb85804cad8c169325b3750033
-size 2824887
+oid sha256:823b65ccf7ec9555281da7525560e306ec9e692197df892cc98dd54cde8bda10
+size 6395343
diff --git a/src/website/src/assets/videos/navigation.webm b/src/website/src/assets/videos/navigation.webm
index 4c81194b..200bf92b 100644
--- a/src/website/src/assets/videos/navigation.webm
+++ b/src/website/src/assets/videos/navigation.webm
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:d8e12a66928366f65c44591f1efdef0d3ea0529970a980438f6d442e21afc203
-size 3288562
+oid sha256:81683cb38b740bba1b9a3a033097da7ce6598c799e3591f96b499689f500eb7d
+size 6624140
diff --git a/src/website/src/assets/videos/navigation.zh.vtt b/src/website/src/assets/videos/navigation.zh.vtt
index 0f9c3e40..bf1cbc34 100644
--- a/src/website/src/assets/videos/navigation.zh.vtt
+++ b/src/website/src/assets/videos/navigation.zh.vtt
@@ -4,11 +4,11 @@ WEBVTT
 [舒缓的音乐]
 在任意符号上按 F12，即可跳转到它的定义。在 F# 中，由 F# 编译器跨文件解析：这里是在另一个文件中声明的联合用例。
 
-00:15.417 --> 00:20.745
+00:15.017 --> 00:20.345
 在 C# 中，Roslyn 也一样，从程序直接跳进结账管道。
 
-00:31.183 --> 00:38.397
+00:31.750 --> 00:38.963
 Shift+F12 会找出整个解决方案中的所有引用，显示在速览窗口里，浏览时不会丢失当前位置。
 
-00:43.950 --> 00:51.096
+00:44.750 --> 00:51.896
 对框架也同样有效。在 JsonSerializer 上按 F12，会打开从程序集反编译出的源代码。
diff --git a/src/website/src/assets/videos/refactoring-lesson-card.jpg b/src/website/src/assets/videos/refactoring-lesson-card.jpg
new file mode 100644
index 00000000..34748e1e
Binary files /dev/null and b/src/website/src/assets/videos/refactoring-lesson-card.jpg differ
diff --git a/src/website/src/assets/videos/refactoring-lesson-poster.webp b/src/website/src/assets/videos/refactoring-lesson-poster.webp
new file mode 100644
index 00000000..a93d7373
Binary files /dev/null and b/src/website/src/assets/videos/refactoring-lesson-poster.webp differ
diff --git a/src/website/src/assets/videos/refactoring-lesson.en.vtt b/src/website/src/assets/videos/refactoring-lesson.en.vtt
new file mode 100644
index 00000000..4dea7fbb
--- /dev/null
+++ b/src/website/src/assets/videos/refactoring-lesson.en.vtt
@@ -0,0 +1,135 @@
+WEBVTT
+
+00:00.000 --> 00:12.584
+[Upbeat electronic music]
+Welcome to a quick lesson on code actions in SharpLsp! In the next few minutes, you'll fix code, generate code, and rename across files, in F# and C#, on any OS.
+
+00:12.934 --> 00:16.531
+First, the one shortcut you need. On a Mac, press Command dot.
+
+00:16.531 --> 00:18.866
+On Windows and Linux, it's Control dot.
+
+00:18.866 --> 00:20.261
+Or just click the lightbulb.
+
+00:20.261 --> 00:26.923
+Either way, the menu only lists actions that apply to your cursor, your selection, or the diagnostic under it.
+
+00:27.273 --> 00:29.886
+So where do actions come from? Three places.
+
+00:29.886 --> 00:33.697
+A diagnostic: a warning or an error asks for its own fix.
+
+00:33.697 --> 00:36.155
+The cursor: a type or member you can reshape.
+
+00:36.155 --> 00:39.549
+And a selection: refactorings that work on the code you highlight.
+
+00:39.549 --> 00:43.997
+On a blank line, you get an empty menu. SharpLsp never guesses.
+
+00:44.347 --> 00:50.219
+Let's start with F#. This describe function matches on a stage, but it's missing a union case.
+
+00:50.219 --> 00:56.028
+The compiler flags it with warning FS0025: an incomplete pattern match.
+
+00:56.028 --> 01:01.870
+Press Command dot, pick Generate missing union case, and SharpLsp writes the arm for you.
+
+01:01.870 --> 01:05.366
+Prefer a catch-all? Add wildcard case is right there too.
+
+01:05.716 --> 01:09.852
+Here's the result. The new arm matches exactly the case that was missing,
+
+01:09.852 --> 01:14.794
+because the F# compiler knows every case of the union. You just write the body.
+
+01:15.144 --> 01:20.216
+That's one fix from a whole F# toolkit, each tied to a compiler diagnostic.
+
+01:20.216 --> 01:27.652
+Unresolved name? Add the open. Unused binding? Prefix it with an underscore. A discarded value? Pipe it to ignore.
+
+01:27.652 --> 01:33.553
+And beyond matches, SharpLsp generates missing record fields and interface member stubs.
+
+01:33.903 --> 01:38.860
+Renaming is separate from code actions. Put the cursor on a symbol and press F2.
+
+01:38.860 --> 01:40.501
+Type the new name and hit enter.
+
+01:40.501 --> 01:46.675
+Every reference follows, even in other files. Here, the call in Program.fs updates too.
+
+01:46.675 --> 01:53.706
+In C#, rename runs on Roslyn's loaded solution. In F#, on the loaded F# project.
+
+01:56.537 --> 02:02.232
+Now C#. Here's a favourite workflow: write the call you wish existed. Receipt, of invoice.
+
+02:02.232 --> 02:05.377
+It doesn't exist yet, so the compiler reports an error.
+
+02:05.377 --> 02:07.309
+Command dot. Generate method.
+
+02:07.309 --> 02:10.944
+Roslyn writes the stub, and takes the parameter type from your call.
+
+02:21.970 --> 02:26.099
+Next, use a type without importing its namespace. StringBuilder, say.
+
+02:26.099 --> 02:29.328
+Quick Fix puts using System.Text right at the top.
+
+02:29.328 --> 02:33.072
+You could also qualify it in place, or even generate a new class.
+
+02:33.072 --> 02:38.206
+These come straight from Roslyn's own code fix providers, bundled with SharpLsp.
+
+02:50.403 --> 02:54.672
+So what's happening underneath? Your editor asks for code actions at the cursor.
+
+02:54.672 --> 03:00.413
+Roslyn, or the F# compiler, sends back a list of titles. That keeps the menu fast.
+
+03:00.413 --> 03:04.911
+Only when you pick one does SharpLsp resolve it and compute the edits.
+
+03:04.911 --> 03:08.685
+The result is one workspace edit, which can touch several files.
+
+03:08.685 --> 03:12.329
+And if an action has gone stale, you get no edit, never a guess.
+
+03:12.679 --> 03:14.455
+Two things that aren't code actions.
+
+03:14.455 --> 03:20.786
+SharpLsp doesn't format your code. Use CSharpier for C#, and Fantomas for F#.
+
+03:20.786 --> 03:27.098
+And Sort Members is its own command. Right-click a C# type in the Solution Explorer to reorder its members.
+
+03:27.448 --> 03:32.251
+Let's recap. Command dot, or Control dot, opens every action that applies.
+
+03:32.251 --> 03:37.564
+F# fixes follow the compiler's diagnostics, and they can write whole match cases.
+
+03:37.564 --> 03:39.331
+F2 renames across files.
+
+03:39.331 --> 03:42.627
+And in C#, you can call first, and generate second.
+
+03:42.627 --> 03:46.755
+The full lesson is in the SharpLsp docs. Now go fix some code!
+
diff --git a/src/website/src/assets/videos/refactoring-lesson.ja.vtt b/src/website/src/assets/videos/refactoring-lesson.ja.vtt
new file mode 100644
index 00000000..acffffbf
--- /dev/null
+++ b/src/website/src/assets/videos/refactoring-lesson.ja.vtt
@@ -0,0 +1,135 @@
+WEBVTT
+
+00:00.000 --> 00:12.584
+[アップテンポな電子音楽]
+SharpLsp のコードアクションのクイックレッスンへようこそ！数分で、コードの修正、コードの生成、ファイルをまたいだ名前の変更を、F# と C# で、どの OS でも学べます。
+
+00:12.934 --> 00:16.531
+まずは、覚えるべきショートカットはひとつだけ。Mac では Command+. を押します。
+
+00:16.531 --> 00:18.866
+Windows と Linux では Ctrl+. です。
+
+00:18.866 --> 00:20.261
+または電球アイコンをクリックするだけです。
+
+00:20.261 --> 00:26.923
+どの方法でも、メニューにはカーソル、選択範囲、またはその下の診断に当てはまるアクションだけが表示されます。
+
+00:27.273 --> 00:29.886
+では、アクションはどこから来るのでしょう？三つあります。
+
+00:29.886 --> 00:33.697
+診断：警告やエラーが、それ自身の修正を求めます。
+
+00:33.697 --> 00:36.155
+カーソル：作り変えられる型やメンバー。
+
+00:36.155 --> 00:39.549
+そして選択範囲：選択したコードに働くリファクタリングです。
+
+00:39.549 --> 00:43.997
+空行では、メニューは空です。SharpLsp は推測しません。
+
+00:44.347 --> 00:50.219
+F# から始めましょう。この describe 関数は stage で match していますが、共用体ケースがひとつ足りません。
+
+00:50.219 --> 00:56.028
+コンパイラーは警告 FS0025、不完全なパターンマッチとして知らせます。
+
+00:56.028 --> 01:01.870
+Command+. を押して「Generate missing union case」を選べば、SharpLsp がその分岐を書いてくれます。
+
+01:01.870 --> 01:05.366
+すべてを受け止めたいなら、「Add wildcard case」もすぐ隣にあります。
+
+01:05.716 --> 01:09.852
+これが結果です。新しい分岐は、足りなかったケースにぴったり一致します。
+
+01:09.852 --> 01:14.794
+F# コンパイラーが共用体のすべてのケースを知っているからです。あなたは本体を書くだけです。
+
+01:15.144 --> 01:20.216
+これは F# の修正ツールキットのひとつにすぎず、どれもコンパイラーの診断に結びついています。
+
+01:20.216 --> 01:27.652
+名前が解決できない？open を追加。未使用の束縛？アンダースコアを付ける。捨てられた値？ignore にパイプする。
+
+01:27.652 --> 01:33.553
+match 以外にも、SharpLsp は足りないレコードのフィールドや、インターフェイスのメンバーのスタブを生成します。
+
+01:33.903 --> 01:38.860
+名前の変更はコードアクションとは別です。シンボルにカーソルを置いて F2 を押します。
+
+01:38.860 --> 01:40.501
+新しい名前を入力して Enter を押します。
+
+01:40.501 --> 01:46.675
+すべての参照が追従します。別のファイルでもです。ここでは Program.fs の呼び出しも更新されます。
+
+01:46.675 --> 01:53.706
+C# では Roslyn が読み込んだソリューションで、F# では読み込んだ F# プロジェクトで名前を変更します。
+
+01:56.537 --> 02:02.232
+次は C# です。お気に入りのやり方：あったらいいなと思う呼び出しを書きます。Receipt(invoice) です。
+
+02:02.232 --> 02:05.377
+まだ存在しないので、コンパイラーはエラーを報告します。
+
+02:05.377 --> 02:07.309
+Command+.、「Generate method」。
+
+02:07.309 --> 02:10.944
+Roslyn がスタブを書き、パラメーターの型は呼び出しから決めます。
+
+02:21.970 --> 02:26.099
+次に、名前空間をインポートせずに型を使います。たとえば StringBuilder。
+
+02:26.099 --> 02:29.328
+クイックフィックスは using System.Text をいちばん上に出します。
+
+02:29.328 --> 02:33.072
+その場で完全修飾したり、新しいクラスを生成したりもできます。
+
+02:33.072 --> 02:38.206
+これらは SharpLsp に同梱された Roslyn 自身のコード修正プロバイダーから直接来ています。
+
+02:50.403 --> 02:54.672
+では、裏で何が起きているのでしょう？エディターがカーソル位置のコードアクションを問い合わせます。
+
+02:54.672 --> 03:00.413
+Roslyn または F# コンパイラーがタイトルの一覧を返します。だからメニューは速いのです。
+
+03:00.413 --> 03:04.911
+ひとつ選んだときに初めて、SharpLsp がそれを解決して編集を計算します。
+
+03:04.911 --> 03:08.685
+結果はひとつのワークスペース編集で、複数のファイルに及ぶこともあります。
+
+03:08.685 --> 03:12.329
+そしてアクションが古くなっていたら、編集は返りません。推測はしません。
+
+03:12.679 --> 03:14.455
+コードアクションではないものが二つあります。
+
+03:14.455 --> 03:20.786
+SharpLsp はコードを整形しません。C# には CSharpier、F# には Fantomas を使ってください。
+
+03:20.786 --> 03:27.098
+そして Sort Members は独立したコマンドです。ソリューションエクスプローラーで C# の型を右クリックすると、メンバーを並べ替えられます。
+
+03:27.448 --> 03:32.251
+おさらいしましょう。Command+. または Ctrl+. で、当てはまるすべてのアクションが開きます。
+
+03:32.251 --> 03:37.564
+F# の修正はコンパイラーの診断に従い、match のケースを丸ごと書けます。
+
+03:37.564 --> 03:39.331
+F2 でファイルをまたいで名前を変更できます。
+
+03:39.331 --> 03:42.627
+そして C# では、先に呼び出しを書き、あとから生成できます。
+
+03:42.627 --> 03:46.755
+レッスンの全文は SharpLsp のドキュメントにあります。さあ、コードを直しに行きましょう！
+
diff --git a/src/website/src/assets/videos/refactoring-lesson.mp4 b/src/website/src/assets/videos/refactoring-lesson.mp4
new file mode 100644
index 00000000..fdfd38fe
--- /dev/null
+++ b/src/website/src/assets/videos/refactoring-lesson.mp4
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:c4077e8bee9b73e45dc1b7dd8a39d2b8560cc68a5dbb4e5fdabc88cf18f99faa
+size 13282806
diff --git a/src/website/src/assets/videos/refactoring-lesson.webm b/src/website/src/assets/videos/refactoring-lesson.webm
new file mode 100644
index 00000000..79bcc15b
--- /dev/null
+++ b/src/website/src/assets/videos/refactoring-lesson.webm
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:a5916f771b8c93e8453ed839c90b91e99a4c04e9c813532a09a5c294525af8c3
+size 9478566
diff --git a/src/website/src/assets/videos/refactoring-lesson.zh.vtt b/src/website/src/assets/videos/refactoring-lesson.zh.vtt
new file mode 100644
index 00000000..914b2833
--- /dev/null
+++ b/src/website/src/assets/videos/refactoring-lesson.zh.vtt
@@ -0,0 +1,135 @@
+WEBVTT
+
+00:00.000 --> 00:12.584
+[轻快的电子音乐]
+欢迎来到 SharpLsp 代码操作快速课程！接下来几分钟，你将学会在任何系统上用 F# 和 C# 修复代码、生成代码，以及跨文件重命名。
+
+00:12.934 --> 00:16.531
+首先，你只需要记住一个快捷键。在 Mac 上，按 Command+.。
+
+00:16.531 --> 00:18.866
+在 Windows 和 Linux 上，是 Ctrl+.。
+
+00:18.866 --> 00:20.261
+或者直接点击灯泡图标。
+
+00:20.261 --> 00:26.923
+无论哪种方式，菜单只会列出适用于光标、选区或其下诊断的操作。
+
+00:27.273 --> 00:29.886
+那么，这些操作从哪里来？有三个来源。
+
+00:29.886 --> 00:33.697
+诊断：警告或错误会提供它自己的修复。
+
+00:33.697 --> 00:36.155
+光标：可以重塑的类型或成员。
+
+00:36.155 --> 00:39.549
+还有选区：作用于你所选代码的重构。
+
+00:39.549 --> 00:43.997
+在空行上，菜单是空的。SharpLsp 从不瞎猜。
+
+00:44.347 --> 00:50.219
+我们从 F# 开始。这个 describe 函数对 stage 做 match，但漏了一个联合用例。
+
+00:50.219 --> 00:56.028
+编译器用警告 FS0025 标出它：模式匹配不完整。
+
+00:56.028 --> 01:01.870
+按 Command+.，选择 Generate missing union case，SharpLsp 就会替你写出这个分支。
+
+01:01.870 --> 01:05.366
+想要兜底分支？Add wildcard case 也就在旁边。
+
+01:05.716 --> 01:09.852
+这是结果。新分支恰好匹配了缺失的那个用例，
+
+01:09.852 --> 01:14.794
+因为 F# 编译器知道联合类型的每一个用例。你只需要写函数体。
+
+01:15.144 --> 01:20.216
+这只是整套 F# 修复工具中的一个，每一个都对应一条编译器诊断。
+
+01:20.216 --> 01:27.652
+名字无法解析？添加 open。绑定未使用？加上下划线前缀。值被丢弃？用管道传给 ignore。
+
+01:27.652 --> 01:33.553
+除了 match，SharpLsp 还能生成缺失的记录字段和接口成员存根。
+
+01:33.903 --> 01:38.860
+重命名和代码操作是分开的。把光标放在符号上，按 F2。
+
+01:38.860 --> 01:40.501
+输入新名字，然后按回车。
+
+01:40.501 --> 01:46.675
+所有引用都会跟着改，即使在其他文件里。这里，Program.fs 中的调用也更新了。
+
+01:46.675 --> 01:53.706
+在 C# 中，重命名基于 Roslyn 加载的解决方案；在 F# 中，基于已加载的 F# 项目。
+
+01:56.537 --> 02:02.232
+现在看 C#。一个很受欢迎的做法：先写出你希望存在的调用。比如 Receipt(invoice)。
+
+02:02.232 --> 02:05.377
+它还不存在，所以编译器报错。
+
+02:05.377 --> 02:07.309
+Command+.，选择 Generate method。
+
+02:07.309 --> 02:10.944
+Roslyn 会写出存根，并根据你的调用确定参数类型。
+
+02:21.970 --> 02:26.099
+接下来，在没有导入命名空间的情况下使用一个类型，比如 StringBuilder。
+
+02:26.099 --> 02:29.328
+快速修复会把 using System.Text 放在最上面。
+
+02:29.328 --> 02:33.072
+你也可以就地写出完全限定名，甚至生成一个新类。
+
+02:33.072 --> 02:38.206
+这些都直接来自 SharpLsp 内置的 Roslyn 代码修复提供程序。
+
+02:50.403 --> 02:54.672
+那么底层发生了什么？编辑器会请求光标处的代码操作。
+
+02:54.672 --> 03:00.413
+Roslyn 或 F# 编译器返回一个标题列表，这让菜单保持快速。
+
+03:00.413 --> 03:04.911
+只有当你选中一项时，SharpLsp 才会解析它并计算编辑。
+
+03:04.911 --> 03:08.685
+结果是一个工作区编辑，可以同时修改多个文件。
+
+03:08.685 --> 03:12.329
+如果某个操作已经过时，你得到的是没有编辑，而绝不是瞎猜。
+
+03:12.679 --> 03:14.455
+有两样东西不属于代码操作。
+
+03:14.455 --> 03:20.786
+SharpLsp 不负责格式化代码。C# 用 CSharpier，F# 用 Fantomas。
+
+03:20.786 --> 03:27.098
+Sort Members 则是一个独立命令。在解决方案资源管理器中右键点击一个 C# 类型，即可重新排列它的成员。
+
+03:27.448 --> 03:32.251
+来回顾一下。Command+. 或 Ctrl+. 会打开所有适用的操作。
+
+03:32.251 --> 03:37.564
+F# 修复跟随编译器诊断，还能写出完整的 match 用例。
+
+03:37.564 --> 03:39.331
+F2 可以跨文件重命名。
+
+03:39.331 --> 03:42.627
+在 C# 中，你可以先写调用，再生成方法。
+
+03:42.627 --> 03:46.755
+完整课程在 SharpLsp 文档里。现在就去修代码吧！
+
diff --git a/src/website/src/assets/videos/vscode-tutorial-card.jpg b/src/website/src/assets/videos/vscode-tutorial-card.jpg
new file mode 100644
index 00000000..bf9c675b
Binary files /dev/null and b/src/website/src/assets/videos/vscode-tutorial-card.jpg differ
diff --git a/src/website/src/assets/videos/vscode-tutorial-poster.webp b/src/website/src/assets/videos/vscode-tutorial-poster.webp
new file mode 100644
index 00000000..907913a2
Binary files /dev/null and b/src/website/src/assets/videos/vscode-tutorial-poster.webp differ
diff --git a/src/website/src/assets/videos/vscode-tutorial.chapters.vtt b/src/website/src/assets/videos/vscode-tutorial.chapters.vtt
new file mode 100644
index 00000000..3df2a8dd
--- /dev/null
+++ b/src/website/src/assets/videos/vscode-tutorial.chapters.vtt
@@ -0,0 +1,53 @@
+WEBVTT
+
+FSharp.OpenFile
+00:00.000 --> 00:12.767
+F#: open a source file (Cmd+P)
+
+FSharp.Hover
+00:12.767 --> 00:25.967
+Rest the mouse on a function: its F# signature
+
+FSharp.Completion
+00:25.967 --> 00:49.100
+Type a dot: completion lists what fits
+
+FSharp.Definition
+00:49.100 --> 01:04.333
+F12 goes to the definition
+
+FSharp.References
+01:04.333 --> 01:16.967
+Shift+F12 finds every reference
+
+FSharp.CodeAction
+01:16.967 --> 01:44.433
+Cmd+. on a warning: pick the fix
+
+SolutionExplorer
+01:44.433 --> 02:03.767
+The SharpLsp icon opens the Solution Explorer
+
+CSharp.OpenFile
+02:03.767 --> 02:16.700
+C#: open a source file (Cmd+P)
+
+CSharp.Hover
+02:16.700 --> 02:32.567
+Rest the mouse on a symbol: its docs and type
+
+CSharp.Completion
+02:32.567 --> 02:58.933
+Type a dot: completion lists what fits
+
+CSharp.Definition
+02:58.933 --> 03:10.900
+F12 goes to the definition
+
+CSharp.References
+03:10.900 --> 03:23.433
+Shift+F12 finds every reference
+
+CSharp.CodeAction
+03:23.433 --> 03:48.600
+Cmd+. on an error: generate the missing method
diff --git a/src/website/src/assets/videos/vscode-tutorial.en.vtt b/src/website/src/assets/videos/vscode-tutorial.en.vtt
new file mode 100644
index 00000000..ad87cd74
--- /dev/null
+++ b/src/website/src/assets/videos/vscode-tutorial.en.vtt
@@ -0,0 +1,41 @@
+WEBVTT
+
+00:00.000 --> 00:10.956
+[Gentle music]
+This is the SharpLsp tutorial, F# first. Press Cmd+P and open a source file, and SharpLsp starts working on it straight away.
+
+00:13.117 --> 00:20.689
+Rest the mouse on a function. SharpLsp shows the signature the F# compiler inferred, with its doc comment.
+
+00:26.317 --> 00:33.109
+Type a dot after a value, and completion lists what fits there: the List functions, then the fields of a product.
+
+00:49.450 --> 00:53.772
+Put the cursor on a symbol and press F12 to go to its definition.
+
+01:04.683 --> 01:08.723
+Shift+F12 finds every reference to it, across the solution.
+
+01:17.317 --> 01:25.415
+This match leaves a case out, so F# warns. Press Cmd+. on the warning, and pick the fix that generates the missing case.
+
+01:44.783 --> 01:53.189
+Click the SharpLsp icon in the Activity Bar to open the Solution Explorer: the solution, its projects and their files.
+
+02:04.117 --> 02:09.894
+Now C#. The same seven steps, starting with Cmd+P to open a C# file.
+
+02:17.050 --> 02:21.968
+Hover a method to read its XML docs, and hover var to see the type behind it.
+
+02:32.917 --> 02:37.632
+Type a dot, and completion offers LINQ's methods, then the record's properties.
+
+02:59.283 --> 03:01.855
+F12 jumps to where a method is defined.
+
+03:11.250 --> 03:14.236
+And Shift+F12 lists everywhere a type is used.
+
+03:23.783 --> 03:33.450
+This call names a method that does not exist yet. Press Cmd+. on the error, and generate it. Each step ticks itself off once SharpLsp answers.
diff --git a/src/website/src/assets/videos/vscode-tutorial.ja.vtt b/src/website/src/assets/videos/vscode-tutorial.ja.vtt
new file mode 100644
index 00000000..f21ca0f7
--- /dev/null
+++ b/src/website/src/assets/videos/vscode-tutorial.ja.vtt
@@ -0,0 +1,41 @@
+WEBVTT
+
+00:00.000 --> 00:10.956
+[穏やかな音楽]
+SharpLsp のチュートリアルです。最初は F# から。Cmd+P でソース ファイルを開くと、SharpLsp はすぐに動き始めます。
+
+00:13.117 --> 00:20.689
+関数の上にマウスを置いてください。F# コンパイラーが推論したシグネチャーを、ドキュメントコメントと一緒に表示します。
+
+00:26.317 --> 00:33.109
+値の後にドットを入力すると、そこに合う候補が並びます。List の関数、次に製品のフィールドです。
+
+00:49.450 --> 00:53.772
+シンボルにカーソルを置いて F12 を押すと、その定義へ移動します。
+
+01:04.683 --> 01:08.723
+Shift+F12 で、ソリューション全体からその参照をすべて見つけます。
+
+01:17.317 --> 01:25.415
+この match はケースが足りないので、F# が警告します。警告の上で Cmd+. を押し、足りないケースを生成する修正を選びます。
+
+01:44.783 --> 01:53.189
+アクティビティ バーの SharpLsp アイコンをクリックすると、ソリューション エクスプローラーが開き、ソリューション、プロジェクト、ファイルが表示されます。
+
+02:04.117 --> 02:09.894
+次は C# です。同じ 7 つのステップを、Cmd+P で C# ファイルを開くところから始めます。
+
+02:17.050 --> 02:21.968
+メソッドにホバーすると XML ドキュメントが読め、var にホバーするとその背後にある型がわかります。
+
+02:32.917 --> 02:37.632
+ドットを入力すると、LINQ のメソッド、次にレコードのプロパティが候補に出ます。
+
+02:59.283 --> 03:01.855
+F12 で、メソッドが定義されている場所へ移動します。
+
+03:11.250 --> 03:14.236
+そして Shift+F12 で、型が使われている場所をすべて一覧にします。
+
+03:23.783 --> 03:33.450
+この呼び出しは、まだ存在しないメソッドを指しています。エラーの上で Cmd+. を押し、メソッドを生成します。SharpLsp が応答すると、各ステップは自動で完了します。
diff --git a/src/website/src/assets/videos/vscode-tutorial.mp4 b/src/website/src/assets/videos/vscode-tutorial.mp4
new file mode 100644
index 00000000..3a7a31b9
--- /dev/null
+++ b/src/website/src/assets/videos/vscode-tutorial.mp4
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:a81b1bbf89c6182d32d2f4c3cf6542ddf73e9bb931bc42e733b11e8ec0b2b1d8
+size 22095291
diff --git a/src/website/src/assets/videos/vscode-tutorial.webm b/src/website/src/assets/videos/vscode-tutorial.webm
new file mode 100644
index 00000000..3ee7e309
--- /dev/null
+++ b/src/website/src/assets/videos/vscode-tutorial.webm
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:5b053fb3034ab844523b436effbd2b2a61c5db6dece23dfd8ea9f5d38eaceb34
+size 22096185
diff --git a/src/website/src/assets/videos/vscode-tutorial.zh.vtt b/src/website/src/assets/videos/vscode-tutorial.zh.vtt
new file mode 100644
index 00000000..e8482b93
--- /dev/null
+++ b/src/website/src/assets/videos/vscode-tutorial.zh.vtt
@@ -0,0 +1,41 @@
+WEBVTT
+
+00:00.000 --> 00:10.956
+[舒缓的音乐]
+这是 SharpLsp 教程，先从 F# 开始。按 Cmd+P 打开一个源文件，SharpLsp 立刻开始工作。
+
+00:13.117 --> 00:20.689
+把鼠标停在一个函数上。SharpLsp 会显示 F# 编译器推断出的签名，以及它的文档注释。
+
+00:26.317 --> 00:33.109
+在值后面输入一个点，补全会列出此处适用的内容：先是 List 的函数，然后是产品的字段。
+
+00:49.450 --> 00:53.772
+把光标放在符号上，按 F12 即可转到它的定义。
+
+01:04.683 --> 01:08.723
+按 Shift+F12，可以在整个解决方案中找到它的所有引用。
+
+01:17.317 --> 01:25.415
+这个 match 漏掉了一个用例，所以 F# 发出警告。在警告上按 Cmd+.，选择生成缺失用例的修复。
+
+01:44.783 --> 01:53.189
+点击活动栏中的 SharpLsp 图标，打开解决方案资源管理器：解决方案、其中的项目和文件。
+
+02:04.117 --> 02:09.894
+接下来是 C#。同样的七个步骤，先按 Cmd+P 打开一个 C# 文件。
+
+02:17.050 --> 02:21.968
+悬停在方法上可以阅读它的 XML 文档，悬停在 var 上可以看到它背后的类型。
+
+02:32.917 --> 02:37.632
+输入一个点，补全会先给出 LINQ 的方法，然后是记录的属性。
+
+02:59.283 --> 03:01.855
+按 F12 跳转到方法定义的位置。
+
+03:11.250 --> 03:14.236
+按 Shift+F12 则会列出某个类型被使用的所有位置。
+
+03:23.783 --> 03:33.450
+这个调用指向一个尚不存在的方法。在错误上按 Cmd+.，生成它。SharpLsp 一旦响应，每个步骤都会自动打勾。
diff --git a/src/website/src/docs/index.md b/src/website/src/docs/index.md
index b4544890..3a5182b5 100644
--- a/src/website/src/docs/index.md
+++ b/src/website/src/docs/index.md
@@ -28,10 +28,12 @@ The VSIX bundles the `sharplsp` host and both .NET sidecars. You do not need a R
   </ul>
 </section>
 
+The first time it starts, SharpLsp opens its [interactive tutorial](/docs/tutorial/): a short film for each step, F# first, while you hover, complete, go to a definition and fix code in your own editor.
+
 The current release includes C# and F# completion, hover, navigation, diagnostics, symbols, code actions, rename, semantic tokens, inlay hints, solution tooling, NuGet workflows, debugging, and profiling. Projects that target .NET Framework 4.6.2–4.8.1 get the same language features on every OS, and on Windows they also [run and test](/blog/dotnet-framework-windows-vs-code/) on the desktop CLR. Some features remain partial; the individual pages document their current limits.
 
 ### Other editors
 
 The server uses standard LSP wherever possible. Every GitHub release publishes standalone server archives and a Rider plugin, and [Zed](/docs/zed/) runs SharpLsp through a dev extension. Packaged integrations for Neovim, Helix, and Emacs are not released yet.
 
-<p class="next-link"><a href="/docs/architecture/">Next: Architecture <span aria-hidden="true">→</span></a></p>
+<p class="next-link"><a href="/docs/tutorial/">Next: Tutorial <span aria-hidden="true">→</span></a></p>
diff --git a/src/website/src/docs/refactoring.md b/src/website/src/docs/refactoring.md
index c16b3e75..484e08f2 100644
--- a/src/website/src/docs/refactoring.md
+++ b/src/website/src/docs/refactoring.md
@@ -1,7 +1,7 @@
 ---
 layout: layouts/docs.njk
 title: Refactoring & Code Actions
-description: "C# and F# code actions in SharpLsp: Roslyn code fixes and refactorings, F# quick fixes, rename, formatting and Sort Members, from the lightbulb or Ctrl+."
+description: "A lesson on C# and F# code actions in SharpLsp: the Cmd+. shortcut, F# quick fixes by diagnostic, generated match cases, rename across files, Roslyn fixes, and how resolve works."
 eleventyNavigation:
   key: Refactoring & Code Actions
   order: 7
@@ -11,28 +11,79 @@ eleventyNavigation:
 
 # Refactoring and Code Actions
 
-SharpLsp supports standard LSP code actions for C# and F#. Actions are context-dependent: the sidecar returns only fixes or refactorings whose compiler/provider can operate on the current diagnostic, cursor, or selection.
+Code actions turn a problem into code. This lesson covers the shortcut, where actions come from, the F# fixes, rename, and the C# fixes. It ends with what happens underneath, and what is not a code action. Everything here works the same on macOS, Linux and Windows.
 
-{% video "refactoring" %}
+{% video "refactoring-lesson" %}
+
+**You will learn to:**
+
+1. open the code action menu from the keyboard;
+2. predict which actions the menu offers, and why;
+3. complete an F# match, and use the F# quick fixes by diagnostic;
+4. rename a symbol across files;
+5. generate a C# method from a call, and add a missing `using`;
+6. tell what SharpLsp does when you pick an action.
+
+**Before you start:** install SharpLsp ([Editor Setup](/docs/editors/)) and open a folder with a solution or project. Code actions need the project loaded, because the C# and F# compilers produce them.
+
+## Step 1: Open the Menu
+
+Every action starts from one command, **Quick Fix**:
+
+| Where | How |
+|---|---|
+| VS Code on macOS | `Cmd+.` |
+| VS Code on Windows and Linux | `Ctrl+.` |
+| Any editor | Click the lightbulb in the gutter |
+
+Other editors expose the same LSP request under their own code action command. SharpLsp serves `textDocument/codeAction` to all of them.
 
-In VS Code, use the lightbulb or **Quick Fix** command (`Ctrl+.` on Windows/Linux, `Cmd+.` on macOS).
+## Step 2: Know Where Actions Come From
 
-## C# Actions
+Actions are context-dependent. The sidecar returns only the fixes and refactorings whose compiler or provider can act on what is under the cursor:
 
-The C# sidecar discovers Roslyn code-fix and refactoring providers from the bundled Roslyn feature assemblies. It asks providers for actions at the requested range and resolves the selected action into a workspace edit.
+| Context | What you get |
+|---|---|
+| A diagnostic (a warning or error) | The fix for that diagnostic |
+| The cursor on a type, member or expression | Refactorings that reshape it |
+| A selection | Refactorings that work on that span |
+| A blank line, or an unsupported spot | No actions. SharpLsp never guesses |
+
+So when the menu you expect is missing, move the cursor onto the squiggle or the symbol, or select the code, and ask again.
+
+## Step 3: Complete an F# Match
+
+Try this in any F# project. Declare a union and a match that misses a case:
+
+```fsharp
+type Stage =
+    | Browsing
+    | CheckedOut of decimal
 
-Verified examples include:
+let describe stage =
+    match stage with
+    | Browsing -> "still browsing"
+```
 
-- add a missing import;
-- remove an unused local;
-- generate a missing method;
-- Roslyn refactorings offered for a valid type or selection.
+The compiler underlines `stage` with `FS0025`: an incomplete pattern match. Put the cursor on it and press `Cmd+.`. The menu offers two fixes:
 
-The exact list varies with syntax, diagnostics, Roslyn version, and available providers. A blank line or unsupported location correctly returns no actions; the presence of a category does not mean every Visual Studio refactoring is available.
+- **Generate 1 missing union case(s)** writes an arm for each missing case;
+- **Add wildcard case** adds a catch-all `| _ ->` arm instead.
 
-## F# Actions
+Pick **Generate**:
 
-The F# sidecar provides a defined set of compiler-driven and generated actions:
+```fsharp
+let describe stage =
+    match stage with
+    | Browsing -> "still browsing"
+    | CheckedOut _ -> failwith "todo"
+```
+
+The F# compiler knows every case of the union, so the arm is exact. You replace `failwith "todo"` with the body.
+
+## Step 4: The F# Fixes by Diagnostic
+
+Each F# fix is tied to a compiler diagnostic, or to the code under the cursor:
 
 | Trigger or context | Action |
 |---|---|
@@ -47,23 +98,76 @@ The F# sidecar provides a defined set of compiler-driven and generated actions:
 | interface implementation | Generate member stubs |
 | `SLSPF0102` / `SLSPF0103` | Remove an unused `open` / simplify a name |
 
-Compiler typo fixes and some FSAC actions remain unimplemented; see [F# Language Support](/docs/fsharp/).
+The F# compiler reports `FS1182` only when the project turns the warning on, for example with `<OtherFlags>--warnon:1182</OtherFlags>` in the project file.
+
+**Try it:** write `List.map (fun x -> x + 1) [1; 2]` on a line of its own. The compiler warns `FS0020`, because the result is thrown away. `Cmd+.` offers `|> ignore`.
 
-## Resolve and Apply
+Compiler typo fixes and some FSAC actions are not implemented yet; see [F# Language Support](/docs/fsharp/).
 
-`textDocument/codeAction` returns lightweight items. `codeAction/resolve` computes the edits only for the selected action. Resolved workspace edits can change multiple existing documents.
+## Step 5: Rename Across Files
 
-If an action has expired, the sidecar restarted, or the provider cannot produce an apply operation, resolve returns no edit instead of guessing.
+Rename is not a code action. Put the cursor on a symbol and press `F2` (**Rename Symbol**), type the new name, and press `Enter`. SharpLsp advertises `textDocument/prepareRename`, so the editor knows up front whether the symbol can be renamed, then `textDocument/rename` edits every reference:
 
-## Rename Is Separate
+- C# rename uses the loaded Roslyn solution;
+- F# rename uses the loaded F# project, and edits every file that uses the symbol.
 
-Rename is not a code action. SharpLsp advertises `textDocument/prepareRename` and `textDocument/rename`:
+In the lesson, renaming the F# function `remember` to `rememberOrder` in `Sessions.fs` also rewrites its call in `Program.fs`.
 
-- C# rename uses the loaded Roslyn solution.
-- F# rename uses the loaded F# project and can edit multiple files.
+## Step 6: Generate a C# Method From a Call
 
-Use your editor's **Rename Symbol** command.
+The C# sidecar discovers Roslyn's code-fix and refactoring providers from the bundled Roslyn feature assemblies, so the C# fixes are Roslyn's own. A useful habit is to write the call first:
 
-## Formatting and Sort Members
+```csharp
+var receipt = Receipt(invoice);
+```
 
-SharpLsp intentionally does not advertise LSP formatting. Use CSharpier or Fantomas for formatting. The VS Code **Sort Members** command is a separate C# tree-sitter operation with configurable accessibility, category, and alphabetical ordering.
+`Receipt` does not exist yet, so the compiler reports an error. `Cmd+.` on it offers **Generate method 'Receipt'**, and Roslyn writes the stub, with the parameter type taken from the call:
+
+```csharp
+private object Receipt(string invoice)
+{
+    throw new NotImplementedException();
+}
+```
+
+## Step 7: Add a Missing `using`
+
+Use a type without its namespace:
+
+```csharp
+var builder = new StringBuilder();
+```
+
+`Cmd+.` on `StringBuilder` offers `using System.Text;` first. Further down, it offers the fully qualified name, generating a new `StringBuilder` class, and other Roslyn refactorings for the spot, such as converting to a block-scoped namespace.
+
+Other verified C# actions include removing an unused local, and Roslyn refactorings for a valid type or selection. The exact list varies with syntax, diagnostics, the Roslyn version and the available providers. The presence of a category does not mean every Visual Studio refactoring is available.
+
+## Under the Hood: List, Then Resolve
+
+A code action takes two requests:
+
+1. **Ask.** The editor sends `textDocument/codeAction` for the cursor or selection.
+2. **List.** The sidecar (Roslyn for C#, the F# compiler for F#) returns lightweight items: titles and kinds, without edits. That keeps the menu fast.
+3. **Resolve.** When you pick one, `codeAction/resolve` computes the edits for that action alone.
+4. **Apply.** The result is one workspace edit, which can change several existing documents at once.
+
+If an action has expired, the sidecar has restarted, or the provider cannot produce an edit, resolve returns no edit instead of guessing.
+
+## What Is Not a Code Action
+
+- **Formatting.** SharpLsp intentionally does not advertise LSP formatting. Use [CSharpier](https://csharpier.com/) for C# and [Fantomas](https://fsprojects.github.io/fantomas/) for F#.
+- **Sort Members.** A separate C# command, built on tree-sitter. Right-click a C# type in the Solution Explorer and pick **Sort Members**; it orders members by accessibility, category and name, as configured.
+- **Rename.** `F2`, as in step 5.
+
+## Recap
+
+- `Cmd+.` (or `Ctrl+.`) opens every action that applies to the cursor, selection or diagnostic.
+- F# fixes follow compiler diagnostics, and can write whole match cases, record fields and interface stubs.
+- `F2` renames across files, in F# and C#.
+- In C#, call first and generate second.
+
+## The Walkthrough in One Take
+
+The same features, recorded in one continuous take in VS Code:
+
+{% video "refactoring" %}
diff --git a/src/website/src/docs/tutorial.md b/src/website/src/docs/tutorial.md
new file mode 100644
index 00000000..ee64057d
--- /dev/null
+++ b/src/website/src/docs/tutorial.md
@@ -0,0 +1,48 @@
+---
+layout: layouts/docs.njk
+title: Tutorial
+description: "The SharpLsp interactive tutorial in VS Code: a film for each step, F# first then C#, and each step ticks itself off when SharpLsp answers your hover, completion, F12 or code action."
+---
+
+# The SharpLsp Tutorial
+
+SharpLsp teaches itself inside VS Code. The tutorial plays a short film for each step while you carry out that step in your own editor, on your own code. When SharpLsp answers the action, the step ticks itself off and the next film starts. There is no "Mark done" button: a hover that returns nothing does not count.
+
+F# comes first, then C#. Each language has the same seven steps.
+
+{% video "vscode-tutorial" %}
+
+## Open the Tutorial
+
+- **First run.** The first time SharpLsp starts, it opens the F# walkthrough on VS Code's Get Started page, with the tutorial panel beside it.
+- **Any time.** Run **SharpLsp: Open Tutorial** from the Command Palette (Cmd+Shift+P, or Ctrl+Shift+P on Windows and Linux).
+- **Get Started page.** Open **Help → Welcome**, then pick **Learn SharpLsp with F#** or **Learn SharpLsp with C#**.
+
+The panel has an F# and a C# switch, the language's seven steps and the current step's film. **Open one for me** opens a source file from your loaded solution, so every later step has something to answer.
+
+## The Steps
+
+Each step in the film, F# first. Select a time to watch that step:
+
+{% chapters "vscode-tutorial" %}
+
+| Step | You | It ticks when |
+|------|-----|---------------|
+| Open a file | open an F# or C# source file | an editor of that language becomes active |
+| Hover | rest the mouse on a function, type or value | SharpLsp returns Quick Info |
+| Complete code | type a dot after a value, or press Ctrl+Space | SharpLsp returns at least one completion |
+| Go to a definition | put the cursor on a symbol and press F12 | SharpLsp finds the definition |
+| Find all references | put the cursor on a symbol and press Shift+F12 | SharpLsp finds at least one reference |
+| Fix code | press Cmd+. (Ctrl+. on Windows and Linux) on a warning or error | SharpLsp offers at least one code action |
+| Solution Explorer | select the SharpLsp icon in the Activity Bar | the Solution Explorer opens (this ticks both languages) |
+
+The panel plays the matching docs film for each step: [Hover](/docs/hover/), [Code Completions](/docs/completions/), [Go to Definition](/docs/go-to-definition/) and the [refactoring lesson](/docs/refactoring/).
+
+## Settings
+
+- `sharplsp.tutorial.showOnStartup` (default `true`): set it to `false` to stop the tutorial opening on first run.
+- **SharpLsp: Reset Tutorial Progress** clears every tick, so you can take the tutorial again.
+
+The tutorial also works in browser VS Code served from your own machine with `code serve-web`. vscode.dev and github.dev cannot run SharpLsp, because they have no local extension host.
+
+<p class="next-link"><a href="/docs/editors/">Next: Editor Setup <span aria-hidden="true">→</span></a></p>
diff --git a/src/website/src/ja/docs/index.md b/src/website/src/ja/docs/index.md
index 8a1f0215..914dc9a5 100644
--- a/src/website/src/ja/docs/index.md
+++ b/src/website/src/ja/docs/index.md
@@ -29,10 +29,12 @@ VSIX には `sharplsp` ホストと両方の .NET サイドカーが同梱され
   </ul>
 </section>
 
+SharpLsp は初回起動時に[インタラクティブ チュートリアル](/ja/docs/tutorial/)を開きます。ステップごとの短い映像（F# が先）を見ながら、自分のエディターでホバー、補完、定義へ移動、コードの修正を試せます。
+
 現在のリリースには、C# と F# の補完、ホバー、ナビゲーション、診断、シンボル、コードアクション、名前変更、セマンティックトークン、インレイヒントに加え、ソリューションツール、NuGet ワークフロー、デバッグ、プロファイリングが含まれます。.NET Framework 4.6.2〜4.8.1 を対象とするプロジェクトも、すべての OS で同じ言語機能を利用でき、Windows ではデスクトップ CLR で[実行・テスト](/ja/blog/dotnet-framework-windows-vs-code/)もできます。一部の機能はまだ部分的な実装です。現在の制限事項は各ページで説明しています。
 
 ### その他のエディター
 
 サーバーは可能な限り標準 LSP を使用します。各 GitHub リリースではスタンドアロンのサーバーアーカイブと Rider プラグインを公開しており、[Zed](/ja/docs/zed/) では開発用拡張機能で SharpLsp を動かせます。Neovim、Helix、Emacs 向けのパッケージ化された統合はまだリリースされていません。
 
-<p class="next-link"><a href="/ja/docs/architecture/">次へ: アーキテクチャ <span aria-hidden="true">→</span></a></p>
+<p class="next-link"><a href="/ja/docs/tutorial/">次へ: チュートリアル <span aria-hidden="true">→</span></a></p>
diff --git a/src/website/src/ja/docs/refactoring.md b/src/website/src/ja/docs/refactoring.md
index a65d0665..671a1a04 100644
--- a/src/website/src/ja/docs/refactoring.md
+++ b/src/website/src/ja/docs/refactoring.md
@@ -1,7 +1,7 @@
 ---
 layout: layouts/docs.njk
 title: リファクタリングとコードアクション
-description: "SharpLsp の C# と F# のコードアクション：Roslyn のコード修正とリファクタリング、F# のクイックフィックス、名前の変更、整形、メンバーの並べ替え。"
+description: "SharpLsp の C# と F# のコードアクションのレッスン：Cmd+. ショートカット、診断ごとの F# クイックフィックス、match ケースの生成、ファイルをまたぐ名前の変更、Roslyn の修正、resolve の仕組み。"
 lang: ja
 eleventyNavigation:
   key: リファクタリングとコードアクション（日本語）
@@ -12,59 +12,163 @@ eleventyNavigation:
 
 # リファクタリングとコードアクション
 
-SharpLsp は、C# と F# の標準 LSP コードアクションに対応しています。アクションはコンテキストに依存し、サイドカーは、そのコンパイラーまたはプロバイダーが現在の診断、カーソル位置、選択範囲に対して実行できる修正やリファクタリングだけを返します。
+コードアクションは、問題をコードに変えます。このレッスンでは、ショートカット、アクションの出どころ、F# の修正、名前の変更、C# の修正を扱い、最後に裏側で起きていることと、コードアクションではないものを説明します。ここに書いたことは macOS、Linux、Windows のどれでも同じように動きます。
 
-{% video "refactoring" %}
+{% video "refactoring-lesson" %}
+
+**このレッスンで学ぶこと：**
+
+1. キーボードからコードアクションのメニューを開く
+2. メニューに出るアクションとその理由を予測する
+3. F# の match を補完し、診断ごとの F# クイックフィックスを使う
+4. ファイルをまたいでシンボルの名前を変更する
+5. 呼び出しから C# のメソッドを生成し、足りない `using` を追加する
+6. アクションを選んだときに SharpLsp が何をするかを理解する
+
+**始める前に：** SharpLsp をインストールし（[エディター設定](/ja/docs/editors/)）、ソリューションまたはプロジェクトのあるフォルダーを開きます。コードアクションは C# と F# のコンパイラーが生成するため、プロジェクトの読み込みが必要です。
+
+## ステップ 1：メニューを開く
+
+すべてのアクションは、ひとつのコマンド **Quick Fix** から始まります。
+
+| 場所 | 操作 |
+|---|---|
+| macOS の VS Code | `Cmd+.` |
+| Windows と Linux の VS Code | `Ctrl+.` |
+| どのエディターでも | 余白の電球をクリック |
+
+ほかのエディターでも、同じ LSP 要求がそれぞれのコードアクションのコマンドとして使えます。SharpLsp はそのすべてに `textDocument/codeAction` で応えます。
 
-VS Code では、電球または **Quick Fix** コマンド（Windows／Linux では `Ctrl+.`、macOS では `Cmd+.`）を使用します。
+## ステップ 2：アクションの出どころを知る
 
-## C# のアクション
+アクションはコンテキストに依存します。サイドカーは、そのコンパイラーまたはプロバイダーがカーソル位置のものに対して実行できる修正とリファクタリングだけを返します。
 
-C# サイドカーは、同梱された Roslyn 機能アセンブリから Roslyn のコード修正プロバイダーとリファクタリングプロバイダーを検出します。要求された範囲について各プロバイダーにアクションを問い合わせ、選択されたアクションをワークスペース編集へ解決します。
+| コンテキスト | 得られるもの |
+|---|---|
+| 診断（警告またはエラー） | その診断の修正 |
+| 型、メンバー、式の上のカーソル | それを作り変えるリファクタリング |
+| 選択範囲 | その範囲に働くリファクタリング |
+| 空行や、対応していない場所 | アクションなし。SharpLsp は推測しません |
+
+期待したメニューが出ないときは、波線やシンボルの上にカーソルを移すか、コードを選択してから、もう一度開いてください。
+
+## ステップ 3：F# の match を補完する
+
+どの F# プロジェクトでも試せます。共用体と、ケースがひとつ足りない match を書きます。
+
+```fsharp
+type Stage =
+    | Browsing
+    | CheckedOut of decimal
 
-動作を確認済みの例は次のとおりです。
+let describe stage =
+    match stage with
+    | Browsing -> "still browsing"
+```
 
-- 不足しているインポートを追加する
-- 未使用のローカル変数を削除する
-- 不足しているメソッドを生成する
-- 有効な型または選択範囲に対して提示される Roslyn リファクタリング
+コンパイラーは `stage` に `FS0025`（不完全なパターンマッチ）の波線を引きます。そこにカーソルを置いて `Cmd+.` を押すと、二つの修正が出ます。
 
-厳密な一覧は、構文、診断、Roslyn のバージョン、利用できるプロバイダーによって異なります。空行や非対応の位置では、アクションが返されないのが正しい動作です。カテゴリが存在していても、Visual Studio のすべてのリファクタリングを利用できるとは限りません。
+- **Generate 1 missing union case(s)** は、足りないケースごとに分岐を書きます
+- **Add wildcard case** は、代わりに `| _ ->` の分岐を追加します
 
-## F# のアクション
+**Generate** を選ぶと：
 
-F# サイドカーは、コンパイラーに基づくアクションと生成アクションのうち、明確に定義された一式を提供します。
+```fsharp
+let describe stage =
+    match stage with
+    | Browsing -> "still browsing"
+    | CheckedOut _ -> failwith "todo"
+```
+
+F# コンパイラーは共用体のすべてのケースを知っているので、分岐は正確です。`failwith "todo"` を本体に置き換えてください。
+
+## ステップ 4：診断ごとの F# の修正
+
+F# の修正は、それぞれコンパイラーの診断か、カーソル位置のコードに結びついています。
 
 | トリガーまたはコンテキスト | アクション |
 |---|---|
-| `FS0039` | 名前空間を特定できる場合に、解決に必要な `open` を追加する |
-| `FS1182` | 未使用のバインディングに接頭辞を付ける：`_` |
-| `FS0020` | `|> ignore` を追加する |
-| `FS0025` | ワイルドカードの match アームを追加する |
-| `FS0026` | 冗長なパターンを削除する |
-| 対応している `FS0001` の不一致 | 既知の変換を挿入する |
-| 判別共用体の match | 不足しているケースを生成する |
-| レコード式 | 不足しているフィールドを生成する |
-| インターフェイスの実装 | メンバーのスタブを生成する |
-| `SLSPF0102` / `SLSPF0103` | 未使用の `open` を削除する／名前を簡略化する |
+| `FS0039` | 名前空間を特定できる場合、解決用の `open` を追加 |
+| `FS1182` | 未使用のバインディングに `_` を付ける |
+| `FS0020` | `|> ignore` を追加 |
+| `FS0025` | ワイルドカードの match 分岐を追加 |
+| `FS0026` | 冗長なパターンを削除 |
+| 対応する `FS0001` の型不一致 | 既知の変換を挿入 |
+| 判別共用体の match | 不足しているケースを生成 |
+| レコード式 | 不足しているフィールドを生成 |
+| インターフェイス実装 | メンバーのスタブを生成 |
+| `SLSPF0102` / `SLSPF0103` | 未使用の `open` を削除／名前を簡略化 |
+
+F# コンパイラーが `FS1182` を報告するのは、プロジェクトでこの警告を有効にした場合だけです。たとえばプロジェクトファイルに `<OtherFlags>--warnon:1182</OtherFlags>` を書きます。
 
-コンパイラーによるタイプミスの修正と一部の FSAC アクションは、まだ実装されていません。詳しくは [F# 言語サポート](/ja/docs/fsharp/) を参照してください。
+**試してみる：** `List.map (fun x -> x + 1) [1; 2]` を単独の行に書きます。結果が捨てられるので、コンパイラーは `FS0020` を警告します。`Cmd+.` で `|> ignore` が出ます。
 
-## 解決と適用
+コンパイラーのタイプミス修正と一部の FSAC アクションは、まだ実装されていません。[F# 言語サポート](/ja/docs/fsharp/)を参照してください。
 
-`textDocument/codeAction` は軽量な項目を返します。`codeAction/resolve` は、選択されたアクションについてのみ編集内容を計算します。解決済みのワークスペース編集は、複数の既存ドキュメントを変更できます。
+## ステップ 5：ファイルをまたいで名前を変更する
 
-アクションの有効期限が切れた場合、サイドカーが再起動した場合、またはプロバイダーが適用操作を生成できない場合、解決処理は推測で補うのではなく、編集なしの結果を返します。
+名前の変更はコードアクションではありません。シンボルにカーソルを置いて `F2`（**Rename Symbol**）を押し、新しい名前を入力して `Enter` を押します。SharpLsp は `textDocument/prepareRename` を提供するので、エディターは名前を変更できるかを先に知り、そのあと `textDocument/rename` がすべての参照を編集します。
 
-## 名前変更は別の機能
+- C# の名前変更は、読み込まれた Roslyn ソリューションを使います
+- F# の名前変更は、読み込まれた F# プロジェクトを使い、シンボルを使うすべてのファイルを編集します
 
-名前変更はコードアクションではありません。SharpLsp は `textDocument/prepareRename` と `textDocument/rename` を公開します。
+レッスンでは、`Sessions.fs` の F# 関数 `remember` を `rememberOrder` に変えると、`Program.fs` の呼び出しも書き換わります。
 
-- C# の名前変更では、読み込み済みの Roslyn ソリューションを使用します。
-- F# の名前変更では、読み込み済みの F# プロジェクトを使用し、複数のファイルを編集できます。
+## ステップ 6：呼び出しから C# のメソッドを生成する
 
-エディターの **Rename Symbol** コマンドを使用してください。
+C# サイドカーは、同梱の Roslyn 機能アセンブリから Roslyn のコード修正プロバイダーとリファクタリングプロバイダーを検出するので、C# の修正は Roslyn 自身のものです。便利なのは、先に呼び出しを書く習慣です。
 
-## 書式設定と Sort Members
+```csharp
+var receipt = Receipt(invoice);
+```
 
-SharpLsp は意図的に LSP の書式設定機能を公開していません。書式設定には CSharpier または Fantomas を使用してください。VS Code の **Sort Members** コマンドは、アクセシビリティ、カテゴリ、アルファベット順を設定できる、独立した C# の tree-sitter 操作です。
+`Receipt` はまだ存在しないので、コンパイラーはエラーを報告します。そこで `Cmd+.` を押すと **Generate method 'Receipt'** が出て、Roslyn が呼び出しからパラメーターの型を決めてスタブを書きます。
+
+```csharp
+private object Receipt(string invoice)
+{
+    throw new NotImplementedException();
+}
+```
+
+## ステップ 7：足りない `using` を追加する
+
+名前空間なしで型を使います。
+
+```csharp
+var builder = new StringBuilder();
+```
+
+`StringBuilder` で `Cmd+.` を押すと、最初に `using System.Text;` が出ます。その下には、完全修飾名、新しい `StringBuilder` クラスの生成、ブロックスコープの名前空間への変換など、その場所で使える Roslyn のリファクタリングが並びます。
+
+ほかに動作を確認済みの C# のアクションには、未使用のローカル変数の削除や、有効な型または選択範囲に対する Roslyn のリファクタリングがあります。実際の一覧は、構文、診断、Roslyn のバージョン、利用可能なプロバイダーによって変わります。カテゴリーがあっても、Visual Studio のすべてのリファクタリングが使えるわけではありません。
+
+## 裏側：一覧、そして解決
+
+コードアクションは二つの要求で動きます。
+
+1. **問い合わせ。** エディターが、カーソル位置または選択範囲について `textDocument/codeAction` を送ります。
+2. **一覧。** サイドカー（C# は Roslyn、F# は F# コンパイラー）は、編集を含まない軽量な項目（タイトルと種類）を返します。だからメニューは速いのです。
+3. **解決。** ひとつを選ぶと、`codeAction/resolve` がそのアクションだけの編集を計算します。
+4. **適用。** 結果はひとつのワークスペース編集で、既存の複数のドキュメントを一度に変更できます。
+
+アクションの期限が切れていた場合、サイドカーが再起動した場合、またはプロバイダーが編集を生成できない場合、resolve は推測せずに編集なしを返します。
+
+## コードアクションではないもの
+
+- **整形。** SharpLsp は意図的に LSP の整形を提供しません。C# には [CSharpier](https://csharpier.com/)、F# には [Fantomas](https://fsprojects.github.io/fantomas/) を使ってください。
+- **Sort Members。** tree-sitter で動く、独立した C# のコマンドです。ソリューションエクスプローラーで C# の型を右クリックして **Sort Members** を選ぶと、設定に従ってアクセシビリティ、カテゴリー、名前の順にメンバーを並べ替えます。
+- **名前の変更。** ステップ 5 の `F2` です。
+
+## おさらい
+
+- `Cmd+.`（または `Ctrl+.`）で、カーソル、選択範囲、診断に当てはまるすべてのアクションが開きます。
+- F# の修正はコンパイラーの診断に従い、match のケース、レコードのフィールド、インターフェイスのスタブを丸ごと書けます。
+- `F2` で、F# でも C# でもファイルをまたいで名前を変更できます。
+- C# では、先に呼び出しを書き、あとから生成します。
+
+## ワンテイクのウォークスルー
+
+同じ機能を、VS Code で途切れなく一度に収録したものです。
+
+{% video "refactoring" %}
diff --git a/src/website/src/ja/docs/tutorial.md b/src/website/src/ja/docs/tutorial.md
new file mode 100644
index 00000000..f577c7bf
--- /dev/null
+++ b/src/website/src/ja/docs/tutorial.md
@@ -0,0 +1,49 @@
+---
+layout: layouts/docs.njk
+title: チュートリアル
+description: "VS Code の SharpLsp インタラクティブ チュートリアル：ステップごとの映像、F# の次に C#。ホバー、補完、F12、コードアクションに SharpLsp が応答すると、各ステップが自動で完了します。"
+lang: ja
+---
+
+# SharpLsp チュートリアル
+
+SharpLsp は VS Code の中で使い方を教えます。チュートリアルはステップごとに短い映像を再生し、その間にあなたは自分のエディターと自分のコードでそのステップを実行します。SharpLsp がその操作に応答するとステップが自動で完了し、次の映像が始まります。「完了にする」ボタンはありません。何も返さないホバーは数えられません。
+
+最初が F#、次が C# です。どちらの言語にも同じ 7 つのステップがあります。
+
+{% video "vscode-tutorial" %}
+
+## チュートリアルを開く
+
+- **初回起動時。** SharpLsp を初めて起動すると、VS Code の「はじめに」ページで F# のウォークスルーが開き、その横にチュートリアル パネルが表示されます。
+- **いつでも。** コマンド パレット（Cmd+Shift+P、Windows と Linux では Ctrl+Shift+P）から **SharpLsp: チュートリアルを開く** を実行します。
+- **「はじめに」ページ。** **ヘルプ → ようこそ** を開き、**F# で SharpLsp を学ぶ** または **C# で SharpLsp を学ぶ** を選びます。
+
+パネルには F# と C# の切り替え、その言語の 7 つのステップ、現在のステップの映像があります。**Open one for me** を押すと、読み込まれたソリューションのソース ファイルが開くので、以降のすべてのステップで SharpLsp が応答できます。
+
+## ステップ
+
+映像の各ステップ（F# が先）です。時刻を選ぶとそのステップから再生します。
+
+{% chapters "vscode-tutorial" %}
+
+| ステップ | 操作 | 完了する条件 |
+|------|-----|---------------|
+| ファイルを開く | F# または C# のソース ファイルを開く | その言語のエディターがアクティブになる |
+| ホバー | 関数、型、値の上にマウスを置く | SharpLsp がクイック情報を返す |
+| コード補完 | 値の後にドットを入力するか、Ctrl+Space を押す | SharpLsp が補完候補を 1 つ以上返す |
+| 定義へ移動 | シンボルにカーソルを置いて F12 を押す | SharpLsp が定義を見つける |
+| すべての参照を検索 | シンボルにカーソルを置いて Shift+F12 を押す | SharpLsp が参照を 1 つ以上見つける |
+| コードの修正 | 警告またはエラーの上で Cmd+.（Windows と Linux では Ctrl+.）を押す | SharpLsp がコードアクションを 1 つ以上提示する |
+| ソリューション エクスプローラー | アクティビティ バーの SharpLsp アイコンを選ぶ | ソリューション エクスプローラーが開く（両方の言語で完了） |
+
+パネルは各ステップに対応するドキュメントの映像を再生します：[ホバー](/ja/docs/hover/)、[コード補完](/ja/docs/completions/)、[定義へ移動](/ja/docs/go-to-definition/)、[リファクタリングのレッスン](/ja/docs/refactoring/)。
+
+## 設定
+
+- `sharplsp.tutorial.showOnStartup`（既定値 `true`）：`false` にすると、初回起動時にチュートリアルが開かなくなります。
+- **SharpLsp: チュートリアルの進捗をリセット** はすべての完了を消去するので、チュートリアルをやり直せます。
+
+チュートリアルは、`code serve-web` で自分のマシンから配信するブラウザー版 VS Code でも動作します。vscode.dev と github.dev にはローカルの拡張機能ホストがないため、SharpLsp を実行できません。
+
+<p class="next-link"><a href="/ja/docs/editors/">次へ: エディター設定 <span aria-hidden="true">→</span></a></p>
diff --git a/src/website/src/zh/docs/index.md b/src/website/src/zh/docs/index.md
index d4910f5c..231d29fd 100644
--- a/src/website/src/zh/docs/index.md
+++ b/src/website/src/zh/docs/index.md
@@ -29,10 +29,12 @@ VSIX 内含 `sharplsp` 宿主和两个 .NET sidecar。你不需要 Rust 工具
   </ul>
 </section>
 
+SharpLsp 首次启动时会打开[交互式教程](/zh/docs/tutorial/)：每一步一段短片（先 F#），你同时在自己的编辑器中尝试悬停、补全、转到定义和修复代码。
+
 当前版本包含 C# 和 F# 代码补全、悬停信息、导航、诊断、符号、代码操作、重命名、语义令牌、内联提示、解决方案工具、NuGet 工作流、调试和性能分析。面向 .NET Framework 4.6.2–4.8.1 的项目在每个操作系统上都能获得相同的语言功能，在 Windows 上还能在桌面 CLR 上[运行和测试](/zh/blog/dotnet-framework-windows-vs-code/)。部分功能仍不完整；各功能页面记录了它们目前的限制。
 
 ### 其他编辑器
 
 服务器会尽可能使用标准 LSP。每次 GitHub 发布都会提供独立服务器归档和 Rider 插件，[Zed](/zh/docs/zed/) 则通过开发扩展运行 SharpLsp。Neovim、Helix 和 Emacs 的打包集成尚未发布。
 
-<p class="next-link"><a href="/zh/docs/architecture/">下一节：架构 <span aria-hidden="true">→</span></a></p>
+<p class="next-link"><a href="/zh/docs/tutorial/">下一节：教程 <span aria-hidden="true">→</span></a></p>
diff --git a/src/website/src/zh/docs/refactoring.md b/src/website/src/zh/docs/refactoring.md
index 2992fc58..5d88ae79 100644
--- a/src/website/src/zh/docs/refactoring.md
+++ b/src/website/src/zh/docs/refactoring.md
@@ -1,7 +1,7 @@
 ---
 layout: layouts/docs.njk
 title: 重构与代码操作
-description: "SharpLsp 的 C# 与 F# 代码操作：Roslyn 代码修复与重构、F# 快速修复、重命名、格式化和成员排序。"
+description: "SharpLsp 的 C# 与 F# 代码操作课程：Cmd+. 快捷键、按诊断划分的 F# 快速修复、生成 match 用例、跨文件重命名、Roslyn 修复，以及 resolve 的工作原理。"
 lang: zh
 eleventyNavigation:
   key: 重构与代码操作（中文）
@@ -12,59 +12,163 @@ eleventyNavigation:
 
 # 重构与代码操作
 
-SharpLsp 为 C# 和 F# 支持标准 LSP 代码操作。操作取决于上下文：sidecar 只会返回编译器或提供程序能够在当前诊断、光标位置或选区上执行的修复或重构。
+代码操作能把问题变成代码。本课程介绍快捷键、操作的来源、F# 修复、重命名和 C# 修复，最后讲解底层发生了什么，以及哪些功能不属于代码操作。这里的一切在 macOS、Linux 和 Windows 上都一样。
 
-{% video "refactoring" %}
+{% video "refactoring-lesson" %}
+
+**你将学会：**
+
+1. 用键盘打开代码操作菜单；
+2. 预判菜单会提供哪些操作，以及原因；
+3. 补全 F# match，并按诊断使用 F# 快速修复；
+4. 跨文件重命名符号；
+5. 根据调用生成 C# 方法，并添加缺失的 `using`；
+6. 理解选中一个操作时 SharpLsp 做了什么。
+
+**开始之前：** 安装 SharpLsp（[编辑器设置](/zh/docs/editors/)），并打开包含解决方案或项目的文件夹。代码操作由 C# 和 F# 编译器生成，因此需要先加载项目。
+
+## 第 1 步：打开菜单
+
+所有操作都从一个命令开始：**Quick Fix**。
+
+| 位置 | 方式 |
+|---|---|
+| macOS 上的 VS Code | `Cmd+.` |
+| Windows 和 Linux 上的 VS Code | `Ctrl+.` |
+| 任何编辑器 | 点击边栏中的灯泡 |
+
+其他编辑器也通过各自的代码操作命令提供同一个 LSP 请求。SharpLsp 对它们都以 `textDocument/codeAction` 响应。
 
-在 VS Code 中，可以使用灯泡或**快速修复**命令（Windows/Linux 上为 `Ctrl+.`，macOS 上为 `Cmd+.`）。
+## 第 2 步：了解操作的来源
 
-## C# 操作
+操作依赖于上下文。边车进程只返回其编译器或提供程序能作用于光标处内容的修复和重构：
 
-C# sidecar 会从随扩展捆绑的 Roslyn 功能程序集中发现 Roslyn 代码修复和重构提供程序。它会请求提供程序返回适用于指定范围的操作，并将选中的操作解析为工作区编辑。
+| 上下文 | 你会得到 |
+|---|---|
+| 诊断（警告或错误） | 该诊断的修复 |
+| 光标位于类型、成员或表达式上 | 重塑它的重构 |
+| 选区 | 作用于该范围的重构 |
+| 空行或不支持的位置 | 没有操作。SharpLsp 从不瞎猜 |
+
+所以当你期待的菜单没有出现时，把光标移到波浪线或符号上，或者选中代码，再试一次。
+
+## 第 3 步：补全 F# match
+
+在任何 F# 项目中都可以尝试。声明一个联合类型，以及一个漏掉一个用例的 match：
+
+```fsharp
+type Stage =
+    | Browsing
+    | CheckedOut of decimal
 
-已验证的示例包括：
+let describe stage =
+    match stage with
+    | Browsing -> "still browsing"
+```
 
-- 添加缺失的导入；
-- 移除未使用的局部变量；
-- 生成缺失的方法；
-- 对有效类型或选区提供 Roslyn 重构。
+编译器会在 `stage` 下用 `FS0025`（模式匹配不完整）标出波浪线。把光标放在上面，按 `Cmd+.`，菜单会提供两个修复：
 
-实际列表会随语法、诊断、Roslyn 版本和可用提供程序而变化。在空白行或不受支持的位置返回空操作列表是正确行为；存在某个操作类别并不意味着 Visual Studio 中的每一项重构都可用。
+- **Generate 1 missing union case(s)** 为每个缺失的用例写出一个分支；
+- **Add wildcard case** 则改为添加一个兜底的 `| _ ->` 分支。
 
-## F# 操作
+选择 **Generate**：
 
-F# sidecar 提供一组明确的、由编译器驱动或自动生成的操作：
+```fsharp
+let describe stage =
+    match stage with
+    | Browsing -> "still browsing"
+    | CheckedOut _ -> failwith "todo"
+```
+
+F# 编译器知道联合类型的每一个用例，所以分支是精确的。你只需把 `failwith "todo"` 换成函数体。
+
+## 第 4 步：按诊断划分的 F# 修复
+
+每个 F# 修复都对应一条编译器诊断，或光标处的代码：
 
 | 触发条件或上下文 | 操作 |
 |---|---|
-| `FS0039` | 能够确定命名空间时，添加可解析名称的 `open` |
-| `FS1182` | 在未使用的绑定前添加 `_` |
+| `FS0039` | 能识别命名空间时，添加用于解析的 `open` |
+| `FS1182` | 给未使用的绑定加上 `_` 前缀 |
 | `FS0020` | 添加 `|> ignore` |
-| `FS0025` | 添加通配符匹配分支 |
+| `FS0025` | 添加通配符 match 分支 |
 | `FS0026` | 移除冗余模式 |
-| 受支持的 `FS0001` 类型不匹配 | 插入已知的类型转换 |
-| 可区分联合匹配 | 生成缺失的分支 |
+| 受支持的 `FS0001` 类型不匹配 | 插入已知转换 |
+| 可区分联合的 match | 生成缺失的用例 |
 | 记录表达式 | 生成缺失的字段 |
 | 接口实现 | 生成成员存根 |
-| `SLSPF0102` / `SLSPF0103` | 移除未使用的 `open` / 简化名称 |
+| `SLSPF0102` / `SLSPF0103` | 移除未使用的 `open`／简化名称 |
+
+只有当项目启用了该警告时，F# 编译器才会报告 `FS1182`，例如在项目文件中写入 `<OtherFlags>--warnon:1182</OtherFlags>`。
 
-编译器拼写纠错和部分 FSAC 操作仍未实现；请参阅 [F# 语言支持](/zh/docs/fsharp/)。
+**试一试：** 在单独一行写下 `List.map (fun x -> x + 1) [1; 2]`。因为结果被丢弃，编译器会警告 `FS0020`。按 `Cmd+.` 会提供 `|> ignore`。
 
-## 解析和应用
+编译器拼写纠正和部分 FSAC 操作尚未实现；请参阅 [F# 语言支持](/zh/docs/fsharp/)。
 
-`textDocument/codeAction` 返回轻量级操作项。`codeAction/resolve` 只为选中的操作计算编辑。解析后的工作区编辑可以修改多个已有文档。
+## 第 5 步：跨文件重命名
 
-如果操作已过期、sidecar 已重启，或提供程序无法生成可应用的操作，解析会返回空编辑，而不会猜测结果。
+重命名不是代码操作。把光标放在符号上，按 `F2`（**Rename Symbol**），输入新名字，然后按 `Enter`。SharpLsp 提供 `textDocument/prepareRename`，让编辑器事先知道该符号能否重命名，随后由 `textDocument/rename` 编辑所有引用：
 
-## 重命名是独立功能
+- C# 重命名使用已加载的 Roslyn 解决方案；
+- F# 重命名使用已加载的 F# 项目，并编辑所有使用该符号的文件。
 
-重命名不是代码操作。SharpLsp 会声明 `textDocument/prepareRename` 和 `textDocument/rename`：
+在课程中，把 `Sessions.fs` 里的 F# 函数 `remember` 重命名为 `rememberOrder`，`Program.fs` 中的调用也会随之改写。
 
-- C# 重命名使用已加载的 Roslyn 解决方案。
-- F# 重命名使用已加载的 F# 项目，并可编辑多个文件。
+## 第 6 步：根据调用生成 C# 方法
 
-请使用编辑器的**重命名符号**命令。
+C# 边车进程从内置的 Roslyn 功能程序集中发现 Roslyn 的代码修复和重构提供程序，所以 C# 修复就是 Roslyn 自己的修复。一个好用的习惯是先写调用：
 
-## 格式化和成员排序
+```csharp
+var receipt = Receipt(invoice);
+```
 
-SharpLsp 有意不声明 LSP 格式化能力。格式化请使用 CSharpier 或 Fantomas。VS Code 的**排序成员**命令是独立的 C# tree-sitter 操作，可以配置可访问性、类别和字母排序顺序。
+`Receipt` 还不存在，所以编译器报错。在它上面按 `Cmd+.`，会提供 **Generate method 'Receipt'**，Roslyn 会根据调用确定参数类型并写出存根：
+
+```csharp
+private object Receipt(string invoice)
+{
+    throw new NotImplementedException();
+}
+```
+
+## 第 7 步：添加缺失的 `using`
+
+在没有命名空间的情况下使用一个类型：
+
+```csharp
+var builder = new StringBuilder();
+```
+
+在 `StringBuilder` 上按 `Cmd+.`，第一项就是 `using System.Text;`。下面还有完全限定名、生成新的 `StringBuilder` 类，以及该位置可用的其他 Roslyn 重构，例如转换为块范围命名空间。
+
+其他经过验证的 C# 操作包括删除未使用的局部变量，以及针对有效类型或选区的 Roslyn 重构。具体列表会随语法、诊断、Roslyn 版本和可用的提供程序而变化。某个类别存在，并不代表 Visual Studio 的所有重构都可用。
+
+## 底层原理：先列出，再解析
+
+一个代码操作需要两个请求：
+
+1. **询问。** 编辑器针对光标或选区发送 `textDocument/codeAction`。
+2. **列出。** 边车进程（C# 用 Roslyn，F# 用 F# 编译器）返回不含编辑的轻量项目：标题和类型。这让菜单保持快速。
+3. **解析。** 当你选中一项时，`codeAction/resolve` 只为该操作计算编辑。
+4. **应用。** 结果是一个工作区编辑，可以同时修改多个现有文档。
+
+如果操作已过期、边车进程已重启，或者提供程序无法生成编辑，resolve 会返回空编辑，而不是瞎猜。
+
+## 哪些不是代码操作
+
+- **格式化。** SharpLsp 有意不提供 LSP 格式化。C# 请使用 [CSharpier](https://csharpier.com/)，F# 请使用 [Fantomas](https://fsprojects.github.io/fantomas/)。
+- **Sort Members。** 一个基于 tree-sitter 的独立 C# 命令。在解决方案资源管理器中右键点击一个 C# 类型并选择 **Sort Members**，它会按配置的可访问性、类别和名称对成员排序。
+- **重命名。** 即第 5 步中的 `F2`。
+
+## 回顾
+
+- `Cmd+.`（或 `Ctrl+.`）会打开适用于光标、选区或诊断的所有操作。
+- F# 修复跟随编译器诊断，能写出完整的 match 用例、记录字段和接口存根。
+- `F2` 可以在 F# 和 C# 中跨文件重命名。
+- 在 C# 中，先写调用，再生成方法。
+
+## 一镜到底的演示
+
+同样的功能，在 VS Code 中一次连续录制：
+
+{% video "refactoring" %}
diff --git a/src/website/src/zh/docs/tutorial.md b/src/website/src/zh/docs/tutorial.md
new file mode 100644
index 00000000..eb3d5982
--- /dev/null
+++ b/src/website/src/zh/docs/tutorial.md
@@ -0,0 +1,49 @@
+---
+layout: layouts/docs.njk
+title: 教程
+description: "VS Code 中的 SharpLsp 交互式教程：每一步一段短片，先 F# 后 C#。当 SharpLsp 响应你的悬停、补全、F12 或代码操作时，该步骤会自动完成。"
+lang: zh
+---
+
+# SharpLsp 教程
+
+SharpLsp 在 VS Code 里教你使用它。教程为每一步播放一段短片，你同时在自己的编辑器里、用自己的代码完成这一步。SharpLsp 响应该操作后，此步骤会自动打勾，下一段短片随即开始。没有“标记为完成”按钮：没有返回任何内容的悬停不算数。
+
+先学 F#，再学 C#。两种语言的步骤相同，各有七步。
+
+{% video "vscode-tutorial" %}
+
+## 打开教程
+
+- **首次运行。** SharpLsp 第一次启动时，会在 VS Code 的“入门”页面打开 F# 演练，并在旁边打开教程面板。
+- **随时打开。** 在命令面板（Cmd+Shift+P，Windows 和 Linux 上为 Ctrl+Shift+P）中运行 **SharpLsp: 打开教程**。
+- **“入门”页面。** 打开 **帮助 → 欢迎**，然后选择 **通过 F# 学习 SharpLsp** 或 **通过 C# 学习 SharpLsp**。
+
+面板中有 F# 和 C# 切换、该语言的七个步骤，以及当前步骤的短片。**Open one for me** 会打开已加载解决方案中的一个源文件，让后续每一步都有可响应的内容。
+
+## 步骤
+
+短片中的每一步，先 F#。选择一个时间即可从该步骤开始观看：
+
+{% chapters "vscode-tutorial" %}
+
+| 步骤 | 你要做的 | 完成条件 |
+|------|-----|---------------|
+| 打开文件 | 打开一个 F# 或 C# 源文件 | 该语言的编辑器成为活动编辑器 |
+| 悬停 | 将鼠标停在函数、类型或值上 | SharpLsp 返回快速信息 |
+| 补全代码 | 在值后输入一个点，或按 Ctrl+Space | SharpLsp 返回至少一个补全项 |
+| 转到定义 | 将光标放在符号上并按 F12 | SharpLsp 找到定义 |
+| 查找所有引用 | 将光标放在符号上并按 Shift+F12 | SharpLsp 找到至少一个引用 |
+| 修复代码 | 在警告或错误上按 Cmd+.（Windows 和 Linux 上为 Ctrl+.） | SharpLsp 提供至少一个代码操作 |
+| 解决方案资源管理器 | 点击活动栏中的 SharpLsp 图标 | 解决方案资源管理器打开（两种语言同时完成） |
+
+面板为每一步播放对应文档页的短片：[悬停](/zh/docs/hover/)、[代码补全](/zh/docs/completions/)、[转到定义](/zh/docs/go-to-definition/)和[重构课程](/zh/docs/refactoring/)。
+
+## 设置
+
+- `sharplsp.tutorial.showOnStartup`（默认 `true`）：设为 `false` 后，首次运行时不再自动打开教程。
+- **SharpLsp: 重置教程进度** 会清除所有完成标记，让你重新学习教程。
+
+教程也可以在用 `code serve-web` 从你自己的机器提供的浏览器版 VS Code 中运行。vscode.dev 和 github.dev 没有本地扩展主机，因此无法运行 SharpLsp。
+
+<p class="next-link"><a href="/zh/docs/editors/">下一节：编辑器设置 <span aria-hidden="true">→</span></a></p>
diff --git a/src/website/tests/docs-nav.spec.js b/src/website/tests/docs-nav.spec.js
index 59a60b81..f483bbc3 100644
--- a/src/website/tests/docs-nav.spec.js
+++ b/src/website/tests/docs-nav.spec.js
@@ -5,7 +5,7 @@ import { test, expect } from '@playwright/test';
 import { docsSidebar as sidebar, openDocsMenu as openDrawer } from './docs-menu.js';
 
 const GROUPS = {
-  'Set up': ['Getting Started', 'Editor Setup', 'Zed', 'Configuration'],
+  'Set up': ['Getting Started', 'Tutorial', 'Editor Setup', 'Zed', 'Configuration'],
   'Write code': ['F# Language Support', 'Blazor & Razor', 'Code Completions', 'Hover & Quick Info', 'Go to Definition', 'Diagnostics', 'Refactoring & Code Actions'],
   'Project tools': ['Context Menus', 'NuGet Package Manager', 'Profiler', 'Profiling F#', 'Fix a Memory Leak'],
 };
diff --git a/src/website/tests/film-camera.spec.js b/src/website/tests/film-camera.spec.js
new file mode 100644
index 00000000..4e2606f8
--- /dev/null
+++ b/src/website/tests/film-camera.spec.js
@@ -0,0 +1,149 @@
+// Tests for [WEB-DESIGN-MEDIA-CAMERA]: the one camera every walkthrough is cut
+// through, fed tracks sampled the way kit/track.mjs samples a shoot, every 50 ms.
+import { test, expect } from '@playwright/test';
+import { CAMERA, cropScript, focusOf, movesOf, paced, shotsOf, viewAt } from '../tools/video/kit/zoom.mjs';
+
+const SIZE = [1600, 1000];
+const STEP = 0.05;
+const HOVER = 0;
+
+/** A clip's track from just before its first frame to `to` seconds, `at(t)` saying where things are at each sample. */
+function track(to, at) {
+  const samples = Array.from({ length: Math.round((to + 0.2) / STEP) + 1 }, (_, i) => {
+    const t = Number((i * STEP - 0.2).toFixed(3));
+    return { t, p: null, c: null, w: [], ...at(t) };
+  });
+  return { size: SIZE, samples, captions: [] };
+}
+
+/** The camera along `clip` played at `speed`: its shots, its moves, and its view at any second. */
+function shoot(clip, speed = 1) {
+  const timing = paced(speed);
+  const shots = shotsOf(focusOf(clip), SIZE, timing);
+  const moves = movesOf(shots, timing);
+  return { shots, moves, at: (t) => viewAt(moves, t, shots[0].view) };
+}
+
+const zoomOf = (view) => SIZE[0] / view.w;
+const heightOf = (view) => (view.w * SIZE[1]) / SIZE[0];
+const seconds = (from, to) => Array.from({ length: Math.round((to - from) * 10) + 1 }, (_, i) => from + i / 10);
+
+/** `[x, y]` is in `view`, above the caption band at its foot. */
+const shows = (view, [x, y]) => x >= view.x && x <= view.x + view.w && y >= view.y && y <= view.y + heightOf(view) * (1 - CAMERA.caption);
+
+/** The pointer glides from (900, 400) to (700, 600) at 1 s, and the hover it opens stays from 2 s to the clip's end. */
+const hovering = track(12, (t) => ({
+  p: t < 1 ? null : t < 1.65 ? [Math.round(900 - ((t - 1) / 0.65) * 200), Math.round(400 + ((t - 1) / 0.65) * 200)] : [700, 600],
+  w: t >= 2 ? [[HOVER, 650, 350, 400, 200]] : [],
+}));
+
+/** The text cursor sits at (500, 700) of a focused editor, then a line is typed between `from` and `to` seconds. */
+const typing = (end, runs) =>
+  track(end, (t) => {
+    const typed = runs.reduce((x, [from, to]) => x + Math.max(0, Math.min(t, to) - from) * 160, 0);
+    return { c: [Math.round(500 + typed), 700, 2, 19] };
+  });
+
+test.describe('The film camera', () => {
+  test('opens wide, then pushes in on the pointer a beat early and frames the hover it opens', () => {
+    const camera = shoot(hovering);
+    expect(camera.at(0), 'a clip opens on the whole workbench').toEqual({ x: 0, y: 0, w: 1600 });
+    expect(camera.moves[0].t0, 'the push-in starts a beat before the pointer moves').toBeCloseTo(1 - CAMERA.lead, 1);
+    expect(camera.moves[0].t1 - camera.moves[0].t0, 'every move takes CAMERA.move').toBeCloseTo(CAMERA.move, 5);
+    const settled = camera.at(4);
+    expect(zoomOf(settled), 'pushed in on the action').toBeGreaterThan(1.3);
+    expect(zoomOf(settled), 'never past the deepest zoom').toBeLessThanOrEqual(CAMERA.deepest);
+    for (const point of [[700, 600], [650, 350], [1050, 550]]) {
+      expect(shows(settled, point), `the pointer and the hover's corners, clear of the caption: ${point}`).toBe(true);
+    }
+    expect(zoomOf(camera.at(11.9)), 'an open hover keeps the camera in, however quiet the clip').toBeGreaterThan(1.3);
+  });
+
+  test('follows a typed line without being dragged along, then pulls back out once the clip goes quiet', () => {
+    const camera = shoot(typing(12, [[1, 4]]));
+    expect(camera.at(0.5), 'still wide before anything moves').toEqual({ x: 0, y: 0, w: 1600 });
+    for (const t of seconds(1.5, 4.5)) {
+      const cursor = [Math.round(500 + Math.min(Math.max(t - 1, 0), 3) * 160), 709];
+      expect(shows(camera.at(t), cursor), `the text cursor stays in frame at ${t.toFixed(1)}s`).toBe(true);
+    }
+    const typingShots = camera.shots.filter((shot) => shot.t >= 1 && shot.t <= 4);
+    expect(typingShots.length, 'a few framings across 480 pixels of typing, not one per keystroke').toBeLessThanOrEqual(3);
+    expect(typingShots.length, 'the camera does push in on the typing').toBeGreaterThanOrEqual(1);
+    const out = camera.shots.find((shot) => shot.t > 4 && shot.out);
+    expect(out?.t, 'two quiet seconds with nothing open pull the camera back out').toBeCloseTo(4 + CAMERA.quiet, 1);
+    expect(camera.at(out.t + CAMERA.move), 'back on the whole workbench').toEqual({ x: 0, y: 0, w: 1600 });
+  });
+
+  test('holds through a short pause, and never moves for a cursor that never moves', () => {
+    const paused = shoot(typing(12, [[1, 3], [6, 8]]));
+    for (const t of seconds(3.5, 6)) {
+      expect(zoomOf(paused.at(t)), `a three-second pause is not long enough to pull out: ${t.toFixed(1)}s`).toBeGreaterThan(1.3);
+    }
+    expect(paused.shots.some((shot) => shot.t > 3 && shot.t < 6 && shot.out), 'no pull-back inside the pause').toBe(false);
+    const still = shoot(track(10, () => ({ c: [500, 700, 2, 19] })));
+    expect(still.shots, 'a cursor that sits still all clip is never framed').toHaveLength(1);
+    expect(still.at(9), 'so the clip stays wide').toEqual({ x: 0, y: 0, w: 1600 });
+  });
+
+  test('never shows past the workbench edge, even for action in its corner', () => {
+    const corner = shoot(track(6, (t) => ({ p: t < 1 ? null : [Math.round(4 + t * 4), Math.round(4 + t * 4)], w: t >= 2 ? [[HOVER, 0, 30, 300, 120]] : [] })));
+    expect(zoomOf(corner.at(3)), 'it pushes in on the corner').toBeGreaterThan(1.3);
+    for (const t of seconds(0, 6)) {
+      const view = corner.at(t);
+      expect(view.x, `left edge at ${t.toFixed(1)}s`).toBeGreaterThanOrEqual(0);
+      expect(view.y, `top edge at ${t.toFixed(1)}s`).toBeGreaterThanOrEqual(0);
+      expect(view.x + view.w, `right edge at ${t.toFixed(1)}s`).toBeLessThanOrEqual(SIZE[0] + 1e-6);
+      expect(view.y + heightOf(view), `bottom edge at ${t.toFixed(1)}s`).toBeLessThanOrEqual(SIZE[1] + 1e-6);
+    }
+  });
+
+  test('frames where a gliding pointer comes to rest, not the whole way it travelled', () => {
+    // Parked top right, the pointer glides 1000 pixels to a word at (500, 600) and rests there.
+    const glide = shoot(track(6, (t) => {
+      const p = Math.min(Math.max((t - 1) / 0.65, 0), 1);
+      return { p: [Math.round(1400 - p * 900), Math.round(100 + p * 500)] };
+    }));
+    expect(glide.moves.filter((move) => move.t0 < 3), 'one move takes the camera there').toHaveLength(1);
+    expect(zoomOf(glide.moves[0].to), 'and it is already close').toBeGreaterThanOrEqual(1.8);
+    const landed = glide.at(2.5);
+    expect(zoomOf(landed), 'pushed well in on where it landed, not drawn out over its path').toBeGreaterThanOrEqual(1.8);
+    expect(shows(landed, [500, 600]), 'the word it rests on is in frame').toBe(true);
+    expect(shows(landed, [1400, 100]), 'where it set off from is not').toBe(false);
+    expect(glide.moves[0].t0, 'the move still starts a beat before the first sample the pointer moved in').toBeCloseTo(1.05 - CAMERA.lead, 5);
+  });
+
+  test('holds on action against the workbench edge instead of chasing it every sample', () => {
+    // The cursor types on the first line, framed past the top edge; the pointer then heads down the file.
+    const edge = shoot(track(8, (t) => ({ c: [t < 1 ? 450 : 466, 103, 2, 24], p: t < 4.5 ? null : [450, 300 + Math.round(Math.min(t - 4.5, 0.65) * 300)] })));
+    const early = edge.shots.filter((shot) => shot.t >= 1 && shot.t < 4.5);
+    expect(early, 'one push-in on the first line, held while the pointer is still to come').toHaveLength(1);
+    expect(edge.at(3).y, 'the view meets the top edge').toBe(0);
+    expect(shows(edge.at(3), [466, 115]), 'and shows the cursor').toBe(true);
+    expect(edge.shots.length, 'a handful of shots for the whole clip, not one per sample').toBeLessThanOrEqual(4);
+  });
+
+  test('paces a fast-forwarded clip so its moves look the same on screen', () => {
+    const real = shoot(hovering);
+    const fast = shoot(hovering, 4);
+    expect(fast.moves[0].t1 - fast.moves[0].t0, 'a 4× clip moves over four times the footage').toBeCloseTo(4 * CAMERA.move, 5);
+    expect(fast.moves[0].t1 - fast.moves[0].t0, 'which plays back in the same time as a move at 1×').toBeCloseTo(4 * (real.moves[0].t1 - real.moves[0].t0), 5);
+    expect(paced(4).lead, 'its beat of anticipation is paced too').toBeCloseTo(4 * CAMERA.lead, 5);
+  });
+
+  test('crops the full-resolution footage in the frame’s own shape, one entry per frame that changes', () => {
+    const camera = shoot(hovering);
+    const script = cropScript(camera.moves, camera.shots[0].view, { name: 'camera0', frames: 360, fps: 30, scale: 2, size: SIZE });
+    const entries = script.split('\n').map((line) => {
+      const [time, ...commands] = line.replace(/;$/, '').split(' crop@camera0 ');
+      return { time: Number(time), crop: Object.fromEntries(commands.map((command) => command.replace(/,$/, '').split(' ')).map(([key, value]) => [key, Number(value)])) };
+    });
+    expect(entries[0], 'the first frame is the whole 3200×2000 footage').toEqual({ time: 0, crop: { w: 3200, h: 2000, x: 0, y: 0 } });
+    expect(entries.length, 'held frames send nothing').toBeLessThan(360);
+    for (const { time, crop } of entries) {
+      expect(crop.w / crop.h, `the crop at ${time}s keeps the frame's shape`).toBeCloseTo(1.6, 2);
+      expect(crop.x + crop.w <= 3200 && crop.y + crop.h <= 2000 && crop.x >= 0 && crop.y >= 0, `the crop at ${time}s stays on the footage`).toBe(true);
+      expect(crop.w, `the crop at ${time}s is never deeper than the deepest zoom`).toBeGreaterThanOrEqual(3200 / CAMERA.deepest - 1);
+    }
+    expect(entries.every((entry, i) => i === 0 || entry.time > entries[i - 1].time), 'entries run forward in time').toBe(true);
+  });
+});
diff --git a/src/website/tests/film-chapters.spec.js b/src/website/tests/film-chapters.spec.js
new file mode 100644
index 00000000..2870734d
--- /dev/null
+++ b/src/website/tests/film-chapters.spec.js
@@ -0,0 +1,87 @@
+// Tests for [WEB-DESIGN-MEDIA-CHAPTERS]: the chapters a walkthrough's scenes mark,
+// timed in its cut and published as the WebVTT track the VS Code tutorial plays.
+import fs from 'node:fs';
+import path from 'node:path';
+import { test, expect } from '@playwright/test';
+import { chaptersOf, chaptersTrack, startOf } from '../tools/video/kit/chapters.mjs';
+import { captions } from '../tools/video/kit/sound/voice.mjs';
+import { stamp, webVtt } from '../tools/video/kit/vtt.mjs';
+
+const videos = path.resolve(import.meta.dirname, '../src/assets/videos');
+
+/** A shot of `length` seconds, held `hold` more, marked with `chapter`. */
+const shot = (clip, length, chapter, hold) => ({ clip, length, hold, chapter, title: chapter && `${clip} caption` });
+
+const FILM = [
+  shot('intro', 4),
+  shot('fsharp', 6.5, 'FSharp.Hover', 1.25),
+  shot('union', 5, 'FSharp.Hover'),
+  shot('csharp', 7, 'CSharp.Hover', 0.5),
+  shot('outro', 3),
+];
+
+/** Each cue of a WebVTT file: its identifier, its times in seconds, its text. */
+function cuesOf(vtt) {
+  const seconds = (time) => time.split(':').reduce((total, part) => total * 60 + Number(part), 0);
+  return vtt
+    .trimEnd()
+    .split('\n\n')
+    .slice(1)
+    .map((block) => block.split('\n'))
+    .map(([id, timing, ...text]) => {
+      const [from, to] = timing.split(' --> ').map(seconds);
+      return { id, from, to, text: text.join('\n') };
+    });
+}
+
+test.describe('Film chapters [WEB-DESIGN-MEDIA-CHAPTERS]', () => {
+  test('consecutive shots of one chapter make one span, timed with every hold before it', () => {
+    const chapters = chaptersOf(FILM);
+    expect(chapters.map((chapter) => chapter.id)).toEqual(['FSharp.Hover', 'CSharp.Hover']);
+    expect(chapters[0]).toEqual({ id: 'FSharp.Hover', title: 'fsharp caption', from: 4, to: 16.75 });
+    expect(chapters[1]).toEqual({ id: 'CSharp.Hover', title: 'csharp caption', from: 16.75, to: 24.25 });
+    expect(startOf(FILM, FILM.length)).toBe(27.25);
+  });
+
+  test('unmarked shots belong to no chapter, and a chapter marked twice apart fails the film', () => {
+    expect(chaptersOf([shot('a', 3), shot('b', 2)])).toEqual([]);
+    const split = [shot('a', 2, 'FSharp.Hover'), shot('b', 2), shot('c', 2, 'FSharp.Hover')];
+    expect(() => chaptersOf(split)).toThrow('chapter "FSharp.Hover" marks shots that are not consecutive');
+    const untitled = chaptersOf([{ clip: 'a', length: 2, chapter: 'SolutionExplorer' }]);
+    expect(untitled).toEqual([{ id: 'SolutionExplorer', title: 'SolutionExplorer', from: 0, to: 2 }]);
+  });
+
+  test('the track names each cue by its chapter, so the tutorial finds its step by id', () => {
+    const track = chaptersTrack(chaptersOf(FILM));
+    expect(track.startsWith('WEBVTT\n\nFSharp.Hover\n00:04.000 --> 00:16.750\nfsharp caption\n\n')).toBe(true);
+    const cues = cuesOf(track);
+    expect(cues).toEqual([
+      { id: 'FSharp.Hover', from: 4, to: 16.75, text: 'fsharp caption' },
+      { id: 'CSharp.Hover', from: 16.75, to: 24.25, text: 'csharp caption' },
+    ]);
+    expect(track.endsWith('\n')).toBe(true);
+  });
+
+  test('timestamps run past the minute, and captions share the one WebVTT writer', () => {
+    expect(stamp(0)).toBe('00:00.000');
+    expect(stamp(83.5)).toBe('01:23.500');
+    expect(webVtt([{ from: 1, to: 2, text: ['music', 'line'] }])).toBe('WEBVTT\n\n00:01.000 --> 00:02.000\nmusic\nline\n');
+    const script = { music: { en: '[music]' }, pacing: { hold: 0.3 } };
+    const lines = [{ start: 1, end: 2, en: 'One.' }, { start: 2.1, end: 3, en: 'Two.' }];
+    expect(captions(script, lines, 'en')).toBe('WEBVTT\n\n00:00.000 --> 00:02.100\n[music]\nOne.\n\n00:02.100 --> 00:03.300\nTwo.\n');
+  });
+
+  test('every published chapters track is well formed: ordered, non-overlapping spans with unique ids', () => {
+    const tracks = fs.readdirSync(videos).filter((file) => file.endsWith('.chapters.vtt'));
+    for (const file of tracks) {
+      const cues = cuesOf(fs.readFileSync(path.join(videos, file), 'utf8'));
+      expect(cues.length, file).toBeGreaterThan(0);
+      expect(new Set(cues.map((cue) => cue.id)).size, file).toBe(cues.length);
+      cues.forEach((cue, index) => {
+        expect(cue.to, `${file} ${cue.id}`).toBeGreaterThan(cue.from);
+        expect(cue.from, `${file} ${cue.id}`).toBeGreaterThanOrEqual(cues[index - 1]?.to ?? 0);
+        expect(cue.id, file).toMatch(/^((FSharp|CSharp)\.)?[A-Z][A-Za-z]+$/);
+      });
+    }
+  });
+});
diff --git a/src/website/tests/profiler-media.spec.js b/src/website/tests/profiler-media.spec.js
index 9eb50e3a..7dd78b43 100644
--- a/src/website/tests/profiler-media.spec.js
+++ b/src/website/tests/profiler-media.spec.js
@@ -1,4 +1,4 @@
-// Tests for [WEB-DESIGN-MEDIA]: the profiler film and stills the profiler-film
+// Tests for [WEB-DESIGN-MEDIA]: the profiler film and stills tools/video
 // tooling renders from the real extension.
 import { test, expect } from '@playwright/test';
 import { expectPlayable, expectStills, playback, sourcesOf } from './media.js';
diff --git a/src/website/tests/screenshots.spec.js b/src/website/tests/screenshots.spec.js
index fed8c4e9..586a62a1 100644
--- a/src/website/tests/screenshots.spec.js
+++ b/src/website/tests/screenshots.spec.js
@@ -61,7 +61,7 @@ test.describe('Docs screenshots', () => {
 });
 
 // [WEB-DESIGN-MEDIA] Each feature page opens on its still from the film kit
-// (films/doc-stills.mjs): the real extension on the Shop demo, never an old capture.
+// (films/doc-stills/film.mjs): the real extension on the Shop demo, never an old capture.
 const DOC_STILLS = {
   'architecture/': 'architecture',
   'editors/': 'editors',
diff --git a/src/website/tests/site-videos.spec.js b/src/website/tests/site-videos.spec.js
index 955d1e05..6ca355fe 100644
--- a/src/website/tests/site-videos.spec.js
+++ b/src/website/tests/site-videos.spec.js
@@ -16,6 +16,7 @@ const everyLanguage = (page, videos, says) =>
 // Every docs page's narrated walkthrough. [WEB-DESIGN-MEDIA] Placement
 const WALKTHROUGHS = [
   ...everyLanguage('', ['getting-started'], { en: 'started', ja: '始める', zh: '开始' }),
+  ...everyLanguage('tutorial/', ['vscode-tutorial'], { en: 'tutorial', ja: 'チュートリアル', zh: '教程' }),
   ...everyLanguage('editors/', ['editor-setup'], { en: 'setup', ja: 'エディター設定', zh: '编辑器设置' }),
   ...everyLanguage('configuration/', ['configuration'], { en: 'Configuring', ja: '設定', zh: '配置' }),
   ...everyLanguage('fsharp/', FSHARP_PAGE, { en: 'completion', ja: '補完', zh: '补全' }),
@@ -24,7 +25,7 @@ const WALKTHROUGHS = [
   ...everyLanguage('hover/', ['hover'], { en: 'Hover', ja: 'ホバー', zh: '悬停' }),
   ...everyLanguage('go-to-definition/', ['navigation'], { en: 'definition', ja: '定義', zh: '定义' }),
   ...everyLanguage('diagnostics/', ['diagnostics'], { en: 'Diagnostics', ja: '診断', zh: '诊断' }),
-  ...everyLanguage('refactoring/', ['refactoring'], { en: 'Refactoring', ja: 'リファクタリング', zh: '重构' }),
+  ...everyLanguage('refactoring/', ['refactoring-lesson', 'refactoring'], { en: 'Lesson', ja: 'レッスン', zh: '课程' }),
   ...everyLanguage('context-menus/', ['context-menus'], { en: 'context', ja: 'コンテキストメニュー', zh: '上下文菜单' }),
   ...everyLanguage('nuget/', ['nuget'], { en: 'NuGet', ja: 'NuGet', zh: 'NuGet' }),
   ...everyLanguage('profiler/', PROFILER_PAGE, { en: 'Profiling', ja: 'プロファイリング', zh: '分析' }),
@@ -117,3 +118,24 @@ test('articles and docs never autoplay; readers start every film themselves', as
     expect((await playback(player)).paused, `${path} film waits for the reader`).toBe(true);
   }
 });
+
+// [WEB-DESIGN-MEDIA-CHAPTERS] The tutorial's film carries its chapters, and its page lists
+// them, each titled as the VS Code walkthrough titles the step and opening the film there.
+const TUTORIAL_STEPS = { '': ['Open an F# file', 0, 'Hover a symbol', 12], '/ja': ['F# ファイルを開く', 0, 'シンボルにホバーする', 12], '/zh': ['打开一个 F# 文件', 0, '悬停查看符号', 12] };
+for (const [prefix, [first, firstAt, second, secondAt]] of Object.entries(TUTORIAL_STEPS)) {
+  test(`${prefix}/docs/tutorial/ lists the film's chapters in its own language`, async ({ page, request }) => {
+    await page.goto(`${prefix}/docs/tutorial/`);
+    const track = page.locator('figure video track[kind="chapters"]');
+    await expect(track).toHaveAttribute('src', '/assets/videos/vscode-tutorial.chapters.vtt');
+    await expectPlayable(request, ['/assets/videos/vscode-tutorial.chapters.vtt'], 'text/vtt');
+    const chapters = page.locator('main ol li[data-step]');
+    await expect(chapters).toHaveCount(13);
+    await expect(chapters.first()).toHaveAttribute('data-step', 'FSharp.OpenFile');
+    await expect(chapters.first()).toContainText(first);
+    await expect(chapters.nth(1)).toContainText(second);
+    await expect(chapters.first().locator('a')).toHaveAttribute('href', `${prefix}/videos/vscode-tutorial/?t=${firstAt}`);
+    await expect(chapters.nth(1).locator('a')).toHaveAttribute('href', `${prefix}/videos/vscode-tutorial/?t=${secondAt}`);
+    await expect(chapters.nth(1).locator('a')).toHaveText('0:12');
+    await expect(chapters.nth(7), 'C# follows F#').toHaveAttribute('data-step', 'CSharp.OpenFile');
+  });
+}
diff --git a/src/website/tests/video-discovery.spec.js b/src/website/tests/video-discovery.spec.js
index f8310f39..3bad84bc 100644
--- a/src/website/tests/video-discovery.spec.js
+++ b/src/website/tests/video-discovery.spec.js
@@ -12,7 +12,7 @@ const mp4Of = (id) => `/assets/videos/${id}.mp4`;
 const PREVIEWS = {
   '/docs/': 'getting-started', '/docs/editors/': 'editor-setup', '/docs/configuration/': 'configuration',
   '/docs/fsharp/': 'fsharp-language', '/docs/blazor/': 'blazor', '/docs/completions/': 'code-completions', '/docs/hover/': 'hover',
-  '/docs/go-to-definition/': 'navigation', '/docs/diagnostics/': 'diagnostics', '/docs/refactoring/': 'refactoring',
+  '/docs/go-to-definition/': 'navigation', '/docs/diagnostics/': 'diagnostics', '/docs/refactoring/': 'refactoring-lesson',
   '/docs/context-menus/': 'context-menus', '/docs/nuget/': 'nuget', '/docs/profiler/': 'profiler-csharp',
   '/docs/memory-leaks/': 'profiler-fix-memory-leak', '/docs/fsharp-profiling/': 'profiler-fsharp',
   '/docs/architecture/': 'architecture', '/docs/contributing/': 'contributing',
diff --git a/src/website/tools/profiler-film/README.md b/src/website/tools/profiler-film/README.md
deleted file mode 100644
index e7f2a124..00000000
--- a/src/website/tools/profiler-film/README.md
+++ /dev/null
@@ -1,119 +0,0 @@
-# Profiler films
-
-This folder holds the scripts that shoot and publish the videos and stills on sharplsp.dev. Every frame is the real extension: an isolated VS Code (its own user data and extensions, never yours) runs the packaged VSIX against a demo app. Nothing in the editor is mocked. The rules are in [WEB-DESIGN-MEDIA](../../../../docs/specs/DESIGN-SYSTEM.md).
-
-## Make a film
-
-You need a packaged VSIX, ffmpeg with libvpx and libopus, cwebp, and the .NET 10 SDK. Install the narration voice once:
-
-```sh
-npm ci --prefix src/website                            # Playwright
-npm ci --prefix src/website/tools/profiler-film        # kokoro-js, for narration
-```
-
-The first narrated publish downloads the voice model (about 310 MB) into `node_modules`; a later `npm ci` there deletes it again.
-
-Then shoot and publish a film by its name in `films/`:
-
-```sh
-make _film FILM=fsharp             # package the VSIX, shoot, then publish
-make _film FILM=fsharp PUBLISH=1   # publish the last shoot again
-```
-
-`make _film` runs `node src/website/tools/profiler-film/film.mjs <film> [--publish]`, which you can also call directly after `make _build-vsix VSIX_PREBUILT=1`.
-
-A shoot takes a few minutes and lands in `out/<film>/`, which is gitignored. Publishing writes the MP4, WebM, poster, captions and stills into `src/website/src/assets/`. Add or update the video's entry in `src/website/src/_data/videos.json` (its length, its upload date, and its label and caption in each language), then place it on a page with `{% video "<name>" %}`.
-
-| Film | Video | Docs page |
-|---|---|---|
-| `getting-started` | `getting-started` | Getting Started |
-| `editor-setup` | `editor-setup` | Editor Setup |
-| `configuration` | `configuration` | Configuration |
-| `fsharp-language` | `fsharp-language` | F# Language Support |
-| `completions` | `code-completions` | Code Completions |
-| `hover` | `hover` | Hover and Quick Info |
-| `navigation` | `navigation` | Go to Definition |
-| `diagnostics` | `diagnostics` | Diagnostics |
-| `refactoring` | `refactoring` | Refactoring & Code Actions |
-| `context-menus` | `context-menus` | Context Menus |
-| `nuget` | `nuget` | NuGet Package Manager |
-| `csharp` | `profiler-csharp` | Profiler |
-| `fsharp` | `profiler-fsharp` | Profiling F# (and the F# page) |
-| `leak` | `profiler-fix-memory-leak` | Fix a Memory Leak |
-| `architecture` | `architecture` | Architecture |
-| `contributing` | `contributing` | Contributing |
-| `films/profiler/` | `profiler-film` | The home page: the one-minute composited film (`capture.mjs`, then `render.mjs`) |
-| `doc-stills` | (stills only) | Each feature page's still and the launch post's figures, in `screenshots/docs/` |
-
-Every film but `films/profiler/` is narrated. The Zed page has none: Zed is a native application, and filming it would mean recording the real desktop.
-
-## Add a film
-
-A film is one file in `films/`. It exports the video's name, the demo it is shot on, the poster frame and its scenes, and optionally the workspace `settings` it is shot with (the profiler's by default):
-
-```js
-import { LANGUAGE, hoverEach, prepareCode, scene } from '../kit/acts/language.mjs';
-import { SHOP } from '../kit/set.mjs';
-
-export default {
-  name: 'hover',
-  demo: SHOP,
-  settings: LANGUAGE,
-  narration: 'hover.narration.json', // optional
-  poster: { scene: 'fsharp', at: 4 },
-  scenes: [
-    { offCamera: prepareCode('Program.fs', { line: 9, word: 'generate' }) },
-    scene('fsharp', 1, 'F#: the inferred signature, with your doc comment', ({ page }) => hoverEach(page, [{ line: 9, word: 'generate' }])),
-  ],
-};
-```
-
-A scene is either a clip or a step off camera:
-
-- `{ clip, act, speed, retries }`: `act(shot)` is recorded in real time as `<clip>.mp4`. It plays back at `speed`, and the frame shows a speed badge whenever `speed` is above 1. `retries` shoots a failed take again. `scene(clip, step, caption, act, { speed, retries })` builds one with its numbered caption.
-- `{ offCamera }`: `offCamera(shot)` runs between clips and is never recorded. Use it for setup, rebuilds and stills.
-
-A film may also take stills (`snap(shot, name)`), published as `screenshots/<stillsFolder>/<name>.webp` (`profiler` unless the film names another folder). A film with no clips, like `doc-stills`, publishes only its stills.
-
-`shot` is `{ page, set, app, workspace, stills }`: the Playwright page, the recorder, the demo process, the staged workspace and the stills folder.
-
-The kit tells the common stories, so a film only supplies its words:
-
-| Module | What it gives a film |
-|---|---|
-| `kit/acts/cpu.mjs` | `cpuLoop(story, first)`: Profile CPU, sampling at 4×, the heat map, the results panel, and optional stills |
-| `kit/acts/memory.mjs` | `memoryLoop(story, first)`: Track Memory, growth at 8×, a suspect, the retention graph, the fix typed in, and the fixed build tracked again |
-| `kit/acts/tour.mjs` | `profilerTour(cpu, memory)`: both loops on one demo, as the C# and F# profiler films tell them |
-| `kit/acts/language.mjs` | The language films' `LANGUAGE` settings, `prepareCode` and `warm` (wait until an engine answers a hover), `scene`, and the editor's own moves: `complete`, `quickFix`, `renameTo`, `navigate`, `peekReferences`, `hoverEach`, `settingsEditor` |
-| `kit/acts/shop.mjs` | Moves on the Shop demo several films share: code typed through completion in F# and C#, a generated match case, a rename across files |
-| `kit/acts/explorer.mjs` | The Solution Explorer: `openMenu` on a row, `pickMenu`, `unfold` |
-| `kit/code.mjs` | `wordOn`, `findWord`, `hoverOn` and `clickOn`: a word on a line of the editor, found on screen |
-| `kit/scenes.mjs` | `prepare(file)`, `switchTo(file)`, `restart`, `startOnRow(step, text, action, status)`, and the shoot and publish engine |
-| `kit/overlay.mjs` | `caption(page, step, text, speed)`, `pointAt(page, at)` (the pointer glides to what a film acts on) and `ringClick(page, cues, locator, label)` |
-| `kit/workbench.mjs` | Editor moves: the Processes view and its demo row, `openFile`, `goTo`, `typeAt`, `toggleMaximised`, `panel` and more |
-| `kit/camera.mjs` | `snap(shot, name)` takes a still, published as `<name>.webp` |
-| `kit/set.mjs` | The sets (`STOREFRONT`, `FS_STOREFRONT`, `SHOP` with both in one solution, and `REPO`, a clean copy of this repository) and `onSet`, which stages one beside an isolated editor |
-| `kit/sound/` | Narration (`voice.mjs`), the original score (`score.mjs`) and the mix (`soundtrack.mjs`) |
-
-A new demo app goes in `demos/<folder>/`, with one project and an empty `Directory.Build.props`, and is declared in `kit/set.mjs`. It must print a line to stdout once it is running.
-
-**Nothing personal reaches a frame.** The demo is staged under `/tmp`. The editor runs on a copy-on-write clone of the .NET install at `/tmp/sharplsp-film-dotnet` (made once, sharing the original's blocks) with its login-shell environment off, so the SDK path the extension reports and the commands its terminals print are neutral. A failed shoot leaves `out/<film>/failure.png` and the editor's logs in `out/<film>/logs`.
-
-## Narration
-
-A narrated film has a script next to it, `films/<film>.narration.json`:
-
-```json
-{
-  "voice": "af_heart",
-  "say": { "F#": "F sharp" },
-  "music": { "en": "[Gentle music]", "ja": "[穏やかな音楽]", "zh": "[舒缓的音乐]" },
-  "lines": [{ "scene": "heat", "en": "…", "ja": "…", "zh": "…" }]
-}
-```
-
-- **Voice.** Kokoro-82M (Apache-2.0) speaks each line in English on this machine, through `kokoro-js`. Never use a speech service or the operating system's voices: their licences forbid publishing.
-- **Pronunciation.** `say` respells words for the voice only. The captions keep the original spelling.
-- **Timing.** Each line starts just after its scene's cut. A scene holds its last frame until its line has been spoken, so keep lines about as long as their scenes.
-- **Music.** `kit/sound/score.mjs` synthesises an original score, so no film carries licensed music. It ducks under the voice, and the mix is normalised to -16 LUFS.
-- **Captions.** Every language in `music` gets WebVTT captions, `<name>.<lang>.vtt`. List those languages under `captions` in `videos.json`, and the page's own language shows by default.
diff --git a/src/website/tools/profiler-film/film.mjs b/src/website/tools/profiler-film/film.mjs
deleted file mode 100644
index e0554f50..00000000
--- a/src/website/tools/profiler-film/film.mjs
+++ /dev/null
@@ -1,31 +0,0 @@
-// Implements [WEB-DESIGN-MEDIA]. Shoots and publishes one walkthrough film from
-// films/<film>.mjs. See README.md.
-//
-//   make _build-vsix VSIX_PREBUILT=1
-//   node src/website/tools/profiler-film/film.mjs <film>              (shoot, then publish)
-//   node src/website/tools/profiler-film/film.mjs <film> --publish    (publish the last shoot)
-//
-// A shoot lands in out/<film>/ (gitignored); publishing writes the site's video,
-// poster, captions and stills under src/website/src/assets.
-import fs from 'node:fs';
-import path from 'node:path';
-import { fileURLToPath } from 'node:url';
-import { out as filmsOut, publishStills } from './kit/encode.mjs';
-import { publishWalkthrough, shootWalkthrough } from './kit/scenes.mjs';
-
-const films = path.join(path.dirname(fileURLToPath(import.meta.url)), 'films');
-const available = fs.readdirSync(films).filter((file) => file.endsWith('.mjs')).map((file) => file.replace(/\.mjs$/, ''));
-const [id] = process.argv.slice(2).filter((arg) => !arg.startsWith('--'));
-if (!available.includes(id)) throw new Error(`usage: film.mjs <${available.join('|')}> [--publish]`);
-
-const film = (await import(path.join(films, `${id}.mjs`))).default;
-const out = path.join(filmsOut, id);
-const narration = film.narration && JSON.parse(fs.readFileSync(path.join(films, film.narration), 'utf8'));
-
-if (!process.argv.includes('--publish')) await shootWalkthrough({ demo: film.demo, out, scenes: film.scenes, settings: film.settings });
-if (fs.existsSync(path.join(out, 'stills'))) publishStills(path.join(out, 'stills'), film.stillsFolder);
-// A film of stills alone has no clips to cut.
-if (film.scenes.some((scene) => scene.clip)) {
-  const length = await publishWalkthrough({ name: film.name, out, scenes: film.scenes, posterAt: film.poster, narration });
-  process.stdout.write(`${film.name}: ${length.toFixed(1)}s published\n`);
-} else process.stdout.write(`${film.name}: stills published\n`);
diff --git a/src/website/tools/profiler-film/films/profiler/render.mjs b/src/website/tools/profiler-film/films/profiler/render.mjs
deleted file mode 100644
index 9ee5d6d1..00000000
--- a/src/website/tools/profiler-film/films/profiler/render.mjs
+++ /dev/null
@@ -1,107 +0,0 @@
-// Implements [WEB-DESIGN-MEDIA]. Renders the profiler film and the website's profiler media from capture.mjs's
-// output: steps film.html frame by frame in headless Chromium, pipes the frames
-// to ffmpeg, then writes the site assets (film MP4/WebM + poster, the unedited
-// recordings + posters, WebP stills).
-//
-//   node src/website/tools/profiler-film/films/profiler/render.mjs
-//   node src/website/tools/profiler-film/films/profiler/render.mjs --preview 2,9.5,24   (stills of those seconds)
-import { spawn } from 'node:child_process';
-import fs from 'node:fs';
-import path from 'node:path';
-import { fileURLToPath } from 'node:url';
-import { chromium } from '@playwright/test';
-import { H264, VP9, ffmpeg, out, poster, publishStills, videos } from '../../kit/encode.mjs';
-
-const here = path.dirname(fileURLToPath(import.meta.url));
-const FPS = 30;
-const POSTER_AT = 25.5;
-
-/** Explode a clip into numbered JPEGs the film steps through; returns the frame count. */
-function explode(name) {
-  const dir = path.join(out, 'film', name);
-  fs.rmSync(dir, { recursive: true, force: true });
-  fs.mkdirSync(dir, { recursive: true });
-  ffmpeg(['-i', path.join(out, 'clips', `${name}.mp4`), '-vf', `fps=${FPS}`, '-q:v', '2', path.join(dir, '%05d.jpg')], name);
-  return fs.readdirSync(dir).filter((file) => file.endsWith('.jpg')).length;
-}
-
-function filmData() {
-  const clip = (name) => ({
-    frames: explode(name),
-    cues: JSON.parse(fs.readFileSync(path.join(out, 'clips', `${name}.cues.json`), 'utf8')),
-  });
-  return { cpu: clip('cpu'), memory: clip('memory') };
-}
-
-/** Open the film page with the clips' data; resolves to the page and the film's length. */
-async function openFilm(browser) {
-  const page = await browser.newPage({ viewport: { width: 1920, height: 1080 }, deviceScaleFactor: 1 });
-  await page.addInitScript((film) => {
-    window.FILM_DATA = film;
-  }, filmData());
-  await page.goto(`file://${path.join(here, 'film.html')}`);
-  await page.evaluate(() => document.fonts.ready);
-  const [duration, scenes] = await page.evaluate(() => [window.FILM_DURATION, window.FILM_SCENES]);
-  process.stdout.write(`${JSON.stringify(scenes)}\n`);
-  return { page, duration };
-}
-
-async function preview(times) {
-  const browser = await chromium.launch();
-  const { page, duration } = await openFilm(browser);
-  fs.mkdirSync(path.join(out, 'preview'), { recursive: true });
-  for (const t of times) {
-    await page.evaluate((at) => window.renderFrame(at), t);
-    await page.screenshot({ path: path.join(out, 'preview', `${t}.png`) });
-  }
-  await browser.close();
-  process.stdout.write(`film is ${duration.toFixed(1)}s; previews in out/preview\n`);
-}
-
-/** Step the film and pipe every frame, losslessly, into the master encode. */
-async function renderMaster(master) {
-  const browser = await chromium.launch();
-  const { page, duration } = await openFilm(browser);
-  const encoder = spawn('ffmpeg', [
-    '-y', '-loglevel', 'error', '-f', 'image2pipe', '-framerate', String(FPS), '-c:v', 'png', '-i', '-',
-    '-c:v', 'libx264', '-preset', 'slow', '-crf', '12', '-pix_fmt', 'yuv420p', master,
-  ], { stdio: ['pipe', 'inherit', 'inherit'] });
-  const done = new Promise((resolve, reject) => encoder.once('exit', (code) => (code === 0 ? resolve() : reject(new Error(`master encode exited ${code}`)))));
-  for (let frame = 0; frame < Math.ceil(duration * FPS); frame++) {
-    await page.evaluate((t) => window.renderFrame(t), frame / FPS);
-    if (!encoder.stdin.write(await page.screenshot({ type: 'png' }))) await new Promise((r) => encoder.stdin.once('drain', r));
-  }
-  encoder.stdin.end();
-  await done;
-  await browser.close();
-  return duration;
-}
-
-/** The site's film: H.264 for reach, VP9 for size, and a poster frame. */
-function publishFilm(master) {
-  ffmpeg(['-i', master, ...H264, path.join(videos, 'profiler-film.mp4')], 'film mp4');
-  ffmpeg(['-i', master, ...VP9, path.join(videos, 'profiler-film.webm')], 'film webm');
-  poster(master, POSTER_AT, 'profiler-film');
-}
-
-/** The unedited recordings: CPU in real time, memory as a 3x time-lapse. */
-function publishRecordings() {
-  ffmpeg(['-i', path.join(out, 'clips/cpu.mp4'), '-vf', 'scale=1920:-2:flags=lanczos', ...H264, path.join(videos, 'profiler-cpu-recording.mp4')], 'cpu recording');
-  ffmpeg(['-i', path.join(out, 'clips/memory.mp4'), '-vf', 'setpts=PTS/3,fps=30,scale=1920:-2:flags=lanczos', ...H264, path.join(videos, 'profiler-memory-timelapse.mp4')], 'memory recording');
-  poster(path.join(videos, 'profiler-cpu-recording.mp4'), 16, 'profiler-cpu-recording');
-  poster(path.join(videos, 'profiler-memory-timelapse.mp4'), 14, 'profiler-memory-timelapse');
-}
-
-async function main() {
-  const flag = process.argv.indexOf('--preview');
-  if (flag > 0) return preview(process.argv[flag + 1].split(',').map(Number));
-  fs.mkdirSync(videos, { recursive: true });
-  const master = path.join(out, 'film-master.mp4');
-  const duration = await renderMaster(master);
-  publishFilm(master);
-  publishRecordings();
-  publishStills(path.join(out, 'stills'));
-  process.stdout.write(`rendered ${duration.toFixed(1)}s film and the profiler media\n`);
-}
-
-await main();
diff --git a/src/website/tools/profiler-film/films/refactoring.mjs b/src/website/tools/profiler-film/films/refactoring.mjs
deleted file mode 100644
index bc8dd78c..00000000
--- a/src/website/tools/profiler-film/films/refactoring.mjs
+++ /dev/null
@@ -1,36 +0,0 @@
-// Implements [WEB-DESIGN-MEDIA]. The "Refactoring & Code Actions" walkthrough
-// (`refactoring`): an F# match completed and a function renamed across files,
-// then C# fixes that generate a missing method and add a missing using.
-//
-//   node src/website/tools/profiler-film/film.mjs refactoring
-import { LANGUAGE, quickFix, scene } from '../kit/acts/language.mjs';
-import { AT_PIPELINE, AT_SESSIONS, missingCase, ready, renameAcrossFiles } from '../kit/acts/shop.mjs';
-import { SHOP } from '../kit/set.mjs';
-import { openFile, sleep, typeAt } from '../kit/workbench.mjs';
-
-const PIPELINE = 'CheckoutPipeline.cs';
-
-/** Type a line after `line` that breaks the build, then apply the fix titled `title` at `word`. */
-const repair = (line, text, word, title) => async ({ page, set }) => {
-  await openFile(page, PIPELINE);
-  await typeAt(page, { line, append: true, text: `\n        ${text}` });
-  await page.keyboard.press('Escape');
-  await sleep(2000);
-  await quickFix(page, set.cues, { line: line + 1, word }, title);
-  await sleep(2500);
-};
-
-export default {
-  name: 'refactoring',
-  demo: SHOP,
-  settings: LANGUAGE,
-  narration: 'refactoring.narration.json',
-  poster: { scene: 'generate', at: 7 },
-  scenes: [
-    ...ready(AT_PIPELINE, AT_SESSIONS),
-    scene('fsharp', 1, 'Cmd+. on an F# match: generate the missing union case', missingCase, { speed: 2 }),
-    scene('rename', 2, 'Rename (F2) reaches every file in the project', renameAcrossFiles),
-    scene('generate', 3, 'C#: call a method that doesn\'t exist, and generate it', repair(12, 'var receipt = Receipt(invoice);', 'Receipt', 'Generate method')),
-    scene('using', 4, 'Use a type, and add its missing using', repair(13, 'var builder = new StringBuilder();', 'StringBuilder', 'using System.Text')),
-  ],
-};
diff --git a/src/website/tools/profiler-film/kit/scenes.mjs b/src/website/tools/profiler-film/kit/scenes.mjs
deleted file mode 100644
index 5ec92d8a..00000000
--- a/src/website/tools/profiler-film/kit/scenes.mjs
+++ /dev/null
@@ -1,162 +0,0 @@
-// Implements [WEB-DESIGN-MEDIA]. A walkthrough is a list of scenes. A scene is
-// either a clip, `{ clip, act, speed, retries }`, shot in real time and played
-// back at `speed`, or an `{ offCamera }` step between clips. shootWalkthrough
-// shoots the list on a demo's set; publishWalkthrough cuts the clips together,
-// lays a narrated film's voice, score and captions over the cut, and writes the
-// site's MP4, WebM and poster.
-import fs from 'node:fs';
-import os from 'node:os';
-import path from 'node:path';
-import { cueLog, record } from './camera.mjs';
-import { AAC, H264, OPUS, VP9, audible, duration, ffmpeg, poster, videos } from './encode.mjs';
-import { runCommand } from './editor.mjs';
-import { caption, ringClick } from './overlay.mjs';
-import { onSet } from './set.mjs';
-import { soundtrack } from './sound/soundtrack.mjs';
-import { writeCaptions } from './sound/voice.mjs';
-import { clickSharpLspIcon, demoRow, openFile, rowButton, sleep, waitForDemoRow } from './workbench.mjs';
-
-/**
- * Workspace settings: snapshots every 10 seconds, the interval the guide
- * recommends, so a reference walk never overlaps an auto-capture; and an editor
- * that lets a fix be typed key by key, exactly as written.
- */
-const WORKSPACE = {
-  'sharplsp.profiler.autoSnapshotInterval': 10,
-  'editor.autoClosingBrackets': 'never',
-  'editor.autoClosingQuotes': 'never',
-  'editor.autoSurround': 'never',
-  'editor.autoIndent': 'none',
-  'editor.formatOnType': false,
-  'editor.quickSuggestions': { other: 'off', comments: 'off', strings: 'off' },
-  'editor.suggestOnTriggerCharacters': false,
-  'editor.parameterHints.enabled': false,
-  'editor.inlineSuggest.enabled': false,
-  'editor.hover.enabled': false,
-};
-
-/**
- * A scene that captions step `step` and clicks `action` on the live demo's row,
- * then waits for the status bar to show `status`. Other processes come and go in
- * the list, so a click that started nothing fails the take.
- */
-export const startOnRow = (step, text, action, status) => async ({ page, set }) => {
-  await caption(page, step, text);
-  await demoRow(page).hover();
-  await sleep(2500);
-  await ringClick(page, set.cues, await rowButton(page, action), action);
-  await page.locator('.statusbar', { hasText: status }).waitFor({ timeout: 15_000 });
-  await sleep(1000);
-};
-
-/** Off camera: a fresh process, so an act starts from a small heap. */
-export async function restart({ page, app }) {
-  app.stop();
-  await app.start();
-  await waitForDemoRow(page);
-}
-
-/** Off camera: notifications silenced, the SharpLsp view open, `file` loaded, beside a fresh process. */
-export const prepare = (file) => async (shot) => {
-  await runCommand(shot.page, 'Notifications: Toggle Do Not Disturb Mode');
-  await clickSharpLspIcon(shot.page);
-  await openFile(shot.page, file);
-  await sleep(15_000);
-  await restart(shot);
-};
-
-/** Off camera: close every editor, open `file`, and restart the demo for the next act. */
-export const switchTo = (file) => async (shot) => {
-  await runCommand(shot.page, 'View: Close All Editors');
-  await openFile(shot.page, file);
-  await restart(shot);
-};
-
-/** Shoot a scene again when a refreshing dashboard closes its palette, or a type is not listed yet. */
-async function retried(attempts, shootScene) {
-  for (let attempt = 1; ; attempt++) {
-    try {
-      return await shootScene();
-    } catch (error) {
-      if (attempt >= attempts) throw error;
-      process.stdout.write(`retrying a take: ${error.message.split('\n')[0]}\n`);
-      await sleep(3500);
-    }
-  }
-}
-
-async function shootScenes(shot, scenes) {
-  for (const scene of scenes) {
-    if (scene.offCamera) await scene.offCamera(shot);
-    else await retried(scene.retries ?? 1, () => record(shot.set, scene.clip, () => scene.act(shot)));
-  }
-}
-
-/**
- * Stage `demo`, open it in an isolated VS Code with workspace `settings` (the
- * profiler films' by default), and shoot `scenes` into `<out>/clips`, stills
- * into `<out>/stills`.
- */
-export async function shootWalkthrough({ demo, out, scenes, settings = WORKSPACE }) {
-  const clips = path.join(out, 'clips');
-  fs.mkdirSync(clips, { recursive: true });
-  await onSet({ demo, out, settings }, ({ page, cdp, app, workspace }) => {
-    const set = { cdp, cues: cueLog(clips), frames: path.join(out, 'frames'), clips };
-    return shootScenes({ page, set, app, workspace, stills: path.join(out, 'stills') }, scenes);
-  });
-}
-
-/** Each shot scene with its clip and its length on screen, in seconds, at its speed. */
-const shotsOf = (out, scenes) =>
-  scenes
-    .filter((scene) => scene.clip)
-    .map((scene) => {
-      const file = path.join(out, 'clips', `${scene.clip}.mp4`);
-      return { ...scene, file, length: duration(file) / (scene.speed ?? 1) };
-    });
-
-/** Cut the shots together at their speeds, each held on its last frame for its `hold`, into a lossless master. */
-function cut(shots, master) {
-  const inputs = shots.flatMap((shot) => ['-i', shot.file]);
-  const chains = shots.map(
-    (shot, i) => `[${i}:v]setpts=PTS/${shot.speed ?? 1},fps=30,scale=1920:-2:flags=lanczos,tpad=stop_mode=clone:stop_duration=${(shot.hold ?? 0).toFixed(3)}[v${i}]`,
-  );
-  const joined = `${shots.map((_, i) => `[v${i}]`).join('')}concat=n=${shots.length}:v=1:a=0[cut]`;
-  const lossless = ['-c:v', 'libx264', '-preset', 'slow', '-crf', '12', '-pix_fmt', 'yuv420p'];
-  ffmpeg([...inputs, '-filter_complex', `${chains.join(';')};${joined}`, '-map', '[cut]', ...lossless, master], path.basename(master));
-}
-
-/** The site's MP4 and WebM of the cut, with `audio` as their soundtrack when there is one. */
-function encodeFilm(name, out, shots, audio) {
-  const master = path.join(out, `${name}-master.mp4`);
-  cut(shots, master);
-  for (const [video, sound, extension] of [[H264, AAC, 'mp4'], [VP9, OPUS, 'webm']]) {
-    const inputs = audio ? ['-i', master, '-i', audio, '-map', '0:v', '-map', '1:a', ...audible(video), ...sound, '-shortest'] : ['-i', master, ...video];
-    ffmpeg([...inputs, path.join(videos, `${name}.${extension}`)], `${name} ${extension}`);
-  }
-}
-
-/** The narrated film: speech, score and captions laid over the cut, which holds each shot until its line is spoken. */
-async function narrated(name, out, shots, script) {
-  const dir = fs.mkdtempSync(path.join(os.tmpdir(), `${name}-sound-`));
-  try {
-    const film = await soundtrack(script, shots, dir);
-    encodeFilm(name, out, film.shots, film.audio);
-    writeCaptions(script, film.lines, videos, name);
-    return film.duration;
-  } finally {
-    fs.rmSync(dir, { recursive: true, force: true });
-  }
-}
-
-/**
- * Publish the MP4, the WebM and the poster; with a `narration` script, also its
- * voice, score and captions. Resolves to the film's length in seconds.
- */
-export async function publishWalkthrough({ name, out, scenes, posterAt, narration }) {
-  const shots = shotsOf(out, scenes);
-  const length = narration ? await narrated(name, out, shots, narration) : shots.reduce((total, shot) => total + shot.length, 0);
-  if (!narration) encodeFilm(name, out, shots);
-  poster(path.join(out, 'clips', `${posterAt.scene}.mp4`), posterAt.at, name);
-  return length;
-}
diff --git a/src/website/tools/profiler-film/.gitignore b/src/website/tools/video/.gitignore
similarity index 100%
rename from src/website/tools/profiler-film/.gitignore
rename to src/website/tools/video/.gitignore
diff --git a/src/website/tools/video/README.md b/src/website/tools/video/README.md
new file mode 100644
index 00000000..60b7d25c
--- /dev/null
+++ b/src/website/tools/video/README.md
@@ -0,0 +1,228 @@
+# Videos
+
+Every video and still on sharplsp.dev is made here. A film is a folder in `films/`, and one command makes it:
+
+```sh
+node src/website/tools/video/film.mjs <film>
+```
+
+Every frame shows the real extension. An isolated VS Code, with its own user data and extensions and never yours, runs the packaged VSIX against a real .NET demo app. Nothing in the editor is mocked. The rules are in [WEB-DESIGN-MEDIA](../../../../docs/specs/DESIGN-SYSTEM.md).
+
+## Layout
+
+```text
+video/
+  film.mjs                one entry point: shoot, publish or preview any film by its folder name
+  films/<film>/           one folder per film: film.mjs, plus narration.json when it is narrated
+  kit/                    all shared code. A film holds only its own words, timings and edits
+    acts/                 stories several films tell (the CPU and memory loops, language moves, the Shop demo)
+    lesson/               the lesson deck (deck.html, deck.js) and its pipeline (lesson.mjs)
+    sound/                voice, the two scores, and the mix
+  templates/walkthrough/  copy this to start a walkthrough
+  templates/lesson/       copy this to start a lesson
+  demos/                  the .NET apps films are shot on
+  heroes/                 blog hero images, as HTML pages
+  out/<film>/             each film's shoot and render working files (gitignored)
+```
+
+The rule: if two films could share a piece of code, it lives in `kit/`.
+
+## Kinds of film
+
+What a film's `film.mjs` exports decides its kind. `film.mjs` runs each kind the same way:
+
+| Kind | Exports | How it is made | Example |
+|---|---|---|---|
+| Walkthrough | `scenes` | Scenes are shot as real-time clips, cut through the [camera](#camera), then narrated | `hover`, `blazor` |
+| Stills | `scenes` with no clips | The same shoot, but it publishes only stills | `doc-stills` |
+| Lesson | `lesson` | Slides around footage cut from published walkthroughs. Nothing is shot | `refactoring-lesson` |
+| Composite | `shoot`, `publish`, `preview` | The film shoots its own footage and renders its own page over it | `profiler` |
+
+## Commands
+
+```sh
+make _build-vsix VSIX_PREBUILT=1                                # the VSIX every shoot installs
+node src/website/tools/video/film.mjs <film>                    # shoot, then publish
+node src/website/tools/video/film.mjs <film> --publish          # publish the last shoot again
+node src/website/tools/video/film.mjs <film> --preview 2,20,60  # stills at those seconds (lessons, composites)
+make _film FILM=<film> [PUBLISH=1]                              # packages the VSIX, then runs the above
+```
+
+You need ffmpeg (with libvpx and libopus), cwebp and the .NET 10 SDK. Install the node dependencies once:
+
+```sh
+npm ci --prefix src/website               # Playwright
+npm ci --prefix src/website/tools/video   # kokoro-js, the narration voice
+```
+
+The first narrated publish downloads the voice model (about 310 MB) into `node_modules`. Running `npm ci` there again deletes it.
+
+## From shoot to page
+
+1. **Shoot.** The demo is copied to `/tmp`, built and opened. Each clip is recorded into `out/<film>/clips/`, with its camera track beside it.
+2. **Publish.** Clips are cut through the camera, voiced and scored. The output goes to `src/website/src/assets/`:
+   - `videos/<name>.mp4` and `videos/<name>.webm`
+   - `videos/<name>-poster.webp`
+   - `videos/<name>.<lang>.vtt`
+   - `screenshots/<folder>/*.webp`
+3. **Catalogue.** Add or update the video in `src/website/src/_data/videos.json`: its length, upload date, and label and caption in each language.
+4. **Place.** Put `{% video "<name>" %}` on a page.
+
+A failed shoot leaves `out/<film>/failure.png` and the editor's logs in `out/<film>/logs/`.
+
+## Films
+
+| Film | Kind | Video | Page |
+|---|---|---|---|
+| `getting-started` | walkthrough | `getting-started` | Getting Started |
+| `editor-setup` | walkthrough | `editor-setup` | Editor Setup |
+| `configuration` | walkthrough | `configuration` | Configuration |
+| `fsharp-language` | walkthrough | `fsharp-language` | F# Language Support |
+| `completions` | walkthrough | `code-completions` | Code Completions |
+| `hover` | walkthrough | `hover` | Hover and Quick Info |
+| `navigation` | walkthrough | `navigation` | Go to Definition |
+| `diagnostics` | walkthrough | `diagnostics` | Diagnostics |
+| `refactoring` | walkthrough | `refactoring` | Refactoring & Code Actions |
+| `refactoring-lesson` | lesson | `refactoring-lesson` | Refactoring & Code Actions |
+| `context-menus` | walkthrough | `context-menus` | Context Menus |
+| `nuget` | walkthrough | `nuget` | NuGet Package Manager |
+| `blazor` | walkthrough | `blazor` | Blazor |
+| `csharp` | walkthrough | `profiler-csharp` | Profiler |
+| `fsharp` | walkthrough | `profiler-fsharp` | Profiling F# |
+| `leak` | walkthrough | `profiler-fix-memory-leak` | Fix a Memory Leak |
+| `architecture` | walkthrough | `architecture` | Architecture |
+| `contributing` | walkthrough | `contributing` | Contributing |
+| `profiler` | composite | `profiler-film`, `profiler-cpu-recording`, `profiler-memory-timelapse` | Home page, Profiler |
+| `doc-stills` | stills | (each feature page's still) | Every docs page, the launch post |
+
+Every film except `profiler` and `doc-stills` is narrated. Zed has no film: it is a native app, and filming it would mean recording the real desktop.
+
+## Make a walkthrough
+
+```sh
+cp -R src/website/tools/video/templates/walkthrough src/website/tools/video/films/<name>
+```
+
+The finished reference is `films/blazor/`. `film.mjs` exports:
+
+- `name`: the video's name.
+- `demo`: the set it is shot on, from `kit/set.mjs`.
+- `settings`: workspace settings. `LANGUAGE` from `kit/acts/language.mjs` for language films; otherwise the profiler's.
+- `narration`: the script file beside it.
+- `poster: { scene, at }`: the poster frame.
+- `scenes`: each scene is one of two kinds:
+  - `scene(clip, step, caption, act, { speed, retries })` records `act(shot)` in real time as `<clip>.mp4`, with a numbered step caption.
+    - `speed` fast-forwards playback and shows a speed badge.
+    - `retries` shoots a failed take again.
+  - `{ offCamera: (shot) => … }` runs between clips and is never recorded. Use it for setup, rebuilds and stills.
+
+`shot` is `{ page, set, app, workspace, stills }`: the Playwright page, the recorder, the demo process, the staged workspace and the stills folder. `snap(shot, name)` takes a still, published as `screenshots/<stillsFolder>/<name>.webp`. The folder is `profiler` unless the film names another.
+
+Show F# before C#. A scene never moves the camera itself. It puts the pointer and the text cursor on what it shows (`hoverOn`, `clickOn`, `typeAt`) and holds while the viewer reads.
+
+## Make a lesson
+
+```sh
+cp -R src/website/tools/video/templates/lesson src/website/tools/video/films/<name>
+node src/website/tools/video/film.mjs <name> --preview 2,20,60   # stills, timed from word counts, no speech
+node src/website/tools/video/film.mjs <name>                     # speak, render and publish
+```
+
+A lesson teaches one feature end to end. The reference is `films/refactoring-lesson/`.
+
+- **Slides.** `film.mjs` exports `lesson: { series, slides }`. Each slide has an `id` and a `layout`: `title`, `keys`, `points`, `footage`, `code`, `cards`, `flow` or `recap`. `kit/lesson/deck.js` draws them, and the template uses each layout once.
+- **Lines.** A line's `scene` in `narration.json` is its slide's `id`. A slide holds until its lines are spoken, and an item with `line: n` appears as the slide's n-th line starts.
+- **Footage.** A `footage` slide cuts a published walkthrough. It sets:
+  - `video`: the walkthrough.
+  - `from`, `to`: the seconds to cut.
+  - `crop`: a part of the 1920×1200 frame that leaves out the step caption.
+  - `speed`: for a fast-forwarded stretch, so the speed badge stays on screen.
+- **Pace.** Lessons are quick: the af_bella voice at 1.12×, tight `pacing`, and the `drive` score.
+
+Catalogue the lesson in `videos.json` before the walkthrough it cuts from, and lead its docs page with it. Expand the page into the same lesson: what you will learn, numbered steps with code to try, what happens underneath, and a recap.
+
+## Camera
+
+Every walkthrough clip is framed by one camera, `kit/zoom.mjs`, so no film keys a shot by hand ([WEB-DESIGN-MEDIA-CAMERA](../../../../docs/specs/DESIGN-SYSTEM.md)). While a clip records, `kit/track.mjs` samples 20 times a second:
+
+- where the pointer and the text cursor are;
+- every widget open beside them: a hover, the completion list, a peek, the rename box, a menu, or the Problems panel.
+
+Publishing reads that track:
+
+- **Push in.** The camera opens wide, then pushes in at most 2× on whichever of the pointer and the text cursor moved last, with everything open beside it. It frames a gliding pointer where the pointer stops.
+- **Look ahead.** Each framing also covers the next 1.5 seconds of action, so typing doesn't drag the camera along.
+- **Ease.** Each move takes 0.8 seconds and starts 0.35 seconds before the action it frames.
+- **Pull back.** When nothing is open for 2 seconds, and the quiet lasts at least 2.5 seconds more, the camera pulls back out.
+- **Stay sharp.** Frames are cropped from 3200×2000 footage, so the deepest zoom stays crisp. Step captions and speed badges (`kit/captions.mjs`) are laid over the cut after the camera, so they never move.
+
+Tune the camera in `CAMERA`. A shoot from before tracks existed has none, so shoot it again.
+
+## Narration
+
+```json
+{
+  "voice": "af_heart",
+  "say": { "F#": "F sharp" },
+  "music": { "en": "[Gentle music]", "ja": "[穏やかな音楽]", "zh": "[舒缓的音乐]" },
+  "lines": [{ "scene": "fsharp", "en": "…", "ja": "…", "zh": "…" }]
+}
+```
+
+- **Voice.** Kokoro-82M (Apache-2.0) speaks the English lines locally through `kokoro-js`. Never use a speech service or the operating system's voices: their licences forbid publishing.
+- **Pronunciation.** `say` respells words for the voice only. Captions keep the original spelling.
+- **Timing.** Each line starts just after its scene's cut. A scene holds its last frame until its line is spoken, so keep each line about as long as its scene.
+- **Pace.** `speed` speeds up the voice, and `pacing` sets the gaps (`kit/sound/voice.mjs` has the defaults).
+- **Music.** `score` picks an original score synthesised in code, so no film carries licensed music:
+  - `calm` (`kit/sound/score.mjs`), the default for walkthroughs.
+  - `drive` (`kit/sound/drive.mjs`, 124 BPM), for lessons.
+
+  The score ducks under the voice, and the mix is normalised to -16 LUFS.
+- **Captions.** Every language under `music` gets `<name>.<lang>.vtt`. List those languages under `captions` in `videos.json`.
+
+## Sets
+
+A set is a demo from `demos/`, declared in `kit/set.mjs`. `onSet` stages it beside an isolated editor:
+
+| Set | Demo | Used by |
+|---|---|---|
+| `STOREFRONT` | `demos/storefront`: a C# app that checks out orders forever, with hot paths and a cache that never evicts | the profiler films |
+| `FS_STOREFRONT` | `demos/fs-storefront`: its F# twin | the F# profiler film |
+| `SHOP` | `demos/Shop.slnx`: both storefronts in one solution, nothing running | the language films |
+| `BLAZOR_STOREFRONT` | `demos/blazor-storefront`: a Blazor Web App | `blazor` |
+| `REPO` | a clean copy of this repository, without the extension | `configuration`, `contributing` |
+
+To add a demo, put one project and an empty `Directory.Build.props` in `demos/<folder>/`, and declare it in `kit/set.mjs`. A demo that runs must print a line to stdout once it has started. A set must hold exactly one solution, or SharpLsp may load the wrong one.
+
+**Nothing personal reaches a frame.**
+
+- The demo is staged under `/tmp`.
+- The editor runs on a copy-on-write clone of the .NET install at `/tmp/sharplsp-film-dotnet`, with its login-shell environment off. The SDK path the extension reports, and the commands its terminals print, are neutral.
+- The in-app tutorial is switched off, so it never opens on camera.
+
+## Kit
+
+| Module | What it gives a film |
+|---|---|
+| `kit/scenes.mjs` | The walkthrough engine: `shootWalkthrough`, `publishWalkthrough`, and the scene helpers `prepare`, `switchTo`, `restart`, `startOnRow` |
+| `kit/lesson/` | The lesson engine: `deck.js` draws each layout from `t` alone, and `lesson.mjs` cuts the footage, times slides to speech and renders them |
+| `kit/frames.mjs` | Renders a page whose `renderFrame(t)` draws each frame: `renderMaster`, `previewFrames`, and `explode` (footage into numbered frames). Lessons and the profiler film use it |
+| `kit/timeline.js` | What such a page loads before its own script: `FPS`, `$`, `clamp`, `ease`, `tween` |
+| `kit/set.mjs` | The sets, and `onSet` |
+| `kit/editor.mjs` | The isolated VS Code, and the settings every shot is filmed with |
+| `kit/camera.mjs` | `record` shoots a clip with its track. `snap` and `still` take stills |
+| `kit/track.mjs`, `kit/zoom.mjs` | The [camera](#camera): what it follows, and how it frames |
+| `kit/captions.mjs`, `kit/overlay.mjs` | Step captions and speed badges. `pointAt` glides the pointer, and `ringClick` marks a click |
+| `kit/code.mjs` | Finds a word on an editor line on screen: `wordOn`, `findWord`, `hoverOn`, `clickOn` |
+| `kit/workbench.mjs` | Editor moves: `openFile`, `goTo`, `typeAt`, the Processes view, panels |
+| `kit/acts/language.mjs` | The language films' `LANGUAGE` settings, plus `prepareCode`, `scene`, `complete`, `quickFix`, `renameTo`, `navigate`, `peekReferences`, `hoverEach`, `settingsEditor` |
+| `kit/acts/shop.mjs` | Moves on the Shop demo: typing through completion in F# and C#, a generated match case, a rename across files |
+| `kit/acts/cpu.mjs`, `kit/acts/memory.mjs`, `kit/acts/tour.mjs` | The profiler stories: `cpuLoop`, `memoryLoop`, and `profilerTour`, which runs both on one demo |
+| `kit/acts/explorer.mjs` | The Solution Explorer: `openMenu`, `pickMenu`, `unfold` |
+| `kit/publish.mjs` | `narrated` and `publishEncodes`: the one route from a film's picture to the site's MP4 and WebM, with voice, score and captions |
+| `kit/encode.mjs` | The H.264 and VP9 settings, posters, stills, and the `out/` and asset paths |
+| `kit/sound/` | `voice.mjs` (narration), `score.mjs` and `drive.mjs` (the scores), `soundtrack.mjs` (the mix) |
+
+## Heroes
+
+`heroes/` holds blog hero images as HTML pages, one per post, each sized to the hero (1672×941). Screenshot the page at that size, and save the image where the post's `image:` front matter points.
diff --git a/src/website/tools/profiler-film/demos/Shop.slnx b/src/website/tools/video/demos/Shop.slnx
similarity index 100%
rename from src/website/tools/profiler-film/demos/Shop.slnx
rename to src/website/tools/video/demos/Shop.slnx
diff --git a/src/website/tools/profiler-film/demos/blazor-storefront/BlazorStorefront.csproj b/src/website/tools/video/demos/blazor-storefront/BlazorStorefront.csproj
similarity index 100%
rename from src/website/tools/profiler-film/demos/blazor-storefront/BlazorStorefront.csproj
rename to src/website/tools/video/demos/blazor-storefront/BlazorStorefront.csproj
diff --git a/src/website/tools/profiler-film/demos/blazor-storefront/BlazorStorefront.slnx b/src/website/tools/video/demos/blazor-storefront/BlazorStorefront.slnx
similarity index 100%
rename from src/website/tools/profiler-film/demos/blazor-storefront/BlazorStorefront.slnx
rename to src/website/tools/video/demos/blazor-storefront/BlazorStorefront.slnx
diff --git a/src/website/tools/profiler-film/demos/blazor-storefront/Catalog.cs b/src/website/tools/video/demos/blazor-storefront/Catalog.cs
similarity index 100%
rename from src/website/tools/profiler-film/demos/blazor-storefront/Catalog.cs
rename to src/website/tools/video/demos/blazor-storefront/Catalog.cs
diff --git a/src/website/tools/profiler-film/demos/blazor-storefront/Components/App.razor b/src/website/tools/video/demos/blazor-storefront/Components/App.razor
similarity index 100%
rename from src/website/tools/profiler-film/demos/blazor-storefront/Components/App.razor
rename to src/website/tools/video/demos/blazor-storefront/Components/App.razor
diff --git a/src/website/tools/profiler-film/demos/blazor-storefront/Components/Layout/MainLayout.razor b/src/website/tools/video/demos/blazor-storefront/Components/Layout/MainLayout.razor
similarity index 100%
rename from src/website/tools/profiler-film/demos/blazor-storefront/Components/Layout/MainLayout.razor
rename to src/website/tools/video/demos/blazor-storefront/Components/Layout/MainLayout.razor
diff --git a/src/website/tools/profiler-film/demos/blazor-storefront/Components/Pages/Basket.razor b/src/website/tools/video/demos/blazor-storefront/Components/Pages/Basket.razor
similarity index 100%
rename from src/website/tools/profiler-film/demos/blazor-storefront/Components/Pages/Basket.razor
rename to src/website/tools/video/demos/blazor-storefront/Components/Pages/Basket.razor
diff --git a/src/website/tools/profiler-film/demos/blazor-storefront/Components/Routes.razor b/src/website/tools/video/demos/blazor-storefront/Components/Routes.razor
similarity index 100%
rename from src/website/tools/profiler-film/demos/blazor-storefront/Components/Routes.razor
rename to src/website/tools/video/demos/blazor-storefront/Components/Routes.razor
diff --git a/src/website/tools/profiler-film/demos/blazor-storefront/Components/_Imports.razor b/src/website/tools/video/demos/blazor-storefront/Components/_Imports.razor
similarity index 100%
rename from src/website/tools/profiler-film/demos/blazor-storefront/Components/_Imports.razor
rename to src/website/tools/video/demos/blazor-storefront/Components/_Imports.razor
diff --git a/src/website/tools/profiler-film/demos/blazor-storefront/Directory.Build.props b/src/website/tools/video/demos/blazor-storefront/Directory.Build.props
similarity index 100%
rename from src/website/tools/profiler-film/demos/blazor-storefront/Directory.Build.props
rename to src/website/tools/video/demos/blazor-storefront/Directory.Build.props
diff --git a/src/website/tools/profiler-film/demos/blazor-storefront/Program.cs b/src/website/tools/video/demos/blazor-storefront/Program.cs
similarity index 100%
rename from src/website/tools/profiler-film/demos/blazor-storefront/Program.cs
rename to src/website/tools/video/demos/blazor-storefront/Program.cs
diff --git a/src/website/tools/profiler-film/demos/fs-storefront/Catalog.fs b/src/website/tools/video/demos/fs-storefront/Catalog.fs
similarity index 100%
rename from src/website/tools/profiler-film/demos/fs-storefront/Catalog.fs
rename to src/website/tools/video/demos/fs-storefront/Catalog.fs
diff --git a/src/website/tools/profiler-film/demos/fs-storefront/Checkout.fs b/src/website/tools/video/demos/fs-storefront/Checkout.fs
similarity index 100%
rename from src/website/tools/profiler-film/demos/fs-storefront/Checkout.fs
rename to src/website/tools/video/demos/fs-storefront/Checkout.fs
diff --git a/src/website/tools/profiler-film/demos/fs-storefront/Directory.Build.props b/src/website/tools/video/demos/fs-storefront/Directory.Build.props
similarity index 100%
rename from src/website/tools/profiler-film/demos/fs-storefront/Directory.Build.props
rename to src/website/tools/video/demos/fs-storefront/Directory.Build.props
diff --git a/src/website/tools/profiler-film/demos/fs-storefront/Domain.fs b/src/website/tools/video/demos/fs-storefront/Domain.fs
similarity index 100%
rename from src/website/tools/profiler-film/demos/fs-storefront/Domain.fs
rename to src/website/tools/video/demos/fs-storefront/Domain.fs
diff --git a/src/website/tools/profiler-film/demos/fs-storefront/FsStorefront.fsproj b/src/website/tools/video/demos/fs-storefront/FsStorefront.fsproj
similarity index 100%
rename from src/website/tools/profiler-film/demos/fs-storefront/FsStorefront.fsproj
rename to src/website/tools/video/demos/fs-storefront/FsStorefront.fsproj
diff --git a/src/website/tools/profiler-film/demos/fs-storefront/FsStorefront.slnx b/src/website/tools/video/demos/fs-storefront/FsStorefront.slnx
similarity index 100%
rename from src/website/tools/profiler-film/demos/fs-storefront/FsStorefront.slnx
rename to src/website/tools/video/demos/fs-storefront/FsStorefront.slnx
diff --git a/src/website/tools/profiler-film/demos/fs-storefront/Program.fs b/src/website/tools/video/demos/fs-storefront/Program.fs
similarity index 100%
rename from src/website/tools/profiler-film/demos/fs-storefront/Program.fs
rename to src/website/tools/video/demos/fs-storefront/Program.fs
diff --git a/src/website/tools/profiler-film/demos/fs-storefront/Sessions.fs b/src/website/tools/video/demos/fs-storefront/Sessions.fs
similarity index 100%
rename from src/website/tools/profiler-film/demos/fs-storefront/Sessions.fs
rename to src/website/tools/video/demos/fs-storefront/Sessions.fs
diff --git a/src/website/tools/profiler-film/demos/storefront/Catalog.cs b/src/website/tools/video/demos/storefront/Catalog.cs
similarity index 100%
rename from src/website/tools/profiler-film/demos/storefront/Catalog.cs
rename to src/website/tools/video/demos/storefront/Catalog.cs
diff --git a/src/website/tools/profiler-film/demos/storefront/CheckoutPipeline.cs b/src/website/tools/video/demos/storefront/CheckoutPipeline.cs
similarity index 100%
rename from src/website/tools/profiler-film/demos/storefront/CheckoutPipeline.cs
rename to src/website/tools/video/demos/storefront/CheckoutPipeline.cs
diff --git a/src/website/tools/profiler-film/demos/storefront/Directory.Build.props b/src/website/tools/video/demos/storefront/Directory.Build.props
similarity index 100%
rename from src/website/tools/profiler-film/demos/storefront/Directory.Build.props
rename to src/website/tools/video/demos/storefront/Directory.Build.props
diff --git a/src/website/tools/profiler-film/demos/storefront/Program.cs b/src/website/tools/video/demos/storefront/Program.cs
similarity index 100%
rename from src/website/tools/profiler-film/demos/storefront/Program.cs
rename to src/website/tools/video/demos/storefront/Program.cs
diff --git a/src/website/tools/profiler-film/demos/storefront/SessionCache.cs b/src/website/tools/video/demos/storefront/SessionCache.cs
similarity index 100%
rename from src/website/tools/profiler-film/demos/storefront/SessionCache.cs
rename to src/website/tools/video/demos/storefront/SessionCache.cs
diff --git a/src/website/tools/profiler-film/demos/storefront/Storefront.csproj b/src/website/tools/video/demos/storefront/Storefront.csproj
similarity index 100%
rename from src/website/tools/profiler-film/demos/storefront/Storefront.csproj
rename to src/website/tools/video/demos/storefront/Storefront.csproj
diff --git a/src/website/tools/profiler-film/demos/storefront/Storefront.slnx b/src/website/tools/video/demos/storefront/Storefront.slnx
similarity index 100%
rename from src/website/tools/profiler-film/demos/storefront/Storefront.slnx
rename to src/website/tools/video/demos/storefront/Storefront.slnx
diff --git a/src/website/tools/video/film.mjs b/src/website/tools/video/film.mjs
new file mode 100644
index 00000000..c7a5bb8d
--- /dev/null
+++ b/src/website/tools/video/film.mjs
@@ -0,0 +1,70 @@
+// Implements [WEB-DESIGN-MEDIA]. The one entry point: shoots, publishes or previews
+// any film by the name of its folder in films/. What a film's film.mjs exports
+// makes it one of three kinds (README.md):
+//
+//   scenes             a walkthrough: shot in a real editor, cut through the camera
+//   lesson             a lesson: slides around footage cut from published walkthroughs
+//   shoot, publish     a composite: its own shoot, and its own page rendered over it
+//
+//   make _build-vsix VSIX_PREBUILT=1
+//   node src/website/tools/video/film.mjs <film>                  (shoot, then publish)
+//   node src/website/tools/video/film.mjs <film> --publish        (publish the last shoot)
+//   node src/website/tools/video/film.mjs <film> --preview 2,30   (stills at those seconds: lessons, composites)
+//
+// A shoot lands in out/<film>/ (gitignored); publishing writes the site's video,
+// poster, captions and stills under src/website/src/assets.
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { out as filmsOut, publishStills } from './kit/encode.mjs';
+import { previewLesson, publishLesson } from './kit/lesson/lesson.mjs';
+import { publishWalkthrough, shootWalkthrough } from './kit/scenes.mjs';
+
+const films = path.join(path.dirname(fileURLToPath(import.meta.url)), 'films');
+/** Every film is a folder of its own, `films/<film>/`, holding its `film.mjs` and anything it reads. */
+const available = fs.readdirSync(films).filter((name) => fs.existsSync(path.join(films, name, 'film.mjs')));
+const [id] = process.argv.slice(2).filter((arg) => !arg.startsWith('--'));
+if (!available.includes(id)) throw new Error(`usage: film.mjs <${available.join('|')}> [--publish | --preview <seconds,...>]`);
+
+const folder = path.join(films, id);
+const film = (await import(path.join(folder, 'film.mjs'))).default;
+const out = path.join(filmsOut, id);
+const narration = film.narration && JSON.parse(fs.readFileSync(path.join(folder, film.narration), 'utf8'));
+const publishOnly = process.argv.includes('--publish');
+const flag = process.argv.indexOf('--preview');
+/** `--preview 2,30`: the seconds to draft stills at, or `undefined` to publish. */
+const previewAt = flag < 0 ? undefined : process.argv[flag + 1].split(',').map(Number);
+const drafted = (length) => `${length.toFixed(1)}s drafted; stills in out/${id}/preview`;
+const published = (length) => `${length.toFixed(1)}s published`;
+
+/** A walkthrough shoots its scenes, then cuts them through the camera and publishes them. */
+async function walkthrough() {
+  if (!publishOnly) await shootWalkthrough({ demo: film.demo, out, scenes: film.scenes, settings: film.settings });
+  if (fs.existsSync(path.join(out, 'stills'))) publishStills(path.join(out, 'stills'), film.stillsFolder);
+  // A film of stills alone has no clips to cut.
+  if (!film.scenes.some((scene) => scene.clip)) return 'stills published';
+  return published(await publishWalkthrough({ name: film.name, out, scenes: film.scenes, posterAt: film.poster, narration }));
+}
+
+/** A lesson renders from its slides and published footage: there is nothing to shoot. */
+async function lesson() {
+  const plan = { ...film.lesson, name: film.name, poster: film.poster, out };
+  if (previewAt) return drafted(await previewLesson(plan, narration, previewAt));
+  return published(await publishLesson(plan, narration));
+}
+
+/** A composite brings its own shoot, publish and preview. */
+async function composite() {
+  if (previewAt) return drafted(await film.preview(out, previewAt));
+  if (!publishOnly) await film.shoot(out);
+  return published(await film.publish(out));
+}
+
+/** A film's kind is what its film.mjs exports. */
+function kindOf() {
+  if (film.scenes) return walkthrough;
+  if (film.lesson) return lesson;
+  return composite;
+}
+
+process.stdout.write(`${film.name}: ${await kindOf()()}\n`);
diff --git a/src/website/tools/profiler-film/films/architecture.mjs b/src/website/tools/video/films/architecture/film.mjs
similarity index 79%
rename from src/website/tools/profiler-film/films/architecture.mjs
rename to src/website/tools/video/films/architecture/film.mjs
index d2feadec..a3c26133 100644
--- a/src/website/tools/profiler-film/films/architecture.mjs
+++ b/src/website/tools/video/films/architecture/film.mjs
@@ -3,11 +3,11 @@
 // F# hover to the F# Compiler Service and a C# hover to Roslyn; then folding,
 // answered by tree-sitter in the host with no engine involved.
 //
-//   node src/website/tools/profiler-film/film.mjs architecture
-import { LANGUAGE, hoverEach, scene, showLog } from '../kit/acts/language.mjs';
-import { AT_CHECKOUT, AT_PIPELINE, ready } from '../kit/acts/shop.mjs';
-import { SHOP } from '../kit/set.mjs';
-import { openFile, sleep } from '../kit/workbench.mjs';
+//   node src/website/tools/video/film.mjs architecture
+import { LANGUAGE, hoverEach, scene, showLog } from '../../kit/acts/language.mjs';
+import { AT_CHECKOUT, AT_PIPELINE, ready } from '../../kit/acts/shop.mjs';
+import { SHOP } from '../../kit/set.mjs';
+import { openFile, sleep } from '../../kit/workbench.mjs';
 
 const PIPELINE = 'CheckoutPipeline.cs';
 
@@ -32,7 +32,7 @@ export default {
   name: 'architecture',
   demo: SHOP,
   settings: LANGUAGE,
-  narration: 'architecture.narration.json',
+  narration: 'narration.json',
   poster: { scene: 'routing', at: 10 },
   scenes: [
     ...ready(AT_PIPELINE, AT_CHECKOUT),
diff --git a/src/website/tools/profiler-film/films/architecture.narration.json b/src/website/tools/video/films/architecture/narration.json
similarity index 100%
rename from src/website/tools/profiler-film/films/architecture.narration.json
rename to src/website/tools/video/films/architecture/narration.json
diff --git a/src/website/tools/profiler-film/films/blazor.mjs b/src/website/tools/video/films/blazor/film.mjs
similarity index 91%
rename from src/website/tools/profiler-film/films/blazor.mjs
rename to src/website/tools/video/films/blazor/film.mjs
index 343011ad..851b4700 100644
--- a/src/website/tools/profiler-film/films/blazor.mjs
+++ b/src/website/tools/video/films/blazor/film.mjs
@@ -4,13 +4,13 @@
 // VS Code's own HTML service, a component's definition reached from C#, and
 // linked tag editing and folding.
 //
-//   node src/website/tools/profiler-film/film.mjs blazor
-import { snap } from '../kit/camera.mjs';
-import { clickOn, hoverOn } from '../kit/code.mjs';
-import { LANGUAGE, hidePanel, hoverEach, navigate, peekReferences, renameTo, scene, typeText, typeThroughCompletion } from '../kit/acts/language.mjs';
-import { ready } from '../kit/acts/shop.mjs';
-import { BLAZOR_STOREFRONT } from '../kit/set.mjs';
-import { goTo, openFile, sleep, typeAt } from '../kit/workbench.mjs';
+//   node src/website/tools/video/film.mjs blazor
+import { snap } from '../../kit/camera.mjs';
+import { clickOn, hoverOn } from '../../kit/code.mjs';
+import { LANGUAGE, hidePanel, hoverEach, navigate, peekReferences, renameTo, scene, typeText, typeThroughCompletion } from '../../kit/acts/language.mjs';
+import { ready } from '../../kit/acts/shop.mjs';
+import { BLAZOR_STOREFRONT } from '../../kit/set.mjs';
+import { goTo, openFile, sleep, typeAt } from '../../kit/workbench.mjs';
 
 const BASKET = 'Basket.razor';
 const AT_BASKET = [BASKET, { line: 18, word: 'Total' }];
@@ -87,7 +87,7 @@ export default {
   // VS Code's default bracket closing: Razor's language configuration closes `(`, so an
   // expression stays balanced as it is typed, and each typed `)` steps over its closer.
   settings: { ...LANGUAGE, 'editor.linkedEditing': true, 'editor.autoClosingBrackets': 'languageDefined' },
-  narration: 'blazor.narration.json',
+  narration: 'narration.json',
   stillsFolder: 'docs',
   poster: { scene: 'hover', at: 4 },
   scenes: [
diff --git a/src/website/tools/profiler-film/films/blazor.narration.json b/src/website/tools/video/films/blazor/narration.json
similarity index 100%
rename from src/website/tools/profiler-film/films/blazor.narration.json
rename to src/website/tools/video/films/blazor/narration.json
diff --git a/src/website/tools/profiler-film/films/completions.mjs b/src/website/tools/video/films/completions/film.mjs
similarity index 65%
rename from src/website/tools/profiler-film/films/completions.mjs
rename to src/website/tools/video/films/completions/film.mjs
index 1614e7c6..37a4e049 100644
--- a/src/website/tools/profiler-film/films/completions.mjs
+++ b/src/website/tools/video/films/completions/film.mjs
@@ -2,14 +2,12 @@
 // (`code-completions`): F# and C# member completion typed live, then a type
 // from a namespace the file never imported, with its using added.
 //
-//   node src/website/tools/profiler-film/film.mjs completions
-import { clickOn } from '../kit/code.mjs';
-import { LANGUAGE, complete, scene, typeText } from '../kit/acts/language.mjs';
-import { AT_CHECKOUT, AT_PIPELINE, csharpCheapest, fsharpCheapest, ready } from '../kit/acts/shop.mjs';
-import { SHOP } from '../kit/set.mjs';
-import { openFile, sleep, typeAt } from '../kit/workbench.mjs';
-
-const PIPELINE = 'CheckoutPipeline.cs';
+//   node src/website/tools/video/film.mjs completions
+import { clickOn } from '../../kit/code.mjs';
+import { LANGUAGE, complete, scene, typeText } from '../../kit/acts/language.mjs';
+import { AT_CHECKOUT, AT_PIPELINE, PIPELINE, csharpCheapest, fsharpCheapest, ready } from '../../kit/acts/shop.mjs';
+import { SHOP } from '../../kit/set.mjs';
+import { openFile, sleep, typeAt } from '../../kit/workbench.mjs';
 
 /** Completion invoked by hand on a type the file has no using for; accepting it adds one. */
 async function importing({ page }) {
@@ -27,15 +25,15 @@ export default {
   name: 'code-completions',
   demo: SHOP,
   settings: LANGUAGE,
-  narration: 'completions.narration.json',
+  narration: 'narration.json',
   poster: { scene: 'csharp', at: 6 },
   scenes: [
     ...ready(AT_PIPELINE, AT_CHECKOUT),
-    scene('fsharp', 1, 'F#: list functions after a dot, then the record\'s fields', fsharpCheapest),
+    scene('fsharp', 1, 'F#: list functions after a dot, then the record\'s fields', fsharpCheapest, { chapter: 'FSharp.Completion' }),
     scene('csharp', 2, 'C#: Roslyn completion, member by member', async (shot) => {
       await openFile(shot.page, PIPELINE);
       await csharpCheapest(shot);
-    }),
-    scene('import', 3, 'Ctrl+Space finds types you never imported, and adds the using', importing),
+    }, { chapter: 'CSharp.Completion' }),
+    scene('import', 3, 'Ctrl+Space finds types you never imported, and adds the using', importing, { chapter: 'CSharp.Completion' }),
   ],
 };
diff --git a/src/website/tools/profiler-film/films/completions.narration.json b/src/website/tools/video/films/completions/narration.json
similarity index 100%
rename from src/website/tools/profiler-film/films/completions.narration.json
rename to src/website/tools/video/films/completions/narration.json
diff --git a/src/website/tools/profiler-film/films/configuration.mjs b/src/website/tools/video/films/configuration/film.mjs
similarity index 89%
rename from src/website/tools/profiler-film/films/configuration.mjs
rename to src/website/tools/video/films/configuration/film.mjs
index 3518fc11..608be7aa 100644
--- a/src/website/tools/profiler-film/films/configuration.mjs
+++ b/src/website/tools/video/films/configuration/film.mjs
@@ -3,13 +3,13 @@
 // the solution, monorepo mode switched on, the server restarted, and an
 // unused public property reported as dead code.
 //
-//   node src/website/tools/profiler-film/film.mjs configuration
+//   node src/website/tools/video/film.mjs configuration
 import fs from 'node:fs';
 import path from 'node:path';
-import { runCommand } from '../kit/editor.mjs';
-import { LANGUAGE, awaitSemantics, hoverEach, prepareCode, scene, settingsEditor } from '../kit/acts/language.mjs';
-import { SHOP } from '../kit/set.mjs';
-import { openFile, sleep, typeAt } from '../kit/workbench.mjs';
+import { runCommand } from '../../kit/editor.mjs';
+import { LANGUAGE, awaitSemantics, hoverEach, prepareCode, scene, settingsEditor } from '../../kit/acts/language.mjs';
+import { SHOP } from '../../kit/set.mjs';
+import { openFile, sleep, typeAt } from '../../kit/workbench.mjs';
 
 /** The documented sharplsp.toml, every field at its default. */
 const TOML = [
@@ -76,7 +76,7 @@ export default {
   name: 'configuration',
   demo: SHOP,
   settings: LANGUAGE,
-  narration: 'configuration.narration.json',
+  narration: 'narration.json',
   poster: { scene: 'toml', at: 5 },
   scenes: [
     { offCamera: ({ workspace }) => fs.writeFileSync(path.join(workspace, 'sharplsp.toml'), configurationToml) },
diff --git a/src/website/tools/profiler-film/films/configuration.narration.json b/src/website/tools/video/films/configuration/narration.json
similarity index 100%
rename from src/website/tools/profiler-film/films/configuration.narration.json
rename to src/website/tools/video/films/configuration/narration.json
diff --git a/src/website/tools/profiler-film/films/context-menus.mjs b/src/website/tools/video/films/context-menus/film.mjs
similarity index 78%
rename from src/website/tools/profiler-film/films/context-menus.mjs
rename to src/website/tools/video/films/context-menus/film.mjs
index d2e92ed6..d305a1c1 100644
--- a/src/website/tools/profiler-film/films/context-menus.mjs
+++ b/src/website/tools/video/films/context-menus/film.mjs
@@ -2,12 +2,12 @@
 // (`context-menus`): the Solution Explorer's menus on the solution, a
 // project (Build, Open Project File) and a C# type (Sort Members).
 //
-//   node src/website/tools/profiler-film/film.mjs context-menus
-import { LANGUAGE, scene } from '../kit/acts/language.mjs';
-import { openMenu, pickMenu, unfold } from '../kit/acts/explorer.mjs';
-import { AT_PROGRAM_CS, ready } from '../kit/acts/shop.mjs';
-import { SHOP } from '../kit/set.mjs';
-import { openFile, sleep } from '../kit/workbench.mjs';
+//   node src/website/tools/video/film.mjs context-menus
+import { LANGUAGE, scene } from '../../kit/acts/language.mjs';
+import { openMenu, pickMenu, unfold } from '../../kit/acts/explorer.mjs';
+import { AT_PROGRAM_CS, ready } from '../../kit/acts/shop.mjs';
+import { SHOP } from '../../kit/set.mjs';
+import { openFile, sleep } from '../../kit/workbench.mjs';
 
 const PROJECT = /^Storefront \(Storefront\.csproj\)/;
 
@@ -22,7 +22,7 @@ export default {
   name: 'context-menus',
   demo: SHOP,
   settings: LANGUAGE,
-  narration: 'context-menus.narration.json',
+  narration: 'narration.json',
   poster: { scene: 'solution', at: 3 },
   scenes: [
     ...ready(AT_PROGRAM_CS),
diff --git a/src/website/tools/profiler-film/films/context-menus.narration.json b/src/website/tools/video/films/context-menus/narration.json
similarity index 100%
rename from src/website/tools/profiler-film/films/context-menus.narration.json
rename to src/website/tools/video/films/context-menus/narration.json
diff --git a/src/website/tools/profiler-film/films/contributing.mjs b/src/website/tools/video/films/contributing/film.mjs
similarity index 89%
rename from src/website/tools/profiler-film/films/contributing.mjs
rename to src/website/tools/video/films/contributing/film.mjs
index 5c942042..0f2f97e5 100644
--- a/src/website/tools/profiler-film/films/contributing.mjs
+++ b/src/website/tools/video/films/contributing/film.mjs
@@ -3,12 +3,12 @@
 // test suite (the Rust host's unit tests) built and run from a terminal, on a
 // clean copy of the committed tree.
 //
-//   node src/website/tools/profiler-film/film.mjs contributing
+//   node src/website/tools/video/film.mjs contributing
 import { spawnSync } from 'node:child_process';
-import { runCommand } from '../kit/editor.mjs';
-import { scene, typeText } from '../kit/acts/language.mjs';
-import { REPO } from '../kit/set.mjs';
-import { openFile, sleep } from '../kit/workbench.mjs';
+import { runCommand } from '../../kit/editor.mjs';
+import { scene, typeText } from '../../kit/acts/language.mjs';
+import { REPO } from '../../kit/set.mjs';
+import { openFile, sleep } from '../../kit/workbench.mjs';
 
 const SUITE = 'cargo test -p sharplsp --bins';
 
@@ -64,7 +64,7 @@ export default {
   name: 'contributing',
   demo: REPO,
   settings: SETTINGS,
-  narration: 'contributing.narration.json',
+  narration: 'narration.json',
   poster: { scene: 'layout', at: 5 },
   scenes: [
     {
diff --git a/src/website/tools/profiler-film/films/contributing.narration.json b/src/website/tools/video/films/contributing/narration.json
similarity index 100%
rename from src/website/tools/profiler-film/films/contributing.narration.json
rename to src/website/tools/video/films/contributing/narration.json
diff --git a/src/website/tools/profiler-film/films/csharp.mjs b/src/website/tools/video/films/csharp/film.mjs
similarity index 77%
rename from src/website/tools/profiler-film/films/csharp.mjs
rename to src/website/tools/video/films/csharp/film.mjs
index d2c5992e..f450a9cf 100644
--- a/src/website/tools/profiler-film/films/csharp.mjs
+++ b/src/website/tools/video/films/csharp/film.mjs
@@ -3,15 +3,15 @@
 // memory: the leak suspect, the static field that roots it, the fix, and a
 // second run. The memory half is the leak film's story.
 //
-//   node src/website/tools/profiler-film/film.mjs csharp
-import { profilerTour } from '../kit/acts/tour.mjs';
-import { STOREFRONT } from '../kit/set.mjs';
-import { leakStory } from './leak.mjs';
+//   node src/website/tools/video/film.mjs csharp
+import { profilerTour } from '../../kit/acts/tour.mjs';
+import { STOREFRONT } from '../../kit/set.mjs';
+import { leakStory } from '../leak/film.mjs';
 
 export default {
   name: 'profiler-csharp',
   demo: STOREFRONT,
-  narration: 'csharp.narration.json',
+  narration: 'narration.json',
   poster: { scene: 'heat', at: 5 },
   scenes: profilerTour(
     {
diff --git a/src/website/tools/profiler-film/films/csharp.narration.json b/src/website/tools/video/films/csharp/narration.json
similarity index 100%
rename from src/website/tools/profiler-film/films/csharp.narration.json
rename to src/website/tools/video/films/csharp/narration.json
diff --git a/src/website/tools/profiler-film/films/diagnostics.mjs b/src/website/tools/video/films/diagnostics/film.mjs
similarity index 83%
rename from src/website/tools/profiler-film/films/diagnostics.mjs
rename to src/website/tools/video/films/diagnostics/film.mjs
index b183246b..4d08bf14 100644
--- a/src/website/tools/profiler-film/films/diagnostics.mjs
+++ b/src/website/tools/video/films/diagnostics/film.mjs
@@ -2,11 +2,11 @@
 // (`diagnostics`): errors and SharpLsp's analyzer findings on unsaved F# and
 // C# edits, each read by hovering it, then the Problems panel that lists them.
 //
-//   node src/website/tools/profiler-film/film.mjs diagnostics
-import { LANGUAGE, hoverEach, scene } from '../kit/acts/language.mjs';
-import { AT_CHECKOUT, AT_PIPELINE, ready } from '../kit/acts/shop.mjs';
-import { SHOP } from '../kit/set.mjs';
-import { openFile, sleep, typeAt } from '../kit/workbench.mjs';
+//   node src/website/tools/video/film.mjs diagnostics
+import { LANGUAGE, hoverEach, scene } from '../../kit/acts/language.mjs';
+import { AT_CHECKOUT, AT_PIPELINE, ready } from '../../kit/acts/shop.mjs';
+import { SHOP } from '../../kit/set.mjs';
+import { openFile, sleep, typeAt } from '../../kit/workbench.mjs';
 
 /** Type `edits` into `file` (each a `typeAt` edit), let the engine catch up, and hover each of `spots`. */
 const flag = (file, edits, spots) => async ({ page }) => {
@@ -21,7 +21,7 @@ export default {
   name: 'diagnostics',
   demo: SHOP,
   settings: LANGUAGE,
-  narration: 'diagnostics.narration.json',
+  narration: 'narration.json',
   poster: { scene: 'problems', at: 3 },
   scenes: [
     ...ready(AT_PIPELINE, AT_CHECKOUT),
diff --git a/src/website/tools/profiler-film/films/diagnostics.narration.json b/src/website/tools/video/films/diagnostics/narration.json
similarity index 100%
rename from src/website/tools/profiler-film/films/diagnostics.narration.json
rename to src/website/tools/video/films/diagnostics/narration.json
diff --git a/src/website/tools/profiler-film/films/doc-stills.mjs b/src/website/tools/video/films/doc-stills/film.mjs
similarity index 91%
rename from src/website/tools/profiler-film/films/doc-stills.mjs
rename to src/website/tools/video/films/doc-stills/film.mjs
index 6ba233a9..e38072e9 100644
--- a/src/website/tools/profiler-film/films/doc-stills.mjs
+++ b/src/website/tools/video/films/doc-stills/film.mjs
@@ -2,18 +2,18 @@
 // (`screenshots/docs/<name>.webp`), shot on the Shop demo in the same isolated
 // editor as the films: no clips, only clean frames of each feature at work.
 //
-//   node src/website/tools/profiler-film/film.mjs doc-stills
+//   node src/website/tools/video/film.mjs doc-stills
 import fs from 'node:fs';
 import path from 'node:path';
-import { snap } from '../kit/camera.mjs';
-import { ACTIONS, SUGGEST, clickOn, hoverOn } from '../kit/code.mjs';
-import { runCommand } from '../kit/editor.mjs';
-import { openMenu, unfold } from '../kit/acts/explorer.mjs';
-import { LANGUAGE, hidePanel, navigate, reopen, setPane, showLog, typeText } from '../kit/acts/language.mjs';
-import { AT_CHECKOUT, AT_PIPELINE, ready } from '../kit/acts/shop.mjs';
-import { SHOP } from '../kit/set.mjs';
-import { openFile, panel, sleep, typeAt } from '../kit/workbench.mjs';
-import { configurationToml } from './configuration.mjs';
+import { snap } from '../../kit/camera.mjs';
+import { ACTIONS, SUGGEST, clickOn, hoverOn } from '../../kit/code.mjs';
+import { runCommand } from '../../kit/editor.mjs';
+import { openMenu, unfold } from '../../kit/acts/explorer.mjs';
+import { LANGUAGE, hidePanel, navigate, reopen, setPane, showLog, typeText } from '../../kit/acts/language.mjs';
+import { AT_CHECKOUT, AT_PIPELINE, ready } from '../../kit/acts/shop.mjs';
+import { SHOP } from '../../kit/set.mjs';
+import { openFile, panel, sleep, typeAt } from '../../kit/workbench.mjs';
+import { configurationToml } from '../configuration/film.mjs';
 
 const CSHARP = /^Storefront \(Storefront\.csproj\)/;
 const FSHARP = /^FsStorefront \(FsStorefront\.fsproj\)/;
diff --git a/src/website/tools/profiler-film/films/editor-setup.mjs b/src/website/tools/video/films/editor-setup/film.mjs
similarity index 78%
rename from src/website/tools/profiler-film/films/editor-setup.mjs
rename to src/website/tools/video/films/editor-setup/film.mjs
index 15de5b1d..2b85ef6d 100644
--- a/src/website/tools/profiler-film/films/editor-setup.mjs
+++ b/src/website/tools/video/films/editor-setup/film.mjs
@@ -3,18 +3,18 @@
 // everything it adds under SharpLsp in the Command Palette, and the
 // trusted-workspace settings for development builds.
 //
-//   node src/website/tools/profiler-film/film.mjs editor-setup
-import { runCommand } from '../kit/editor.mjs';
-import { LANGUAGE, awaitSemantics, prepareCode, scene, settingsEditor, typeText } from '../kit/acts/language.mjs';
-import { pointAt } from '../kit/overlay.mjs';
-import { SHOP } from '../kit/set.mjs';
-import { sleep } from '../kit/workbench.mjs';
+//   node src/website/tools/video/film.mjs editor-setup
+import { runCommand } from '../../kit/editor.mjs';
+import { LANGUAGE, awaitSemantics, prepareCode, scene, settingsEditor, typeText } from '../../kit/acts/language.mjs';
+import { centre, pointAt } from '../../kit/overlay.mjs';
+import { SHOP } from '../../kit/set.mjs';
+import { sleep } from '../../kit/workbench.mjs';
 
 const PROBE = { line: 10, word: 'Checkout' };
 
 async function activation({ page }) {
   const status = await page.locator('.statusbar-item', { hasText: 'SharpLsp' }).first().boundingBox();
-  if (status) await pointAt(page, { x: status.x + status.width / 2, y: status.y + status.height / 2 });
+  if (status) await pointAt(page, centre(status));
   await runCommand(page, 'SharpLsp: Restart Language Server');
   await awaitSemantics(page, PROBE);
   await sleep(1500);
@@ -42,7 +42,7 @@ export default {
   name: 'editor-setup',
   demo: SHOP,
   settings: LANGUAGE,
-  narration: 'editor-setup.narration.json',
+  narration: 'narration.json',
   poster: { scene: 'palette', at: 6 },
   scenes: [
     { offCamera: prepareCode('Program.cs', PROBE) },
diff --git a/src/website/tools/profiler-film/films/editor-setup.narration.json b/src/website/tools/video/films/editor-setup/narration.json
similarity index 100%
rename from src/website/tools/profiler-film/films/editor-setup.narration.json
rename to src/website/tools/video/films/editor-setup/narration.json
diff --git a/src/website/tools/profiler-film/films/fsharp-language.mjs b/src/website/tools/video/films/fsharp-language/film.mjs
similarity index 76%
rename from src/website/tools/profiler-film/films/fsharp-language.mjs
rename to src/website/tools/video/films/fsharp-language/film.mjs
index 41b9ca93..184db61c 100644
--- a/src/website/tools/profiler-film/films/fsharp-language.mjs
+++ b/src/website/tools/video/films/fsharp-language/film.mjs
@@ -3,12 +3,12 @@
 // references, a generated match case, a rename across files, and F#
 // Interactive, all on FsStorefront in the Shop solution.
 //
-//   node src/website/tools/profiler-film/film.mjs fsharp-language
-import { runCommand } from '../kit/editor.mjs';
-import { LANGUAGE, hoverEach, navigate, peekReferences, scene, typeText } from '../kit/acts/language.mjs';
-import { AT_CHECKOUT, fsharpCheapest, missingCase, ready, renameAcrossFiles } from '../kit/acts/shop.mjs';
-import { SHOP } from '../kit/set.mjs';
-import { goTo, openFile, sleep } from '../kit/workbench.mjs';
+//   node src/website/tools/video/film.mjs fsharp-language
+import { runCommand } from '../../kit/editor.mjs';
+import { LANGUAGE, hoverEach, navigate, peekReferences, scene, typeText } from '../../kit/acts/language.mjs';
+import { AT_CHECKOUT, fsharpCheapest, missingCase, ready, renameAcrossFiles } from '../../kit/acts/shop.mjs';
+import { SHOP } from '../../kit/set.mjs';
+import { goTo, openFile, sleep } from '../../kit/workbench.mjs';
 
 /** The catalog's code sent to F# Interactive, then called there. */
 async function interactive({ page }) {
@@ -29,17 +29,18 @@ export default {
   name: 'fsharp-language',
   demo: SHOP,
   settings: LANGUAGE,
-  narration: 'fsharp-language.narration.json',
+  narration: 'narration.json',
   poster: { scene: 'complete', at: 9 },
   scenes: [
     ...ready(AT_CHECKOUT),
     scene('hover', 1, 'Hover any F# symbol: its signature, from the F# compiler', ({ page }) =>
       hoverEach(page, [{ line: 28, word: 'parseCatalog' }, { line: 28, word: 'pickBasket' }, { line: 29, word: 'priceBasket' }], { scroll: 300 }),
+      { chapter: 'FSharp.Hover' },
     ),
-    scene('complete', 2, 'Completion knows your types: List functions, then record fields', fsharpCheapest),
-    scene('define', 3, 'Go to Definition (F12) crosses files', (shot) => navigate(shot.page, { line: 23, word: 'Product' }, 'F12')),
-    scene('references', 4, 'Find All References (Shift+F12), project-wide', ({ page }) => peekReferences(page, { line: 3, word: 'Product' })),
-    scene('fix', 5, 'Quick fixes write code: generate the missing union case', missingCase, { speed: 2 }),
+    scene('complete', 2, 'Completion knows your types: List functions, then record fields', fsharpCheapest, { chapter: 'FSharp.Completion' }),
+    scene('define', 3, 'Go to Definition (F12) crosses files', (shot) => navigate(shot.page, { line: 23, word: 'Product' }, 'F12'), { chapter: 'FSharp.Definition' }),
+    scene('references', 4, 'Find All References (Shift+F12), project-wide', ({ page }) => peekReferences(page, { line: 3, word: 'Product' }), { chapter: 'FSharp.References' }),
+    scene('fix', 5, 'Quick fixes write code: generate the missing union case', missingCase, { speed: 2, chapter: 'FSharp.CodeAction' }),
     scene('rename', 6, 'Rename (F2), and every file that calls it follows', renameAcrossFiles),
     scene('interactive', 7, 'Send code to F# Interactive and run it on the spot', interactive),
   ],
diff --git a/src/website/tools/profiler-film/films/fsharp-language.narration.json b/src/website/tools/video/films/fsharp-language/narration.json
similarity index 100%
rename from src/website/tools/profiler-film/films/fsharp-language.narration.json
rename to src/website/tools/video/films/fsharp-language/narration.json
diff --git a/src/website/tools/profiler-film/films/fsharp.mjs b/src/website/tools/video/films/fsharp/film.mjs
similarity index 89%
rename from src/website/tools/profiler-film/films/fsharp.mjs
rename to src/website/tools/video/films/fsharp/film.mjs
index d451aed9..f5cd1c95 100644
--- a/src/website/tools/profiler-film/films/fsharp.mjs
+++ b/src/website/tools/video/films/fsharp/film.mjs
@@ -3,10 +3,10 @@
 // stages, then its memory: records and union cases painted where the code
 // builds them, the module value that roots the leak, the fix, and a second run.
 //
-//   node src/website/tools/profiler-film/film.mjs fsharp
-import { snap } from '../kit/camera.mjs';
-import { profilerTour } from '../kit/acts/tour.mjs';
-import { FS_STOREFRONT } from '../kit/set.mjs';
+//   node src/website/tools/video/film.mjs fsharp
+import { snap } from '../../kit/camera.mjs';
+import { profilerTour } from '../../kit/acts/tour.mjs';
+import { FS_STOREFRONT } from '../../kit/set.mjs';
 
 const CHECKOUT = 'Checkout.fs';
 const SESSIONS = 'Sessions.fs';
@@ -14,7 +14,7 @@ const SESSIONS = 'Sessions.fs';
 export default {
   name: 'profiler-fsharp',
   demo: FS_STOREFRONT,
-  narration: 'fsharp.narration.json',
+  narration: 'narration.json',
   poster: { scene: 'suspect', at: 6 },
   scenes: profilerTour(
     {
diff --git a/src/website/tools/profiler-film/films/fsharp.narration.json b/src/website/tools/video/films/fsharp/narration.json
similarity index 100%
rename from src/website/tools/profiler-film/films/fsharp.narration.json
rename to src/website/tools/video/films/fsharp/narration.json
diff --git a/src/website/tools/profiler-film/films/getting-started.mjs b/src/website/tools/video/films/getting-started/film.mjs
similarity index 57%
rename from src/website/tools/profiler-film/films/getting-started.mjs
rename to src/website/tools/video/films/getting-started/film.mjs
index 63b974d9..fb35f8ca 100644
--- a/src/website/tools/profiler-film/films/getting-started.mjs
+++ b/src/website/tools/video/films/getting-started/film.mjs
@@ -3,20 +3,11 @@
 // and F# side by side, an F# hover, a C# completion, and the tools that ship
 // with the extension.
 //
-//   node src/website/tools/profiler-film/film.mjs getting-started
-import { LANGUAGE, hoverEach, scene, setPane } from '../kit/acts/language.mjs';
-import { unfold } from '../kit/acts/explorer.mjs';
-import { AT_CHECKOUT, AT_PIPELINE, csharpCheapest, ready } from '../kit/acts/shop.mjs';
-import { SHOP } from '../kit/set.mjs';
-import { openFile, sleep } from '../kit/workbench.mjs';
-
-async function solution({ page }) {
-  await unfold(page, /^FsStorefront \(FsStorefront\.fsproj\)/);
-  await sleep(1500);
-  await unfold(page, /^Storefront \(Storefront\.csproj\)/);
-  await unfold(page, /^Storefront$/);
-  await sleep(3000);
-}
+//   node src/website/tools/video/film.mjs getting-started
+import { LANGUAGE, hoverEach, scene, setPane } from '../../kit/acts/language.mjs';
+import { AT_CHECKOUT, AT_PIPELINE, csharpCheapest, ready, unfoldShop } from '../../kit/acts/shop.mjs';
+import { SHOP } from '../../kit/set.mjs';
+import { openFile, sleep } from '../../kit/workbench.mjs';
 
 async function fsharp({ page }) {
   await openFile(page, 'Checkout.fs');
@@ -37,13 +28,13 @@ export default {
   name: 'getting-started',
   demo: SHOP,
   settings: LANGUAGE,
-  narration: 'getting-started.narration.json',
+  narration: 'narration.json',
   poster: { scene: 'solution', at: 4 },
   scenes: [
     ...ready(AT_PIPELINE, AT_CHECKOUT),
-    scene('solution', 1, 'Open a folder with a solution: C# and F# load together', solution),
-    scene('fsharp', 2, 'F#: the F# compiler behind every answer', fsharp),
-    scene('csharp', 3, 'C#: Roslyn behind every answer', csharp),
+    scene('solution', 1, 'Open a folder with a solution: C# and F# load together', unfoldShop, { chapter: 'SolutionExplorer' }),
+    scene('fsharp', 2, 'F#: the F# compiler behind every answer', fsharp, { chapter: 'FSharp.OpenFile' }),
+    scene('csharp', 3, 'C#: Roslyn behind every answer', csharp, { chapter: 'CSharp.OpenFile' }),
     scene('tools', 4, 'Plus the tools: a profiler, NuGet, tests and debugging', tools),
   ],
 };
diff --git a/src/website/tools/profiler-film/films/getting-started.narration.json b/src/website/tools/video/films/getting-started/narration.json
similarity index 100%
rename from src/website/tools/profiler-film/films/getting-started.narration.json
rename to src/website/tools/video/films/getting-started/narration.json
diff --git a/src/website/tools/profiler-film/films/hover.mjs b/src/website/tools/video/films/hover/film.mjs
similarity index 71%
rename from src/website/tools/profiler-film/films/hover.mjs
rename to src/website/tools/video/films/hover/film.mjs
index 3e2f2d7b..3fbf9778 100644
--- a/src/website/tools/profiler-film/films/hover.mjs
+++ b/src/website/tools/video/films/hover/film.mjs
@@ -2,12 +2,12 @@
 // (`hover`): F# signatures and doc comments, union cases and .NET types, C#
 // XML docs and the type behind `var`, and a hover that reads unsaved edits.
 //
-//   node src/website/tools/profiler-film/film.mjs hover
-import { hoverOn } from '../kit/code.mjs';
-import { LANGUAGE, hoverEach, scene } from '../kit/acts/language.mjs';
-import { AT_PROGRAM_CS, AT_PROGRAM_FS, ready } from '../kit/acts/shop.mjs';
-import { SHOP } from '../kit/set.mjs';
-import { openFile, sleep, typeAt } from '../kit/workbench.mjs';
+//   node src/website/tools/video/film.mjs hover
+import { hoverOn } from '../../kit/code.mjs';
+import { LANGUAGE, hoverEach, scene } from '../../kit/acts/language.mjs';
+import { AT_PROGRAM_CS, AT_PROGRAM_FS, ready } from '../../kit/acts/shop.mjs';
+import { SHOP } from '../../kit/set.mjs';
+import { openFile, sleep, typeAt } from '../../kit/workbench.mjs';
 
 /** Catalog.fs: the doc comment rewritten and left unsaved; the next hover shows the new words. */
 async function unsaved({ page }) {
@@ -28,13 +28,13 @@ export default {
   name: 'hover',
   demo: SHOP,
   settings: LANGUAGE,
-  narration: 'hover.narration.json',
+  narration: 'narration.json',
   poster: { scene: 'csharp', at: 4 },
   scenes: [
     ...ready(AT_PROGRAM_CS, AT_PROGRAM_FS),
-    scene('fsharp', 1, 'F#: the inferred signature, with your doc comment', visit('Program.fs', [{ line: 9, word: 'generate' }, { line: 11, word: 'checkout' }])),
-    scene('union', 2, 'Union cases and .NET types, typed as F# sees them', visit('Sessions.fs', [{ line: 9, word: 'CheckedOut' }, { line: 6, word: 'Dictionary' }])),
-    scene('csharp', 3, 'C#: XML docs rendered, and the type behind var', visit('Program.cs', [{ line: 5, word: 'Generate' }, { line: 10, word: 'var' }])),
+    scene('fsharp', 1, 'F#: the inferred signature, with your doc comment', visit('Program.fs', [{ line: 9, word: 'generate' }, { line: 11, word: 'checkout' }]), { chapter: 'FSharp.Hover' }),
+    scene('union', 2, 'Union cases and .NET types, typed as F# sees them', visit('Sessions.fs', [{ line: 9, word: 'CheckedOut' }, { line: 6, word: 'Dictionary' }]), { chapter: 'FSharp.Hover' }),
+    scene('csharp', 3, 'C#: XML docs rendered, and the type behind var', visit('Program.cs', [{ line: 5, word: 'Generate' }, { line: 10, word: 'var' }]), { chapter: 'CSharp.Hover' }),
     scene('live', 4, 'Hover reads your unsaved edits', unsaved),
   ],
 };
diff --git a/src/website/tools/profiler-film/films/hover.narration.json b/src/website/tools/video/films/hover/narration.json
similarity index 100%
rename from src/website/tools/profiler-film/films/hover.narration.json
rename to src/website/tools/video/films/hover/narration.json
diff --git a/src/website/tools/profiler-film/films/leak.mjs b/src/website/tools/video/films/leak/film.mjs
similarity index 87%
rename from src/website/tools/profiler-film/films/leak.mjs
rename to src/website/tools/video/films/leak/film.mjs
index e1bfbdea..03cd3899 100644
--- a/src/website/tools/profiler-film/films/leak.mjs
+++ b/src/website/tools/video/films/leak/film.mjs
@@ -3,10 +3,10 @@
 // followed to the static field that roots it, the fix typed in, the fixed build
 // tracked again.
 //
-//   node src/website/tools/profiler-film/film.mjs leak
-import { memoryLoop } from '../kit/acts/memory.mjs';
-import { prepare } from '../kit/scenes.mjs';
-import { STOREFRONT } from '../kit/set.mjs';
+//   node src/website/tools/video/film.mjs leak
+import { memoryLoop } from '../../kit/acts/memory.mjs';
+import { prepare } from '../../kit/scenes.mjs';
+import { STOREFRONT } from '../../kit/set.mjs';
 
 const FILE = 'SessionCache.cs';
 
@@ -42,7 +42,7 @@ export const leakStory = {
 export default {
   name: 'profiler-fix-memory-leak',
   demo: STOREFRONT,
-  narration: 'leak.narration.json',
+  narration: 'narration.json',
   poster: { scene: 'graph', at: 5 },
   scenes: [{ offCamera: prepare(FILE) }, ...memoryLoop(leakStory, 1)],
 };
diff --git a/src/website/tools/profiler-film/films/leak.narration.json b/src/website/tools/video/films/leak/narration.json
similarity index 100%
rename from src/website/tools/profiler-film/films/leak.narration.json
rename to src/website/tools/video/films/leak/narration.json
diff --git a/src/website/tools/profiler-film/films/navigation.mjs b/src/website/tools/video/films/navigation/film.mjs
similarity index 68%
rename from src/website/tools/profiler-film/films/navigation.mjs
rename to src/website/tools/video/films/navigation/film.mjs
index 276ee6cf..d20f0ddd 100644
--- a/src/website/tools/profiler-film/films/navigation.mjs
+++ b/src/website/tools/video/films/navigation/film.mjs
@@ -2,11 +2,11 @@
 // (`navigation`): definitions in F# and C#, references in a peek window, and
 // a framework type opened as decompiled source.
 //
-//   node src/website/tools/profiler-film/film.mjs navigation
-import { LANGUAGE, navigate, peekReferences, scene } from '../kit/acts/language.mjs';
-import { AT_PROGRAM_CS, AT_SESSIONS, ready } from '../kit/acts/shop.mjs';
-import { SHOP } from '../kit/set.mjs';
-import { openFile, sleep } from '../kit/workbench.mjs';
+//   node src/website/tools/video/film.mjs navigation
+import { LANGUAGE, navigate, peekReferences, scene } from '../../kit/acts/language.mjs';
+import { AT_PROGRAM_CS, AT_SESSIONS, ready } from '../../kit/acts/shop.mjs';
+import { SHOP } from '../../kit/set.mjs';
+import { openFile, sleep } from '../../kit/workbench.mjs';
 
 /** Open `file`, press `key` on `spot`, and hold on where it lands. */
 const jump = (file, spot, key = 'F12') => async ({ page }) => {
@@ -19,13 +19,13 @@ export default {
   name: 'navigation',
   demo: SHOP,
   settings: LANGUAGE,
-  narration: 'navigation.narration.json',
+  narration: 'narration.json',
   poster: { scene: 'references', at: 4 },
   scenes: [
     ...ready(AT_PROGRAM_CS, AT_SESSIONS),
-    scene('fsharp', 1, 'F12 jumps to a definition, in F#…', jump('Sessions.fs', { line: 9, word: 'CheckedOut' }), { retries: 3 }),
-    scene('csharp', 2, '…and in C#', jump('Program.cs', { line: 10, word: 'Checkout' }), { retries: 3 }),
-    scene('references', 3, 'Shift+F12: every reference, in a peek window', ({ page }) => peekReferences(page, { line: 16, word: 'Product' }, 6000)),
+    scene('fsharp', 1, 'F12 jumps to a definition, in F#…', jump('Sessions.fs', { line: 9, word: 'CheckedOut' }), { retries: 3, chapter: 'FSharp.Definition' }),
+    scene('csharp', 2, '…and in C#', jump('Program.cs', { line: 10, word: 'Checkout' }), { retries: 3, chapter: 'CSharp.Definition' }),
+    scene('references', 3, 'Shift+F12: every reference, in a peek window', ({ page }) => peekReferences(page, { line: 16, word: 'Product' }, 6000), { chapter: 'CSharp.References' }),
     scene('metadata', 4, 'Framework types open as decompiled source', async ({ page }) => {
       await navigate(page, { line: 17, word: 'JsonSerializer' }, 'F12');
       await sleep(4500);
diff --git a/src/website/tools/profiler-film/films/navigation.narration.json b/src/website/tools/video/films/navigation/narration.json
similarity index 100%
rename from src/website/tools/profiler-film/films/navigation.narration.json
rename to src/website/tools/video/films/navigation/narration.json
diff --git a/src/website/tools/profiler-film/films/nuget.mjs b/src/website/tools/video/films/nuget/film.mjs
similarity index 82%
rename from src/website/tools/profiler-film/films/nuget.mjs
rename to src/website/tools/video/films/nuget/film.mjs
index 9bb50dab..d9d1bd89 100644
--- a/src/website/tools/profiler-film/films/nuget.mjs
+++ b/src/website/tools/video/films/nuget/film.mjs
@@ -2,13 +2,13 @@
 // (`nuget`): the browser opened on the F# project, a package found on
 // nuget.org, installed and restored, and its reference in the project file.
 //
-//   node src/website/tools/profiler-film/film.mjs nuget
-import { LANGUAGE, scene, typeText } from '../kit/acts/language.mjs';
-import { openMenu, pickMenu } from '../kit/acts/explorer.mjs';
-import { ringClick } from '../kit/overlay.mjs';
-import { AT_PROGRAM_FS, ready } from '../kit/acts/shop.mjs';
-import { SHOP } from '../kit/set.mjs';
-import { panel, sleep } from '../kit/workbench.mjs';
+//   node src/website/tools/video/film.mjs nuget
+import { LANGUAGE, scene, typeText } from '../../kit/acts/language.mjs';
+import { openMenu, pickMenu } from '../../kit/acts/explorer.mjs';
+import { ringClick } from '../../kit/overlay.mjs';
+import { AT_PROGRAM_FS, ready } from '../../kit/acts/shop.mjs';
+import { SHOP } from '../../kit/set.mjs';
+import { panel, sleep } from '../../kit/workbench.mjs';
 
 const PROJECT = /^FsStorefront \(FsStorefront\.fsproj\)/;
 const PACKAGE = 'FsToolkit.ErrorHandling';
@@ -50,7 +50,7 @@ export default {
   name: 'nuget',
   demo: SHOP,
   settings: LANGUAGE,
-  narration: 'nuget.narration.json',
+  narration: 'narration.json',
   poster: { scene: 'search', at: 9 },
   scenes: [
     ...ready(AT_PROGRAM_FS),
diff --git a/src/website/tools/profiler-film/films/nuget.narration.json b/src/website/tools/video/films/nuget/narration.json
similarity index 100%
rename from src/website/tools/profiler-film/films/nuget.narration.json
rename to src/website/tools/video/films/nuget/narration.json
diff --git a/src/website/tools/profiler-film/films/profiler/capture.mjs b/src/website/tools/video/films/profiler/capture.mjs
similarity index 70%
rename from src/website/tools/profiler-film/films/profiler/capture.mjs
rename to src/website/tools/video/films/profiler/capture.mjs
index 5a65e234..f8c3dbf6 100644
--- a/src/website/tools/profiler-film/films/profiler/capture.mjs
+++ b/src/website/tools/video/films/profiler/capture.mjs
@@ -1,18 +1,13 @@
 // Implements [WEB-DESIGN-MEDIA]. Shoots the profiler film's raw material in a real, isolated VS Code running the
 // packaged SharpLsp VSIX against the Storefront demo app: stills (PNG, 3200x2000)
 // and real-time screencast clips, plus the click cues the film's cursor follows.
-//
-//   make _build-vsix VSIX_PREBUILT=1
-//   node src/website/tools/profiler-film/films/profiler/capture.mjs
-//
-// Output lands in tools/profiler-film/out/ (gitignored); render.mjs turns it into
-// the website's assets.
+// film.mjs runs it as this film's shoot; render.mjs turns its output into the
+// website's assets.
 import fs from 'node:fs';
 import path from 'node:path';
 import { cpuStills } from '../../kit/acts/cpu.mjs';
 import { cueLog, record, still } from '../../kit/camera.mjs';
 import { runCommand } from '../../kit/editor.mjs';
-import { out } from '../../kit/encode.mjs';
 import { STOREFRONT, onSet } from '../../kit/set.mjs';
 import {
   PARK,
@@ -29,12 +24,10 @@ import {
 } from '../../kit/workbench.mjs';
 import { captureFlameGraph } from './flamegraph.mjs';
 
-const stills = path.join(out, 'stills');
-const clips = path.join(out, 'clips');
 const PROFILE_SECONDS = 10;
 const MEMORY_SECONDS = 26;
 
-async function cpuAct(page, cues) {
+async function cpuAct(page, cues, stills) {
   await cues.click(page, await rowButton(page, 'Profile CPU'), 'Profile CPU');
   await sleep(7000);
   await still(page, stills, 'profiler-live');
@@ -50,14 +43,14 @@ async function memoryAct(page, cues) {
 }
 
 /** The autopilot's consecutive snapshots already rank the leak suspects: no Compare step. */
-async function memoryStills(page) {
+async function memoryStills(page, stills) {
   await scrollDashboard(page, 250);
   await still(page, stills, 'profiler-memory');
   await scrollDashboard(page, 8000);
   await still(page, stills, 'profiler-leaks');
 }
 
-async function prepare(page) {
+async function prepare(page, stills) {
   await runCommand(page, 'Notifications: Toggle Do Not Disturb Mode');
   await clickSharpLspIcon(page);
   await openFile(page, 'CheckoutPipeline.cs');
@@ -69,10 +62,11 @@ async function prepare(page) {
   await page.screenshot({ path: path.join(stills, 'profiler-processes.png') });
 }
 
-async function shoot(page, cdp, app) {
-  const set = { cdp, cues: cueLog(clips), frames: path.join(out, 'frames'), clips };
-  await prepare(page);
-  await record(set, 'cpu', () => cpuAct(page, set.cues));
+async function acts({ page, cdp, app }, out, stills) {
+  const clips = path.join(out, 'clips');
+  const set = { page, cdp, cues: cueLog(clips), frames: path.join(out, 'frames'), clips };
+  await prepare(page, stills);
+  await record(set, 'cpu', () => cpuAct(page, set.cues, stills));
   await cpuStills(page, stills, 'CheckoutPipeline.cs', 'profiler');
   await runCommand(page, 'View: Close All Editors');
   await openFile(page, 'SessionCache.cs');
@@ -80,16 +74,16 @@ async function shoot(page, cdp, app) {
   await app.start();
   await waitForDemoRow(page);
   await record(set, 'memory', () => memoryAct(page, set.cues));
-  await memoryStills(page);
+  await memoryStills(page, stills);
 }
 
-async function main() {
+/** Shoot the stills, the CPU and memory clips with their click cues, and the flame graph into `out`. */
+export async function shoot(out) {
+  const stills = path.join(out, 'stills');
   fs.mkdirSync(stills, { recursive: true });
-  fs.mkdirSync(clips, { recursive: true });
-  await onSet({ demo: STOREFRONT, out }, async ({ page, cdp, app, workspace }) => {
-    await shoot(page, cdp, app);
-    await captureFlameGraph(path.join(workspace, '.sharplsp/profiles'), out);
+  fs.mkdirSync(path.join(out, 'clips'), { recursive: true });
+  await onSet({ demo: STOREFRONT, out }, async (shot) => {
+    await acts(shot, out, stills);
+    await captureFlameGraph(path.join(shot.workspace, '.sharplsp/profiles'), out);
   });
 }
-
-await main();
diff --git a/src/website/tools/profiler-film/films/profiler/film.html b/src/website/tools/video/films/profiler/film.html
similarity index 97%
rename from src/website/tools/profiler-film/films/profiler/film.html
rename to src/website/tools/video/films/profiler/film.html
index 05ac4afa..1b3fabd4 100644
--- a/src/website/tools/profiler-film/films/profiler/film.html
+++ b/src/website/tools/video/films/profiler/film.html
@@ -4,7 +4,7 @@
 <meta charset="utf-8">
 <title>SharpLsp Profiler film</title>
 <!-- The profiler film: every frame is a pure function of t (renderFrame), so
-     render.mjs can step it deterministically. Assets come from the tool's out/film/. -->
+     render.mjs can step it deterministically. Frames and stills come from the shoot, out/profiler/. -->
 <style>
   :root {
     --bg: #070a08;
@@ -96,6 +96,7 @@
     <div class="url">sharplsp.dev</div>
   </div>
 
+<script src="../../kit/timeline.js"></script>
 <script src="film.js"></script>
 </body>
 </html>
diff --git a/src/website/tools/profiler-film/films/profiler/film.js b/src/website/tools/video/films/profiler/film.js
similarity index 95%
rename from src/website/tools/profiler-film/films/profiler/film.js
rename to src/website/tools/video/films/profiler/film.js
index 7aa11bac..c53bd363 100644
--- a/src/website/tools/profiler-film/films/profiler/film.js
+++ b/src/website/tools/video/films/profiler/film.js
@@ -1,22 +1,11 @@
 // Implements [WEB-DESIGN-MEDIA]. The profiler film's timeline. renderFrame(t) sets every element from t alone
 // and resolves once the frame's images are decoded, so render.mjs can step it.
-// FILM_DATA (injected by render.mjs) carries each clip's frame count and the
-// click cues capture.mjs recorded; SHOTS below are focus points in the
+// FILM_DATA (injected by render.mjs) carries the shoot's folder, each clip's frame
+// count and the click cues capture.mjs recorded; SHOTS below are focus points in the
 // 1600x1000 workbench the stills and clips were shot at.
 'use strict';
 
 const DATA = window.FILM_DATA;
-const FPS = 30;
-const $ = (id) => document.getElementById(id);
-const clamp = (v, lo, hi) => Math.min(hi, Math.max(lo, v));
-const ease = {
-  linear: (p) => p,
-  inOut: (p) => (p < 0.5 ? 4 * p * p * p : 1 - (-2 * p + 2) ** 3 / 2),
-  out: (p) => 1 - (1 - p) ** 3,
-  expo: (p) => (p === 1 ? 1 : 1 - 2 ** (-10 * p)),
-  back: (p) => 1 + 2.2 * (p - 1) ** 3 + 1.2 * (p - 1) ** 2,
-};
-const tween = (t, t0, t1, a, b, e = ease.inOut) => a + (b - a) * e(clamp((t - t0) / (t1 - t0), 0, 1));
 const window01 = (t, t0, t1, fade = 0.4) => Math.min(tween(t, t0, t0 + fade, 0, 1), tween(t, t1 - fade, t1, 1, 0));
 
 /** Scene boundaries, seconds. */
@@ -120,8 +109,8 @@ function show(img, src) {
   pending.push(img.decode().catch(() => undefined));
 }
 const clipFrame = (name, clipT) =>
-  `../../out/film/${name}/${String(clamp(Math.round(clipT * FPS) + 1, 1, DATA[name].frames)).padStart(5, '0')}.jpg`;
-const still = (name) => `../../out/stills/${name}.png`;
+  `${DATA.out}/film/${name}/${String(clamp(Math.round(clipT * FPS) + 1, 1, DATA[name].frames)).padStart(5, '0')}.jpg`;
+const still = (name) => `${DATA.out}/stills/${name}.png`;
 
 // ── Camera ──
 
diff --git a/src/website/tools/video/films/profiler/film.mjs b/src/website/tools/video/films/profiler/film.mjs
new file mode 100644
index 00000000..9489dfd5
--- /dev/null
+++ b/src/website/tools/video/films/profiler/film.mjs
@@ -0,0 +1,11 @@
+// Implements [WEB-DESIGN-MEDIA]. The home page's one-minute composited film
+// (`profiler-film`), and the unedited CPU and memory recordings beside it. It is
+// a composite: capture.mjs shoots stills and screencasts on the Storefront demo,
+// and render.mjs steps film.html (film.js draws every frame from t) over them.
+//
+//   node src/website/tools/video/film.mjs profiler
+//   node src/website/tools/video/film.mjs profiler --preview 2,9.5,24
+import { shoot } from './capture.mjs';
+import { preview, publish } from './render.mjs';
+
+export default { name: 'profiler-film', shoot, publish, preview };
diff --git a/src/website/tools/profiler-film/films/profiler/flamegraph.mjs b/src/website/tools/video/films/profiler/flamegraph.mjs
similarity index 100%
rename from src/website/tools/profiler-film/films/profiler/flamegraph.mjs
rename to src/website/tools/video/films/profiler/flamegraph.mjs
diff --git a/src/website/tools/video/films/profiler/render.mjs b/src/website/tools/video/films/profiler/render.mjs
new file mode 100644
index 00000000..46a7e4a4
--- /dev/null
+++ b/src/website/tools/video/films/profiler/render.mjs
@@ -0,0 +1,52 @@
+// Implements [WEB-DESIGN-MEDIA]. Renders the profiler film and the website's profiler media from capture.mjs's
+// output: steps film.html frame by frame in headless Chromium, pipes the frames
+// to ffmpeg, then writes the site assets (film MP4/WebM + poster, the unedited
+// recordings + posters, WebP stills). film.mjs runs it as this film's publish
+// and preview.
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath, pathToFileURL } from 'node:url';
+import { H264, VP9, ffmpeg, poster, publishStills, videos } from '../../kit/encode.mjs';
+import { explode, previewFrames, renderMaster } from '../../kit/frames.mjs';
+
+const here = path.dirname(fileURLToPath(import.meta.url));
+const html = path.join(here, 'film.html');
+const POSTER_AT = 25.5;
+
+/** What film.js reads: where the shoot is, each clip's frame count once exploded into <out>/film/<clip>/, and its click cues. */
+function filmData(out) {
+  const clip = (name) => ({
+    frames: explode(path.join(out, 'clips', `${name}.mp4`), path.join(out, 'film', name)),
+    cues: JSON.parse(fs.readFileSync(path.join(out, 'clips', `${name}.cues.json`), 'utf8')),
+  });
+  return { out: pathToFileURL(out).href, cpu: clip('cpu'), memory: clip('memory') };
+}
+
+/** The site's film: H.264 for reach, VP9 for size, and a poster frame. */
+function publishFilm(master) {
+  ffmpeg(['-i', master, ...H264, path.join(videos, 'profiler-film.mp4')], 'film mp4');
+  ffmpeg(['-i', master, ...VP9, path.join(videos, 'profiler-film.webm')], 'film webm');
+  poster(master, POSTER_AT, 'profiler-film');
+}
+
+/** The unedited recordings: CPU in real time, memory as a 3x time-lapse. */
+function publishRecordings(out) {
+  ffmpeg(['-i', path.join(out, 'clips/cpu.mp4'), '-vf', 'scale=1920:-2:flags=lanczos', ...H264, path.join(videos, 'profiler-cpu-recording.mp4')], 'cpu recording');
+  ffmpeg(['-i', path.join(out, 'clips/memory.mp4'), '-vf', 'setpts=PTS/3,fps=30,scale=1920:-2:flags=lanczos', ...H264, path.join(videos, 'profiler-memory-timelapse.mp4')], 'memory recording');
+  poster(path.join(videos, 'profiler-cpu-recording.mp4'), 16, 'profiler-cpu-recording');
+  poster(path.join(videos, 'profiler-memory-timelapse.mp4'), 14, 'profiler-memory-timelapse');
+}
+
+/** PNG stills of the film at each of `times` into `<out>/preview`; resolves to the film's length. */
+export const preview = (out, times) => previewFrames(html, 'FILM_DATA', filmData(out), times, path.join(out, 'preview'));
+
+/** Render the film, then publish it, the unedited recordings and the stills; resolves to the film's length. */
+export async function publish(out) {
+  fs.mkdirSync(videos, { recursive: true });
+  const master = path.join(out, 'film-master.mp4');
+  const duration = await renderMaster(html, 'FILM_DATA', filmData(out), master);
+  publishFilm(master);
+  publishRecordings(out);
+  publishStills(path.join(out, 'stills'));
+  return duration;
+}
diff --git a/src/website/tools/video/films/refactoring-lesson/film.mjs b/src/website/tools/video/films/refactoring-lesson/film.mjs
new file mode 100644
index 00000000..c77dc99b
--- /dev/null
+++ b/src/website/tools/video/films/refactoring-lesson/film.mjs
@@ -0,0 +1,145 @@
+// Implements [WEB-DESIGN-MEDIA]. The "Refactoring & Code Actions" lesson
+// (`refactoring-lesson`): the shortcut, where actions come from, an F# match
+// completed and the F# fixes by diagnostic, rename across files, C# fixes that
+// generate a method and add a using, what happens underneath, and what is not a
+// code action. Its footage is cut from the `refactoring` walkthrough.
+//
+//   node src/website/tools/video/film.mjs refactoring-lesson
+//   node src/website/tools/video/film.mjs refactoring-lesson --preview 2,20,60
+//
+// Each clip is a crop of the walkthrough's 1920x1200 editor: the code and its
+// menus, without the step caption the walkthrough recorded under them.
+const FSHARP = [430, 108, 1100, 640];
+const RENAME = [430, 108, 1250, 727];
+const CSHARP = [430, 170, 1100, 640];
+const clip = (from, to, crop, label, speed = 1) => ({ video: 'refactoring', from, to, crop, label, speed });
+
+export default {
+  name: 'refactoring-lesson',
+  narration: 'narration.json',
+  poster: 32,
+  lesson: {
+    series: 'Lesson · Code actions',
+    slides: [
+      {
+        id: 'intro', layout: 'title', kicker: 'Lesson · Refactoring & Code Actions',
+        title: 'Turn problems<br>into <em>code</em>.',
+        sub: 'Fix code, generate code and rename across files, in <b>F#</b> and <b>C#</b>: what to press, what you get, and what happens underneath.',
+        chips: ['macOS · Linux · Windows', 'F# + C#', 'VS Code', 'Free · MIT'],
+      },
+      {
+        id: 'shortcut', layout: 'keys', kicker: 'Step 1 · The shortcut', heading: 'Every action starts from <em>one</em> shortcut',
+        keys: [
+          { os: 'macOS', caps: ['⌘', '+', '.'], hot: true, line: 0 },
+          { os: 'Windows · Linux', caps: ['Ctrl', '+', '.'], line: 1 },
+          { os: 'Or click', caps: ['💡'], line: 2 },
+        ],
+        sub: 'The menu lists only what applies to your <b>cursor</b>, your <b>selection</b> or the <b>diagnostic</b> under it.', subLine: 3,
+      },
+      {
+        id: 'context', layout: 'points', kicker: 'Step 2 · Where actions come from', heading: 'Actions are <em>context-dependent</em>',
+        rows: [
+          { k: 'A diagnostic', v: 'A warning or error asks for its own fix', w: 'Quick fix', line: 1 },
+          { k: 'The cursor', v: 'A type or member you can reshape', w: 'Refactor', line: 2 },
+          { k: 'A selection', v: 'Refactorings that work on the code you highlight', w: 'Refactor', line: 3 },
+          { k: 'A blank line', v: 'An empty menu. SharpLsp never guesses', w: 'Nothing', line: 4 },
+        ],
+      },
+      {
+        id: 'fsharp', layout: 'footage', kicker: 'Step 3 · F# first', heading: 'Complete an F# <em>match</em>',
+        footage: clip(0, 13.7, FSHARP, 'Sessions.fs · FS0025: incomplete match', 2),
+        notes: [
+          { text: '<code>describe</code> matches on <code>stage</code>, but misses a union case', line: 0 },
+          { text: 'The compiler warns: <code>FS0025</code>, incomplete pattern match', line: 1 },
+          { text: '<code>⌘.</code> → <b>Generate 1 missing union case(s)</b>', line: 2 },
+          { text: 'Or <b>Add wildcard case</b> for a catch-all <code>| _ -&gt;</code>', line: 3 },
+        ],
+      },
+      {
+        id: 'fsharp-code', layout: 'code', kicker: 'Step 3 · What it wrote', heading: 'Before and <em>after</em>',
+        panes: [
+          { label: 'Before · FS0025', line: 0, code: [
+            { text: 'let describe stage =' }, { text: '    match stage with', mark: 'warn' }, { text: '    | Browsing -&gt; "still browsing"' },
+          ] },
+          { label: 'After · Generate missing case', line: 0, code: [
+            { text: 'let describe stage =' }, { text: '    match stage with' }, { text: '    | Browsing -&gt; "still browsing"' },
+            { text: '    | CheckedOut _ -&gt; failwith "todo"', mark: 'add' },
+          ] },
+        ],
+        caption: 'The compiler knows every case of the union, so the arm is exact. <b>You write the body.</b>', captionLine: 1,
+      },
+      {
+        id: 'fsharp-fixes', layout: 'cards', kicker: 'Step 4 · The F# toolkit', heading: 'F# quick fixes, <em>by diagnostic</em>',
+        cards: [
+          { code: 'FS0025', text: 'Add a wildcard match arm', line: 0 },
+          { code: 'FS0026', text: 'Remove a redundant pattern', line: 0 },
+          { code: 'FS0001', text: 'Insert a known conversion', line: 0 },
+          { code: 'FS0039', text: 'Add the <code>open</code> that resolves a name', line: 1 },
+          { code: 'FS1182', text: 'Prefix an unused binding with <code>_</code>', line: 1 },
+          { code: 'FS0020', text: 'Pipe a discarded value to <code>ignore</code>', line: 1 },
+          { code: 'match', text: 'Generate missing union cases', line: 2 },
+          { code: '{ record }', text: 'Generate missing fields', line: 2 },
+          { code: 'interface', text: 'Generate member stubs', line: 2 },
+        ],
+      },
+      {
+        id: 'rename', layout: 'footage', kicker: 'Step 5 · Rename', heading: 'Rename is <em>F2</em>, not a code action',
+        footage: clip(13.75, 35.3, RENAME, 'Sessions.fs → Program.fs · Rename Symbol'),
+        notes: [
+          { text: 'Cursor on <code>remember</code>, press <code>F2</code>', line: 0 },
+          { text: 'Type <code>rememberOrder</code>, press <code>Enter</code>', line: 1 },
+          { text: 'The call in <code>Program.fs</code> follows', line: 2 },
+          { text: 'C#: Roslyn\'s solution. F#: the loaded F# project', line: 3 },
+        ],
+      },
+      {
+        id: 'generate', layout: 'footage', kicker: 'Step 6 · C#', heading: 'Call it first, <em>generate</em> it second',
+        footage: clip(35.35, 59.7, CSHARP, 'CheckoutPipeline.cs · Generate method'),
+        notes: [
+          { text: 'Write the call you wish existed: <code>Receipt(invoice)</code>', line: 0 },
+          { text: 'It doesn\'t exist yet, so it\'s an error', line: 1 },
+          { text: '<code>⌘.</code> → <b>Generate method</b>', line: 2 },
+          { text: 'Roslyn writes the stub, typed from your call', line: 3 },
+        ],
+      },
+      {
+        id: 'using', layout: 'footage', kicker: 'Step 7 · C#', heading: 'Add the missing <em>using</em>',
+        footage: clip(59.75, 87.1, CSHARP, 'CheckoutPipeline.cs · Add using'),
+        notes: [
+          { text: 'Use <code>StringBuilder</code> without its namespace', line: 0 },
+          { text: '<code>⌘.</code> offers <code>using System.Text;</code> first', line: 1 },
+          { text: 'Or qualify it in place, or generate a class', line: 2 },
+          { text: 'Roslyn\'s own fixes, bundled with SharpLsp', line: 3 },
+        ],
+      },
+      {
+        id: 'under', layout: 'flow', kicker: 'Under the hood', heading: 'Two requests: <em>list</em>, then <em>resolve</em>',
+        stages: [
+          { title: 'Ask', text: 'The editor sends <code>textDocument/codeAction</code> for the cursor or selection', line: 0 },
+          { title: 'List', text: 'Roslyn (C#) or the F# compiler (F#) returns titles only, so the menu is quick', line: 1 },
+          { title: 'Resolve', text: 'Pick one: only then does <code>codeAction/resolve</code> compute its edits', line: 2 },
+          { title: 'Apply', text: 'One workspace edit, which can change several files', line: 3 },
+        ],
+        sub: 'Stale action, or a restarted sidecar? Resolve returns <b>no edit</b>. It never guesses.', subLine: 4,
+      },
+      {
+        id: 'separate', layout: 'points', kicker: 'Good to know', heading: 'Formatting and sorting are <em>separate</em>',
+        rows: [
+          { k: 'Format C#', v: 'Use <b>CSharpier</b>', w: 'Not an LSP format', line: 1 },
+          { k: 'Format F#', v: 'Use <b>Fantomas</b>', w: 'Not an LSP format', line: 1 },
+          { k: 'Sort Members', v: 'Right-click a C# type in the Solution Explorer', w: 'Its own command', line: 2 },
+        ],
+      },
+      {
+        id: 'recap', layout: 'recap', kicker: 'Recap', heading: 'You just learned',
+        items: [
+          { text: '<code>⌘.</code> or <code>Ctrl .</code> opens every action that applies', line: 0 },
+          { text: 'F# fixes follow compiler diagnostics, and write whole match cases', line: 1 },
+          { text: '<code>F2</code> renames across files, in F# and C#', line: 2 },
+          { text: 'In C#, call first and generate second', line: 3 },
+        ],
+        url: 'sharplsp.dev/docs/refactoring', urlLine: 4,
+      },
+    ],
+  },
+};
diff --git a/src/website/tools/video/films/refactoring-lesson/narration.json b/src/website/tools/video/films/refactoring-lesson/narration.json
new file mode 100644
index 00000000..66d5bb71
--- /dev/null
+++ b/src/website/tools/video/films/refactoring-lesson/narration.json
@@ -0,0 +1,283 @@
+{
+  "voice": "af_bella",
+  "speed": 1.12,
+  "score": "drive",
+  "pacing": { "opening": 0.9, "lead": 0.25, "gap": 0.22, "tail": 0.35, "hold": 0.25, "closing": 2.4 },
+  "say": {
+    "SharpLsp": "Sharp L S P",
+    "FS0025": "F S zero zero twenty-five",
+    "Program.fs": "Program dot F S",
+    "System.Text": "System dot Text",
+    "CSharpier": "See Sharpier",
+    "F#": "F sharp",
+    "C#": "C sharp",
+    "F2": "F two"
+  },
+  "music": { "en": "[Upbeat electronic music]", "ja": "[アップテンポな電子音楽]", "zh": "[轻快的电子音乐]" },
+  "lines": [
+    {
+      "scene": "intro",
+      "en": "Welcome to a quick lesson on code actions in SharpLsp! In the next few minutes, you'll fix code, generate code, and rename across files, in F# and C#, on any OS.",
+      "ja": "SharpLsp のコードアクションのクイックレッスンへようこそ！数分で、コードの修正、コードの生成、ファイルをまたいだ名前の変更を、F# と C# で、どの OS でも学べます。",
+      "zh": "欢迎来到 SharpLsp 代码操作快速课程！接下来几分钟，你将学会在任何系统上用 F# 和 C# 修复代码、生成代码，以及跨文件重命名。"
+    },
+    {
+      "scene": "shortcut",
+      "en": "First, the one shortcut you need. On a Mac, press Command dot.",
+      "ja": "まずは、覚えるべきショートカットはひとつだけ。Mac では Command+. を押します。",
+      "zh": "首先，你只需要记住一个快捷键。在 Mac 上，按 Command+.。"
+    },
+    {
+      "scene": "shortcut",
+      "en": "On Windows and Linux, it's Control dot.",
+      "ja": "Windows と Linux では Ctrl+. です。",
+      "zh": "在 Windows 和 Linux 上，是 Ctrl+.。"
+    },
+    {
+      "scene": "shortcut",
+      "en": "Or just click the lightbulb.",
+      "ja": "または電球アイコンをクリックするだけです。",
+      "zh": "或者直接点击灯泡图标。"
+    },
+    {
+      "scene": "shortcut",
+      "en": "Either way, the menu only lists actions that apply to your cursor, your selection, or the diagnostic under it.",
+      "ja": "どの方法でも、メニューにはカーソル、選択範囲、またはその下の診断に当てはまるアクションだけが表示されます。",
+      "zh": "无论哪种方式，菜单只会列出适用于光标、选区或其下诊断的操作。"
+    },
+    {
+      "scene": "context",
+      "en": "So where do actions come from? Three places.",
+      "ja": "では、アクションはどこから来るのでしょう？三つあります。",
+      "zh": "那么，这些操作从哪里来？有三个来源。"
+    },
+    {
+      "scene": "context",
+      "en": "A diagnostic: a warning or an error asks for its own fix.",
+      "ja": "診断：警告やエラーが、それ自身の修正を求めます。",
+      "zh": "诊断：警告或错误会提供它自己的修复。"
+    },
+    {
+      "scene": "context",
+      "en": "The cursor: a type or member you can reshape.",
+      "ja": "カーソル：作り変えられる型やメンバー。",
+      "zh": "光标：可以重塑的类型或成员。"
+    },
+    {
+      "scene": "context",
+      "en": "And a selection: refactorings that work on the code you highlight.",
+      "ja": "そして選択範囲：選択したコードに働くリファクタリングです。",
+      "zh": "还有选区：作用于你所选代码的重构。"
+    },
+    {
+      "scene": "context",
+      "en": "On a blank line, you get an empty menu. SharpLsp never guesses.",
+      "ja": "空行では、メニューは空です。SharpLsp は推測しません。",
+      "zh": "在空行上，菜单是空的。SharpLsp 从不瞎猜。"
+    },
+    {
+      "scene": "fsharp",
+      "en": "Let's start with F#. This describe function matches on a stage, but it's missing a union case.",
+      "ja": "F# から始めましょう。この describe 関数は stage で match していますが、共用体ケースがひとつ足りません。",
+      "zh": "我们从 F# 开始。这个 describe 函数对 stage 做 match，但漏了一个联合用例。"
+    },
+    {
+      "scene": "fsharp",
+      "en": "The compiler flags it with warning FS0025: an incomplete pattern match.",
+      "ja": "コンパイラーは警告 FS0025、不完全なパターンマッチとして知らせます。",
+      "zh": "编译器用警告 FS0025 标出它：模式匹配不完整。"
+    },
+    {
+      "scene": "fsharp",
+      "en": "Press Command dot, pick Generate missing union case, and SharpLsp writes the arm for you.",
+      "ja": "Command+. を押して「Generate missing union case」を選べば、SharpLsp がその分岐を書いてくれます。",
+      "zh": "按 Command+.，选择 Generate missing union case，SharpLsp 就会替你写出这个分支。"
+    },
+    {
+      "scene": "fsharp",
+      "en": "Prefer a catch-all? Add wildcard case is right there too.",
+      "ja": "すべてを受け止めたいなら、「Add wildcard case」もすぐ隣にあります。",
+      "zh": "想要兜底分支？Add wildcard case 也就在旁边。"
+    },
+    {
+      "scene": "fsharp-code",
+      "en": "Here's the result. The new arm matches exactly the case that was missing,",
+      "ja": "これが結果です。新しい分岐は、足りなかったケースにぴったり一致します。",
+      "zh": "这是结果。新分支恰好匹配了缺失的那个用例，"
+    },
+    {
+      "scene": "fsharp-code",
+      "en": "because the F# compiler knows every case of the union. You just write the body.",
+      "ja": "F# コンパイラーが共用体のすべてのケースを知っているからです。あなたは本体を書くだけです。",
+      "zh": "因为 F# 编译器知道联合类型的每一个用例。你只需要写函数体。"
+    },
+    {
+      "scene": "fsharp-fixes",
+      "en": "That's one fix from a whole F# toolkit, each tied to a compiler diagnostic.",
+      "ja": "これは F# の修正ツールキットのひとつにすぎず、どれもコンパイラーの診断に結びついています。",
+      "zh": "这只是整套 F# 修复工具中的一个，每一个都对应一条编译器诊断。"
+    },
+    {
+      "scene": "fsharp-fixes",
+      "en": "Unresolved name? Add the open. Unused binding? Prefix it with an underscore. A discarded value? Pipe it to ignore.",
+      "ja": "名前が解決できない？open を追加。未使用の束縛？アンダースコアを付ける。捨てられた値？ignore にパイプする。",
+      "zh": "名字无法解析？添加 open。绑定未使用？加上下划线前缀。值被丢弃？用管道传给 ignore。"
+    },
+    {
+      "scene": "fsharp-fixes",
+      "en": "And beyond matches, SharpLsp generates missing record fields and interface member stubs.",
+      "ja": "match 以外にも、SharpLsp は足りないレコードのフィールドや、インターフェイスのメンバーのスタブを生成します。",
+      "zh": "除了 match，SharpLsp 还能生成缺失的记录字段和接口成员存根。"
+    },
+    {
+      "scene": "rename",
+      "en": "Renaming is separate from code actions. Put the cursor on a symbol and press F2.",
+      "ja": "名前の変更はコードアクションとは別です。シンボルにカーソルを置いて F2 を押します。",
+      "zh": "重命名和代码操作是分开的。把光标放在符号上，按 F2。"
+    },
+    {
+      "scene": "rename",
+      "en": "Type the new name and hit enter.",
+      "ja": "新しい名前を入力して Enter を押します。",
+      "zh": "输入新名字，然后按回车。"
+    },
+    {
+      "scene": "rename",
+      "en": "Every reference follows, even in other files. Here, the call in Program.fs updates too.",
+      "ja": "すべての参照が追従します。別のファイルでもです。ここでは Program.fs の呼び出しも更新されます。",
+      "zh": "所有引用都会跟着改，即使在其他文件里。这里，Program.fs 中的调用也更新了。"
+    },
+    {
+      "scene": "rename",
+      "en": "In C#, rename runs on Roslyn's loaded solution. In F#, on the loaded F# project.",
+      "ja": "C# では Roslyn が読み込んだソリューションで、F# では読み込んだ F# プロジェクトで名前を変更します。",
+      "zh": "在 C# 中，重命名基于 Roslyn 加载的解决方案；在 F# 中，基于已加载的 F# 项目。"
+    },
+    {
+      "scene": "generate",
+      "en": "Now C#. Here's a favourite workflow: write the call you wish existed. Receipt, of invoice.",
+      "ja": "次は C# です。お気に入りのやり方：あったらいいなと思う呼び出しを書きます。Receipt(invoice) です。",
+      "zh": "现在看 C#。一个很受欢迎的做法：先写出你希望存在的调用。比如 Receipt(invoice)。"
+    },
+    {
+      "scene": "generate",
+      "en": "It doesn't exist yet, so the compiler reports an error.",
+      "ja": "まだ存在しないので、コンパイラーはエラーを報告します。",
+      "zh": "它还不存在，所以编译器报错。"
+    },
+    {
+      "scene": "generate",
+      "en": "Command dot. Generate method.",
+      "ja": "Command+.、「Generate method」。",
+      "zh": "Command+.，选择 Generate method。"
+    },
+    {
+      "scene": "generate",
+      "en": "Roslyn writes the stub, and takes the parameter type from your call.",
+      "ja": "Roslyn がスタブを書き、パラメーターの型は呼び出しから決めます。",
+      "zh": "Roslyn 会写出存根，并根据你的调用确定参数类型。"
+    },
+    {
+      "scene": "using",
+      "en": "Next, use a type without importing its namespace. StringBuilder, say.",
+      "ja": "次に、名前空間をインポートせずに型を使います。たとえば StringBuilder。",
+      "zh": "接下来，在没有导入命名空间的情况下使用一个类型，比如 StringBuilder。"
+    },
+    {
+      "scene": "using",
+      "en": "Quick Fix puts using System.Text right at the top.",
+      "ja": "クイックフィックスは using System.Text をいちばん上に出します。",
+      "zh": "快速修复会把 using System.Text 放在最上面。"
+    },
+    {
+      "scene": "using",
+      "en": "You could also qualify it in place, or even generate a new class.",
+      "ja": "その場で完全修飾したり、新しいクラスを生成したりもできます。",
+      "zh": "你也可以就地写出完全限定名，甚至生成一个新类。"
+    },
+    {
+      "scene": "using",
+      "en": "These come straight from Roslyn's own code fix providers, bundled with SharpLsp.",
+      "ja": "これらは SharpLsp に同梱された Roslyn 自身のコード修正プロバイダーから直接来ています。",
+      "zh": "这些都直接来自 SharpLsp 内置的 Roslyn 代码修复提供程序。"
+    },
+    {
+      "scene": "under",
+      "en": "So what's happening underneath? Your editor asks for code actions at the cursor.",
+      "ja": "では、裏で何が起きているのでしょう？エディターがカーソル位置のコードアクションを問い合わせます。",
+      "zh": "那么底层发生了什么？编辑器会请求光标处的代码操作。"
+    },
+    {
+      "scene": "under",
+      "en": "Roslyn, or the F# compiler, sends back a list of titles. That keeps the menu fast.",
+      "ja": "Roslyn または F# コンパイラーがタイトルの一覧を返します。だからメニューは速いのです。",
+      "zh": "Roslyn 或 F# 编译器返回一个标题列表，这让菜单保持快速。"
+    },
+    {
+      "scene": "under",
+      "en": "Only when you pick one does SharpLsp resolve it and compute the edits.",
+      "ja": "ひとつ選んだときに初めて、SharpLsp がそれを解決して編集を計算します。",
+      "zh": "只有当你选中一项时，SharpLsp 才会解析它并计算编辑。"
+    },
+    {
+      "scene": "under",
+      "en": "The result is one workspace edit, which can touch several files.",
+      "ja": "結果はひとつのワークスペース編集で、複数のファイルに及ぶこともあります。",
+      "zh": "结果是一个工作区编辑，可以同时修改多个文件。"
+    },
+    {
+      "scene": "under",
+      "en": "And if an action has gone stale, you get no edit, never a guess.",
+      "ja": "そしてアクションが古くなっていたら、編集は返りません。推測はしません。",
+      "zh": "如果某个操作已经过时，你得到的是没有编辑，而绝不是瞎猜。"
+    },
+    {
+      "scene": "separate",
+      "en": "Two things that aren't code actions.",
+      "ja": "コードアクションではないものが二つあります。",
+      "zh": "有两样东西不属于代码操作。"
+    },
+    {
+      "scene": "separate",
+      "en": "SharpLsp doesn't format your code. Use CSharpier for C#, and Fantomas for F#.",
+      "ja": "SharpLsp はコードを整形しません。C# には CSharpier、F# には Fantomas を使ってください。",
+      "zh": "SharpLsp 不负责格式化代码。C# 用 CSharpier，F# 用 Fantomas。"
+    },
+    {
+      "scene": "separate",
+      "en": "And Sort Members is its own command. Right-click a C# type in the Solution Explorer to reorder its members.",
+      "ja": "そして Sort Members は独立したコマンドです。ソリューションエクスプローラーで C# の型を右クリックすると、メンバーを並べ替えられます。",
+      "zh": "Sort Members 则是一个独立命令。在解决方案资源管理器中右键点击一个 C# 类型，即可重新排列它的成员。"
+    },
+    {
+      "scene": "recap",
+      "en": "Let's recap. Command dot, or Control dot, opens every action that applies.",
+      "ja": "おさらいしましょう。Command+. または Ctrl+. で、当てはまるすべてのアクションが開きます。",
+      "zh": "来回顾一下。Command+. 或 Ctrl+. 会打开所有适用的操作。"
+    },
+    {
+      "scene": "recap",
+      "en": "F# fixes follow the compiler's diagnostics, and they can write whole match cases.",
+      "ja": "F# の修正はコンパイラーの診断に従い、match のケースを丸ごと書けます。",
+      "zh": "F# 修复跟随编译器诊断，还能写出完整的 match 用例。"
+    },
+    {
+      "scene": "recap",
+      "en": "F2 renames across files.",
+      "ja": "F2 でファイルをまたいで名前を変更できます。",
+      "zh": "F2 可以跨文件重命名。"
+    },
+    {
+      "scene": "recap",
+      "en": "And in C#, you can call first, and generate second.",
+      "ja": "そして C# では、先に呼び出しを書き、あとから生成できます。",
+      "zh": "在 C# 中，你可以先写调用，再生成方法。"
+    },
+    {
+      "scene": "recap",
+      "en": "The full lesson is in the SharpLsp docs. Now go fix some code!",
+      "ja": "レッスンの全文は SharpLsp のドキュメントにあります。さあ、コードを直しに行きましょう！",
+      "zh": "完整课程在 SharpLsp 文档里。现在就去修代码吧！"
+    }
+  ]
+}
diff --git a/src/website/tools/video/films/refactoring/film.mjs b/src/website/tools/video/films/refactoring/film.mjs
new file mode 100644
index 00000000..8e3ef2b9
--- /dev/null
+++ b/src/website/tools/video/films/refactoring/film.mjs
@@ -0,0 +1,23 @@
+// Implements [WEB-DESIGN-MEDIA]. The "Refactoring & Code Actions" walkthrough
+// (`refactoring`): an F# match completed and a function renamed across files,
+// then C# fixes that generate a missing method and add a missing using.
+//
+//   node src/website/tools/video/film.mjs refactoring
+import { LANGUAGE, scene } from '../../kit/acts/language.mjs';
+import { AT_PIPELINE, AT_SESSIONS, missingCase, ready, renameAcrossFiles, repair } from '../../kit/acts/shop.mjs';
+import { SHOP } from '../../kit/set.mjs';
+
+export default {
+  name: 'refactoring',
+  demo: SHOP,
+  settings: LANGUAGE,
+  narration: 'narration.json',
+  poster: { scene: 'generate', at: 7 },
+  scenes: [
+    ...ready(AT_PIPELINE, AT_SESSIONS),
+    scene('fsharp', 1, 'Cmd+. on an F# match: generate the missing union case', missingCase, { speed: 2, chapter: 'FSharp.CodeAction' }),
+    scene('rename', 2, 'Rename (F2) reaches every file in the project', renameAcrossFiles),
+    scene('generate', 3, 'C#: call a method that doesn\'t exist, and generate it', repair(12, 'var receipt = Receipt(invoice);', 'Receipt', 'Generate method'), { chapter: 'CSharp.CodeAction' }),
+    scene('using', 4, 'Use a type, and add its missing using', repair(13, 'var builder = new StringBuilder();', 'StringBuilder', 'using System.Text'), { chapter: 'CSharp.CodeAction' }),
+  ],
+};
diff --git a/src/website/tools/profiler-film/films/refactoring.narration.json b/src/website/tools/video/films/refactoring/narration.json
similarity index 100%
rename from src/website/tools/profiler-film/films/refactoring.narration.json
rename to src/website/tools/video/films/refactoring/narration.json
diff --git a/src/website/tools/video/films/vscode-tutorial/film.mjs b/src/website/tools/video/films/vscode-tutorial/film.mjs
new file mode 100644
index 00000000..1d282819
--- /dev/null
+++ b/src/website/tools/video/films/vscode-tutorial/film.mjs
@@ -0,0 +1,100 @@
+// Implements [WEB-DESIGN-MEDIA] and [WEB-DESIGN-MEDIA-CHAPTERS]. The VS Code
+// tutorial's film (`vscode-tutorial`): one shot per tutorial step ([TUTORIAL-STEPS]),
+// F# first, each doing exactly what its step asks, so the tutorial panel plays
+// the step's own chapter beside the editor while the reader does it live.
+//
+//   node src/website/tools/video/film.mjs vscode-tutorial
+import { LANGUAGE, closeAll, hoverEach, navigate, peekReferences, reopen, scene, typeText } from '../../kit/acts/language.mjs';
+import {
+  AT_CHECKOUT,
+  AT_PIPELINE,
+  AT_PROGRAM_CS,
+  AT_SESSIONS,
+  PIPELINE,
+  csharpCheapest,
+  fsharpCheapest,
+  missingCase,
+  ready,
+  repair,
+  unfoldShop,
+} from '../../kit/acts/shop.mjs';
+import { ringClick } from '../../kit/overlay.mjs';
+import { SHOP } from '../../kit/set.mjs';
+import { clickSharpLspIcon, openFile, sleep } from '../../kit/workbench.mjs';
+
+/** Quick Open (Cmd+P) with `name` typed key by key, then opened. */
+const quickOpen = (name) => async ({ page }) => {
+  await page.keyboard.press('Meta+P');
+  await page.locator('.quick-input-widget input').waitFor();
+  await sleep(600);
+  await typeText(page, name, 110);
+  await sleep(1400);
+  await page.keyboard.press('Enter');
+  await sleep(3000);
+};
+
+/** Off camera: every editor closed and the side bar folded away, so the film opens on an empty editor. */
+async function bare({ page }) {
+  await closeAll(page);
+  await clickSharpLspIcon(page);
+}
+
+/** The SharpLsp icon clicked in the activity bar, then the solution unfolded. */
+async function solutionExplorer(shot) {
+  await ringClick(shot.page, shot.set.cues, shot.page.locator('.activitybar a[aria-label^="SharpLsp"]').first(), 'SharpLsp');
+  await sleep(1500);
+  await unfoldShop(shot);
+}
+
+/** Open `file`, then put the caret on `spot` and press `key`. */
+const jump = (file, spot, key) => async ({ page }) => {
+  await openFile(page, file);
+  await navigate(page, spot, key);
+  await sleep(3500);
+};
+
+const F12_PRODUCT = { line: 23, word: 'Product' };
+
+export default {
+  name: 'vscode-tutorial',
+  demo: SHOP,
+  settings: LANGUAGE,
+  narration: 'narration.json',
+  poster: { scene: 'fsharp-completion', at: 8 },
+  scenes: [
+    ...ready(AT_CHECKOUT, AT_SESSIONS, AT_PROGRAM_CS, AT_PIPELINE),
+    { offCamera: bare },
+    scene('fsharp-open', 1, 'F#: open a source file (Cmd+P)', quickOpen('Checkout.fs'), { chapter: 'FSharp.OpenFile' }),
+    scene('fsharp-hover', 2, 'Rest the mouse on a function: its F# signature', ({ page }) =>
+      hoverEach(page, [{ line: 28, word: 'parseCatalog' }, { line: 28, word: 'pickBasket' }], { scroll: 300, hold: 3200 }), { chapter: 'FSharp.Hover' }),
+    scene('fsharp-completion', 3, 'Type a dot: completion lists what fits', fsharpCheapest, { chapter: 'FSharp.Completion' }),
+    scene('fsharp-definition', 4, 'F12 goes to the definition', ({ page }) => navigate(page, F12_PRODUCT, 'F12').then(() => sleep(3500)), {
+      retries: 3,
+      chapter: 'FSharp.Definition',
+    }),
+    scene('fsharp-references', 5, 'Shift+F12 finds every reference', ({ page }) => peekReferences(page, { line: 3, word: 'Product' }, 5500), {
+      chapter: 'FSharp.References',
+    }),
+    scene('fsharp-action', 6, 'Cmd+. on a warning: pick the fix', missingCase, { chapter: 'FSharp.CodeAction' }),
+    scene('solution', 7, 'The SharpLsp icon opens the Solution Explorer', solutionExplorer, { chapter: 'SolutionExplorer' }),
+    { offCamera: ({ page }) => closeAll(page) },
+    scene('csharp-open', 8, 'C#: open a source file (Cmd+P)', quickOpen('Program.cs'), { chapter: 'CSharp.OpenFile' }),
+    scene('csharp-hover', 9, 'Rest the mouse on a symbol: its docs and type', ({ page }) =>
+      hoverEach(page, [{ line: 5, word: 'Generate' }, { line: 10, word: 'var' }], { hold: 3200 }), { chapter: 'CSharp.Hover' }),
+    // Each take starts from the file as saved, so a retried take never types twice.
+    scene('csharp-completion', 10, 'Type a dot: completion lists what fits', async (shot) => {
+      await reopen(PIPELINE)(shot);
+      await csharpCheapest(shot);
+    }, { retries: 3, chapter: 'CSharp.Completion' }),
+    { offCamera: ({ page }) => closeAll(page) },
+    scene('csharp-definition', 11, 'F12 goes to the definition', jump('Program.cs', { line: 10, word: 'Checkout' }, 'F12'), {
+      retries: 3,
+      chapter: 'CSharp.Definition',
+    }),
+    scene('csharp-references', 12, 'Shift+F12 finds every reference', ({ page }) => peekReferences(page, { line: 16, word: 'Product' }, 5500), {
+      chapter: 'CSharp.References',
+    }),
+    scene('csharp-action', 13, 'Cmd+. on an error: generate the missing method',
+      repair(12, 'var receipt = Receipt(invoice);', 'Receipt', 'Generate method'), { chapter: 'CSharp.CodeAction' }),
+  ],
+};
diff --git a/src/website/tools/video/films/vscode-tutorial/narration.json b/src/website/tools/video/films/vscode-tutorial/narration.json
new file mode 100644
index 00000000..3b3c09b7
--- /dev/null
+++ b/src/website/tools/video/films/vscode-tutorial/narration.json
@@ -0,0 +1,97 @@
+{
+  "voice": "af_heart",
+  "say": {
+    "SharpLsp": "Sharp L S P",
+    "F#": "F sharp",
+    "C#": "C sharp",
+    "Shift+F12": "Shift F twelve",
+    "F12": "F twelve",
+    "Cmd+P": "Command P",
+    "Cmd+.": "Command dot"
+  },
+  "music": {
+    "en": "[Gentle music]",
+    "ja": "[穏やかな音楽]",
+    "zh": "[舒缓的音乐]"
+  },
+  "lines": [
+    {
+      "scene": "fsharp-open",
+      "en": "This is the SharpLsp tutorial, F# first. Press Cmd+P and open a source file, and SharpLsp starts working on it straight away.",
+      "ja": "SharpLsp のチュートリアルです。最初は F# から。Cmd+P でソース ファイルを開くと、SharpLsp はすぐに動き始めます。",
+      "zh": "这是 SharpLsp 教程，先从 F# 开始。按 Cmd+P 打开一个源文件，SharpLsp 立刻开始工作。"
+    },
+    {
+      "scene": "fsharp-hover",
+      "en": "Rest the mouse on a function. SharpLsp shows the signature the F# compiler inferred, with its doc comment.",
+      "ja": "関数の上にマウスを置いてください。F# コンパイラーが推論したシグネチャーを、ドキュメントコメントと一緒に表示します。",
+      "zh": "把鼠标停在一个函数上。SharpLsp 会显示 F# 编译器推断出的签名，以及它的文档注释。"
+    },
+    {
+      "scene": "fsharp-completion",
+      "en": "Type a dot after a value, and completion lists what fits there: the List functions, then the fields of a product.",
+      "ja": "値の後にドットを入力すると、そこに合う候補が並びます。List の関数、次に製品のフィールドです。",
+      "zh": "在值后面输入一个点，补全会列出此处适用的内容：先是 List 的函数，然后是产品的字段。"
+    },
+    {
+      "scene": "fsharp-definition",
+      "en": "Put the cursor on a symbol and press F12 to go to its definition.",
+      "ja": "シンボルにカーソルを置いて F12 を押すと、その定義へ移動します。",
+      "zh": "把光标放在符号上，按 F12 即可转到它的定义。"
+    },
+    {
+      "scene": "fsharp-references",
+      "en": "Shift+F12 finds every reference to it, across the solution.",
+      "ja": "Shift+F12 で、ソリューション全体からその参照をすべて見つけます。",
+      "zh": "按 Shift+F12，可以在整个解决方案中找到它的所有引用。"
+    },
+    {
+      "scene": "fsharp-action",
+      "en": "This match leaves a case out, so F# warns. Press Cmd+. on the warning, and pick the fix that generates the missing case.",
+      "ja": "この match はケースが足りないので、F# が警告します。警告の上で Cmd+. を押し、足りないケースを生成する修正を選びます。",
+      "zh": "这个 match 漏掉了一个用例，所以 F# 发出警告。在警告上按 Cmd+.，选择生成缺失用例的修复。"
+    },
+    {
+      "scene": "solution",
+      "en": "Click the SharpLsp icon in the Activity Bar to open the Solution Explorer: the solution, its projects and their files.",
+      "ja": "アクティビティ バーの SharpLsp アイコンをクリックすると、ソリューション エクスプローラーが開き、ソリューション、プロジェクト、ファイルが表示されます。",
+      "zh": "点击活动栏中的 SharpLsp 图标，打开解决方案资源管理器：解决方案、其中的项目和文件。"
+    },
+    {
+      "scene": "csharp-open",
+      "en": "Now C#. The same seven steps, starting with Cmd+P to open a C# file.",
+      "ja": "次は C# です。同じ 7 つのステップを、Cmd+P で C# ファイルを開くところから始めます。",
+      "zh": "接下来是 C#。同样的七个步骤，先按 Cmd+P 打开一个 C# 文件。"
+    },
+    {
+      "scene": "csharp-hover",
+      "en": "Hover a method to read its XML docs, and hover var to see the type behind it.",
+      "ja": "メソッドにホバーすると XML ドキュメントが読め、var にホバーするとその背後にある型がわかります。",
+      "zh": "悬停在方法上可以阅读它的 XML 文档，悬停在 var 上可以看到它背后的类型。"
+    },
+    {
+      "scene": "csharp-completion",
+      "en": "Type a dot, and completion offers LINQ's methods, then the record's properties.",
+      "ja": "ドットを入力すると、LINQ のメソッド、次にレコードのプロパティが候補に出ます。",
+      "zh": "输入一个点，补全会先给出 LINQ 的方法，然后是记录的属性。"
+    },
+    {
+      "scene": "csharp-definition",
+      "en": "F12 jumps to where a method is defined.",
+      "ja": "F12 で、メソッドが定義されている場所へ移動します。",
+      "zh": "按 F12 跳转到方法定义的位置。"
+    },
+    {
+      "scene": "csharp-references",
+      "en": "And Shift+F12 lists everywhere a type is used.",
+      "ja": "そして Shift+F12 で、型が使われている場所をすべて一覧にします。",
+      "zh": "按 Shift+F12 则会列出某个类型被使用的所有位置。"
+    },
+    {
+      "scene": "csharp-action",
+      "en": "This call names a method that does not exist yet. Press Cmd+. on the error, and generate it. Each step ticks itself off once SharpLsp answers.",
+      "ja": "この呼び出しは、まだ存在しないメソッドを指しています。エラーの上で Cmd+. を押し、メソッドを生成します。SharpLsp が応答すると、各ステップは自動で完了します。",
+      "zh": "这个调用指向一个尚不存在的方法。在错误上按 Cmd+.，生成它。SharpLsp 一旦响应，每个步骤都会自动打勾。"
+    }
+  ]
+}
diff --git a/src/website/tools/hero-netfx-windows.html b/src/website/tools/video/heroes/netfx-windows.html
similarity index 100%
rename from src/website/tools/hero-netfx-windows.html
rename to src/website/tools/video/heroes/netfx-windows.html
diff --git a/src/website/tools/profiler-film/kit/acts/cpu.mjs b/src/website/tools/video/kit/acts/cpu.mjs
similarity index 100%
rename from src/website/tools/profiler-film/kit/acts/cpu.mjs
rename to src/website/tools/video/kit/acts/cpu.mjs
diff --git a/src/website/tools/profiler-film/kit/acts/explorer.mjs b/src/website/tools/video/kit/acts/explorer.mjs
similarity index 90%
rename from src/website/tools/profiler-film/kit/acts/explorer.mjs
rename to src/website/tools/video/kit/acts/explorer.mjs
index e57a8519..4d615d1b 100644
--- a/src/website/tools/profiler-film/kit/acts/explorer.mjs
+++ b/src/website/tools/video/kit/acts/explorer.mjs
@@ -1,7 +1,7 @@
 // Implements [WEB-DESIGN-MEDIA]. Moves in the SharpLsp Solution Explorer: a
 // row by its label, its context menu opened with the pointer on it, an item
 // picked from that menu, and a folded row opened.
-import { pointAt, ringClick } from '../overlay.mjs';
+import { centre, pointAt, ringClick } from '../overlay.mjs';
 import { sleep } from '../workbench.mjs';
 
 /** The Solution Explorer row whose label matches `name` (a RegExp). */
@@ -12,7 +12,7 @@ export async function openMenu(page, name) {
   const target = row(page, name);
   const box = await target.boundingBox();
   if (!box) throw new Error(`no Solution Explorer row ${name}`);
-  const at = { x: box.x + Math.min(120, box.width / 2), y: box.y + box.height / 2 };
+  const at = centre(box, 120);
   await pointAt(page, at);
   await page.mouse.click(at.x, at.y, { button: 'right' });
   await page.locator('.monaco-menu').first().waitFor();
diff --git a/src/website/tools/profiler-film/kit/acts/language.mjs b/src/website/tools/video/kit/acts/language.mjs
similarity index 96%
rename from src/website/tools/profiler-film/kit/acts/language.mjs
rename to src/website/tools/video/kit/acts/language.mjs
index 0f76ceda..6d78c105 100644
--- a/src/website/tools/profiler-film/kit/acts/language.mjs
+++ b/src/website/tools/video/kit/acts/language.mjs
@@ -117,8 +117,8 @@ export const warm = (file, probe) => async ({ page }) => {
   await awaitSemantics(page, probe);
 };
 
-/** Off camera: every editor closed without saving, `file` open. Fails if an edited editor survives. */
-export const reopen = (file) => async ({ page }) => {
+/** Every editor closed without saving. Fails if an edited editor survives. */
+export async function closeAll(page) {
   await runCommand(page, 'View: Close All Editors');
   const edited = page.locator('.tabs-container .tab.dirty');
   // The save prompt opens a moment after the close: answer it until no edited editor is left.
@@ -128,6 +128,11 @@ export const reopen = (file) => async ({ page }) => {
     await sleep(500);
   }
   if ((await edited.count()) > 0) throw new Error('an edited editor stayed open');
+}
+
+/** Off camera: every editor closed without saving, `file` open. */
+export const reopen = (file) => async ({ page }) => {
+  await closeAll(page);
   await openFile(page, file);
 };
 
@@ -224,12 +229,15 @@ export async function hoverEach(page, spots, { scroll = 0, hold = 2600 } = {}) {
 /**
  * Clip `clip`: step `number`'s caption while `act(shot)` runs. A `speed` above 1
  * plays it fast-forwarded, and the caption says so; `retries` shoots a failed
- * take again.
+ * take again; `chapter` names the tutorial step it shows, and the caption
+ * titles that chapter ([WEB-DESIGN-MEDIA-CHAPTERS]).
  */
-export const scene = (clip, number, text, act, { speed = 1, retries = 1 } = {}) => ({
+export const scene = (clip, number, text, act, { speed = 1, retries = 1, chapter } = {}) => ({
   clip,
   speed,
   retries,
+  chapter,
+  title: text,
   act: async (shot) => {
     await caption(shot.page, number, text, speed > 1 ? `${speed}×` : '');
     await sleep(900);
diff --git a/src/website/tools/profiler-film/kit/acts/memory.mjs b/src/website/tools/video/kit/acts/memory.mjs
similarity index 100%
rename from src/website/tools/profiler-film/kit/acts/memory.mjs
rename to src/website/tools/video/kit/acts/memory.mjs
diff --git a/src/website/tools/profiler-film/kit/acts/shop.mjs b/src/website/tools/video/kit/acts/shop.mjs
similarity index 70%
rename from src/website/tools/profiler-film/kit/acts/shop.mjs
rename to src/website/tools/video/kit/acts/shop.mjs
index 0e20e431..50a4b760 100644
--- a/src/website/tools/profiler-film/kit/acts/shop.mjs
+++ b/src/website/tools/video/kit/acts/shop.mjs
@@ -1,8 +1,10 @@
 // Implements [WEB-DESIGN-MEDIA]. Moves on the Shop demo (demos/Shop.slnx) that
 // several language films tell: code typed through completion in F# and C#, a
-// match completed by a quick fix, and a rename that reaches another file.
+// match completed by a quick fix, C# repaired by one, a rename that reaches
+// another file, and the solution unfolded.
 import { hoverOn } from '../code.mjs';
 import { openFile, sleep, typeAt } from '../workbench.mjs';
+import { unfold } from './explorer.mjs';
 import { prepareCode, quickFix, renameTo, scrollEditor, typeThroughCompletion, warm } from './language.mjs';
 
 /** Checkout.fs: a new function typed through List's functions, then the record's fields. */
@@ -49,3 +51,25 @@ export async function renameAcrossFiles({ page }) {
   await hoverOn(page, { line: 11, word: 'rememberOrder' });
   await sleep(3000);
 }
+
+/** The C# pipeline's file, where a fix repairs code typed to break it. */
+export const PIPELINE = 'CheckoutPipeline.cs';
+
+/** CheckoutPipeline.cs: type a line after `line` that breaks the build, then apply the fix titled `title` at `word`. */
+export const repair = (line, text, word, title) => async ({ page, set }) => {
+  await openFile(page, PIPELINE);
+  await typeAt(page, { line, append: true, text: `\n        ${text}` });
+  await page.keyboard.press('Escape');
+  await sleep(2000);
+  await quickFix(page, set.cues, { line: line + 1, word }, title);
+  await sleep(2500);
+};
+
+/** The Solution Explorer: the F# project unfolded, then the C# one and its folder. */
+export async function unfoldShop({ page }) {
+  await unfold(page, /^FsStorefront \(FsStorefront\.fsproj\)/);
+  await sleep(1500);
+  await unfold(page, /^Storefront \(Storefront\.csproj\)/);
+  await unfold(page, /^Storefront$/);
+  await sleep(3000);
+}
diff --git a/src/website/tools/profiler-film/kit/acts/tour.mjs b/src/website/tools/video/kit/acts/tour.mjs
similarity index 100%
rename from src/website/tools/profiler-film/kit/acts/tour.mjs
rename to src/website/tools/video/kit/acts/tour.mjs
diff --git a/src/website/tools/profiler-film/kit/camera.mjs b/src/website/tools/video/kit/camera.mjs
similarity index 54%
rename from src/website/tools/profiler-film/kit/camera.mjs
rename to src/website/tools/video/kit/camera.mjs
index 67123130..aab084f1 100644
--- a/src/website/tools/profiler-film/kit/camera.mjs
+++ b/src/website/tools/video/kit/camera.mjs
@@ -1,8 +1,11 @@
 // Implements [WEB-DESIGN-MEDIA]. What a film records: real-time screencast clips,
-// the click cues a composited film's cursor follows, and clean stills.
+// each with the track its camera follows ([WEB-DESIGN-MEDIA-CAMERA]), the click
+// cues a composited film's cursor follows, and clean stills.
 import fs from 'node:fs';
 import path from 'node:path';
+import { centre } from './overlay.mjs';
 import { startScreencast } from './screencast.mjs';
+import { saveTrack, startTrack, stopTrack } from './track.mjs';
 import { PARK, sleep } from './workbench.mjs';
 
 /** Click-cue log: where and when the (invisible) mouse acted, relative to a clip's start. */
@@ -16,7 +19,7 @@ export function cueLog(clips) {
     },
     async click(page, locator, label) {
       const box = await locator.boundingBox();
-      if (box) cues.push({ t: (Date.now() - start) / 1000, x: box.x + box.width / 2, y: box.y + box.height / 2, label });
+      if (box) cues.push({ t: (Date.now() - start) / 1000, ...centre(box), label });
       await locator.click({ force: true });
       await page.waitForTimeout(350);
       await page.mouse.move(PARK.x, PARK.y);
@@ -26,42 +29,43 @@ export function cueLog(clips) {
 }
 
 /**
- * Record `act` as a real-time clip `<clips>/<name>.mp4`, its frames under `<frames>/<name>`.
- * A failed act still ends the screencast, so the take can be shot again.
+ * Record `act` as a real-time clip `<clips>/<name>.mp4`, its frames under
+ * `<frames>/<name>`, and the track its camera follows as `<clips>/<name>.track.json`.
+ * A failed act still ends the screencast and the track, so the take can be shot again.
  */
-export async function record({ cdp, cues, frames, clips }, name, act) {
+export async function record({ page, cdp, cues, frames, clips }, name, act) {
   cues.restart();
+  await startTrack(page);
   const stop = await startScreencast(cdp, path.join(frames, name));
   const clip = path.join(clips, `${name}.mp4`);
   try {
     await act();
   } catch (error) {
     await stop(clip).catch(() => undefined);
+    await stopTrack(page).catch(() => undefined);
     throw error;
   }
-  await stop(clip);
+  const { start } = await stop(clip);
+  saveTrack(await stopTrack(page), start, path.join(clips, `${name}.track.json`));
   cues.save(name);
 }
 
-/** Show or hide the step caption and the pointer, where a walkthrough has drawn them. */
-const showCaption = (page, shown) =>
-  page.evaluate(
-    (visibility) => ['film-caption', 'film-pointer'].forEach((id) => document.getElementById(id)?.style.setProperty('visibility', visibility)),
-    shown ? 'visible' : 'hidden',
-  );
+/** Show or hide the pointer, where a walkthrough has drawn it. */
+const showPointer = (page, shown) =>
+  page.evaluate((visibility) => document.getElementById('film-pointer')?.style.setProperty('visibility', visibility), shown ? 'visible' : 'hidden');
 
 /**
- * A clean frame `<dir>/<name>.png`: the step caption and pointer hidden only for
- * the instant of the shot (Do Not Disturb keeps toasts off screen), and the
- * mouse parked first, so no hover shows, unless `hovering` keeps the one open.
+ * A clean frame `<dir>/<name>.png`: the pointer hidden only for the instant of
+ * the shot (Do Not Disturb keeps toasts off screen), and the mouse parked
+ * first, so no hover shows, unless `hovering` keeps the one open.
  */
 export async function still(page, dir, name, { hovering = false } = {}) {
   fs.mkdirSync(dir, { recursive: true });
   if (!hovering) await page.mouse.move(PARK.x, PARK.y);
   await sleep(700);
-  await showCaption(page, false);
+  await showPointer(page, false);
   await page.screenshot({ path: path.join(dir, `${name}.png`) });
-  await showCaption(page, true);
+  await showPointer(page, true);
 }
 
 /** A walkthrough's still, into the film's own stills folder; published as `<name>.webp`. */
diff --git a/src/website/tools/video/kit/captions.mjs b/src/website/tools/video/kit/captions.mjs
new file mode 100644
index 00000000..d17c340e
--- /dev/null
+++ b/src/website/tools/video/kit/captions.mjs
@@ -0,0 +1,55 @@
+// Implements [WEB-DESIGN-MEDIA-CAMERA]. The numbered step caption, and the speed
+// badge on a fast-forwarded stretch, drawn over the cut after the camera, so
+// they hold still and stay whole however close the camera goes. Each caption is
+// rendered once by Chromium as a transparent frame, in the type and at the
+// place the workbench overlay used, and the cut lays it over its clip.
+import path from 'node:path';
+import { chromium } from '@playwright/test';
+
+const BAR = {
+  position: 'fixed', left: '72px', bottom: '40px',
+  display: 'flex', alignItems: 'center', gap: '14px', padding: '12px 22px 12px 12px', borderRadius: '14px',
+  background: 'rgba(11, 18, 32, .92)', border: '1px solid #2a3c58', boxShadow: '0 12px 32px rgba(0, 0, 0, .45)',
+  font: "600 21px/1.3 system-ui, -apple-system, 'Segoe UI', sans-serif", color: '#e6edf3',
+};
+const STEP = {
+  display: 'grid', placeItems: 'center', width: '34px', height: '34px', borderRadius: '10px',
+  background: '#2ecc8f', color: '#0b1220', fontWeight: '800',
+};
+const SPEED = { padding: '4px 10px', borderRadius: '999px', background: '#e2a24a', color: '#0b1220', fontSize: '16px', fontWeight: '800' };
+
+/** In the page: the caption bar alone on a transparent page. */
+function drawInPage({ styles, parts }) {
+  const node = (style, content) => {
+    const element = document.createElement('span');
+    Object.assign(element.style, style);
+    element.textContent = content;
+    return element;
+  };
+  const bar = document.createElement('div');
+  Object.assign(bar.style, styles.bar);
+  bar.append(node(styles.step, parts.step), node({}, parts.text));
+  if (parts.speed) bar.append(node(styles.speed, `${parts.speed} speed`));
+  document.body.replaceChildren(bar);
+}
+
+/**
+ * Each of `captions` (`{ step, text, speed }`) as `<dir>/caption-<n>.png`: a
+ * transparent frame `width` pixels wide, shaped like the workbench (`size`, in
+ * its pixels), with the bar where the workbench overlay drew it. Resolves to
+ * the files, in order.
+ */
+export async function captionFrames(captions, size, width, dir) {
+  const browser = await chromium.launch();
+  try {
+    const page = await browser.newPage({ viewport: { width: size[0], height: size[1] }, deviceScaleFactor: width / size[0] });
+    const files = captions.map((_, index) => path.join(dir, `caption-${index}.png`));
+    for (const [index, { step, text, speed }] of captions.entries()) {
+      await page.evaluate(drawInPage, { styles: { bar: BAR, step: STEP, speed: SPEED }, parts: { step: String(step), text, speed } });
+      await page.screenshot({ path: files[index], omitBackground: true });
+    }
+    return files;
+  } finally {
+    await browser.close();
+  }
+}
diff --git a/src/website/tools/video/kit/chapters.mjs b/src/website/tools/video/kit/chapters.mjs
new file mode 100644
index 00000000..851581a8
--- /dev/null
+++ b/src/website/tools/video/kit/chapters.mjs
@@ -0,0 +1,39 @@
+// Implements [WEB-DESIGN-MEDIA-CHAPTERS]. A film's chapters: each run of its cut
+// that shows one step of the VS Code tutorial ([TUTORIAL-STEPS]), published as
+// `<name>.chapters.vtt` beside its video, so the tutorial plays that step's run alone.
+import fs from 'node:fs';
+import path from 'node:path';
+import { videos } from './encode.mjs';
+import { webVtt } from './vtt.mjs';
+
+/** The second of the cut at which shot `index` starts: every shot before it, played and held. */
+export const startOf = (shots, index) => shots.slice(0, index).reduce((total, shot) => total + shot.length + (shot.hold ?? 0), 0);
+
+/** Consecutive shots marked with one `chapter`, as `{ id, title, since, until }` shot indexes. */
+const runsOf = (shots) =>
+  shots.reduce((runs, shot, index) => {
+    const last = runs.at(-1);
+    if (!shot.chapter) return runs;
+    if (last?.id === shot.chapter && last.until === index) return [...runs.slice(0, -1), { ...last, until: index + 1 }];
+    return [...runs, { id: shot.chapter, title: shot.title ?? shot.chapter, since: index, until: index + 1 }];
+  }, []);
+
+/** Each chapter, `{ id, title, from, to }` in seconds of the cut. A chapter marked on shots apart fails the film. */
+export function chaptersOf(shots) {
+  const runs = runsOf(shots);
+  const repeated = runs.find((run, index) => runs.findIndex((other) => other.id === run.id) !== index);
+  if (repeated) throw new Error(`chapter "${repeated.id}" marks shots that are not consecutive`);
+  return runs.map(({ id, title, since, until }) => ({ id, title, from: startOf(shots, since), to: startOf(shots, until) }));
+}
+
+/** The chapters track: one cue per chapter, identified by its id and titled by its first shot's caption. */
+export const chaptersTrack = (chapters) => webVtt(chapters.map(({ id, title, from, to }) => ({ id, from, to, text: title })));
+
+/** Write `<name>.chapters.vtt` beside the video; a film that marks no chapters has none. */
+export function writeChapters(name, shots) {
+  const file = path.join(videos, `${name}.chapters.vtt`);
+  const chapters = chaptersOf(shots);
+  if (chapters.length === 0) fs.rmSync(file, { force: true });
+  else fs.writeFileSync(file, chaptersTrack(chapters));
+  return chapters;
+}
diff --git a/src/website/tools/profiler-film/kit/code.mjs b/src/website/tools/video/kit/code.mjs
similarity index 96%
rename from src/website/tools/profiler-film/kit/code.mjs
rename to src/website/tools/video/kit/code.mjs
index d292eb68..381dfff8 100644
--- a/src/website/tools/profiler-film/kit/code.mjs
+++ b/src/website/tools/video/kit/code.mjs
@@ -2,7 +2,7 @@
 // shot with: go to a line, find a word on screen, hover it, and trigger the
 // editor's own completion, navigation, quick fixes and rename. Every result on
 // camera comes from SharpLsp; nothing is drawn but the pointer.
-import { pointAt } from './overlay.mjs';
+import { centre, pointAt } from './overlay.mjs';
 import { goTo, sleep } from './workbench.mjs';
 
 /** The active editor's widgets: a hover, the suggest list, the code-action menu, the rename box. */
@@ -49,7 +49,6 @@ export const wordOn = (page, line, word, nth = 0) =>
     { line, word, nth },
   );
 
-const centre = (box) => ({ x: box.x + box.width / 2, y: box.y + box.height / 2 });
 
 /** The centre of `word` on `line`, scrolled into view first. */
 export async function findWord(page, { line, word, nth = 0 }) {
diff --git a/src/website/tools/profiler-film/kit/editor.mjs b/src/website/tools/video/kit/editor.mjs
similarity index 89%
rename from src/website/tools/profiler-film/kit/editor.mjs
rename to src/website/tools/video/kit/editor.mjs
index 39255070..f0b38010 100644
--- a/src/website/tools/profiler-film/kit/editor.mjs
+++ b/src/website/tools/video/kit/editor.mjs
@@ -1,10 +1,12 @@
 // Implements [WEB-DESIGN-MEDIA]. The isolated VS Code the profiler film is shot in: the build @vscode/test-electron
 // downloaded for the e2e suites, a throwaway user-data and extensions dir with the
 // PACKAGED SharpLsp VSIX installed (the extension users get, not a dev host), and
-// a CDP port Playwright drives. It never touches the user's own VS Code.
+// a CDP port of its own that Playwright drives, so shoots run side by side. It
+// never touches the user's own VS Code.
 // Prerequisite: `make _build-vsix VSIX_PREBUILT=1` (writes dist/sharplsp.vsix).
 import { spawn, spawnSync } from 'node:child_process';
 import fs from 'node:fs';
+import net from 'node:net';
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
 import { chromium } from '@playwright/test';
@@ -73,6 +75,8 @@ const FILM_SETTINGS = {
   'extensions.autoCheckUpdates': false,
   'security.workspace.trust.enabled': false,
   'git.enabled': false,
+  // The in-app tutorial opens itself on a first start, and every shoot is one.
+  'sharplsp.tutorial.showOnStartup': false,
   // The memory timeline grows on camera: a snapshot every few seconds while tracking.
   'sharplsp.profiler.autoSnapshot': true,
   'sharplsp.profiler.autoSnapshotInterval': 3,
@@ -106,13 +110,18 @@ function editorEnv() {
   return env;
 }
 
+/** Write `settings` as `<folder>/settings.json`: the user's (`<user data>/User`) or a workspace's (`.vscode`). */
+export function writeSettings(folder, settings) {
+  fs.mkdirSync(folder, { recursive: true });
+  fs.writeFileSync(path.join(folder, 'settings.json'), JSON.stringify(settings));
+}
+
 /** A short scratch root (the main IPC socket path must stay under ~104 chars). */
 function freshProfile() {
   const root = fs.mkdtempSync(path.join(SCRATCH, 'slsp-film-'));
   const userData = path.join(root, 'u');
   const extensions = path.join(root, 'x');
-  fs.mkdirSync(path.join(userData, 'User'), { recursive: true });
-  fs.writeFileSync(path.join(userData, 'User/settings.json'), JSON.stringify(FILM_SETTINGS));
+  writeSettings(path.join(userData, 'User'), FILM_SETTINGS);
   installExtensions(extensions, userData);
   return { root, userData, extensions };
 }
@@ -136,6 +145,17 @@ function installExtensions(extensions, userData) {
   if (result.status !== 0) throw new Error(`installing ${vsix} failed: ${result.stderr}`);
 }
 
+/** A port no other process listens on, so two shoots never drive each other's editor. */
+function freePort() {
+  return new Promise((resolve, reject) => {
+    const server = net.createServer().once('error', reject);
+    server.listen(0, '127.0.0.1', () => {
+      const { port } = server.address();
+      server.close(() => resolve(port));
+    });
+  });
+}
+
 async function waitForCdp(port) {
   const deadline = Date.now() + 60_000;
   while (Date.now() < deadline) {
@@ -180,8 +200,9 @@ async function frameWindow(page, width, height) {
  * and hand back the workbench page and its `logs` folder. `close()` ends only
  * the process this module spawned.
  */
-export async function launchVsCode({ workspace, port = 9241, width = 1600, height = 1000, disabled = [] }) {
+export async function launchVsCode({ workspace, width = 1600, height = 1000, disabled = [] }) {
   const profile = freshProfile();
+  const port = await freePort();
   const child = spawnEditor(profile, workspace, port, disabled);
   await waitForCdp(port);
   const browser = await chromium.connectOverCDP(`http://127.0.0.1:${port}`);
diff --git a/src/website/tools/profiler-film/kit/encode.mjs b/src/website/tools/video/kit/encode.mjs
similarity index 81%
rename from src/website/tools/profiler-film/kit/encode.mjs
rename to src/website/tools/video/kit/encode.mjs
index 88ed5402..64806367 100644
--- a/src/website/tools/profiler-film/kit/encode.mjs
+++ b/src/website/tools/video/kit/encode.mjs
@@ -24,11 +24,24 @@ export const OPUS = ['-c:a', 'libopus', '-b:a', '128k'];
 /** A video setting that keeps the soundtrack. */
 export const audible = (video) => video.filter((arg) => arg !== '-an');
 
-/** The length of `file` in seconds. */
-export function duration(file) {
-  const result = spawnSync('ffprobe', ['-v', 'error', '-show_entries', 'format=duration', '-of', 'csv=p=0', file], { encoding: 'utf8' });
+/** One ffprobe query of `file`, its answer as plain text. */
+function probe(file, query) {
+  const result = spawnSync('ffprobe', ['-v', 'error', ...query, '-of', 'csv=p=0', file], { encoding: 'utf8' });
   if (result.status !== 0) throw new Error(`ffprobe ${file} failed: ${result.stderr}`);
-  return Number(result.stdout.trim());
+  return result.stdout.trim();
+}
+
+/** The length of `file` in seconds. */
+export const duration = (file) => Number(probe(file, ['-show_entries', 'format=duration']));
+
+/** The width and height of `file`'s video, in pixels. */
+export const dimensions = (file) => probe(file, ['-select_streams', 'v:0', '-show_entries', 'stream=width,height']).split(',').map(Number);
+
+/** `dir`, emptied: a shoot or a publish starts each working folder afresh. */
+export function emptyDir(dir) {
+  fs.rmSync(dir, { recursive: true, force: true });
+  fs.mkdirSync(dir, { recursive: true });
+  return dir;
 }
 
 export function ffmpeg(args, label) {
diff --git a/src/website/tools/video/kit/frames.mjs b/src/website/tools/video/kit/frames.mjs
new file mode 100644
index 00000000..1ad3c2d5
--- /dev/null
+++ b/src/website/tools/video/kit/frames.mjs
@@ -0,0 +1,80 @@
+// Implements [WEB-DESIGN-MEDIA]. Composited films are web pages whose every frame
+// is a pure function of t: `window.renderFrame(t)` sets the page and resolves once
+// its images are decoded. This steps such a page in headless Chromium and pipes
+// each frame, losslessly, into a master encode; `explode` turns footage into the
+// numbered JPEGs those pages step through.
+import { spawn } from 'node:child_process';
+import fs from 'node:fs';
+import path from 'node:path';
+import { chromium } from '@playwright/test';
+import { ffmpeg } from './encode.mjs';
+
+export const FPS = 30;
+const VIEWPORT = { width: 1920, height: 1080 };
+
+/** `video` (optionally `filter`ed) as `dir/00001.jpg` onwards at FPS; returns the frame count. */
+export function explode(video, dir, filter = '') {
+  fs.rmSync(dir, { recursive: true, force: true });
+  fs.mkdirSync(dir, { recursive: true });
+  ffmpeg(['-i', video, '-vf', [`fps=${FPS}`, filter].filter(Boolean).join(','), '-q:v', '2', path.join(dir, '%05d.jpg')], path.basename(dir));
+  return fs.readdirSync(dir).filter((file) => file.endsWith('.jpg')).length;
+}
+
+/** Open `html` with `data` as `window[global]`; resolves to the page and the length it reports as FILM_DURATION. */
+export async function openFilm(browser, html, global, data) {
+  const page = await browser.newPage({ viewport: VIEWPORT, deviceScaleFactor: 1 });
+  await page.addInitScript(([name, value]) => {
+    window[name] = value;
+  }, [global, data]);
+  await page.goto(`file://${html}`);
+  await page.evaluate(() => document.fonts.ready);
+  return { page, duration: await page.evaluate(() => window.FILM_DURATION) };
+}
+
+/** A lossless H.264 encoder reading PNG frames from its stdin. */
+function encoder(master) {
+  const args = ['-y', '-loglevel', 'error', '-f', 'image2pipe', '-framerate', String(FPS), '-c:v', 'png', '-i', '-',
+    '-c:v', 'libx264', '-preset', 'slow', '-crf', '12', '-pix_fmt', 'yuv420p', master];
+  const child = spawn('ffmpeg', args, { stdio: ['pipe', 'inherit', 'inherit'] });
+  const done = new Promise((resolve, reject) => child.once('exit', (code) => (code === 0 ? resolve() : reject(new Error(`master encode exited ${code}`)))));
+  return { stdin: child.stdin, done };
+}
+
+/** Step `page` through `duration` seconds into `master`. */
+async function step(page, duration, master) {
+  const { stdin, done } = encoder(master);
+  for (let frame = 0; frame < Math.ceil(duration * FPS); frame++) {
+    await page.evaluate((t) => window.renderFrame(t), frame / FPS);
+    if (!stdin.write(await page.screenshot({ type: 'png' }))) await new Promise((resolve) => stdin.once('drain', resolve));
+  }
+  stdin.end();
+  await done;
+}
+
+/** Render the film page `html`, given `data` as `window[global]`, into the silent `master`; resolves to its length. */
+export async function renderMaster(html, global, data, master) {
+  const browser = await chromium.launch();
+  try {
+    const { page, duration } = await openFilm(browser, html, global, data);
+    await step(page, duration, master);
+    return duration;
+  } finally {
+    await browser.close();
+  }
+}
+
+/** PNG stills of the film page at each of `times` into `dir`; resolves to the film's length. */
+export async function previewFrames(html, global, data, times, dir) {
+  const browser = await chromium.launch();
+  try {
+    const { page, duration } = await openFilm(browser, html, global, data);
+    fs.mkdirSync(dir, { recursive: true });
+    for (const t of times) {
+      await page.evaluate((at) => window.renderFrame(at), t);
+      await page.screenshot({ path: path.join(dir, `${t}.png`) });
+    }
+    return duration;
+  } finally {
+    await browser.close();
+  }
+}
diff --git a/src/website/tools/video/kit/lesson/deck.html b/src/website/tools/video/kit/lesson/deck.html
new file mode 100644
index 00000000..777ec701
--- /dev/null
+++ b/src/website/tools/video/kit/lesson/deck.html
@@ -0,0 +1,132 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>SharpLsp lesson</title>
+<!-- Implements [WEB-DESIGN-MEDIA]. A lesson's slides: deck.js builds them from
+     window.LESSON and draws every frame from t alone (renderFrame), so
+     kit/frames.mjs can step it. The palette is the blog heroes'. -->
+<style>
+  :root {
+    --bg: #0b1220;
+    --panel: #0d1526;
+    --bar: #111b30;
+    --line: #223047;
+    --chip: #2a3c58;
+    --ink: #e6edf3;
+    --muted: #9fb0c0;
+    --green: #2ecc8f;
+    --mint: #7ee2b8;
+    --amber: #e2c08d;
+    --orange: #e2a24a;
+    --red: #e0564f;
+    --font: "SF Pro Display", -apple-system, "Segoe UI", system-ui, sans-serif;
+    --mono: "SF Mono", Menlo, Consolas, monospace;
+  }
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  html, body { width: 1920px; height: 1080px; overflow: hidden; background: var(--bg); color: var(--ink); font-family: var(--font); }
+  .layer { position: absolute; inset: 0; }
+  #grid {
+    background-image: linear-gradient(rgb(255 255 255 / 4.5%) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / 4.5%) 1px, transparent 1px);
+    background-size: 64px 64px;
+  }
+  #glow { width: 1300px; height: 1300px; left: auto; right: -320px; top: -420px; border-radius: 50%; background: radial-gradient(circle, rgb(15 127 73 / 34%), transparent 62%); }
+  #brand { position: absolute; left: 72px; top: 46px; display: flex; align-items: center; gap: 16px; font-size: 26px; font-weight: 700; }
+  #brand img { width: 44px; height: 44px; border-radius: 10px; }
+  #brand .series { font: 600 20px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--green); padding-left: 16px; border-left: 2px solid var(--chip); }
+  #count { position: absolute; right: 72px; top: 54px; font: 600 22px/1 var(--mono); color: var(--muted); letter-spacing: .1em; }
+  #progress { position: absolute; left: 0; bottom: 0; height: 8px; width: 100%; background: rgb(255 255 255 / 6%); }
+  #progress i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--green); box-shadow: 0 0 18px rgb(46 204 143 / 70%); }
+  #progress b { position: absolute; top: -6px; width: 2px; height: 20px; background: var(--chip); }
+
+  .slide { position: absolute; inset: 0; padding: 120px 120px 90px; visibility: hidden; display: flex; flex-direction: column; justify-content: center; }
+  .footage-slide { justify-content: flex-start; padding-top: 128px; }
+  .kicker { font: 600 24px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--green); }
+  .heading { font-size: 70px; line-height: 1.08; font-weight: 750; letter-spacing: -.025em; margin-top: 22px; max-width: 1560px; }
+  .heading em, .title em { font-style: normal; color: var(--green); }
+  .sub { font-size: 34px; line-height: 1.45; color: var(--muted); margin-top: 30px; max-width: 1300px; }
+  .sub b { color: var(--ink); font-weight: 600; }
+  code, .mono { font-family: var(--mono); }
+  .item { will-change: transform, opacity; }
+
+  /* title */
+  .title { font-size: 128px; line-height: 1.02; font-weight: 800; letter-spacing: -.045em; margin-top: 30px; }
+  .chips { display: flex; gap: 18px; margin-top: 60px; }
+  .chips div { border: 1px solid var(--chip); border-radius: 999px; padding: 14px 30px; font-size: 26px; color: var(--muted); background: rgb(17 27 48 / 70%); }
+
+  /* points */
+  .rows { margin-top: 64px; display: flex; flex-direction: column; gap: 26px; max-width: 1560px; }
+  .row { display: grid; grid-template-columns: 300px 1fr auto; align-items: center; gap: 30px; font-size: 36px; color: var(--muted);
+    padding: 26px 34px; border: 1px solid var(--line); border-radius: 18px; background: rgb(13 21 38 / 80%); }
+  .row .k { color: var(--ink); font-weight: 700; }
+  .row .k code { color: var(--amber); font-size: 32px; }
+  .row .w { color: var(--green); font-weight: 650; font-size: 30px; }
+
+  /* keys */
+  .keys { display: flex; gap: 90px; margin-top: 90px; align-items: flex-end; }
+  .keyset .os { font: 600 24px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 26px; }
+  .keyset .caps { display: flex; gap: 18px; align-items: center; font-size: 44px; color: var(--muted); }
+  .cap { min-width: 150px; height: 150px; padding: 0 30px; display: grid; place-items: center; border-radius: 26px; font-size: 64px; font-weight: 700; color: var(--ink);
+    background: linear-gradient(#18243d, #0f1829); border: 2px solid var(--chip); border-bottom-width: 12px; box-shadow: 0 24px 50px rgb(0 0 0 / 45%); }
+  .keyset.hot .cap { border-color: var(--green); color: var(--green); box-shadow: 0 0 60px rgb(46 204 143 / 35%), 0 24px 50px rgb(0 0 0 / 45%); }
+
+  /* footage */
+  .screen { position: absolute; left: 120px; top: 294px; width: 1190px; height: 740px; border-radius: 16px; overflow: hidden; background: var(--panel);
+    border: 1px solid var(--line); box-shadow: 0 30px 80px rgb(0 0 0 / 55%); }
+  .screen .bar { height: 48px; background: var(--bar); display: flex; align-items: center; gap: 10px; padding: 0 20px; border-bottom: 1px solid var(--line); }
+  .screen .bar i { width: 13px; height: 13px; border-radius: 50%; }
+  .screen .bar span { margin-left: 12px; font-size: 19px; color: var(--muted); }
+  .screen .bar em { margin-left: auto; font: 600 16px/1 var(--mono); font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: var(--green); }
+  .screen img { display: block; width: 1190px; height: 692px; object-fit: cover; object-position: 0 0; }
+  .speed { position: absolute; right: 18px; top: 66px; padding: 8px 16px; border-radius: 999px; background: var(--orange); color: var(--bg); font: 800 20px/1 var(--font); }
+  .notes { position: absolute; left: 1350px; top: 294px; width: 460px; display: flex; flex-direction: column; gap: 24px; }
+  .note { display: grid; grid-template-columns: 52px 1fr; gap: 18px; align-items: start; font-size: 30px; line-height: 1.32; color: var(--ink);
+    padding: 22px 24px; border-radius: 16px; background: rgb(13 21 38 / 85%); border: 1px solid var(--line); }
+  .note .n { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 13px; background: var(--green); color: var(--bg); font-weight: 800; font-size: 28px; }
+  .note code { color: var(--amber); }
+
+  /* cards */
+  .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 56px; max-width: 1680px; }
+  .card { padding: 26px 30px; border-radius: 18px; border: 1px solid var(--line); background: rgb(13 21 38 / 85%); }
+  .card code { display: inline-block; font-size: 26px; color: var(--amber); padding: 6px 14px; border-radius: 10px; background: rgb(226 192 141 / 10%); }
+  .card p { font-size: 29px; line-height: 1.32; margin-top: 16px; color: var(--ink); }
+
+  /* code */
+  .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 60px; }
+  .code { border-radius: 18px; border: 1px solid var(--line); background: var(--panel); overflow: hidden; }
+  .code .label { padding: 18px 28px; font: 600 22px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); background: var(--bar); border-bottom: 1px solid var(--line); }
+  .code pre { padding: 26px 0; font: 32px/1.6 var(--mono); color: var(--ink); }
+  .code pre div { padding: 0 28px; white-space: pre; }
+  .code pre .add { background: rgb(46 204 143 / 14%); box-shadow: inset 6px 0 var(--green); color: var(--mint); }
+  .code pre .warn { text-decoration: underline wavy var(--orange); text-underline-offset: 8px; }
+  .caption { font-size: 30px; color: var(--muted); margin-top: 36px; }
+  .caption b { color: var(--ink); }
+
+  /* flow */
+  .flow { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 64px; margin-top: 90px; max-width: 1680px; }
+  .stage { position: relative; padding: 34px 32px; border-radius: 20px; border: 1px solid var(--line); background: rgb(13 21 38 / 88%); min-height: 330px; }
+  .stage .n { font: 700 22px/1 var(--mono); color: var(--green); letter-spacing: .12em; }
+  .stage h3 { font-size: 40px; margin-top: 18px; letter-spacing: -.01em; }
+  .stage p { font-size: 27px; line-height: 1.38; color: var(--muted); margin-top: 16px; }
+  .stage code { color: var(--amber); font-size: 25px; }
+  .stage + .stage::before { content: "→"; position: absolute; left: -54px; top: 130px; font-size: 44px; color: var(--green); }
+
+  /* recap */
+  .recap { margin-top: 56px; display: flex; flex-direction: column; gap: 26px; }
+  .recap div { display: flex; align-items: center; gap: 30px; font-size: 42px; font-weight: 600; }
+  .recap div span { width: 70px; height: 70px; flex: none; display: grid; place-items: center; border-radius: 18px; background: var(--green); color: var(--bg); font-weight: 800; }
+  .recap code { color: var(--amber); }
+  .url { margin-top: 64px; font: 700 40px/1 var(--mono); color: var(--green); }
+</style>
+</head>
+<body>
+  <div class="layer" id="grid"></div>
+  <div class="layer" id="glow"></div>
+  <div id="slides"></div>
+  <div id="brand"><img id="logo" alt=""><span>SharpLsp</span><span class="series" id="series"></span></div>
+  <div id="count"></div>
+  <div id="progress"><i id="fill"></i></div>
+<script src="../timeline.js"></script>
+<script src="deck.js"></script>
+</body>
+</html>
diff --git a/src/website/tools/video/kit/lesson/deck.js b/src/website/tools/video/kit/lesson/deck.js
new file mode 100644
index 00000000..b86f76d5
--- /dev/null
+++ b/src/website/tools/video/kit/lesson/deck.js
@@ -0,0 +1,116 @@
+// Implements [WEB-DESIGN-MEDIA]. A lesson's slides, drawn from t alone. LESSON
+// (injected by lesson.mjs) holds each slide's content and its timing: when it
+// starts and ends, when each of its narration lines starts, and the real
+// footage it plays. A slide's items appear as the line that names them is spoken.
+'use strict';
+
+const LESSON = window.LESSON;
+const ENTER = 0.42;
+const EXIT = 0.28;
+const REVEAL = 0.5;
+
+/** The time an item appears: its line's start (or just after the cut), cascading by its `index` among that line's items. */
+const cue = (slide, line, index) => (slide.lines[line] ?? slide.start + 0.35) + 0.12 * index;
+/** Each item's place among the items its own line reveals. */
+const ranks = (list) => list.map((item, i) => list.slice(0, i).filter((other) => other.line === item.line).length);
+/** An item's attributes: its own class `kind`, plus `item` and the time it appears. */
+const at = (slide, line, index, kind = '') => `class="item ${kind}" data-at="${cue(slide, line, index).toFixed(3)}"`;
+const sub = (s, index = 0) => (s.sub ? `<p ${at(s, s.subLine, index, 'sub')}>${s.sub}</p>` : '');
+const heading = (slide) =>
+  `<div class="kicker item" data-at="${slide.start.toFixed(3)}">${slide.kicker ?? ''}</div><h2 class="heading item wipe" data-at="${(slide.start + 0.08).toFixed(3)}">${slide.heading ?? ''}</h2>`;
+
+const layouts = {
+  title: (s) => `<div class="kicker item" data-at="${s.start}">${s.kicker}</div>
+    <h1 class="title item wipe" data-at="${s.start + 0.15}">${s.title}</h1>
+    ${sub(s, 1)}
+    <div class="chips">${s.chips.map((chip, i) => `<div ${at(s, s.chipsLine, i + 2)}>${chip}</div>`).join('')}</div>`,
+  points: (s) => `${heading(s)}${sub(s)}
+    <div class="rows">${s.rows.map((r, i) => `<div ${at(s, r.line, ranks(s.rows)[i], 'row')}><span class="k">${r.k}</span><span class="v">${r.v}</span><span class="w">${r.w ?? ''}</span></div>`).join('')}</div>`,
+  keys: (s) => `${heading(s)}<div class="keys">${s.keys.map((k, i) => `<div class="keyset${k.hot ? ' hot' : ''}" ${at(s, k.line, ranks(s.keys)[i])}>
+    <div class="os">${k.os}</div><div class="caps">${k.caps.map((c) => (c === '+' ? '<span>+</span>' : `<div class="cap">${c}</div>`)).join('')}</div></div>`).join('')}</div>
+    ${sub(s)}`,
+  footage: (s) => `${heading(s)}<div class="screen item" data-at="${s.start + 0.2}"><div class="bar"><i style="background:var(--red)"></i><i style="background:var(--orange)"></i><i style="background:var(--green)"></i><span>${s.footage.label}</span><em>Real footage · VS Code</em></div>
+    <img class="frame" alt="">${s.footage.speed > 1 ? `<div class="speed">${s.footage.speed}× speed</div>` : ''}</div>
+    <div class="notes">${s.notes.map((n, i) => `<div ${at(s, n.line, ranks(s.notes)[i], 'note')}><span class="n">${i + 1}</span><span>${n.text}</span></div>`).join('')}</div>`,
+  cards: (s) => `${heading(s)}<div class="cards">${s.cards.map((c, i) => `<div ${at(s, c.line, ranks(s.cards)[i], 'card')}><code>${c.code}</code><p>${c.text}</p></div>`).join('')}</div>`,
+  code: (s) => `${heading(s)}<div class="pair">${s.panes.map((p, i) => `<div ${at(s, p.line, ranks(s.panes)[i], 'code')}><div class="label">${p.label}</div>
+    <pre>${p.code.map((l) => `<div${l.mark ? ` class="${l.mark}"` : ''}>${l.text || ' '}</div>`).join('')}</pre></div>`).join('')}</div>
+    ${s.caption ? `<p ${at(s, s.captionLine, 0, 'caption')}>${s.caption}</p>` : ''}`,
+  flow: (s) => `${heading(s)}<div class="flow">${s.stages.map((g, i) => `<div ${at(s, g.line, ranks(s.stages)[i], 'stage')}><div class="n">${String(i + 1).padStart(2, '0')}</div><h3>${g.title}</h3><p>${g.text}</p></div>`).join('')}</div>
+    ${sub(s)}`,
+  recap: (s) => `${heading(s)}<div class="recap">${s.items.map((r, i) => `<div ${at(s, r.line, ranks(s.items)[i])}><span>${i + 1}</span>${r.text}</div>`).join('')}</div>
+    <div class="url item" data-at="${cue(s, s.urlLine, 0)}">${s.url}</div>`,
+};
+
+/** Build every slide once; renderFrame only moves and shows them. */
+function build() {
+  $('logo').src = LESSON.logo;
+  $('series').textContent = LESSON.series;
+  for (const slide of LESSON.slides) {
+    const node = document.createElement('section');
+    node.className = `slide ${slide.layout}-slide`;
+    node.innerHTML = layouts[slide.layout](slide);
+    $('slides').append(node);
+    slide.node = node;
+    slide.items = [...node.querySelectorAll('.item')].map((el) => ({ el, at: Number(el.dataset.at) }));
+    slide.frame = node.querySelector('.frame');
+  }
+  for (const slide of LESSON.slides.slice(1)) $('progress').insertAdjacentHTML('beforeend', `<b style="left:${(slide.start / LESSON.duration) * 100}%"></b>`);
+}
+
+/** The slide's own entrance and exit: in from the right, out to the left. */
+function place(slide, t) {
+  const shown = t >= slide.start && t < slide.end;
+  slide.node.style.visibility = shown ? 'visible' : 'hidden';
+  if (!shown) return false;
+  const enter = ease.out(clamp((t - slide.start) / ENTER));
+  const exit = slide === LESSON.slides.at(-1) ? 0 : ease.out(clamp((t - (slide.end - EXIT)) / EXIT));
+  slide.node.style.opacity = String(Math.min(enter, 1 - exit));
+  slide.node.style.transform = `translateX(${(1 - enter) * 90 - exit * 70}px)`;
+  return true;
+}
+
+/** Each item springs up as its line starts; a heading wipes in left to right. */
+function reveal(slide, t) {
+  for (const { el, at: start } of slide.items) {
+    const p = clamp((t - start) / REVEAL);
+    el.style.opacity = String(clamp((t - start) / (REVEAL / 2)));
+    el.style.transform = `translateY(${(1 - ease.back(p, 1.4)) * 34}px)`;
+    if (el.classList.contains('wipe')) el.style.clipPath = `inset(-20% ${(1 - ease.out(p)) * 100}% -20% 0)`;
+  }
+}
+
+const pending = [];
+
+/** The footage frame for t: real time from the slide's cut plus its delay, held on its last frame. */
+function footage(slide, t) {
+  if (!slide.frame) return;
+  const { base, frames, delay } = slide.footage;
+  const index = clamp(Math.floor((t - slide.start - delay) * FPS) + 1, 1, frames);
+  const src = `${base}/${String(index).padStart(5, '0')}.jpg`;
+  if (slide.frame.dataset.src === src) return;
+  slide.frame.dataset.src = src;
+  slide.frame.src = src;
+  pending.push(slide.frame.decode().catch(() => undefined));
+}
+
+/** The glow breathes on the score's beat while the drums play. */
+function pulse(t) {
+  const playing = t >= LESSON.drums && t < LESSON.resolve;
+  const kick = playing ? Math.exp(-((t - LESSON.drums) % LESSON.beat) / 0.16) : 0;
+  $('glow').style.opacity = String(0.62 + 0.38 * kick);
+  $('glow').style.transform = `scale(${1 + 0.035 * kick})`;
+}
+
+window.FILM_DURATION = LESSON.duration;
+build();
+
+window.renderFrame = (t) => {
+  pending.length = 0;
+  const index = LESSON.slides.findIndex((slide) => place(slide, t));
+  for (const slide of LESSON.slides) if (slide.node.style.visibility === 'visible') reveal(slide, t), footage(slide, t);
+  pulse(t);
+  $('fill').style.width = `${(t / LESSON.duration) * 100}%`;
+  $('count').textContent = `${String(index + 1).padStart(2, '0')} / ${String(LESSON.slides.length).padStart(2, '0')}`;
+  return Promise.all(pending).then(() => new Promise((resolve) => requestAnimationFrame(() => resolve())));
+};
diff --git a/src/website/tools/video/kit/lesson/lesson.mjs b/src/website/tools/video/kit/lesson/lesson.mjs
new file mode 100644
index 00000000..ec7ecc3b
--- /dev/null
+++ b/src/website/tools/video/kit/lesson/lesson.mjs
@@ -0,0 +1,71 @@
+// Implements [WEB-DESIGN-MEDIA]. A lesson is a narrated slide film that teaches one
+// feature end to end. Its slides are data (deck.js draws them); its footage is cut
+// from the feature's published walkthrough, so every editor frame it shows is the
+// real extension, never a mock-up. Each slide holds until its lines are spoken,
+// and its items appear as the line that names them starts.
+import path from 'node:path';
+import { fileURLToPath, pathToFileURL } from 'node:url';
+import { poster, videos } from '../encode.mjs';
+import { FPS, explode, previewFrames, renderMaster } from '../frames.mjs';
+import { narrated } from '../publish.mjs';
+import { drive } from '../sound/drive.mjs';
+import { timeline } from '../sound/soundtrack.mjs';
+import { pacingOf } from '../sound/voice.mjs';
+
+const here = path.dirname(fileURLToPath(import.meta.url));
+const DECK = path.join(here, 'deck.html');
+const LOGO = pathToFileURL(path.resolve(here, '../../../../src/assets/images/sharplsp-logo.svg')).href;
+/** A slide with no footage is on screen at least this long; footage starts this long after its cut, and holds this long after it ends. */
+const SLIDE = { least: 1.2, delay: 0.5, after: 0.6 };
+/** Spoken words a second, for a draft timed without speaking. */
+const DRAFT_RATE = 3;
+
+/** `{ video, from, to, crop: [x, y, w, h], speed, label }`, cut from `<video>.mp4` into numbered frames. */
+function cutFootage(out, slide) {
+  const { video, from, to, crop: [x, y, w, h] } = slide.footage;
+  const dir = path.join(out, 'footage', slide.id);
+  const filter = `trim=start=${from}:end=${to},setpts=PTS-STARTPTS,crop=${w}:${h}:${x}:${y},scale=1190:-2:flags=lanczos`;
+  const frames = explode(path.join(videos, `${video}.mp4`), dir, filter);
+  return { ...slide.footage, base: pathToFileURL(dir).href, frames, delay: SLIDE.delay };
+}
+
+/** The slides with their footage cut, and the shots the soundtrack times them as. */
+function prepare(out, slides) {
+  const cut = slides.map((slide) => (slide.footage ? { ...slide, footage: cutFootage(out, slide) } : slide));
+  const length = (slide) => (slide.footage ? SLIDE.delay + slide.footage.frames / FPS + SLIDE.after : SLIDE.least);
+  return { slides: cut, shots: cut.map((slide) => ({ clip: slide.id, length: length(slide) })) };
+}
+
+/** What deck.js reads: each slide's start, end and line starts on the film's clock. */
+function deck(series, slides, film) {
+  const starts = film.shots.reduce((times, shot) => [...times, times.at(-1) + shot.length + shot.hold], [0]);
+  return {
+    series,
+    logo: LOGO,
+    duration: film.duration,
+    beat: drive.beat,
+    drums: drive.drums,
+    resolve: film.lines.at(-1).start,
+    slides: slides.map((slide, i) => ({ ...slide, start: starts[i], end: starts[i + 1], lines: film.lines.filter((line) => line.scene === slide.id).map((line) => line.start) })),
+  };
+}
+
+/** Speak, render and publish the lesson; resolves to its length in seconds. */
+export async function publishLesson({ name, series, slides, poster: posterAt, out }, script) {
+  const prepared = prepare(out, slides);
+  const master = path.join(out, `${name}-master.mp4`);
+  const length = await narrated(name, script, prepared.shots, async (film) => {
+    await renderMaster(DECK, 'LESSON', deck(series, prepared.slides, film), master);
+    return master;
+  });
+  poster(master, posterAt, name);
+  return length;
+}
+
+/** Stills of the lesson at `times`, timed from the script's word counts instead of its speech, into `<out>/preview`. */
+export async function previewLesson({ series, slides, out }, script, times) {
+  const prepared = prepare(out, slides);
+  const takes = script.lines.map((line) => ({ ...line, length: line.en.split(' ').length / DRAFT_RATE }));
+  const film = timeline(prepared.shots, takes, pacingOf(script));
+  return previewFrames(DECK, 'LESSON', deck(series, prepared.slides, film), times, path.join(out, 'preview'));
+}
diff --git a/src/website/tools/profiler-film/kit/overlay.mjs b/src/website/tools/video/kit/overlay.mjs
similarity index 54%
rename from src/website/tools/profiler-film/kit/overlay.mjs
rename to src/website/tools/video/kit/overlay.mjs
index 22acf479..707466ab 100644
--- a/src/website/tools/profiler-film/kit/overlay.mjs
+++ b/src/website/tools/video/kit/overlay.mjs
@@ -1,22 +1,14 @@
 // Implements [WEB-DESIGN-MEDIA]. What a walkthrough adds on top of the real editor:
-// a numbered step caption, a speed badge on fast-forwarded stretches, a pointer
-// that glides to what the film acts on, and a ring where each click lands. They are drawn into the workbench page, so the screencast
-// records them with the footage; nothing in the editor itself is staged.
+// a pointer that glides to what the film acts on, and a ring where each click
+// lands. They are drawn into the workbench page, so the screencast records them
+// with the footage; nothing in the editor itself is staged. A step caption is
+// logged on the clip's track instead, and drawn over the cut after the camera
+// ([WEB-DESIGN-MEDIA-CAMERA]), so it stays whole however close the camera goes.
 // The workbench enforces Trusted Types, so the overlay is built from nodes, CSSOM
 // styles and the Web Animations API: no HTML strings, no style sheets.
+import { TIP, logCaption } from './track.mjs';
 import { PARK, sleep } from './workbench.mjs';
 
-const BAR = {
-  position: 'fixed', left: '72px', bottom: '40px', zIndex: '100000',
-  display: 'flex', alignItems: 'center', gap: '14px', padding: '12px 22px 12px 12px', borderRadius: '14px',
-  background: 'rgba(11, 18, 32, .92)', border: '1px solid #2a3c58', boxShadow: '0 12px 32px rgba(0, 0, 0, .45)',
-  font: "600 21px/1.3 system-ui, -apple-system, 'Segoe UI', sans-serif", color: '#e6edf3', pointerEvents: 'none',
-};
-const STEP = {
-  display: 'grid', placeItems: 'center', width: '34px', height: '34px', borderRadius: '10px',
-  background: '#2ecc8f', color: '#0b1220', fontWeight: '800',
-};
-const SPEED = { padding: '4px 10px', borderRadius: '999px', background: '#e2a24a', color: '#0b1220', fontSize: '16px', fontWeight: '800' };
 const RING = {
   position: 'fixed', zIndex: '100001', width: '34px', height: '34px', margin: '-17px 0 0 -17px',
   border: '3px solid #2ecc8f', borderRadius: '50%', pointerEvents: 'none',
@@ -30,7 +22,7 @@ const GLIDE_MS = 650;
 /** Glide the pointer to `{ x, y }` (page pixels); the first call drops it there. */
 export async function pointAt(page, { x, y }) {
   await page.evaluate(
-    ({ style, arrow, x, y, ms }) => {
+    ({ style, arrow, tip, x, y, ms }) => {
       let pointer = document.getElementById('film-pointer');
       if (!pointer) {
         const svg = 'http://www.w3.org/2000/svg';
@@ -43,50 +35,34 @@ export async function pointAt(page, { x, y }) {
         pointer.append(path);
         document.body.append(pointer);
       }
-      const to = `translate(${x - 3}px, ${y - 2}px)`;
+      const to = `translate(${x - tip.x}px, ${y - tip.y}px)`;
       const from = pointer.dataset.at ?? to;
       pointer.dataset.at = to;
       pointer.animate([{ transform: from }, { transform: to }], { duration: from === to ? 1 : ms, easing: 'cubic-bezier(.3, 0, .2, 1)', fill: 'forwards' });
     },
-    { style: POINTER, arrow: ARROW, x, y, ms: GLIDE_MS },
+    { style: POINTER, arrow: ARROW, tip: TIP, x, y, ms: GLIDE_MS },
   );
   await sleep(GLIDE_MS + 100);
 }
 
-/** Show step `step`'s caption, with a speed badge when the stretch is fast-forwarded. */
-export async function caption(page, step, text, speed = '') {
-  await page.evaluate(
-    ({ styles, parts }) => {
-      document.getElementById('film-caption')?.remove();
-      const node = (style, content) => {
-        const element = document.createElement('span');
-        Object.assign(element.style, style);
-        element.textContent = content;
-        return element;
-      };
-      const bar = document.createElement('div');
-      bar.id = 'film-caption';
-      Object.assign(bar.style, styles.bar);
-      bar.append(node(styles.step, parts.step), node({}, parts.text));
-      if (parts.speed) bar.append(node(styles.speed, `${parts.speed} speed`));
-      document.body.append(bar);
-    },
-    { styles: { bar: BAR, step: STEP, speed: SPEED }, parts: { step: String(step), text, speed } },
-  );
-}
+/** Caption step `step` from this moment of the clip, with a speed badge when the stretch is fast-forwarded. */
+export const caption = (page, step, text, speed = '') => logCaption(page, { step, text, speed });
+
+/** The middle of `box`, or `reach` px in from its left edge when that is nearer. */
+export const centre = (box, reach = box.width / 2) => ({ x: box.x + Math.min(reach, box.width / 2), y: box.y + box.height / 2 });
 
 /** Click `locator` with a ring where the click lands, then park the mouse. */
 export async function ringClick(page, cues, locator, label) {
   const box = await locator.boundingBox();
   if (!box) throw new Error(`nothing to click for ${label}`);
-  await pointAt(page, { x: box.x + box.width / 2, y: box.y + box.height / 2 });
+  await pointAt(page, centre(box));
   await page.evaluate(({ style, x, y }) => {
     const ring = document.createElement('div');
     Object.assign(ring.style, style, { left: `${x}px`, top: `${y}px` });
     document.body.append(ring);
     ring.animate([{ transform: 'scale(.4)', opacity: 1 }, { transform: 'scale(1.6)', opacity: 0 }], { duration: 700, easing: 'ease-out', fill: 'forwards' })
       .finished.then(() => ring.remove());
-  }, { style: RING, x: box.x + box.width / 2, y: box.y + box.height / 2 });
+  }, { style: RING, ...centre(box) });
   await sleep(250);
   await cues.click(page, locator, label);
   await page.mouse.move(PARK.x, PARK.y);
diff --git a/src/website/tools/video/kit/publish.mjs b/src/website/tools/video/kit/publish.mjs
new file mode 100644
index 00000000..fafb1169
--- /dev/null
+++ b/src/website/tools/video/kit/publish.mjs
@@ -0,0 +1,35 @@
+// Implements [WEB-DESIGN-MEDIA]. What every film does once its picture exists: the
+// site's MP4 and WebM, and, for a narrated film, the voice, score and captions
+// laid under it. Walkthroughs cut their picture from clips, lessons render theirs
+// from slides; both publish through here.
+import fs from 'node:fs';
+import os from 'node:os';
+import path from 'node:path';
+import { AAC, H264, OPUS, VP9, audible, ffmpeg, videos } from './encode.mjs';
+import { soundtrack } from './sound/soundtrack.mjs';
+import { writeCaptions } from './sound/voice.mjs';
+
+/** The site's MP4 and WebM of `master`, with `audio` as their soundtrack when there is one. */
+export function publishEncodes(name, master, audio) {
+  for (const [video, sound, extension] of [[H264, AAC, 'mp4'], [VP9, OPUS, 'webm']]) {
+    const inputs = audio ? ['-i', master, '-i', audio, '-map', '0:v', '-map', '1:a', ...audible(video), ...sound, '-shortest'] : ['-i', master, ...video];
+    ffmpeg([...inputs, path.join(videos, `${name}.${extension}`)], `${name} ${extension}`);
+  }
+}
+
+/**
+ * Speak `script` over `shots`, then publish the picture `picture(film)` makes from
+ * the timed film (each shot held until its lines end) with that soundtrack and
+ * its captions. Resolves to the film's length in seconds.
+ */
+export async function narrated(name, script, shots, picture) {
+  const dir = fs.mkdtempSync(path.join(os.tmpdir(), `${name}-sound-`));
+  try {
+    const film = await soundtrack(script, shots, dir);
+    publishEncodes(name, await picture(film), film.audio);
+    writeCaptions(script, film.lines, videos, name);
+    return film.duration;
+  } finally {
+    fs.rmSync(dir, { recursive: true, force: true });
+  }
+}
diff --git a/src/website/tools/video/kit/scenes.mjs b/src/website/tools/video/kit/scenes.mjs
new file mode 100644
index 00000000..aa91e56f
--- /dev/null
+++ b/src/website/tools/video/kit/scenes.mjs
@@ -0,0 +1,231 @@
+// Implements [WEB-DESIGN-MEDIA], [WEB-DESIGN-MEDIA-CAMERA] and
+// [WEB-DESIGN-MEDIA-CHAPTERS]. A walkthrough is a list of scenes. A scene is either a clip, `{ clip, act, speed, retries }`,
+// shot in real time and played back at `speed`, or an `{ offCamera }` step
+// between clips. shootWalkthrough shoots the list on a demo's set, each clip
+// with its track; publishWalkthrough frames every clip through the camera, lays
+// its step captions over it, cuts the clips together, lays a narrated film's
+// voice, score and captions over the cut, and writes the site's MP4, WebM and
+// poster.
+import fs from 'node:fs';
+import path from 'node:path';
+import { cueLog, record } from './camera.mjs';
+import { startOf, writeChapters } from './chapters.mjs';
+import { captionFrames } from './captions.mjs';
+import { dimensions, duration, emptyDir, ffmpeg, poster } from './encode.mjs';
+import { runCommand } from './editor.mjs';
+import { caption, ringClick } from './overlay.mjs';
+import { narrated, publishEncodes } from './publish.mjs';
+import { onSet } from './set.mjs';
+import { readTrack } from './track.mjs';
+import { clickSharpLspIcon, demoRow, openFile, rowButton, sleep, waitForDemoRow } from './workbench.mjs';
+import { writeCamera } from './zoom.mjs';
+
+/** Every film is cut 1920 pixels wide, at 30 frames a second. */
+const WIDTH = 1920;
+const FPS = 30;
+
+/**
+ * Workspace settings: snapshots every 10 seconds, the interval the guide
+ * recommends, so a reference walk never overlaps an auto-capture; and an editor
+ * that lets a fix be typed key by key, exactly as written.
+ */
+const WORKSPACE = {
+  'sharplsp.profiler.autoSnapshotInterval': 10,
+  'editor.autoClosingBrackets': 'never',
+  'editor.autoClosingQuotes': 'never',
+  'editor.autoSurround': 'never',
+  'editor.autoIndent': 'none',
+  'editor.formatOnType': false,
+  'editor.quickSuggestions': { other: 'off', comments: 'off', strings: 'off' },
+  'editor.suggestOnTriggerCharacters': false,
+  'editor.parameterHints.enabled': false,
+  'editor.inlineSuggest.enabled': false,
+  'editor.hover.enabled': false,
+};
+
+/**
+ * A scene that captions step `step` and clicks `action` on the live demo's row,
+ * then waits for the status bar to show `status`. Other processes come and go in
+ * the list, so a click that started nothing fails the take.
+ */
+export const startOnRow = (step, text, action, status) => async ({ page, set }) => {
+  await caption(page, step, text);
+  await demoRow(page).hover();
+  await sleep(2500);
+  await ringClick(page, set.cues, await rowButton(page, action), action);
+  await page.locator('.statusbar', { hasText: status }).waitFor({ timeout: 15_000 });
+  await sleep(1000);
+};
+
+/** Off camera: a fresh process, so an act starts from a small heap. */
+export async function restart({ page, app }) {
+  app.stop();
+  await app.start();
+  await waitForDemoRow(page);
+}
+
+/** Off camera: notifications silenced, the SharpLsp view open, `file` loaded, beside a fresh process. */
+export const prepare = (file) => async (shot) => {
+  await runCommand(shot.page, 'Notifications: Toggle Do Not Disturb Mode');
+  await clickSharpLspIcon(shot.page);
+  await openFile(shot.page, file);
+  await sleep(15_000);
+  await restart(shot);
+};
+
+/** Off camera: close every editor, open `file`, and restart the demo for the next act. */
+export const switchTo = (file) => async (shot) => {
+  await runCommand(shot.page, 'View: Close All Editors');
+  await openFile(shot.page, file);
+  await restart(shot);
+};
+
+/** Shoot a scene again when a refreshing dashboard closes its palette, or a type is not listed yet. */
+async function retried(attempts, shootScene) {
+  for (let attempt = 1; ; attempt++) {
+    try {
+      return await shootScene();
+    } catch (error) {
+      if (attempt >= attempts) throw error;
+      process.stdout.write(`retrying a take: ${error.message.split('\n')[0]}\n`);
+      await sleep(3500);
+    }
+  }
+}
+
+async function shootScenes(shot, scenes) {
+  for (const scene of scenes) {
+    if (scene.offCamera) await scene.offCamera(shot);
+    else await retried(scene.retries ?? 1, () => record(shot.set, scene.clip, () => scene.act(shot)));
+  }
+}
+
+/**
+ * Stage `demo`, open it in an isolated VS Code with workspace `settings` (the
+ * profiler films' by default), and shoot `scenes` into `<out>/clips`, stills
+ * into `<out>/stills`.
+ */
+export async function shootWalkthrough({ demo, out, scenes, settings = WORKSPACE }) {
+  const clips = path.join(out, 'clips');
+  fs.mkdirSync(clips, { recursive: true });
+  await onSet({ demo, out, settings }, ({ page, cdp, app, workspace }) => {
+    const set = { page, cdp, cues: cueLog(clips), frames: path.join(out, 'frames'), clips };
+    return shootScenes({ page, set, app, workspace, stills: path.join(out, 'stills') }, scenes);
+  });
+}
+
+/** Each shot scene with its clip, its track and its length on screen, in seconds, at its speed. */
+const shotsOf = (out, scenes) =>
+  scenes
+    .filter((scene) => scene.clip)
+    .map((scene) => {
+      const file = path.join(out, 'clips', `${scene.clip}.mp4`);
+      const track = readTrack(path.join(out, 'clips', `${scene.clip}.track.json`));
+      return { ...scene, file, track, length: duration(file) / (scene.speed ?? 1) };
+    });
+
+/** Shot `index`'s camera: the crop script, in `dir`, that frames its clip from its track. */
+function cameraFor(shot, index, dir) {
+  const [width, height] = dimensions(shot.file);
+  const camera = { file: path.join(dir, `${shot.clip}.cmd`), name: `camera${index}`, width, height };
+  const frames = Math.round(duration(shot.file) * FPS);
+  const shots = writeCamera(shot.track, { ...camera, frames, fps: FPS, scale: width / shot.track.size[0], speed: shot.speed ?? 1 });
+  process.stdout.write(`${shot.clip}: ${shots.length - 1} camera moves\n`);
+  return camera;
+}
+
+const captionKey = ({ step, text, speed }) => JSON.stringify([step, text, speed]);
+
+/** Each shot's captions, timed in its clip: its first from the cut; a clip that logs none keeps the caption before it. */
+const timedCaptions = (shots) =>
+  shots.reduce((list, shot) => {
+    const own = shot.track.captions.map((caption, index) => ({ ...caption, from: index === 0 ? 0 : caption.t }));
+    return [...list, own.length > 0 ? own : (list.at(-1) ?? []).slice(-1).map((caption) => ({ ...caption, from: 0 }))];
+  }, []);
+
+/** Each shot's caption overlays, `{ file, from, to }`, every distinct caption rendered once into `dir`. */
+async function captionOverlays(shots, dir) {
+  const timed = timedCaptions(shots);
+  const distinct = [...new Map(timed.flat().map((caption) => [captionKey(caption), caption])).values()];
+  const files = await captionFrames(distinct, shots[0].track.size, WIDTH, dir);
+  const fileOf = new Map(distinct.map((caption, index) => [captionKey(caption), files[index]]));
+  return timed.map((captions) =>
+    captions.map((caption, index) => ({ file: fileOf.get(captionKey(caption)), from: caption.from, to: captions[index + 1]?.from ?? Infinity })),
+  );
+}
+
+/** Each shot with its `camera` and its caption `overlays`, written into `<out>/camera`. */
+async function direct(out, shots) {
+  const dir = emptyDir(path.join(out, 'camera'));
+  const overlays = await captionOverlays(shots, dir);
+  return shots.map((shot, index) => ({ ...shot, camera: cameraFor(shot, index, dir), overlays: overlays[index] }));
+}
+
+const quoted = (value) => `'${value}'`;
+const during = ({ from, to }) => (Number.isFinite(to) ? `gte(t,${from})*lt(t,${to})` : `gte(t,${from})`);
+
+/** Shot `index`'s chain: cropped by its camera, scaled to the film's width, captioned, played at its speed and held for its `hold`. */
+function chain(shot, index, firstOverlay) {
+  const { file, name, width, height } = shot.camera;
+  const scaled = `scale=${WIDTH}:${Math.round((WIDTH * height) / width / 2) * 2}:flags=lanczos,setsar=1`;
+  const label = (step) => (step < 0 ? `framed${index}` : `captioned${index}_${step}`);
+  const framed = `[${index}:v]format=yuv444p,sendcmd=f=${quoted(file)},crop@${name}=w=${width}:h=${height}:x=0:y=0:exact=1,${scaled}[${label(-1)}]`;
+  const captioned = shot.overlays.map((overlay, step) => `[${label(step - 1)}][${firstOverlay + step}:v]overlay=enable=${quoted(during(overlay))}[${label(step)}]`);
+  const hold = (shot.hold ?? 0).toFixed(3);
+  const played = `[${label(shot.overlays.length - 1)}]setpts=PTS/${shot.speed ?? 1},fps=${FPS},format=yuv420p,tpad=stop_mode=clone:stop_duration=${hold}[v${index}]`;
+  return [framed, ...captioned, played].join(';');
+}
+
+/** Cut the shots together, each through its camera and under its captions, held on its last frame for its `hold`, into a lossless master. */
+function cut(shots, master) {
+  const inputs = [...shots.map((shot) => shot.file), ...shots.flatMap((shot) => shot.overlays.map((overlay) => overlay.file))];
+  const firsts = shots.map((_, index) => shots.length + shots.slice(0, index).reduce((total, shot) => total + shot.overlays.length, 0));
+  const chains = shots.map((shot, index) => chain(shot, index, firsts[index]));
+  const joined = `${shots.map((_, i) => `[v${i}]`).join('')}concat=n=${shots.length}:v=1:a=0[cut]`;
+  const lossless = ['-c:v', 'libx264', '-preset', 'slow', '-crf', '12', '-pix_fmt', 'yuv420p'];
+  ffmpeg([...inputs.flatMap((file) => ['-i', file]), '-filter_complex', `${chains.join(';')};${joined}`, '-map', '[cut]', ...lossless, master], path.basename(master));
+}
+
+/** The cut of `shots` as a lossless master, `<out>/<name>-master.mp4`. */
+function master(name, out, shots) {
+  const file = path.join(out, `${name}-master.mp4`);
+  cut(shots, file);
+  return file;
+}
+
+/** The narrated film: speech, score and captions laid over the cut, which holds each shot until its line is spoken. */
+async function spoken(name, out, shots, script) {
+  const held = [];
+  const length = await narrated(name, script, shots, (film) => {
+    held.push(...film.shots);
+    return master(name, out, film.shots);
+  });
+  return { shots: held, duration: length };
+}
+
+/** A film without narration: the cut alone, its shots unheld. */
+function silent(name, out, shots) {
+  publishEncodes(name, master(name, out, shots));
+  return { shots, duration: shots.reduce((total, shot) => total + shot.length, 0) };
+}
+
+/** The second of the cut at which `scene`'s clip reaches `at` seconds of its own footage. */
+function cutTime(shots, { scene, at }) {
+  const index = shots.findIndex((shot) => shot.clip === scene);
+  if (index < 0) throw new Error(`the poster's scene "${scene}" is not a clip of this film`);
+  return startOf(shots, index) + at / (shots[index].speed ?? 1);
+}
+
+/**
+ * Publish the MP4, the WebM and the poster, a frame of the cut as it plays;
+ * with a `narration` script, also its voice, score and captions; and the
+ * chapters its scenes mark ([WEB-DESIGN-MEDIA-CHAPTERS]). Resolves to the
+ * film's length in seconds.
+ */
+export async function publishWalkthrough({ name, out, scenes, posterAt, narration }) {
+  const shots = await direct(out, shotsOf(out, scenes));
+  const film = narration ? await spoken(name, out, shots, narration) : silent(name, out, shots);
+  poster(path.join(out, `${name}-master.mp4`), cutTime(film.shots, posterAt), name);
+  writeChapters(name, film.shots);
+  return film.duration;
+}
diff --git a/src/website/tools/profiler-film/kit/screencast.mjs b/src/website/tools/video/kit/screencast.mjs
similarity index 78%
rename from src/website/tools/profiler-film/kit/screencast.mjs
rename to src/website/tools/video/kit/screencast.mjs
index cf183a7f..ffd8bdf4 100644
--- a/src/website/tools/profiler-film/kit/screencast.mjs
+++ b/src/website/tools/video/kit/screencast.mjs
@@ -1,13 +1,17 @@
 // Records a page through CDP's screencast and encodes it as a constant-rate clip.
 // The screencast only emits a frame when the compositor paints, so each frame is
 // held until the next one's timestamp: the encoded clip runs in real time.
-import { spawnSync } from 'node:child_process';
 import fs from 'node:fs';
 import path from 'node:path';
+import { emptyDir, ffmpeg } from './encode.mjs';
 
 const FPS = 30;
 
-/** Start recording `cdp`'s page into `dir`; resolves to a `stop(outFile)` that encodes the clip. */
+/**
+ * Start recording `cdp`'s page into `dir`; resolves to a `stop(outFile)` that
+ * encodes the clip and resolves to `{ file, start }`, `start` being the first
+ * frame's time in seconds since the epoch, the clock the track keeps.
+ */
 export async function startScreencast(cdp, dir) {
   const { frames, onFrame } = frameWriter(cdp, dir);
   cdp.on('Page.screencastFrame', onFrame);
@@ -22,14 +26,13 @@ export async function startScreencast(cdp, dir) {
     await cdp.send('Page.stopScreencast');
     cdp.off('Page.screencastFrame', onFrame);
     encode(frames, Date.now() / 1000, outFile);
-    return outFile;
+    return { file: outFile, start: frames[0].at };
   };
 }
 
 /** Writes each screencast frame to `dir` with its timestamp, and acknowledges it. */
 function frameWriter(cdp, dir) {
-  fs.rmSync(dir, { recursive: true, force: true });
-  fs.mkdirSync(dir, { recursive: true });
+  emptyDir(dir);
   const frames = [];
   const onFrame = ({ data, metadata, sessionId }) => {
     const file = path.join(dir, `${String(frames.length).padStart(6, '0')}.jpg`);
@@ -55,10 +58,6 @@ function encode(frames, endAt, outFile) {
   if (frames.length === 0) throw new Error(`no screencast frames for ${outFile}`);
   const list = path.join(path.dirname(frames[0].file), 'frames.ffconcat');
   fs.writeFileSync(list, concatList(frames, endAt));
-  const args = ['-y', '-loglevel', 'error', '-f', 'concat', '-safe', '0', '-i', list];
   const video = ['-vf', `fps=${FPS},format=yuv420p`, '-c:v', 'libx264', '-preset', 'slow', '-crf', '12'];
-  const result = spawnSync('ffmpeg', [...args, ...video, '-movflags', '+faststart', outFile], {
-    encoding: 'utf8',
-  });
-  if (result.status !== 0) throw new Error(`ffmpeg failed for ${outFile}: ${result.stderr}`);
+  ffmpeg(['-f', 'concat', '-safe', '0', '-i', list, ...video, '-movflags', '+faststart', outFile], outFile);
 }
diff --git a/src/website/tools/profiler-film/kit/set.mjs b/src/website/tools/video/kit/set.mjs
similarity index 91%
rename from src/website/tools/profiler-film/kit/set.mjs
rename to src/website/tools/video/kit/set.mjs
index 2bde9524..7b235bd8 100644
--- a/src/website/tools/profiler-film/kit/set.mjs
+++ b/src/website/tools/video/kit/set.mjs
@@ -5,7 +5,7 @@ import { spawn, spawnSync } from 'node:child_process';
 import fs from 'node:fs';
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
-import { SCRATCH, launchVsCode, repoRoot } from './editor.mjs';
+import { SCRATCH, launchVsCode, repoRoot, writeSettings } from './editor.mjs';
 
 const demos = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '../demos');
 
@@ -19,10 +19,11 @@ export const FS_STOREFRONT = { folder: 'fs-storefront', project: 'FsStorefront'
 
 /**
  * Both demos in one workspace under Shop.slnx, the language films' set: C# and
- * F# side by side in one solution. Each demo's own solution is left out, so the
- * workspace holds exactly one, and nothing runs.
+ * F# side by side in one solution. Each demo's own solution, and the Blazor demo
+ * (a set of its own), are left out, so the workspace holds exactly one solution,
+ * and nothing runs.
  */
-export const SHOP = { folder: '.', project: 'Shop', omit: ['Storefront.slnx', 'FsStorefront.slnx'], runs: false };
+export const SHOP = { folder: '.', project: 'Shop', omit: ['Storefront.slnx', 'FsStorefront.slnx', 'blazor-storefront'], runs: false };
 
 /**
  * The Blazor Web App the Razor film is shot on: a basket page whose markup and
@@ -116,11 +117,6 @@ export function demoApp(workspace) {
   };
 }
 
-function writeSettings(workspace, settings) {
-  fs.mkdirSync(path.join(workspace, '.vscode'), { recursive: true });
-  fs.writeFileSync(path.join(workspace, '.vscode/settings.json'), JSON.stringify(settings));
-}
-
 /**
  * Stage `demo` with optional workspace `settings`, open it in an isolated VS Code
  * beside the running app, and run `shoot({ page, cdp, app, workspace })`. A failed
@@ -129,7 +125,7 @@ function writeSettings(workspace, settings) {
  */
 export async function onSet({ demo, out, settings }, shoot) {
   const { root, workspace } = (demo.stage ?? stageDemo)(demo);
-  if (settings) writeSettings(workspace, settings);
+  if (settings) writeSettings(path.join(workspace, '.vscode'), settings);
   const editor = await launchVsCode({ workspace, disabled: demo.disabled });
   const app = demo.runs === false ? { start: async () => undefined, stop: () => undefined } : demoApp(workspace);
   await app.start();
diff --git a/src/website/tools/video/kit/sound/drive.mjs b/src/website/tools/video/kit/sound/drive.mjs
new file mode 100644
index 00000000..a731535c
--- /dev/null
+++ b/src/website/tools/video/kit/sound/drive.mjs
@@ -0,0 +1,118 @@
+// Implements [WEB-DESIGN-MEDIA]. The lessons' score, synthesised from code like the
+// walkthroughs' calm one, but quick: 124 BPM, a pluck arpeggio and a pumping pad
+// over a one-bar A minor loop (Am, F, C, G); a four-on-the-floor kick, claps, hats
+// and an offbeat bass come in after the intro, and everything stops on the
+// closing line for a C major strum that rings out. Voices are one-cycle
+// wavetables, rendered event by event, so a three-minute score takes seconds.
+import { fade, gain, harmonics, noise, pitch, rate, sides } from './score.mjs';
+
+const beat = 60 / 124;
+const bar = 4 * beat;
+const sixteenth = beat / 4;
+/** One bar each; the first note is the bass. */
+const progression = [[45, 57, 60, 64, 67], [41, 57, 60, 65, 69], [48, 55, 60, 64, 67], [43, 55, 59, 62, 67]];
+const resolution = [48, 55, 60, 64, 67, 72];
+const intro = 2;
+const SIZE = 4096;
+const tau = 2 * Math.PI;
+const arp = { pattern: [0, 1, 2, 3, 2, 1, 3, 2, 0, 2, 1, 3, 2, 3, 1, 2], octave: 12, level: 0.16, accent: 1.5, pan: 0.4, decay: 0.2, ring: 1.6 };
+const kit = { kick: 0.95, clap: 0.18, hat: 0.075, ghost: 0.028, crash: 0.045, bass: 0.26, pad: 0.06 };
+const pump = { depth: 0.6, release: 0.13 };
+const master = { fadeIn: 0.25, fadeOut: 2.4, drive: 1.25 };
+
+const wavetable = (weights) =>
+  Float32Array.from({ length: SIZE }, (_, i) => weights.reduce((sum, weight, k) => sum + weight * Math.sin((tau * (k + 1) * i) / SIZE), 0));
+const SAW = wavetable(harmonics(8, 1));
+const SOFT = wavetable(harmonics(4, 1.8));
+const osc = (wave, cycles) => wave[Math.floor((cycles - Math.floor(cycles)) * SIZE)];
+const attack = (age, seconds) => Math.min(1, age / seconds);
+const crackle = (index, seed) => noise(index, seed) - noise(index - 1, seed);
+
+const kick = (age) => Math.sin(tau * (45 * age + 3.3 * (1 - Math.exp(-age / 0.03)))) * Math.exp(-age / 0.16);
+const clap = (age, index) => crackle(index, 3) * Math.exp(-age / 0.08) * (age < 0.025 ? 1.4 : 1);
+const hat = (age, index) => crackle(index, 7) * Math.exp(-age / 0.028);
+const crash = (age, index) => crackle(index, 11) * Math.exp(-age / 0.9);
+const bassNote = (frequency) => (age) => osc(SAW, frequency * age) * attack(age, 0.004) * Math.exp(-age / 0.3);
+const pluck = (frequency, decay) => (age) => osc(SOFT, frequency * age) * attack(age, 0.003) * Math.exp(-age / decay);
+const padNote = (frequency, length) => (age) => osc(SOFT, frequency * age) * fade(age, length, { fadeIn: 0.3, fadeOut: 0.4 });
+
+const event = (time, length, level, voice, pan = 0) => ({ time, length, level, voice, pan });
+
+/** The chord loop up to the closing line, one bar a chord. */
+function bars(resolve) {
+  return Array.from({ length: Math.max(1, Math.ceil(resolve / bar)) }, (_, index) => ({ index, start: index * bar, chord: progression[index % progression.length] }));
+}
+
+/** Kick on every beat, clap on two and four, hats on the offbeats with ghost sixteenths: every bar after the intro. */
+function drums(grid, resolve) {
+  const beats = grid.filter((item) => item.index >= intro).flatMap((item) => [0, 1, 2, 3].map((n) => item.start + n * beat)).filter((time) => time < resolve);
+  return [
+    ...beats.map((time) => event(time, 0.4, kit.kick, kick)),
+    ...beats.filter((_, n) => n % 2 === 1).map((time) => event(time, 0.3, kit.clap, clap)),
+    ...beats.map((time) => event(time + beat / 2, 0.15, kit.hat, hat, 0.25)),
+    ...beats.flatMap((time) => [1, 3].map((n) => event(time + n * sixteenth, 0.1, kit.ghost, hat, -0.25))),
+    ...(beats.length ? [event(beats[0], 3, kit.crash, crash, 0.1)] : []),
+  ];
+}
+
+/** The bass on every offbeat eighth, from the drums' entry. */
+const bass = (grid) =>
+  grid.filter((item) => item.index >= intro).flatMap((item) => [0, 1, 2, 3].map((n) => event(item.start + n * beat + beat / 2, beat / 2, kit.bass, bassNote(pitch(item.chord[0])))));
+
+/** Sixteenth-note plucks over each bar's upper notes, an octave up, accented on the beat. */
+const arpeggio = (grid, resolve) =>
+  grid.flatMap((item) =>
+    arp.pattern.map((step, n) => ({ time: item.start + n * sixteenth, note: item.chord[1 + (step % (item.chord.length - 1))], n }))
+      .filter(({ time }) => time < resolve)
+      .map(({ time, note, n }) => event(time, 1, arp.level * (n % 4 === 0 ? arp.accent : 1), pluck(pitch(note + arp.octave), arp.decay), (n % 2 ? 1 : -1) * arp.pan)));
+
+/** A detuned pad per bar, spread wide; the resolution's pad holds to the end. */
+function pads(grid, { resolve, duration }) {
+  const chord = (notes, start, length) =>
+    notes.slice(1).flatMap((note) => [-1, 1].map((side) => event(start, length, kit.pad, padNote(pitch(note) * 2 ** ((side * 6) / 1200), length), side * 0.6)));
+  return [...grid.flatMap((item) => chord(item.chord, item.start, Math.min(bar + 0.3, resolve - item.start + 0.3))), ...chord(resolution, resolve, duration - resolve)];
+}
+
+/** The closing strum: the resolution chord, an octave up, ringing out. */
+const strum = ({ resolve }) =>
+  resolution.map((note, n) => event(resolve + n * 0.05, 4, arp.level * 1.2, pluck(pitch(note + arp.octave), arp.ring), (n % 2 ? 1 : -1) * arp.pan));
+
+/** Add each event's voice into a stereo buffer of `frames`. */
+function render(events, frames) {
+  const out = sides.map(() => new Float32Array(frames));
+  for (const item of events) {
+    const start = Math.round(item.time * rate);
+    const end = Math.min(frames, start + Math.round(item.length * rate));
+    for (let index = Math.max(0, start); index < end; index++) {
+      const value = item.voice((index - start) / rate, index) * item.level;
+      sides.forEach((side, channel) => (out[channel][index] += value * gain(item.pan, side)));
+    }
+  }
+  return out;
+}
+
+/** The side-chain: the music bus dips under every kick and swells back. */
+function pumping(kicks, frames) {
+  const times = kicks.map((item) => item.time);
+  let next = 0;
+  return Float32Array.from({ length: frames }, (_, index) => {
+    const t = index / rate;
+    while (next < times.length && times[next] <= t) next++;
+    return next === 0 ? 1 : 1 - pump.depth * Math.exp(-(t - times[next - 1]) / pump.release);
+  });
+}
+
+/** The stereo score for a film of `duration` seconds whose closing line starts at `resolve`. */
+function compose(timeline) {
+  const frames = Math.round(timeline.duration * rate);
+  const grid = bars(timeline.resolve);
+  const beatEvents = drums(grid, timeline.resolve);
+  const duck = pumping(beatEvents.filter((item) => item.voice === kick), frames);
+  const music = render([...bass(grid), ...arpeggio(grid, timeline.resolve), ...pads(grid, timeline), ...strum(timeline)], frames);
+  const hits = render(beatEvents, frames);
+  return sides.map((_, channel) =>
+    Float32Array.from({ length: frames }, (_, index) => Math.tanh(master.drive * (music[channel][index] * duck[index] + hits[channel][index])) * fade(index / rate, timeline.duration, master)));
+}
+
+/** The lessons' score: up front, so it sits higher in the mix and drier than the calm one. Its beat and the drums' entry let a picture move with it. */
+export const drive = { compose, level: 0.3, wet: 0.12, beat, drums: intro * bar };
diff --git a/src/website/tools/profiler-film/kit/sound/score.mjs b/src/website/tools/video/kit/sound/score.mjs
similarity index 89%
rename from src/website/tools/profiler-film/kit/sound/score.mjs
rename to src/website/tools/video/kit/sound/score.mjs
index 98ff1137..9580ef11 100644
--- a/src/website/tools/profiler-film/kit/sound/score.mjs
+++ b/src/website/tools/video/kit/sound/score.mjs
@@ -20,20 +20,22 @@ const bell = { partials: [[1, 1, 1.1], [2, 0.3, 0.5], [3, 0.1, 0.25]], attack: 0
 const master = { fadeIn: 1.2, fadeOut: 2.4, drive: 1.4, peak: 0.89 };
 const space = { length: 2.6, decay: 0.6, preDelay: 0.018, stretch: 12.9898, seed: 78.233, scale: 43_758.5453 };
 const pcm = { format: 1, width: Int16Array.BYTES_PER_ELEMENT, full: 32_767, chunk: 16, bitsPerByte: 8 };
-const sides = [-1, 1];
+export const sides = [-1, 1];
 const ratios = pad.detune.map((cents) => 2 ** (cents / tuning.cents));
 
-function harmonics(count, rolloff) {
+export function harmonics(count, rolloff) {
   return Array.from({ length: count }, (_, index) => 1 / (index + 1) ** rolloff);
 }
 
-const pitch = (note) => tuning.pitch * 2 ** ((note - tuning.note) / tuning.octave);
-const smooth = (x) => x * x * (3 - 2 * x);
-const clamp = (x) => Math.min(1, Math.max(0, x));
-const gain = (pan, side) => (1 + pan * side) / 2;
+export const pitch = (note) => tuning.pitch * 2 ** ((note - tuning.note) / tuning.octave);
+export const smooth = (x) => x * x * (3 - 2 * x);
+export const clamp = (x) => Math.min(1, Math.max(0, x));
+/** A score's level at `t`: up over `fadeIn`, down over the last `fadeOut` of `duration`. */
+export const fade = (t, duration, { fadeIn, fadeOut }) => smooth(clamp(t / fadeIn)) * smooth(clamp((duration - t) / fadeOut));
+export const gain = (pan, side) => (1 + pan * side) / 2;
 const alternate = (step) => (step % 2 === 0 ? 1 : -1);
 
-const timbre = (frequency, t, weights) =>
+export const timbre = (frequency, t, weights) =>
   weights.reduce((sum, weight, index) => sum + weight * Math.sin(tau * frequency * (index + 1) * t), 0);
 
 const swell = (t, section) => smooth(clamp((t - section.start) / pad.attack)) * smooth(clamp(1 - (t - section.end) / pad.release));
@@ -81,23 +83,25 @@ function sample(score, t, side) {
     const level = swell(t, item);
     return level > 0 ? sum + level * chord(item, t, side) : sum;
   }, 0);
-  const fade = smooth(clamp(t / master.fadeIn)) * smooth(clamp((score.duration - t) / master.fadeOut));
-  return Math.tanh(master.drive * (harmony + ringing(score.bells, t, side))) * fade;
+  return Math.tanh(master.drive * (harmony + ringing(score.bells, t, side))) * fade(t, score.duration, master);
 }
 
 /** The stereo score for a film of `duration` seconds whose closing line starts at `resolve`. */
-export function compose(timeline) {
+function compose(timeline) {
   const chords = sections(timeline);
   const score = { duration: timeline.duration, chords, bells: [...arpeggio(chords, timeline), ...shimmer(chords, timeline)] };
   const frames = Math.round(timeline.duration * rate);
   return sides.map((side) => Float32Array.from({ length: frames }, (_, index) => sample(score, index / rate, side)));
 }
 
-function noise(index, seed) {
+export function noise(index, seed) {
   const value = Math.sin(index * space.stretch + seed * space.seed) * space.scale;
   return 2 * (value - Math.floor(value)) - 1;
 }
 
+/** The walkthroughs' score: gentle, and mixed low under the voice. */
+export const calm = { compose, level: 0.2, wet: 0.35 };
+
 /** A decaying stereo noise impulse response: a small, warm room for the score. */
 export function room() {
   const frames = Math.round(space.length * rate);
diff --git a/src/website/tools/profiler-film/kit/sound/soundtrack.mjs b/src/website/tools/video/kit/sound/soundtrack.mjs
similarity index 67%
rename from src/website/tools/profiler-film/kit/sound/soundtrack.mjs
rename to src/website/tools/video/kit/sound/soundtrack.mjs
index df86a1b2..a5ac83ef 100644
--- a/src/website/tools/profiler-film/kit/sound/soundtrack.mjs
+++ b/src/website/tools/video/kit/sound/soundtrack.mjs
@@ -1,15 +1,18 @@
 // Implements [WEB-DESIGN-MEDIA]. A narrated film's soundtrack: each spoken line
 // starts just after its scene's cut, a scene holds its last frame until its line
-// has finished, and the original score ducks under the voice.
+// has finished, and the original score ducks under the voice. A script picks its
+// score by name (`score`): the calm walkthrough score unless it asks for `drive`.
 import { execFileSync } from 'node:child_process';
 import path from 'node:path';
-import { compose, rate, room, wav } from './score.mjs';
-import { pacing, speak } from './voice.mjs';
+import { drive } from './drive.mjs';
+import { calm, rate, room, wav } from './score.mjs';
+import { pacingOf, speak } from './voice.mjs';
+
+const scores = { calm, drive };
 
 const sound = {
   voice: 'highpass=f=70,acompressor=threshold=0.1:ratio=3:attack=5:release=120:makeup=2',
-  music: 'highpass=f=40,equalizer=f=280:t=q:w=1.2:g=-3,volume=0.2',
-  wet: 0.35,
+  music: 'highpass=f=40,equalizer=f=280:t=q:w=1.2:g=-3',
   duck: 'threshold=0.03:ratio=5:attack=40:release=500',
   gain: 1.15,
   limit: 0.84,
@@ -18,7 +21,7 @@ const sound = {
 };
 
 /** Place `spoken` after the scene's cut and after the line before it; returns the placed lines. */
-function placeLines(spoken, cut, lead, before) {
+function placeLines(spoken, cut, lead, before, pacing) {
   return spoken.reduce((lines, line) => {
     const start = Math.max(cut + lead, ((lines.at(-1) ?? before)?.end ?? 0) + pacing.gap);
     return [...lines, { ...line, start, end: start + line.length }];
@@ -26,11 +29,11 @@ function placeLines(spoken, cut, lead, before) {
 }
 
 /** Each shot gets the `hold` its lines need; returns the shots, the placed lines and the film's length. */
-export function timeline(shots, takes) {
+export function timeline(shots, takes, pacing) {
   return shots.reduce(
     (film, shot, index) => {
       const lead = index === 0 ? pacing.opening : pacing.lead;
-      const placed = placeLines(takes.filter((line) => line.scene === shot.clip), film.duration, lead, film.lines.at(-1));
+      const placed = placeLines(takes.filter((line) => line.scene === shot.clip), film.duration, lead, film.lines.at(-1), pacing);
       const tail = index === shots.length - 1 ? pacing.closing : pacing.tail;
       const hold = Math.max(0, (placed.at(-1)?.end ?? 0) + tail - (film.duration + shot.length));
       return { shots: [...film.shots, { ...shot, hold }], lines: [...film.lines, ...placed], duration: film.duration + shot.length + hold };
@@ -40,22 +43,23 @@ export function timeline(shots, takes) {
 }
 
 /** Inputs: 0 is the score, 1 its room, then one per spoken line. The score ducks under the voice. */
-function mix(lines, duration) {
+function mix(lines, duration, score) {
   const voices = lines.map((line, i) => `[${i + 2}:a]aresample=${rate},adelay=${Math.round(line.start * 1000)}:all=1[v${i}]`).join(';');
   const labels = lines.map((_, i) => `[v${i}]`).join('');
   const voice = `${labels}amix=inputs=${lines.length}:normalize=0,${sound.voice},aformat=channel_layouts=stereo,asplit[voice][trigger];[trigger]apad[key]`;
-  const bed = `[0:a]asplit[dry][send];[send][1:a]afir[wet];[dry][wet]amix=inputs=2:weights=1 ${sound.wet}:normalize=0,${sound.music}[bed]`;
+  const bed = `[0:a]asplit[dry][send];[send][1:a]afir[wet];[dry][wet]amix=inputs=2:weights=1 ${score.wet}:normalize=0,${sound.music},volume=${score.level}[bed]`;
   const master = `[voice][ducked]amix=inputs=2:normalize=0,volume=${sound.gain},alimiter=limit=${sound.limit}:level=0,${sound.loudness},aresample=${rate},atrim=end=${duration}[mix]`;
   return `${voices};${voice};${bed};[bed][key]sidechaincompress=${sound.duck}[ducked];${master}`;
 }
 
 /** Speak `script`, score the film around it and mix both into `<dir>/soundtrack.wav`. */
 export async function soundtrack(script, shots, dir) {
-  const film = timeline(shots, await speak(script, dir));
-  const [score, space, output] = ['score', 'room', 'soundtrack'].map((name) => path.join(dir, `${name}.wav`));
-  await wav(score, compose({ resolve: film.lines.at(-1).start, duration: film.duration }));
+  const film = timeline(shots, await speak(script, dir), pacingOf(script));
+  const score = scores[script.score ?? 'calm'];
+  const [stem, space, output] = ['score', 'room', 'soundtrack'].map((name) => path.join(dir, `${name}.wav`));
+  await wav(stem, score.compose({ resolve: film.lines.at(-1).start, duration: film.duration }));
   await wav(space, room());
-  const inputs = [score, space, ...film.lines.map((line) => line.path)].flatMap((file) => ['-i', file]);
-  execFileSync('ffmpeg', ['-y', '-v', 'error', ...inputs, '-filter_complex', mix(film.lines, film.duration), '-map', '[mix]', output], { stdio: 'inherit' });
+  const inputs = [stem, space, ...film.lines.map((line) => line.path)].flatMap((file) => ['-i', file]);
+  execFileSync('ffmpeg', ['-y', '-v', 'error', ...inputs, '-filter_complex', mix(film.lines, film.duration, score), '-map', '[mix]', output], { stdio: 'inherit' });
   return { ...film, audio: output };
 }
diff --git a/src/website/tools/profiler-film/kit/sound/voice.mjs b/src/website/tools/video/kit/sound/voice.mjs
similarity index 75%
rename from src/website/tools/profiler-film/kit/sound/voice.mjs
rename to src/website/tools/video/kit/sound/voice.mjs
index 07c1e370..059c6e7b 100644
--- a/src/website/tools/profiler-film/kit/sound/voice.mjs
+++ b/src/website/tools/video/kit/sound/voice.mjs
@@ -3,11 +3,14 @@
 // Nothing leaves this machine: kokoro-js runs Kokoro-82M (Apache-2.0) on the CPU.
 import fs from 'node:fs';
 import path from 'node:path';
+import { webVtt } from '../vtt.mjs';
 import { wav } from './score.mjs';
 
 const model = { id: 'onnx-community/Kokoro-82M-v1.0-ONNX', dtype: 'fp32', device: 'cpu', silence: 0.01 };
-export const pacing = { opening: 1.2, lead: 0.35, gap: 0.4, tail: 0.5, hold: 0.3, closing: 2.5 };
-const clock = { minute: 60, digits: 3, minuteWidth: 2, secondWidth: 6 };
+const pacing = { opening: 1.2, lead: 0.35, gap: 0.4, tail: 0.5, hold: 0.3, closing: 2.5 };
+
+/** A script's pacing: the defaults, with whatever its `pacing` tightens or loosens. */
+export const pacingOf = (script) => ({ ...pacing, ...script.pacing });
 
 function trim(samples) {
   const audible = (value) => Math.abs(value) > model.silence;
@@ -19,7 +22,7 @@ const spoken = (script, text) => Object.entries(script.say).reduce((words, [word
 
 /** Speak one line into `file`. */
 async function take(tts, script, line, file) {
-  const speech = await tts.generate(spoken(script, line.en), { voice: script.voice });
+  const speech = await tts.generate(spoken(script, line.en), { voice: script.voice, speed: script.speed ?? 1 });
   const samples = trim(speech.audio);
   await wav(file, [samples], speech.sampling_rate);
   return { ...line, path: file, length: samples.length / speech.sampling_rate };
@@ -35,16 +38,12 @@ export async function speak(script, dir) {
   return takes;
 }
 
-function stamp(seconds) {
-  const minutes = String(Math.floor(seconds / clock.minute)).padStart(clock.minuteWidth, '0');
-  return `${minutes}:${(seconds % clock.minute).toFixed(clock.digits).padStart(clock.secondWidth, '0')}`;
-}
-
 /** One WebVTT cue per spoken line in `lang`; the first also names the music that opens the film. */
 export function captions(script, lines, lang) {
-  const cue = (line, index) =>
-    [`${stamp(index === 0 ? 0 : line.start)} --> ${stamp(line.end + pacing.hold)}`, ...(index === 0 ? [script.music[lang]] : []), line[lang]].join('\n');
-  return `${['WEBVTT', ...lines.map(cue)].join('\n\n')}\n`;
+  // A cue lingers `hold` past its line, but never into the next line's cue.
+  const until = (line, index) => Math.min(line.end + pacingOf(script).hold, lines[index + 1]?.start ?? Infinity);
+  const cueOf = (line, index) => ({ from: index === 0 ? 0 : line.start, to: until(line, index), text: [...(index === 0 ? [script.music[lang]] : []), line[lang]] });
+  return webVtt(lines.map(cueOf));
 }
 
 /** `<name>.<lang>.vtt` beside the video, for each language the script is written in. */
diff --git a/src/website/tools/video/kit/timeline.js b/src/website/tools/video/kit/timeline.js
new file mode 100644
index 00000000..60cc6bf2
--- /dev/null
+++ b/src/website/tools/video/kit/timeline.js
@@ -0,0 +1,18 @@
+// Implements [WEB-DESIGN-MEDIA]. What every page kit/frames.mjs steps shares: the
+// frame rate, and the easing that sets each element from t alone. A page loads
+// it before its own script (the profiler's film.html, the lesson's deck.html).
+'use strict';
+
+const FPS = 30;
+const $ = (id) => document.getElementById(id);
+const clamp = (v, lo = 0, hi = 1) => Math.min(hi, Math.max(lo, v));
+const ease = {
+  linear: (p) => p,
+  inOut: (p) => (p < 0.5 ? 4 * p * p * p : 1 - (-2 * p + 2) ** 3 / 2),
+  out: (p) => 1 - (1 - p) ** 3,
+  expo: (p) => (p === 1 ? 1 : 1 - 2 ** (-10 * p)),
+  /** Overshoots by `s` before it settles. */
+  back: (p, s = 1.2) => 1 + (s + 1) * (p - 1) ** 3 + s * (p - 1) ** 2,
+};
+/** From `a` at t0 to `b` at t1, held at either end. */
+const tween = (t, t0, t1, a, b, e = ease.inOut) => a + (b - a) * e(clamp((t - t0) / (t1 - t0)));
diff --git a/src/website/tools/video/kit/track.mjs b/src/website/tools/video/kit/track.mjs
new file mode 100644
index 00000000..d5d322a2
--- /dev/null
+++ b/src/website/tools/video/kit/track.mjs
@@ -0,0 +1,93 @@
+// Implements [WEB-DESIGN-MEDIA-CAMERA]. What the camera follows. While a clip
+// records, the workbench samples twenty times a second where the film's pointer
+// and the editor's text cursor are, and every widget the editor has open beside
+// them, and logs each step caption with its time. kit/zoom.mjs frames the cut
+// from this track; nothing here changes what the editor shows.
+import fs from 'node:fs';
+
+/** Where the pointer's tip sits in its 28px arrow: the point it points at. */
+export const TIP = { x: 3, y: 2 };
+
+/**
+ * What the editor opens that the camera keeps in frame, each with how long it
+ * must stay open, in seconds, before it is framed. The palette passes through
+ * most acts (Go to Line, Quick Open, a command), so it is framed only when a
+ * film dwells on it.
+ */
+export const WIDGETS = [
+  ['.monaco-hover:not(.hidden)', 0.2],
+  ['.editor-widget.suggest-widget.visible', 0.2],
+  ['.suggest-details-container', 0.2],
+  ['.parameter-hints-widget.visible', 0.2],
+  ['.rename-box', 0.2],
+  ['.action-widget', 0.2],
+  ['.monaco-menu', 0.2],
+  ['.peekview-widget', 0.2],
+  ['.monaco-editor-overlaymessage', 0.2],
+  ['.monaco-dialog-box', 0.2],
+  ['.settings-editor', 0.2],
+  ['.part.panel', 0.4],
+  ['.quick-input-widget', 1],
+];
+
+const EVERY_MS = 50;
+
+/**
+ * In the workbench: sample into `window.filmTrack` every `every` ms. A sample is
+ * `{ t, p, c, w }`: the time (ms since the epoch), the pointer's tip `[x, y]`, the
+ * focused editor's cursor `[x, y, width, height]`, and each open widget as
+ * `[index into WIDGETS, x, y, width, height]`, all in page pixels.
+ */
+function sampleInPage({ selectors, every, tip }) {
+  const rect = (element) => {
+    const box = element.getBoundingClientRect();
+    return [box.x, box.y, box.width, box.height].map(Math.round);
+  };
+  const shown = (element) => element.checkVisibility({ checkOpacity: true, checkVisibilityCSS: true }) && rect(element)[2] > 0;
+  const pointer = (arrow) => (arrow && shown(arrow) ? [rect(arrow)[0] + tip.x, rect(arrow)[1] + tip.y] : null);
+  const cursor = () => [...document.querySelectorAll('.monaco-editor.focused .cursors-layer .cursor')].map(rect).find((box) => box[3] > 0) ?? null;
+  const open = () => selectors.flatMap((selector, index) => [...document.querySelectorAll(selector)].filter(shown).map((element) => [index, ...rect(element)]));
+  const sample = () => ({ t: Date.now(), p: pointer(document.getElementById('film-pointer')), c: cursor(), w: open() });
+  const track = { size: [innerWidth, innerHeight], samples: [], captions: [] };
+  track.timer = setInterval(() => track.samples.push(sample()), every);
+  window.filmTrack = track;
+}
+
+/** In the workbench: stop sampling and hand the track back. */
+function finishInPage() {
+  const { timer, ...track } = window.filmTrack;
+  clearInterval(timer);
+  delete window.filmTrack;
+  return track;
+}
+
+/** Start sampling `page` for the clip about to record. */
+export const startTrack = (page) =>
+  page.evaluate(sampleInPage, { selectors: WIDGETS.map(([selector]) => selector), every: EVERY_MS, tip: TIP });
+
+/** Stop sampling `page`; resolves to its track. */
+export const stopTrack = (page) => page.evaluate(finishInPage);
+
+/** Log `caption` (`{ step, text, speed }`) at this moment of the clip recording on `page`. */
+export const logCaption = (page, caption) =>
+  page.evaluate((entry) => {
+    if (!window.filmTrack) throw new Error(`caption "${entry.text}" is outside a clip`);
+    window.filmTrack.captions.push({ t: Date.now(), ...entry });
+  }, caption);
+
+/**
+ * Write `track` to `file` with its times in seconds from `start`, the clip's
+ * first frame (seconds since the epoch). Samples taken before that frame keep
+ * their negative times: they say where everything was when the clip began.
+ */
+export function saveTrack(track, start, file) {
+  const at = (ms) => Number((ms / 1000 - start).toFixed(3));
+  const rebase = (entries) => entries.map((entry) => ({ ...entry, t: at(entry.t) }));
+  fs.writeFileSync(file, JSON.stringify({ size: track.size, samples: rebase(track.samples), captions: rebase(track.captions) }));
+}
+
+/** A clip's saved track. A clip shot before tracks existed has none, and must be shot again. */
+export function readTrack(file) {
+  if (!fs.existsSync(file)) throw new Error(`${file} is missing: shoot the film again, so the camera has a track to follow`);
+  return JSON.parse(fs.readFileSync(file, 'utf8'));
+}
diff --git a/src/website/tools/video/kit/vtt.mjs b/src/website/tools/video/kit/vtt.mjs
new file mode 100644
index 00000000..a4d5f763
--- /dev/null
+++ b/src/website/tools/video/kit/vtt.mjs
@@ -0,0 +1,15 @@
+// Implements [WEB-DESIGN-MEDIA]. WebVTT, the text tracks a film publishes beside
+// its video: captions ([WEB-DESIGN-MEDIA]) and chapters ([WEB-DESIGN-MEDIA-CHAPTERS]).
+const clock = { minute: 60, digits: 3, minuteWidth: 2, secondWidth: 6 };
+
+/** `seconds` as a WebVTT timestamp, `mm:ss.ttt`. */
+export function stamp(seconds) {
+  const minutes = String(Math.floor(seconds / clock.minute)).padStart(clock.minuteWidth, '0');
+  return `${minutes}:${(seconds % clock.minute).toFixed(clock.digits).padStart(clock.secondWidth, '0')}`;
+}
+
+/** The cue lines from `from` to `to` seconds: an optional identifier, the timing, then the text. */
+export const cue = ({ id, from, to, text }) => [...(id ? [id] : []), `${stamp(from)} --> ${stamp(to)}`, ...[text].flat()].join('\n');
+
+/** A WebVTT file of `cues`. */
+export const webVtt = (cues) => `${['WEBVTT', ...cues.map(cue)].join('\n\n')}\n`;
diff --git a/src/website/tools/profiler-film/kit/workbench.mjs b/src/website/tools/video/kit/workbench.mjs
similarity index 92%
rename from src/website/tools/profiler-film/kit/workbench.mjs
rename to src/website/tools/video/kit/workbench.mjs
index dc60b4bf..2b72569b 100644
--- a/src/website/tools/profiler-film/kit/workbench.mjs
+++ b/src/website/tools/video/kit/workbench.mjs
@@ -50,7 +50,15 @@ export async function clickSharpLspIcon(page) {
   await sleep(900);
 }
 
+/**
+ * Open `name` through Quick Open (Cmd+P), unless it is already the active editor:
+ * quick-opening the editor in front of you leaves it holding the Cmd of Cmd+P
+ * (its key-up went to Quick Open), so its next click runs as a Cmd+click and
+ * never moves the cursor.
+ */
 export async function openFile(page, name) {
+  const active = await page.locator('.tabs-container .tab.active .label-name').allInnerTexts();
+  if (active.some((label) => label.trim() === name)) return;
   await page.keyboard.press('Meta+P');
   await page.locator('.quick-input-widget input').fill(name);
   await sleep(700);
diff --git a/src/website/tools/video/kit/zoom.mjs b/src/website/tools/video/kit/zoom.mjs
new file mode 100644
index 00000000..f7e4b771
--- /dev/null
+++ b/src/website/tools/video/kit/zoom.mjs
@@ -0,0 +1,254 @@
+// Implements [WEB-DESIGN-MEDIA-CAMERA]. The one camera every walkthrough is cut
+// through, framed from each clip's track (kit/track.mjs) alone, so no film keys
+// a shot by hand. A clip opens wide. The camera pushes in on the pointer or the
+// text cursor, whichever moved last, with every widget the editor has open, and
+// frames the next moments' action too, so typing does not drag it along. It
+// holds while the action stays in frame, moves when it leaves, and pulls back
+// out once the clip goes quiet with nothing open. Each move eases over
+// CAMERA.move seconds, starting a beat before the action it frames. The path is
+// sent to ffmpeg's crop filter as one crop per frame of the full-resolution
+// footage, so even the deepest zoom stays sharp.
+import fs from 'node:fs';
+import { WIDGETS } from './track.mjs';
+
+/** Framing in workbench pixels and shares of the view; timing in seconds of footage played at 1×. */
+export const CAMERA = {
+  /** The deepest zoom. */
+  deepest: 2,
+  /** The share of the view kept clear on each side of what it frames. */
+  margin: 0.08,
+  /** How close the action may come to the view's edge before the camera follows it. */
+  safe: 0.04,
+  /** The area framed around the pointer's tip: width and height. */
+  pointer: [400, 220],
+  /** Faster than this, in pixels a second, the pointer or cursor is on its way somewhere: framed where it comes to rest. */
+  transit: 400,
+  /** The area framed around the text cursor: to its left, to its right, and above and below it. */
+  caret: [220, 420, 130],
+  /** The share of the frame's foot the step caption covers, kept clear of what the camera frames. */
+  caption: 0.13,
+  /** A view this many times wider than the action needs pushes in closer. */
+  tighten: 1.3,
+  /** A framing also covers what happens this long after it. */
+  lookAhead: 1.5,
+  /** A move starts this long before the action it frames. */
+  lead: 0.35,
+  /** How long a move takes. */
+  move: 0.8,
+  /** Quiet this long, with nothing open, and the camera pulls back out ... */
+  quiet: 2,
+  /** ... when the quiet lasts at least this much longer. */
+  stayWide: 2.5,
+};
+
+const TIMING = ['lookAhead', 'lead', 'move', 'quiet', 'stayWide'];
+
+/** The camera's timing for footage played back at `speed`, so every move looks the same length on screen. */
+export const paced = (speed = 1) => Object.fromEntries(TIMING.map((key) => [key, CAMERA[key] * speed]));
+
+const clamp = (value, low, high) => Math.min(high, Math.max(low, value));
+const lerp = (from, to, p) => from + (to - from) * p;
+
+/** Smootherstep: a move starts and ends at rest, with no jolt in its speed. */
+const ease = (p) => p * p * p * (p * (6 * p - 15) + 10);
+
+/** The smallest box `{ x, y, w, h }` around every box in `boxes`; null for none. */
+export function union(boxes) {
+  if (boxes.length === 0) return null;
+  const left = Math.min(...boxes.map((box) => box.x));
+  const top = Math.min(...boxes.map((box) => box.y));
+  const right = Math.max(...boxes.map((box) => box.x + box.w));
+  const bottom = Math.max(...boxes.map((box) => box.y + box.h));
+  return { x: left, y: top, w: right - left, h: bottom - top };
+}
+
+/** `box` cut to the workbench, `size`: the camera can show nothing beyond it. */
+function clipped(box, [width, height]) {
+  if (!box) return null;
+  const [x, y] = [Math.max(0, box.x), Math.max(0, box.y)];
+  return { x, y, w: Math.min(width, box.x + box.w) - x, h: Math.min(height, box.y + box.h) - y };
+}
+
+const same = (a, b) => a !== null && b !== null && Math.abs(a[0] - b[0]) <= 1 && Math.abs(a[1] - b[1]) <= 1;
+
+/**
+ * For each sample, the pointer (`p`) or the text cursor (`c`), whichever moved
+ * last, while it is on screen: `{ kind, at }`, or null before either moves.
+ */
+function anchors(samples) {
+  return samples.reduce(
+    ({ last, list }, sample, i) => {
+      const before = samples[i - 1] ?? sample;
+      const kind = ['p', 'c'].filter((name) => sample[name] && !same(sample[name], before[name])).at(-1) ?? last;
+      return { last: kind, list: [...list, kind && sample[kind] ? { kind, at: sample[kind] } : null] };
+    },
+    { last: null, list: [] },
+  ).list;
+}
+
+/** What the camera frames around an anchor: the pointer's surroundings, or the text cursor with room to type. */
+function around({ kind, at }) {
+  if (kind === 'p') {
+    const [width, height] = CAMERA.pointer;
+    return { x: at[0] - width / 2, y: at[1] - height / 2, w: width, h: height };
+  }
+  const [left, right, half] = CAMERA.caret;
+  return { x: at[0] - left, y: at[1] + at[3] / 2 - half, w: left + right, h: 2 * half };
+}
+
+/** For each sample, the widgets open long enough to frame (WIDGETS says how long), as boxes. */
+function settled(samples) {
+  return samples.reduce(
+    ({ opened, list }, sample) => {
+      const since = Object.fromEntries(sample.w.map(([index]) => [index, opened[index] ?? sample.t]));
+      const boxes = sample.w.filter(([index]) => sample.t - since[index] >= WIDGETS[index][1]).map(([, x, y, w, h]) => ({ x, y, w, h }));
+      return { opened: since, list: [...list, boxes] };
+    },
+    { opened: {}, list: [] },
+  ).list;
+}
+
+const moved = (now, before) => now !== null && (before === null || now.kind !== before.kind || !same(now.at, before.at));
+
+/** The anchor at sample `i` is gliding or jumping somewhere, not resting where the action is. */
+function inTransit(anchored, samples, i) {
+  const now = anchored[i];
+  const before = now && samples[i - 1]?.[now.kind];
+  if (!before) return false;
+  const distance = Math.hypot(now.at[0] - before[0], now.at[1] - before[1]);
+  return distance / (samples[i].t - samples[i - 1].t) > CAMERA.transit;
+}
+const changed = (now, before) => JSON.stringify(now) !== JSON.stringify(before);
+
+/** For each sample, the time of the last action at or before it, and of the next one after it. */
+function stretches(samples, active) {
+  const last = active.reduce((times, on, i) => [...times, on ? samples[i].t : (times.at(-1) ?? -Infinity)], []);
+  const next = active.reduceRight((times, on, i) => [on ? samples[i].t : (times[0] ?? Infinity), ...times], []);
+  return samples.map((_, i) => ({ last: last[i], next: next[i + 1] ?? Infinity }));
+}
+
+/**
+ * The track as the camera reads it: for each sample, its time `t`, the `box` to
+ * keep in frame (the anchor's surroundings and every settled widget), the
+ * `rest` of it to frame ahead (the same, less an anchor in transit), whether a
+ * widget is `open`, how long `since` the last action, and how long the `quiet`
+ * stretch it sits in lasts.
+ */
+export function focusOf({ size, samples }) {
+  const anchored = anchors(samples);
+  const widgets = settled(samples);
+  const active = samples.map((_, i) => i > 0 && (moved(anchored[i], anchored[i - 1]) || changed(widgets[i], widgets[i - 1])));
+  const quiet = stretches(samples, active);
+  const boxed = (anchor, i) => clipped(union([...(anchor ? [around(anchor)] : []), ...widgets[i]]), size);
+  return samples.map((sample, i) => ({
+    t: sample.t,
+    box: boxed(anchored[i], i),
+    rest: boxed(inTransit(anchored, samples, i) ? null : anchored[i], i),
+    open: widgets[i].length > 0,
+    since: sample.t - quiet[i].last,
+    quiet: quiet[i].next - quiet[i].last,
+  }));
+}
+
+/** The whole workbench. A view is `{ x, y, w }` in workbench pixels; its height keeps the frame's shape. */
+export const wide = ([width]) => ({ x: 0, y: 0, w: width });
+
+/** The view that frames `box` as closely as CAMERA.deepest allows, centred above the caption band. */
+export function frame(box, [width, height]) {
+  const usable = 1 - 2 * CAMERA.margin;
+  const zoom = clamp(Math.min((width * usable) / box.w, (height * (usable - CAMERA.caption)) / box.h), 1, CAMERA.deepest);
+  const [w, h] = [width / zoom, height / zoom];
+  const middle = box.y + box.h / 2 + (h * CAMERA.caption) / 2;
+  return { x: clamp(box.x + box.w / 2 - w / 2, 0, width - w), y: clamp(middle - h / 2, 0, height - h), w };
+}
+
+/**
+ * `box` sits inside `view`, clear of its edges and of the caption band, except
+ * where the view already meets the workbench's edge and could go no further.
+ */
+function within(box, view, [width, height]) {
+  const h = (view.w * height) / width;
+  const [dx, dy] = [view.w * CAMERA.safe, h * CAMERA.safe];
+  const left = view.x <= 0 ? 0 : view.x + dx;
+  const top = view.y <= 0 ? 0 : view.y + dy;
+  const right = view.x + view.w >= width ? width : view.x + view.w - dx;
+  const bottom = view.y + h >= height ? height : view.y + h * (1 - CAMERA.caption) - dy;
+  return box.x >= left && box.y >= top && box.x + box.w <= right && box.y + box.h <= bottom;
+}
+
+const alike = (a, b) => Math.abs(a.x - b.x) < 2 && Math.abs(a.y - b.y) < 2 && Math.abs(a.w - b.w) < 2;
+
+/** Where the action comes to rest from sample `i` until `lookAhead` seconds later; while it is all in transit, where it has got to. */
+function ahead(focus, i, lookAhead) {
+  const window = focus.slice(i).filter((sample) => sample.t <= focus[i].t + lookAhead);
+  return union(window.map((sample) => sample.rest).filter(Boolean)) ?? window.findLast((sample) => sample.box).box;
+}
+
+/** The shot sample `i` calls for, if any: out once quiet, across when the action leaves the view, in when it can be framed closer. */
+function shotAt(focus, i, current, size, timing) {
+  const { t, box, open, since, quiet } = focus[i];
+  if (!box) return null;
+  const out = !open && since >= timing.quiet && quiet >= timing.quiet + timing.stayWide;
+  const view = out ? wide(size) : frame(ahead(focus, i, timing.lookAhead), size);
+  const needed = out || !within(box, current.view, size) || view.w * CAMERA.tighten < current.view.w;
+  return needed && !alike(view, current.view) ? { t, view, out } : null;
+}
+
+/** The clip's shots, from its wide opening on: `{ t, view, out }`. */
+export function shotsOf(focus, size, timing) {
+  return focus.reduce(
+    (shots, sample, i) => {
+      const shot = sample.t >= 0 ? shotAt(focus, i, shots.at(-1), size, timing) : null;
+      return shot ? [...shots, shot] : shots;
+    },
+    [{ t: 0, view: wide(size), out: true }],
+  );
+}
+
+/** The camera at `t`: the last move begun by then, eased along from where it began. */
+export function viewAt(moves, t, first) {
+  const move = moves.findLast((each) => each.t0 <= t);
+  if (!move) return first;
+  const p = ease(clamp((t - move.t0) / (move.t1 - move.t0), 0, 1));
+  return { x: lerp(move.from.x, move.to.x, p), y: lerp(move.from.y, move.to.y, p), w: lerp(move.from.w, move.to.w, p) };
+}
+
+/** Each shot's move, `{ t0, t1, from, to }`: a beat early unless it pulls out, never before the move before it began. */
+export function movesOf(shots, timing) {
+  return shots.slice(1).reduce((moves, shot) => {
+    const start = Math.max(shot.out ? shot.t : shot.t - timing.lead, moves.at(-1)?.t0 ?? 0);
+    return [...moves, { t0: start, t1: start + timing.move, from: viewAt(moves, start, shots[0].view), to: shot.view }];
+  }, []);
+}
+
+/** `view` as a crop of the footage, `[w, h, x, y]` in its pixels: `scale` of them per workbench pixel. */
+function cropOf(view, [width, height], scale) {
+  const [w, h] = [Math.round(view.w * scale), Math.round(((view.w * height) / width) * scale)];
+  const [right, bottom] = [Math.round(width * scale) - w, Math.round(height * scale) - h];
+  return [w, h, clamp(Math.round(view.x * scale), 0, right), clamp(Math.round(view.y * scale), 0, bottom)];
+}
+
+/** The sendcmd script that moves `crop@<name>` along `moves`: an entry for each frame whose crop changes. */
+export function cropScript(moves, first, { name, frames, fps, scale, size }) {
+  const crops = Array.from({ length: frames }, (_, frame) => cropOf(viewAt(moves, frame / fps, first), size, scale));
+  return crops
+    .map((crop, frame) => [crop, frame])
+    .filter(([crop, frame]) => frame === 0 || crop.join() !== crops[frame - 1].join())
+    .map(([[w, h, x, y], frame]) => {
+      const at = Math.max(0, (frame - 0.5) / fps).toFixed(4);
+      return `${at} crop@${name} w ${w}, crop@${name} h ${h}, crop@${name} x ${x}, crop@${name} y ${y};`;
+    })
+    .join('\n');
+}
+
+/**
+ * Frame a clip from its `track` and write the camera to `file`, the sendcmd
+ * script for `crop@<name>`; `frames` at `fps`, `scale` footage pixels per
+ * workbench pixel, played back at `speed`. Resolves to the clip's shots.
+ */
+export function writeCamera(track, { file, name, frames, fps, scale, speed }) {
+  const timing = paced(speed);
+  const shots = shotsOf(focusOf(track), track.size, timing);
+  fs.writeFileSync(file, `${cropScript(movesOf(shots, timing), shots[0].view, { name, frames, fps, scale, size: track.size })}\n`);
+  return shots;
+}
diff --git a/src/website/tools/profiler-film/package-lock.json b/src/website/tools/video/package-lock.json
similarity index 99%
rename from src/website/tools/profiler-film/package-lock.json
rename to src/website/tools/video/package-lock.json
index 4aa01570..d0f1f6a2 100644
--- a/src/website/tools/profiler-film/package-lock.json
+++ b/src/website/tools/video/package-lock.json
@@ -1,10 +1,10 @@
 {
-  "name": "sharplsp-profiler-film",
+  "name": "sharplsp-video",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "sharplsp-profiler-film",
+      "name": "sharplsp-video",
       "devDependencies": {
         "kokoro-js": "1.2.1"
       }
diff --git a/src/website/tools/profiler-film/package.json b/src/website/tools/video/package.json
similarity index 87%
rename from src/website/tools/profiler-film/package.json
rename to src/website/tools/video/package.json
index 5a9c8d01..9935a0f9 100644
--- a/src/website/tools/profiler-film/package.json
+++ b/src/website/tools/video/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "sharplsp-profiler-film",
+  "name": "sharplsp-video",
   "private": true,
   "type": "module",
   "description": "Local tools that shoot and narrate the website's profiler films. Narration runs on this machine; nothing is sent to a speech service.",
diff --git a/src/website/tools/video/templates/lesson/film.mjs b/src/website/tools/video/templates/lesson/film.mjs
new file mode 100644
index 00000000..32cbcc23
--- /dev/null
+++ b/src/website/tools/video/templates/lesson/film.mjs
@@ -0,0 +1,90 @@
+// Implements [WEB-DESIGN-MEDIA]. TEMPLATE for a lesson: copy this folder to
+// films/<name>/, rename `name`, and replace every slide. The finished reference
+// is films/refactoring-lesson/. Every layout kit/lesson/deck.js knows is used
+// once below; delete the ones a lesson does not need.
+//
+//   node src/website/tools/video/film.mjs <name> --preview 2,20,60   (stills, no speech)
+//   node src/website/tools/video/film.mjs <name>                     (speak, render, publish)
+//
+// A slide's `id` is the `scene` of its lines in narration.json. An item with
+// `line: n` appears as the slide's n-th line (from 0) starts; items sharing a
+// line cascade. Footage is cut from a published walkthrough, never mocked:
+// `crop` is [x, y, w, h] in its 1920x1200 frame, kept clear of the walkthrough's
+// step caption, and `speed` above 1 shows the speed badge the walkthrough had.
+const CROP = [430, 108, 1100, 640];
+const clip = (from, to, label, speed = 1) => ({ video: '<walkthrough>', from, to, crop: CROP, label, speed });
+
+export default {
+  name: '<name>',
+  narration: 'narration.json',
+  /** The poster's second in the finished lesson: pick a footage slide. */
+  poster: 30,
+  lesson: {
+    series: 'Lesson · <Feature>',
+    slides: [
+      {
+        id: 'intro', layout: 'title', kicker: 'Lesson · <Docs page title>',
+        title: '<Promise in<br>a few <em>words</em>.>',
+        sub: '<What the viewer will be able to do, in <b>F#</b> and <b>C#</b>.>',
+        chips: ['macOS · Linux · Windows', 'F# + C#', 'VS Code', 'Free · MIT'],
+      },
+      {
+        id: 'keys', layout: 'keys', kicker: 'Step 1 · <The shortcut>', heading: '<Heading with an <em>accent</em>>',
+        keys: [
+          { os: 'macOS', caps: ['⌘', '+', '.'], hot: true, line: 0 },
+          { os: 'Windows · Linux', caps: ['Ctrl', '+', '.'], line: 1 },
+        ],
+        sub: '<One sentence under the keys.>', subLine: 2,
+      },
+      {
+        id: 'points', layout: 'points', kicker: 'Step 2 · <Idea>', heading: '<Heading>',
+        rows: [
+          { k: '<Term>', v: '<What it means>', w: '<Tag>', line: 1 },
+          { k: '<Term>', v: '<What it means>', w: '<Tag>', line: 2 },
+        ],
+      },
+      {
+        id: 'footage', layout: 'footage', kicker: 'Step 3 · <F# first>', heading: '<What the clip shows>',
+        footage: clip(0, 12, '<File> · <what happens>'),
+        notes: [
+          { text: '<First thing to notice, with <code>code</code>>', line: 0 },
+          { text: '<The key press>', line: 1 },
+          { text: '<The result>', line: 2 },
+        ],
+      },
+      {
+        id: 'code', layout: 'code', kicker: 'Step 3 · <What it wrote>', heading: 'Before and <em>after</em>',
+        panes: [
+          { label: 'Before', line: 0, code: [{ text: '<code line>' }, { text: '<flagged line>', mark: 'warn' }] },
+          { label: 'After', line: 0, code: [{ text: '<code line>' }, { text: '<added line>', mark: 'add' }] },
+        ],
+        caption: '<Why the result is right.>', captionLine: 1,
+      },
+      {
+        id: 'cards', layout: 'cards', kicker: 'Step 4 · <Reference>', heading: '<Heading>',
+        cards: [
+          { code: '<FS0001>', text: '<What it does>', line: 0 },
+          { code: '<FS0002>', text: '<What it does>', line: 0 },
+          { code: '<FS0003>', text: '<What it does>', line: 0 },
+        ],
+      },
+      {
+        id: 'flow', layout: 'flow', kicker: 'Under the hood', heading: '<Heading>',
+        stages: [
+          { title: '<Stage>', text: '<What happens, with <code>method</code>>', line: 0 },
+          { title: '<Stage>', text: '<What happens>', line: 1 },
+          { title: '<Stage>', text: '<What happens>', line: 2 },
+        ],
+        sub: '<The failure case, stated plainly.>', subLine: 3,
+      },
+      {
+        id: 'recap', layout: 'recap', kicker: 'Recap', heading: 'You just learned',
+        items: [
+          { text: '<Takeaway>', line: 0 },
+          { text: '<Takeaway>', line: 1 },
+        ],
+        url: 'sharplsp.dev/docs/<page>', urlLine: 2,
+      },
+    ],
+  },
+};
diff --git a/src/website/tools/video/templates/lesson/narration.json b/src/website/tools/video/templates/lesson/narration.json
new file mode 100644
index 00000000..b0843834
--- /dev/null
+++ b/src/website/tools/video/templates/lesson/narration.json
@@ -0,0 +1,30 @@
+{
+  "voice": "af_bella",
+  "speed": 1.12,
+  "score": "drive",
+  "pacing": { "opening": 0.9, "lead": 0.25, "gap": 0.22, "tail": 0.35, "hold": 0.25, "closing": 2.4 },
+  "say": { "SharpLsp": "Sharp L S P", "F#": "F sharp", "C#": "C sharp" },
+  "music": { "en": "[Upbeat electronic music]", "ja": "[アップテンポな電子音楽]", "zh": "[轻快的电子音乐]" },
+  "lines": [
+    { "scene": "intro", "en": "<Welcome, and what the viewer will be able to do.>", "ja": "<同じ内容の日本語>", "zh": "<同样内容的中文>" },
+    { "scene": "keys", "en": "<Line 0: reveals the macOS keys.>", "ja": "<日本語>", "zh": "<中文>" },
+    { "scene": "keys", "en": "<Line 1: reveals the Windows and Linux keys.>", "ja": "<日本語>", "zh": "<中文>" },
+    { "scene": "keys", "en": "<Line 2: reveals the sentence under the keys.>", "ja": "<日本語>", "zh": "<中文>" },
+    { "scene": "points", "en": "<Line 0: the idea.>", "ja": "<日本語>", "zh": "<中文>" },
+    { "scene": "points", "en": "<Line 1: the first row.>", "ja": "<日本語>", "zh": "<中文>" },
+    { "scene": "points", "en": "<Line 2: the second row.>", "ja": "<日本語>", "zh": "<中文>" },
+    { "scene": "footage", "en": "<Line 0: what to notice in the clip.>", "ja": "<日本語>", "zh": "<中文>" },
+    { "scene": "footage", "en": "<Line 1: the key press.>", "ja": "<日本語>", "zh": "<中文>" },
+    { "scene": "footage", "en": "<Line 2: the result.>", "ja": "<日本語>", "zh": "<中文>" },
+    { "scene": "code", "en": "<Line 0: both panes.>", "ja": "<日本語>", "zh": "<中文>" },
+    { "scene": "code", "en": "<Line 1: the caption.>", "ja": "<日本語>", "zh": "<中文>" },
+    { "scene": "cards", "en": "<Line 0: the reference cards.>", "ja": "<日本語>", "zh": "<中文>" },
+    { "scene": "flow", "en": "<Line 0: stage one.>", "ja": "<日本語>", "zh": "<中文>" },
+    { "scene": "flow", "en": "<Line 1: stage two.>", "ja": "<日本語>", "zh": "<中文>" },
+    { "scene": "flow", "en": "<Line 2: stage three.>", "ja": "<日本語>", "zh": "<中文>" },
+    { "scene": "flow", "en": "<Line 3: the failure case.>", "ja": "<日本語>", "zh": "<中文>" },
+    { "scene": "recap", "en": "<Line 0: takeaway.>", "ja": "<日本語>", "zh": "<中文>" },
+    { "scene": "recap", "en": "<Line 1: takeaway.>", "ja": "<日本語>", "zh": "<中文>" },
+    { "scene": "recap", "en": "<Line 2: where the full lesson lives, and a send-off.>", "ja": "<日本語>", "zh": "<中文>" }
+  ]
+}
diff --git a/src/website/tools/video/templates/walkthrough/film.mjs b/src/website/tools/video/templates/walkthrough/film.mjs
new file mode 100644
index 00000000..0bdcb1cb
--- /dev/null
+++ b/src/website/tools/video/templates/walkthrough/film.mjs
@@ -0,0 +1,36 @@
+// Implements [WEB-DESIGN-MEDIA] and [WEB-DESIGN-MEDIA-CAMERA]. TEMPLATE for a
+// walkthrough: copy this folder to films/<name>/, rename `name`, and replace
+// every scene. The finished reference is films/blazor/.
+//
+//   make _build-vsix VSIX_PREBUILT=1
+//   node src/website/tools/video/film.mjs <name>              (shoot, then publish)
+//   node src/website/tools/video/film.mjs <name> --publish    (publish the last shoot)
+//
+// Every clip is cut through the one camera (kit/zoom.mjs): it pushes in on the
+// pointer or the text cursor, whichever moved last, with every widget they open,
+// and pulls back when the action goes quiet. So a scene never keys a camera move:
+// it puts the pointer and the cursor on what it shows (hoverOn, clickOn, typeAt)
+// and holds while the viewer reads. A clip's `scene` names its lines in
+// narration.json; show F# before C#.
+import { hoverOn } from '../../kit/code.mjs';
+import { LANGUAGE, hoverEach, prepareCode, scene, typeThroughCompletion } from '../../kit/acts/language.mjs';
+import { SHOP } from '../../kit/set.mjs';
+import { sleep } from '../../kit/workbench.mjs';
+
+export default {
+  name: '<name>',
+  demo: SHOP,
+  settings: LANGUAGE,
+  narration: 'narration.json',
+  /** The poster: the cut's frame `at` seconds into `scene`'s clip, camera and caption included. */
+  poster: { scene: 'fsharp', at: 4 },
+  scenes: [
+    { offCamera: prepareCode('<File>.fs', { line: 1, word: '<word>' }) },
+    scene('fsharp', 1, '<F#: what the viewer sees>', ({ page }) => hoverEach(page, [{ line: 1, word: '<word>' }])),
+    scene('csharp', 2, '<C#: the same feature>', async ({ page }) => {
+      await typeThroughCompletion(page, 1, '\n<opening text>', [['<typed>', '<accepted rest>']]);
+      await hoverOn(page, { line: 2, word: '<word>' });
+      await sleep(3000);
+    }),
+  ],
+};
diff --git a/src/website/tools/video/templates/walkthrough/narration.json b/src/website/tools/video/templates/walkthrough/narration.json
new file mode 100644
index 00000000..67904317
--- /dev/null
+++ b/src/website/tools/video/templates/walkthrough/narration.json
@@ -0,0 +1,9 @@
+{
+  "voice": "af_heart",
+  "say": { "SharpLsp": "Sharp L S P", "F#": "F sharp", "C#": "C sharp" },
+  "music": { "en": "[Gentle music]", "ja": "[穏やかな音楽]", "zh": "[舒缓的音乐]" },
+  "lines": [
+    { "scene": "fsharp", "en": "<What the F# clip shows, spoken while the camera follows the pointer.>", "ja": "<同じ内容の日本語>", "zh": "<同样内容的中文>" },
+    { "scene": "csharp", "en": "<The same feature in C#.>", "ja": "<日本語>", "zh": "<中文>" }
+  ]
+}
diff --git a/src/website/video-figure.js b/src/website/video-figure.js
index acdaa601..69a9710e 100644
--- a/src/website/video-figure.js
+++ b/src/website/video-figure.js
@@ -7,8 +7,8 @@
 // page names a video with `{% video "<id>" %}` and never repeats its markup; files
 // live at /assets/videos/<id>.<encoding> beside /assets/videos/<id>-poster.webp
 // and <id>-card.jpg, and a narrated video's captions at /assets/videos/<id>.<lang>.vtt.
-// The profiler media is shot and published by tools/profiler-film (film.mjs and
-// films/profiler/render.mjs). The tour is
+// The profiler media is shot and published by tools/video
+// (`film.mjs profiler`). The tour is
 // the Marketplace GIF (assets/images/marketplace/sharplsp-tour.gif) re-encoded
 // with the same H.264/VP9 settings, because a GIF is eight times the bytes.
 // MP4 comes first in the catalogue: Windows Chrome/Edge can accept the VP9
@@ -17,7 +17,7 @@ import markdownIt from "markdown-it";
 import i18n from "./src/_data/i18n.json" with { type: "json" };
 import languages from "./src/_data/languages.json" with { type: "json" };
 import site from "./src/_data/site.json" with { type: "json" };
-import { asset, catalogued, embedPath, textOf, transcript, watchPath } from "./video-pages.js";
+import { asset, catalogued, chapters, embedPath, textOf, transcript, watchPath } from "./video-pages.js";
 
 const { escapeHtml } = markdownIt().utils;
 
@@ -42,6 +42,7 @@ export function videoPlayer(id, lang, { autoplay = false } = {}) {
     `<video ${autoplay ? "autoplay loop muted" : "controls"} playsinline preload="metadata" poster="${asset(id, "-poster.webp")}" width="${video.width}" height="${video.height}" aria-label="${escapeHtml(textOf(video, lang).label)}">`,
     ...video.encodings.map((encoding) => `<source src="${asset(id, `.${encoding}`)}" type="video/${encoding}">`),
     ...tracks(id, video, lang),
+    ...(video.chapters ? [`<track kind="chapters" src="${asset(id, ".chapters.vtt")}" srclang="en">`] : []),
     "</video>",
   ].join("\n");
 }
@@ -81,6 +82,19 @@ function watchOnly(id, lang) {
   };
 }
 
+/** `seconds` as the clock a reader sees: `1:44`. */
+const minutes = (seconds) => `${Math.floor(seconds / 60)}:${String(seconds % 60).padStart(2, "0")}`;
+
+/**
+ * A chaptered film's chapters as a list, each opening the film's watch page at
+ * its start (`?t=`), titled as the VS Code walkthrough titles its step.
+ */
+export function chapterList(id, lang) {
+  const items = chapters(id, lang).map(({ step, start, title }) =>
+    `<li data-step="${escapeHtml(step)}"><a href="${watchPath(id, lang)}?t=${start}">${minutes(start)}</a> ${escapeHtml(title)}</li>`);
+  return items.length > 0 ? `<ol>\n${items.join("\n")}\n</ol>` : "";
+}
+
 // `<` is escaped so no description can close the script element early.
 function structuredData(id, video, lang, watch) {
   const text = textOf(video, lang);
diff --git a/src/website/video-pages.js b/src/website/video-pages.js
index d77f7409..ec0f23d4 100644
--- a/src/website/video-pages.js
+++ b/src/website/video-pages.js
@@ -54,6 +54,31 @@ export function transcript(id, lang) {
   return vtt.split(/\r?\n\r?\n/).slice(1).map(cueText).filter(Boolean);
 }
 
+/** A WebVTT timestamp (`01:44.433`, or with hours) in seconds. */
+const clock = (stamp) => stamp.trim().split(":").reduce((total, part) => total * 60 + Number(part), 0);
+
+/** The tutorial walkthrough's own titles, per site language ([TUTORIAL-STEPS]). */
+const WALKTHROUGH_TITLES = { en: "package.nls.json", ja: "package.nls.ja.json", zh: "package.nls.zh-cn.json" };
+const walkthroughTitles = (lang) =>
+  JSON.parse(readFileSync(new URL(`../editors/vscode/${WALKTHROUGH_TITLES[lang] ?? WALKTHROUGH_TITLES.en}`, import.meta.url), "utf8"));
+
+/**
+ * The chapters of a chaptered film ([WEB-DESIGN-MEDIA-CHAPTERS]), read from
+ * <id>.chapters.vtt: each cue's step, start second and title. A step's title is
+ * the one the VS Code walkthrough shows in `lang`; a step both languages share
+ * (`SolutionExplorer`) takes the F# walkthrough's.
+ */
+export function chapters(id, lang) {
+  if (!catalogued(id).chapters) return [];
+  const titles = walkthroughTitles(lang);
+  const vtt = readFileSync(new URL(`./src${asset(id, ".chapters.vtt")}`, import.meta.url), "utf8");
+  return vtt.split(/\r?\n\r?\n/).slice(1).filter(Boolean).map((cue) => {
+    const [step, timing, ...words] = cue.trim().split(/\r?\n/);
+    const key = step.includes(".") ? step : `FSharp.${step}`;
+    return { step, start: Math.floor(clock(timing.split("-->")[0])), title: titles[`walkthrough.${key}.title`] ?? words.join(" ") };
+  });
+}
+
 /** Every watch page: each catalogued video in each site language. */
 export const watchPages = () =>
   Object.keys(languages).flatMap((lang) =>
diff --git a/tools/make/vsix-profiles.test.mjs b/tools/make/vsix-profiles.test.mjs
new file mode 100644
index 00000000..ed06753f
--- /dev/null
+++ b/tools/make/vsix-profiles.test.mjs
@@ -0,0 +1,109 @@
+// [DIST-VSIX-DEV-INSTALL] The install loop reaches every VS Code profile that runs SharpLsp.
+//
+// The CLI installs into the default profile unless told `--profile`, and a window
+// whose workspace is associated with another profile keeps loading that profile's
+// copy: the developer reloads and still runs the old build. These tests run the
+// real profile lister against a fixture user data directory, and the real install
+// and uninstall recipes against a fake VS Code CLI that records every call.
+import assert from "node:assert/strict";
+import test from "node:test";
+import { spawnSync } from "node:child_process";
+import { chmodSync, mkdirSync, mkdtempSync, readFileSync, writeFileSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import { fileURLToPath } from "node:url";
+
+import { dryRun, stepAt } from "./make-test-kit.mjs";
+
+const ROOT = fileURLToPath(new URL("../../", import.meta.url));
+const LISTER = join(ROOT, "tools/vsix/vscode-profiles.mjs");
+const ID = "nimblesite.sharplsp";
+const PROFILES = ".NET|Rust, Python, .NET";
+
+/** A VS Code user data directory holding `profiles`, each `[name, extensionIds | null, shared]`. */
+function userDataDir(profiles) {
+  const root = mkdtempSync(join(tmpdir(), "slsp-profiles-"));
+  const user = join(root, "User");
+  mkdirSync(join(user, "globalStorage"), { recursive: true });
+  const entries = profiles.map(([name, ids, shared], index) => {
+    const location = `p${index}`;
+    mkdirSync(join(user, "profiles", location), { recursive: true });
+    if (ids !== null) {
+      const extensions = ids.map((id) => ({ identifier: { id }, version: "0.1.0" }));
+      writeFileSync(join(user, "profiles", location, "extensions.json"), JSON.stringify(extensions));
+    }
+    return { location, name, ...(shared ? { useDefaultFlags: { extensions: true } } : {}) };
+  });
+  writeFileSync(join(user, "globalStorage", "storage.json"), JSON.stringify({ userDataProfiles: entries }));
+  return root;
+}
+
+function list(dataDir, args = [ID]) {
+  return spawnSync("node", [LISTER, ...args], {
+    encoding: "utf8",
+    env: { ...process.env, VSCODE_USER_DATA_DIR: dataDir },
+  });
+}
+
+test("the lister names exactly the profiles holding their own copy of the extension", () => {
+  const dataDir = userDataDir([
+    [".NET", ["Nimblesite.SharpLsp", "ms-dotnettools.csharp"], false],
+    ["Dart", ["dart-code.dart-code"], false],
+    ["Rust, Python, .NET", [ID], false],
+    ["Shared", [ID], true],
+    ["Fresh", null, false],
+  ]);
+  const { status, stdout } = list(dataDir);
+  assert.equal(status, 0);
+  assert.equal(stdout, PROFILES, "case-insensitive id; shared and extension-less profiles left out");
+  assert.equal(list(dataDir, ["someone.else"]).stdout, "", "a profile without it is never named");
+});
+
+test("the lister answers nothing, not an error, without VS Code data, and needs an id", () => {
+  const empty = mkdtempSync(join(tmpdir(), "slsp-profiles-none-"));
+  const none = list(empty);
+  assert.equal(none.status, 0);
+  assert.equal(none.stdout, "", "no storage.json means the default profile only");
+  const missing = list(empty, []);
+  assert.equal(missing.status, 2);
+  assert.match(missing.stderr, /usage: node tools\/vsix\/vscode-profiles\.mjs <extension id>/);
+});
+
+/** Run `target` for real with a fake VS Code CLI; the CLI's calls, one per line. */
+function runWithFakeCli(target) {
+  const dir = mkdtempSync(join(tmpdir(), "slsp-fake-code-"));
+  const calls = join(dir, "calls.log");
+  const code = join(dir, "code");
+  writeFileSync(code, `#!/bin/sh\nprintf '%s;' "$@" >> '${calls}'\necho >> '${calls}'\n`);
+  chmodSync(code, 0o755);
+  const vsix = join(dir, "sharplsp.vsix");
+  writeFileSync(vsix, "");
+  const args = [target, `CODE=${code}`, `DEV_VSIX=${vsix}`, `VSCODE_PROFILES=${PROFILES}`];
+  const { status, stderr } = spawnSync("make", args, { cwd: ROOT, encoding: "utf8" });
+  assert.equal(status, 0, `make ${target} failed:\n${stderr}`);
+  return { vsix, calls: readFileSync(calls, "utf8").trim().split("\n") };
+}
+
+test("install-vsix installs into the default profile, then each profile on the list", { skip: process.platform === "win32" }, () => {
+  const { vsix, calls } = runWithFakeCli("install-vsix");
+  assert.deepEqual(calls, [
+    `--install-extension;${vsix};--force;`,
+    `--install-extension;${vsix};--force;--profile;.NET;`,
+    `--install-extension;${vsix};--force;--profile;Rust, Python, .NET;`,
+  ]);
+});
+
+test("uninstall-vsix removes it from the default profile and each profile on the list", { skip: process.platform === "win32" }, () => {
+  const { calls } = runWithFakeCli("uninstall-vsix");
+  assert.equal(calls.length, 3, "one uninstall per profile, the default first");
+  assert.equal(calls[0], `--uninstall-extension;${ID};`);
+  assert.equal(calls[2], `--uninstall-extension;${ID};--profile;Rust, Python, .NET;`);
+});
+
+test("reinstall-vsix reads the profiles before it uninstalls, and installs into the same ones", () => {
+  const recipe = dryRun("reinstall-vsix", [`VSCODE_PROFILES=${PROFILES}`]);
+  const captured = stepAt(recipe, `profiles='${PROFILES}'`);
+  assert.ok(captured < stepAt(recipe, "--uninstall-extension"), "captured before the uninstall");
+  assert.match(recipe, /make\S* uninstall-vsix VSCODE_PROFILES="\$profiles"/);
+  assert.match(recipe, /make\S* install-vsix VSCODE_PROFILES="\$profiles"/);
+});
diff --git a/tools/vsix/tutorial-model.mjs b/tools/vsix/tutorial-model.mjs
new file mode 100644
index 00000000..e189dc76
--- /dev/null
+++ b/tools/vsix/tutorial-model.mjs
@@ -0,0 +1,50 @@
+// Generates the extension's tutorial model from its typeDiagram source, so the
+// TypeScript types and the model never drift. Implements [TUTORIAL-MODEL].
+//
+//   node tools/vsix/tutorial-model.mjs [--check]
+//
+// Requires the `typediagram` CLI on $PATH (.github/actions/typediagram).
+import { execFileSync } from "node:child_process";
+import fs from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import { createRequire } from "node:module";
+
+const root = path.resolve(path.dirname(fileURLToPath(import.meta.url)), "../..");
+const source = path.join(root, "docs/models/vscode-tutorial.td");
+const extensionDir = path.join(root, "src/editors/vscode");
+const target = path.join(extensionDir, "src/tutorial/model.generated.ts");
+const require = createRequire(path.join(extensionDir, "package.json"));
+const prettier = require("prettier");
+const { ESLint } = require("eslint");
+
+const HEADER = `// @generated by tools/vsix/tutorial-model.mjs from docs/models/vscode-tutorial.td.
+// DO NOT EDIT BY HAND: edit the model and run \`node tools/vsix/tutorial-model.mjs\`.
+// Implements [TUTORIAL-MODEL].
+`;
+
+const emitted = execFileSync("typediagram", ["--to", "typescript", source], { encoding: "utf8" });
+const options = (await prettier.resolveConfig(target)) ?? {};
+// The extension's own lint fixes (e.g. `T[]` for `Array<T>`), then its formatting.
+const [linted] = await new ESLint({ cwd: extensionDir, fix: true }).lintText(`${HEADER}\n${emitted}`, { filePath: target });
+const generated = await prettier.format(linted.output ?? linted.source ?? "", { ...options, filepath: target });
+/** The generated file as it stands, or "" before the first run: one read, no check-then-use race. */
+function readCurrent() {
+  try {
+    return fs.readFileSync(target, "utf8");
+  } catch (error) {
+    if (error?.code === "ENOENT") return "";
+    throw error;
+  }
+}
+const current = readCurrent();
+
+if (process.argv.includes("--check")) {
+  if (current !== generated) {
+    process.stderr.write(`${path.relative(root, target)} is stale: run node tools/vsix/tutorial-model.mjs\n`);
+    process.exit(1);
+  }
+} else if (current !== generated) {
+  fs.writeFileSync(target, generated, "utf8");
+  process.stdout.write(`tutorial-model: wrote ${path.relative(root, target)}\n`);
+}
diff --git a/tools/vsix/vscode-profiles.mjs b/tools/vsix/vscode-profiles.mjs
new file mode 100644
index 00000000..fd863c19
--- /dev/null
+++ b/tools/vsix/vscode-profiles.mjs
@@ -0,0 +1,52 @@
+// Prints, joined by "|", the VS Code profiles that hold their own copy of an
+// extension, so the local install loop replaces SharpLsp in every profile that
+// runs it, not only the default one. Implements [DIST-VSIX-DEV-INSTALL].
+//
+//   node tools/vsix/vscode-profiles.mjs <extension id>
+//
+// VS Code's user data directory is found per platform, or set with
+// VSCODE_USER_DATA_DIR. A profile that shares the default profile's extensions
+// is left out: installing into the default profile reaches it already.
+import fs from "node:fs";
+import os from "node:os";
+import path from "node:path";
+
+function userDataDir() {
+  if (process.env.VSCODE_USER_DATA_DIR) return process.env.VSCODE_USER_DATA_DIR;
+  if (process.platform === "darwin")
+    return path.join(os.homedir(), "Library", "Application Support", "Code");
+  if (process.platform === "win32")
+    return path.join(process.env.APPDATA ?? path.join(os.homedir(), "AppData", "Roaming"), "Code");
+  return path.join(process.env.XDG_CONFIG_HOME ?? path.join(os.homedir(), ".config"), "Code");
+}
+
+/** The parsed JSON at `file`, or `undefined` when it is absent or unreadable. */
+function readJson(file) {
+  try {
+    return JSON.parse(fs.readFileSync(file, "utf8"));
+  } catch {
+    return undefined;
+  }
+}
+
+function holds(extensionsFile, id) {
+  const extensions = readJson(extensionsFile);
+  return (
+    Array.isArray(extensions) &&
+    extensions.some((entry) => entry?.identifier?.id?.toLowerCase() === id)
+  );
+}
+
+const id = (process.argv[2] ?? "").toLowerCase();
+if (!id) {
+  process.stderr.write("usage: node tools/vsix/vscode-profiles.mjs <extension id>\n");
+  process.exit(2);
+}
+const user = path.join(userDataDir(), "User");
+const storage = readJson(path.join(user, "globalStorage", "storage.json"));
+const profiles = Array.isArray(storage?.userDataProfiles) ? storage.userDataProfiles : [];
+const names = profiles
+  .filter((profile) => profile.useDefaultFlags?.extensions !== true)
+  .filter((profile) => holds(path.join(user, "profiles", profile.location, "extensions.json"), id))
+  .map((profile) => profile.name);
+process.stdout.write(names.join("|"));