diff --git a/CLAUDE.md b/CLAUDE.md
index 251f8ee..75b8aaa 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -229,7 +229,10 @@ describes is rewritten, the rule is a candidate for deletion.
 - Scope a scan by what it exempts, never by an enumeration of what it covers.
 - State a scan's exemptions in the scan; never inherit them from another tool's
   configuration.
-- Scan source left to right carrying string and comment state, never line by line.
+- Scan source left to right carrying string, comment, template-expression and
+  regex-literal state, and name which of those the language being scanned has.
+- Read a literal's contents from the source at the offset the scan reached,
+  never from the copy the scan blanked.
 - Comment what a reader would otherwise "fix": a deliberate departure from the
   obvious implementation, or a precondition the code does not check.
 
diff --git a/PLAN.md b/PLAN.md
index f97e31c..573a7dc 100644
--- a/PLAN.md
+++ b/PLAN.md
@@ -96,7 +96,7 @@ change decided lives in its archived proposal under `openspec/changes/archive/`.
   its entries means anything about.
 
 ### Open
-- [ ] **`file-size-cap`** — proposed, eight steps, not yet applied. The
+- [ ] **`file-size-cap`** — proposed, eight steps, the first applied. The
       file-size cap half of "reverse two non-goals": 300 lines for `.ts`/`.tsx`,
       200 for `.css`, adopted with no exemption list because the same change
       decomposes all nine files currently over the line. `app.css` (943 lines)
@@ -104,7 +104,10 @@ change decided lives in its archived proposal under `openspec/changes/archive/`.
       JavaScript bundle. Not an `/opsx:update` on `reviewable-diff-gates` as
       this entry used to ask: that change is archived, and the growth protocol
       above forbids editing an archive to receive a fact discovered later, so
-      the cap lands in the living `change-slicing` spec.
+      the cap lands in the living `change-slicing` spec. Step 1 cost a change
+      to how the application is served, which shipped beside it: Bun's HTML dev
+      server cannot emit a CSS module's class-name mapping, so development
+      builds and serves `dist/` — the constraint below carries it.
 - [ ] **The comment scan goes quiet on a regex literal.** A backtick inside one
       — `` /[`]/ `` — opens what `scripts/mutation-floor.ts:183-199` takes for a
       template literal and runs to end of input, so every comment below it is
@@ -113,7 +116,11 @@ change decided lives in its archived proposal under `openspec/changes/archive/`.
       nothing is passing wrongly yet. Either teach the scanner that `/` in
       expression position starts one, or assert that the file contains none —
       the second is a line and fails loudly, the first ends the family of bugs
-      that produced five holes in one session.
+      that produced five holes in one session. The first is now done and lives
+      in `scripts/scan.ts`: it treats a `/` whose last token opens a value as a
+      regex literal and stops it at a newline rather than at end of input, and
+      it tells the two languages apart, CSS having neither `//` nor a regex
+      literal. What is left here is switching `mutation-floor.ts` to it.
 - [ ] **The rule of two** — the other half, still outstanding and **not yet
       written anywhere**. Lift a helper on the second consumer, never the
       first. `reviewable-diff-gates` prescribed its vehicle when it deferred it
@@ -124,7 +131,9 @@ change decided lives in its archived proposal under `openspec/changes/archive/`.
       in both `scripts/spec-coverage.test.ts` and `scripts/mutation-floor.ts`,
       the second is strictly better, and the Code rule the first implements was
       replaced on 2026-08-13. What that costs the older copy is commented at the
-      line it costs it.
+      line it costs it. `scripts/scan.ts` is where that lift lands: extracted
+      to bring its file under the cap, and already the module the older copy
+      should switch to — which is what makes it a lift and not speculation.
 - [ ] **Task 7** — Docker + VPS deploy (open decisions: registry GHCR or Docker
       Hub, same VPS or a new one). Carries `ui-foundation` **(e2e)** 1.5, which
       Task 4 deferred here: serving `dist/` under a plain static server is
diff --git a/build.test.ts b/build.test.ts
index fd286be..b940b13 100644
--- a/build.test.ts
+++ b/build.test.ts
@@ -1,4 +1,5 @@
 import { beforeAll, describe, expect, test } from "bun:test";
+import { symlinkSync, unlinkSync } from "node:fs";
 import { distFile } from "./dist-routes.ts";
 
 /**
@@ -44,6 +45,21 @@ describe("build output", () => {
 		expect(html).toContain('@import url("/fonts/fonts.css")');
 	});
 
+	// Styles reach the page through the entry point now, so nothing in the
+	// source `index.html` names them: a stylesheet that stopped being bundled
+	// is a missing import rather than a 404, and this is what would notice.
+	test("emits one stylesheet and links it from the document", async () => {
+		const sheets = [...new Bun.Glob("*.css").scanSync(dist)];
+		const html = await Bun.file(`${dist}/index.html`).text();
+
+		expect(sheets).toHaveLength(1);
+		// The element, not the string: an `href` anywhere in the document would
+		// satisfy a substring match without the browser loading anything.
+		expect(html).toMatch(
+			new RegExp(`<link[^>]+rel="stylesheet"[^>]+href="\\./${sheets[0]}"`),
+		);
+	});
+
 	test("leaves no font inlined as a data URI", async () => {
 		const [css] = [...new Bun.Glob("*.css").scanSync(dist)];
 		const text = await Bun.file(`${dist}/${css}`).text();
@@ -70,6 +86,18 @@ describe("serving the build output", () => {
 		expect((await response?.text())?.length).toBeGreaterThan(0);
 	});
 
+	// `Bun.file` follows a symlink, so the listing has to resolve one.
+	test("refuses an entry that resolves outside dist/", async () => {
+		const planted = `${dist}/escape.js`;
+		symlinkSync(`${import.meta.dir}/package.json`, planted);
+
+		try {
+			expect(distFile("/escape.js")).toBeNull();
+		} finally {
+			unlinkSync(planted);
+		}
+	});
+
 	// The listing is cached, so what it costs is a stale answer after a rebuild.
 	test("follows an asset appearing and disappearing", async () => {
 		const probe = `${dist}/probe-listing.js`;
diff --git a/dist-routes.ts b/dist-routes.ts
index 77f9e2c..aad787f 100644
--- a/dist-routes.ts
+++ b/dist-routes.ts
@@ -44,6 +44,10 @@ let listing = new Set<string>();
 function listed(): Set<string> {
 	const at = statSync(distDir, { bigint: true }).mtimeNs;
 	if (at !== listedAt) {
+		// `scanSync` does not follow symlinks unless asked to, measured against
+		// Bun 1.3.14, so a link planted in `dist/` is not listed and `Bun.file`
+		// never receives one. That default is what the containment above rests
+		// on, and `build.test.ts` pins it.
 		listing = new Set(new Bun.Glob("*").scanSync(distDir.pathname));
 		listedAt = at;
 	}
diff --git a/index.html b/index.html
index a23b152..3ca4272 100644
--- a/index.html
+++ b/index.html
@@ -9,7 +9,6 @@
 		<style>
 			@import url("/fonts/fonts.css");
 		</style>
-		<link rel="stylesheet" href="./src/app/styles/styles.css" />
 	</head>
 	<body>
 		<div id="app"></div>
diff --git a/openspec/changes/file-size-cap/design.md b/openspec/changes/file-size-cap/design.md
index 2f8d273..abec36b 100644
--- a/openspec/changes/file-size-cap/design.md
+++ b/openspec/changes/file-size-cap/design.md
@@ -85,6 +85,42 @@ Bun's bundler detects `.module.css` with no configuration and rewrites locally
 scoped class names to unique identifiers — checked in Bun's bundler
 documentation, not recalled.
 
+### Development serves the built bundle
+
+The documentation describes `bun build`. Bun's *other* implementation — the
+HTML entry point served by `Bun.serve` — emits the scoped stylesheet correctly
+and never defines the class-name mapping the components import, so every
+component reading one throws and the page renders nothing (oven-sh/bun#18258,
+open since March 2025; fix PR #33405 unmerged as of Bun 1.3.14). Only the dev
+path is affected.
+
+So `bun run dev` is `scripts/dev.ts`: it bundles into `dist/`, rebuilds on a
+change under `src/`, and starts `server.ts` over the result. `server.ts` no
+longer routes the HTML entry point; it serves `dist/` in development and in
+production alike. It ships ahead of step 1 rather than inside it: it changes
+how the application is served, which is its own reviewable unit.
+
+That costs hot module replacement and buys a development page that is the
+bundle production ships — so a defect the bundler introduces is under the e2e
+suite rather than only under `build.test.ts`. The asset lookup is
+`dist-routes.ts` rather than inline in `server.ts`, for the reason
+`static-routes.ts` is its own file: its listing guard, which is what keeps a
+request from naming a path outside `dist/`, can then be exercised without
+starting a server.
+
+### A picker rule that reaches into the hero tile becomes a custom property
+
+Two rules crossed what became a module boundary: the picker rings the tile
+`Enter` would take and fades the tile of a hero already drafted. A scoped class
+name cannot be written from another module's stylesheet, so the tile reads
+`box-shadow: var(--tile-ring, …)` and `opacity: var(--tile-fade, 1)`, and the
+picker sets those two on its own classes.
+
+Custom properties inherit, so nothing crosses the boundary and specificity
+never enters it. The alternative — a `class` prop on `HeroTile` carrying one of
+the picker's classes — puts two single-class selectors on the same declaration
+and lets emission order decide, which the source does not state.
+
 Fonts are the exception and do not move at all. `index.html` owns
 `@import url("/fonts/fonts.css")` in an inline `<style>`, so the faces are
 requested from the document rather than from the bundle; `build.test.ts`
diff --git a/openspec/changes/file-size-cap/proposal.md b/openspec/changes/file-size-cap/proposal.md
index 436ac10..5860618 100644
--- a/openspec/changes/file-size-cap/proposal.md
+++ b/openspec/changes/file-size-cap/proposal.md
@@ -89,12 +89,25 @@ implementing it has to stop enumerating a directory.
 ## Impact
 
 - New: a cap check and its test; one `*.module.css` beside each component; new
-  modules for the eight splits.
+  modules for the eight splits; `src/css.d.ts` so TypeScript resolves a
+  stylesheet import at all, and `src/app/cx.ts` to join the names a module
+  hands back.
+- New, and not foreseen when this was written, each shipping as its own pull
+  request beside step 1: `scripts/dev.ts` and `dist-routes.ts`, because Bun's
+  HTML dev server never defines a CSS module's class-name mapping
+  (oven-sh/bun#18258) and development therefore builds and serves `dist/` — see
+  `design.md`. And `src/app/module-classes.test.ts` with `scripts/scan.ts`
+  behind it, which check that a component reads only names its module defines —
+  opened separately and merged into step 1's own pull request rather than
+  landing behind it.
 - Deleted: `src/app/styles/app.css`.
 - Modified: `index.html`, every `.tsx` that carries a `class`, `styles.css`,
+  `base.css` (the bare `dialog` panel has no class to scope),
   `src/app/styles/styles.test.ts`, `build.test.ts` (it globs `*.css` in `dist`
-  and asserts on the single emitted stylesheet), `README.md`'s ownership map,
-  and `openspec/specs/change-slicing/`.
+  and asserts on the single emitted stylesheet), `server.ts`, `package.json`,
+  `playwright.config.ts`, `README.md`'s ownership map and its "Running it"
+  section, `PLAN.md`'s bundler constraint, and
+  `openspec/specs/change-slicing/`.
 - The e2e suite is the safety net for the CSS migration, and it is a usable
   one: `docs/testing.md` forbids CSS and class selectors in e2e, and a grep of
   `e2e/smoke.spec.ts` finds none, so scoped class names cannot break a locator.
diff --git a/openspec/changes/file-size-cap/tasks.md b/openspec/changes/file-size-cap/tasks.md
index d58946c..5a05aa0 100644
--- a/openspec/changes/file-size-cap/tasks.md
+++ b/openspec/changes/file-size-cap/tasks.md
@@ -15,6 +15,14 @@ Moving a rule counts twice in the diff budget — once removed, once added — s
 the 943 lines of `app.css` are ~1900 budgeted lines on their own. That, not
 caution, is why the migration takes three steps.
 
+Step 1 turned out to need one thing this list did not foresee, and it shipped
+ahead of the step rather than inside it: Bun's HTML dev server cannot emit a
+CSS module's class-name mapping, so development now builds and serves `dist/`.
+It is its own pull request because it changes how the application is served and
+stands on its own — `design.md` records the decision. The scan that checks a
+component reads only names its module defines was opened as a third, and merged
+into this step's pull request rather than behind it, so it ships here.
+
 `/zombies` in diff mode runs before each pull request, per the pre-PR sequence.
 Only step 8 introduces logic for it to find; the test tasks in steps 1–7 are
 the existing suites, which must stay green unchanged except where a file is
@@ -23,28 +31,35 @@ this proposal.
 
 ## 1. Styles arrive through the bundle, and the first components own theirs
 
-- [ ] 1.1 Import `src/app/styles/styles.css` from `src/app/main.tsx` and drop
+- [x] 1.1 Import `src/app/styles/styles.css` from `src/app/main.tsx` and drop
       the `<link rel="stylesheet">` from `index.html`, leaving the `@import`
       chain and every rule exactly as they are — this changes the delivery path
       and nothing else, and it is the commit to bisect to if styles vanish
-- [ ] 1.2 Update `build.test.ts`, which globs `*.css` in `dist` and asserts on
+- [x] 1.2 Update `build.test.ts`, which globs `*.css` in `dist` and asserts on
       the single emitted stylesheet; confirm the `@import url("/fonts/fonts.css")`
       assertion still holds, since fonts stay a served file
-- [ ] 1.3 Move the `hero tile` and `re-pick marker` blocks out of `app.css`
+- [x] 1.3 Move the `hero tile` and `re-pick marker` blocks out of `app.css`
       into `src/app/board/hero-tile.module.css`, imported by `hero-tile.tsx`;
       each explanatory comment moves with the rules it describes
-- [ ] 1.4 Move the `picker and dialogs` block into
-      `src/app/picker/picker.module.css`
-- [ ] 1.5 Rewrite every `class` on the migrated markup to read from the
+- [x] 1.4 Move the `picker and dialogs` block into
+      `src/app/picker/picker.module.css` — except the confirm dialog, which is
+      `app.tsx`'s and goes to `src/app/app.module.css` (step 3's file, brought
+      forward) rather than making the shell import the picker's stylesheet, and
+      the bare `dialog` panel both share, which has no class to scope and goes
+      to `base.css`
+- [x] 1.5 Rewrite every `class` on the migrated markup to read from the
       imported mapping — `class={s.heroTile}`, not `class="hero-tile"` — in
       `hero-tile.tsx`, `picker.tsx` and wherever else those classes are
       written, `board.tsx`'s re-pick badge included. The bundler rewrites the
       names in the stylesheet, so a literal left behind matches nothing and the
       rule silently stops applying. Every step that moves a block owes this,
       not only this one
-- [ ] 1.6 Confirm no rule was left behind and none duplicated: `app.css` shrinks
-      by exactly the lines the two modules gained, comments included
-- [ ] 1.7 Run the e2e suite and confirm the rendered page is unchanged — a
+- [x] 1.6 Confirm no rule was left behind and none duplicated. Not by counting
+      lines: the block splits across two modules, `app.module.css` and
+      `base.css`, and two rules become custom properties, so no equality holds.
+      Compare the multiset of declarations and of selectors before and after,
+      and account for every difference
+- [x] 1.7 Run the e2e suite and confirm the rendered page is unchanged — a
       mistake here is a blank stylesheet, which is loud
 
 ## 2. The board owns its styles
diff --git a/scripts/scan.test.ts b/scripts/scan.test.ts
new file mode 100644
index 0000000..ab57187
--- /dev/null
+++ b/scripts/scan.test.ts
@@ -0,0 +1,57 @@
+import { describe, expect, test } from "bun:test";
+import { blank } from "./scan.ts";
+
+/** `MARK` stands in for whatever a caller is looking for: it survives the scan
+ * when it sits in code, and goes when it sits in something the language quotes
+ * or comments out. */
+const kept = (source: string, language: "css" | "ts") =>
+	blank(source, language).includes("MARK");
+
+describe("scanning TypeScript", () => {
+	test.each([
+		["a string", "const a = 'MARK';"],
+		["a line comment", "// MARK"],
+		["a block comment", "/* MARK */"],
+		["template text", "const a = `text MARK`;"],
+		["a regex literal", "const a = /MARK/;"],
+		["a regex after return", "function f() { return /MARK/; }"],
+		["a regex after an arrow", "const f = () => /MARK/;"],
+		["a regex after typeof", "const a = typeof /MARK/;"],
+	])("erases %s", (_, source) => expect(kept(source, "ts")).toBe(false));
+
+	test.each([
+		["plain code", "const MARK = 1;"],
+		["a template expression", `const a = \`\${MARK}\`;`],
+		["a nested template expression", `const a = \`\${\`\${MARK}\`}\`;`],
+		["code after an interpolation closes", `const a = \`\${1}\` + MARK;`],
+		["code after a division, which is not a regex", "const a = 1 / 2; MARK;"],
+		// A quote that opened no string — one inside a regex literal, say — would
+		// otherwise swallow the rest of the file and take the scan silent with it.
+		["code after a quote left open on its line", "const a = 'x\nMARK;"],
+		["code after a comment that names a quote", "// it's fine\nMARK;"],
+	])("keeps %s", (_, source) => expect(kept(source, "ts")).toBe(true));
+
+	test("preserves offsets, so a match reads back out of the source", () => {
+		const source = 'const a = "hidden"; const b = 1;';
+
+		expect(blank(source, "ts")).toHaveLength(source.length);
+		expect(blank(source, "ts").indexOf("const b")).toBe(
+			source.indexOf("const b"),
+		);
+	});
+});
+
+describe("scanning CSS", () => {
+	test.each([
+		["a comment", "/* MARK */ .a {}"],
+		["a string", '.a { content: "MARK"; }'],
+	])("erases %s", (_, source) => expect(kept(source, "css")).toBe(false));
+
+	// CSS has neither, and reading one would erase a rule that is really there.
+	test.each([
+		["a line comment", ".a { background: url(//cdn/MARK.png); }"],
+		["a regex literal", ".a { margin: /MARK/; }"],
+	])("keeps what TypeScript would take for %s", (_, source) =>
+		expect(kept(source, "css")).toBe(true),
+	);
+});
diff --git a/scripts/scan.ts b/scripts/scan.ts
new file mode 100644
index 0000000..f91800e
--- /dev/null
+++ b/scripts/scan.ts
@@ -0,0 +1,195 @@
+/**
+ * Blanks out everything in a source file that is not code, so a pattern found
+ * in the result is one the language actually evaluates.
+ *
+ * Its own module rather than a helper inside its caller, so `mutation-floor.ts`
+ * has something to switch to: it carries a scanner of the same shape, and
+ * `PLAN.md` records both the hole left in it and that this family of bugs
+ * produced five of them in one session.
+ */
+
+/**
+ * A `/` opens a regex literal only where a value may begin; after one it is
+ * division. The token before it is what tells them apart — a character for
+ * punctuation, a word for the keywords a value may follow.
+ */
+const OPENS_VALUE = "(,=:[!&|?{};+-*%~^<>";
+const OPENS_VALUE_WORDS = new Set([
+	"return",
+	"typeof",
+	"instanceof",
+	"in",
+	"of",
+	"case",
+	"do",
+	"else",
+	"yield",
+	"await",
+	"new",
+	"delete",
+	"void",
+	"throw",
+]);
+
+/**
+ * What each language encloses text in, and therefore what this scan erases.
+ * Stated here rather than left to a default, because the two mistakes worth
+ * making are both silent: CSS has no `//` comment, so reading one would blank
+ * a rule from `url(//cdn/x.png)` to the end of the line, and it has no regex
+ * literal, so a `/` inside a path would erase to the next one.
+ */
+const SYNTAX = {
+	css: { lineComments: false, regex: false, templates: false },
+	ts: { lineComments: true, regex: true, templates: true },
+} as const;
+
+/**
+ * `source` with its comments, strings and — where the language has them —
+ * template text and regex literals replaced by spaces, so what is left at a
+ * given offset is code and nothing else. Lengths and newlines are preserved,
+ * so a token found in the result can be read back out of the original at the
+ * same place.
+ *
+ * A left-to-right scan carrying state, because deciding what a character means
+ * without knowing what it sits inside is one mistake, and the shapes it takes
+ * — an escaped quote ending a string early, a `/*` inside a line comment, a
+ * quote inside a regex literal swallowing the rest of the file — are one bug.
+ * A template literal is two things at once, so its text is blanked and its
+ * `${…}` is not: the expression is code, and a read inside one is a read.
+ *
+ * Not a parser: the only question asked of each character is what encloses it.
+ */
+export function blank(source: string, language: keyof typeof SYNTAX): string {
+	const { lineComments, regex, templates } = SYNTAX[language];
+	// Indexed by UTF-16 unit, as `source[i]` is, so an astral character does not
+	// shift every offset after it.
+	const out = source.split("");
+	const erase = (from: number, to: number) => {
+		for (let k = from; k < to && k < out.length; k++) {
+			if (out[k] !== "\n") out[k] = " ";
+		}
+	};
+
+	// One entry per template literal currently open, holding the `{` nesting
+	// inside its interpolation, or `null` while its text rather than an
+	// expression is being read. An empty stack is ordinary code.
+	const open: (number | null)[] = [];
+	let span = 0; // where the template text being blanked started
+	let previous = "";
+	let i = 0;
+
+	const word = (at: number) => {
+		let end = at;
+		while (end < source.length && /[A-Za-z_$]/.test(source[end] as string))
+			end++;
+		return source.slice(at, end);
+	};
+
+	while (i < source.length) {
+		const c = source[i] as string;
+		const next = source[i + 1];
+		const inText = open.length > 0 && open.at(-1) === null;
+
+		if (inText) {
+			if (c === "\\") {
+				i += 2;
+			} else if (c === "`") {
+				erase(span, i);
+				open.pop();
+				i++;
+				previous = "`";
+			} else if (c === "$" && next === "{") {
+				erase(span, i);
+				open[open.length - 1] = 0;
+				i += 2;
+				previous = "{";
+			} else {
+				i++;
+			}
+			continue;
+		}
+
+		if (c === "'" || c === '"') {
+			const start = i;
+			i++;
+			while (i < source.length && source[i] !== c) {
+				if (source[i] === "\\") {
+					i += 2;
+					continue;
+				}
+				// A raw newline cannot sit inside a '' or "" literal, so a quote
+				// that opened no string stops here instead of swallowing the rest
+				// of the file and taking the scan silent with it.
+				if (source[i] === "\n") break;
+				i++;
+			}
+			if (source[i] === c) i++;
+			erase(start, i);
+			previous = c;
+		} else if (c === "`" && templates) {
+			open.push(null);
+			span = i + 1;
+			i++;
+		} else if (c === "}" && open.length > 0 && open.at(-1) === 0) {
+			// The brace that closes the interpolation, so its template's text
+			// resumes here.
+			open[open.length - 1] = null;
+			span = i + 1;
+			i++;
+		} else if (c === "{" && open.length > 0 && open.at(-1) !== null) {
+			open[open.length - 1] = (open.at(-1) as number) + 1;
+			previous = c;
+			i++;
+		} else if (c === "}" && open.length > 0 && open.at(-1) !== null) {
+			open[open.length - 1] = (open.at(-1) as number) - 1;
+			previous = c;
+			i++;
+		} else if (lineComments && c === "/" && next === "/") {
+			const start = i;
+			while (i < source.length && source[i] !== "\n") i++;
+			erase(start, i);
+		} else if (c === "/" && next === "*") {
+			const start = i;
+			i += 2;
+			while (i < source.length && !(source[i] === "*" && source[i + 1] === "/"))
+				i++;
+			i += 2;
+			erase(start, i);
+		} else if (
+			c === "/" &&
+			regex &&
+			(previous === "" ||
+				OPENS_VALUE.includes(previous) ||
+				OPENS_VALUE_WORDS.has(previous))
+		) {
+			const start = i;
+			i++;
+			let inClass = false;
+			while (i < source.length) {
+				if (source[i] === "\\") {
+					i += 2;
+					continue;
+				}
+				if (source[i] === "[") inClass = true;
+				else if (source[i] === "]") inClass = false;
+				// An unterminated literal is a syntax error, not something to scan
+				// past: stop at the newline rather than run to end of input.
+				else if (source[i] === "\n") break;
+				else if (source[i] === "/" && !inClass) break;
+				i++;
+			}
+			if (source[i] === "/") i++;
+			erase(start, i);
+			previous = "/";
+		} else if (/[A-Za-z_$]/.test(c)) {
+			const found = word(i);
+			previous = found;
+			i += found.length;
+		} else {
+			if (c.trim() !== "") previous = c;
+			i++;
+		}
+	}
+
+	return out.join("");
+}
diff --git a/src/app/app.module.css b/src/app/app.module.css
new file mode 100644
index 0000000..f502cd5
--- /dev/null
+++ b/src/app/app.module.css
@@ -0,0 +1,44 @@
+/* The shell's own styles — currently the reset dialog (screens-spec §4).
+   Every value is a token reference — literals belong in tokens/ only. */
+
+.confirm {
+	width: min(320px, 100% - var(--sp-8));
+	padding: var(--sp-7);
+}
+
+.confirm h2 {
+	margin-bottom: var(--sp-2);
+	font-size: var(--fs-body);
+	font-weight: 600;
+}
+
+.confirm p {
+	margin-bottom: var(--sp-6);
+	color: var(--text-4);
+	font-size: var(--fs-meta);
+}
+
+.confirmActions {
+	display: flex;
+	gap: var(--sp-3);
+	justify-content: flex-end;
+}
+
+.confirmActions button {
+	padding: var(--sp-2) var(--sp-5);
+	border: 1px solid var(--border-3);
+	border-radius: var(--r-control);
+	background: var(--bg-2);
+	color: var(--text-2);
+	font-family: var(--font-ui);
+	font-size: var(--fs-control);
+	font-weight: 600;
+}
+
+/* The design tints this button with its own colour rather than a new one, so
+   the tint is mixed from the token instead of restating the palette here. */
+.confirmActions .danger {
+	border-color: color-mix(in srgb, var(--dire) 45%, transparent);
+	background: color-mix(in srgb, var(--dire) 8%, transparent);
+	color: var(--dire);
+}
diff --git a/src/app/app.tsx b/src/app/app.tsx
index 87efe75..74b949a 100644
--- a/src/app/app.tsx
+++ b/src/app/app.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useMemo, useRef, useState } from "preact/hooks";
 import { computeModel } from "../model.ts";
 import type { HeroId, SnapshotBundle } from "../types.ts";
+import s from "./app.module.css";
 import { Board } from "./board/board.tsx";
 import { Header } from "./header.tsx";
 import { Picker } from "./picker/picker.tsx";
@@ -213,7 +214,7 @@ function ResetDialog({ onAnswer }: { onAnswer: (confirmed: boolean) => void }) {
 
 	return (
 		<dialog
-			class="confirm"
+			class={s.confirm}
 			ref={dialog}
 			aria-labelledby="reset-title"
 			onClose={() => onAnswer(dialog.current?.returnValue === "reset")}
@@ -221,13 +222,13 @@ function ResetDialog({ onAnswer }: { onAnswer: (confirmed: boolean) => void }) {
 			<form method="dialog">
 				<h2 id="reset-title">Reset draft?</h2>
 				<p>Bans and all picks will be cleared. Side and role stay.</p>
-				<div class="confirm-actions">
+				<div class={s.confirmActions}>
 					<button type="submit" value="cancel">
 						Cancel
 					</button>
 					{/* `showModal()` honours `autofocus`, which is what makes `Enter`
 					    confirm — without it the first control, Cancel, would answer. */}
-					<button type="submit" value="reset" class="danger" autofocus>
+					<button type="submit" value="reset" class={s.danger} autofocus>
 						Reset
 					</button>
 				</div>
diff --git a/src/app/board/board.tsx b/src/app/board/board.tsx
index 9925ae2..7c6ce03 100644
--- a/src/app/board/board.tsx
+++ b/src/app/board/board.tsx
@@ -25,6 +25,9 @@ import {
 	scoreTone,
 	topRoles,
 } from "./format.ts";
+// The re-pick marker is the tile's other half: it stands in for a hero the
+// snapshot dropped, so its rule lives beside the tile it replaces.
+import s from "./hero-tile.module.css";
 import { HeroTile } from "./hero-tile.tsx";
 
 type Apply = (action: Action) => void;
@@ -107,7 +110,7 @@ function RemoveButton({
 /** A hero the loaded snapshot no longer carries (screens-spec §6.4): the entry
  * stays put, says so, and waits to be replaced. */
 const RepickBadge = ({ hero }: { hero: HeroEntry | undefined }) =>
-	hero === undefined ? <span class="repick-badge">re-pick</span> : null;
+	hero === undefined ? <span class={s.repickBadge}>re-pick</span> : null;
 
 const ThinBadge = ({ hero }: { hero: HeroEntry | undefined }) =>
 	hero?.sufficient === false ? (
diff --git a/src/app/board/hero-tile.module.css b/src/app/board/hero-tile.module.css
new file mode 100644
index 0000000..be9f5e1
--- /dev/null
+++ b/src/app/board/hero-tile.module.css
@@ -0,0 +1,57 @@
+/* The hero tile, and the marker for a hero the snapshot no longer carries.
+   Every value is a token reference — literals belong in tokens/ only. */
+
+.tile {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-shrink: 0;
+	border-radius: var(--r-tile);
+	/* Both knobs belong to whoever places the tile: the picker rings the one
+	   `Enter` would take and fades the one already in the draft. A scoped class
+	   name cannot cross a module boundary; an inherited custom property can. */
+	box-shadow: var(--tile-ring, var(--tile-inset));
+	opacity: var(--tile-fade, 1);
+	font-family: var(--font-mono);
+	font-weight: 700;
+}
+
+.tileLg {
+	width: var(--tile-lg);
+	height: var(--tile-lg);
+	font-size: var(--fs-tile-lg);
+}
+
+.tileMd {
+	width: var(--tile-md);
+	height: var(--tile-md);
+	border-radius: var(--r-control);
+	font-size: var(--fs-tile-md);
+}
+
+.tileSm {
+	width: var(--tile-sm);
+	height: var(--tile-sm);
+	border-radius: var(--r-tile-sm);
+	font-size: var(--fs-tile-sm);
+}
+
+.tileInkDark {
+	color: var(--tile-ink-dark);
+}
+
+.tileInkLight {
+	color: var(--tile-ink-light);
+}
+
+/* re-pick marker: the hero left the snapshot (screens-spec §6.4) */
+
+.repickBadge {
+	padding: 2px var(--sp-2);
+	border: 1px solid var(--accent-border);
+	border-radius: var(--r-kbd);
+	background: var(--accent-banner-bg);
+	color: var(--accent);
+	font-family: var(--font-mono);
+	font-size: var(--fs-kbd);
+}
diff --git a/src/app/board/hero-tile.tsx b/src/app/board/hero-tile.tsx
index 930008b..3d83e17 100644
--- a/src/app/board/hero-tile.tsx
+++ b/src/app/board/hero-tile.tsx
@@ -1,8 +1,23 @@
 import type { HeroEntry } from "../../types.ts";
+import { cx } from "../cx.ts";
 import { heroAbbr, type Ink, tileInk } from "./format.ts";
+import s from "./hero-tile.module.css";
 
 type TileSize = "lg" | "md" | "sm";
 
+/** The bundler owns the class names, so a variant is looked up rather than
+ * spelled out from the prop — a name assembled here would match nothing. */
+const SIZE: Record<TileSize, string | undefined> = {
+	lg: s.tileLg,
+	md: s.tileMd,
+	sm: s.tileSm,
+};
+
+const INK: Record<Ink, string | undefined> = {
+	dark: s.tileInkDark,
+	light: s.tileInkLight,
+};
+
 /**
  * The palette lives in `tokens/colors.css` and is never restated here: the
  * background is a `var()` with the design's own fallback, and the lettering
@@ -47,7 +62,7 @@ export function HeroTile({
 
 	return (
 		<span
-			class={`tile tile-${size} tile-ink-${inkFor(slug)}`}
+			class={cx(s.tile, SIZE[size], INK[inkFor(slug)])}
 			style={{ background: `var(--hero-${slug}, var(--hero-fallback))` }}
 			{...(label === undefined
 				? { "aria-hidden": true }
diff --git a/src/app/cx.test.ts b/src/app/cx.test.ts
new file mode 100644
index 0000000..4347985
--- /dev/null
+++ b/src/app/cx.test.ts
@@ -0,0 +1,18 @@
+import { describe, expect, test } from "bun:test";
+import { cx } from "./cx.ts";
+
+describe("joining the class names a module hands back", () => {
+	test("a name the stylesheet does not carry leaves nothing behind", () => {
+		expect(cx(undefined, undefined)).toBe("");
+	});
+
+	test("names keep the order they were given", () => {
+		expect(cx("tile", "tileLg")).toBe("tile tileLg");
+	});
+
+	// The reason the helper exists: a plain join writes "tile  tileLg", and a
+	// template literal writes "tile undefined tileLg".
+	test("an absent name between two present ones leaves no gap", () => {
+		expect(cx("tile", undefined, "tileLg")).toBe("tile tileLg");
+	});
+});
diff --git a/src/app/cx.ts b/src/app/cx.ts
new file mode 100644
index 0000000..c457be5
--- /dev/null
+++ b/src/app/cx.ts
@@ -0,0 +1,8 @@
+/**
+ * Joins the class names a CSS module hands back. A name the stylesheet does
+ * not carry drops out of the attribute instead of reaching the DOM as the
+ * string "undefined" — the mapping is built by the bundler, so its keys are
+ * unknown to the type checker and a stale name is only ever a missing rule.
+ */
+export const cx = (...names: (string | undefined)[]) =>
+	names.filter(Boolean).join(" ");
diff --git a/src/app/main.tsx b/src/app/main.tsx
index 595e8ff..40de1ce 100644
--- a/src/app/main.tsx
+++ b/src/app/main.tsx
@@ -1,5 +1,8 @@
 import { render } from "preact";
 import { App } from "./app.tsx";
+// The stylesheet index.html used to link. Delivering it through the bundle is
+// what lets component rules travel with the components that import them.
+import "./styles/styles.css";
 
 const root = document.getElementById("app");
 if (!root) throw new Error("mount point #app is missing from index.html");
diff --git a/src/app/module-classes.test.ts b/src/app/module-classes.test.ts
new file mode 100644
index 0000000..519671f
--- /dev/null
+++ b/src/app/module-classes.test.ts
@@ -0,0 +1,236 @@
+import { describe, expect, test } from "bun:test";
+import { lstatSync, readFileSync } from "node:fs";
+import { dirname, join, resolve } from "node:path";
+import { blank } from "../../scripts/scan.ts";
+
+const TSX = new Bun.Transpiler({ loader: "tsx" });
+
+/**
+ * Every class a component reads off a CSS module is one that module defines.
+ *
+ * This is the migration's one silent failure: the bundler owns the names, so a
+ * read that matches nothing is `undefined` rather than an error. The rule stops
+ * applying, the component still renders, and neither the type checker nor the
+ * e2e suite — which locates by role and text, never by class — says a word.
+ */
+
+// The listing is taken at the repository root, never at `cwd`, the shape
+// `scripts/no-suppressions.ts` uses: `git ls-files` run in a subdirectory
+// reports only what is under it and names it relative to it.
+const top = Bun.spawnSync(["git", "rev-parse", "--show-toplevel"]);
+if (top.exitCode !== 0) throw new Error(top.stderr.toString());
+const root = top.stdout.toString().trim();
+
+const ls = Bun.spawnSync(["git", "ls-files", "-z"], { cwd: root });
+if (ls.exitCode !== 0) throw new Error(ls.stderr.toString());
+
+/**
+ * Exempt because it is prose, and prose is the only thing here that writes an
+ * import of a stylesheet without performing one — the four artefacts of this
+ * change all do. Naming the source extensions instead is a list that grows
+ * silently: `.ts` and `.tsx` would leave `.jsx` and `.mjs` unscanned, and the
+ * first such file to arrive would be exempt with nobody deciding that.
+ */
+const PROSE = [".md"];
+
+const tracked = ls.stdout
+	.toString()
+	.split("\0")
+	.filter(Boolean)
+	.filter((path) => !PROSE.some((ext) => path.endsWith(ext)))
+	// Tracked but absent from the work tree, or a gitlink that reads as a
+	// directory — neither is a file to open.
+	.filter((path) =>
+		lstatSync(join(root, path), { throwIfNoEntry: false })?.isFile(),
+	);
+
+const read = (path: string) => readFileSync(join(root, path), "utf8");
+
+/**
+ * The class selectors a module defines.
+ *
+ * Only a rule's prelude is read — the text running up to the `{` that opens
+ * its block. That is the one place a class selector can be: inside a block a
+ * `.` opens a decimal or a file extension in `url(...)`, and a quoted `.name`
+ * in a `content` selects nothing either.
+ */
+const defined = (css: string) => {
+	const found = new Set<string>();
+
+	for (const rule of blank(css, "css").matchAll(/([^;{}]*)\{/g)) {
+		for (const name of (rule[1] as string).matchAll(/\.([A-Za-z][\w-]*)/g)) {
+			found.add(name[1] as string);
+		}
+	}
+
+	return found;
+};
+
+/**
+ * Every class a source file reads off an imported CSS module, as `[module path
+ * relative to the repository root, name]`.
+ *
+ * Both an import's specifier and a bracket read's name are strings, and the
+ * blanked source no longer carries either. Blanking preserves offsets, so each
+ * is taken back out of the source at the place the surrounding code was proved
+ * to be code — rather than matched in a source where a string spelling
+ * `import s from "./x.module.css"` would read as an import.
+ */
+function reads(path: string, source: string): [string, string][] {
+	// JSX is not TypeScript. To a lexical scan `/>` opens a regex literal, so
+	// does `</span>`, and an apostrophe in element text opens a string — each
+	// erasing the rest of its line and losing a read, which is the direction
+	// that passes wrongly. Bun's transpiler removes JSX and keeps both the
+	// import and the reads, so what gets scanned is plain JavaScript.
+	let transpiled: string;
+	try {
+		transpiled = TSX.transformSync(source);
+	} catch {
+		// It does not parse, so it performs no import of a CSS module. Every
+		// tracked file is offered here, most of them not source at all.
+		return [];
+	}
+
+	const found: [string, string][] = [];
+	const code = blank(transpiled, "ts");
+	const after = (match: RegExpExecArray | RegExpMatchArray) =>
+		transpiled.slice((match.index as number) + match[0].length);
+
+	// `from` is not followed by `\s+` here: the specifier is blanked to spaces,
+	// so a greedy run would swallow it and `after` would point past the string.
+	for (const statement of code.matchAll(
+		/\bimport\s+([A-Za-z_$][\w$]*)\s+from\b/g,
+	)) {
+		const specifier = /^\s*(["'])([^"']+)\1/.exec(after(statement));
+		if (specifier === null) continue;
+		const target = specifier[2] as string;
+		if (!target.endsWith(".module.css")) continue;
+
+		const module = resolve(dirname(join(root, path)), target).slice(
+			root.length + 1,
+		);
+		// A `$` is a valid identifier character and a regex metacharacter, so the
+		// binding is escaped before it becomes part of a pattern.
+		const binding = (statement[1] as string).replace(/[$]/g, "\\$&");
+
+		for (const access of code.matchAll(
+			new RegExp(
+				// Optional access is what `noUncheckedIndexedAccess` invites, so a
+				// read spelled `s?.name` is a read like any other.
+				`(?<![\\w.$])${binding}(?:\\??\\.(\\w+)|(?:\\?\\.)?\\[)`,
+				"g",
+			),
+		)) {
+			const dotted = access[1];
+			if (dotted !== undefined) {
+				found.push([module, dotted]);
+				continue;
+			}
+			// A bracket read is how a hyphenated class name is spelled, and
+			// `defined` accepts those, so leaving it unmatched leaves it unchecked.
+			const quoted = /^\s*(["'])([A-Za-z][\w-]*)\1\s*\]/.exec(after(access));
+			if (quoted !== null) found.push([module, quoted[2] as string]);
+		}
+	}
+
+	return found;
+}
+
+const classes = new Map(
+	tracked
+		.filter((path) => path.endsWith(".module.css"))
+		.map((module) => [module, defined(read(module))] as const),
+);
+
+const readers = tracked
+	.map((path) => [path, reads(path, read(path))] as const)
+	.filter(([, names]) => names.length > 0);
+
+describe("the classes a module defines", () => {
+	test("a selector", () => {
+		expect(defined(".real { color: red; }")).toEqual(new Set(["real"]));
+	});
+
+	test("not one named inside a value, which selects nothing", () => {
+		expect(defined('.real { content: ".fake"; }')).toEqual(new Set(["real"]));
+	});
+
+	// CSS has no `//` comment; reading one would blank the rest of the line.
+	test("one after an unquoted URL on the same line", () => {
+		const css = ".a { background: url(//cdn/x.png); } .b { color: red; }";
+		expect(defined(css)).toEqual(new Set(["a", "b"]));
+	});
+});
+
+describe("the classes a file reads", () => {
+	// Placed beside a real module, so the resolved path is the real one.
+	const at = "src/app/board/probe.tsx";
+	const module = "src/app/board/hero-tile.module.css";
+	const imports = 'import s from "./hero-tile.module.css";\n';
+	const names = (body: string) => reads(at, imports + body).map(([, n]) => n);
+
+	test("resolves the module a read belongs to", () => {
+		expect(reads(at, `${imports}const a = s.name;`)).toEqual([
+			[module, "name"],
+		]);
+	});
+
+	// The fixtures are written as template literals so an interpolation can be
+	// escaped into them: a plain string spelling `${` reads as one nobody meant.
+	test.each([
+		["a plain read", "const a = s.name;"],
+		["a read inside a template expression", `const a = \`\${s.name}\`;`],
+		["a read inside a nested template", `const a = \`\${\`\${s.name}\`}\`;`],
+		["a read after an interpolation closes", `const a = \`\${1}\` + s.name;`],
+		["a bracket read", 'const a = s["name"];'],
+		["an optional read", "const a = s?.name;"],
+		["an optional bracket read", 'const a = s?.["name"];'],
+		["a division before a read", "const a = 1 / 2; const b = s.name;"],
+	])("finds %s", (_, body) => expect(names(body)).toEqual(["name"]));
+
+	test.each([
+		["a bracket read", 'const a = s["hero-name"];'],
+		["an optional bracket read", 'const a = s?.["hero-name"];'],
+	])("finds a hyphenated name, which only %s can spell", (_, body) =>
+		expect(names(body)).toEqual(["hero-name"]),
+	);
+
+	// JSX is what a lexical scan reads as regex and string syntax; each of these
+	// erased the rest of its line before the transpiler was put in front of it.
+	test.each([
+		["a self-closing tag", "<T hero={hero} /> {s.name}"],
+		["a closing tag", "<p>x</p> {s.name}"],
+		["an apostrophe in element text", "<p>it's fine</p> {s.name}"],
+	])("finds a read after %s", (_, body) =>
+		expect(names(`export const T = () => <>${body}</>;`)).toEqual(["name"]),
+	);
+
+	test("finds a read off a binding spelled with a dollar", () => {
+		const source = `import $s from "./hero-tile.module.css";\nconst a = $s.name;`;
+		expect(reads(at, source)).toEqual([[module, "name"]]);
+	});
+
+	// What the scan erases is `scripts/scan.test.ts`'s; this is only that a
+	// binding named in something erased is not a read.
+	test("ignores a name in a comment", () =>
+		expect(names("// s.name")).toEqual([]));
+
+	test("ignores an import spelled inside a string, which imports nothing", () => {
+		const source = `const a = "import s from './fake.module.css'";\nconst b = s.name;`;
+		expect(reads(at, source)).toEqual([]);
+	});
+});
+
+describe("class names read off a CSS module", () => {
+	// A sweep that found nothing would pass every assertion below vacuously.
+	test("there are modules, and files reading them", () => {
+		expect(classes.size).toBeGreaterThan(0);
+		expect(readers.length).toBeGreaterThan(0);
+	});
+
+	test.each(readers)("%s reads only names its module defines", (_, names) => {
+		for (const [module, name] of names) {
+			expect(classes.get(module) ?? new Set()).toContain(name);
+		}
+	});
+});
diff --git a/src/app/picker/picker.module.css b/src/app/picker/picker.module.css
new file mode 100644
index 0000000..c1f0989
--- /dev/null
+++ b/src/app/picker/picker.module.css
@@ -0,0 +1,140 @@
+/* The hero picker (screens-spec §3). Every value is a token reference —
+   literals belong in tokens/ only. */
+
+.picker {
+	width: min(640px, 100% - var(--sp-8));
+	padding: 0;
+	overflow: hidden;
+}
+
+.pickerHead {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: var(--sp-5) var(--sp-6) var(--sp-4);
+}
+
+.pickerTitle {
+	font-size: var(--fs-body);
+	font-weight: 600;
+}
+
+.pickerClose {
+	width: var(--tile-sm);
+	height: var(--tile-sm);
+	border: 1px solid var(--border-3);
+	border-radius: var(--r-tile-sm);
+	background: transparent;
+	color: var(--text-4);
+	font-size: var(--fs-meta);
+}
+
+.pickerSearch {
+	display: block;
+	padding: 0 var(--sp-6) var(--sp-4);
+}
+
+.pickerSearch input {
+	width: 100%;
+	padding: var(--sp-3) var(--sp-4);
+	border: 1px solid var(--border-3);
+	border-radius: var(--r-control);
+	background: var(--bg-0);
+	color: var(--text-1);
+	font-family: var(--font-ui);
+	font-size: var(--fs-body);
+}
+
+.pickerEmpty {
+	padding: 0 var(--sp-6) var(--sp-5);
+	color: var(--text-4);
+	font-size: var(--fs-control);
+}
+
+.pickerGrid {
+	display: grid;
+	grid-template-columns: repeat(8, 1fr);
+	gap: var(--sp-3) var(--sp-2);
+	max-height: 50vh;
+	padding: var(--sp-1) var(--sp-6) var(--sp-5);
+	overflow-y: auto;
+}
+
+.pickerTile {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 5px;
+	padding: var(--sp-2) 2px;
+	border: 0;
+	border-radius: var(--r-tile);
+	background: transparent;
+	color: var(--text-4);
+	font-family: var(--font-ui);
+	font-size: var(--fs-kbd);
+	text-align: center;
+}
+
+.pickerFirst {
+	background: var(--bg-3);
+	--tile-ring: var(--tile-inset), 0 0 0 2px var(--accent);
+}
+
+.pickerTile[aria-disabled="true"] {
+	cursor: not-allowed;
+	/* The design fades the whole cell; fading the words with it would leave the
+	   one thing a taken tile has to say — where the hero already sits — below any
+	   readable contrast. Only the artwork dims, so the fade is handed to the
+	   tile alone and the name is coloured on its own. */
+	--tile-fade: 0.35;
+}
+
+.pickerTile[aria-disabled="true"] .pickerName {
+	color: var(--text-5);
+}
+
+.pickerUsed {
+	color: var(--accent);
+}
+
+.pickerHints {
+	display: flex;
+	flex-wrap: wrap;
+	gap: var(--sp-5);
+	padding: var(--sp-3) var(--sp-6);
+	border-top: 1px solid var(--border-0);
+	color: var(--text-5);
+	font-family: var(--font-mono);
+	font-size: var(--fs-kbd);
+}
+
+/* One column: the board has to fit a phone held beside the game (US-25). */
+
+@media (max-width: 720px) {
+	/* Full-screen picker: the search field has to be reachable with a thumb
+	   and the grid still has to show whole rows (screens-spec §3). */
+	.picker {
+		display: flex;
+		flex-direction: column;
+		width: 100%;
+		max-width: none;
+		height: 100%;
+		max-height: none;
+		margin: 0;
+		border: 0;
+		border-radius: 0;
+	}
+
+	/* The grid is the only part that may shrink, so the hint bar stays on
+	   screen and the heroes scroll inside instead of being clipped away. */
+	.pickerGrid {
+		grid-template-columns: repeat(4, 1fr);
+		min-height: 0;
+		max-height: none;
+	}
+
+	.pickerHints {
+		margin-top: auto;
+		gap: var(--sp-4);
+	}
+}
diff --git a/src/app/picker/picker.tsx b/src/app/picker/picker.tsx
index 93ad93a..dab9a42 100644
--- a/src/app/picker/picker.tsx
+++ b/src/app/picker/picker.tsx
@@ -9,8 +9,10 @@
 import { useEffect, useRef, useState } from "preact/hooks";
 import type { HeroEntry, HeroId, SnapshotBundle } from "../../types.ts";
 import { HeroTile } from "../board/hero-tile.tsx";
+import { cx } from "../cx.ts";
 import type { PickTarget, Used } from "../session.ts";
 import { ROLE_UI } from "../session-controls.tsx";
+import s from "./picker.module.css";
 import { matchHeroes } from "./search.ts";
 
 /** What the header says we are picking for. */
@@ -123,19 +125,19 @@ export function Picker({
 
 	return (
 		<dialog
-			class="picker"
+			class={s.picker}
 			ref={dialog}
 			aria-labelledby="picker-title"
 			// `close` covers every way out — `Esc`, the ✕, the backdrop, a pick.
 			onClose={onClose}
 		>
-			<div class="picker-head">
-				<h2 class="picker-title" id="picker-title">
+			<div class={s.pickerHead}>
+				<h2 class={s.pickerTitle} id="picker-title">
 					Pick for: {targetLabel(target)}
 				</h2>
 				<button
 					type="button"
-					class="picker-close"
+					class={s.pickerClose}
 					aria-label="Close the picker"
 					onClick={() => dialog.current?.close()}
 				>
@@ -143,7 +145,7 @@ export function Picker({
 				</button>
 			</div>
 
-			<label class="picker-search">
+			<label class={s.pickerSearch}>
 				<span class="visually-hidden">Search heroes</span>
 				<input
 					ref={search}
@@ -166,18 +168,21 @@ export function Picker({
 			</label>
 
 			{matches.length === 0 ? (
-				<p class="picker-empty" role="status">
+				<p class={s.pickerEmpty} role="status">
 					No hero matches “{query.trim()}”
 				</p>
 			) : (
-				<div class="picker-grid" ref={grid}>
+				<div class={s.pickerGrid} ref={grid}>
 					{matches.map((hero) => {
 						const used = usedOf(hero.id);
 						return (
 							<button
 								type="button"
 								key={hero.id}
-								class={`picker-tile${hero.id === first?.id ? " picker-first" : ""}`}
+								class={cx(
+									s.pickerTile,
+									hero.id === first?.id ? s.pickerFirst : undefined,
+								)}
 								// Taken heroes stay focusable so the arrow keys keep the grid's
 								// geometry; `aria-disabled` is what tells everyone they are out.
 								aria-disabled={used !== null}
@@ -185,15 +190,15 @@ export function Picker({
 								onClick={() => choose(hero)}
 							>
 								<HeroTile hero={hero} size="lg" />
-								<span class="picker-name">{hero.name}</span>
-								{used !== null && <span class="picker-used">{used}</span>}
+								<span class={s.pickerName}>{hero.name}</span>
+								{used !== null && <span class={s.pickerUsed}>{used}</span>}
 							</button>
 						);
 					})}
 				</div>
 			)}
 
-			<p class="picker-hints">
+			<p class={s.pickerHints}>
 				<span>type to filter</span>
 				<span>Enter — pick first</span>
 				<span>← ↑ ↓ → — move</span>
diff --git a/src/app/styles/app.css b/src/app/styles/app.css
index d55de65..d69bcfb 100644
--- a/src/app/styles/app.css
+++ b/src/app/styles/app.css
@@ -587,229 +587,6 @@
 	color: var(--text-3);
 }
 
-/* hero tile */
-
-.tile {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	flex-shrink: 0;
-	border-radius: var(--r-tile);
-	box-shadow: var(--tile-inset);
-	font-family: var(--font-mono);
-	font-weight: 700;
-}
-
-.tile-lg {
-	width: var(--tile-lg);
-	height: var(--tile-lg);
-	font-size: var(--fs-tile-lg);
-}
-
-.tile-md {
-	width: var(--tile-md);
-	height: var(--tile-md);
-	border-radius: var(--r-control);
-	font-size: var(--fs-tile-md);
-}
-
-.tile-sm {
-	width: var(--tile-sm);
-	height: var(--tile-sm);
-	border-radius: var(--r-tile-sm);
-	font-size: var(--fs-tile-sm);
-}
-
-.tile-ink-dark {
-	color: var(--tile-ink-dark);
-}
-
-.tile-ink-light {
-	color: var(--tile-ink-light);
-}
-
-/* re-pick marker: the hero left the snapshot (screens-spec §6.4) */
-
-.repick-badge {
-	padding: 2px var(--sp-2);
-	border: 1px solid var(--accent-border);
-	border-radius: var(--r-kbd);
-	background: var(--accent-banner-bg);
-	color: var(--accent);
-	font-family: var(--font-mono);
-	font-size: var(--fs-kbd);
-}
-
-/* picker and dialogs */
-
-dialog {
-	border: 1px solid var(--border-2);
-	border-radius: var(--r-panel);
-	background: var(--bg-1);
-	color: var(--text-1);
-	box-shadow: var(--shadow-modal);
-}
-
-dialog::backdrop {
-	background: var(--backdrop);
-}
-
-.picker {
-	width: min(640px, 100% - var(--sp-8));
-	padding: 0;
-	overflow: hidden;
-}
-
-.picker-head {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	padding: var(--sp-5) var(--sp-6) var(--sp-4);
-}
-
-.picker-title {
-	font-size: var(--fs-body);
-	font-weight: 600;
-}
-
-.picker-close {
-	width: var(--tile-sm);
-	height: var(--tile-sm);
-	border: 1px solid var(--border-3);
-	border-radius: var(--r-tile-sm);
-	background: transparent;
-	color: var(--text-4);
-	font-size: var(--fs-meta);
-}
-
-.picker-search {
-	display: block;
-	padding: 0 var(--sp-6) var(--sp-4);
-}
-
-.picker-search input {
-	width: 100%;
-	padding: var(--sp-3) var(--sp-4);
-	border: 1px solid var(--border-3);
-	border-radius: var(--r-control);
-	background: var(--bg-0);
-	color: var(--text-1);
-	font-family: var(--font-ui);
-	font-size: var(--fs-body);
-}
-
-.picker-empty {
-	padding: 0 var(--sp-6) var(--sp-5);
-	color: var(--text-4);
-	font-size: var(--fs-control);
-}
-
-.picker-grid {
-	display: grid;
-	grid-template-columns: repeat(8, 1fr);
-	gap: var(--sp-3) var(--sp-2);
-	max-height: 50vh;
-	padding: var(--sp-1) var(--sp-6) var(--sp-5);
-	overflow-y: auto;
-}
-
-.picker-tile {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	gap: 5px;
-	padding: var(--sp-2) 2px;
-	border: 0;
-	border-radius: var(--r-tile);
-	background: transparent;
-	color: var(--text-4);
-	font-family: var(--font-ui);
-	font-size: var(--fs-kbd);
-	text-align: center;
-}
-
-.picker-first {
-	background: var(--bg-3);
-}
-
-.picker-first .tile {
-	box-shadow:
-		var(--tile-inset),
-		0 0 0 2px var(--accent);
-}
-
-.picker-tile[aria-disabled="true"] {
-	cursor: not-allowed;
-}
-
-/* The design fades the whole cell; fading the words with it would leave the
-   one thing a taken tile has to say — where the hero already sits — below any
-   readable contrast. Only the artwork dims. */
-.picker-tile[aria-disabled="true"] .tile {
-	opacity: 0.35;
-}
-
-.picker-tile[aria-disabled="true"] .picker-name {
-	color: var(--text-5);
-}
-
-.picker-used {
-	color: var(--accent);
-}
-
-.picker-hints {
-	display: flex;
-	flex-wrap: wrap;
-	gap: var(--sp-5);
-	padding: var(--sp-3) var(--sp-6);
-	border-top: 1px solid var(--border-0);
-	color: var(--text-5);
-	font-family: var(--font-mono);
-	font-size: var(--fs-kbd);
-}
-
-.confirm {
-	width: min(320px, 100% - var(--sp-8));
-	padding: var(--sp-7);
-}
-
-.confirm h2 {
-	margin-bottom: var(--sp-2);
-	font-size: var(--fs-body);
-	font-weight: 600;
-}
-
-.confirm p {
-	margin-bottom: var(--sp-6);
-	color: var(--text-4);
-	font-size: var(--fs-meta);
-}
-
-.confirm-actions {
-	display: flex;
-	gap: var(--sp-3);
-	justify-content: flex-end;
-}
-
-.confirm-actions button {
-	padding: var(--sp-2) var(--sp-5);
-	border: 1px solid var(--border-3);
-	border-radius: var(--r-control);
-	background: var(--bg-2);
-	color: var(--text-2);
-	font-family: var(--font-ui);
-	font-size: var(--fs-control);
-	font-weight: 600;
-}
-
-/* The design tints this button with its own colour rather than a new one, so
-   the tint is mixed from the token instead of restating the palette here. */
-.confirm-actions .danger {
-	border-color: color-mix(in srgb, var(--dire) 45%, transparent);
-	background: color-mix(in srgb, var(--dire) 8%, transparent);
-	color: var(--dire);
-}
-
 /* undo toast — the transient half of the undo window (screens-spec §4) */
 
 .toast {
@@ -910,34 +687,4 @@ dialog::backdrop {
 		color: var(--text-4);
 		font-size: var(--fs-kbd);
 	}
-
-	/* Full-screen picker: the search field has to be reachable with a thumb
-	   and the grid still has to show whole rows (screens-spec §3). */
-	.picker {
-		display: flex;
-		flex-direction: column;
-		width: 100%;
-		max-width: none;
-		height: 100%;
-		max-height: none;
-		margin: 0;
-		border: 0;
-		border-radius: 0;
-	}
-
-	/* The grid is the only part that may shrink, so the hint bar stays on
-	   screen and the heroes scroll inside instead of being clipped away. */
-	.picker-grid {
-		grid-template-columns: repeat(4, 1fr);
-		min-height: 0;
-		max-height: none;
-	}
-
-	.picker-hints {
-		margin-top: auto;
-	}
-
-	.picker-hints {
-		gap: var(--sp-4);
-	}
 }
diff --git a/src/app/styles/base.css b/src/app/styles/base.css
index d2aa38a..bf5e65f 100644
--- a/src/app/styles/base.css
+++ b/src/app/styles/base.css
@@ -18,3 +18,17 @@ body {
 	outline: 2px solid var(--accent);
 	outline-offset: 2px;
 }
+
+/* The picker and the reset dialog are both bare <dialog>s, so the panel they
+   share has no class to scope and stays here rather than in either module. */
+dialog {
+	border: 1px solid var(--border-2);
+	border-radius: var(--r-panel);
+	background: var(--bg-1);
+	color: var(--text-1);
+	box-shadow: var(--shadow-modal);
+}
+
+dialog::backdrop {
+	background: var(--backdrop);
+}
diff --git a/src/css.d.ts b/src/css.d.ts
new file mode 100644
index 0000000..7f5e829
--- /dev/null
+++ b/src/css.d.ts
@@ -0,0 +1,16 @@
+// Bun's bundler loads stylesheets; TypeScript has to be told they resolve.
+//
+// The order is load-bearing. Both patterns match `x.module.css`, and the one
+// declared first wins, so `*.css` above would give a module's class mapping the
+// type of a plain stylesheet and every read off it would fail to compile.
+declare module "*.module.css" {
+	// The bundler builds the mapping, so its keys exist only after it runs —
+	// the type is the shape, not the names.
+	const classes: Record<string, string>;
+	export default classes;
+}
+
+// A plain stylesheet is imported for its side effect and exports nothing.
+declare module "*.css" {
+	export {};
+}