From 8bb08291f12ab075a32982377de5f60867bdfb56 Mon Sep 17 00:00:00 2001
From: etodanik <dannypovolotski@gmail.com>
Date: Sat, 7 Nov 2026 01:26:11 +0900
Subject: [PATCH 1/2] refactor(web): move styles into per-component CSS modules

Every component's styles now live in a CSS module beside it, with exact
types generated by typed-css-modules, so a misspelt class fails the
typecheck. A look used in more than one place is a shared component that
owns its whole look and takes variants as data-* attributes, rather than
a class several components share. styles.css keeps only what is global.

Settings moves into pages/settings/, and Storybook is set up with stories
for the components and screens.
---
 .gitignore                                    |    4 +
 apps/web/.storybook/main.ts                   |    8 +
 apps/web/.storybook/preview.tsx               |   55 +
 apps/web/AGENTS.md                            |   25 +
 apps/web/package.json                         |   13 +-
 apps/web/src/App.module.css                   |  486 +++
 apps/web/src/App.tsx                          |   56 +-
 apps/web/src/components.module.css            |  138 +
 apps/web/src/components.stories.tsx           |  159 +
 apps/web/src/components.tsx                   |  175 +-
 apps/web/src/composer.module.css              |  164 +
 apps/web/src/composer.tsx                     |   37 +
 apps/web/src/css-modules-preload.ts           |   17 +
 apps/web/src/css-modules.test.ts              |   65 +
 apps/web/src/dictation.module.css             |   95 +
 apps/web/src/dictation.tsx                    |   11 +-
 .../src/{flourish.css => flourish.module.css} |   70 +-
 apps/web/src/flourish.stories.tsx             |   19 +
 apps/web/src/flourish.tsx                     |   44 +-
 apps/web/src/main.tsx                         |   11 +-
 apps/web/src/markdown.module.css              |  204 ++
 apps/web/src/markdown.stories.tsx             |   43 +
 apps/web/src/markdown.tsx                     |   21 +-
 apps/web/src/pages/approval-fields.module.css |   99 +
 apps/web/src/pages/approval-fields.tsx        |  130 +
 apps/web/src/pages/invite-accept.tsx          |   40 +-
 apps/web/src/pages/model-setup.module.css     |   57 +
 apps/web/src/pages/model-setup.tsx            |   25 +-
 apps/web/src/pages/profile-select.test.tsx    |    2 +-
 apps/web/src/pages/profile-select.tsx         |    4 +-
 apps/web/src/pages/project-cover.module.css   |   58 +
 apps/web/src/pages/project-cover.tsx          |    6 +-
 apps/web/src/pages/project-library.css        |  218 --
 apps/web/src/pages/project-library.module.css |  141 +
 apps/web/src/pages/project-library.tsx        |   31 +-
 apps/web/src/pages/project-menu.module.css    |   37 +
 apps/web/src/pages/project-menu.tsx           |   36 +-
 .../{home-layout.css => projects.module.css}  |   46 +-
 apps/web/src/pages/projects.tsx               |   38 +-
 apps/web/src/pages/settings-layout.css        |  312 --
 .../pages/settings/collaborators.module.css   |   12 +
 .../pages/{ => settings}/collaborators.tsx    |  112 +-
 .../settings/custom-providers.module.css      |  123 +
 .../pages/{ => settings}/custom-providers.tsx |  171 +-
 .../src/pages/settings/profiles.module.css    |   22 +
 .../web/src/pages/{ => settings}/profiles.tsx |   91 +-
 .../pages/settings/provider-form.module.css   |   17 +
 apps/web/src/pages/settings/provider-form.tsx |   18 +
 .../pages/settings/provider-logos.stories.tsx |   41 +
 .../pages/{ => settings}/provider-logos.tsx   |    9 +-
 .../pages/{ => settings}/providers.test.ts    |    8 +-
 .../src/pages/{ => settings}/providers.tsx    |   58 +-
 .../pages/settings/settings-row.module.css    |   97 +
 .../pages/settings/settings-row.stories.tsx   |   50 +
 .../src/pages/settings/settings-row.test.tsx  |   32 +
 apps/web/src/pages/settings/settings-row.tsx  |   96 +
 .../settings/settings-section.module.css      |   22 +
 .../src/pages/settings/settings-section.tsx   |   20 +
 .../src/pages/settings/settings.module.css    |   46 +
 .../web/src/pages/{ => settings}/settings.tsx |  349 +-
 .../settings/workspace-approvals.module.css   |    5 +
 .../pages/settings/workspace-approvals.tsx    |  189 ++
 apps/web/src/pages/workspace-layout.css       |  625 ----
 apps/web/src/pages/workspace.tsx              |    3 -
 .../approaches-comparison.module.css          |   63 +
 .../pages/workspace/approaches-comparison.tsx |   26 +-
 .../approval-package-preview.module.css       |  165 +
 .../approval-package-preview.test.tsx         |    2 +-
 .../workspace/approval-package-preview.tsx    |   83 +-
 .../approval-package-slides.module.css        |  212 ++
 .../workspace/approval-package-slides.tsx     |   57 +-
 .../workspace/approval-rounds.module.css      |  452 +++
 .../pages/workspace/approval-rounds.test.tsx  |   53 +-
 .../src/pages/workspace/approval-rounds.tsx   |  758 ++---
 .../pages/workspace/artifact-pane.module.css  |  196 ++
 .../pages/workspace/artifact-pane.stories.tsx |  137 +
 .../pages/workspace/artifact-pane.test.tsx    |   29 +
 .../web/src/pages/workspace/artifact-pane.tsx |   25 +-
 .../workspace/comparison-view.module.css      |   47 +
 .../workspace/comparison-view.stories.tsx     |   28 +
 .../src/pages/workspace/comparison-view.tsx   |    9 +-
 .../workspace/deliverable-block.module.css    |   84 +
 .../src/pages/workspace/deliverable-block.tsx |   69 +-
 .../workspace/design-concepts.module.css      |   33 +
 .../src/pages/workspace/design-concepts.tsx   |   77 +-
 .../pages/workspace/design-preview.module.css |   21 +
 .../src/pages/workspace/design-preview.tsx    |   26 +-
 .../pages/workspace/design-themes.module.css  |   73 +
 .../web/src/pages/workspace/design-themes.tsx |   29 +-
 .../pages/workspace/device-preview.module.css |   57 +
 .../workspace/device-preview.stories.tsx      |   46 +
 .../src/pages/workspace/device-preview.tsx    |   28 +-
 .../src/pages/workspace/diff-pane.module.css  |   10 +
 .../src/pages/workspace/diff-pane.stories.tsx |   26 +
 apps/web/src/pages/workspace/diff-pane.tsx    |   12 +-
 .../workspace/document-decision.module.css    |  153 +
 .../workspace/document-decision.stories.tsx   |   68 +
 .../src/pages/workspace/document-decision.tsx |   36 +-
 .../web/src/pages/workspace/document-tips.tsx |   10 +-
 .../src/pages/workspace/gui-frame.module.css  |   27 +
 apps/web/src/pages/workspace/gui-frame.tsx    |   50 +-
 apps/web/src/pages/workspace/index.module.css |  178 ++
 apps/web/src/pages/workspace/index.tsx        |  177 +-
 .../src/pages/workspace/live-app.module.css   |  214 ++
 apps/web/src/pages/workspace/live-app.tsx     |   86 +-
 .../pages/workspace/mockup-tweaks.module.css  |   81 +
 .../web/src/pages/workspace/mockup-tweaks.tsx |   67 +-
 .../src/pages/workspace/next-step.module.css  |   24 +
 apps/web/src/pages/workspace/next-step.tsx    |    7 +-
 .../src/pages/workspace/pane-bar.module.css   |  128 +
 .../src/pages/workspace/pane-bar.stories.tsx  |   61 +
 apps/web/src/pages/workspace/pane-bar.tsx     |   35 +-
 apps/web/src/pages/workspace/pane-classes.ts  |   10 -
 .../pages/workspace/passage-note.module.css   |   20 +
 .../pages/workspace/passage-note.stories.tsx  |   36 +
 apps/web/src/pages/workspace/passage-note.tsx |   11 +-
 .../pages/workspace/persistent-workspace.css  | 1349 --------
 .../workspace/preview-interactions.test.tsx   |   37 +
 .../pages/workspace/print-document.module.css |   46 +
 .../web/src/pages/workspace/print-document.ts |   14 +-
 ...ons-card.css => questions-card.module.css} |   60 +-
 .../workspace/questions-card.stories.tsx      |   92 +
 .../pages/workspace/questions-card.test.tsx   |    2 +-
 .../src/pages/workspace/questions-card.tsx    |   71 +-
 .../pages/workspace/room-skeleton.module.css  |   39 +
 .../pages/workspace/room-skeleton.stories.tsx |   19 +
 .../web/src/pages/workspace/room-skeleton.tsx |   33 +-
 .../src/pages/workspace/sketching.module.css  |  107 +
 apps/web/src/pages/workspace/sketching.tsx    |   73 +
 .../pages/workspace/source-link.module.css    |   32 +
 apps/web/src/pages/workspace/source-link.tsx  |   26 +
 .../workspace/specialist-updates.module.css   |   31 +
 .../pages/workspace/specialist-updates.tsx    |   13 +-
 apps/web/src/pages/workspace/stage-chrome.css |   20 -
 .../src/pages/workspace/stage-view.module.css |   14 +
 apps/web/src/pages/workspace/stage-view.tsx   |    7 +
 .../src/pages/workspace/transcript.module.css |   72 +
 .../pages/workspace/transcript.stories.tsx    |  142 +
 .../src/pages/workspace/transcript.test.tsx   |   12 +-
 apps/web/src/pages/workspace/transcript.tsx   |   10 +-
 .../src/pages/workspace/typed-yes.module.css  |   38 +
 .../src/pages/workspace/typed-yes.stories.tsx |   33 +
 apps/web/src/pages/workspace/typed-yes.tsx    |    8 +-
 apps/web/src/pages/workspace/user-manual.tsx  |    1 +
 apps/web/src/pages/workspace/version-menu.tsx |    5 +-
 .../pages/workspace/work-unit-view.module.css |   32 +
 .../src/pages/workspace/work-unit-view.tsx    |   11 +-
 apps/web/src/styles.css                       | 2839 +----------------
 apps/web/src/workspace-menu.module.css        |   78 +
 apps/web/src/workspace-menu.tsx               |   19 +-
 apps/web/tsconfig.json                        |    2 +-
 bun.lock                                      |  380 ++-
 bunfig.toml                                   |    3 +
 package.json                                  |    2 +-
 154 files changed, 8434 insertions(+), 7166 deletions(-)
 create mode 100644 apps/web/.storybook/main.ts
 create mode 100644 apps/web/.storybook/preview.tsx
 create mode 100644 apps/web/src/App.module.css
 create mode 100644 apps/web/src/components.module.css
 create mode 100644 apps/web/src/components.stories.tsx
 create mode 100644 apps/web/src/composer.module.css
 create mode 100644 apps/web/src/composer.tsx
 create mode 100644 apps/web/src/css-modules-preload.ts
 create mode 100644 apps/web/src/css-modules.test.ts
 create mode 100644 apps/web/src/dictation.module.css
 rename apps/web/src/{flourish.css => flourish.module.css} (71%)
 create mode 100644 apps/web/src/flourish.stories.tsx
 create mode 100644 apps/web/src/markdown.module.css
 create mode 100644 apps/web/src/markdown.stories.tsx
 create mode 100644 apps/web/src/pages/approval-fields.module.css
 create mode 100644 apps/web/src/pages/approval-fields.tsx
 create mode 100644 apps/web/src/pages/model-setup.module.css
 create mode 100644 apps/web/src/pages/project-cover.module.css
 delete mode 100644 apps/web/src/pages/project-library.css
 create mode 100644 apps/web/src/pages/project-library.module.css
 create mode 100644 apps/web/src/pages/project-menu.module.css
 rename apps/web/src/pages/{home-layout.css => projects.module.css} (57%)
 delete mode 100644 apps/web/src/pages/settings-layout.css
 create mode 100644 apps/web/src/pages/settings/collaborators.module.css
 rename apps/web/src/pages/{ => settings}/collaborators.tsx (78%)
 create mode 100644 apps/web/src/pages/settings/custom-providers.module.css
 rename apps/web/src/pages/{ => settings}/custom-providers.tsx (91%)
 create mode 100644 apps/web/src/pages/settings/profiles.module.css
 rename apps/web/src/pages/{ => settings}/profiles.tsx (91%)
 create mode 100644 apps/web/src/pages/settings/provider-form.module.css
 create mode 100644 apps/web/src/pages/settings/provider-form.tsx
 create mode 100644 apps/web/src/pages/settings/provider-logos.stories.tsx
 rename apps/web/src/pages/{ => settings}/provider-logos.tsx (93%)
 rename apps/web/src/pages/{ => settings}/providers.test.ts (87%)
 rename apps/web/src/pages/{ => settings}/providers.tsx (91%)
 create mode 100644 apps/web/src/pages/settings/settings-row.module.css
 create mode 100644 apps/web/src/pages/settings/settings-row.stories.tsx
 create mode 100644 apps/web/src/pages/settings/settings-row.test.tsx
 create mode 100644 apps/web/src/pages/settings/settings-row.tsx
 create mode 100644 apps/web/src/pages/settings/settings-section.module.css
 create mode 100644 apps/web/src/pages/settings/settings-section.tsx
 create mode 100644 apps/web/src/pages/settings/settings.module.css
 rename apps/web/src/pages/{ => settings}/settings.tsx (63%)
 create mode 100644 apps/web/src/pages/settings/workspace-approvals.module.css
 create mode 100644 apps/web/src/pages/settings/workspace-approvals.tsx
 delete mode 100644 apps/web/src/pages/workspace-layout.css
 delete mode 100644 apps/web/src/pages/workspace.tsx
 create mode 100644 apps/web/src/pages/workspace/approaches-comparison.module.css
 create mode 100644 apps/web/src/pages/workspace/approval-package-preview.module.css
 create mode 100644 apps/web/src/pages/workspace/approval-package-slides.module.css
 create mode 100644 apps/web/src/pages/workspace/approval-rounds.module.css
 create mode 100644 apps/web/src/pages/workspace/artifact-pane.module.css
 create mode 100644 apps/web/src/pages/workspace/artifact-pane.stories.tsx
 create mode 100644 apps/web/src/pages/workspace/comparison-view.module.css
 create mode 100644 apps/web/src/pages/workspace/comparison-view.stories.tsx
 create mode 100644 apps/web/src/pages/workspace/deliverable-block.module.css
 create mode 100644 apps/web/src/pages/workspace/design-concepts.module.css
 create mode 100644 apps/web/src/pages/workspace/design-preview.module.css
 create mode 100644 apps/web/src/pages/workspace/design-themes.module.css
 create mode 100644 apps/web/src/pages/workspace/device-preview.module.css
 create mode 100644 apps/web/src/pages/workspace/device-preview.stories.tsx
 create mode 100644 apps/web/src/pages/workspace/diff-pane.module.css
 create mode 100644 apps/web/src/pages/workspace/diff-pane.stories.tsx
 create mode 100644 apps/web/src/pages/workspace/document-decision.module.css
 create mode 100644 apps/web/src/pages/workspace/document-decision.stories.tsx
 create mode 100644 apps/web/src/pages/workspace/gui-frame.module.css
 create mode 100644 apps/web/src/pages/workspace/index.module.css
 create mode 100644 apps/web/src/pages/workspace/live-app.module.css
 create mode 100644 apps/web/src/pages/workspace/mockup-tweaks.module.css
 create mode 100644 apps/web/src/pages/workspace/next-step.module.css
 create mode 100644 apps/web/src/pages/workspace/pane-bar.module.css
 create mode 100644 apps/web/src/pages/workspace/pane-bar.stories.tsx
 delete mode 100644 apps/web/src/pages/workspace/pane-classes.ts
 create mode 100644 apps/web/src/pages/workspace/passage-note.module.css
 create mode 100644 apps/web/src/pages/workspace/passage-note.stories.tsx
 delete mode 100644 apps/web/src/pages/workspace/persistent-workspace.css
 create mode 100644 apps/web/src/pages/workspace/print-document.module.css
 rename apps/web/src/pages/workspace/{questions-card.css => questions-card.module.css} (72%)
 create mode 100644 apps/web/src/pages/workspace/questions-card.stories.tsx
 create mode 100644 apps/web/src/pages/workspace/room-skeleton.module.css
 create mode 100644 apps/web/src/pages/workspace/room-skeleton.stories.tsx
 create mode 100644 apps/web/src/pages/workspace/sketching.module.css
 create mode 100644 apps/web/src/pages/workspace/sketching.tsx
 create mode 100644 apps/web/src/pages/workspace/source-link.module.css
 create mode 100644 apps/web/src/pages/workspace/source-link.tsx
 create mode 100644 apps/web/src/pages/workspace/specialist-updates.module.css
 delete mode 100644 apps/web/src/pages/workspace/stage-chrome.css
 create mode 100644 apps/web/src/pages/workspace/stage-view.module.css
 create mode 100644 apps/web/src/pages/workspace/stage-view.tsx
 create mode 100644 apps/web/src/pages/workspace/transcript.module.css
 create mode 100644 apps/web/src/pages/workspace/transcript.stories.tsx
 create mode 100644 apps/web/src/pages/workspace/typed-yes.module.css
 create mode 100644 apps/web/src/pages/workspace/typed-yes.stories.tsx
 create mode 100644 apps/web/src/pages/workspace/work-unit-view.module.css
 create mode 100644 apps/web/src/workspace-menu.module.css
 create mode 100644 bunfig.toml

diff --git a/.gitignore b/.gitignore
index 3d6679c5..67239a72 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,6 +1,7 @@
 # Dependencies and build output
 node_modules/
 dist/
+storybook-static/
 coverage/
 *.tsbuildinfo
 .cache/
@@ -31,3 +32,6 @@ test-results/
 .DS_Store
 .claude/
 .amp/
+
+# Generated from each CSS module by `bun run --cwd apps/web css-types`
+*.module.css.d.ts
diff --git a/apps/web/.storybook/main.ts b/apps/web/.storybook/main.ts
new file mode 100644
index 00000000..1da4bbe9
--- /dev/null
+++ b/apps/web/.storybook/main.ts
@@ -0,0 +1,8 @@
+import { defineMain } from "@storybook/react-vite/node";
+
+// Storybook reads apps/web/vite.config.ts, so stories build with the same
+// plugins the interface does.
+export default defineMain({
+  framework: "@storybook/react-vite",
+  stories: ["../src/**/*.stories.tsx"],
+});
diff --git a/apps/web/.storybook/preview.tsx b/apps/web/.storybook/preview.tsx
new file mode 100644
index 00000000..618ff58d
--- /dev/null
+++ b/apps/web/.storybook/preview.tsx
@@ -0,0 +1,55 @@
+import { useEffect, type ReactNode } from "react";
+import { ThemeProvider, useTheme } from "@corbits/react-ui";
+import type { Preview } from "@storybook/react-vite";
+import { Toaster } from "sonner";
+// The same order main.tsx imports them in: the library's sheet, then ours.
+import "@corbits/react-ui/styles.css";
+import "../src/styles.css";
+
+type Mode = "light" | "dark";
+
+// Follows the toolbar instead of the stored preference, so a story renders
+// in the mode the reviewer picked.
+function Mode({ mode, children }: { mode: Mode; children: ReactNode }) {
+  const { setMode, resolvedMode } = useTheme();
+  useEffect(() => setMode(mode), [mode, setMode]);
+  return (
+    <>
+      {children}
+      <Toaster theme={resolvedMode} richColors closeButton />
+    </>
+  );
+}
+
+const preview: Preview = {
+  globalTypes: {
+    mode: {
+      description: "Light or dark theme",
+      toolbar: {
+        title: "Theme",
+        icon: "mirror",
+        items: [
+          { value: "light", title: "Light" },
+          { value: "dark", title: "Dark" },
+        ],
+        dynamicTitle: true,
+      },
+    },
+  },
+  initialGlobals: { mode: "light" },
+  decorators: [
+    (Story, context) => (
+      <ThemeProvider storageKey="builder-storybook-theme" defaultMode="light">
+        <Mode mode={context.globals["mode"] === "dark" ? "dark" : "light"}>
+          <Story />
+        </Mode>
+      </ThemeProvider>
+    ),
+  ],
+  parameters: {
+    layout: "padded",
+    controls: { expanded: true },
+  },
+};
+
+export default preview;
diff --git a/apps/web/AGENTS.md b/apps/web/AGENTS.md
index 0b13ab85..9f088d45 100644
--- a/apps/web/AGENTS.md
+++ b/apps/web/AGENTS.md
@@ -18,6 +18,31 @@ like what is already there, and extends it rather than standing beside it.
   maintainers decide whether it moves.
 - Wording lives in the interface's config.
 
+## Styles
+
+- A component's styles live in a CSS module beside it (`pane-bar.tsx`,
+  `pane-bar.module.css`), imported as `styles`, with camelCase class names.
+  `styles.css` holds only what is global: fonts, tokens, element defaults,
+  overrides of the library that apply everywhere, and shared keyframes.
+- Each module has exact types, generated by `bun run css-types` (the `dev`
+  script keeps them current and `typecheck` regenerates them), so
+  `styles.pane` is a `string` and a misspelt class is a type error. Join
+  classes with `clsx` only when one is conditional.
+- A look used in more than one place is a component, such as `InlineNote`,
+  `Field`, `Fault` or `Banner`, not a class two components share. Shared
+  components live in `components.tsx`, or in a file of their own when they
+  belong to one area.
+- A shared component owns its whole look and takes no `className`. Variants
+  are props, rendered as `data-*` attributes (`data-tone="error"`, or an
+  empty `data-pill=""` for a flag); the element it renders is an `as` prop.
+- Every shared component's root carries a `data-slot` naming it. A parent
+  positions it from its own module through that attribute, such as
+  `.notes > [data-slot="inline-note"]` for margin, size or placement, never
+  through another module's class, and never by restyling its inside.
+- The library's own classes, such as `.dark`, go in `:global(...)`, and a
+  global keyframe in `global(...)`: `animation: global(fade-in) 200ms`.
+- Code and tests find elements by `data-*` attributes, never by a class name.
+
 ## Every artifact kind is a first-class document
 
 A new kind (a sheet, a deck, a diagram) is integrated everywhere a document
diff --git a/apps/web/package.json b/apps/web/package.json
index 6f545fe0..003025b3 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -7,8 +7,13 @@
   "author": "Sawyer Cutler <sawyer@dirtroad.dev>",
   "type": "module",
   "scripts": {
-    "dev": "vite",
-    "build": "vite build"
+    "dev": "bun run --parallel css-types:watch serve",
+    "serve": "vite",
+    "build": "vite build",
+    "css-types": "tcm -s -p \"src/**/*.module.css\"",
+    "css-types:watch": "tcm -s -w -p \"src/**/*.module.css\"",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build -o storybook-static"
   },
   "dependencies": {
     "@corbits-builder/client": "workspace:*",
@@ -23,6 +28,7 @@
     "@tanstack/react-query": "5.104.1",
     "@tanstack/react-query-persist-client": "5.104.1",
     "arktype": "catalog:",
+    "clsx": "2.1.1",
     "diff": "9.0.0",
     "idb-keyval": "6.2.2",
     "jszip": "3.10.2",
@@ -32,9 +38,12 @@
     "sonner": "2.0.8"
   },
   "devDependencies": {
+    "@storybook/react-vite": "11.0.0-beta.0",
     "@types/react": "19.3.0",
     "@types/react-dom": "19.3.0",
     "@vitejs/plugin-react": "5.2.0",
+    "storybook": "11.0.0-beta.0",
+    "typed-css-modules": "0.9.1",
     "typescript": "5.9.3",
     "vite": "6.4.5"
   }
diff --git a/apps/web/src/App.module.css b/apps/web/src/App.module.css
new file mode 100644
index 00000000..4fa59f96
--- /dev/null
+++ b/apps/web/src/App.module.css
@@ -0,0 +1,486 @@
+/* ---- App shell: a rail on the left, a filling canvas beside it ---- */
+
+.app {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  grid-template-rows: minmax(0, 1fr);
+  /* The window is the app. Nothing scrolls but the one region meant to. */
+  height: 100vh;
+  overflow: hidden;
+  background: var(--wb-frame);
+}
+
+/* A grid item defaults to min-content width, so anything wide inside — a
+   table, the stage timeline — pushes the whole page sideways instead of
+   scrolling within its own panel. */
+.app > * {
+  min-width: 0;
+}
+
+/* ---- Rail: quiet type on the frame, no rules or boxes of its own ----
+   32px rows with 16px icons on one left edge; the current row is lifted
+   onto the page surface rather than tinted. */
+
+.sidebar {
+  --rail-hover: color-mix(in srgb, var(--wb-foreground) 5%, transparent);
+  --rail-press: color-mix(in srgb, var(--wb-foreground) 8%, transparent);
+  grid-row: 1 / -1;
+  width: 15rem;
+  padding: 10px 8px 8px;
+  border-right: 0;
+  background: transparent;
+  transition: width 200ms cubic-bezier(0.2, 0, 0, 1);
+}
+
+.sidebar[data-collapsed="true"] {
+  width: 3.5rem;
+}
+
+.sidebar [data-slot="sidebar-header"] {
+  min-height: 40px;
+  gap: 8px;
+  margin-bottom: 8px;
+  padding: 0 2px 0 8px;
+  border: 0;
+}
+
+.sidebar [data-slot="sidebar-collapse-toggle"] {
+  width: 32px;
+  height: 32px;
+  border-radius: var(--radius-md);
+  color: var(--wb-muted-foreground);
+  transition:
+    background-color 120ms ease,
+    color 120ms ease;
+}
+
+.sidebar [data-slot="sidebar-collapse-toggle"]:hover {
+  background: var(--rail-hover);
+  color: var(--wb-foreground);
+}
+
+.sidebar [data-slot="sidebar-content"] {
+  padding: 0;
+}
+
+.list {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+
+/* The projects in progress sit under a thin rule; their label is for assistive tech only. */
+.sidebar [data-slot="sidebar-section"].projects {
+  margin-top: 12px;
+  padding: 12px 0 0;
+  border-top: 1px solid var(--wb-border);
+}
+
+.sidebar [data-slot="sidebar-section"].projects > p {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+.sidebar [data-slot="sidebar-section"] > p {
+  margin: 0 0 3px;
+  padding: 0 8px 4px;
+  font-size: 0.75rem;
+  font-weight: 700;
+  letter-spacing: 0;
+  text-transform: none;
+}
+
+.sidebar [data-slot="sidebar-section"] > ul {
+  gap: 1px;
+}
+
+/* SidebarItem puts all children in one inline label, so the badge needs its own row to centre and space against the text. */
+.whatsNewItem {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  vertical-align: middle;
+}
+
+.sidebar .initial {
+  width: 18px;
+  height: 18px;
+  border-radius: 5px;
+  background: color-mix(in srgb, var(--wb-foreground) 7%, transparent);
+  color: inherit;
+  font-size: 0.625rem;
+}
+
+.sidebar [aria-current] .initial {
+  background: var(--wb-foreground);
+  color: var(--wb-background);
+}
+
+/* Every row's highlight spans the rail, whatever its label's length, with
+   the main pane's corner radius. A project row's highlight is its inner
+   frame, which holds the name and the options menu together. */
+.sidebar li {
+  display: block;
+  width: 100%;
+}
+
+.sidebar [data-slot="sidebar-item"],
+.sidebar [data-slot="sidebar-item-row"] > div {
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 32px;
+  border-radius: var(--radius-panel);
+  background: transparent;
+  color: var(--wb-muted-foreground);
+  font-size: 0.84375rem;
+  font-weight: 500;
+  line-height: 1.25;
+  transition:
+    background-color 120ms ease,
+    color 120ms ease,
+    box-shadow 120ms ease;
+}
+
+.sidebar [data-slot="sidebar-item"] {
+  display: flex;
+  gap: 10px;
+  padding: 5px 8px;
+  border: 0;
+  font: inherit;
+  font-size: 0.84375rem;
+  font-weight: 500;
+  text-align: left;
+  cursor: pointer;
+}
+
+.sidebar [data-slot="sidebar-item-row"] > div {
+  gap: 0;
+  padding-right: 4px;
+}
+
+.sidebar [data-slot="sidebar-item-row"] > div > button:first-child {
+  gap: 10px;
+  padding: 5px 8px;
+}
+
+.sidebar [data-slot="sidebar-item"] > span:first-child {
+  color: var(--wb-muted-foreground);
+  transition: color 120ms ease;
+}
+
+.sidebar [data-slot="sidebar-item"] svg {
+  width: 16px;
+  height: 16px;
+  stroke-width: 1.75;
+}
+
+.sidebar [data-slot="sidebar-item"]:hover,
+.sidebar [data-slot="sidebar-item-row"] > div:hover {
+  background: var(--rail-hover);
+  color: var(--wb-foreground);
+}
+
+.sidebar [data-slot="sidebar-item"]:hover > span:first-child {
+  color: var(--wb-foreground);
+}
+
+.sidebar [data-slot="sidebar-item"]:active,
+.sidebar [data-slot="sidebar-item-row"] > div:active {
+  background: var(--rail-press);
+}
+
+.sidebar [data-slot="sidebar-item"][aria-current="page"],
+.sidebar [data-slot="sidebar-item-row"] > div:has(> [aria-current]) {
+  background: var(--wb-background);
+  box-shadow: var(--wb-shadow);
+  color: var(--wb-foreground);
+  font-weight: 600;
+}
+
+.sidebar [data-slot="sidebar-item"][aria-current="page"] > span:first-child {
+  color: var(--wb-foreground);
+}
+
+.sidebar [data-slot="sidebar-item"]:focus-visible,
+.sidebar [data-slot="sidebar-item-row"] button:focus-visible,
+.sidebar [data-slot="sidebar-collapse-toggle"]:focus-visible {
+  outline: 2px solid var(--wb-ring);
+  outline-offset: -2px;
+}
+
+.sidebar [data-slot="sidebar-footer"] {
+  margin-top: 6px;
+  padding: 8px 0 0;
+  border-top: 1px solid color-mix(in srgb, var(--wb-border) 60%, transparent);
+}
+
+/* Collapsed: the brand mark over its toggle, and every row a centred
+   36px square, so the icon column reads as deliberate rather than clipped. */
+.sidebar[data-collapsed="true"] [data-slot="sidebar-header"] {
+  flex-direction: column;
+  justify-content: center;
+  gap: 6px;
+  padding: 4px 0;
+}
+
+.sidebar[data-collapsed="true"] [data-slot="sidebar-item"],
+.sidebar[data-collapsed="true"] [data-slot="sidebar-item-row"] > div {
+  width: 36px;
+  min-height: 36px;
+  margin: 0 auto;
+  padding: 0;
+}
+
+.sidebar[data-collapsed="true"]
+  [data-slot="sidebar-item-row"]
+  > div
+  > button:first-child {
+  justify-content: center;
+  gap: 0;
+  padding: 0;
+}
+
+/* The one call to action in the rail, in the primary colour. */
+.sidebar [data-slot="sidebar-item"].newProject,
+.sidebar [data-slot="sidebar-item"].newProject > span:first-child {
+  color: var(--primary-emphasis, var(--wb-primary));
+}
+
+.sidebar [data-slot="sidebar-item"].newProject {
+  margin-bottom: 4px;
+  background: color-mix(in srgb, var(--wb-primary) 10%, transparent);
+  box-shadow: inset 0 0 0 1px
+    color-mix(in srgb, var(--wb-primary) 45%, transparent);
+  font-weight: 600;
+}
+
+.sidebar [data-slot="sidebar-item"].newProject:hover {
+  background: color-mix(in srgb, var(--wb-primary) 16%, transparent);
+}
+
+.sidebar [data-slot="sidebar-item"].newProject[aria-current="page"] {
+  background: color-mix(in srgb, var(--wb-primary) 18%, transparent);
+  box-shadow: inset 0 0 0 1px var(--wb-primary);
+}
+
+/* A project row's options: the library reveals the ellipsis while the row
+   is pointed at or focused; an open menu keeps it up. */
+.sidebar .rowMenu {
+  width: 24px;
+  height: 24px;
+  color: var(--wb-muted-foreground);
+}
+
+.sidebar
+  [data-slot="sidebar-item-row"]
+  > div
+  > span:has(> .rowMenu[data-state="open"]) {
+  opacity: 1;
+}
+
+.sidebar .rowMenu:hover,
+.sidebar .rowMenu[data-state="open"] {
+  background: var(--rail-press);
+  color: var(--wb-foreground);
+}
+
+.sidebar[data-collapsed="true"] [data-slot="sidebar-item-row"] > div > span {
+  display: none;
+}
+
+.sidebar[data-collapsed="true"]
+  [data-slot="sidebar-item-row"]
+  button
+  > span:last-child {
+  flex: none;
+  width: 0;
+}
+
+/* ---- Canvas ---- */
+
+.canvas {
+  display: flex;
+  margin: var(--space-2) var(--space-2) var(--space-2) 0;
+  border-radius: var(--radius-panel);
+  box-shadow: var(--wb-pane-shadow);
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  background: var(--wb-pane);
+}
+
+/* Everything beside the rail. Scrolls, except where a surface fills instead. */
+.canvasBody {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: var(--space-4) var(--space-5) var(--space-6);
+  display: grid;
+  gap: var(--space-2);
+  align-content: start;
+  max-width: var(--section-max);
+  width: 100%;
+}
+
+.canvasBody[data-fill] {
+  background: var(--wb-background);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  padding: 0;
+  max-width: none;
+}
+
+/* The conversation log is the room's scrollport. A content-sized room lets
+   the settle spacer's height feed back into that measurement, and the page
+   grows on every resize. */
+.canvasBody[data-fill]:has(> [data-slot="stage-view"]) {
+  overflow: hidden;
+}
+
+.canvasBody[data-fill] > * {
+  flex: 1;
+  min-height: 0;
+  gap: 0;
+}
+
+.canvasBody[data-fill] > [data-slot="stage-view"] {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.canvasBody[data-fill] > [data-slot="banner"] {
+  flex: none;
+  margin: var(--space-3) var(--space-4) 0;
+}
+
+.canvasBody:not([data-fill]) > [data-slot="card"] {
+  background: var(--wb-background);
+  box-shadow: var(--wb-shadow);
+}
+
+.canvasBody[data-fill] > [data-slot="card"] {
+  background: var(--wb-background);
+  border: 0;
+  border-radius: 0;
+}
+
+/* The home page runs edge to edge; its banner keeps the page's inset. */
+.canvasBody:has(> [data-slot="home-page"]) {
+  padding: 0;
+  max-width: none;
+}
+
+.canvasBody:has(> [data-slot="home-page"]) > [data-slot="banner"] {
+  margin: var(--space-4) var(--space-6) 0;
+}
+
+/* Phone widths: the rail stays an icon column, and opening it lays the full
+   rail over the workspace instead of squeezing it. */
+@media (max-width: 640px) {
+  .app {
+    grid-template-columns: 3.5rem minmax(0, 1fr);
+  }
+
+  .sidebar[data-collapsed="false"] {
+    position: fixed;
+    inset: 0 auto 0 0;
+    z-index: 40;
+    background: var(--wb-frame);
+    box-shadow: var(--wb-pane-shadow);
+  }
+
+  .canvas {
+    padding: var(--space-4) var(--space-4) var(--space-8);
+  }
+
+  .canvas:has(> .canvasBody[data-fill]) {
+    padding: 0;
+  }
+}
+
+/* A failed project load: calm and centered, not a raw red box. */
+.loadFailure {
+  max-width: 32rem;
+  margin: var(--space-8) auto;
+  padding: var(--space-6);
+  display: grid;
+  justify-items: center;
+  gap: var(--space-2);
+  text-align: center;
+}
+
+.canvasBody[data-fill] > .loadFailure {
+  place-content: center;
+}
+
+.loadFailure p {
+  margin: 0;
+  color: var(--wb-muted-foreground);
+}
+
+.loadFailureTitle {
+  margin: 0;
+  font-size: 1rem;
+  font-weight: 600;
+}
+
+.loadFailureActions {
+  margin-top: var(--space-2);
+  display: flex;
+  gap: var(--space-2);
+}
+
+.loadFailureDetails {
+  margin-top: var(--space-4);
+  width: 100%;
+  text-align: left;
+}
+
+.loadFailureDetails summary {
+  cursor: pointer;
+  color: var(--wb-muted-foreground);
+  font-size: 0.8125rem;
+}
+
+.loadFailureDetails pre {
+  margin: var(--space-2) 0;
+  padding: var(--space-3);
+  border: 1px solid var(--wb-border-strong);
+  border-radius: var(--radius-panel);
+  background: var(--wb-card);
+  white-space: pre-wrap;
+  word-break: break-word;
+  font-family: var(--wb-font-mono);
+  font-size: 0.8125rem;
+}
+
+.whatsNewPanel {
+  padding-top: 0.75rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.875rem;
+  font-family: var(--font-sans);
+}
+
+.whatsNewCopy {
+  margin: 0;
+  font-size: 0.875rem;
+  line-height: 1.55;
+  color: var(--fg);
+}
+
+.whatsNewActions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding-top: 0.25rem;
+}
diff --git a/apps/web/src/App.tsx b/apps/web/src/App.tsx
index 8939b459..ad782686 100644
--- a/apps/web/src/App.tsx
+++ b/apps/web/src/App.tsx
@@ -9,6 +9,7 @@
  * shows in the workspace.
  */
 import { wording } from "./config.ts";
+import styles from "./App.module.css";
 import { humanFault, responseCode } from "./pages/workspace/human-fault.ts";
 import { ProductApiError } from "@corbits-builder/client";
 import { queryClient } from "./queries/client.ts";
@@ -37,6 +38,7 @@ import {
 import {
   Banner,
   Button,
+  InlineNote,
   Mark,
   notify,
   type NoticeAction,
@@ -53,7 +55,7 @@ import {
   type HubUser,
 } from "./api/auth.ts";
 import { WorkspaceMenu } from "./workspace-menu.tsx";
-import { Settings, type SettingsTab } from "./pages/settings.jsx";
+import { Settings, type SettingsTab } from "./pages/settings/settings.jsx";
 import {
   Avatar,
   Badge,
@@ -78,7 +80,7 @@ import {
   DialogTitle,
 } from "@corbits/react-ui/ui/dialog";
 import { Auth } from "./pages/auth.jsx";
-import { StageWorkspace } from "./pages/workspace.jsx";
+import { StageWorkspace } from "./pages/workspace/index.tsx";
 import { firstRunScreen, type HubAuthState } from "./first-run.ts";
 import {
   ModelSetup,
@@ -202,12 +204,12 @@ function ProjectLoadFailure({
   };
 
   return (
-    <div className="project-load-failure">
-      <p className="project-load-failure-title">
+    <div className={styles.loadFailure}>
+      <p className={styles.loadFailureTitle}>
         {wording.projectLoadFailure.title}
       </p>
       <p>{wording.projectLoadFailure.lead}</p>
-      <div className="project-load-failure-actions">
+      <div className={styles.loadFailureActions}>
         <Button variant="primary" onClick={onBackToProjects}>
           {wording.projectLoadFailure.back}
         </Button>
@@ -215,7 +217,7 @@ function ProjectLoadFailure({
           {wording.action.tryAgain}
         </Button>
       </div>
-      <details className="project-load-failure-details">
+      <details className={styles.loadFailureDetails}>
         <summary>{wording.projectLoadFailure.details}</summary>
         <pre>{detail}</pre>
         <Button variant="outline" onClick={() => void copyDetail()}>
@@ -259,10 +261,10 @@ export function WhatsNewDialog({
     if (tabId === "approvals") {
       const feature = copy.features.approvals;
       return (
-        <div className="whats-new-panel">
-          <p className="whats-new-copy">{feature.description}</p>
-          <div className="whats-new-action-row">
-            <span className="inline-note">{feature.statusNote}</span>
+        <div className={styles.whatsNewPanel}>
+          <p className={styles.whatsNewCopy}>{feature.description}</p>
+          <div className={styles.whatsNewActions}>
+            <InlineNote as="span">{feature.statusNote}</InlineNote>
             <UiButton
               type="button"
               variant="outline"
@@ -277,8 +279,8 @@ export function WhatsNewDialog({
     }
     const feature = copy.features.slideDecks;
     return (
-      <div className="whats-new-panel">
-        <p className="whats-new-copy">{feature.description}</p>
+      <div className={styles.whatsNewPanel}>
+        <p className={styles.whatsNewCopy}>{feature.description}</p>
       </div>
     );
   };
@@ -294,7 +296,6 @@ export function WhatsNewDialog({
             active={activeTab}
             onChange={setActiveTab}
             label={copy.sections}
-            className="whats-new-tabs"
           >
             {renderFeatureTab}
           </Tabs>
@@ -360,7 +361,7 @@ export function AppSidebar({
     )
     .sort((a, b) => b.lastActivityAt.localeCompare(a.lastActivityAt));
   return (
-    <Sidebar id="app-sidebar" className="app-sidebar" collapsed={collapsed}>
+    <Sidebar id="app-sidebar" className={styles.sidebar} collapsed={collapsed}>
       <SidebarHeader>
         <WorkspaceMenu onOpen={onOpenWorkspace} />
         <SidebarCollapseToggle
@@ -369,11 +370,11 @@ export function AppSidebar({
         />
       </SidebarHeader>
       <SidebarContent>
-        <ul className="app-sidebar-list">
+        <ul className={styles.list}>
           <SidebarItem asChild active={view === "projects"} icon={<Plus />}>
             <button
               type="button"
-              className="app-sidebar-new"
+              className={styles.newProject}
               onClick={() => onNavigate("projects")}
             >
               {wording.shell.newProject}
@@ -399,7 +400,7 @@ export function AppSidebar({
         {listed.length > 0 ? (
           <SidebarSection
             label={wording.shell.inProgress}
-            className="app-sidebar-projects"
+            className={styles.projects}
           >
             {listed.map((item) => {
               const open = inProject && item.id === project.id;
@@ -410,7 +411,7 @@ export function AppSidebar({
                   onSelect={() => onOpenProject(item.id)}
                   leading={
                     <Avatar
-                      className="app-sidebar-initial"
+                      className={styles.initial}
                       initials={item.title.trim().charAt(0)}
                       label={item.title}
                       shape="square"
@@ -426,7 +427,7 @@ export function AppSidebar({
                         <UiButton
                           variant="ghost"
                           size="icon"
-                          className="app-sidebar-row-menu"
+                          className={styles.rowMenu}
                           aria-label={wording.shell.projectOptions(item.title)}
                         >
                           <Ellipsis aria-hidden="true" />
@@ -445,10 +446,10 @@ export function AppSidebar({
         ) : null}
       </SidebarContent>
       <SidebarFooter>
-        <ul className="app-sidebar-list">
+        <ul className={styles.list}>
           <SidebarItem asChild>
             <button type="button" onClick={onOpenWhatsNew}>
-              <span className="app-sidebar-whats-new">
+              <span className={styles.whatsNewItem}>
                 <span>{wording.shell.whatsNew}</span>
                 <Badge tone="neutral">{wording.shell.whatsNewBadge}</Badge>
               </span>
@@ -805,7 +806,7 @@ export function App() {
 
   return (
     <>
-      <div className="app">
+      <div className={styles.app}>
         <AppSidebar
           view={view}
           project={openProjectSummary}
@@ -825,11 +826,10 @@ export function App() {
           onError={reportProjectError}
         />
 
-        <main className="canvas">
+        <main className={styles.canvas}>
           <div
-            className={
-              view === "project" ? "canvas-body is-fill" : "canvas-body"
-            }
+            className={styles.canvasBody}
+            data-fill={view === "project" ? "" : undefined}
           >
             {offline ? (
               <Banner tone="error" title={wording.hub.notAnswering} />
@@ -897,8 +897,8 @@ export function App() {
                   {...(openingMessage !== undefined ? { openingMessage } : {})}
                 />
               ) : (
-                <div className="project-load-failure">
-                  <p className="project-load-failure-title">
+                <div className={styles.loadFailure}>
+                  <p className={styles.loadFailureTitle}>
                     {wording.shell.noProjectTitle}
                   </p>
                   <p>{wording.shell.noProjectLead}</p>
diff --git a/apps/web/src/components.module.css b/apps/web/src/components.module.css
new file mode 100644
index 00000000..04192f6b
--- /dev/null
+++ b/apps/web/src/components.module.css
@@ -0,0 +1,138 @@
+.quietState {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  flex: none;
+  font-size: 0.8125rem;
+  color: var(--wb-muted-foreground);
+}
+
+/* Without the dot, the words carry the tone. */
+.quietState[data-words][data-tone="success"],
+.quietState[data-words][data-tone="okay"] {
+  color: var(--wb-okay);
+}
+
+.quietState[data-words][data-tone="warning"] {
+  color: var(--warn);
+}
+
+.quietState[data-words][data-tone="error"] {
+  color: var(--wb-destructive);
+}
+
+.banner {
+  border: 1px solid var(--wb-border-strong);
+  background: var(--wb-card);
+  padding: var(--space-3) var(--space-4);
+  display: grid;
+  gap: var(--space-1);
+  border-radius: var(--radius-panel);
+}
+
+/* Severity reads from the words and the state label, not a coloured edge. */
+.banner[data-tone="okay"] {
+  border-color: var(--wb-okay);
+}
+
+.banner p {
+  margin: 0;
+}
+
+.bannerTitle {
+  font-weight: 500;
+}
+
+.bannerBody {
+  display: grid;
+  gap: var(--space-1);
+  margin: 0;
+}
+
+.bannerAction {
+  margin-top: var(--space-1);
+}
+
+.inlineNote {
+  font-size: 0.8125rem;
+  color: var(--wb-muted-foreground);
+  margin: 0;
+}
+
+.inlineNote[data-pill] {
+  padding: 2px var(--space-3);
+  border: 1px solid var(--wb-border);
+  border-radius: 999px;
+  background: var(--wb-background);
+  font-size: 0.75rem;
+}
+
+.fault {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--space-2);
+  margin: 0;
+  color: var(--wb-foreground);
+  font-size: 0.8125rem;
+  line-height: 1.6;
+}
+
+.fault > p {
+  margin: 0;
+}
+
+.field {
+  display: grid;
+  gap: var(--space-2);
+}
+
+.danger {
+  color: var(--wb-destructive);
+}
+
+.menuItemLabel {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3);
+}
+
+/* The one look for every select and menu trigger: borderless quiet text
+   that underlines on hover. */
+.quietControl {
+  width: auto;
+  height: auto;
+  padding: 2px 4px;
+  border: 0;
+  border-radius: 4px;
+  background: transparent;
+  box-shadow: none;
+  color: var(--wb-muted-foreground);
+  font: inherit;
+  font-size: 0.8125rem;
+  text-underline-offset: 3px;
+  cursor: pointer;
+}
+
+select.quietControl {
+  padding-right: 22px;
+}
+
+/* A button may carry an icon beside its words, such as a disclosure chevron. */
+button.quietControl {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+}
+
+.quietControl:hover:not(:disabled) {
+  color: var(--wb-foreground);
+  text-decoration: underline;
+}
+
+.quietControl:focus-visible {
+  outline: 2px solid var(--wb-ring);
+  outline-offset: 2px;
+}
diff --git a/apps/web/src/components.stories.tsx b/apps/web/src/components.stories.tsx
new file mode 100644
index 00000000..66e861d3
--- /dev/null
+++ b/apps/web/src/components.stories.tsx
@@ -0,0 +1,159 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
+import {
+  Banner,
+  BannerAction,
+  Button,
+  Mark,
+  notify,
+  QuietSelect,
+  QuietState,
+  StateLabel,
+} from "./components.tsx";
+
+const TONES = [
+  "success",
+  "okay",
+  "warning",
+  "error",
+  "selected",
+  "info",
+  "loading",
+  "disabled",
+] as const;
+
+const meta = {
+  title: "Components/Primitives",
+} satisfies Meta;
+
+export default meta;
+
+export const StateLabels: StoryObj = {
+  render: () => (
+    <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
+      {TONES.map((tone) => (
+        <StateLabel key={tone} tone={tone}>
+          {tone}
+        </StateLabel>
+      ))}
+    </div>
+  ),
+};
+
+export const QuietStates: StoryObj = {
+  render: () => (
+    <div style={{ display: "grid", gap: 8 }}>
+      {TONES.map((tone) => (
+        <QuietState key={tone} tone={tone}>
+          {tone}
+        </QuietState>
+      ))}
+    </div>
+  ),
+};
+
+export const Buttons: StoryObj<typeof Button> = {
+  args: { children: "Continue", onClick: fn() },
+  argTypes: {
+    variant: {
+      control: "select",
+      options: [
+        "primary",
+        "secondary",
+        "outline",
+        "ghost",
+        "link",
+        "destructive",
+      ],
+    },
+  },
+  render: (args) => <Button {...args} />,
+};
+
+export const ButtonVariants: StoryObj = {
+  render: () => (
+    <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
+      {(
+        [
+          "primary",
+          "secondary",
+          "outline",
+          "ghost",
+          "link",
+          "destructive",
+        ] as const
+      ).map((variant) => (
+        <Button key={variant} variant={variant}>
+          {variant}
+        </Button>
+      ))}
+      <Button loading>loading</Button>
+      <Button disabled title="Nothing to send yet">
+        disabled
+      </Button>
+    </div>
+  ),
+};
+
+export const BlockButton: StoryObj = {
+  render: () => (
+    <div style={{ width: 320 }}>
+      <Button variant="primary" block>
+        Sign in
+      </Button>
+    </div>
+  ),
+};
+
+export const Banners: StoryObj = {
+  render: () => (
+    <div style={{ display: "grid", gap: 12, maxWidth: 560 }}>
+      <Banner title="The model provider is slow to answer.">
+        Replies may take longer than usual.
+      </Banner>
+      <Banner
+        tone="error"
+        role="alert"
+        title="The model provider refused the key."
+      >
+        Check the key in settings, then try again.
+        <BannerAction>
+          <Button onClick={fn()}>Open settings</Button>
+        </BannerAction>
+      </Banner>
+      <Banner tone="okay" title="Connected." />
+    </div>
+  ),
+};
+
+export const Marks: StoryObj<typeof Mark> = {
+  args: { size: 26 },
+  render: (args) => <Mark {...args} />,
+};
+
+export const QuietSelects: StoryObj = {
+  render: () => (
+    <QuietSelect defaultValue="list" aria-label="Library view">
+      <option value="list">List</option>
+      <option value="grid">Grid</option>
+    </QuietSelect>
+  ),
+};
+
+export const Notices: StoryObj = {
+  render: () => (
+    <div style={{ display: "flex", gap: 8 }}>
+      <Button onClick={() => notify("Saved.")}>Complete</Button>
+      <Button onClick={() => notify("Saved two of three files.", false)}>
+        Partial
+      </Button>
+      <Button
+        onClick={() =>
+          notify("Project archived.", true, { label: "Undo", onClick: fn() })
+        }
+      >
+        With action
+      </Button>
+    </div>
+  ),
+};
diff --git a/apps/web/src/components.tsx b/apps/web/src/components.tsx
index ab40ff61..691b05a9 100644
--- a/apps/web/src/components.tsx
+++ b/apps/web/src/components.tsx
@@ -8,9 +8,12 @@ import {
   StatusDot,
   type StatusDotTone,
 } from "@corbits/react-ui";
+import { MenuItem } from "@corbits/react-ui/ui/menu";
 import corbitsMark from "./assets/corbits-mark.svg";
+import { wording } from "./config.ts";
+import styles from "./components.module.css";
 
-type Tone =
+export type Tone =
   | "success"
   | "okay"
   | "warning"
@@ -60,23 +63,35 @@ export function StateLabel({
   );
 }
 
-/** A state beside other text, without a badge: a dot and the word that names it. */
+/**
+ * A state beside other text, without a badge: a dot and the word that names it.
+ * Where a row of states would be a row of dots, the words alone carry the tone.
+ */
 export function QuietState({
   tone = "info",
+  dot = true,
   children,
 }: {
   tone?: Tone;
+  dot?: boolean;
   children: ReactNode;
 }) {
   const mapped = STATE_TONES[tone];
   return (
-    <span className="quiet-state">
-      <StatusDot
-        label=""
-        tone={mapped.dot}
-        size="sm"
-        live={tone === "loading"}
-      />
+    <span
+      className={styles.quietState}
+      data-slot="quiet-state"
+      data-tone={tone}
+      data-words={dot ? undefined : ""}
+    >
+      {dot ? (
+        <StatusDot
+          label=""
+          tone={mapped.dot}
+          size="sm"
+          live={tone === "loading"}
+        />
+      ) : null}
       {children}
     </span>
   );
@@ -135,39 +150,124 @@ export function Button({
   );
 }
 
+/**
+ * Something about the whole surface that the person should know before going on. A failure with
+ * an obvious next move offers it in a `BannerAction` rather than describing it.
+ */
 export function Banner({
   tone = "warning",
+  role = "status",
   title,
-  action,
   children,
 }: {
   tone?: "warning" | "error" | "okay";
+  /** An alert interrupts a screen reader; a status waits its turn. */
+  role?: "status" | "alert";
   title: string;
-  /**
-   * The way out. A failure with an obvious next move should offer it here
-   * rather than describe it and leave the person to find the screen.
-   */
-  action?: { label: string; onClick: () => void };
   children?: ReactNode;
 }) {
   return (
     <div
-      className={`banner${tone === "error" ? " is-error" : tone === "okay" ? " is-okay" : ""}`}
-      role="status"
+      className={styles.banner}
+      data-slot="banner"
+      data-tone={tone}
+      role={role}
     >
-      <p className="banner-title">{title}</p>
+      <p className={styles.bannerTitle}>{title}</p>
       {/* A div, not a p: banners can carry block children, such as a form,
           and a form inside a p is invalid HTML. */}
-      {children ? <div className="banner-body">{children}</div> : null}
-      {action ? (
-        <div className="banner-action">
-          <Button onClick={action.onClick}>{action.label}</Button>
-        </div>
-      ) : null}
+      {children ? <div className={styles.bannerBody}>{children}</div> : null}
+    </div>
+  );
+}
+
+/** The way out of a banner, under its words. */
+export function BannerAction({ children }: { children: ReactNode }) {
+  return (
+    <div className={styles.bannerAction} data-slot="banner-action">
+      {children}
+    </div>
+  );
+}
+
+/** A short status or explanation in supporting text, beside or under what it is about. */
+export function InlineNote({
+  as: Tag = "p",
+  pill = false,
+  role,
+  children,
+}: {
+  /** A span sits within a line of other text rather than a paragraph of its own. */
+  as?: "p" | "span";
+  /** A note that labels a view, such as which version it shows, in a rounded chip. */
+  pill?: boolean;
+  role?: "status";
+  children: ReactNode;
+}) {
+  return (
+    <Tag
+      className={styles.inlineNote}
+      data-slot="inline-note"
+      data-pill={pill ? "" : undefined}
+      role={role}
+    >
+      {children}
+    </Tag>
+  );
+}
+
+/**
+ * What went wrong, where it went wrong, with the way to try again when there is one. Read aloud
+ * as soon as it appears.
+ */
+export function Fault({
+  onRetry,
+  children,
+}: {
+  onRetry?: (() => void) | undefined;
+  children: ReactNode;
+}) {
+  if (onRetry === undefined)
+    return (
+      <p className={styles.fault} data-slot="fault" role="alert">
+        {children}
+      </p>
+    );
+  return (
+    <div className={styles.fault} data-slot="fault" role="alert">
+      <p>{children}</p>
+      <UiButton size="sm" variant="outline" onClick={onRetry}>
+        {wording.action.retry}
+      </UiButton>
+    </div>
+  );
+}
+
+/** A label stacked above the control it names. */
+export function Field({ children }: { children: ReactNode }) {
+  return (
+    <div className={styles.field} data-slot="field">
+      {children}
     </div>
   );
 }
 
+/** A menu item that destroys or removes something, in the destructive colour. */
+export function DangerMenuItem(
+  props: Omit<ComponentProps<typeof MenuItem>, "className">,
+) {
+  return <MenuItem {...props} className={styles.danger} />;
+}
+
+/** A menu item's words with something that belongs beside them, such as a version's date. */
+export function MenuItemLabel({ children }: { children: ReactNode }) {
+  return (
+    <span className={styles.menuItemLabel} data-slot="menu-item-label">
+      {children}
+    </span>
+  );
+}
+
 export function Mark({ size = 26 }: { size?: number }) {
   return (
     <img
@@ -194,17 +294,28 @@ export function notify(
   else toast(message, options);
 }
 
-/** The one look for a select or a menu trigger: borderless text that underlines on hover. */
-export const QUIET_CONTROL = "quiet-control";
-
-export function QuietSelect({
-  className,
-  ...props
-}: ComponentProps<typeof Select>) {
+/** The one look for a select or a small action among words: borderless text that underlines on hover. */
+export function QuietSelect(
+  props: Omit<ComponentProps<typeof Select>, "className">,
+) {
   return (
     <Select
       {...props}
-      className={className ? `${QUIET_CONTROL} ${className}` : QUIET_CONTROL}
+      className={styles.quietControl}
+      data-slot="quiet-control"
+    />
+  );
+}
+
+export function QuietButton(
+  props: Omit<ComponentProps<"button">, "className" | "type">,
+) {
+  return (
+    <button
+      type="button"
+      {...props}
+      className={styles.quietControl}
+      data-slot="quiet-control"
     />
   );
 }
diff --git a/apps/web/src/composer.module.css b/apps/web/src/composer.module.css
new file mode 100644
index 00000000..bfb78c2c
--- /dev/null
+++ b/apps/web/src/composer.module.css
@@ -0,0 +1,164 @@
+.composer {
+  padding: var(--space-2) var(--space-4) var(--space-4);
+  display: grid;
+  gap: var(--space-2);
+  flex: none;
+  position: relative;
+  /* Capped so the send, stop, attach and mic controls never leave the pane.
+     The composer itself must not scroll: the attachment tray and the model
+     list float above the box, and a scrolling composer clips them. The
+     textarea scrolls its own text, and the notes above the box give way. */
+  max-height: 70vh;
+  min-height: 0;
+}
+
+.composer[data-variant="page"] {
+  padding: 0;
+}
+
+.composer > form {
+  position: relative;
+}
+
+/* While the specialist writes, a thin ring sweeps the box's border. */
+.composer[data-working] > form::after {
+  content: "";
+  position: absolute;
+  inset: -1px;
+  border-radius: inherit;
+  padding: 2px;
+  background: conic-gradient(
+    from var(--ring-angle),
+    var(--wb-primary),
+    color-mix(in srgb, var(--wb-primary) 15%, transparent),
+    var(--wb-primary)
+  );
+  /* The mask only needs an opaque colour; which one is irrelevant. */
+  -webkit-mask:
+    linear-gradient(currentColor 0 0) content-box,
+    linear-gradient(currentColor 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+  animation:
+    global(ring-spin) 1.1s linear infinite,
+    global(fade-in) 220ms ease-out both;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .composer[data-working] > form::after {
+    animation: none;
+  }
+}
+
+.notes {
+  display: grid;
+  gap: var(--space-2);
+  min-height: 0;
+  overflow-y: auto;
+}
+
+.notes:empty {
+  display: none;
+}
+
+.composer > [data-slot="prompt-input"] {
+  flex-shrink: 0;
+}
+
+/* The library's prompt input: the rounded box around the words and controls. */
+.composer [data-slot="prompt-input"] {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: flex-end;
+  gap: var(--space-1);
+  min-width: 0;
+  min-height: 0;
+  max-height: min(50vh, 480px);
+  border: 1px solid var(--wb-border);
+  border-radius: var(--radius-lg);
+  background: var(--wb-card);
+  padding: 6px 6px 6px var(--space-2);
+  transition: border-color 150ms;
+}
+
+.composer [data-slot="prompt-input"]:focus-within {
+  outline: none;
+  border-color: var(--wb-border-strong);
+}
+
+.composer [data-slot="prompt-input"] [data-slot="prompt-input-field"] {
+  align-self: center;
+  font-size: 15px;
+  line-height: 1.5;
+}
+
+.composer
+  [data-slot="prompt-input"]
+  :is(textarea, [data-slot="prompt-input-mirror"]) {
+  padding-block: 4px;
+}
+
+.composer [data-slot="prompt-input"] > div:has(> textarea) {
+  align-self: stretch;
+}
+
+/* The library's input row is `flex: 1 1 0%` beside a full-basis toolbar that wraps below it, and
+   with a content-sized textarea the row resolved to 0 px wide: one character per line, and the
+   box grew to fill the page. A full basis gives it the whole first line. */
+.composer[data-variant="page"]
+  [data-slot="prompt-input"]
+  > div:has(> textarea) {
+  flex: 1 1 100%;
+}
+
+.composer [data-slot="prompt-input"] textarea {
+  width: 100%;
+  min-height: 0;
+  max-height: min(200px, 30vh);
+  overflow-y: auto;
+  display: block;
+}
+
+.composer [data-slot="prompt-input"] textarea:placeholder-shown {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.composer [data-slot="prompt-input"] textarea::placeholder {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.composer [data-slot="prompt-input"] [data-slot="prompt-input-toolbar"] {
+  flex: none;
+  gap: var(--space-1);
+  padding: 0;
+}
+
+.composer [data-slot="prompt-input"] [data-slot="prompt-input-submit"] {
+  width: 32px;
+  height: 32px;
+  min-width: 32px;
+  min-height: 32px;
+  padding: 0;
+  border: 0;
+  background: var(--wb-foreground);
+  color: var(--wb-background);
+  border-radius: 50%;
+  box-shadow: none;
+}
+
+.composer
+  [data-slot="prompt-input"]
+  [data-slot="prompt-input-submit"]:hover:not(:disabled) {
+  background: var(--wb-foreground);
+  opacity: 0.85;
+}
+
+.composer
+  [data-slot="prompt-input"]
+  [data-slot="prompt-input-submit"]:disabled {
+  opacity: 0.2;
+}
diff --git a/apps/web/src/composer.tsx b/apps/web/src/composer.tsx
new file mode 100644
index 00000000..c4d0d19d
--- /dev/null
+++ b/apps/web/src/composer.tsx
@@ -0,0 +1,37 @@
+import type { ReactNode } from "react";
+import styles from "./composer.module.css";
+
+/**
+ * The frame every composer sits in, on the home page and in a project: notes
+ * above the box, the box beneath. While the specialist works, a ring sweeps
+ * the box's border.
+ */
+export function Composer({
+  variant = "pane",
+  working = false,
+  notes,
+  children,
+}: {
+  /** In a pane it keeps its own inset; on a page the page gives it a gutter and its words the whole first line. */
+  variant?: "pane" | "page";
+  working?: boolean;
+  /** Faults and notices about the message, above the box; they give way before the box does. */
+  notes?: ReactNode;
+  children: ReactNode;
+}) {
+  return (
+    <div
+      className={styles.composer}
+      data-slot="composer"
+      data-variant={variant}
+      data-working={working ? "" : undefined}
+    >
+      {notes === undefined ? null : (
+        <div className={styles.notes} data-slot="composer-notes">
+          {notes}
+        </div>
+      )}
+      {children}
+    </div>
+  );
+}
diff --git a/apps/web/src/css-modules-preload.ts b/apps/web/src/css-modules-preload.ts
new file mode 100644
index 00000000..57886eb2
--- /dev/null
+++ b/apps/web/src/css-modules-preload.ts
@@ -0,0 +1,17 @@
+/**
+ * `bun test` has no CSS modules: an import of one comes back empty, so every
+ * class would render as `undefined`. Here each class comes back as its own
+ * name instead, which keeps rendered markup readable in assertions.
+ */
+import { plugin } from "bun";
+
+plugin({
+  name: "css-modules",
+  setup(build) {
+    build.onLoad({ filter: /\.module\.css$/ }, () => ({
+      loader: "js",
+      contents:
+        "export default new Proxy({}, { get: (_, key) => (typeof key === 'string' ? key : undefined) });",
+    }));
+  },
+});
diff --git a/apps/web/src/css-modules.test.ts b/apps/web/src/css-modules.test.ts
new file mode 100644
index 00000000..01f26be7
--- /dev/null
+++ b/apps/web/src/css-modules.test.ts
@@ -0,0 +1,65 @@
+import { describe, expect, test } from "bun:test";
+import { readFileSync } from "node:fs";
+import { dirname, join, relative, resolve } from "node:path";
+import { Glob } from "bun";
+
+// A class a component reads but its module lacks is a type error (see the `css-types` script);
+// these are the two rules types cannot check.
+
+const root = import.meta.dir;
+
+function files(pattern: string): string[] {
+  return [...new Glob(pattern).scanSync(root)].sort();
+}
+
+/** The classes a module defines; `:global(...)` names belong to someone else. */
+function moduleClasses(path: string): Set<string> {
+  const css = readFileSync(path, "utf8")
+    .replace(/\/\*[\s\S]*?\*\//g, "")
+    .replace(/url\([^)]*\)/g, "")
+    .replace(/:global\([^)]*\)/g, "")
+    .replace(/"[^"]*"|'[^']*'/g, "");
+  return new Set([...css.matchAll(/\.(-?[A-Za-z_][\w-]*)/g)].map((m) => m[1]!));
+}
+
+/** Every class each module's importers read, keyed by the module's path. */
+function classesRead(): Map<string, Set<string>> {
+  const read = new Map<string, Set<string>>();
+  for (const file of files("**/*.{ts,tsx}")) {
+    if (file.endsWith(".d.ts") || /\.test\.tsx?$/.test(file)) continue;
+    const path = join(root, file);
+    const source = readFileSync(path, "utf8");
+    for (const [, local, specifier] of source.matchAll(
+      /import\s+(\w+)\s+from\s+"(\.{1,2}\/[^"]+\.module\.css)"/g,
+    )) {
+      const module = resolve(dirname(path), specifier!);
+      const names = read.get(module) ?? new Set<string>();
+      for (const [, name] of source.matchAll(
+        new RegExp(`\\b${local}\\.([A-Za-z_]\\w*)`, "g"),
+      ))
+        names.add(name!);
+      read.set(module, names);
+    }
+  }
+  return read;
+}
+
+describe("component styles", () => {
+  test("live in a CSS module beside the component; styles.css holds only what is global", () => {
+    const plain = files("**/*.css").filter(
+      (file) => file !== "styles.css" && !file.endsWith(".module.css"),
+    );
+    expect(plain).toEqual([]);
+  });
+
+  test("every class a module defines is read by a component", () => {
+    const read = classesRead();
+    const unused = files("**/*.module.css").flatMap((file) => {
+      const names = read.get(join(root, file));
+      return [...moduleClasses(join(root, file))]
+        .filter((name) => !names?.has(name))
+        .map((name) => `${relative(root, join(root, file))}: .${name}`);
+    });
+    expect(unused).toEqual([]);
+  });
+});
diff --git a/apps/web/src/dictation.module.css b/apps/web/src/dictation.module.css
new file mode 100644
index 00000000..b4078d9b
--- /dev/null
+++ b/apps/web/src/dictation.module.css
@@ -0,0 +1,95 @@
+.dictated {
+  display: grid;
+  gap: var(--space-1);
+  min-width: 0;
+}
+
+.row {
+  display: flex;
+  align-items: flex-end;
+  gap: var(--space-2);
+  min-width: 0;
+}
+
+.row > :last-child {
+  flex: 1;
+  min-width: 0;
+}
+
+.row[data-align="start"] {
+  align-items: flex-start;
+}
+
+.row[data-align="center"] {
+  align-items: center;
+}
+
+.dictate {
+  width: 36px;
+  height: 36px;
+  margin-bottom: var(--space-2);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-control);
+  border: 1px solid var(--wb-border);
+  background: var(--wb-card);
+  color: var(--wb-foreground);
+  cursor: pointer;
+  flex: none;
+}
+
+.row:is([data-align="start"], [data-align="center"]) > .dictate {
+  margin-bottom: 0;
+}
+
+.dictate svg {
+  width: 16px;
+  height: 16px;
+}
+
+.dictate:hover:not(:disabled) {
+  border-color: var(--wb-primary);
+}
+
+/* In a toolbar: a round, borderless icon like the toolbar's own. */
+.dictate.inToolbar {
+  width: 32px;
+  height: 32px;
+  margin: 0;
+  border: 0;
+  border-radius: 50%;
+  background: transparent;
+  color: var(--wb-muted-foreground);
+}
+
+.dictate.inToolbar:hover:not(:disabled) {
+  background: var(--wb-muted);
+  color: var(--wb-foreground);
+}
+
+.dictate:disabled {
+  cursor: default;
+  opacity: 0.5;
+}
+
+/* Listening: the pressed look, green with the stop glyph. */
+.dictate[aria-pressed="true"] {
+  border-color: var(--wb-okay);
+  color: var(--wb-okay);
+  background: color-mix(in srgb, var(--wb-okay) 12%, var(--wb-card));
+}
+
+.state {
+  margin: 0;
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  min-height: 1.25rem;
+  font-size: 0.8125rem;
+  color: var(--wb-muted-foreground);
+}
+
+.state[role="alert"] {
+  color: var(--wb-destructive);
+}
diff --git a/apps/web/src/dictation.tsx b/apps/web/src/dictation.tsx
index f0b8bfbc..0ee8eb1e 100644
--- a/apps/web/src/dictation.tsx
+++ b/apps/web/src/dictation.tsx
@@ -10,6 +10,8 @@
  * tap on the microphone ends it, and so does a short silence once something
  * has been said.
  */
+import { clsx } from "clsx";
+import styles from "./dictation.module.css";
 import {
   useCallback,
   useEffect,
@@ -296,7 +298,8 @@ export function Dictated({
     : "idle";
   const control = supported ? (
     <MicButton
-      className="dictate"
+      // Placed in the caller's toolbar, the microphone is one of its round icons.
+      className={clsx(styles.dictate, slotted && styles.inToolbar)}
       state={state}
       disabled={disabled}
       onToggle={listening ? stop : () => void start()}
@@ -305,17 +308,17 @@ export function Dictated({
   const field = slotted ? children(control) : children;
   if (!supported) return <>{field}</>;
   return (
-    <div className="dictated">
+    <div className={styles.dictated}>
       {slotted ? (
         field
       ) : (
-        <div className={`dictated-row dictated-row-${align}`}>
+        <div className={styles.row} data-align={align}>
           {control}
           {field}
         </div>
       )}
       <DictationStatusLine
-        className="dictation-state"
+        className={styles.state}
         state={refusal ? "denied" : state}
         levels={levels}
         startingLabel="Starting the microphone… If macOS asks, allow it."
diff --git a/apps/web/src/flourish.css b/apps/web/src/flourish.module.css
similarity index 71%
rename from apps/web/src/flourish.css
rename to apps/web/src/flourish.module.css
index 79e8fa9d..bdc7a19d 100644
--- a/apps/web/src/flourish.css
+++ b/apps/web/src/flourish.module.css
@@ -1,32 +1,4 @@
-:root[data-ux="fine"] body,
-:root[data-ux="fine"] body * {
-  font-family:
-    "Comic Sans MS", "Chalkboard SE", "Comic Neue", cursive !important;
-}
-
-:root[data-ux="fine"] body {
-  background: #ff00d4 !important;
-  color: #3cff00 !important;
-}
-
-:root[data-ux="fine"] #app-sidebar {
-  transform: rotate(-1.5deg) translateY(7px);
-  background: #fff200 !important;
-}
-
-:root[data-ux="fine"] main,
-:root[data-ux="fine"] .settings-page {
-  transform: rotate(0.8deg) translateX(11px);
-  background: #00e5ff !important;
-}
-
-:root[data-ux="fine"] button {
-  border-radius: 0 !important;
-  background: #ff6a00 !important;
-  color: #0019ff !important;
-}
-
-.flourish-fine-banner {
+.fineBanner {
   position: fixed;
   top: 18px;
   left: 50%;
@@ -43,11 +15,11 @@
   pointer-events: none;
 }
 
-.flourish-logo {
+.logo {
   display: inline-flex;
 }
 
-.flourish-card {
+.card {
   position: fixed;
   left: 16px;
   bottom: 16px;
@@ -65,17 +37,17 @@
   animation: flourish-rise 240ms ease-out;
 }
 
-.flourish-card a {
+.card a {
   color: inherit;
   font-weight: 600;
 }
 
-.flourish-card-mark {
+.cardMark {
   display: inline-flex;
   animation: flourish-climb 1.2s ease-in-out infinite;
 }
 
-.flourish-credit {
+.credit {
   display: block;
   margin: var(--space-6) auto 0;
   padding: 0;
@@ -88,12 +60,12 @@
   cursor: pointer;
 }
 
-.flourish-credit:hover,
-.flourish-credit:focus-visible {
+.credit:hover,
+.credit:focus-visible {
   opacity: 1;
 }
 
-.flourish-swarm {
+.swarm {
   position: fixed;
   inset: 0;
   z-index: 1000;
@@ -101,7 +73,7 @@
   pointer-events: none;
 }
 
-.flourish-swarm-flyer {
+.flyer {
   position: absolute;
   top: 0;
   left: 0;
@@ -112,13 +84,13 @@
   animation: flourish-fly linear both;
 }
 
-.flourish-flyer-fill,
-.flourish-flyer-fill-strong {
+.fill,
+.fillStrong {
   fill: var(--primary);
   fill-opacity: 0.35;
 }
 
-.flourish-flyer-fill-strong {
+.fillStrong {
   fill-opacity: 0.75;
 }
 
@@ -146,7 +118,7 @@
   }
 }
 
-.flourish-shell {
+.shell {
   position: fixed;
   z-index: 1000;
   display: grid;
@@ -156,7 +128,7 @@
   animation: flourish-shell-fade 4500ms ease-in-out both;
 }
 
-.flourish-shell-screen {
+.shellScreen {
   margin: 0;
   padding: var(--space-4) var(--space-6);
   border-radius: var(--radius-panel);
@@ -166,7 +138,7 @@
   box-shadow: 0 8px 24px rgb(0 0 0 / 0.24);
 }
 
-.flourish-shell-answer {
+.shellAnswer {
   animation: flourish-shell-answer 600ms steps(1) both;
 }
 
@@ -193,14 +165,14 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .flourish-card,
-  .flourish-card-mark,
-  .flourish-shell,
-  .flourish-shell-answer {
+  .card,
+  .cardMark,
+  .shell,
+  .shellAnswer {
     animation: none;
   }
 
-  .flourish-swarm-flyer {
+  .flyer {
     animation: flourish-flash 900ms ease-out both;
     transform: translate(45vw, 40vh);
   }
diff --git a/apps/web/src/flourish.stories.tsx b/apps/web/src/flourish.stories.tsx
new file mode 100644
index 00000000..28e89426
--- /dev/null
+++ b/apps/web/src/flourish.stories.tsx
@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Credit, LogoMark } from "./flourish.tsx";
+
+const meta = {
+  title: "Components/Flourish",
+} satisfies Meta;
+
+export default meta;
+
+/** Seven quick clicks on the mark show who made it. */
+export const Logo: StoryObj<typeof LogoMark> = {
+  args: { size: 26 },
+  render: (args) => <LogoMark {...args} />,
+};
+
+/** Clicking the credit throws a swarm of flyers across the page. */
+export const OwnerCredit: StoryObj = {
+  render: () => <Credit />,
+};
diff --git a/apps/web/src/flourish.tsx b/apps/web/src/flourish.tsx
index 526cf7b7..7b109373 100644
--- a/apps/web/src/flourish.tsx
+++ b/apps/web/src/flourish.tsx
@@ -9,7 +9,7 @@ import {
 } from "react";
 import { wording } from "./config.ts";
 import { Mark } from "./components.jsx";
-import "./flourish.css";
+import styles from "./flourish.module.css";
 
 const FINE_MS = 3000;
 const CARD_MS = 6000;
@@ -47,7 +47,7 @@ function HockeyStick(props: FlyerProps) {
   return (
     <Drawing {...props}>
       <path
-        className="flourish-flyer-fill"
+        className={styles.fill}
         d="M4.2 2.4L6 1.6l8.6 15.4q.4.8 1.4.8h5q1 0 1 1v.8q0 1-1 1h-6.5q-1.9 0-2.7-1.7z"
       />
       <path d="M5 4.4l1.9-.9M5.7 5.9l1.9-.9M6.4 7.4l1.9-.9M17 17.8v2.8M18.2 17.8v2.8M19.4 17.8v2.8" />
@@ -60,20 +60,15 @@ function PalmTree(props: FlyerProps) {
     <Drawing {...props}>
       <path d="M10 22c.4-4.5 1.4-9 3-13M10.6 18.5l1.6.3M11.1 15.4l1.6.4M11.9 12.4l1.5.4" />
       <path
-        className="flourish-flyer-fill"
+        className={styles.fill}
         d="M13 9C10 9 6 11 5 15c2-3 5-4.5 8-6zM13 9c3 0 7 2 8 6-2-3-5-4.5-8-6zM13 9c-1-3 0-5.5 2-6.5-1 2.5-1 4.5-2 6.5z"
       />
       <path
-        className="flourish-flyer-fill-strong"
+        className={styles.fillStrong}
         d="M13 9C10 6 6 6 3 9c3-1 7-1 10 0zM13 9c3-3 7-3 9 0-3-1-6-1-9 0z"
       />
-      <circle
-        className="flourish-flyer-fill-strong"
-        cx="12.2"
-        cy="10.4"
-        r=".9"
-      />
-      <circle className="flourish-flyer-fill-strong" cx="14" cy="10.6" r=".9" />
+      <circle className={styles.fillStrong} cx="12.2" cy="10.4" r=".9" />
+      <circle className={styles.fillStrong} cx="14" cy="10.6" r=".9" />
     </Drawing>
   );
 }
@@ -117,7 +112,7 @@ export function FineMode() {
     };
   }, [on]);
   return on ? (
-    <div className="flourish-fine-banner" role="status">
+    <div className={styles.fineBanner} role="status">
       {wording.flourish.fine}
     </div>
   ) : null;
@@ -158,12 +153,12 @@ export function LogoMark({ size }: { size: number }) {
   }, [shown]);
   return (
     <>
-      <span className="flourish-logo" ref={mark}>
+      <span className={styles.logo} ref={mark}>
         <Mark size={size} />
       </span>
       {shown ? (
-        <div className="flourish-card" role="status">
-          <span className="flourish-card-mark">
+        <div className={styles.card} role="status">
+          <span className={styles.cardMark}>
             <Mark size={28} />
           </span>
           <a href="https://corbits.dev" target="_blank" rel="noreferrer">
@@ -190,7 +185,7 @@ export function Credit() {
     <>
       <button
         type="button"
-        className="flourish-credit"
+        className={styles.credit}
         onClick={() => setSwarm(Date.now())}
       >
         {wording.flourish.forgedBy}
@@ -236,9 +231,9 @@ function FlyerSwarm() {
     });
   }, []);
   return (
-    <div className="flourish-swarm" aria-hidden="true">
+    <div className={styles.swarm} aria-hidden="true">
       {flyers.map(({ Kind, style }, index) => (
-        <Kind key={index} className="flourish-swarm-flyer" style={style} />
+        <Kind key={index} className={styles.flyer} style={style} />
       ))}
     </div>
   );
@@ -280,15 +275,12 @@ export function useShellReply(area: RefObject<HTMLElement | null>) {
     return true;
   };
   const reply = box ? (
-    <div
-      key={box.at}
-      className="flourish-shell"
-      style={box.style}
-      role="status"
-    >
-      <pre className="flourish-shell-screen">
+    <div key={box.at} className={styles.shell} style={box.style} role="status">
+      <pre className={styles.shellScreen}>
         {`$ ${wording.flourish.shellRequest}`}
-        <span className="flourish-shell-answer">{`\n${wording.flourish.shellAnswer}${SANDWICH}`}</span>
+        <span
+          className={styles.shellAnswer}
+        >{`\n${wording.flourish.shellAnswer}${SANDWICH}`}</span>
       </pre>
     </div>
   ) : null;
diff --git a/apps/web/src/main.tsx b/apps/web/src/main.tsx
index f2707877..1ca0e9a1 100644
--- a/apps/web/src/main.tsx
+++ b/apps/web/src/main.tsx
@@ -1,14 +1,15 @@
+// The global sheets load before any module that imports a component, so each
+// component's own CSS module comes after them and wins a tie. The library's
+// sheet carries the Tailwind reset and the shared theme; ours adds the tokens
+// and element defaults on top of it.
+import "@corbits/react-ui/styles.css";
+import "./styles.css";
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import { ThemeProvider } from "@corbits/react-ui";
 import { QueryClientProvider } from "@tanstack/react-query";
 import { App } from "./App.jsx";
 import { queryCacheReady, queryClient } from "./queries/client.ts";
-// The Corbits component library first — it carries the Tailwind reset and the
-// shared theme — then our own sheet, which overrides it for surfaces this app
-// owns. Order is the whole contract.
-import "@corbits/react-ui/styles.css";
-import "./styles.css";
 import { openSharedEventSource } from "./shared-event-source.ts";
 import { redirectHashLink } from "./routes.ts";
 import { wording } from "./config.ts";
diff --git a/apps/web/src/markdown.module.css b/apps/web/src/markdown.module.css
new file mode 100644
index 00000000..a8ff5cc3
--- /dev/null
+++ b/apps/web/src/markdown.module.css
@@ -0,0 +1,204 @@
+/* The document itself. Measure and rhythm are the whole job here: this is the
+   one surface in the app a person reads rather than scans. */
+.prose {
+  font-size: 0.9375rem;
+  line-height: 1.7;
+}
+
+/* Tracked changes: added in green, removed in red and struck through. */
+.prose ins {
+  text-decoration: none;
+  background: color-mix(in srgb, var(--wb-okay) 18%, transparent);
+  color: color-mix(in srgb, var(--wb-okay) 60%, var(--wb-foreground));
+  border-radius: 2px;
+}
+
+.prose del {
+  background: color-mix(in srgb, var(--wb-destructive) 12%, transparent);
+  color: color-mix(in srgb, var(--wb-destructive) 70%, var(--wb-foreground));
+  text-decoration: line-through;
+  border-radius: 2px;
+}
+
+/* The measure applies to running text, not the block: a table, code fence
+   or embedded frame inside the same document reads better at the pane's
+   full width than squeezed into the same column as the prose around it.
+   Left-aligned rather than centred: the measure lines up with the document
+   header above it, and a centred column in a wide pane reads as a mistake.
+   Wide enough that the card's own width — not this cap — is usually what
+   limits a line: 80ch left a wide empty gutter once the document pane grew
+   to take the room the proportional chat column gave up. */
+.prose > :where(h1, h2, h3, h4, h5, h6, p, ul, ol, blockquote) {
+  max-width: min(120ch, 1100px);
+}
+
+/* In the document pane a line of running text stops at a comfortable reading
+   length, and its last line is not left with one word. */
+.prose[data-document] > :where(p, ul, ol, blockquote) {
+  max-width: 75ch;
+  text-wrap: pretty;
+}
+
+.prose > * + * {
+  margin-top: 1em;
+}
+
+.prose h2,
+.prose h3,
+.prose h4 {
+  font-weight: 500;
+  line-height: 1.3;
+}
+
+.prose > h2 {
+  font-size: 1.25rem;
+  margin-top: 2em;
+}
+
+.prose > h3 {
+  font-size: 1.0625rem;
+  margin-top: 1.75em;
+}
+
+.prose > h4 {
+  font-size: 0.9375rem;
+  margin-top: 1.5em;
+  color: var(--wb-muted-foreground);
+}
+
+.prose > :first-child {
+  margin-top: 0;
+}
+
+.prose ul,
+.prose ol {
+  padding-left: 1.25em;
+}
+
+.prose ul {
+  list-style: disc;
+}
+
+.prose ol {
+  list-style: decimal;
+}
+
+.prose li.task {
+  list-style: none;
+  margin-left: -1.25em;
+}
+
+.prose li + li {
+  margin-top: 0.35em;
+}
+
+.prose blockquote {
+  margin-left: 0;
+  padding-left: var(--space-4);
+  border-left: 2px solid var(--wb-border-strong);
+  color: var(--wb-muted-foreground);
+}
+
+.prose code {
+  font-family: var(--wb-font-mono);
+  font-size: 0.875em;
+  background: var(--wb-muted);
+  padding: 1px var(--space-1);
+}
+
+.prose pre {
+  background: var(--wb-muted);
+  padding: var(--space-3) var(--space-4);
+  overflow-x: auto;
+}
+
+.prose pre code {
+  background: none;
+  padding: 0;
+}
+
+/* A wide table scrolls inside its own box rather than widening the page. */
+.table {
+  overflow-x: auto;
+  margin: 1em 0;
+}
+
+.prose table {
+  border-collapse: collapse;
+  font-size: 0.9375em;
+}
+
+.prose th,
+.prose td {
+  border: 1px solid var(--wb-border);
+  padding: var(--space-2) var(--space-3);
+  text-align: left;
+  vertical-align: top;
+}
+
+.prose th {
+  background: var(--wb-muted);
+  font-weight: 600;
+}
+
+.prose hr {
+  border: 0;
+  border-top: 1px solid var(--wb-border);
+  margin: 2em 0;
+}
+
+.prose ::selection {
+  background: color-mix(in srgb, var(--wb-primary) 26%, transparent);
+}
+
+/* A picture in a document (#737): the PRD for people's screens, captioned. */
+.prose .figure {
+  margin: 1rem 0 1.25rem;
+}
+
+.prose .figure img {
+  display: block;
+  max-width: 100%;
+  height: auto;
+  border: 1px solid var(--wb-border, #e5e7eb);
+  border-radius: 8px;
+}
+
+.prose .figure figcaption {
+  margin-top: 0.375rem;
+  font-size: 0.8125rem;
+  color: var(--wb-muted-foreground);
+}
+
+.prose .missingPicture {
+  color: var(--wb-muted-foreground);
+}
+
+/* A document named in the conversation, opened in the reading pane. */
+.mention {
+  color: var(--wb-foreground);
+  text-decoration: underline;
+  text-underline-offset: 0.15em;
+}
+
+.mention:focus-visible {
+  outline: 2px solid var(--wb-foreground);
+  outline-offset: 2px;
+}
+
+/* On paper the page sets the size and the measure, and nothing scrolls. */
+@media print {
+  .prose {
+    font-size: inherit;
+    line-height: inherit;
+  }
+
+  .prose > *,
+  .prose[data-document] > :where(p, ul, ol, blockquote) {
+    max-width: none;
+  }
+
+  .table {
+    overflow: visible;
+  }
+}
diff --git a/apps/web/src/markdown.stories.tsx b/apps/web/src/markdown.stories.tsx
new file mode 100644
index 00000000..3e91ee9d
--- /dev/null
+++ b/apps/web/src/markdown.stories.tsx
@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
+import { Markdown } from "./markdown.tsx";
+
+const SAMPLE = `## Problem
+
+Small bakeries lose orders because they take them by phone and write them on paper.
+
+### Who has it
+
+- Owners who bake and serve at once
+- Staff who **answer the phone** mid-shift
+- [x] Interviewed three bakeries
+- [ ] Priced an order tablet
+
+### Sources
+
+See the [interview notes](document:interview_notes) and \`orders.csv\`.
+
+> Half of Saturday's cake orders came in after noon.
+
+| Day | Orders | Missed |
+| --- | --- | --- |
+| Friday | 41 | 3 |
+| Saturday | 66 | 9 |
+`;
+
+const meta = {
+  title: "Components/Markdown",
+  component: Markdown,
+  args: { source: SAMPLE },
+} satisfies Meta<typeof Markdown>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** A `document:` link shows as its words. */
+export const Document: Story = {};
+
+/** A `document:` link opens the document. */
+export const WithDocumentLinks: Story = {
+  args: { openDocument: fn() },
+};
diff --git a/apps/web/src/markdown.tsx b/apps/web/src/markdown.tsx
index 2ade90b1..92d4d763 100644
--- a/apps/web/src/markdown.tsx
+++ b/apps/web/src/markdown.tsx
@@ -13,6 +13,7 @@
  */
 import type { JSX, ReactNode } from "react";
 import { DEL, END, INS } from "./revisions.ts";
+import styles from "./markdown.module.css";
 
 /**
  * Inline spans: code, bold, italic, links, with tracked changes threaded through them.
@@ -57,12 +58,12 @@ function inline(
         images?.get(path) ?? (path.startsWith("data:image/") ? path : null);
       out.push(
         src ? (
-          <figure key={key} className="prose-figure">
+          <figure key={key} className={styles.figure}>
             <img src={src} alt={caption} />
             {caption ? <figcaption>{caption}</figcaption> : null}
           </figure>
         ) : (
-          <em key={key} className="prose-missing-picture">
+          <em key={key} className={styles.missingPicture}>
             {caption || "picture"} (picture in the documents download)
           </em>
         ),
@@ -81,7 +82,8 @@ function inline(
             key={key}
             role="button"
             tabIndex={0}
-            className="artifact-mention"
+            className={styles.mention}
+            data-slot="document-mention"
             onClick={() => openDocument(id)}
             onKeyDown={(event) => {
               if (event.key !== "Enter" && event.key !== " ") return;
@@ -291,17 +293,24 @@ const TASK = /^\[([ xX])\]\s+/;
 
 export function Markdown({
   source,
+  document = false,
   images,
   openDocument,
 }: {
   source: string;
+  /** A document read in the document pane: running text keeps a reading measure. */
+  document?: boolean;
   images?: ReadonlyMap<string, string>;
   /** Opens a `document:` link; without it such a link shows as its words. */
   openDocument?: (id: string) => void;
 }): JSX.Element {
   const blocks = parse(source);
   return (
-    <div className="prose">
+    <div
+      className={styles.prose}
+      data-slot="prose"
+      data-document={document ? "" : undefined}
+    >
       {blocks.map((block, index) => {
         const key = `b${index}`;
         switch (block.kind) {
@@ -333,7 +342,7 @@ export function Markdown({
                 {block.items.map((item, at) => {
                   const task = TASK.exec(item);
                   return task ? (
-                    <li key={`${key}-${at}`} className="task">
+                    <li key={`${key}-${at}`} className={styles.task}>
                       <input
                         type="checkbox"
                         checked={task[1] !== " "}
@@ -376,7 +385,7 @@ export function Markdown({
             );
           case "table":
             return (
-              <div key={key} className="prose-table">
+              <div key={key} className={styles.table} data-slot="prose-table">
                 <table>
                   <thead>
                     <tr>
diff --git a/apps/web/src/pages/approval-fields.module.css b/apps/web/src/pages/approval-fields.module.css
new file mode 100644
index 00000000..5464ef88
--- /dev/null
+++ b/apps/web/src/pages/approval-fields.module.css
@@ -0,0 +1,99 @@
+.fields {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+  width: 100%;
+  min-width: 0;
+}
+
+.fields[data-separated] {
+  margin-top: var(--space-2);
+  padding-top: var(--space-2);
+  border-top: 1px solid var(--wb-border, var(--border));
+}
+
+.row {
+  display: grid;
+  grid-template-columns: 4.75rem minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 0.5rem;
+  width: 100%;
+  min-width: 0;
+  min-height: 1.875rem;
+}
+
+.row[data-variant="form"] {
+  grid-template-columns: 4.75rem minmax(0, 1fr);
+}
+
+.label {
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--muted-fg, var(--wb-muted-foreground));
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.control {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  width: 100%;
+  min-width: 0;
+}
+
+.leanControl {
+  width: 100%;
+  min-width: 0;
+  height: 1.75rem;
+  padding: 0.125rem 0.5rem;
+  font-size: 0.8125rem;
+  border-radius: var(--radius-sm, 0.25rem);
+  border: 1px solid transparent;
+  background: transparent;
+  transition:
+    border-color 120ms ease,
+    background-color 120ms ease;
+}
+
+.leanControl:hover {
+  border-color: var(--border-subtle, var(--border, var(--wb-border)));
+}
+
+.leanControl:focus {
+  border-color: var(--border, var(--wb-border));
+  background: var(--surface, transparent);
+  outline: none;
+}
+
+.leanControl[data-variant="form"] {
+  border: 1px solid var(--wb-border, var(--border));
+  background: var(--wb-background, transparent);
+}
+
+.leanControl[data-variant="form"]:focus {
+  border-color: var(--wb-primary, var(--primary));
+}
+
+.saveButton {
+  height: 1.625rem;
+  padding: 0 0.5rem;
+  font-size: 0.75rem;
+  white-space: nowrap;
+}
+
+.leanButton {
+  height: 1.625rem;
+  padding: 0 0.5rem;
+  font-size: 0.75rem;
+  border: none;
+  background: transparent;
+  color: var(--muted-fg, var(--wb-muted-foreground));
+  box-shadow: none;
+}
+
+.leanButton:hover:not(:disabled) {
+  color: var(--fg, var(--wb-foreground));
+  background: var(--surface-hover, rgba(0, 0, 0, 0.04));
+}
diff --git a/apps/web/src/pages/approval-fields.tsx b/apps/web/src/pages/approval-fields.tsx
new file mode 100644
index 00000000..ccbda10e
--- /dev/null
+++ b/apps/web/src/pages/approval-fields.tsx
@@ -0,0 +1,130 @@
+/**
+ * The compact reviewer fields shared by the approval rounds and the workspace approvals setting:
+ * a stack of label-and-control rows, their borderless controls and their quiet buttons.
+ */
+import { Button, Input } from "@corbits/react-ui";
+import {
+  createContext,
+  useContext,
+  type ComponentProps,
+  type ReactNode,
+} from "react";
+import styles from "./approval-fields.module.css";
+
+type FieldsVariant = "inline" | "form";
+
+/** Which variant of `ApprovalFields` a row or control sits in; outside one it is inline. */
+const FieldsVariantContext = createContext<FieldsVariant>("inline");
+
+/**
+ * A stack of reviewer fields. The `form` variant boxes its controls and drops the action column,
+ * for entering a new reviewer; `separated` rules it off from what sits above.
+ */
+export function ApprovalFields({
+  variant = "inline",
+  separated = false,
+  children,
+  ...props
+}: {
+  variant?: FieldsVariant;
+  separated?: boolean;
+  children: ReactNode;
+} & Pick<ComponentProps<"div">, "role" | "aria-label">) {
+  return (
+    <div
+      {...props}
+      className={styles.fields}
+      data-slot="approval-fields"
+      data-variant={variant}
+      data-separated={separated ? "" : undefined}
+    >
+      <FieldsVariantContext value={variant}>{children}</FieldsVariantContext>
+    </div>
+  );
+}
+
+/** One field: its label, its control, and in the inline variant an action beside it. */
+export function ApprovalField({
+  label,
+  action,
+  title,
+  children,
+}: {
+  label: ReactNode;
+  /** Present (even when null) in the inline variant, so every row keeps its action column. */
+  action?: ReactNode;
+  title?: string;
+  children: ReactNode;
+}) {
+  const variant = useContext(FieldsVariantContext);
+  return (
+    <div
+      className={styles.row}
+      data-slot="approval-field"
+      data-variant={variant}
+    >
+      <span className={styles.label}>{label}</span>
+      <div className={styles.control} title={title}>
+        {children}
+      </div>
+      {action === undefined ? null : <div>{action}</div>}
+    </div>
+  );
+}
+
+/** A borderless text input that shows its edge on hover and focus, boxed in a form. */
+export function LeanInput(
+  props: Omit<ComponentProps<typeof Input>, "className">,
+) {
+  const variant = useContext(FieldsVariantContext);
+  return (
+    <Input
+      {...props}
+      className={styles.leanControl}
+      data-slot="lean-input"
+      data-variant={variant}
+    />
+  );
+}
+
+/** The select that matches `LeanInput`. */
+export function LeanSelect(props: Omit<ComponentProps<"select">, "className">) {
+  const variant = useContext(FieldsVariantContext);
+  return (
+    <select
+      {...props}
+      className={styles.leanControl}
+      data-slot="lean-select"
+      data-variant={variant}
+    />
+  );
+}
+
+/** The outlined button that saves one field or adds an entry. */
+export function FieldSaveButton(
+  props: Omit<ComponentProps<typeof Button>, "className" | "size" | "variant">,
+) {
+  return (
+    <Button
+      {...props}
+      size="sm"
+      variant="outline"
+      className={styles.saveButton}
+      data-action="save"
+    />
+  );
+}
+
+/** A quiet text button for the secondary actions around reviewers. */
+export function LeanButton(
+  props: Omit<ComponentProps<typeof Button>, "className" | "size" | "variant">,
+) {
+  return (
+    <Button
+      {...props}
+      size="sm"
+      variant="ghost"
+      className={styles.leanButton}
+    />
+  );
+}
diff --git a/apps/web/src/pages/invite-accept.tsx b/apps/web/src/pages/invite-accept.tsx
index a63ab06f..9f3934c7 100644
--- a/apps/web/src/pages/invite-accept.tsx
+++ b/apps/web/src/pages/invite-accept.tsx
@@ -82,7 +82,7 @@ export function InvitationAccept({ invitationId }: { invitationId: string }) {
 
   if (accepted !== null) {
     return (
-      <div className="invite-accept">
+      <div>
         <Mark size={26} />
         <h1>Welcome in</h1>
         <p>
@@ -98,7 +98,7 @@ export function InvitationAccept({ invitationId }: { invitationId: string }) {
 
   if (failed !== null) {
     return (
-      <div className="invite-accept">
+      <div>
         <Mark size={26} />
         <h1>This invitation could not be read</h1>
         <Banner tone="error" title={failed} />
@@ -109,7 +109,7 @@ export function InvitationAccept({ invitationId }: { invitationId: string }) {
 
   if (invitation === null) {
     return (
-      <div className="invite-accept">
+      <div>
         <Mark size={26} />
         <h1>Opening the invitation…</h1>
       </div>
@@ -119,37 +119,37 @@ export function InvitationAccept({ invitationId }: { invitationId: string }) {
   const pending = invitation.state === "pending";
 
   return (
-    <div className="invite-accept">
+    <div>
       <Mark size={26} />
       <h1>You're invited</h1>
-      <div className="section">
-        <div className="section-body">
-          <div className="row">
-            <div className="k">
+      <div>
+        <div>
+          <div>
+            <div>
               <b>Invited by</b>
             </div>
-            <span className="v">{invitation.invitedBy}</span>
+            <span>{invitation.invitedBy}</span>
           </div>
-          <div className="row">
-            <div className="k">
+          <div>
+            <div>
               <b>Workspace</b>
             </div>
-            <span className="v">{invitation.tenantId}</span>
+            <span>{invitation.tenantId}</span>
           </div>
-          <div className="row">
-            <div className="k">
+          <div>
+            <div>
               <b>Role</b>
             </div>
-            <span className="v">{roleName ?? invitation.roleId}</span>
+            <span>{roleName ?? invitation.roleId}</span>
           </div>
-          <div className="row">
-            <div className="k">
+          <div>
+            <div>
               <b>Email</b>
             </div>
-            <span className="v">{invitation.email}</span>
+            <span>{invitation.email}</span>
           </div>
-          <div className="row">
-            <div className="k">
+          <div>
+            <div>
               <b>State</b>
             </div>
             <StateLabel tone={pending ? "info" : "warning"}>
diff --git a/apps/web/src/pages/model-setup.module.css b/apps/web/src/pages/model-setup.module.css
new file mode 100644
index 00000000..b531557a
--- /dev/null
+++ b/apps/web/src/pages/model-setup.module.css
@@ -0,0 +1,57 @@
+/* Connect a model: the sign-in column's rhythm and LoginForm's heading, for
+   the one screen before the project list. */
+.setup {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+}
+
+.setup hgroup {
+  display: grid;
+  gap: var(--space-2);
+}
+
+.setup h1 {
+  margin: 0;
+  font-size: 1.875rem;
+  font-weight: 600;
+  line-height: 1;
+  letter-spacing: -0.015em;
+  text-wrap: balance;
+}
+
+.setup hgroup p,
+.later p {
+  margin: 0;
+  color: var(--wb-muted-foreground);
+  font-size: 0.875rem;
+  line-height: 1.5;
+}
+
+/* No cursor here: the global button rules give an enabled tile the hand and a
+   disabled one not-allowed. */
+.tiles > button {
+  gap: var(--space-2);
+  min-height: 7.5rem;
+  padding: var(--space-4);
+  border-radius: var(--radius-md);
+}
+
+.tiles > button svg {
+  width: 24px;
+  height: 24px;
+  color: var(--wb-foreground);
+}
+
+.divider {
+  margin: 0;
+  border: 0;
+  border-top: 1px solid var(--wb-border);
+}
+
+.later {
+  display: grid;
+  justify-items: center;
+  gap: var(--space-1);
+  text-align: center;
+}
diff --git a/apps/web/src/pages/model-setup.tsx b/apps/web/src/pages/model-setup.tsx
index 13ddfe08..523b090a 100644
--- a/apps/web/src/pages/model-setup.tsx
+++ b/apps/web/src/pages/model-setup.tsx
@@ -14,13 +14,14 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@corbits/react-ui/ui/dialog";
-import { Banner, Mark, QUIET_CONTROL } from "../components.jsx";
+import { Banner, Mark, QuietButton } from "../components.jsx";
 import {
   AddProviderDialog,
   useModelCatalog,
   useSubscriptionLogins,
-} from "./providers.jsx";
-import { ProviderLogo } from "./provider-logos.tsx";
+} from "./settings/providers.jsx";
+import { ProviderLogo } from "./settings/provider-logos.tsx";
+import styles from "./model-setup.module.css";
 
 const copy = wording.providers;
 
@@ -90,7 +91,7 @@ function ProviderTiles({
       {fault}
       <KindCardGrid
         label={copy.loginGroup}
-        className="provider-tiles"
+        className={styles.tiles}
         options={logins.map((provider) => ({
           id: provider.id,
           title: provider.label,
@@ -103,10 +104,10 @@ function ProviderTiles({
           if (provider) void signIn(provider);
         }}
       />
-      <hr className="model-setup-divider" />
+      <hr className={styles.divider} />
       <KindCardGrid
         label={copy.apiKeyGroup}
-        className="provider-tiles"
+        className={styles.tiles}
         options={apiKeyProviders.map((provider) => ({
           id: provider.id,
           title: provider.label,
@@ -152,16 +153,14 @@ export function ModelSetup({
       }
       panel={<DitherCanvas />}
     >
-      <div className="model-setup">
+      <div className={styles.setup}>
         <hgroup>
           <h1>{copy.connect}</h1>
           <p>{copy.noneHint}</p>
         </hgroup>
         <ProviderTiles subscriptions={subscriptions} onConnected={connected} />
-        <div className="model-setup-later">
-          <button
-            type="button"
-            className={QUIET_CONTROL}
+        <div className={styles.later}>
+          <QuietButton
             onClick={() => {
               try {
                 sessionStorage.setItem(MODEL_SETUP_LATER_KEY, "1");
@@ -176,7 +175,7 @@ export function ModelSetup({
             }}
           >
             {wording.action.skipForNow}
-          </button>
+          </QuietButton>
           <p>{copy.addLater}</p>
         </div>
       </div>
@@ -207,7 +206,7 @@ export function EnableAiDialog({
           <DialogTitle>{copy.connect}</DialogTitle>
           <DialogDescription>{copy.noneHint}</DialogDescription>
         </DialogHeader>
-        <DialogBody className="model-setup">
+        <DialogBody className={styles.setup}>
           <ProviderTiles
             subscriptions={subscriptions}
             onConnected={connected}
diff --git a/apps/web/src/pages/profile-select.test.tsx b/apps/web/src/pages/profile-select.test.tsx
index c041d0cb..54ad31fa 100644
--- a/apps/web/src/pages/profile-select.test.tsx
+++ b/apps/web/src/pages/profile-select.test.tsx
@@ -9,7 +9,7 @@ import type {
 import { wording } from "../config.ts";
 import { keys } from "../queries/keys.ts";
 import { NewProjectProfile } from "./profile-select.tsx";
-import { Profiles, available, editorProviders } from "./profiles.tsx";
+import { Profiles, available, editorProviders } from "./settings/profiles.tsx";
 
 function tiers(provider: string): Tiers {
   const binding = { provider, model: "m", effort: "medium" as const };
diff --git a/apps/web/src/pages/profile-select.tsx b/apps/web/src/pages/profile-select.tsx
index d03fe621..11a95823 100644
--- a/apps/web/src/pages/profile-select.tsx
+++ b/apps/web/src/pages/profile-select.tsx
@@ -19,8 +19,8 @@ import { wording } from "../config.ts";
 import { keys } from "../queries/keys.ts";
 import { workspaceTenantId } from "../api/auth.ts";
 import { productClient } from "../api/transport.ts";
-import { available } from "./profiles.jsx";
-import { useModelCatalog } from "./providers.jsx";
+import { available } from "./settings/profiles.jsx";
+import { useModelCatalog } from "./settings/providers.jsx";
 
 const copy = wording.profiles;
 
diff --git a/apps/web/src/pages/project-cover.module.css b/apps/web/src/pages/project-cover.module.css
new file mode 100644
index 00000000..7312adf9
--- /dev/null
+++ b/apps/web/src/pages/project-cover.module.css
@@ -0,0 +1,58 @@
+/* Each cover mixes two theme colours into the card's own surface, so it stays
+   soft in light mode and does not glare in dark mode. */
+.cover {
+  --cover-1: color-mix(in oklab, var(--cover-a) 65%, var(--wb-card));
+  --cover-2: color-mix(in oklab, var(--cover-b) 45%, var(--wb-card));
+  display: block;
+  aspect-ratio: 16 / 7;
+  background: linear-gradient(
+    var(--cover-angle),
+    var(--cover-1),
+    var(--cover-2)
+  );
+}
+
+/* A cover that shows the mockup holds the frame's scaled-down still of its first page. */
+.cover[data-mockup] {
+  position: relative;
+  overflow: hidden;
+}
+
+.cover[data-pattern="radial"] {
+  background: radial-gradient(
+    circle at var(--cover-x) var(--cover-y),
+    var(--cover-1),
+    var(--cover-2) 75%
+  );
+}
+
+.cover[data-pattern="stripes"] {
+  background: repeating-linear-gradient(
+    var(--cover-angle),
+    var(--cover-1) 0 14px,
+    var(--cover-2) 14px 28px
+  );
+}
+
+.cover[data-pattern="rings"] {
+  background: repeating-radial-gradient(
+    circle at var(--cover-x) var(--cover-y),
+    var(--cover-1) 0 12px,
+    var(--cover-2) 12px 24px
+  );
+}
+
+.cover[data-pattern="mesh"] {
+  background:
+    radial-gradient(
+      at var(--cover-x) var(--cover-y),
+      var(--cover-1),
+      transparent 60%
+    ),
+    radial-gradient(
+      at calc(100% - var(--cover-x)) calc(100% - var(--cover-y)),
+      var(--cover-2),
+      transparent 60%
+    ),
+    color-mix(in oklab, var(--cover-b) 15%, var(--wb-card));
+}
diff --git a/apps/web/src/pages/project-cover.tsx b/apps/web/src/pages/project-cover.tsx
index b6f63fc0..a9402550 100644
--- a/apps/web/src/pages/project-cover.tsx
+++ b/apps/web/src/pages/project-cover.tsx
@@ -10,6 +10,7 @@ import { listProjectArtifacts, readArtifact } from "../api/artifacts.ts";
 import { keys } from "../queries/keys.ts";
 import { firstPage, parseBundle } from "./workspace/design-preview.tsx";
 import { GuiFrame } from "./workspace/gui-frame.tsx";
+import styles from "./project-cover.module.css";
 
 const COVER_STALE_MS = 5 * 60_000;
 // A tile a screen's height away starts reading, so it is there by the time it scrolls in.
@@ -91,14 +92,15 @@ export function ProjectCover({
     // A still picture: inert, so it neither takes focus nor eats the click that opens the project.
     <span
       ref={ref}
-      className="library-cover"
+      className={styles.cover}
+      data-slot="project-cover"
       data-pattern={pattern}
       data-mockup={html === null ? undefined : ""}
       style={style}
       aria-hidden="true"
       inert
     >
-      {html === null ? null : <GuiFrame html={html} scripts />}
+      {html === null ? null : <GuiFrame html={html} scripts thumbnail />}
     </span>
   );
 }
diff --git a/apps/web/src/pages/project-library.css b/apps/web/src/pages/project-library.css
deleted file mode 100644
index 0f0a40a7..00000000
--- a/apps/web/src/pages/project-library.css
+++ /dev/null
@@ -1,218 +0,0 @@
-/**
- * The Projects page: filter chips over a grid of cards. All rules are under
- * `.library-page`.
- */
-
-.library-page {
-  display: grid;
-  gap: var(--space-4);
-  align-content: start;
-}
-
-.library-page .library-filters {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--space-2);
-}
-
-.library-page .library-note {
-  margin: 0;
-  color: var(--wb-muted-foreground);
-}
-
-.library-page .library-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
-  gap: var(--space-4);
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.library-page .library-card {
-  position: relative;
-  overflow: hidden;
-  border: 1px solid var(--wb-border);
-  border-radius: var(--radius-panel);
-  background: var(--wb-card);
-  transition: border-color 120ms ease;
-}
-
-.library-page .library-card:hover,
-.library-page .library-card:focus-within {
-  border-color: var(--wb-border-strong);
-}
-
-.library-page .library-card-open {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  padding: 0;
-  border: 0;
-  background: transparent;
-  color: inherit;
-  font: inherit;
-  text-align: left;
-  cursor: pointer;
-}
-
-.library-page .library-card-open:focus-visible {
-  outline: 2px solid var(--wb-ring);
-  outline-offset: -2px;
-}
-
-.library-page .library-card-body {
-  display: grid;
-  gap: var(--space-2);
-  padding: var(--space-3) var(--space-4) var(--space-4);
-}
-
-.library-page .library-card-title {
-  overflow: hidden;
-  font-weight: 600;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.library-page .library-card-meta {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: var(--space-2);
-  padding-right: var(--space-6);
-  color: var(--wb-muted-foreground);
-  font-size: 0.8125rem;
-}
-
-.library-page .library-card-menu {
-  position: absolute;
-  right: var(--space-2);
-  bottom: var(--space-3);
-}
-
-/* A cover that shows the mockup lays its first page out at four times the tile's width, the way a
-   desktop would, and scales it down. The frame is white like every other mockup frame, so a page
-   that sets no background of its own reads the same here as in the themes pane. */
-.library-page .library-cover[data-mockup] {
-  position: relative;
-  overflow: hidden;
-}
-
-.library-page .library-cover .gui-frame {
-  position: absolute;
-  inset: 0 auto auto 0;
-  width: 400%;
-  height: 400%;
-  min-height: 0;
-  border: 0;
-  background: #fff;
-  transform: scale(0.25);
-  transform-origin: 0 0;
-  pointer-events: none;
-}
-
-/* Each cover mixes two theme colours into the card's own surface, so it stays
-   soft in light mode and does not glare in dark mode. */
-.library-page .library-cover {
-  --cover-1: color-mix(in oklab, var(--cover-a) 65%, var(--wb-card));
-  --cover-2: color-mix(in oklab, var(--cover-b) 45%, var(--wb-card));
-  display: block;
-  aspect-ratio: 16 / 7;
-  background: linear-gradient(
-    var(--cover-angle),
-    var(--cover-1),
-    var(--cover-2)
-  );
-}
-
-.library-page .library-cover[data-pattern="radial"] {
-  background: radial-gradient(
-    circle at var(--cover-x) var(--cover-y),
-    var(--cover-1),
-    var(--cover-2) 75%
-  );
-}
-
-.library-page .library-cover[data-pattern="stripes"] {
-  background: repeating-linear-gradient(
-    var(--cover-angle),
-    var(--cover-1) 0 14px,
-    var(--cover-2) 14px 28px
-  );
-}
-
-.library-page .library-cover[data-pattern="rings"] {
-  background: repeating-radial-gradient(
-    circle at var(--cover-x) var(--cover-y),
-    var(--cover-1) 0 12px,
-    var(--cover-2) 12px 24px
-  );
-}
-
-.library-page .library-cover[data-pattern="mesh"] {
-  background:
-    radial-gradient(
-      at var(--cover-x) var(--cover-y),
-      var(--cover-1),
-      transparent 60%
-    ),
-    radial-gradient(
-      at calc(100% - var(--cover-x)) calc(100% - var(--cover-y)),
-      var(--cover-2),
-      transparent 60%
-    ),
-    color-mix(in oklab, var(--cover-b) 15%, var(--wb-card));
-}
-
-.library-page .library-view {
-  display: inline-flex;
-  gap: var(--space-1);
-}
-
-/* As a list: one line per project, a small swatch of its cover at the start,
-   the stage and last activity after the name, and the menu at the end. */
-.library-page .library-grid[data-view="rows"] {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-2);
-}
-
-.library-page .library-grid[data-view="rows"] .library-card-open {
-  flex-direction: row;
-  align-items: center;
-  gap: var(--space-3);
-  padding: var(--space-2) var(--space-12) var(--space-2) var(--space-3);
-}
-
-.library-page .library-grid[data-view="rows"] .library-cover {
-  flex: none;
-  width: 2rem;
-  aspect-ratio: 1;
-  border-radius: var(--radius-lg);
-}
-
-.library-page .library-grid[data-view="rows"] .library-card-body {
-  display: flex;
-  flex: 1;
-  min-width: 0;
-  align-items: center;
-  gap: var(--space-3);
-  padding: 0;
-}
-
-.library-page .library-grid[data-view="rows"] .library-card-title {
-  flex: 1;
-  min-width: 0;
-}
-
-.library-page .library-grid[data-view="rows"] .library-card-meta {
-  flex-wrap: nowrap;
-  padding-right: 0;
-  white-space: nowrap;
-}
-
-.library-page .library-grid[data-view="rows"] .library-card-menu {
-  top: 50%;
-  bottom: auto;
-  transform: translateY(-50%);
-}
diff --git a/apps/web/src/pages/project-library.module.css b/apps/web/src/pages/project-library.module.css
new file mode 100644
index 00000000..2ecd8314
--- /dev/null
+++ b/apps/web/src/pages/project-library.module.css
@@ -0,0 +1,141 @@
+/* The Projects page: filter chips over a grid of cards. */
+
+.page {
+  display: grid;
+  gap: var(--space-4);
+  align-content: start;
+}
+
+.filters {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+}
+
+.note {
+  margin: 0;
+  color: var(--wb-muted-foreground);
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
+  gap: var(--space-4);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.card {
+  position: relative;
+  overflow: hidden;
+  border: 1px solid var(--wb-border);
+  border-radius: var(--radius-panel);
+  background: var(--wb-card);
+  transition: border-color 120ms ease;
+}
+
+.card:hover,
+.card:focus-within {
+  border-color: var(--wb-border-strong);
+}
+
+.cardOpen {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.cardOpen:focus-visible {
+  outline: 2px solid var(--wb-ring);
+  outline-offset: -2px;
+}
+
+.cardBody {
+  display: grid;
+  gap: var(--space-2);
+  padding: var(--space-3) var(--space-4) var(--space-4);
+}
+
+.cardTitle {
+  overflow: hidden;
+  font-weight: 600;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.cardMeta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-2);
+  padding-right: var(--space-6);
+  color: var(--wb-muted-foreground);
+  font-size: 0.8125rem;
+}
+
+.cardMenu {
+  position: absolute;
+  right: var(--space-2);
+  bottom: var(--space-3);
+}
+
+.view {
+  display: inline-flex;
+  gap: var(--space-1);
+}
+
+/* As a list: one line per project, a small swatch of its cover at the start,
+   the stage and last activity after the name, and the menu at the end. */
+.grid[data-view="rows"] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+.grid[data-view="rows"] .cardOpen {
+  flex-direction: row;
+  align-items: center;
+  gap: var(--space-3);
+  padding: var(--space-2) var(--space-12) var(--space-2) var(--space-3);
+}
+
+.grid[data-view="rows"] [data-slot="project-cover"] {
+  flex: none;
+  width: 2rem;
+  aspect-ratio: 1;
+  border-radius: var(--radius-lg);
+}
+
+.grid[data-view="rows"] .cardBody {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  align-items: center;
+  gap: var(--space-3);
+  padding: 0;
+}
+
+.grid[data-view="rows"] .cardTitle {
+  flex: 1;
+  min-width: 0;
+}
+
+.grid[data-view="rows"] .cardMeta {
+  flex-wrap: nowrap;
+  padding-right: 0;
+  white-space: nowrap;
+}
+
+.grid[data-view="rows"] .cardMenu {
+  top: 50%;
+  bottom: auto;
+  transform: translateY(-50%);
+}
diff --git a/apps/web/src/pages/project-library.tsx b/apps/web/src/pages/project-library.tsx
index 737875cc..d86e0cd3 100644
--- a/apps/web/src/pages/project-library.tsx
+++ b/apps/web/src/pages/project-library.tsx
@@ -31,7 +31,7 @@ import type { ProjectSummary } from "../api/types.ts";
 import type { NoticeAction } from "../components.jsx";
 import { ProjectCover } from "./project-cover.tsx";
 import { ProjectMenu } from "./project-menu.jsx";
-import "./project-library.css";
+import styles from "./project-library.module.css";
 
 type Filter = ProjectStage | "archived";
 const FILTERS: readonly Filter[] = ["idea", "building", "shipped", "archived"];
@@ -100,7 +100,7 @@ function ViewToggle({
 }) {
   const text = wording.library.view;
   return (
-    <div className="library-view" role="group" aria-label={text.label}>
+    <div className={styles.view} role="group" aria-label={text.label}>
       <Button
         variant={mode === "grid" ? "outline" : "ghost"}
         size="icon"
@@ -173,12 +173,11 @@ export function ProjectLibrary({
     changed.current = null;
     if (shown.some((project) => project.id === pending.id)) return;
     const cards =
-      section.current?.querySelectorAll<HTMLElement>(".library-card-open") ??
-      [];
+      section.current?.querySelectorAll<HTMLElement>("[data-card-open]") ?? [];
     const next =
       cards[Math.min(pending.index, cards.length - 1)] ??
       section.current?.querySelector<HTMLElement>(
-        ".library-filters [aria-pressed='true']",
+        "[data-filters] [aria-pressed='true']",
       );
     next?.focus();
   }, [projects, shown]);
@@ -186,7 +185,7 @@ export function ProjectLibrary({
   let body: ReactNode;
   if (!loaded)
     body = (
-      <p role="status" className="library-note">
+      <p role="status" className={styles.note}>
         {failed ? wording.library.failed : wording.library.loading}
       </p>
     );
@@ -220,14 +219,15 @@ export function ProjectLibrary({
       );
   else
     body = (
-      <ul className="library-grid" data-view={view}>
+      <ul className={styles.grid} data-view={view}>
         {shown.map((project, index) => {
           const cover = coverOf(project.id);
           return (
-            <li key={project.id} className="library-card">
+            <li key={project.id} className={styles.card}>
               <button
                 type="button"
-                className="library-card-open"
+                className={styles.cardOpen}
+                data-card-open=""
                 onClick={() => onOpen(project.id)}
               >
                 <ProjectCover
@@ -236,9 +236,9 @@ export function ProjectLibrary({
                   style={cover.style}
                   mockup={view === "grid"}
                 />
-                <span className="library-card-body">
-                  <span className="library-card-title">{project.title}</span>
-                  <span className="library-card-meta">
+                <span className={styles.cardBody}>
+                  <span className={styles.cardTitle}>{project.title}</span>
+                  <span className={styles.cardMeta}>
                     <Badge
                       tone={
                         project.archivedAt
@@ -266,7 +266,7 @@ export function ProjectLibrary({
                   <Button
                     variant="ghost"
                     size="icon"
-                    className="library-card-menu"
+                    className={styles.cardMenu}
                     aria-label={wording.shell.projectOptions(project.title)}
                   >
                     <Ellipsis aria-hidden="true" />
@@ -289,13 +289,14 @@ export function ProjectLibrary({
       </ul>
     );
   return (
-    <section className="library-page" ref={section}>
+    <section className={styles.page} ref={section}>
       <LibraryPageHeader
         title={wording.library.title}
         subtitle={wording.library.subtitle}
       >
         <div
-          className="library-filters"
+          className={styles.filters}
+          data-filters=""
           role="group"
           aria-label={wording.library.filterLabel}
         >
diff --git a/apps/web/src/pages/project-menu.module.css b/apps/web/src/pages/project-menu.module.css
new file mode 100644
index 00000000..7b376fce
--- /dev/null
+++ b/apps/web/src/pages/project-menu.module.css
@@ -0,0 +1,37 @@
+.info {
+  width: min(52rem, calc(100vw - 2rem));
+  max-width: none;
+}
+
+.facts {
+  margin-bottom: var(--space-4);
+}
+
+.facts > div {
+  display: grid;
+  grid-template-columns: 144px minmax(0, 1fr);
+  gap: var(--space-4);
+  padding: var(--space-1) 0;
+  border-bottom: 1px solid var(--wb-border);
+}
+
+.facts > div:last-child {
+  border-bottom: 0;
+}
+
+.facts > div > dt {
+  margin: 0;
+}
+
+.facts > div > dd {
+  margin: 0;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+@media (max-width: 640px) {
+  .facts > div {
+    grid-template-columns: 1fr;
+    gap: var(--space-1);
+  }
+}
diff --git a/apps/web/src/pages/project-menu.tsx b/apps/web/src/pages/project-menu.tsx
index a73e80e7..2ccae1e3 100644
--- a/apps/web/src/pages/project-menu.tsx
+++ b/apps/web/src/pages/project-menu.tsx
@@ -37,7 +37,14 @@ import {
   shipProject,
   updateProject,
 } from "../api/projects.ts";
-import { Button, type NoticeAction } from "../components.jsx";
+import {
+  Button,
+  DangerMenuItem,
+  Fault,
+  Field,
+  type NoticeAction,
+} from "../components.jsx";
+import styles from "./project-menu.module.css";
 import { Dictated } from "../dictation.jsx";
 
 /** What the menu needs of a project: the summaries (rail, top bar) both have it. */
@@ -186,8 +193,7 @@ export function ProjectMenu({
           </MenuItem>
           <MenuSeparator />
           {confirming ? (
-            <MenuItem
-              className="menu-danger"
+            <DangerMenuItem
               onSelect={() =>
                 void act(async () => {
                   await archiveProject(project.id);
@@ -196,17 +202,16 @@ export function ProjectMenu({
               }
             >
               Yes, delete it
-            </MenuItem>
+            </DangerMenuItem>
           ) : (
-            <MenuItem
-              className="menu-danger"
+            <DangerMenuItem
               onSelect={(event) => {
                 event.preventDefault();
                 setConfirming(true);
               }}
             >
               Delete…
-            </MenuItem>
+            </DangerMenuItem>
           )}
         </MenuContent>
       </Menu>
@@ -214,7 +219,6 @@ export function ProjectMenu({
         // Portaled, but React-nested in the host: its events bubble to a
         // card face's handlers unless stopped here, the same as the menu's.
         <div
-          className="card-dialog"
           onClick={(event) => event.stopPropagation()}
           onPointerDown={(event) => event.stopPropagation()}
           onContextMenu={(event) => event.stopPropagation()}
@@ -231,7 +235,6 @@ export function ProjectMenu({
       ) : null}
       {updating ? (
         <div
-          className="card-dialog"
           onClick={(event) => event.stopPropagation()}
           onPointerDown={(event) => event.stopPropagation()}
           onContextMenu={(event) => event.stopPropagation()}
@@ -245,7 +248,6 @@ export function ProjectMenu({
       ) : null}
       {exporting ? (
         <div
-          className="card-dialog"
           onClick={(event) => event.stopPropagation()}
           onPointerDown={(event) => event.stopPropagation()}
           onContextMenu={(event) => event.stopPropagation()}
@@ -352,11 +354,7 @@ function ExportDialog({
           {available === null ? (
             <p role="status">{wording.exportProject.loading}</p>
           ) : null}
-          {failure === null ? null : (
-            <p className="inline-note" role="alert">
-              {failure}
-            </p>
-          )}
+          {failure === null ? null : <Fault>{failure}</Fault>}
           {EXPORT_SECTIONS.map((section) => (
             <Checkbox
               key={section}
@@ -442,12 +440,12 @@ export function ProjectInfoDialog({
 
   return (
     <Dialog open onOpenChange={(open) => (open ? undefined : onClose())}>
-      <DialogContent className="project-info">
+      <DialogContent className={styles.info}>
         <DialogHeader>
           <DialogTitle>{project.title}</DialogTitle>
         </DialogHeader>
         <DialogBody>
-          <div className="field">
+          <Field>
             <label htmlFor={`project-name-${project.id}`}>Name</label>
             <Dictated value={title} onValueChange={setTitle} align="center">
               <Input
@@ -462,8 +460,8 @@ export function ProjectInfoDialog({
                 aria-label="Project name"
               />
             </Dictated>
-          </div>
-          <dl className="version-list project-info-facts">
+          </Field>
+          <dl className={styles.facts}>
             {project.createdAt !== undefined ? (
               <div>
                 <dt>Created</dt>
diff --git a/apps/web/src/pages/home-layout.css b/apps/web/src/pages/projects.module.css
similarity index 57%
rename from apps/web/src/pages/home-layout.css
rename to apps/web/src/pages/projects.module.css
index cfdf64e6..8da60700 100644
--- a/apps/web/src/pages/home-layout.css
+++ b/apps/web/src/pages/projects.module.css
@@ -1,20 +1,6 @@
-/**
- * The New project page: a centred prompt.
- *
- * All rules are under `.home-page` (or `:has(> .home-page)`) so settings
- * rows and the workspace sheet do not share selectors.
- */
+/* The New project page: a centred prompt. */
 
-.canvas-body:has(> .home-page) {
-  padding: 0;
-  max-width: none;
-}
-
-.canvas-body:has(> .home-page) > .banner {
-  margin: var(--space-4) var(--space-6) 0;
-}
-
-.home-page {
+.homePage {
   display: grid;
   align-content: start;
   max-width: 1080px;
@@ -26,7 +12,7 @@
 
 /* The prompt is the page: centred in the pane's height, a reading width
    wide, with the question above it. */
-.home-page .new-project {
+.newProject {
   display: flex;
   flex-direction: column;
   gap: var(--space-4);
@@ -37,14 +23,14 @@
   margin: 0 auto;
 }
 
-.home-page .new-project-head {
+.head {
   display: grid;
   gap: var(--space-2);
   margin-bottom: var(--space-4);
   text-align: center;
 }
 
-.home-page .new-project-head h1 {
+.head h1 {
   margin: 0;
   font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
   font-weight: 700;
@@ -53,56 +39,50 @@
   text-wrap: balance;
 }
 
-.home-page .new-project-head p {
+.head p {
   margin: 0;
   font-size: 1.0625rem;
   color: var(--wb-muted-foreground);
   text-wrap: balance;
 }
 
-.home-page .new-project-actions {
+.actions {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: var(--space-4);
 }
 
-.home-page .new-project-actions [data-slot="button"] {
+.actions [data-slot="button"] {
   font-size: 0.75rem;
   color: var(--wb-muted-foreground);
 }
 
-/* The composer is the workspace's own (workspace-layout.css), only wider:
-   the page already gives it its gutter. */
-.home-page .new-project > .composer {
-  padding: 0;
-}
-
-.home-page .new-project-actions [role="status"] {
+.actions [role="status"] {
   font-size: 0.8125rem;
   color: var(--wb-muted-foreground);
 }
 
-.home-page .import-confirm-actions {
+.importActions {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   margin-top: 12px;
 }
 
-.home-page .import-folder-notes {
+.folderNotes {
   margin: 8px 0 0;
   padding-inline-start: 1.25em;
   font-size: 0.8125rem;
   color: var(--wb-muted-foreground);
 }
 
-.home-page .import-folder-files {
+.folderFiles {
   display: grid;
   gap: 4px;
   margin-top: 12px;
 }
 
-.home-page .import-folder-files > p {
+.folderFiles > p {
   margin: 0;
 }
diff --git a/apps/web/src/pages/projects.tsx b/apps/web/src/pages/projects.tsx
index 5eca16a2..3454e4ac 100644
--- a/apps/web/src/pages/projects.tsx
+++ b/apps/web/src/pages/projects.tsx
@@ -30,14 +30,14 @@ import {
   readDirectory,
   type PickedDirectory,
 } from "../api/repository.ts";
-import { Banner, Button } from "../components.jsx";
-import { ConnectProvider } from "./providers.jsx";
+import { Banner, BannerAction, Button } from "../components.jsx";
+import { ConnectProvider } from "./settings/providers.jsx";
 import { NewProjectProfile } from "./profile-select.jsx";
 import { Dictated } from "../dictation.jsx";
 import { useShellReply } from "../flourish.tsx";
-import { COMPOSER_BOX_CLASS } from "./workspace/pane-classes.ts";
+import { Composer } from "../composer.tsx";
 import { HOME_COMPOSER_PLACEHOLDER, canStartProject } from "./home-view.ts";
-import "./home-layout.css";
+import styles from "./projects.module.css";
 import type { ProjectImport } from "@corbits-builder/schemas/project-import";
 import {
   DOCUMENT_LABELS,
@@ -219,22 +219,25 @@ export function Projects({
   };
 
   return (
-    <div className="home-page">
-      <section className="new-project" aria-labelledby="new-project-title">
-        <hgroup className="new-project-head">
+    <div className={styles.homePage} data-slot="home-page">
+      <section
+        className={styles.newProject}
+        aria-labelledby="new-project-title"
+      >
+        <hgroup className={styles.head}>
           <h1 id="new-project-title">{wording.newProject.title}</h1>
           <p>{wording.newProject.lead}</p>
         </hgroup>
         {needsProvider ? (
           <Banner tone="warning" title={wording.providers.none}>
             <p>{wording.providers.noneHint}</p>
-            <div className="banner-action">
+            <BannerAction>
               <ConnectProvider onConnected={onChanged} />
-            </div>
+            </BannerAction>
           </Banner>
         ) : null}
-        {/* The project page's composer, the same markup under the same class. */}
-        <div className="composer">
+        {/* The project page's composer, the same frame as a project's. */}
+        <Composer variant="page">
           <Dictated
             value={problem}
             onValueChange={setProblem}
@@ -242,7 +245,6 @@ export function Projects({
           >
             {(mic) => (
               <PromptInput
-                className={COMPOSER_BOX_CLASS}
                 value={problem}
                 onValueChange={setProblem}
                 onSubmit={() => void start()}
@@ -261,9 +263,9 @@ export function Projects({
               </PromptInput>
             )}
           </Dictated>
-        </div>
+        </Composer>
         {shell.reply}
-        <div className="new-project-actions">
+        <div className={styles.actions}>
           {starting ? (
             <ShimmerText role="status">
               {wording.newProject.starting}
@@ -326,7 +328,7 @@ export function Projects({
               Importing with approvals records your own approval of exactly
               these versions.
             </p>
-            <div className="import-confirm-actions">
+            <div className={styles.importActions}>
               <Button
                 variant="primary"
                 onClick={() =>
@@ -406,14 +408,14 @@ function RepositoryBanner({
         <p>{text.folderToWrite(labels(toWrite))}</p>
       ) : null}
       {report.warnings.length > 0 ? (
-        <ul className="import-folder-notes">
+        <ul className={styles.folderNotes}>
           {report.warnings.map((warning) => (
             <li key={warning}>{warning}</li>
           ))}
         </ul>
       ) : null}
       {choices.size > 0 ? (
-        <div className="import-folder-files">
+        <div className={styles.folderFiles}>
           <p>{text.folderLeaveOut}</p>
           {[...choices].map(([path, reason]) => (
             <Checkbox
@@ -426,7 +428,7 @@ function RepositoryBanner({
           ))}
         </div>
       ) : null}
-      <div className="import-confirm-actions">
+      <div className={styles.importActions}>
         <Button variant="primary" disabled={busy || nothing} onClick={onImport}>
           {text.folderImport}
         </Button>
diff --git a/apps/web/src/pages/settings-layout.css b/apps/web/src/pages/settings-layout.css
deleted file mode 100644
index 571d6f10..00000000
--- a/apps/web/src/pages/settings-layout.css
+++ /dev/null
@@ -1,312 +0,0 @@
-/*
- * Settings page body — the mockup's section/row language, scoped so it cannot
- * collide with `.field` / `.settings-section` in the shared sheet. Rows sit
- * on the page rather than in bordered cards; space separates them, not rules.
- */
-.settings-page {
-  max-width: 720px;
-  width: 100%;
-  min-width: 0;
-  margin: 0 auto;
-  padding: var(--space-8) var(--space-6) var(--space-12);
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-6);
-}
-
-.settings-page .settings-tabs {
-  gap: var(--space-8);
-}
-
-.settings-page .settings-tabs > [role="tablist"] {
-  flex-wrap: nowrap;
-  overflow-x: auto;
-  scrollbar-width: none;
-  border-bottom-color: color-mix(in srgb, var(--border) 60%, transparent);
-}
-
-.settings-page .settings-tabs [role="tab"] {
-  flex: none;
-  white-space: nowrap;
-}
-
-.settings-page .settings-tabs > [role="tabpanel"] {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-12);
-  outline: none;
-}
-
-.settings-page > h1 {
-  margin: 0;
-  font-size: 22px;
-  font-weight: 700;
-}
-
-.settings-page .section {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-3);
-}
-
-.settings-page .section-head {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-1);
-}
-
-.settings-page .section-head h2 {
-  margin: 0;
-  font-size: 15px;
-  font-weight: 700;
-}
-
-.settings-page .section-head p {
-  margin: 0;
-  font-size: 13px;
-  color: var(--muted-foreground);
-}
-
-.settings-page .section-body {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-1);
-}
-
-.settings-page .row,
-.settings-rows .row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--space-4);
-  padding: var(--space-3) 0;
-  font-size: 14px;
-}
-
-.settings-page .row .k,
-.settings-rows .row .k {
-  display: flex;
-  flex-direction: column;
-  gap: 1px;
-  min-width: 0;
-}
-
-.settings-page .row .k b,
-.settings-rows .row .k b {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--space-2);
-  font-weight: 600;
-  font-size: 13.5px;
-}
-
-.settings-page .row .k span,
-.settings-rows .row .k span {
-  font-size: 12px;
-  color: var(--muted-foreground);
-  font-family: var(--font-mono);
-}
-
-.settings-page .row .v,
-.settings-rows .row .v {
-  font-family: var(--font-mono);
-  font-size: 12px;
-  color: var(--muted-foreground);
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  flex-wrap: wrap;
-  gap: var(--space-3);
-  flex-shrink: 0;
-  max-width: min(420px, 100%);
-}
-
-.settings-page input.field,
-.settings-rows input.field {
-  display: block;
-  font-family: var(--font-mono);
-  font-size: 12.5px;
-  border: 1px solid var(--border-strong);
-  border-radius: var(--radius-md);
-  background: var(--background);
-  color: var(--foreground);
-  padding: 6px 10px;
-  width: 220px;
-  max-width: 100%;
-  outline: none;
-}
-
-.settings-page input.field:focus,
-.settings-rows input.field:focus {
-  border-color: var(--primary);
-}
-
-.settings-page .section-body > .banner,
-.settings-page .section-body > .inline-note,
-.settings-page .section-body > p {
-  margin: var(--space-2) 0;
-}
-
-.settings-page .section-body > .inline-note,
-.settings-page .section-body > p {
-  font-size: 13px;
-  color: var(--muted-foreground);
-}
-
-.settings-page .invite-form {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-end;
-  gap: var(--space-2);
-}
-
-/* At phone width a row's controls drop under its label instead of squeezing
-   it to one word per line, and the canvas's own padding is the gutter. */
-@media (max-width: 560px) {
-  .settings-page {
-    padding: var(--space-4) 0 var(--space-12);
-  }
-
-  .settings-page .row,
-  .settings-rows .row {
-    flex-wrap: wrap;
-  }
-
-  .settings-page .row .v,
-  .settings-rows .row .v {
-    flex-shrink: 1;
-    justify-content: flex-start;
-  }
-
-  .settings-page .invite-form {
-    justify-content: flex-start;
-  }
-}
-
-.settings-page .quiet-state,
-.settings-rows .quiet-state {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--space-2);
-  flex: none;
-  font-size: 13px;
-  color: var(--muted-foreground);
-}
-
-.profile-role {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: var(--space-2);
-  margin: 0;
-  padding: 0;
-  border: 0;
-  min-width: 0;
-}
-
-.profile-role > legend {
-  grid-column: 1 / -1;
-  padding: 0 0 6px;
-  font-size: 13px;
-  font-weight: 600;
-}
-
-@media (max-width: 520px) {
-  .profile-role {
-    grid-template-columns: minmax(0, 1fr);
-  }
-}
-
-/* Settings rows in a dialog: the body's own gap would double the rows' spacing, and rows sit a
-   little closer so a whole form fits without scrolling. */
-.provider-form.settings-rows {
-  gap: 0;
-}
-
-.provider-form.settings-rows .row {
-  padding: var(--space-2) 0;
-}
-
-/* A custom endpoint's API types: three compact choices on one line, the path each one calls. */
-.api-options {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: var(--space-2);
-  padding-bottom: var(--space-1);
-}
-
-.api-options .provider-hint {
-  font-family: var(--font-mono);
-  font-size: 12px;
-}
-
-/* A custom provider's models, listed under its row. */
-.custom-models {
-  padding-left: var(--space-4);
-}
-
-.settings-page input.field.token-field,
-.settings-rows input.field.token-field,
-.token-field {
-  width: 104px;
-}
-
-.token-head {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--space-1);
-  font-family: var(--font-sans);
-}
-
-.token-remove {
-  width: 2.25rem;
-  flex: none;
-}
-
-.models-toggle {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--space-1);
-}
-
-@media (max-width: 560px) {
-  .settings-page input.field.token-field,
-  .settings-rows input.field.token-field,
-  .token-field {
-    width: 88px;
-  }
-
-  .custom-models {
-    padding-left: 0;
-  }
-}
-
-@media (max-width: 520px) {
-  .api-options {
-    grid-template-columns: minmax(0, 1fr);
-  }
-}
-
-.settings-page .about-subhead {
-  margin: var(--space-2) 0 0;
-  font-size: 13.5px;
-  font-weight: 600;
-}
-
-.settings-page .about-lead {
-  font-size: 12.5px;
-  color: var(--muted-foreground);
-}
-
-.settings-page .row .v a {
-  color: inherit;
-  text-decoration: underline;
-  text-underline-offset: 2px;
-}
-
-.settings-page .row.is-highlighted {
-  margin: 0 calc(var(--space-2) * -1);
-  padding-left: var(--space-2);
-  padding-right: var(--space-2);
-  border-radius: var(--radius-md);
-  background: var(--wb-muted);
-}
diff --git a/apps/web/src/pages/settings/collaborators.module.css b/apps/web/src/pages/settings/collaborators.module.css
new file mode 100644
index 00000000..85c7f038
--- /dev/null
+++ b/apps/web/src/pages/settings/collaborators.module.css
@@ -0,0 +1,12 @@
+.inviteForm {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: var(--space-2);
+}
+
+@media (max-width: 560px) {
+  .inviteForm {
+    justify-content: flex-start;
+  }
+}
diff --git a/apps/web/src/pages/collaborators.tsx b/apps/web/src/pages/settings/collaborators.tsx
similarity index 78%
rename from apps/web/src/pages/collaborators.tsx
rename to apps/web/src/pages/settings/collaborators.tsx
index 097499c2..929bd3e5 100644
--- a/apps/web/src/pages/collaborators.tsx
+++ b/apps/web/src/pages/settings/collaborators.tsx
@@ -7,18 +7,32 @@
  * a member directory, so this page lists you and every open invitation and
  * says that other members are not listed.
  */
-import { wording } from "../config.ts";
+import { wording } from "../../config.ts";
 import { useCallback, useEffect, useState } from "react";
 import { toast } from "sonner";
-import { Banner, Button, QuietSelect, StateLabel } from "../components.jsx";
-import { productClient } from "../api/transport.ts";
-import { workspaceTenantId, type HubUser } from "../api/auth.ts";
+import {
+  Banner,
+  Button,
+  InlineNote,
+  QuietSelect,
+  StateLabel,
+} from "../../components.jsx";
+import { productClient } from "../../api/transport.ts";
+import { workspaceTenantId, type HubUser } from "../../api/auth.ts";
 import type { Invitation } from "@corbits-builder/schemas/invitation";
 import {
   ProductApiError,
   type ProductApiClient,
 } from "@corbits-builder/client";
-import { responseCode } from "./workspace/human-fault.ts";
+import { responseCode } from "../workspace/human-fault.ts";
+import { Section } from "@corbits/react-ui";
+import {
+  SettingsInput,
+  SettingsRow,
+  SettingsRowValue,
+} from "./settings-row.tsx";
+import { SettingsSectionBody } from "./settings-section.tsx";
+import styles from "./collaborators.module.css";
 
 type RoleRow = Awaited<
   ReturnType<ProductApiClient["tenantRoles"]>
@@ -131,52 +145,45 @@ export function Collaborators({ user }: { user: HubUser | null }) {
   };
 
   return (
-    <section className="section" aria-label="Collaborators">
-      <div className="section-head">
-        <h2>Collaborators</h2>
-        <p>Who works in this workspace, and what they may do.</p>
-      </div>
-      <div className="section-body">
+    <Section
+      title="Collaborators"
+      description="Who works in this workspace, and what they may do."
+    >
+      <SettingsSectionBody>
         {error ? <Banner tone="error" title={error} /> : null}
         {notice ? <Banner tone="okay" title={notice} /> : null}
-        <div className="row">
-          <div className="k">
-            <b>{user ? user.name : wording.speaker.you}</b>
-            <span>{user ? user.email : ""}</span>
-          </div>
-          <span className="v">
+        <SettingsRow
+          label={user ? user.name : wording.speaker.you}
+          hint={user?.email}
+        >
+          <SettingsRowValue>
             {myRoles === null
               ? "…"
               : myRoles.length > 0
                 ? myRoles.join(", ")
                 : "Member"}
-          </span>
-        </div>
-        <div className="row">
-          <div className="k">
-            <b>Workspace roles</b>
-            <span>
-              What an invitation can grant. Names and grants come from the hub.
-            </span>
-          </div>
-          <span className="v">
+          </SettingsRowValue>
+        </SettingsRow>
+        <SettingsRow
+          label="Workspace roles"
+          hint="What an invitation can grant. Names and grants come from the hub."
+        >
+          <SettingsRowValue>
             {roles === null
               ? "…"
               : roles.length === 0
                 ? "None defined yet."
                 : roles.map((role) => role.name).join(", ")}
-          </span>
-        </div>
-        <div className="row">
-          <div className="k">
-            <b>Invite a collaborator</b>
-            <span>They appear here once they accept their link.</span>
-          </div>
-          <span className="v">
+          </SettingsRowValue>
+        </SettingsRow>
+        <SettingsRow
+          label="Invite a collaborator"
+          hint="They appear here once they accept their link."
+        >
+          <SettingsRowValue>
             {roles !== null && roles.length > 0 ? (
-              <span className="invite-form">
-                <input
-                  className="field"
+              <span className={styles.inviteForm}>
+                <SettingsInput
                   type="email"
                   aria-label="Their email"
                   placeholder="name@example.com"
@@ -211,17 +218,16 @@ export function Collaborators({ user }: { user: HubUser | null }) {
             ) : (
               "No roles are defined yet, so there is nothing to invite into."
             )}
-          </span>
-        </div>
+          </SettingsRowValue>
+        </SettingsRow>
         {invitations !== null && invitations.length > 0 ? (
-          <div className="row">
-            <div className="k">
-              <b>Open invitations</b>
-              <span>Each is a link the invited person accepts from.</span>
-            </div>
-            <span className="v">
+          <SettingsRow
+            label="Open invitations"
+            hint="Each is a link the invited person accepts from."
+          >
+            <SettingsRowValue>
               {invitations.map((invitation) => (
-                <span key={invitation.id} className="invite-row">
+                <span key={invitation.id}>
                   <span>
                     {invitation.email} · {expiresInLabel(invitation.expiresAt)}
                   </span>
@@ -235,15 +241,15 @@ export function Collaborators({ user }: { user: HubUser | null }) {
                   </Button>
                 </span>
               ))}
-            </span>
-          </div>
+            </SettingsRowValue>
+          </SettingsRow>
         ) : null}
-        <p className="inline-note">
+        <InlineNote>
           A full member directory is not part of this workspace yet: the hub
           lists your own memberships, not every principal, so only you and open
           invitations are shown.
-        </p>
-      </div>
-    </section>
+        </InlineNote>
+      </SettingsSectionBody>
+    </Section>
   );
 }
diff --git a/apps/web/src/pages/settings/custom-providers.module.css b/apps/web/src/pages/settings/custom-providers.module.css
new file mode 100644
index 00000000..9f9920f5
--- /dev/null
+++ b/apps/web/src/pages/settings/custom-providers.module.css
@@ -0,0 +1,123 @@
+.dialogForm {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.picker {
+  display: grid;
+  gap: var(--space-2);
+}
+
+.picker[data-layout="cards"] {
+  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
+}
+
+/* A custom endpoint's API types: three compact choices on one line, the path each one calls. */
+.picker[data-layout="apis"] {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  padding-bottom: var(--space-1);
+}
+
+.card {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  padding: 10px 12px;
+  border: 1px solid var(--wb-border);
+  border-radius: var(--radius-md);
+  background: var(--wb-card);
+  color: var(--wb-foreground);
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+  transition:
+    border-color 120ms ease-out,
+    background-color 120ms ease-out;
+}
+
+.card:hover:not(:disabled) {
+  border-color: var(--wb-border-strong);
+}
+
+.card[aria-checked="true"] {
+  border-color: var(--wb-primary);
+  background: color-mix(in srgb, var(--wb-primary) 8%, var(--wb-card));
+  box-shadow: inset 0 0 0 1px var(--wb-primary);
+}
+
+.card:focus-visible {
+  outline: 2px solid var(--wb-ring);
+  outline-offset: 2px;
+}
+
+.card:disabled {
+  cursor: default;
+  opacity: 0.6;
+}
+
+.cardHead {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  font-size: 0.875rem;
+}
+
+.cardLogo {
+  display: inline-grid;
+  place-items: center;
+  flex: none;
+  width: 24px;
+  height: 24px;
+}
+
+.cardLogo > [data-slot="provider-logo"] {
+  width: 20px;
+  height: 20px;
+}
+
+.hint {
+  margin: 0;
+  font-size: 0.8125rem;
+  color: var(--wb-muted-foreground);
+}
+
+.picker[data-layout="apis"] .hint {
+  font-family: var(--font-mono);
+  font-size: 12px;
+}
+
+/* A custom provider's models, listed under its row. */
+.customModels {
+  padding-left: var(--space-4);
+}
+
+/* As wide as the token inputs under it, so each head sits over its column. */
+.tokenHead {
+  width: 104px;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  font-family: var(--font-sans);
+}
+
+.tokenRemove {
+  width: 2.25rem;
+  flex: none;
+}
+
+@media (max-width: 560px) {
+  .tokenHead {
+    width: 88px;
+  }
+
+  .customModels {
+    padding-left: 0;
+  }
+}
+
+@media (max-width: 520px) {
+  .picker[data-layout="apis"] {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
diff --git a/apps/web/src/pages/custom-providers.tsx b/apps/web/src/pages/settings/custom-providers.tsx
similarity index 91%
rename from apps/web/src/pages/custom-providers.tsx
rename to apps/web/src/pages/settings/custom-providers.tsx
index 575097b3..2869fdad 100644
--- a/apps/web/src/pages/custom-providers.tsx
+++ b/apps/web/src/pages/settings/custom-providers.tsx
@@ -8,11 +8,10 @@
  * all. The hub needs one model to add a provider, so the add dialog asks for the first; the rest
  * are managed under the row. The dialog shell and card picker here are the add dialog's too.
  */
-import { wording } from "../config.ts";
+import { wording } from "../../config.ts";
 import { Button as UiButton, Switch } from "@corbits/react-ui";
 import {
   Dialog,
-  DialogBody,
   DialogContent,
   DialogDescription,
   DialogFooter,
@@ -38,11 +37,23 @@ import {
   type ModelCatalog,
   type ModelProvider,
 } from "@corbits-builder/schemas/models";
-import { Button, QuietState } from "../components.jsx";
-import { keys } from "../queries/keys.ts";
-import { productClient } from "../api/transport.ts";
-import { workspaceTenantId } from "../api/auth.ts";
+import {
+  Button,
+  DangerMenuItem,
+  QuietButton,
+  QuietState,
+} from "../../components.jsx";
+import { keys } from "../../queries/keys.ts";
+import { productClient } from "../../api/transport.ts";
+import { workspaceTenantId } from "../../api/auth.ts";
 import { ProviderLogo } from "./provider-logos.tsx";
+import { ProviderFormBody } from "./provider-form.tsx";
+import {
+  SettingsInput,
+  SettingsRow,
+  SettingsRowValue,
+} from "./settings-row.tsx";
+import styles from "./custom-providers.module.css";
 
 const copy = wording.providers;
 const tips = copy.custom.tips;
@@ -164,19 +175,15 @@ export function ProviderDialog(props: {
           <DialogDescription>{props.description}</DialogDescription>
         </DialogHeader>
         <form
-          className="provider-dialog-form"
+          className={styles.dialogForm}
           onSubmit={(event) => {
             event.preventDefault();
             props.onSubmit();
           }}
         >
-          <DialogBody
-            className={
-              props.rows ? "provider-form settings-rows" : "provider-form"
-            }
-          >
+          <ProviderFormBody rows={props.rows ?? false}>
             {props.children}
-          </DialogBody>
+          </ProviderFormBody>
           <DialogFooter>
             <Button
               variant="ghost"
@@ -213,7 +220,7 @@ export function ProviderPicker({
   chosenId,
   disabled,
   labelledBy,
-  className = "provider-cards",
+  layout = "cards",
   onChoose,
 }: {
   providers: readonly (Pick<ModelProvider, "id" | "label" | "hint"> & {
@@ -222,7 +229,8 @@ export function ProviderPicker({
   chosenId: string | undefined;
   disabled: boolean;
   labelledBy: string;
-  className?: string;
+  /** Cards that fill the row, or the three compact API types of a custom endpoint. */
+  layout?: "cards" | "apis";
   onChoose: (id: string) => void;
 }) {
   const cards = useRef<(HTMLButtonElement | null)[]>([]);
@@ -240,7 +248,13 @@ export function ProviderPicker({
     cards.current[target]?.focus();
   };
   return (
-    <div role="radiogroup" aria-labelledby={labelledBy} className={className}>
+    <div
+      role="radiogroup"
+      aria-labelledby={labelledBy}
+      className={styles.picker}
+      data-slot="provider-picker"
+      data-layout={layout}
+    >
       {providers.map((provider, index) => {
         const checked = provider.id === chosenId;
         const card = (
@@ -254,17 +268,17 @@ export function ProviderPicker({
             aria-checked={checked}
             tabIndex={checked ? 0 : -1}
             disabled={disabled}
-            className="provider-card"
+            className={styles.card}
             onClick={() => onChoose(provider.id)}
             onKeyDown={(event) => move(event, index)}
           >
-            <span className="provider-card-head">
-              <span className="provider-card-logo">
+            <span className={styles.cardHead}>
+              <span className={styles.cardLogo}>
                 <ProviderLogo providerId={provider.id} />
               </span>
               <b>{provider.label}</b>
             </span>
-            <span className="provider-hint">{provider.hint}</span>
+            <span className={styles.hint}>{provider.hint}</span>
           </button>
         );
         return provider.tip ? (
@@ -297,20 +311,21 @@ function FieldRow({
   children?: ReactNode;
 }) {
   return (
-    <div className="row">
-      <div className="k">
-        <b>
+    <SettingsRow
+      label={
+        <>
           {htmlFor ? (
             <label htmlFor={htmlFor}>{label}</label>
           ) : (
             <label id={labelId}>{label}</label>
           )}
           <InfoTooltip label={tip} triggerLabel={copy.custom.about(label)} />
-        </b>
-        {hint ? <span>{hint}</span> : null}
-      </div>
+        </>
+      }
+      hint={hint}
+    >
       {children}
-    </div>
+    </SettingsRow>
   );
 }
 
@@ -488,9 +503,8 @@ function ConnectionRows({
   return (
     <>
       <FieldRow label={copy.custom.name} tip={tips.name} htmlFor="custom-name">
-        <input
+        <SettingsInput
           id="custom-name"
-          className="field"
           autoComplete="off"
           value={draft.name}
           disabled={disabled}
@@ -512,7 +526,7 @@ function ConnectionRows({
         chosenId={draft.api}
         disabled={disabled}
         labelledBy="custom-api-label"
-        className="api-options"
+        layout="apis"
         onChoose={(api) => onChange({ ...draft, api: api as CustomApi })}
       />
       <FieldRow
@@ -520,9 +534,8 @@ function ConnectionRows({
         tip={tips.baseUrl}
         htmlFor="provider-base-url"
       >
-        <input
+        <SettingsInput
           id="provider-base-url"
-          className="field"
           type="url"
           autoComplete="off"
           spellCheck={false}
@@ -541,9 +554,8 @@ function ConnectionRows({
           htmlFor="provider-key"
           hint={keyAgain ? copy.custom.keyAgain : null}
         >
-          <input
+          <SettingsInput
             id="provider-key"
-            className="field"
             type="password"
             autoComplete="off"
             spellCheck={false}
@@ -585,24 +597,27 @@ function ModelHeader({
   children?: ReactNode;
 }) {
   return (
-    <div className="row">
-      <div className="k">
-        <b>
+    <SettingsRow
+      label={
+        <>
           {copy.custom.modelId}
           <InfoTooltip
             label={tips.modelId}
             triggerLabel={copy.custom.about(copy.custom.modelId)}
           />
-        </b>
-        {duplicate ? (
+        </>
+      }
+      hint={
+        duplicate ? (
           <span role="alert">{copy.custom.duplicateIds}</span>
         ) : (
           children
-        )}
-      </div>
-      <span className="v">
+        )
+      }
+    >
+      <SettingsRowValue>
         {MODEL_FIELDS.map((field) => (
-          <span key={field.key} className="token-field token-head">
+          <span key={field.key} className={styles.tokenHead}>
             {field.label}
             <InfoTooltip
               label={field.tip}
@@ -611,10 +626,10 @@ function ModelHeader({
           </span>
         ))}
         {removable ? (
-          <span className="token-remove" aria-hidden="true" />
+          <span className={styles.tokenRemove} aria-hidden="true" />
         ) : null}
-      </span>
-    </div>
+      </SettingsRowValue>
+    </SettingsRow>
   );
 }
 
@@ -636,11 +651,11 @@ function ModelRow({
 }) {
   const blur = onCommit ? { onBlur: onCommit } : {};
   return (
-    <div className="row">
-      <div className="k">
-        {editableId ? (
-          <input
-            className="field token-field"
+    <SettingsRow
+      label={
+        editableId ? (
+          <SettingsInput
+            size="token"
             aria-label={copy.custom.modelId}
             placeholder={copy.custom.modelId}
             autoComplete="off"
@@ -651,14 +666,15 @@ function ModelRow({
             {...blur}
           />
         ) : (
-          <b>{model.id}</b>
-        )}
-      </div>
-      <span className="v">
+          model.id
+        )
+      }
+    >
+      <SettingsRowValue>
         {MODEL_FIELDS.map((field) => (
-          <input
+          <SettingsInput
             key={field.key}
-            className="field token-field"
+            size="token"
             aria-label={`${model.id || copy.custom.modelId} ${field.label}`}
             autoComplete="off"
             spellCheck={false}
@@ -674,8 +690,8 @@ function ModelRow({
           />
         ))}
         {children}
-      </span>
-    </div>
+      </SettingsRowValue>
+    </SettingsRow>
   );
 }
 
@@ -719,31 +735,25 @@ export function CustomProviderRow({
   const listId = `custom-models-${provider.id}`;
   return (
     <>
-      <div className="row">
-        <div className="k">
-          <b>{provider.label}</b>
-          <span>{provider.hint}</span>
-        </div>
-        <span className="v">
-          <button
-            type="button"
-            className="quiet-control models-toggle"
+      <SettingsRow label={provider.label} hint={provider.hint}>
+        <SettingsRowValue>
+          <QuietButton
             aria-expanded={open}
             aria-controls={listId}
             onClick={() => setOpen(!open)}
           >
             {copy.custom.modelCount(provider.models.length)}
             <ChevronDown aria-hidden="true" size={12} />
-          </button>
+          </QuietButton>
           <CustomProviderActions
             provider={provider}
             apis={apis}
             onChanged={onChanged}
           />
-        </span>
-      </div>
+        </SettingsRowValue>
+      </SettingsRow>
       {open ? (
-        <div id={listId} className="custom-models">
+        <div id={listId} className={styles.customModels}>
           <CustomProviderModels provider={provider} onChanged={onChanged} />
         </div>
       ) : null}
@@ -832,7 +842,7 @@ function CustomProviderModels({
           </UiButton>
         </ModelRow>
       ))}
-      <div className="row">
+      <SettingsRow>
         <Button
           variant="ghost"
           onClick={() =>
@@ -841,7 +851,7 @@ function CustomProviderModels({
         >
           {copy.custom.addModel}
         </Button>
-      </div>
+      </SettingsRow>
     </>
   );
 }
@@ -905,16 +915,11 @@ function CustomProviderActions({
           </MenuItem>
           <MenuSeparator />
           {confirming ? (
-            <MenuItem
-              className="menu-danger"
-              disabled={removing}
-              onSelect={() => void remove()}
-            >
+            <DangerMenuItem disabled={removing} onSelect={() => void remove()}>
               {copy.custom.confirmRemove}
-            </MenuItem>
+            </DangerMenuItem>
           ) : (
-            <MenuItem
-              className="menu-danger"
+            <DangerMenuItem
               disabled={removing}
               onSelect={(event) => {
                 event.preventDefault();
@@ -922,7 +927,7 @@ function CustomProviderActions({
               }}
             >
               {copy.custom.remove}
-            </MenuItem>
+            </DangerMenuItem>
           )}
         </MenuContent>
       </Menu>
diff --git a/apps/web/src/pages/settings/profiles.module.css b/apps/web/src/pages/settings/profiles.module.css
new file mode 100644
index 00000000..6372a2c2
--- /dev/null
+++ b/apps/web/src/pages/settings/profiles.module.css
@@ -0,0 +1,22 @@
+.role {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: var(--space-2);
+  margin: 0;
+  padding: 0;
+  border: 0;
+  min-width: 0;
+}
+
+.role > legend {
+  grid-column: 1 / -1;
+  padding: 0 0 6px;
+  font-size: 13px;
+  font-weight: 600;
+}
+
+@media (max-width: 520px) {
+  .role {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
diff --git a/apps/web/src/pages/profiles.tsx b/apps/web/src/pages/settings/profiles.tsx
similarity index 91%
rename from apps/web/src/pages/profiles.tsx
rename to apps/web/src/pages/settings/profiles.tsx
index 4374c3f6..493656ed 100644
--- a/apps/web/src/pages/profiles.tsx
+++ b/apps/web/src/pages/settings/profiles.tsx
@@ -7,11 +7,10 @@
  * provider's (`automaticProfile`); with several connected, the person picks one here. A new
  * project keeps the bindings it started with, so a change here never alters a running project.
  */
-import { wording } from "../config.ts";
+import { wording } from "../../config.ts";
 import { Input, Section, Switch } from "@corbits/react-ui";
 import {
   Dialog,
-  DialogBody,
   DialogContent,
   DialogDescription,
   DialogFieldLabel,
@@ -28,15 +27,25 @@ import type {
   RoleBinding,
   Tier,
 } from "@corbits-builder/schemas/models";
-import { Banner, Button, QuietSelect, QuietState } from "../components.jsx";
-import { keys } from "../queries/keys.ts";
-import { productClient } from "../api/transport.ts";
-import { workspaceTenantId } from "../api/auth.ts";
+import {
+  Banner,
+  Button,
+  Field,
+  QuietSelect,
+  QuietState,
+} from "../../components.jsx";
+import { keys } from "../../queries/keys.ts";
+import { productClient } from "../../api/transport.ts";
+import { workspaceTenantId } from "../../api/auth.ts";
 import { useModelCatalog } from "./providers.jsx";
+import { ProviderFormBody } from "./provider-form.tsx";
+import { SettingsRow, SettingsRowValue } from "./settings-row.tsx";
+import { SettingsSectionBody } from "./settings-section.tsx";
+import styles from "./profiles.module.css";
 
 const copy = wording.profiles;
 
-type Field = { value: ModelChoice | null; version: number };
+type ChoiceField = { value: ModelChoice | null; version: number };
 type Tiers = CustomProfile["tiers"];
 type Profile = {
   id: string;
@@ -89,10 +98,12 @@ function complete(draft: Draft, tiers: readonly Tier[]): Tiers | null {
   return done as Tiers;
 }
 
-export function Profiles({ initialField }: { initialField?: Field } = {}) {
+export function Profiles({
+  initialField,
+}: { initialField?: ChoiceField } = {}) {
   const catalog = useModelCatalog();
   const queryClient = useQueryClient();
-  const [field, setField] = useState<Field | null>(initialField ?? null);
+  const [field, setField] = useState<ChoiceField | null>(initialField ?? null);
   const [error, setError] = useState<string | null>(null);
   const [editing, setEditing] = useState<Editing | null>(null);
   const [viewing, setViewing] = useState<string | null>(null);
@@ -177,7 +188,7 @@ export function Profiles({ initialField }: { initialField?: Field } = {}) {
           </Button>
         }
       >
-        <div className="section-body">
+        <SettingsSectionBody>
           {!active && data.unresolved ? (
             <Banner title={data.unresolved.message} />
           ) : null}
@@ -185,12 +196,12 @@ export function Profiles({ initialField }: { initialField?: Field } = {}) {
             const runnable = available(data, profile.tiers);
             const activeRow = profile.id === active?.id;
             return (
-              <div key={profile.id} className="row">
-                <div className="k">
-                  <b>{profile.label}</b>
-                  <span>{profileSubtitle(profile, runnable)}</span>
-                </div>
-                <span className="v">
+              <SettingsRow
+                key={profile.id}
+                label={profile.label}
+                hint={profileSubtitle(profile, runnable)}
+              >
+                <SettingsRowValue>
                   {profile.custom ? (
                     <>
                       <Button
@@ -239,16 +250,16 @@ export function Profiles({ initialField }: { initialField?: Field } = {}) {
                       {copy.use}
                     </Button>
                   ) : null}
-                </span>
-              </div>
+                </SettingsRowValue>
+              </SettingsRow>
             );
           })}
           {error ? <Banner tone="error" title={error} /> : null}
-        </div>
+        </SettingsSectionBody>
       </Section>
       {viewed ? (
         <Section title={copy.detail(viewed.label)}>
-          <div className="section-body">
+          <SettingsSectionBody>
             {data.tiers.map((tier) => {
               const binding = viewed.tiers[tier.id];
               const provider = data.providers.find(
@@ -262,12 +273,12 @@ export function Profiles({ initialField }: { initialField?: Field } = {}) {
               );
               const roles = data.roles.filter((role) => role.tier === tier.id);
               return (
-                <div key={tier.id} className="row">
-                  <div className="k">
-                    <b>{copy.tier(tier.label)}</b>
-                    <span>{copy.usedBy(roles.map((role) => role.label))}</span>
-                  </div>
-                  <span className="v">
+                <SettingsRow
+                  key={tier.id}
+                  label={copy.tier(tier.label)}
+                  hint={copy.usedBy(roles.map((role) => role.label))}
+                >
+                  <SettingsRowValue>
                     {copy.binding(
                       model?.label ?? binding.model,
                       data.providers.length > 1
@@ -275,11 +286,11 @@ export function Profiles({ initialField }: { initialField?: Field } = {}) {
                         : null,
                       effort?.label ?? binding.effort,
                     )}
-                  </span>
-                </div>
+                  </SettingsRowValue>
+                </SettingsRow>
               );
             })}
-          </div>
+          </SettingsSectionBody>
         </Section>
       ) : null}
       {editing ? (
@@ -393,9 +404,9 @@ function ProfileEditor({
           <DialogDescription>{copy.editorLead}</DialogDescription>
         </DialogHeader>
         <form onSubmit={submitProfile}>
-          <DialogBody className="provider-form">
+          <ProviderFormBody>
             {editing.mode === "new" ? (
-              <div className="provider-field">
+              <Field>
                 <DialogFieldLabel htmlFor="profile-start">
                   {copy.startFrom}
                 </DialogFieldLabel>
@@ -420,9 +431,9 @@ function ProfileEditor({
                     </option>
                   ))}
                 </QuietSelect>
-              </div>
+              </Field>
             ) : null}
-            <div className="provider-field">
+            <Field>
               <DialogFieldLabel htmlFor="profile-name">
                 {copy.name}
               </DialogFieldLabel>
@@ -435,7 +446,7 @@ function ProfileEditor({
                   setDraft({ ...draft, label: event.target.value })
                 }
               />
-            </div>
+            </Field>
             {catalog.tiers.map((tier) => {
               const binding = draft.tiers[tier.id] ?? {};
               const provider = catalog.providers.find(
@@ -443,11 +454,7 @@ function ProfileEditor({
               );
               const providers = editorProviders(catalog, binding.provider);
               return (
-                <fieldset
-                  key={tier.id}
-                  className="profile-role"
-                  disabled={busy}
-                >
+                <fieldset key={tier.id} className={styles.role} disabled={busy}>
                   <legend>{copy.tier(tier.label)}</legend>
                   <QuietSelect
                     aria-label={copy.provider(copy.tier(tier.label))}
@@ -525,7 +532,7 @@ function ProfileEditor({
               );
             })}
             {replacing ? (
-              <div className="provider-field">
+              <Field>
                 <DialogFieldLabel htmlFor="profile-replace-default">
                   {copy.replaceDefault(replacing)}
                 </DialogFieldLabel>
@@ -535,9 +542,9 @@ function ProfileEditor({
                   disabled={busy}
                   onCheckedChange={setMakeDefault}
                 />
-              </div>
+              </Field>
             ) : null}
-          </DialogBody>
+          </ProviderFormBody>
           <DialogFooter>
             <Button variant="ghost" disabled={busy} onClick={onClose}>
               {wording.action.cancel}
diff --git a/apps/web/src/pages/settings/provider-form.module.css b/apps/web/src/pages/settings/provider-form.module.css
new file mode 100644
index 00000000..8078cbb0
--- /dev/null
+++ b/apps/web/src/pages/settings/provider-form.module.css
@@ -0,0 +1,17 @@
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+  margin: -4px;
+  padding: 4px;
+}
+
+/* Settings rows in a dialog: the body's own gap would double the rows' spacing, and rows sit a
+   little closer so a whole form fits without scrolling. */
+.form[data-rows] {
+  gap: 0;
+}
+
+.form[data-rows] > [data-slot="settings-row"] {
+  padding: var(--space-2) 0;
+}
diff --git a/apps/web/src/pages/settings/provider-form.tsx b/apps/web/src/pages/settings/provider-form.tsx
new file mode 100644
index 00000000..44c2b650
--- /dev/null
+++ b/apps/web/src/pages/settings/provider-form.tsx
@@ -0,0 +1,18 @@
+import type { ReactNode } from "react";
+import { DialogBody } from "@corbits/react-ui/ui/dialog";
+import styles from "./provider-form.module.css";
+
+/** The body of a provider or profile dialog: its fields stacked, or laid out as Settings rows. */
+export function ProviderFormBody({
+  rows = false,
+  children,
+}: {
+  rows?: boolean;
+  children: ReactNode;
+}) {
+  return (
+    <DialogBody className={styles.form} data-rows={rows ? "" : undefined}>
+      {children}
+    </DialogBody>
+  );
+}
diff --git a/apps/web/src/pages/settings/provider-logos.stories.tsx b/apps/web/src/pages/settings/provider-logos.stories.tsx
new file mode 100644
index 00000000..3dc2caf0
--- /dev/null
+++ b/apps/web/src/pages/settings/provider-logos.stories.tsx
@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { ProviderLogo } from "./provider-logos.tsx";
+
+const PROVIDERS = ["openai", "anthropic", "google", "xai", "custom"] as const;
+
+const meta = {
+  title: "Components/ProviderLogo",
+  component: ProviderLogo,
+  args: { providerId: "anthropic" },
+  argTypes: { providerId: { control: "select", options: PROVIDERS } },
+  decorators: [
+    (Story) => (
+      <span style={{ display: "inline-flex", width: 24, height: 24 }}>
+        <Story />
+      </span>
+    ),
+  ],
+} satisfies Meta<typeof ProviderLogo>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Logo: Story = {};
+
+/** A provider without a mark gets a neutral plug. */
+export const All: Story = {
+  decorators: [],
+  render: () => (
+    <div style={{ display: "flex", gap: 16 }}>
+      {PROVIDERS.map((id) => (
+        <span
+          key={id}
+          title={id}
+          style={{ display: "inline-flex", width: 24, height: 24 }}
+        >
+          <ProviderLogo providerId={id} />
+        </span>
+      ))}
+    </div>
+  ),
+};
diff --git a/apps/web/src/pages/provider-logos.tsx b/apps/web/src/pages/settings/provider-logos.tsx
similarity index 93%
rename from apps/web/src/pages/provider-logos.tsx
rename to apps/web/src/pages/settings/provider-logos.tsx
index 7ef827af..921b658e 100644
--- a/apps/web/src/pages/provider-logos.tsx
+++ b/apps/web/src/pages/settings/provider-logos.tsx
@@ -26,9 +26,14 @@ const MARKS: Readonly<Record<string, string>> = {
 
 export function ProviderLogo({ providerId }: { providerId: string }) {
   const mark = MARKS[providerId];
-  if (!mark) return <Plug aria-hidden />;
+  if (!mark) return <Plug data-slot="provider-logo" aria-hidden />;
   return (
-    <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden>
+    <svg
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      data-slot="provider-logo"
+      aria-hidden
+    >
       <path d={mark} />
     </svg>
   );
diff --git a/apps/web/src/pages/providers.test.ts b/apps/web/src/pages/settings/providers.test.ts
similarity index 87%
rename from apps/web/src/pages/providers.test.ts
rename to apps/web/src/pages/settings/providers.test.ts
index d4352f6e..3c09037d 100644
--- a/apps/web/src/pages/providers.test.ts
+++ b/apps/web/src/pages/settings/providers.test.ts
@@ -1,13 +1,13 @@
 import { afterAll, expect, mock, test } from "bun:test";
 import { environmentManager } from "@tanstack/react-query";
 import type { ModelLoginState } from "@corbits-builder/client";
-import * as actualTransport from "../api/transport.ts";
-import { wording } from "../config.ts";
+import * as actualTransport from "../../api/transport.ts";
+import { wording } from "../../config.ts";
 
 const realTransport = { ...actualTransport };
 let answers: ModelLoginState[] = [];
 
-mock.module("../api/transport.ts", () => ({
+mock.module("../../api/transport.ts", () => ({
   ...realTransport,
   productClient: () => ({
     modelLogin: async () => answers.shift() ?? { status: "pending" },
@@ -18,7 +18,7 @@ const wasServer = environmentManager.isServer();
 environmentManager.setIsServer(() => false);
 afterAll(() => {
   environmentManager.setIsServer(() => wasServer);
-  mock.module("../api/transport.ts", () => realTransport);
+  mock.module("../../api/transport.ts", () => realTransport);
 });
 
 const { loginCredential } = await import("./providers.tsx");
diff --git a/apps/web/src/pages/providers.tsx b/apps/web/src/pages/settings/providers.tsx
similarity index 91%
rename from apps/web/src/pages/providers.tsx
rename to apps/web/src/pages/settings/providers.tsx
index 1efef7ad..3b246592 100644
--- a/apps/web/src/pages/providers.tsx
+++ b/apps/web/src/pages/settings/providers.tsx
@@ -9,7 +9,7 @@
  * sits in the same list (custom-providers.tsx). Keys live in form state until they are handed
  * over, and nothing here renders a key or token back.
  */
-import { wording } from "../config.ts";
+import { wording } from "../../config.ts";
 import { EmptyState, Input, Section } from "@corbits/react-ui";
 import { DialogFieldLabel } from "@corbits/react-ui/ui/dialog";
 import { QueryObserver, useQuery, useQueryClient } from "@tanstack/react-query";
@@ -21,12 +21,12 @@ import {
   type ProviderStatus,
 } from "@corbits-builder/schemas/models";
 import { type } from "arktype";
-import { Banner, Button, QuietState } from "../components.jsx";
-import { queryClient } from "../queries/client.ts";
-import { keys } from "../queries/keys.ts";
-import { productClient } from "../api/transport.ts";
-import { workspaceTenantId } from "../api/auth.ts";
-import { setCredential } from "../api/credentials.ts";
+import { Banner, Button, Field, QuietState } from "../../components.jsx";
+import { queryClient } from "../../queries/client.ts";
+import { keys } from "../../queries/keys.ts";
+import { productClient } from "../../api/transport.ts";
+import { workspaceTenantId } from "../../api/auth.ts";
+import { setCredential } from "../../api/credentials.ts";
 import {
   CustomProviderRow,
   ProviderDialog,
@@ -34,6 +34,8 @@ import {
   message,
   useCustomProviderForm,
 } from "./custom-providers.tsx";
+import { SettingsRow } from "./settings-row.tsx";
+import { SettingsSectionBody } from "./settings-section.tsx";
 
 const copy = wording.providers;
 
@@ -152,11 +154,11 @@ export function SubscriptionLogins({
           (connection) => connection.status === "connected",
         );
         return (
-          <div key={provider.id} className="row">
-            <div className="k">
-              <b>{copy.login(provider.label)}</b>
-              <span>{live ? copy.status.connected : copy.notConnected}</span>
-            </div>
+          <SettingsRow
+            key={provider.id}
+            label={copy.login(provider.label)}
+            hint={live ? copy.status.connected : copy.notConnected}
+          >
             <Button
               loading={signingIn === provider.id}
               disabled={signingIn !== null}
@@ -168,7 +170,7 @@ export function SubscriptionLogins({
                   ? copy.signInAgain
                   : copy.signIn}
             </Button>
-          </div>
+          </SettingsRow>
         );
       })}
     </>
@@ -214,20 +216,20 @@ export function ProvidersSection({ onChanged }: { onChanged: () => void }) {
           );
         }
         return (
-          <div key={connection.id} className="row">
-            <div className="k">
-              <b>{connection.name}</b>
-              {connection.name === provider.label ? null : (
-                <span>{provider.label}</span>
-              )}
-              {connection.note ? <span>{connection.note}</span> : null}
-            </div>
+          <SettingsRow
+            key={connection.id}
+            label={connection.name}
+            hint={[
+              connection.name === provider.label ? null : provider.label,
+              connection.note,
+            ]}
+          >
             {connection.status ? (
               <QuietState tone={STATUS_TONE[connection.status]}>
                 {copy.status[connection.status]}
               </QuietState>
             ) : null}
-          </div>
+          </SettingsRow>
         );
       })}
     </>
@@ -243,7 +245,7 @@ export function ProvidersSection({ onChanged }: { onChanged: () => void }) {
       description={copy.lead}
       action={hasLogins ? undefined : addAction}
     >
-      <div className="section-body">
+      <SettingsSectionBody>
         {catalog.error ? (
           <Banner tone="error" title={message(catalog.error)} />
         ) : null}
@@ -255,7 +257,7 @@ export function ProvidersSection({ onChanged }: { onChanged: () => void }) {
         ) : (
           apiKeys
         )}
-      </div>
+      </SettingsSectionBody>
       <AddProviderDialog
         open={adding}
         onOpenChange={setAdding}
@@ -414,7 +416,7 @@ export function AddProviderDialog({
         <Banner tone="error" title={message(catalog.error)} />
       ) : null}
       {providerId || custom ? null : (
-        <div className="provider-field">
+        <Field>
           <DialogFieldLabel id="provider-choice-label">
             {copy.provider}
           </DialogFieldLabel>
@@ -427,12 +429,12 @@ export function AddProviderDialog({
               setChosenId(id);
             }}
           />
-        </div>
+        </Field>
       )}
       {custom ? (
         customForm.rows(busy)
       ) : (
-        <div className="provider-field">
+        <Field>
           <DialogFieldLabel htmlFor="provider-key">{copy.key}</DialogFieldLabel>
           <Input
             id="provider-key"
@@ -443,7 +445,7 @@ export function AddProviderDialog({
             disabled={busy}
             onChange={(event) => setSecret(event.target.value)}
           />
-        </div>
+        </Field>
       )}
     </ProviderDialog>
   );
diff --git a/apps/web/src/pages/settings/settings-row.module.css b/apps/web/src/pages/settings/settings-row.module.css
new file mode 100644
index 00000000..72e79ef3
--- /dev/null
+++ b/apps/web/src/pages/settings/settings-row.module.css
@@ -0,0 +1,97 @@
+/* Rows sit on the page rather than in bordered cards; space separates them, not rules. */
+.row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-4);
+  padding: var(--space-3) 0;
+  font-size: 14px;
+  transition: background-color 300ms ease;
+}
+
+.row[data-highlighted] {
+  margin: 0 calc(var(--space-2) * -1);
+  padding-left: var(--space-2);
+  padding-right: var(--space-2);
+  border-radius: var(--radius-sm, 0.25rem);
+  background: var(--surface-hover, rgba(233, 132, 40, 0.08));
+}
+
+.key {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  min-width: 0;
+}
+
+.label {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  font-weight: 600;
+  font-size: 13.5px;
+}
+
+.hint {
+  font-size: 12px;
+  color: var(--muted-foreground);
+  font-family: var(--font-mono);
+}
+
+.value {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  color: var(--muted-foreground);
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  flex-wrap: wrap;
+  gap: var(--space-3);
+  flex-shrink: 0;
+  max-width: min(420px, 100%);
+}
+
+.value a {
+  color: inherit;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.input {
+  display: block;
+  font-family: var(--font-mono);
+  font-size: 12.5px;
+  border: 1px solid var(--border-strong);
+  border-radius: var(--radius-md);
+  background: var(--background);
+  color: var(--foreground);
+  padding: 6px 10px;
+  width: 220px;
+  max-width: 100%;
+  outline: none;
+}
+
+.input:focus {
+  border-color: var(--primary);
+}
+
+.input[data-size="token"] {
+  width: 104px;
+}
+
+/* At phone width a row's controls drop under its label instead of squeezing
+   it to one word per line. */
+@media (max-width: 560px) {
+  .row {
+    flex-wrap: wrap;
+  }
+
+  .value {
+    flex-shrink: 1;
+    justify-content: flex-start;
+  }
+
+  .input[data-size="token"] {
+    width: 88px;
+  }
+}
diff --git a/apps/web/src/pages/settings/settings-row.stories.tsx b/apps/web/src/pages/settings/settings-row.stories.tsx
new file mode 100644
index 00000000..9cb0a419
--- /dev/null
+++ b/apps/web/src/pages/settings/settings-row.stories.tsx
@@ -0,0 +1,50 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Button } from "../../components.tsx";
+import {
+  SettingsInput,
+  SettingsRow,
+  SettingsRowValue,
+} from "./settings-row.tsx";
+import { SettingsSectionBody, SettingsSubhead } from "./settings-section.tsx";
+
+const meta = {
+  title: "Components/Settings/SettingsRow",
+  component: SettingsRow,
+  args: {
+    label: "Theme",
+    hint: "How Builder looks on this device.",
+    children: <SettingsInput aria-label="Theme" defaultValue="System" />,
+  },
+} satisfies Meta<typeof SettingsRow>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Row: Story = {};
+
+/** A row the person was sent to, marked until the highlight fades. */
+export const Highlighted: Story = { args: { highlighted: true } };
+
+/** A section's rows with a subhead, a lead, a value column and a bare action row. */
+export const Section: Story = {
+  render: () => (
+    <SettingsSectionBody>
+      <SettingsSubhead>Open source</SettingsSubhead>
+      <p>Builder is made with these projects.</p>
+      <SettingsRow label="react" hint="Interface">
+        <SettingsRowValue>
+          MIT <a href="https://react.dev">License</a>
+        </SettingsRowValue>
+      </SettingsRow>
+      <SettingsRow label="Model columns">
+        <SettingsRowValue>
+          <SettingsInput size="token" aria-label="Context window" />
+          <SettingsInput size="token" aria-label="Max output" />
+        </SettingsRowValue>
+      </SettingsRow>
+      <SettingsRow>
+        <Button variant="outline">Sign out</Button>
+      </SettingsRow>
+    </SettingsSectionBody>
+  ),
+};
diff --git a/apps/web/src/pages/settings/settings-row.test.tsx b/apps/web/src/pages/settings/settings-row.test.tsx
new file mode 100644
index 00000000..02a59d19
--- /dev/null
+++ b/apps/web/src/pages/settings/settings-row.test.tsx
@@ -0,0 +1,32 @@
+import { expect, test } from "bun:test";
+import { renderToStaticMarkup } from "react-dom/server";
+import { SettingsRow } from "./settings-row.tsx";
+
+test("a row names its control in its key, with one hint line per entry", () => {
+  const html = renderToStaticMarkup(
+    <SettingsRow
+      label="Theme"
+      hint={["Light or dark", null, "On this device"]}
+      htmlFor="theme"
+    >
+      <select id="theme" />
+    </SettingsRow>,
+  );
+
+  expect(html).toMatch(
+    /data-slot="settings-row-key"><label for="theme"><span [^>]*>Theme<\/span><\/label>/,
+  );
+  expect(html.match(/>Light or dark<|>On this device</g)).toHaveLength(2);
+  expect(html).not.toContain("data-highlighted");
+});
+
+test("a highlighted row carries the flag, and a bare row has no key", () => {
+  const html = renderToStaticMarkup(
+    <SettingsRow highlighted>
+      <button type="button">Sign out</button>
+    </SettingsRow>,
+  );
+
+  expect(html).toContain('data-slot="settings-row" data-highlighted=""');
+  expect(html).not.toContain('data-slot="settings-row-key"');
+});
diff --git a/apps/web/src/pages/settings/settings-row.tsx b/apps/web/src/pages/settings/settings-row.tsx
new file mode 100644
index 00000000..802e0808
--- /dev/null
+++ b/apps/web/src/pages/settings/settings-row.tsx
@@ -0,0 +1,96 @@
+import type { ComponentProps, ReactNode } from "react";
+import styles from "./settings-row.module.css";
+
+/** A row's left column: its name in bold, then its hint, or one line per hint in a list. */
+function SettingsRowKey({
+  label,
+  hint,
+  htmlFor,
+}: {
+  label?: ReactNode;
+  hint?: ReactNode;
+  htmlFor?: string | undefined;
+}) {
+  const hints: readonly ReactNode[] = Array.isArray(hint) ? hint : [hint];
+  return (
+    <div className={styles.key} data-slot="settings-row-key">
+      {label === undefined ? null : htmlFor === undefined ? (
+        <span className={styles.label}>{label}</span>
+      ) : (
+        <label htmlFor={htmlFor}>
+          <span className={styles.label}>{label}</span>
+        </label>
+      )}
+      {hints.map((line, index) =>
+        line === undefined || line === null || line === "" ? null : (
+          <span key={index} className={styles.hint}>
+            {line}
+          </span>
+        ),
+      )}
+    </div>
+  );
+}
+
+/** A row's right column, when it holds more than a single control. */
+export function SettingsRowValue({ children }: { children: ReactNode }) {
+  return (
+    <span className={styles.value} data-slot="settings-row-value">
+      {children}
+    </span>
+  );
+}
+
+/**
+ * One setting: its name and hint on the left, its control on the right. A row without a label
+ * or hint is a bare action row. Code finds a row by its `data-slot`, and a highlighted one by
+ * `data-highlighted`.
+ */
+export function SettingsRow({
+  id,
+  highlighted = false,
+  label,
+  hint,
+  htmlFor,
+  children,
+}: {
+  id?: string;
+  highlighted?: boolean;
+  label?: ReactNode;
+  /** Muted lines under the label; a list puts each on its own line. */
+  hint?: ReactNode;
+  /** The control the label names, when the row holds one. */
+  htmlFor?: string;
+  children?: ReactNode;
+}) {
+  return (
+    <div
+      id={id}
+      className={styles.row}
+      data-slot="settings-row"
+      data-highlighted={highlighted ? "" : undefined}
+    >
+      {label === undefined && hint === undefined ? null : (
+        <SettingsRowKey label={label} hint={hint} htmlFor={htmlFor} />
+      )}
+      {children}
+    </div>
+  );
+}
+
+/** The text input of a Settings row; `token` is the narrow one a model's columns use. */
+export function SettingsInput({
+  size,
+  ...props
+}: Omit<ComponentProps<"input">, "className" | "size"> & {
+  size?: "token";
+}) {
+  return (
+    <input
+      {...props}
+      className={styles.input}
+      data-slot="settings-input"
+      data-size={size}
+    />
+  );
+}
diff --git a/apps/web/src/pages/settings/settings-section.module.css b/apps/web/src/pages/settings/settings-section.module.css
new file mode 100644
index 00000000..8a6bbc4e
--- /dev/null
+++ b/apps/web/src/pages/settings/settings-section.module.css
@@ -0,0 +1,22 @@
+.body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+}
+
+.body > [data-slot="banner"],
+.body > [data-slot="inline-note"],
+.body > p {
+  margin: var(--space-2) 0;
+}
+
+.body > p {
+  font-size: 13px;
+  color: var(--muted-foreground);
+}
+
+.subhead {
+  margin: var(--space-2) 0 0;
+  font-size: 13.5px;
+  font-weight: 600;
+}
diff --git a/apps/web/src/pages/settings/settings-section.tsx b/apps/web/src/pages/settings/settings-section.tsx
new file mode 100644
index 00000000..88820e13
--- /dev/null
+++ b/apps/web/src/pages/settings/settings-section.tsx
@@ -0,0 +1,20 @@
+import type { ReactNode } from "react";
+import styles from "./settings-section.module.css";
+
+/** A section's rows, with the banners, notes and paragraphs between them. */
+export function SettingsSectionBody({ children }: { children: ReactNode }) {
+  return (
+    <div className={styles.body} data-slot="settings-section-body">
+      {children}
+    </div>
+  );
+}
+
+/** A heading for a group of rows inside a section. */
+export function SettingsSubhead({ children }: { children: ReactNode }) {
+  return (
+    <h3 className={styles.subhead} data-slot="settings-subhead">
+      {children}
+    </h3>
+  );
+}
diff --git a/apps/web/src/pages/settings/settings.module.css b/apps/web/src/pages/settings/settings.module.css
new file mode 100644
index 00000000..3732598e
--- /dev/null
+++ b/apps/web/src/pages/settings/settings.module.css
@@ -0,0 +1,46 @@
+.page {
+  max-width: 720px;
+  width: 100%;
+  min-width: 0;
+  margin: 0 auto;
+  padding: var(--space-8) var(--space-6) var(--space-12);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-6);
+}
+
+.page > h1 {
+  margin: 0;
+  font-size: 22px;
+  font-weight: 700;
+}
+
+.tabs {
+  gap: var(--space-8);
+}
+
+.tabs > [role="tablist"] {
+  flex-wrap: nowrap;
+  overflow-x: auto;
+  scrollbar-width: none;
+  border-bottom-color: color-mix(in srgb, var(--border) 60%, transparent);
+}
+
+.tabs [role="tab"] {
+  flex: none;
+  white-space: nowrap;
+}
+
+.tabs > [role="tabpanel"] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-12);
+  outline: none;
+}
+
+/* At phone width the canvas's own padding is the gutter. */
+@media (max-width: 560px) {
+  .page {
+    padding: var(--space-4) 0 var(--space-12);
+  }
+}
diff --git a/apps/web/src/pages/settings.tsx b/apps/web/src/pages/settings/settings.tsx
similarity index 63%
rename from apps/web/src/pages/settings.tsx
rename to apps/web/src/pages/settings/settings.tsx
index ed093ac8..ddfe3bec 100644
--- a/apps/web/src/pages/settings.tsx
+++ b/apps/web/src/pages/settings/settings.tsx
@@ -7,53 +7,49 @@
  *
  * They are grouped into tabs; the open tab is `?tab=` beside `?view=settings`,
  * so each one can be linked. Each section is the library's `Section`; its
- * rows keep the mockup's row / k / v language.
+ * rows are `SettingsRow`s.
  */
-import { wording } from "../config.ts";
+import { wording } from "../../config.ts";
 import {
-  Button as UiButton,
   Section,
   Switch,
   Tabs,
   useTheme,
   type ThemeMode,
 } from "@corbits/react-ui";
-import { useEffect, useState, type ReactNode } from "react";
+import { useEffect, useState } from "react";
 import { toast } from "sonner";
 import { useQueryClient } from "@tanstack/react-query";
-import { keys } from "../queries/keys.ts";
+import { keys } from "../../queries/keys.ts";
 import { ProvidersSection } from "./providers.jsx";
 import { Profiles } from "./profiles.jsx";
 import {
   useDocumentTips,
   writeDocumentTips,
-} from "../document-tips-setting.ts";
+} from "../../document-tips-setting.ts";
 import {
   useQuestionsLayout,
   writeQuestionsLayout,
-} from "../questions-layout-setting.ts";
+} from "../../questions-layout-setting.ts";
 import {
-  addCustomReviewerPersona,
-  addWorkspaceReviewer,
-  allReviewerPersonas,
-  removeWorkspaceReviewer,
-  useCustomReviewerPersonas,
   useWorkspaceApprovalsEnabled,
-  useWorkspaceReviewers,
   writeWorkspaceApprovalsEnabled,
   type OnOff,
-} from "../workspace-approvals-setting.ts";
+} from "../../workspace-approvals-setting.ts";
+import { SettingsRow, SettingsRowValue } from "./settings-row.tsx";
+import { SettingsSectionBody, SettingsSubhead } from "./settings-section.tsx";
+import { WorkspaceApprovals } from "./workspace-approvals.tsx";
 import { Collaborators } from "./collaborators.jsx";
-import { Banner, Button, QuietSelect, QuietState } from "../components.jsx";
-import { productClient } from "../api/transport.ts";
-import { workspaceTenantId, type HubUser } from "../api/auth.ts";
-import { openSourceNotices } from "../open-source.ts";
-import { Credit } from "../flourish.tsx";
+import { Banner, Button, QuietSelect, QuietState } from "../../components.jsx";
+import { productClient } from "../../api/transport.ts";
+import { workspaceTenantId, type HubUser } from "../../api/auth.ts";
+import { openSourceNotices } from "../../open-source.ts";
+import { Credit } from "../../flourish.tsx";
 import type {
   PreferenceRegistry,
   Preferences,
 } from "@corbits-builder/schemas/preferences";
-import "./settings-layout.css";
+import styles from "./settings.module.css";
 
 export type SettingsTab = keyof typeof wording.settings.tab;
 
@@ -195,14 +191,14 @@ export function Settings({
     );
   };
   return (
-    <div className="settings-page">
+    <div className={styles.page} data-slot="settings-page">
       <h1>{wording.settings.title}</h1>
       <Tabs
         tabs={SETTINGS_TABS}
         active={activeTab}
         onChange={setActiveTab}
         label={wording.settings.sections}
-        className="settings-tabs"
+        className={styles.tabs}
       >
         {renderTabContent}
       </Tabs>
@@ -210,238 +206,6 @@ export function Settings({
   );
 }
 
-function Row({
-  id,
-  highlighted = false,
-  label,
-  hint,
-  htmlFor,
-  children,
-}: {
-  id?: string;
-  highlighted?: boolean;
-  label: string;
-  hint?: string;
-  /** The control the label names, when the row holds one. */
-  htmlFor?: string;
-  children: ReactNode;
-}) {
-  return (
-    <div
-      id={id}
-      className={highlighted ? "row is-highlighted" : "row"}
-      data-highlighted={highlighted ? "true" : undefined}
-    >
-      <div className="k">
-        {htmlFor ? (
-          <label htmlFor={htmlFor}>
-            <b>{label}</b>
-          </label>
-        ) : (
-          <b>{label}</b>
-        )}
-        {hint ? <span>{hint}</span> : null}
-      </div>
-      {children}
-    </div>
-  );
-}
-
-const OTHER_PERSONA_OPTION = "__other__";
-
-/** Workspace-level approval toggle and saved workspace reviewers. */
-export function WorkspaceApprovals() {
-  const approvalsEnabled = useWorkspaceApprovalsEnabled();
-  const reviewers = useWorkspaceReviewers();
-  const customPersonas = useCustomReviewerPersonas();
-  const personaOptions = allReviewerPersonas(customPersonas, reviewers);
-  const [name, setName] = useState("");
-  const [persona, setPersona] = useState<string>(
-    wording.approvalRound.reviewerPersonas[0],
-  );
-  const [customPersonaOpen, setCustomPersonaOpen] = useState(false);
-  const [customPersonaDraft, setCustomPersonaDraft] = useState("");
-  const [email, setEmail] = useState("");
-  const [goal, setGoal] = useState("");
-  const copy = wording.settings.approvals;
-  const roundCopy = wording.approvalRound;
-
-  const effectivePersona = customPersonaOpen
-    ? customPersonaDraft.trim()
-    : persona.trim();
-  const canAdd = name.trim().length > 0 && effectivePersona.length > 0;
-
-  const handleSelectPersona = (value: string) => {
-    if (value === OTHER_PERSONA_OPTION) {
-      setCustomPersonaOpen(true);
-      setCustomPersonaDraft("");
-      return;
-    }
-    setCustomPersonaOpen(false);
-    setPersona(value);
-  };
-
-  const handleAddReviewer = () => {
-    if (!canAdd) return;
-    if (customPersonaOpen) {
-      addCustomReviewerPersona(effectivePersona);
-    }
-    const trimmedEmail = email.trim();
-    const trimmedGoal = goal.trim();
-    addWorkspaceReviewer({
-      name: name.trim(),
-      persona: effectivePersona,
-      ...(trimmedEmail.length > 0 ? { email: trimmedEmail } : {}),
-      ...(trimmedGoal.length > 0 ? { goal: trimmedGoal } : {}),
-    });
-    setName("");
-    setEmail("");
-    setGoal("");
-    if (customPersonaOpen) {
-      setPersona(effectivePersona);
-      setCustomPersonaOpen(false);
-      setCustomPersonaDraft("");
-    }
-  };
-
-  return (
-    <Section title={copy.section} description={copy.lead}>
-      <div className="section-body">
-        <Row
-          label={copy.requireLabel}
-          hint={copy.requireHint}
-          htmlFor="workspace-approvals-enabled"
-        >
-          <Switch
-            id="workspace-approvals-enabled"
-            checked={approvalsEnabled === "on"}
-            onCheckedChange={(on) =>
-              writeWorkspaceApprovalsEnabled(on ? "on" : "off")
-            }
-          />
-        </Row>
-        <h3 className="about-subhead">{copy.reviewersSubhead}</h3>
-        <p className="about-lead">{copy.reviewersLead}</p>
-        {reviewers.length === 0 ? (
-          <p className="inline-note">{copy.emptyReviewers}</p>
-        ) : (
-          reviewers.map((reviewer) => {
-            const hintParts = [reviewer.goal, reviewer.email].filter(
-              (part): part is string => part !== undefined && part !== "",
-            );
-            return (
-              <Row
-                key={reviewer.id}
-                label={reviewer.name}
-                {...(hintParts.length === 0
-                  ? {}
-                  : { hint: hintParts.join(" · ") })}
-              >
-                <span className="v">
-                  <span className="approval-status-text">
-                    {reviewer.persona}
-                  </span>
-                  <UiButton
-                    size="sm"
-                    variant="ghost"
-                    className="approval-lean-btn"
-                    onClick={() => removeWorkspaceReviewer(reviewer.id)}
-                  >
-                    {copy.removeReviewer}
-                  </UiButton>
-                </span>
-              </Row>
-            );
-          })
-        )}
-        <div className="approval-inline-fields settings-reviewer-form">
-          <div className="approval-field-row">
-            <span className="approval-field-label">
-              {roundCopy.fieldLabels.name}
-            </span>
-            <input
-              className="approval-lean-input"
-              aria-label={copy.reviewerName}
-              placeholder={copy.reviewerName}
-              value={name}
-              onChange={(event) => setName(event.target.value)}
-            />
-          </div>
-          <div className="approval-field-row">
-            <span className="approval-field-label">
-              {roundCopy.fieldLabels.role}
-            </span>
-            <select
-              className="approval-lean-select"
-              aria-label={copy.reviewerPersona}
-              value={customPersonaOpen ? OTHER_PERSONA_OPTION : persona}
-              onChange={(event) => handleSelectPersona(event.target.value)}
-            >
-              {personaOptions.map((option) => (
-                <option key={option} value={option}>
-                  {option}
-                </option>
-              ))}
-              <option value={OTHER_PERSONA_OPTION}>
-                {roundCopy.otherPersona}
-              </option>
-            </select>
-          </div>
-          {customPersonaOpen ? (
-            <div className="approval-field-row">
-              <span className="approval-field-label">
-                {roundCopy.customPersonaLabel}
-              </span>
-              <input
-                className="approval-lean-input"
-                aria-label={roundCopy.customPersonaLabel}
-                placeholder={roundCopy.customPersonaPlaceholder}
-                value={customPersonaDraft}
-                onChange={(event) => setCustomPersonaDraft(event.target.value)}
-              />
-            </div>
-          ) : null}
-          <div className="approval-field-row">
-            <span className="approval-field-label">
-              {roundCopy.fieldLabels.focus}
-            </span>
-            <input
-              className="approval-lean-input"
-              aria-label={copy.reviewerGoal}
-              placeholder={copy.reviewerGoal}
-              value={goal}
-              onChange={(event) => setGoal(event.target.value)}
-            />
-          </div>
-          <div className="approval-field-row">
-            <span className="approval-field-label">
-              {wording.settings.account.email}
-            </span>
-            <input
-              className="approval-lean-input"
-              aria-label={copy.reviewerEmail}
-              placeholder={copy.reviewerEmail}
-              value={email}
-              onChange={(event) => setEmail(event.target.value)}
-            />
-          </div>
-          <div className="settings-reviewer-form-actions">
-            <UiButton
-              size="sm"
-              variant="outline"
-              className="approval-field-save-btn"
-              disabled={!canAdd}
-              onClick={handleAddReviewer}
-            >
-              {copy.addReviewer}
-            </UiButton>
-          </div>
-        </div>
-      </div>
-    </Section>
-  );
-}
-
 /** The theme, and the document tips and questions layout choices kept in this browser. */
 function Appearance() {
   const { mode, setMode } = useTheme();
@@ -450,8 +214,8 @@ function Appearance() {
   const copy = wording.settings.appearance;
   return (
     <Section title={copy.section} description={copy.lead}>
-      <div className="section-body">
-        <Row label={copy.theme} htmlFor="settings-theme">
+      <SettingsSectionBody>
+        <SettingsRow label={copy.theme} htmlFor="settings-theme">
           <QuietSelect
             id="settings-theme"
             value={mode}
@@ -463,15 +227,18 @@ function Appearance() {
               </option>
             ))}
           </QuietSelect>
-        </Row>
-        <Row label={wording.tips.setting} hint={wording.tips.settingHint}>
+        </SettingsRow>
+        <SettingsRow
+          label={wording.tips.setting}
+          hint={wording.tips.settingHint}
+        >
           <Switch
             label={wording.tips.setting}
             checked={tips === "on"}
             onCheckedChange={(on) => writeDocumentTips(on ? "on" : "off")}
           />
-        </Row>
-        <Row
+        </SettingsRow>
+        <SettingsRow
           label={wording.questions.layoutSetting}
           hint={wording.questions.layoutHint}
         >
@@ -480,8 +247,8 @@ function Appearance() {
             checked={questionsLayout === "steps"}
             onCheckedChange={(on) => writeQuestionsLayout(on ? "steps" : "all")}
           />
-        </Row>
-      </div>
+        </SettingsRow>
+      </SettingsSectionBody>
     </Section>
   );
 }
@@ -573,9 +340,11 @@ export function WorkingPreferences({
       );
       const rowEl =
         document.getElementById(`preference-row-${focusPreference}`) ??
-        (controlEl?.closest(".row") as HTMLElement | null);
+        (controlEl?.closest(
+          '[data-slot="settings-row"]',
+        ) as HTMLElement | null);
       if (rowEl) {
-        rowEl.setAttribute("data-highlighted", "true");
+        rowEl.setAttribute("data-highlighted", "");
         if (typeof rowEl.scrollIntoView === "function") {
           rowEl.scrollIntoView({ behavior: "smooth", block: "center" });
         }
@@ -601,7 +370,9 @@ export function WorkingPreferences({
       );
       const rowEl =
         document.getElementById(`preference-row-${focusPreference}`) ??
-        (controlEl?.closest(".row") as HTMLElement | null);
+        (controlEl?.closest(
+          '[data-slot="settings-row"]',
+        ) as HTMLElement | null);
       rowEl?.removeAttribute("data-highlighted");
     }, 2_000);
 
@@ -687,7 +458,7 @@ export function WorkingPreferences({
   const preferences = mergeExperimentalPreferences(registry);
   return (
     <Section title={copy.section} description={copy.lead}>
-      <div className="section-body">
+      <SettingsSectionBody>
         {preferences.map((preference) => {
           const id = `preference-${preference.id}`;
           const isExperimental = preference.id === "experimental_approvals";
@@ -699,7 +470,7 @@ export function WorkingPreferences({
           const state = save?.id === preference.id ? save.state : null;
           const disabled = (!field && !isExperimental) || state === "saving";
           return (
-            <Row
+            <SettingsRow
               key={preference.id}
               id={`preference-row-${preference.id}`}
               highlighted={highlightedId === preference.id}
@@ -707,7 +478,7 @@ export function WorkingPreferences({
               htmlFor={id}
               {...(preference.hint ? { hint: preference.hint } : {})}
             >
-              <span className="v">
+              <SettingsRowValue>
                 {state ? (
                   <QuietState tone={SAVE_TONES[state]}>
                     {copy[state]}
@@ -738,12 +509,12 @@ export function WorkingPreferences({
                     ))}
                   </QuietSelect>
                 )}
-              </span>
-            </Row>
+              </SettingsRowValue>
+            </SettingsRow>
           );
         })}
         {error ? <Banner tone="error" title={error} /> : null}
-      </div>
+      </SettingsSectionBody>
     </Section>
   );
 }
@@ -769,15 +540,15 @@ function Account({
   const copy = wording.settings.account;
   return (
     <Section title={copy.section} description={copy.lead}>
-      <div className="section-body">
-        <Row label={copy.name}>
-          <span className="v">{user.name}</span>
-        </Row>
-        <Row label={copy.email}>
-          <span className="v">{user.email}</span>
-        </Row>
+      <SettingsSectionBody>
+        <SettingsRow label={copy.name}>
+          <SettingsRowValue>{user.name}</SettingsRowValue>
+        </SettingsRow>
+        <SettingsRow label={copy.email}>
+          <SettingsRowValue>{user.email}</SettingsRowValue>
+        </SettingsRow>
         {onSignOut ? (
-          <div className="row">
+          <SettingsRow>
             <Button
               variant="outline"
               loading={signingOut}
@@ -785,9 +556,9 @@ function Account({
             >
               {wording.action.signOut}
             </Button>
-          </div>
+          </SettingsRow>
         ) : null}
-      </div>
+      </SettingsSectionBody>
     </Section>
   );
 }
@@ -796,20 +567,20 @@ function About() {
   const copy = wording.settings.about;
   return (
     <Section title={copy.section} description={copy.lead}>
-      <div className="section-body">
-        <h3 className="about-subhead">{copy.openSource}</h3>
-        <p className="about-lead">{copy.openSourceLead}</p>
+      <SettingsSectionBody>
+        <SettingsSubhead>{copy.openSource}</SettingsSubhead>
+        <p>{copy.openSourceLead}</p>
         {openSourceNotices.map((notice) => (
-          <Row key={notice.name} label={notice.name} hint={notice.use}>
-            <span className="v">
+          <SettingsRow key={notice.name} label={notice.name} hint={notice.use}>
+            <SettingsRowValue>
               {copy.kind[notice.kind]}
               <a href={notice.link} target="_blank" rel="noreferrer">
                 {notice.license ?? copy.unconfirmed}
               </a>
-            </span>
-          </Row>
+            </SettingsRowValue>
+          </SettingsRow>
         ))}
-      </div>
+      </SettingsSectionBody>
       <Credit />
     </Section>
   );
diff --git a/apps/web/src/pages/settings/workspace-approvals.module.css b/apps/web/src/pages/settings/workspace-approvals.module.css
new file mode 100644
index 00000000..bccd7358
--- /dev/null
+++ b/apps/web/src/pages/settings/workspace-approvals.module.css
@@ -0,0 +1,5 @@
+.formActions {
+  display: flex;
+  justify-content: flex-end;
+  padding-top: 0.25rem;
+}
diff --git a/apps/web/src/pages/settings/workspace-approvals.tsx b/apps/web/src/pages/settings/workspace-approvals.tsx
new file mode 100644
index 00000000..d75010ba
--- /dev/null
+++ b/apps/web/src/pages/settings/workspace-approvals.tsx
@@ -0,0 +1,189 @@
+import { Section, Switch } from "@corbits/react-ui";
+import { useState } from "react";
+import { InlineNote } from "../../components.tsx";
+import { wording } from "../../config.ts";
+import {
+  addCustomReviewerPersona,
+  addWorkspaceReviewer,
+  allReviewerPersonas,
+  removeWorkspaceReviewer,
+  useCustomReviewerPersonas,
+  useWorkspaceApprovalsEnabled,
+  useWorkspaceReviewers,
+  writeWorkspaceApprovalsEnabled,
+} from "../../workspace-approvals-setting.ts";
+import { SettingsRow, SettingsRowValue } from "./settings-row.tsx";
+import { SettingsSectionBody, SettingsSubhead } from "./settings-section.tsx";
+import {
+  ApprovalField,
+  ApprovalFields,
+  FieldSaveButton,
+  LeanButton,
+  LeanInput,
+  LeanSelect,
+} from "../approval-fields.tsx";
+import styles from "./workspace-approvals.module.css";
+
+const OTHER_PERSONA_OPTION = "__other__";
+
+/** Workspace-level approval toggle and saved workspace reviewers. */
+export function WorkspaceApprovals() {
+  const approvalsEnabled = useWorkspaceApprovalsEnabled();
+  const reviewers = useWorkspaceReviewers();
+  const customPersonas = useCustomReviewerPersonas();
+  const personaOptions = allReviewerPersonas(customPersonas, reviewers);
+  const [name, setName] = useState("");
+  const [persona, setPersona] = useState<string>(
+    wording.approvalRound.reviewerPersonas[0],
+  );
+  const [customPersonaOpen, setCustomPersonaOpen] = useState(false);
+  const [customPersonaDraft, setCustomPersonaDraft] = useState("");
+  const [email, setEmail] = useState("");
+  const [goal, setGoal] = useState("");
+  const copy = wording.settings.approvals;
+  const roundCopy = wording.approvalRound;
+
+  const effectivePersona = customPersonaOpen
+    ? customPersonaDraft.trim()
+    : persona.trim();
+  const canAdd = name.trim().length > 0 && effectivePersona.length > 0;
+
+  const handleSelectPersona = (value: string) => {
+    if (value === OTHER_PERSONA_OPTION) {
+      setCustomPersonaOpen(true);
+      setCustomPersonaDraft("");
+      return;
+    }
+    setCustomPersonaOpen(false);
+    setPersona(value);
+  };
+
+  const handleAddReviewer = () => {
+    if (!canAdd) return;
+    if (customPersonaOpen) {
+      addCustomReviewerPersona(effectivePersona);
+    }
+    const trimmedEmail = email.trim();
+    const trimmedGoal = goal.trim();
+    addWorkspaceReviewer({
+      name: name.trim(),
+      persona: effectivePersona,
+      ...(trimmedEmail.length > 0 ? { email: trimmedEmail } : {}),
+      ...(trimmedGoal.length > 0 ? { goal: trimmedGoal } : {}),
+    });
+    setName("");
+    setEmail("");
+    setGoal("");
+    if (customPersonaOpen) {
+      setPersona(effectivePersona);
+      setCustomPersonaOpen(false);
+      setCustomPersonaDraft("");
+    }
+  };
+
+  return (
+    <Section title={copy.section} description={copy.lead}>
+      <SettingsSectionBody>
+        <SettingsRow
+          label={copy.requireLabel}
+          hint={copy.requireHint}
+          htmlFor="workspace-approvals-enabled"
+        >
+          <Switch
+            id="workspace-approvals-enabled"
+            checked={approvalsEnabled === "on"}
+            onCheckedChange={(on) =>
+              writeWorkspaceApprovalsEnabled(on ? "on" : "off")
+            }
+          />
+        </SettingsRow>
+        <SettingsSubhead>{copy.reviewersSubhead}</SettingsSubhead>
+        <p>{copy.reviewersLead}</p>
+        {reviewers.length === 0 ? (
+          <InlineNote>{copy.emptyReviewers}</InlineNote>
+        ) : (
+          reviewers.map((reviewer) => {
+            const hintParts = [reviewer.goal, reviewer.email].filter(
+              (part): part is string => part !== undefined && part !== "",
+            );
+            return (
+              <SettingsRow
+                key={reviewer.id}
+                label={reviewer.name}
+                {...(hintParts.length === 0
+                  ? {}
+                  : { hint: hintParts.join(" · ") })}
+              >
+                <SettingsRowValue>
+                  <InlineNote as="span">{reviewer.persona}</InlineNote>
+                  <LeanButton
+                    onClick={() => removeWorkspaceReviewer(reviewer.id)}
+                  >
+                    {copy.removeReviewer}
+                  </LeanButton>
+                </SettingsRowValue>
+              </SettingsRow>
+            );
+          })
+        )}
+        <ApprovalFields variant="form" separated>
+          <ApprovalField label={roundCopy.fieldLabels.name}>
+            <LeanInput
+              aria-label={copy.reviewerName}
+              placeholder={copy.reviewerName}
+              value={name}
+              onChange={(event) => setName(event.target.value)}
+            />
+          </ApprovalField>
+          <ApprovalField label={roundCopy.fieldLabels.role}>
+            <LeanSelect
+              aria-label={copy.reviewerPersona}
+              value={customPersonaOpen ? OTHER_PERSONA_OPTION : persona}
+              onChange={(event) => handleSelectPersona(event.target.value)}
+            >
+              {personaOptions.map((option) => (
+                <option key={option} value={option}>
+                  {option}
+                </option>
+              ))}
+              <option value={OTHER_PERSONA_OPTION}>
+                {roundCopy.otherPersona}
+              </option>
+            </LeanSelect>
+          </ApprovalField>
+          {customPersonaOpen ? (
+            <ApprovalField label={roundCopy.customPersonaLabel}>
+              <LeanInput
+                aria-label={roundCopy.customPersonaLabel}
+                placeholder={roundCopy.customPersonaPlaceholder}
+                value={customPersonaDraft}
+                onChange={(event) => setCustomPersonaDraft(event.target.value)}
+              />
+            </ApprovalField>
+          ) : null}
+          <ApprovalField label={roundCopy.fieldLabels.focus}>
+            <LeanInput
+              aria-label={copy.reviewerGoal}
+              placeholder={copy.reviewerGoal}
+              value={goal}
+              onChange={(event) => setGoal(event.target.value)}
+            />
+          </ApprovalField>
+          <ApprovalField label={wording.settings.account.email}>
+            <LeanInput
+              aria-label={copy.reviewerEmail}
+              placeholder={copy.reviewerEmail}
+              value={email}
+              onChange={(event) => setEmail(event.target.value)}
+            />
+          </ApprovalField>
+          <div className={styles.formActions}>
+            <FieldSaveButton disabled={!canAdd} onClick={handleAddReviewer}>
+              {copy.addReviewer}
+            </FieldSaveButton>
+          </div>
+        </ApprovalFields>
+      </SettingsSectionBody>
+    </Section>
+  );
+}
diff --git a/apps/web/src/pages/workspace-layout.css b/apps/web/src/pages/workspace-layout.css
deleted file mode 100644
index 793c0be6..00000000
--- a/apps/web/src/pages/workspace-layout.css
+++ /dev/null
@@ -1,625 +0,0 @@
-/**
- * Project chrome matching mockups/project.html.
- *
- * Scoped to the two-pane workspace so home, onboarding and settings keep
- * their own sheets.
- */
-
-/* ---- two panes: proportional conversation + draft ---- */
-
-.panes {
-  flex: 1;
-  min-height: 0;
-}
-
-.canvas-body.is-fill .panes {
-  flex: 1;
-  min-height: 0;
-}
-
-/* Chat-first: before a stage has a drafted artifact, the conversation is
-   the whole page — a single centered column, generous margins either side,
-   the composer at its bottom. The split earns its keep only once there is
-   something to split against. */
-.panes.chat-first {
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-  width: 100%;
-  max-width: 720px;
-  margin: 0 auto;
-}
-
-/* The column runs the full height, so the composer sits at the window's
-   foot with the thread above it, not just under the last message. */
-.panes.chat-first .conv {
-  flex: 1;
-  width: 100%;
-  border-right: 0;
-}
-
-/* The composer arrives once there is something it could send: it rises
-   into place rather than appearing. */
-.panes.chat-first .composer {
-  animation: composer-in 280ms ease-out backwards;
-}
-
-@keyframes composer-in {
-  from {
-    opacity: 0;
-    transform: translateY(16px);
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .panes.chat-first .composer {
-    animation: none;
-  }
-}
-
-/* Chat-first, before the first message: center the composer (and the empty
-   note) vertically in the column, like a fresh page, rather than pinning it
-   to the bottom below mostly empty space. Once a message lands, `.conv-scroll`
-   goes back to filling the column and the composer settles to the bottom as
-   the thread grows -- the normal, already-existing layout. */
-.panes.chat-first
-  .stage-conversation:has(> .conv-scroll > .inline-note:only-child) {
-  flex: 1;
-  justify-content: center;
-}
-
-.panes.chat-first
-  .stage-conversation:has(> .conv-scroll > .inline-note:only-child)
-  .conv-scroll {
-  flex: 0 1 auto;
-  justify-content: center;
-  text-align: center;
-}
-
-.conv {
-  position: relative;
-  border-right: 1px solid var(--wb-border);
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-  background: var(--wb-background);
-}
-
-.conv .stage-conversation {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  min-height: 0;
-}
-
-.room {
-  display: flex;
-  flex: 1 1 auto;
-  min-height: 0;
-  min-width: 0;
-}
-
-.room > .panes {
-  flex: 1;
-  min-width: 0;
-}
-
-.room .room-thread {
-  display: flex;
-  flex-direction: column;
-  flex: 1 1 auto;
-  min-height: 0;
-  min-width: 0;
-}
-
-.room-mail-names {
-  display: block;
-  font-weight: 500;
-  color: var(--wb-foreground);
-}
-
-/* The row's summary uses the column's width and wraps to a second line before it cuts off. */
-.room-mail-summary {
-  display: -webkit-box;
-  overflow: hidden;
-  white-space: normal;
-  color: var(--wb-muted-foreground);
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
-  line-clamp: 2;
-}
-
-.room-mail-row {
-  align-items: flex-start;
-}
-
-.room-mail-fold > summary {
-  cursor: pointer;
-  padding: var(--space-1);
-  font-size: 0.875rem;
-  color: var(--wb-muted-foreground);
-}
-
-.room-mail-turn + .room-mail-turn {
-  margin-top: var(--space-3);
-}
-
-.artifact-mention {
-  color: var(--wb-foreground);
-  text-decoration: underline;
-  text-underline-offset: 0.15em;
-}
-
-.artifact-mention:focus-visible {
-  outline: 2px solid var(--wb-foreground);
-  outline-offset: 2px;
-}
-
-/* The library's ask wears an accent wash; here it is a plain card like the conversation's others. */
-.document-decision [data-slot="tool-approval-card"] {
-  max-width: 36rem;
-  min-width: 0;
-  overflow-wrap: anywhere;
-  border-color: var(--wb-border);
-  background: var(--wb-background);
-}
-
-.document-decision [data-slot="tool-approval-card"] > header > svg {
-  color: var(--wb-muted-foreground);
-}
-
-.document-decision-what {
-  margin: 0;
-}
-
-/* The library card always renders Approve always as its second action.
-   Document cards and the design card do not offer that standing grant. */
-.document-decision-once
-  [data-slot="tool-approval-card"]
-  > div:last-child
-  > button:nth-child(2) {
-  display: none;
-}
-
-/* Not yet is sm:ms-auto, and every action is shrink-0 nowrap. A long middle
-   label fills the row, Not yet wraps, and the auto margin pins it to the
-   right edge, so Not yet drops that margin. A label wider than the card
-   wraps between words inside its own button; the card's overflow-wrap
-   anywhere would otherwise break it a letter at a time. The design card
-   sizes its actions on their own. */
-.document-decision:not(.document-decision-design)
-  [data-slot="tool-approval-card"]
-  > div:last-child
-  > button {
-  flex-shrink: 1;
-  min-width: 0;
-  height: auto;
-  min-height: 2rem;
-  white-space: normal;
-  overflow-wrap: normal;
-  word-break: normal;
-}
-
-.document-decision:not(.document-decision-design)
-  [data-slot="tool-approval-card"]
-  > div:last-child
-  > button:last-child {
-  flex-shrink: 0;
-  margin-inline-start: 0;
-}
-
-/* Design approval: the two actions share one line and one height, and Not
-   yet is not pinned to the right edge. Each starts at its label's width and
-   shares the spare room, so a label wraps between words only once the line
-   is too narrow for it; the button centres its text, so clipping it would
-   cut both ends. */
-.document-decision-design [data-slot="tool-approval-card"] > div:last-child {
-  flex-wrap: nowrap;
-  align-items: stretch;
-}
-
-.document-decision-design
-  [data-slot="tool-approval-card"]
-  > div:last-child
-  > button {
-  flex: 1 1 auto;
-  margin-inline-start: 0;
-  height: auto;
-  min-height: 2rem;
-  white-space: normal;
-  overflow-wrap: normal;
-  word-break: normal;
-  text-align: center;
-}
-
-/* The library keeps a settled line's words from shrinking, so a long document title ran past the
-   column; it ellipsizes here, and the full line is the card's tooltip. */
-.document-decision > p > span {
-  flex-shrink: 1;
-  min-width: 0;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-
-/* A long document title wraps inside the card instead of running past its edge. */
-.document-decision-show {
-  align-self: flex-start;
-  max-width: 100%;
-  height: auto;
-  padding: 0;
-  white-space: normal;
-  text-align: start;
-  overflow-wrap: anywhere;
-}
-
-.document-decision-sources {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-1);
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.document-decision-concepts {
-  width: 100%;
-  margin: 0;
-  border-collapse: collapse;
-}
-
-.document-decision-concepts th,
-.document-decision-concepts td {
-  padding: var(--space-1) var(--space-3) var(--space-1) 0;
-  text-align: start;
-  vertical-align: baseline;
-  font-weight: 400;
-}
-
-.document-decision-concepts thead th {
-  font-weight: 600;
-  color: var(--wb-muted-foreground);
-}
-
-.document-decision-concepts tbody td:first-child {
-  font-weight: 600;
-}
-
-.design-choice {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: var(--space-2);
-  margin: 0;
-}
-
-.design-choice > p {
-  margin: 0;
-}
-
-.design-choice-options {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-1);
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.design-choice-options li {
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
-}
-
-.document-decision-details summary {
-  color: var(--wb-muted-foreground);
-  font-size: 0.75rem;
-  cursor: pointer;
-}
-
-/* An opened list of many versions scrolls inside the card, so the decision stays in view. */
-.document-decision-details .document-decision-sources {
-  max-height: 16rem;
-  margin-top: var(--space-1);
-  overflow-y: auto;
-}
-
-.document-decision-details p {
-  margin: var(--space-1) 0 0;
-  font-size: 0.75rem;
-}
-
-.document-decision-next {
-  margin: 0;
-  color: var(--wb-muted-foreground);
-  font-size: 0.75rem;
-}
-
-/* The log scrolls inside the room. flex-shrink 0 made its height follow the
-   settle spacer, and the spacer then grew from that new height. */
-.room .conv-scroll {
-  flex: 1 1 auto;
-  min-height: 0;
-}
-
-.deliverable-body {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-3);
-}
-
-.conv-scroll {
-  flex: 1;
-  overflow-y: auto;
-  /* Never sideways (#321): `overflow-y: auto` alone makes the x axis auto
-     too, so one child wider than the column let a trackpad gesture carry
-     the whole log to the right and hide the start of every message. */
-  overflow-x: hidden;
-  padding: var(--space-5);
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-4);
-}
-
-/* Each turn is held to the column; whatever is wide inside it scrolls or
-   clips within its own box. */
-.conv-scroll > * {
-  min-width: 0;
-  max-width: 100%;
-}
-
-.pane-switch {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--space-2);
-}
-
-.pane-switch {
-  padding: var(--space-3) var(--space-4);
-  border-bottom: 1px solid var(--wb-border);
-}
-
-.pane-switch button[aria-pressed="true"] {
-  border-color: var(--wb-primary);
-  color: var(--wb-primary);
-}
-
-.document-read {
-  padding: var(--space-5);
-}
-
-.document-raw,
-.diff-lines {
-  font-family: var(--wb-font-mono);
-  font-size: 12px;
-  white-space: pre-wrap;
-  margin: 0;
-}
-
-.gui-frame {
-  flex: 1 1 auto;
-  width: 100%;
-  min-height: 480px;
-  border: 0;
-  background: #fff;
-}
-
-/* ---- composer: one floating line that grows as the person types ---- */
-
-.composer {
-  border-top: 0;
-  padding: var(--space-2) var(--space-4) var(--space-4);
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  flex-shrink: 0;
-  min-height: 0;
-}
-
-/* The composer keeps a reading measure in a wide pane. */
-.stage-conversation > .composer {
-  box-sizing: border-box;
-  width: 100%;
-  max-width: 46rem;
-  margin-inline: auto;
-}
-
-/* The budget row stays above the box, and it scrolls inside its own card.
-   Uncapped, the disclosure is taller than the window and the message box
-   and the log both leave the screen. */
-.composer > .banner {
-  max-height: 8.5rem;
-  overflow-y: auto;
-}
-
-.composer > .composer-box {
-  flex-shrink: 0;
-}
-
-/* Text, microphone and send share one row; the text grows upward from one line. */
-.composer .composer-box {
-  display: flex;
-  flex-flow: row nowrap;
-  align-items: flex-end;
-  gap: var(--space-1);
-  min-width: 0;
-  border: 1px solid var(--wb-border);
-  border-radius: var(--radius-lg);
-  background: var(--wb-card);
-  padding: 6px 6px 6px var(--space-2);
-  transition: border-color 150ms;
-}
-
-.composer .composer-box:focus-within {
-  outline: none;
-  border-color: var(--wb-border-strong);
-}
-
-/* Metrics on the field, padding on textarea and mirror alike: see home-layout.css. */
-.composer .composer-box [data-slot="prompt-input-field"] {
-  align-self: center;
-  font-size: 15px;
-  line-height: 1.5;
-}
-
-.composer .composer-box :is(textarea, [data-slot="prompt-input-mirror"]) {
-  padding-block: 4px;
-}
-
-.composer .composer-box textarea {
-  width: 100%;
-  min-height: 0;
-  max-height: min(180px, 30vh);
-  display: block;
-}
-
-/* An empty box is one line tall, so a placeholder wider than the column would
-   wrap under the border; it stays on that line and ends in an ellipsis. */
-.composer .composer-box textarea:placeholder-shown {
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-
-.composer .composer-box textarea::placeholder {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-
-.composer .composer-box [data-slot="prompt-input-toolbar"] {
-  flex: none;
-  gap: var(--space-1);
-  padding: 0;
-}
-
-/* Ink round send — never the library's primary fill. */
-.composer .composer-box [data-slot="prompt-input-submit"] {
-  width: 32px;
-  height: 32px;
-  min-width: 32px;
-  min-height: 32px;
-  padding: 0;
-  border: 0;
-  background: var(--wb-foreground);
-  color: var(--wb-background);
-  border-radius: 50%;
-  box-shadow: none;
-}
-
-.composer .composer-box [data-slot="prompt-input-submit"]:hover:not(:disabled) {
-  background: var(--wb-foreground);
-  opacity: 0.85;
-}
-
-.composer .composer-box [data-slot="prompt-input-submit"]:disabled {
-  opacity: 0.2;
-}
-
-.composer .dictated {
-  display: grid;
-  gap: var(--space-1);
-}
-
-.composer .dictate {
-  width: 32px;
-  height: 32px;
-  margin: 0;
-  border: 0;
-  border-radius: 50%;
-  background: transparent;
-  color: var(--wb-muted-foreground);
-}
-
-.composer .dictate:hover:not(:disabled) {
-  background: var(--wb-muted);
-  color: var(--wb-foreground);
-}
-
-.composer .approve button {
-  background: transparent;
-  border-color: transparent;
-  color: var(--wb-muted-foreground);
-  height: 32px;
-  padding: 0 var(--space-3);
-  gap: 6px;
-  font-size: 0.8125rem;
-  font-weight: 550;
-  border-radius: var(--radius-md);
-  transition:
-    color 0.15s,
-    border-color 0.15s,
-    background 0.15s;
-}
-
-.composer .approve button:hover:not(:disabled) {
-  color: var(--ok, var(--wb-okay));
-  border-color: color-mix(in srgb, var(--ok, var(--wb-okay)) 40%, transparent);
-  background: color-mix(in srgb, var(--ok, var(--wb-okay)) 8%, transparent);
-}
-
-@media (max-width: 900px) {
-  .panes,
-  .panes:has(> .panes-splitter) {
-    grid-template-columns: 1fr;
-    grid-template-rows: 1fr 1fr;
-  }
-
-  .conv {
-    border-right: 0;
-    border-bottom: 1px solid var(--wb-border);
-  }
-
-  /* A lone conversation runs to the window's right edge, where the guide's
-     button is fixed: the composer keeps clear of it (44px plus its inset). */
-  .panes.chat-first .composer {
-    padding-right: calc(var(--space-4) + 44px + var(--space-6));
-  }
-}
-
-/* Phone widths, from 402px: every pane takes the 16px gutter. */
-@media (max-width: 640px) {
-  .conv-scroll {
-    padding: var(--space-4);
-  }
-
-  .composer {
-    padding: var(--space-2) var(--space-3) var(--space-3);
-  }
-}
-
-/* ---- "How it will actually run": same paper as the doc pane,
-   whether nested inside .doc (stage 6) or standalone (the estimate view). */
-
-.checklist {
-  list-style: none;
-  margin: 0 0 var(--space-3);
-  padding: 0;
-}
-
-.checklist li {
-  display: flex;
-  gap: 8px;
-  align-items: baseline;
-  margin-bottom: 6px;
-}
-
-.checklist li::before {
-  font-family: var(--wb-font-mono);
-  font-size: 11px;
-}
-
-.checklist li.ok::before {
-  content: "✓";
-  color: var(--ok, var(--wb-okay));
-}
-
-.checklist li.open::before {
-  content: "○";
-  color: var(--wb-primary);
-}
-
-.checklist li.fail::before {
-  content: "✗";
-  color: var(--wb-destructive);
-}
diff --git a/apps/web/src/pages/workspace.tsx b/apps/web/src/pages/workspace.tsx
deleted file mode 100644
index 4e9899d6..00000000
--- a/apps/web/src/pages/workspace.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-import "./workspace-layout.css";
-import "./workspace/stage-chrome.css";
-export * from "./workspace/index.tsx";
diff --git a/apps/web/src/pages/workspace/approaches-comparison.module.css b/apps/web/src/pages/workspace/approaches-comparison.module.css
new file mode 100644
index 00000000..81fc0012
--- /dev/null
+++ b/apps/web/src/pages/workspace/approaches-comparison.module.css
@@ -0,0 +1,63 @@
+/* The approaches a version filed, as columns. The grid fits as many as the
+   pane's width allows and stacks the rest, so a narrow pane never scrolls
+   sideways. */
+.approaches {
+  align-self: stretch;
+  margin: var(--space-4) 0 var(--space-6);
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
+  gap: var(--space-4);
+}
+
+.approaches .card {
+  min-width: 0;
+  gap: var(--space-3);
+  padding: var(--space-4);
+  border-radius: var(--radius-panel);
+  border-color: var(--wb-border);
+  background: var(--wb-card);
+}
+
+.approaches .card[data-chosen],
+.grid:not(:has([data-chosen])) .card[data-recommended] {
+  border-color: var(--wb-border-strong);
+  background: color-mix(in srgb, var(--wb-muted) 45%, var(--wb-card));
+}
+
+.badges {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-1);
+  margin-bottom: var(--space-1);
+}
+
+.approaches .card p,
+.points ul {
+  margin: 0;
+}
+
+.points h4 {
+  margin: 0 0 var(--space-1);
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--wb-muted-foreground);
+}
+
+.points ul {
+  padding-inline-start: 1.1em;
+  list-style: disc;
+}
+
+.points li + li {
+  margin-top: var(--space-1);
+}
+
+.approaches .footer {
+  margin-top: auto;
+  padding-top: var(--space-2);
+}
diff --git a/apps/web/src/pages/workspace/approaches-comparison.tsx b/apps/web/src/pages/workspace/approaches-comparison.tsx
index c946838a..ac63f794 100644
--- a/apps/web/src/pages/workspace/approaches-comparison.tsx
+++ b/apps/web/src/pages/workspace/approaches-comparison.tsx
@@ -18,14 +18,16 @@ import type {
 } from "@corbits-builder/schemas/approaches";
 import { useState } from "react";
 import { wording } from "../../config.ts";
+import { Fault } from "../../components.jsx";
 import { humanFault } from "./human-fault.ts";
+import styles from "./approaches-comparison.module.css";
 
 const text = wording.approaches;
 
 function Points({ label, points }: { label: string; points: string[] }) {
   if (points.length === 0) return null;
   return (
-    <div className="approach-points">
+    <div className={styles.points}>
       <h4>{label}</h4>
       <ul>
         {points.map((point, index) => (
@@ -62,22 +64,26 @@ export function ApproachesComparison({
     }
   };
   return (
-    <section className="approaches" aria-label={text.label}>
-      <div className="approaches-grid">
+    <section
+      className={styles.approaches}
+      data-slot="approaches-comparison"
+      aria-label={text.label}
+    >
+      <div className={styles.grid}>
         {meta.approaches.map((approach) => {
           const recommended = approach.id === meta.recommended;
           const picked = approach.id === chosen;
           return (
             <Card
               key={approach.id}
-              className="approach-card"
+              className={styles.card}
               {...(recommended ? { "data-recommended": "" } : {})}
               {...(picked || choosing === approach.id
                 ? { "data-chosen": "" }
                 : {})}
             >
               <CardHeader>
-                <div className="approach-badges">
+                <div className={styles.badges}>
                   {picked ? <Badge tone="success">{text.chosen}</Badge> : null}
                   {recommended ? (
                     <Badge tone="accent">{text.recommended}</Badge>
@@ -87,14 +93,14 @@ export function ApproachesComparison({
                 <CardTitle>{approach.name}</CardTitle>
                 <CardDescription>{approach.summary}</CardDescription>
               </CardHeader>
-              <p className="approach-best-for">
+              <p>
                 <strong>{text.bestFor}:</strong> {approach.bestFor}
               </p>
               <Points label={text.pros} points={approach.pros} />
               <Points label={text.cons} points={approach.cons} />
               <Points label={text.risks} points={approach.risks} />
               {onChoose === undefined || chosen !== undefined ? null : (
-                <CardFooter className="approach-footer">
+                <CardFooter className={styles.footer}>
                   <Button
                     size="sm"
                     variant={recommended ? "primary" : "outline"}
@@ -109,11 +115,7 @@ export function ApproachesComparison({
           );
         })}
       </div>
-      {fault === null ? null : (
-        <p className="inline-note" role="alert">
-          {fault}
-        </p>
-      )}
+      {fault === null ? null : <Fault>{fault}</Fault>}
     </section>
   );
 }
diff --git a/apps/web/src/pages/workspace/approval-package-preview.module.css b/apps/web/src/pages/workspace/approval-package-preview.module.css
new file mode 100644
index 00000000..23bc5d70
--- /dev/null
+++ b/apps/web/src/pages/workspace/approval-package-preview.module.css
@@ -0,0 +1,165 @@
+.package {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+  padding: 0 var(--space-6) var(--space-6);
+}
+
+.tabs {
+  display: inline-flex;
+  align-self: flex-start;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+  padding: 0.25rem;
+  border: 1px solid var(--wb-border);
+  border-radius: var(--radius-control);
+  background: color-mix(in srgb, var(--wb-muted) 50%, var(--wb-background));
+}
+
+.subtab {
+  color: var(--wb-muted-foreground);
+  border: 1px solid transparent;
+}
+
+.subtab[aria-selected="true"] {
+  background: var(--wb-card);
+  color: var(--wb-foreground);
+  border-color: var(--wb-border);
+  font-weight: 600;
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
+}
+
+.pdf {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+}
+
+.pdfToolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3);
+  padding: var(--space-3) var(--space-4);
+  border: 1px solid var(--wb-border);
+  border-radius: var(--radius-panel);
+  background: var(--wb-card);
+}
+
+.pdfToolbarMeta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: var(--space-2);
+}
+
+.pdfTitle {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--wb-foreground);
+}
+
+.pdfFilename {
+  font-family: var(--wb-font-mono);
+  font-size: 0.75rem;
+  color: var(--wb-muted-foreground);
+}
+
+.pdfToolbarActions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+.pdfAction {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.375rem 0.75rem;
+  border-radius: var(--radius-control);
+  border: 1px solid var(--wb-border);
+  background: var(--wb-background);
+  color: var(--wb-foreground);
+  font-size: 0.8125rem;
+  font-weight: 500;
+  text-decoration: none;
+  transition: background-color 120ms ease-out;
+}
+
+.pdfAction:hover {
+  background: var(--wb-muted);
+}
+
+.pdfAction[data-primary] {
+  background: var(--wb-muted);
+  border-color: var(--wb-border-strong);
+  color: var(--wb-foreground);
+  font-weight: 600;
+}
+
+.pdfAction[data-primary]:hover {
+  background: color-mix(in srgb, var(--wb-muted) 85%, var(--wb-foreground));
+}
+
+.sources {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-5);
+}
+
+.manifest {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
+  gap: var(--space-3);
+  margin: 0;
+  padding: var(--space-4);
+  border: 1px solid var(--wb-border);
+  border-radius: var(--radius-panel);
+  background: var(--wb-card);
+}
+
+.manifest dt {
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--wb-muted-foreground);
+}
+
+.manifest dd {
+  margin: var(--space-1) 0 0;
+  font-size: 0.9375rem;
+}
+
+.sourcesTable {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.875rem;
+}
+
+.sourcesTable th,
+.sourcesTable td {
+  padding: var(--space-2) var(--space-3);
+  border-bottom: 1px solid var(--wb-border);
+  text-align: left;
+}
+
+.sourcesTable th {
+  font-weight: 600;
+  color: var(--wb-muted-foreground);
+}
+
+.documentsList {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+}
+
+.document {
+  padding: var(--space-4);
+  border: 1px solid var(--wb-border);
+  border-radius: var(--radius-panel);
+  background: var(--wb-card);
+}
diff --git a/apps/web/src/pages/workspace/approval-package-preview.test.tsx b/apps/web/src/pages/workspace/approval-package-preview.test.tsx
index 37e64cca..3fb88136 100644
--- a/apps/web/src/pages/workspace/approval-package-preview.test.tsx
+++ b/apps/web/src/pages/workspace/approval-package-preview.test.tsx
@@ -288,7 +288,7 @@ describe("approval package preview", () => {
     expect(html).toContain("5 slides");
     expect(html).toContain("Customer Portal Brief");
     expect(html).toContain("Portal Requirements");
-    expect(html).toContain("approval-package-source-link");
+    expect(html).toContain('data-slot="source-link"');
     expect(html).toContain("v2");
     expect(html).toContain("abcdef012345");
     expect(html).toContain("executive-summary.md");
diff --git a/apps/web/src/pages/workspace/approval-package-preview.tsx b/apps/web/src/pages/workspace/approval-package-preview.tsx
index d890c207..2a1d0b3c 100644
--- a/apps/web/src/pages/workspace/approval-package-preview.tsx
+++ b/apps/web/src/pages/workspace/approval-package-preview.tsx
@@ -5,8 +5,11 @@ import {
 } from "@corbits-builder/schemas/artifact";
 import { type } from "arktype";
 import { Suspense, lazy, useEffect, useMemo, useState } from "react";
+import { InlineNote } from "../../components.tsx";
 import { wording } from "../../config.ts";
 import { Markdown } from "../../markdown.jsx";
+import styles from "./approval-package-preview.module.css";
+import { SourceLink } from "./source-link.tsx";
 
 export const APPROVAL_PACKAGE_MEDIA_TYPE =
   "application/vnd.corbits-builder.approval-package+json";
@@ -16,7 +19,7 @@ const text = wording.approvalPackage;
 export type ApprovalPackageViewTab = "slides" | "pdf" | "sources";
 
 function SlidesUnavailable() {
-  return <p className="inline-note">{text.slidesUnavailable}</p>;
+  return <InlineNote>{text.slidesUnavailable}</InlineNote>;
 }
 
 // The slide deck schema is costly to build, so it loads only once a package's slides are shown.
@@ -38,7 +41,7 @@ const DeckPages = lazy(async () => ({
   default: (await slidesModule())?.DeckPages ?? SlidesUnavailable,
 }));
 
-const loadingSlides = <p className="inline-note">{text.loadingSlides}</p>;
+const loadingSlides = <InlineNote>{text.loadingSlides}</InlineNote>;
 
 export function parseApprovalPackage(
   content: string,
@@ -125,21 +128,19 @@ function PdfView({
   const pdfHref = blobUrl ?? fallbackHref;
 
   return (
-    <div className="approval-package-pdf" aria-label={text.pdfTitle}>
-      <div className="approval-package-pdf-toolbar">
-        <div className="approval-package-pdf-toolbar-meta">
-          <strong className="approval-package-pdf-title">
-            {text.pdfTitle}
-          </strong>
-          <span className="approval-package-pdf-filename">{stem}.pdf</span>
+    <div className={styles.pdf} aria-label={text.pdfTitle}>
+      <div className={styles.pdfToolbar}>
+        <div className={styles.pdfToolbarMeta}>
+          <strong className={styles.pdfTitle}>{text.pdfTitle}</strong>
+          <span className={styles.pdfFilename}>{stem}.pdf</span>
         </div>
         {file === null ? (
-          <p className="inline-note">{text.pdfUnreadable}</p>
+          <InlineNote>{text.pdfUnreadable}</InlineNote>
         ) : (
-          <div className="approval-package-pdf-toolbar-actions">
+          <div className={styles.pdfToolbarActions}>
             {blobUrl !== null && (
               <a
-                className="approval-package-pdf-action"
+                className={styles.pdfAction}
                 href={blobUrl}
                 target="_blank"
                 rel="noopener noreferrer"
@@ -148,7 +149,8 @@ function PdfView({
               </a>
             )}
             <a
-              className="approval-package-pdf-action approval-package-pdf-action-primary"
+              className={styles.pdfAction}
+              data-primary=""
               href={pdfHref}
               download={`${stem}.pdf`}
             >
@@ -175,31 +177,22 @@ function SourceRow({
   return (
     <tr>
       <td>
-        <button
-          type="button"
-          className="approval-package-source-link"
-          onClick={() => onOpenSource?.(source.kind, source.version)}
-        >
+        <SourceLink onClick={() => onOpenSource?.(source.kind, source.version)}>
           {kindLabel}
-        </button>
+        </SourceLink>
       </td>
       <td>
-        <button
-          type="button"
-          className="approval-package-source-link"
-          onClick={() => onOpenSource?.(source.kind, source.version)}
-        >
+        <SourceLink onClick={() => onOpenSource?.(source.kind, source.version)}>
           {source.title}
-        </button>
+        </SourceLink>
       </td>
       <td>
-        <button
-          type="button"
-          className="approval-package-source-link approval-package-source-version"
+        <SourceLink
+          version
           onClick={() => onOpenSource?.(source.kind, source.version)}
         >
           v{String(source.version)}
-        </button>
+        </SourceLink>
       </td>
       <td>
         <code>{source.sha256.slice(0, 12)}</code>
@@ -219,8 +212,8 @@ function SourcesView({
   const hasDocuments =
     documents !== undefined && Object.keys(documents).length > 0;
   return (
-    <div className="approval-package-sources">
-      <dl className="approval-package-manifest">
+    <div className={styles.sources}>
+      <dl className={styles.manifest}>
         <div>
           <dt>{text.manifest.audience}</dt>
           <dd>{manifest.audience}</dd>
@@ -240,7 +233,7 @@ function SourcesView({
       </dl>
       <section aria-label={text.manifest.sources}>
         <h3>{text.manifest.sources}</h3>
-        <table className="approval-package-sources-table">
+        <table className={styles.sourcesTable}>
           <thead>
             <tr>
               <th scope="col">{text.manifest.sourceKind}</th>
@@ -263,11 +256,11 @@ function SourcesView({
       {hasDocuments ? (
         <section aria-label={text.manifest.documents}>
           <h3>{text.manifest.documents}</h3>
-          <div className="approval-package-documents-list">
+          <div className={styles.documentsList}>
             {Object.entries(documents).map(([name, docContent]) => (
-              <article key={name} className="approval-package-document">
+              <article key={name} className={styles.document}>
                 <h4>{name}</h4>
-                <Markdown source={docContent} />
+                <Markdown source={docContent} document />
               </article>
             ))}
           </div>
@@ -292,20 +285,20 @@ export function ApprovalPackagePreview({
     useState<ApprovalPackageViewTab>(initialTab);
   const bundle = useMemo(() => parseApprovalPackage(content), [content]);
   if (bundle === null) {
-    return <p className="inline-note">{text.unreadable}</p>;
+    return <InlineNote>{text.unreadable}</InlineNote>;
   }
   return (
-    <section className="approval-package" aria-label={text.label}>
-      <div
-        className="approval-package-tabs"
-        role="tablist"
-        aria-label={text.viewLabel}
-      >
+    <section
+      className={styles.package}
+      data-slot="approval-package-preview"
+      aria-label={text.label}
+    >
+      <div className={styles.tabs} role="tablist" aria-label={text.viewLabel}>
         <Button
           role="tab"
           size="sm"
           variant="ghost"
-          className="approval-package-subtab"
+          className={styles.subtab}
           aria-selected={activeTab === "slides"}
           onClick={() => setActiveTab("slides")}
         >
@@ -315,7 +308,7 @@ export function ApprovalPackagePreview({
           role="tab"
           size="sm"
           variant="ghost"
-          className="approval-package-subtab"
+          className={styles.subtab}
           aria-selected={activeTab === "pdf"}
           onClick={() => setActiveTab("pdf")}
         >
@@ -325,7 +318,7 @@ export function ApprovalPackagePreview({
           role="tab"
           size="sm"
           variant="ghost"
-          className="approval-package-subtab"
+          className={styles.subtab}
           aria-selected={activeTab === "sources"}
           onClick={() => setActiveTab("sources")}
         >
diff --git a/apps/web/src/pages/workspace/approval-package-slides.module.css b/apps/web/src/pages/workspace/approval-package-slides.module.css
new file mode 100644
index 00000000..3eca4390
--- /dev/null
+++ b/apps/web/src/pages/workspace/approval-package-slides.module.css
@@ -0,0 +1,212 @@
+.slides {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-6);
+}
+
+.slide {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+.slideMeta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-2);
+  padding: 0 var(--space-1);
+}
+
+.slideIndex {
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: var(--wb-muted-foreground);
+}
+
+.stage {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  container-type: inline-size;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  overflow: hidden;
+  border: 1px solid var(--wb-border-strong);
+  border-radius: var(--radius-panel);
+  background: var(--slide-bg, #ffffff);
+  color: var(--slide-fg, #0f172a);
+  box-shadow:
+    0 12px 28px -8px rgba(15, 23, 42, 0.2),
+    0 4px 10px -4px rgba(15, 23, 42, 0.1);
+}
+
+@media (max-width: 640px) {
+  .stage {
+    aspect-ratio: auto;
+    min-height: 18rem;
+  }
+}
+
+.accentBar {
+  width: 100%;
+  height: 5px;
+  flex: none;
+  background: var(--slide-accent, var(--wb-primary));
+}
+
+.canvas {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: clamp(0.625rem, 1.5cqw, 1.15rem);
+  padding: clamp(1rem, 2.8cqw, 2.25rem) clamp(1.25rem, 3.4cqw, 2.75rem)
+    clamp(0.5rem, 1.2cqw, 1rem);
+  min-height: 0;
+  overflow-y: auto;
+}
+
+.stage[data-slide-layout="title"] .canvas {
+  justify-content: center;
+}
+
+.kicker {
+  display: inline-block;
+  width: 3rem;
+  height: 4px;
+  border-radius: 999px;
+  margin-bottom: var(--space-1);
+}
+
+.heading {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+.title {
+  margin: 0;
+  font-size: clamp(1.25rem, 2.2vw, 1.65rem);
+  font-weight: 700;
+  line-height: 1.2;
+  letter-spacing: -0.015em;
+  color: var(--slide-heading, inherit);
+}
+
+.stage[data-slide-layout="title"] .title {
+  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
+  line-height: 1.12;
+  letter-spacing: -0.025em;
+}
+
+.subtitle {
+  margin: 0;
+  font-size: clamp(0.925rem, 1.35vw, 1.075rem);
+  line-height: 1.5;
+  max-width: 68ch;
+  color: var(--slide-subtitle, inherit);
+}
+
+.stage[data-slide-layout="title"] .subtitle {
+  font-size: clamp(1rem, 1.6vw, 1.25rem);
+  line-height: 1.55;
+  max-width: 62ch;
+}
+
+.body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  font-size: clamp(0.925rem, 1.3vw, 1.05rem);
+  line-height: 1.6;
+}
+
+.body p {
+  margin: 0;
+}
+
+.body ul,
+.body ol {
+  margin: 0;
+  padding-left: 1.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.45rem;
+}
+
+.body ul {
+  list-style: disc;
+}
+
+.body ol {
+  list-style: decimal;
+}
+
+.body li::marker {
+  color: var(--slide-accent, currentColor);
+}
+
+.columns {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
+  gap: clamp(0.875rem, 2vw, 1.5rem);
+  flex: 1;
+  align-content: start;
+}
+
+.column {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  padding: clamp(0.875rem, 1.8vw, 1.25rem);
+  border-radius: var(--radius-md);
+  background: var(--slide-column-bg, rgba(15, 23, 42, 0.035));
+  border: 1px solid var(--slide-column-border, rgba(15, 23, 42, 0.1));
+}
+
+.columnHeading {
+  margin: 0;
+  padding-bottom: var(--space-1);
+  border-bottom: 1px solid var(--slide-column-border, rgba(15, 23, 42, 0.1));
+  font-size: clamp(0.95rem, 1.35vw, 1.1rem);
+  font-weight: 600;
+  letter-spacing: -0.01em;
+}
+
+.caption {
+  margin: auto 0 0;
+  font-size: 0.875rem;
+  color: var(--slide-subtitle, var(--wb-muted-foreground));
+}
+
+.stageFooter {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  padding: 0 clamp(1.75rem, 4.2vw, 3.25rem) clamp(0.75rem, 1.6vw, 1.25rem);
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  opacity: 0.8;
+}
+
+.pdfPages {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-5);
+  padding: var(--space-5);
+  border: 1px solid var(--wb-border);
+  border-radius: var(--radius-panel);
+  background: color-mix(in srgb, var(--wb-muted) 65%, var(--wb-background));
+}
+
+.pdfPage {
+  margin: 0 auto;
+  width: 100%;
+  max-width: 56rem;
+}
diff --git a/apps/web/src/pages/workspace/approval-package-slides.tsx b/apps/web/src/pages/workspace/approval-package-slides.tsx
index 259d2c7a..b52741fe 100644
--- a/apps/web/src/pages/workspace/approval-package-slides.tsx
+++ b/apps/web/src/pages/workspace/approval-package-slides.tsx
@@ -12,7 +12,9 @@ import {
   type Theme,
 } from "@corbits/slidedeck/deck";
 import { useMemo, type CSSProperties, type ReactNode } from "react";
+import { InlineNote } from "../../components.tsx";
 import { wording } from "../../config.ts";
+import styles from "./approval-package-slides.module.css";
 
 const text = wording.approvalPackage;
 
@@ -203,7 +205,7 @@ function SlideBlock({ block }: { block: Block }) {
 function SlideBlocks({ blocks }: { blocks: readonly Block[] }) {
   if (blocks.length === 0) return null;
   return (
-    <div className="approval-package-slide-body">
+    <div className={styles.body}>
       {blocks.map((block, index) => (
         <SlideBlock key={index} block={block} />
       ))}
@@ -221,12 +223,9 @@ function SlideColumn({
   headingColor: string;
 }) {
   return (
-    <div className="approval-package-column">
+    <div className={styles.column}>
       {heading === undefined ? null : (
-        <h4
-          className="approval-package-column-heading"
-          style={{ color: headingColor }}
-        >
+        <h4 className={styles.columnHeading} style={{ color: headingColor }}>
           {heading}
         </h4>
       )}
@@ -248,7 +247,7 @@ function FreeText({ elements }: { elements: readonly FreeElement[] }) {
     }
   }
   if (paragraphs.length === 0) return null;
-  return <div className="approval-package-slide-body">{paragraphs}</div>;
+  return <div className={styles.body}>{paragraphs}</div>;
 }
 
 function SlideContent({
@@ -264,14 +263,14 @@ function SlideContent({
       return <SlideBlocks blocks={slide.body} />;
     case "two-column":
       return (
-        <div className="approval-package-columns">
+        <div className={styles.columns}>
           <SlideColumn blocks={slide.left} headingColor={headingColor} />
           <SlideColumn blocks={slide.right} headingColor={headingColor} />
         </div>
       );
     case "comparison":
       return (
-        <div className="approval-package-columns">
+        <div className={styles.columns}>
           <SlideColumn
             heading={slide.left.heading}
             blocks={slide.left.body}
@@ -310,29 +309,29 @@ function SlideCanvas({
   const caption = slide.layout === "image" ? slide.caption : undefined;
   return (
     <div
-      className="approval-package-slide-stage"
+      className={styles.stage}
       style={slideStageStyle(theme, palette)}
       data-slide-layout={slide.layout}
       data-slide-tone={palette.isDark ? "dark" : "light"}
     >
       <div
-        className="approval-package-slide-accent-bar"
+        className={styles.accentBar}
         style={{ backgroundColor: palette.accentBar }}
         aria-hidden="true"
       />
-      <div className="approval-package-slide-canvas">
+      <div className={styles.canvas}>
         {title === undefined && subtitle === undefined ? null : (
-          <header className="approval-package-slide-heading">
+          <header className={styles.heading}>
             {slide.layout === "title" ? (
               <span
-                className="approval-package-slide-kicker"
+                className={styles.kicker}
                 style={{ backgroundColor: palette.accentBar }}
                 aria-hidden="true"
               />
             ) : null}
             {title === undefined ? null : (
               <h3
-                className="approval-package-slide-title"
+                className={styles.title}
                 style={{
                   color: palette.heading,
                   fontFamily: theme.fonts.heading,
@@ -343,7 +342,7 @@ function SlideCanvas({
             )}
             {subtitle === undefined ? null : (
               <p
-                className="approval-package-slide-subtitle"
+                className={styles.subtitle}
                 style={{ color: palette.subtitle }}
               >
                 {subtitle}
@@ -353,16 +352,13 @@ function SlideCanvas({
         )}
         <SlideContent slide={slide} headingColor={palette.columnHeading} />
         {caption === undefined ? null : (
-          <p
-            className="approval-package-slide-caption"
-            style={{ color: palette.subtitle }}
-          >
+          <p className={styles.caption} style={{ color: palette.subtitle }}>
             {caption}
           </p>
         )}
       </div>
       <footer
-        className="approval-package-slide-stage-footer"
+        className={styles.stageFooter}
         style={{ color: palette.subtitle }}
       >
         <span>{pageFooter ?? `${String(index + 1)} / ${String(total)}`}</span>
@@ -383,12 +379,9 @@ function SlideCard({
   theme: Theme;
 }) {
   return (
-    <article
-      className="approval-package-slide"
-      data-slide-layout={slide.layout}
-    >
-      <div className="approval-package-slide-meta">
-        <span className="approval-package-slide-index">
+    <article className={styles.slide} data-slide-layout={slide.layout}>
+      <div className={styles.slideMeta}>
+        <span className={styles.slideIndex}>
           {text.slideCount(index + 1, total)}
         </span>
         <Badge tone="neutral">{slide.layout}</Badge>
@@ -402,10 +395,10 @@ function SlideCard({
 export function DeckSlides({ deck }: { deck: Record<string, unknown> }) {
   const readable = useMemo(() => readDeck(deck), [deck]);
   if (readable === null) {
-    return <p className="inline-note">{text.unreadable}</p>;
+    return <InlineNote>{text.unreadable}</InlineNote>;
   }
   return (
-    <div className="approval-package-slides">
+    <div className={styles.slides} data-slot="approval-package-slides">
       {readable.slides.map((slide, index) => (
         <SlideCard
           key={index}
@@ -423,12 +416,12 @@ export function DeckSlides({ deck }: { deck: Record<string, unknown> }) {
 export function DeckPages({ deck }: { deck: Record<string, unknown> }) {
   const readable = useMemo(() => readDeck(deck), [deck]);
   if (readable === null) {
-    return <p className="inline-note">{text.unreadable}</p>;
+    return <InlineNote>{text.unreadable}</InlineNote>;
   }
   return (
-    <div className="approval-package-pdf-pages">
+    <div className={styles.pdfPages} data-slot="approval-package-pages">
       {readable.slides.map((slide, index) => (
-        <div key={index} className="approval-package-pdf-page">
+        <div key={index} className={styles.pdfPage}>
           <SlideCanvas
             slide={slide}
             index={index}
diff --git a/apps/web/src/pages/workspace/approval-rounds.module.css b/apps/web/src/pages/workspace/approval-rounds.module.css
new file mode 100644
index 00000000..822ecce4
--- /dev/null
+++ b/apps/web/src/pages/workspace/approval-rounds.module.css
@@ -0,0 +1,452 @@
+.panel,
+.round,
+.table,
+.list,
+.reviewer,
+.drawer {
+  min-width: 0;
+  max-width: 100%;
+  overflow-x: hidden;
+  box-sizing: border-box;
+}
+
+.panel {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  padding: 0 var(--space-6) 5rem;
+}
+
+.empty {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--space-3);
+  min-width: 0;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3);
+  min-width: 0;
+}
+
+.header h2 {
+  margin: 0;
+  font-size: 1rem;
+  font-weight: 600;
+}
+
+.headerActions {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+.rounds {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  min-width: 0;
+}
+
+.shareDialog {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  padding: 0;
+  border: none;
+  background: transparent;
+  min-width: 0;
+}
+
+.shareReviewers {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  min-width: 0;
+}
+
+/* Laid out like the field's control it fills. */
+.saveToggle {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  width: 100%;
+  min-width: 0;
+  font-size: 0.8125rem;
+  color: var(--wb-muted-foreground);
+  cursor: pointer;
+}
+
+.packageReminder {
+  margin: 0 var(--space-6) var(--space-3);
+  padding: var(--space-2) 0;
+  border: none;
+  border-bottom: 1px solid var(--wb-border);
+  background: transparent;
+  color: var(--wb-muted-foreground);
+}
+
+.shareActions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  padding-top: 0.25rem;
+}
+
+.round {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  padding: 0;
+  border: none;
+  background: transparent;
+}
+
+.roundMeta {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-2);
+  min-width: 0;
+}
+
+.tableHead {
+  display: grid;
+  grid-template-columns: 1rem minmax(0, 1.1fr) minmax(0, 0.75fr) minmax(
+      0,
+      1.85fr
+    ) 5.25rem;
+  align-items: center;
+  gap: 0.75rem;
+  padding: var(--space-2) 0;
+  border-bottom: 1px solid var(--wb-border);
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--wb-muted-foreground);
+  min-width: 0;
+}
+
+.tableHead > span {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: left;
+}
+
+.tableHead > span:last-child {
+  text-align: right;
+}
+
+.table,
+.list {
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.reviewer {
+  display: flex;
+  flex-direction: column;
+  border: none;
+  border-bottom: 1px solid var(--wb-border);
+  border-radius: 0;
+  background: transparent;
+}
+
+.rowToggle {
+  display: grid;
+  grid-template-columns: 1rem minmax(0, 1.1fr) minmax(0, 0.75fr) minmax(
+      0,
+      1.85fr
+    ) 5.25rem;
+  align-items: center;
+  gap: 0.75rem;
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+  box-sizing: border-box;
+  padding: var(--space-2) 0;
+  border: 0;
+  background: transparent;
+  color: var(--wb-foreground);
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.chevron {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--wb-muted-foreground);
+}
+
+.cellName,
+.cellRole,
+.cellGoal {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.cellName {
+  font-weight: 500;
+  font-size: 0.875rem;
+}
+
+.cellRole {
+  font-size: 0.8125rem;
+  color: var(--wb-muted-foreground);
+}
+
+.cellGoal {
+  font-size: 0.8125rem;
+  color: var(--wb-muted-foreground);
+}
+
+.cellStatus {
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--space-1);
+  min-width: 0;
+  white-space: nowrap;
+}
+
+.drawer {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 0.5rem;
+  padding: 0.625rem 1rem 0.75rem 2.25rem;
+  margin: 0;
+  align-items: start;
+  background: var(--surface-subtle, rgba(0, 0, 0, 0.015));
+  border-top: 1px solid var(--border-subtle, var(--border));
+}
+
+.drawer[hidden] {
+  display: none !important;
+}
+
+@media (max-width: 760px) {
+  .drawer {
+    padding-left: 1rem;
+  }
+}
+
+.downloadHead {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-2);
+  font-size: 0.8125rem;
+}
+
+.checklist {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 0.375rem;
+  max-height: 18rem;
+  overflow-y: auto;
+  margin: 0;
+  padding: 0.25rem 0;
+  list-style: none;
+}
+
+.checkRow {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.375rem 0.5rem;
+  border-radius: var(--radius-sm, 0.25rem);
+  font-size: 0.8125rem;
+  color: var(--wb-foreground);
+  cursor: pointer;
+  min-width: 0;
+}
+
+.checkRow:hover {
+  background: var(--wb-muted);
+}
+
+.reviewerActions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.25rem;
+  padding-top: 0.125rem;
+}
+
+.paneSlidesView {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  min-width: 0;
+  max-width: 100%;
+  overflow-x: hidden;
+  box-sizing: border-box;
+}
+
+.paneSlidesBar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-2);
+  padding: var(--space-1) 0;
+  border-bottom: 1px solid var(--wb-border);
+  min-width: 0;
+  max-width: 100%;
+  overflow-x: hidden;
+  box-sizing: border-box;
+}
+
+.paneSlidesTitle {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  text-align: center;
+  color: var(--wb-foreground);
+}
+
+.slideDeckDialog {
+  display: flex;
+  flex-direction: column;
+  width: calc(100vw - 2rem);
+  max-width: none;
+  height: calc(100dvh - 2rem);
+  max-height: none;
+  overflow: hidden;
+}
+
+.slideDeckModalBody {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  padding: 1rem;
+}
+
+.slideDeckModalBody > [data-slot="approval-package-slides"] {
+  width: min(100%, 72rem);
+  margin: 0 auto;
+}
+
+.reviewerDecision {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  padding: 0;
+  border: none;
+  background: transparent;
+  min-width: 0;
+}
+
+.editorActions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+/* Approval round feedback triage items. */
+.triageList {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.triageItem {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  padding: 0.25rem 0;
+  border-bottom: 1px solid var(--border-subtle, var(--border));
+  color: var(--wb-muted-foreground);
+  min-width: 0;
+}
+
+.triageInline {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0;
+  gap: 0.5rem;
+  border: none;
+  background: transparent;
+  width: 100%;
+  min-width: 0;
+}
+
+.triageSummary {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-2);
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.triageMeta {
+  font-size: 0.75rem;
+  color: var(--wb-muted-foreground);
+}
+
+.triageActions {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.25rem;
+}
+
+.triageIconButton {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  padding: 0;
+  border: none;
+  background: transparent;
+  box-shadow: none;
+  border-radius: var(--radius-control);
+  color: var(--wb-muted-foreground);
+}
+
+.triageIconButton[data-action="incorporate"]:hover:not(:disabled) {
+  color: #15803d;
+  background: rgba(22, 163, 74, 0.1);
+}
+
+.triageIconButton[data-action="dismiss"]:hover:not(:disabled) {
+  color: #b91c1c;
+  background: rgba(220, 38, 38, 0.1);
+}
+
+.triageText {
+  margin: 0;
+  font-size: 0.8125rem;
+}
diff --git a/apps/web/src/pages/workspace/approval-rounds.test.tsx b/apps/web/src/pages/workspace/approval-rounds.test.tsx
index a3736220..2c07e86d 100644
--- a/apps/web/src/pages/workspace/approval-rounds.test.tsx
+++ b/apps/web/src/pages/workspace/approval-rounds.test.tsx
@@ -15,7 +15,8 @@ import * as actualConversation from "../../api/conversation.ts";
 import { WhatsNewDialog } from "../../App.tsx";
 import { wording } from "../../config.ts";
 import { queryClient } from "../../queries/client.ts";
-import { Settings, WorkspaceApprovals } from "../settings.tsx";
+import { Settings } from "../settings/settings.tsx";
+import { WorkspaceApprovals } from "../settings/workspace-approvals.tsx";
 import {
   readWorkspaceReviewers,
   writeWorkspaceReviewers,
@@ -649,18 +650,18 @@ describe("approval rounds panel", () => {
     expect(html).toContain("Download package");
     expect(html).toContain("View slide deck");
     expect(html).not.toContain("Ask coordinator to tailor package");
-    expect(html).toContain(
-      '<span class="approval-reviewer-cell-status"><span class="approval-status-text approval-status-warning">Pending Feedback</span></span>',
+    expect(html).toMatch(
+      /data-cell="status"><span [^>]*data-slot="quiet-state" data-tone="warning" data-words="">Pending Feedback<\/span><\/span>/,
     );
     expect(html).not.toContain("Request changes");
     expect(html).toContain("Clarify Q3 staffing assumptions.");
     expect(html).not.toContain(
-      '<span class="approval-status-text approval-status-neutral">Pending</span>',
+      'data-slot="quiet-state" data-tone="info" data-words="">Pending</span>',
     );
     expect(html).toContain('aria-label="Incorporate"');
     expect(html).toContain('aria-label="Dismiss"');
     expect(html).not.toContain(">Reply<");
-    expect(html).toContain('class="approval-reviewer-drawer"');
+    expect(html).toContain('data-slot="reviewer-drawer"');
     expect(html).toContain('aria-label="Dana Reviewer Reviewer name"');
     expect(html).toContain('aria-label="Dana Reviewer Persona"');
     expect(html).toContain(
@@ -668,15 +669,15 @@ describe("approval rounds panel", () => {
     );
     expect(html).toContain('aria-label="Dana Reviewer Decision"');
     expect(html).toContain('aria-label="Dana Reviewer Feedback notes"');
-    expect(html).not.toContain("approval-field-save-btn");
+    expect(html).not.toContain('data-action="save"');
     expect(html).toContain("Eli Security");
     expect(html).toContain("Security Lead");
     expect(html).toContain("Generate slide deck");
     expect(html).not.toContain(
       'aria-label="Download Approval Package for Eli Security"',
     );
-    expect(html).toContain(
-      '<span class="approval-reviewer-cell-status"><span class="approval-status-text approval-status-neutral">Sent</span></span>',
+    expect(html).toMatch(
+      /data-cell="status"><span [^>]*data-slot="quiet-state" data-tone="info" data-words="">Sent<\/span><\/span>/,
     );
     expect(html).toContain("Mark settled");
   });
@@ -956,29 +957,29 @@ describe("approval rounds panel", () => {
       />
     ));
 
-    expect(harness.html()).not.toContain("approval-pane-slides-view");
-    expect(harness.html()).not.toContain("device-preview-expanded");
+    expect(harness.html()).not.toContain('data-slot="pane-slide-deck"');
+    expect(harness.html()).not.toContain('data-slot="slide-deck-modal"');
 
     const viewDeckBtn = harness.findButton("View slide deck");
     (viewDeckBtn.props["onClick"] as () => void)();
 
     const paneHtml = harness.html();
-    expect(paneHtml).toContain("approval-pane-slides-view");
+    expect(paneHtml).toContain('data-slot="pane-slide-deck"');
     expect(paneHtml).toContain("Dana Reviewer — Finance VP");
     expect(paneHtml).toContain("Customer Portal Approval Deck");
-    expect(paneHtml).not.toContain("device-preview-expanded");
+    expect(paneHtml).not.toContain('data-slot="slide-deck-modal"');
 
     const expandBtn = harness.findButton(wording.preview.expand);
     (expandBtn.props["onClick"] as () => void)();
 
     const modalHtml = harness.html();
-    expect(modalHtml).toContain("device-preview-expanded");
+    expect(modalHtml).toContain('data-slot="slide-deck-modal"');
     expect(modalHtml).toContain("Dana Reviewer — Finance VP");
     expect(modalHtml).toContain("Customer Portal Approval Deck");
 
     const backBtn = harness.findButton(wording.shell.back);
     (backBtn.props["onClick"] as () => void)();
-    expect(harness.html()).not.toContain("approval-pane-slides-view");
+    expect(harness.html()).not.toContain('data-slot="pane-slide-deck"');
   });
 
   test("clicking Incorporate synchronously populates onAddToPrompt and optimistically marks the item Incorporated", () => {
@@ -1005,11 +1006,11 @@ describe("approval rounds panel", () => {
       },
     ]);
     expect(harness.html()).toContain(
-      '<span class="approval-status-text approval-status-success">Incorporated</span>',
+      'data-slot="quiet-state" data-tone="success" data-words="">Incorporated</span>',
     );
   });
 
-  test("changing uniform 1-row inline fields (Name, Role, Focus, Decision, Feedback) inside .approval-reviewer-drawer reveals the field's Save button on the right and saves the updated decision/details", async () => {
+  test("changing uniform 1-row inline fields (Name, Role, Focus, Decision, Feedback) inside the reviewer drawer reveals the field's Save button on the right and saves the updated decision/details", async () => {
     recordDecisionCalls = [];
     const harness = createStatefulHarness(() => (
       <ApprovalRoundsPanel
@@ -1083,9 +1084,7 @@ describe("approval rounds panel", () => {
     expect(html).toContain('aria-label="Add new reviewer"');
     expect(html).toContain('aria-label="Expires in"');
     expect(html).toContain('aria-label="Reviewer 1"');
-    expect(html).toContain(
-      'class="approval-inline-fields settings-reviewer-form"',
-    );
+    expect(html).toContain('data-slot="approval-fields" data-variant="form"');
     expect(html).not.toContain("Pick from workspace");
     expect(html).toContain('aria-label="Reviewer 1 Reviewer name"');
     expect(html).toContain('aria-label="Reviewer 1 Persona"');
@@ -1111,9 +1110,13 @@ describe("approval rounds panel", () => {
     expect(html).toContain("Workspace reviewers");
     expect(html).toContain("No saved workspace reviewers yet.");
     expect(html).not.toContain("invite-form");
-    expect(html).toContain("settings-reviewer-form");
-    expect(html).toContain("approval-lean-input");
-    expect(html).toContain("approval-lean-select");
+    expect(html).toContain('data-slot="approval-fields" data-variant="form"');
+    expect(html).toMatch(
+      /<input [^>]*data-slot="lean-input"[^>]*data-variant="form"/,
+    );
+    expect(html).toMatch(
+      /<select [^>]*data-slot="lean-select"[^>]*data-variant="form"/,
+    );
     expect(html).toContain("Add reviewer");
     expect(html).toContain("Other…");
   });
@@ -1126,9 +1129,7 @@ describe("approval rounds panel", () => {
     try {
       const settingsHtml = renderToStaticMarkup(<WorkspaceApprovals />);
       expect(settingsHtml).toContain("Jordan Lee");
-      expect(settingsHtml).toContain(
-        '<span class="approval-status-text">CTO</span>',
-      );
+      expect(settingsHtml).toContain('data-slot="inline-note">CTO</span>');
       expect(settingsHtml).toContain("Remove");
       const dialogHtml = renderToStaticMarkup(
         <SharePackageDialog
@@ -1195,6 +1196,6 @@ describe("approval rounds panel", () => {
     expect(html).toContain("Approvals (Experimental)");
     expect(html).toContain('id="preference-experimental_approvals"');
     expect(html).not.toContain('id="preference-experimental_slide_decks"');
-    expect(html).toContain('data-highlighted="true"');
+    expect(html).toContain('data-highlighted=""');
   });
 });
diff --git a/apps/web/src/pages/workspace/approval-rounds.tsx b/apps/web/src/pages/workspace/approval-rounds.tsx
index f6e987ae..54706f62 100644
--- a/apps/web/src/pages/workspace/approval-rounds.tsx
+++ b/apps/web/src/pages/workspace/approval-rounds.tsx
@@ -1,4 +1,4 @@
-import { Button, Input, Switch } from "@corbits/react-ui";
+import { Button, Switch } from "@corbits/react-ui";
 import {
   Dialog,
   DialogBody,
@@ -46,6 +46,7 @@ import {
   triageReviewerFeedback,
 } from "../../api/artifacts.ts";
 import { sendMessage } from "../../api/conversation.ts";
+import { Fault, InlineNote, QuietState, type Tone } from "../../components.jsx";
 import { wording } from "../../config.ts";
 import { queryClient } from "../../queries/client.ts";
 import { keys } from "../../queries/keys.ts";
@@ -57,14 +58,24 @@ import {
   useCustomReviewerPersonas,
   useWorkspaceReviewers,
 } from "../../workspace-approvals-setting.ts";
+import {
+  ApprovalField,
+  ApprovalFields,
+  FieldSaveButton,
+  LeanButton,
+  LeanInput,
+  LeanSelect,
+} from "../approval-fields.tsx";
 import {
   ApprovalPackagePreview,
   parseApprovalPackage,
   SlidesView,
 } from "./approval-package-preview.tsx";
+import styles from "./approval-rounds.module.css";
 import { humanFault, responseCode } from "./human-fault.ts";
 import { DesignTarget } from "./mockup-tweaks.tsx";
 import type { PassageQuote } from "./passage-note.tsx";
+import { SourceLink } from "./source-link.tsx";
 
 const roundText = wording.approvalRound;
 const OTHER_PERSONA_VALUE = "__other__";
@@ -75,31 +86,29 @@ const OUTCOME_OPTIONS: readonly ReviewerOutcome[] = [
   "comment",
 ];
 
-type BadgeTone = "neutral" | "accent" | "success" | "warning" | "danger";
-
-const ROUND_STATUS_TONE: Readonly<Record<ApprovalRoundStatus, BadgeTone>> = {
-  open: "neutral",
+const ROUND_STATUS_TONE: Readonly<Record<ApprovalRoundStatus, Tone>> = {
+  open: "info",
   settled: "success",
-  expired: "danger",
+  expired: "error",
 };
 
-const REVIEWER_STATE_TONE: Readonly<Record<ReviewerState, BadgeTone>> = {
-  sent: "neutral",
+const REVIEWER_STATE_TONE: Readonly<Record<ReviewerState, Tone>> = {
+  sent: "info",
   decided: "success",
-  expired: "danger",
+  expired: "error",
 };
 
-const OUTCOME_TONE: Readonly<Record<ReviewerOutcome, BadgeTone>> = {
+const OUTCOME_TONE: Readonly<Record<ReviewerOutcome, Tone>> = {
   approve: "success",
   request_changes: "warning",
-  comment: "neutral",
+  comment: "info",
 };
 
-const TRIAGE_STATUS_TONE: Readonly<Record<TriageItemStatus, BadgeTone>> = {
-  pending: "neutral",
+const TRIAGE_STATUS_TONE: Readonly<Record<TriageItemStatus, Tone>> = {
+  pending: "info",
   incorporated: "success",
-  dismissed: "neutral",
-  replied: "neutral",
+  dismissed: "info",
+  replied: "info",
 };
 
 function triggerBrowserDownload(file: File) {
@@ -126,7 +135,7 @@ function getEffectiveReviewerGoal(reviewer: ApprovalReviewer): string {
 
 function getReviewerStatusDisplay(reviewer: ApprovalReviewer): {
   label: string;
-  tone: BadgeTone;
+  tone: Tone;
 } {
   if (reviewer.decision !== undefined) {
     return {
@@ -461,14 +470,14 @@ export function SharePackageDialog({
 
   return (
     <div
-      className="approval-share-dialog"
+      className={styles.shareDialog}
       role="dialog"
       aria-label={roundText.dialogTitle}
       onKeyDown={(event) => {
         if (event.key === "Escape") onCancel();
       }}
     >
-      <div className="approval-share-reviewers">
+      <div className={styles.shareReviewers}>
         {reviewers.map((reviewer, index) => {
           const rowLabel = roundText.reviewerRowLabel(index + 1);
           const selectedWorkspaceId =
@@ -485,166 +494,117 @@ export function SharePackageDialog({
               : reviewer.customPersonaDraft;
           const showSaveToggle = reviewer.workspaceReviewerId === undefined;
           return (
-            <div
+            <ApprovalFields
               key={reviewer.key}
-              className="approval-inline-fields settings-reviewer-form"
+              variant="form"
               role="group"
               aria-label={rowLabel}
             >
               {workspaceReviewers.length === 0 ? null : (
-                <div className="approval-field-row">
-                  <span className="approval-field-label">
-                    {roundText.fieldLabels.saved}
-                  </span>
-                  <div className="approval-field-control">
-                    <select
-                      className="approval-lean-select"
-                      aria-label={`${rowLabel} ${roundText.workspaceReviewerLabel}`}
-                      value={selectedWorkspaceId}
-                      onChange={(event) =>
-                        selectWorkspaceReviewer(
-                          reviewer.key,
-                          event.target.value,
-                        )
-                      }
-                    >
-                      <option value="">
-                        {roundText.workspaceReviewerPlaceholder}
-                      </option>
-                      {workspaceReviewers.map((saved) => (
-                        <option key={saved.id} value={saved.id}>
-                          {roundText.workspaceReviewerOption(
-                            saved.name,
-                            saved.persona,
-                          )}
-                        </option>
-                      ))}
-                    </select>
-                  </div>
-                </div>
-              )}
-              <div className="approval-field-row">
-                <span className="approval-field-label">
-                  {roundText.fieldLabels.name}
-                </span>
-                <div className="approval-field-control">
-                  <Input
-                    className="approval-lean-input"
-                    aria-label={`${rowLabel} ${roundText.reviewerName}`}
-                    placeholder={roundText.reviewerNamePlaceholder}
-                    value={reviewer.name}
-                    onChange={(event) =>
-                      setReviewerField(reviewer.key, "name", event.target.value)
-                    }
-                  />
-                </div>
-              </div>
-              <div className="approval-field-row">
-                <span className="approval-field-label">
-                  {roundText.fieldLabels.role}
-                </span>
-                <div className="approval-field-control">
-                  <select
-                    className="approval-lean-select"
-                    aria-label={`${rowLabel} ${roundText.reviewerPersona}`}
-                    value={selectedPersonaValue}
+                <ApprovalField label={roundText.fieldLabels.saved}>
+                  <LeanSelect
+                    aria-label={`${rowLabel} ${roundText.workspaceReviewerLabel}`}
+                    value={selectedWorkspaceId}
                     onChange={(event) =>
-                      selectReviewerPersona(reviewer.key, event.target.value)
+                      selectWorkspaceReviewer(reviewer.key, event.target.value)
                     }
                   >
                     <option value="">
-                      {roundText.reviewerPersonaPlaceholder}
+                      {roundText.workspaceReviewerPlaceholder}
                     </option>
-                    {personaOptions.map((persona) => (
-                      <option key={persona} value={persona}>
-                        {persona}
+                    {workspaceReviewers.map((saved) => (
+                      <option key={saved.id} value={saved.id}>
+                        {roundText.workspaceReviewerOption(
+                          saved.name,
+                          saved.persona,
+                        )}
                       </option>
                     ))}
-                    <option value={OTHER_PERSONA_VALUE}>
-                      {roundText.otherPersona}
+                  </LeanSelect>
+                </ApprovalField>
+              )}
+              <ApprovalField label={roundText.fieldLabels.name}>
+                <LeanInput
+                  aria-label={`${rowLabel} ${roundText.reviewerName}`}
+                  placeholder={roundText.reviewerNamePlaceholder}
+                  value={reviewer.name}
+                  onChange={(event) =>
+                    setReviewerField(reviewer.key, "name", event.target.value)
+                  }
+                />
+              </ApprovalField>
+              <ApprovalField label={roundText.fieldLabels.role}>
+                <LeanSelect
+                  aria-label={`${rowLabel} ${roundText.reviewerPersona}`}
+                  value={selectedPersonaValue}
+                  onChange={(event) =>
+                    selectReviewerPersona(reviewer.key, event.target.value)
+                  }
+                >
+                  <option value="">
+                    {roundText.reviewerPersonaPlaceholder}
+                  </option>
+                  {personaOptions.map((persona) => (
+                    <option key={persona} value={persona}>
+                      {persona}
                     </option>
-                  </select>
-                </div>
-              </div>
+                  ))}
+                  <option value={OTHER_PERSONA_VALUE}>
+                    {roundText.otherPersona}
+                  </option>
+                </LeanSelect>
+              </ApprovalField>
               {reviewer.customPersonaOpen === true ? (
-                <div className="approval-field-row">
-                  <span className="approval-field-label">
-                    {roundText.customPersonaLabel}
-                  </span>
-                  <div className="approval-field-control approval-custom-persona-row">
-                    <Input
-                      className="approval-lean-input"
-                      aria-label={`${rowLabel} ${roundText.customPersonaLabel}`}
-                      placeholder={roundText.customPersonaPlaceholder}
-                      value={customPersonaValue}
-                      onChange={(event) =>
-                        setCustomPersonaDraft(reviewer.key, event.target.value)
-                      }
-                      onKeyDown={(event) => {
-                        if (event.key === "Enter") {
-                          event.preventDefault();
-                          commitCustomPersona(reviewer.key);
-                        }
-                      }}
-                    />
-                    <Button
-                      type="button"
-                      size="sm"
-                      variant="outline"
-                      className="approval-field-save-btn"
-                      onClick={() => commitCustomPersona(reviewer.key)}
-                    >
-                      {roundText.addCustomPersona}
-                    </Button>
-                  </div>
-                </div>
-              ) : null}
-              <div className="approval-field-row">
-                <span className="approval-field-label">
-                  {roundText.fieldLabels.focus}
-                </span>
-                <div className="approval-field-control">
-                  <Input
-                    className="approval-lean-input"
-                    aria-label={`${rowLabel} ${roundText.reviewerGoal}`}
-                    placeholder={roundText.reviewerGoalPlaceholder}
-                    value={reviewer.goal === undefined ? "" : reviewer.goal}
-                    onChange={(event) =>
-                      setReviewerField(reviewer.key, "goal", event.target.value)
-                    }
-                  />
-                </div>
-              </div>
-              <div className="approval-field-row">
-                <span className="approval-field-label">
-                  {roundText.fieldLabels.email}
-                </span>
-                <div className="approval-field-control">
-                  <Input
-                    className="approval-lean-input"
-                    type="email"
-                    aria-label={`${rowLabel} ${roundText.reviewerEmail}`}
-                    placeholder={roundText.reviewerEmailPlaceholder}
-                    value={reviewer.email === undefined ? "" : reviewer.email}
+                <ApprovalField label={roundText.customPersonaLabel}>
+                  <LeanInput
+                    aria-label={`${rowLabel} ${roundText.customPersonaLabel}`}
+                    placeholder={roundText.customPersonaPlaceholder}
+                    value={customPersonaValue}
                     onChange={(event) =>
-                      setReviewerField(
-                        reviewer.key,
-                        "email",
-                        event.target.value,
-                      )
+                      setCustomPersonaDraft(reviewer.key, event.target.value)
                     }
+                    onKeyDown={(event) => {
+                      if (event.key === "Enter") {
+                        event.preventDefault();
+                        commitCustomPersona(reviewer.key);
+                      }
+                    }}
                   />
-                </div>
-              </div>
-              {showSaveToggle ? (
-                <div className="approval-field-row">
-                  <span className="approval-field-label">
-                    {roundText.fieldLabels.workspace}
-                  </span>
-                  <div
-                    className="approval-field-control approval-save-workspace-toggle"
-                    title={roundText.saveToWorkspaceTooltip}
+                  <FieldSaveButton
+                    type="button"
+                    onClick={() => commitCustomPersona(reviewer.key)}
                   >
+                    {roundText.addCustomPersona}
+                  </FieldSaveButton>
+                </ApprovalField>
+              ) : null}
+              <ApprovalField label={roundText.fieldLabels.focus}>
+                <LeanInput
+                  aria-label={`${rowLabel} ${roundText.reviewerGoal}`}
+                  placeholder={roundText.reviewerGoalPlaceholder}
+                  value={reviewer.goal === undefined ? "" : reviewer.goal}
+                  onChange={(event) =>
+                    setReviewerField(reviewer.key, "goal", event.target.value)
+                  }
+                />
+              </ApprovalField>
+              <ApprovalField label={roundText.fieldLabels.email}>
+                <LeanInput
+                  type="email"
+                  aria-label={`${rowLabel} ${roundText.reviewerEmail}`}
+                  placeholder={roundText.reviewerEmailPlaceholder}
+                  value={reviewer.email === undefined ? "" : reviewer.email}
+                  onChange={(event) =>
+                    setReviewerField(reviewer.key, "email", event.target.value)
+                  }
+                />
+              </ApprovalField>
+              {showSaveToggle ? (
+                <ApprovalField
+                  label={roundText.fieldLabels.workspace}
+                  title={roundText.saveToWorkspaceTooltip}
+                >
+                  <div className={styles.saveToggle}>
                     <Switch
                       label={roundText.saveToWorkspaceLabel(
                         reviewer.name.trim(),
@@ -654,38 +614,32 @@ export function SharePackageDialog({
                         setSaveToWorkspace(reviewer.key, checked)
                       }
                     />
-                    <span className="inline-note">
+                    <InlineNote as="span">
                       {roundText.saveToWorkspaceNote}
-                    </span>
+                    </InlineNote>
                   </div>
-                </div>
+                </ApprovalField>
               ) : null}
-              <div className="approval-field-row">
-                <span className="approval-field-label">
-                  {roundText.fieldLabels.expires}
-                </span>
-                <div className="approval-field-control">
-                  <select
-                    className="approval-lean-select"
-                    aria-label={roundText.expiryLabel}
-                    value={expiry}
-                    onChange={(event) =>
-                      setExpiry(event.target.value as ExpiryPreset)
-                    }
-                  >
-                    {EXPIRY_OPTIONS.map((preset) => (
-                      <option key={preset} value={preset}>
-                        {roundText.expiry[preset]}
-                      </option>
-                    ))}
-                  </select>
-                </div>
-              </div>
-            </div>
+              <ApprovalField label={roundText.fieldLabels.expires}>
+                <LeanSelect
+                  aria-label={roundText.expiryLabel}
+                  value={expiry}
+                  onChange={(event) =>
+                    setExpiry(event.target.value as ExpiryPreset)
+                  }
+                >
+                  {EXPIRY_OPTIONS.map((preset) => (
+                    <option key={preset} value={preset}>
+                      {roundText.expiry[preset]}
+                    </option>
+                  ))}
+                </LeanSelect>
+              </ApprovalField>
+            </ApprovalFields>
           );
         })}
       </div>
-      <div className="row approval-share-actions">
+      <div className={styles.shareActions}>
         <Button type="button" size="sm" variant="ghost" onClick={onCancel}>
           {roundText.cancelShare}
         </Button>
@@ -773,25 +727,24 @@ function TriageItemRow({
   const alreadyIncorporated = item.status === "incorporated";
 
   return (
-    <li className="tweak-row approval-triage-item">
-      <div className="approval-triage-item-inline">
-        <div className="approval-triage-summary">
-          <span className="approval-triage-text">{item.text}</span>
-          <span className="approval-triage-meta">{scopeLabel}</span>
+    <li className={styles.triageItem}>
+      <div className={styles.triageInline}>
+        <div className={styles.triageSummary}>
+          <span className={styles.triageText}>{item.text}</span>
+          <span className={styles.triageMeta}>{scopeLabel}</span>
           {item.status === "pending" ? null : (
-            <span
-              className={`approval-status-text approval-status-${TRIAGE_STATUS_TONE[item.status]}`}
-            >
+            <QuietState tone={TRIAGE_STATUS_TONE[item.status]} dot={false}>
               {roundText.triageStatus[item.status]}
-            </span>
+            </QuietState>
           )}
         </div>
-        <div className="row tweak-actions approval-triage-actions">
+        <div className={styles.triageActions}>
           <Button
             type="button"
             size="sm"
             variant="ghost"
-            className="approval-triage-icon-btn approval-triage-icon-btn-check"
+            className={styles.triageIconButton}
+            data-action="incorporate"
             aria-label={roundText.incorporate}
             title={roundText.incorporate}
             disabled={busy || alreadyIncorporated}
@@ -803,7 +756,8 @@ function TriageItemRow({
             type="button"
             size="sm"
             variant="ghost"
-            className="approval-triage-icon-btn approval-triage-icon-btn-dismiss"
+            className={styles.triageIconButton}
+            data-action="dismiss"
             aria-label={roundText.dismiss}
             title={roundText.dismiss}
             disabled={
@@ -815,11 +769,7 @@ function TriageItemRow({
           </Button>
         </div>
       </div>
-      {fault === null ? null : (
-        <p className="inline-note" role="alert">
-          {fault}
-        </p>
-      )}
+      {fault === null ? null : <Fault>{fault}</Fault>}
     </li>
   );
 }
@@ -836,8 +786,8 @@ function renderReviewerDecisionSection(
     return null;
   }
   return (
-    <div className="approval-reviewer-decision">
-      <ul className="approval-triage-list" aria-label={roundText.triageHeading}>
+    <div className={styles.reviewerDecision}>
+      <ul className={styles.triageList} aria-label={roundText.triageHeading}>
         {reviewerItems.map((item) => (
           <TriageItemRow
             key={item.itemId}
@@ -865,46 +815,38 @@ function PaneSlideDeckView({
   const [slidesExpanded, setSlidesExpanded] = useState(false);
 
   return (
-    <div className="approval-pane-slides-view">
-      <div className="approval-pane-slides-bar">
-        <Button
-          type="button"
-          size="sm"
-          variant="ghost"
-          className="approval-lean-btn"
-          onClick={onBack}
-        >
+    <div className={styles.paneSlidesView} data-slot="pane-slide-deck">
+      <div className={styles.paneSlidesBar}>
+        <LeanButton type="button" onClick={onBack}>
           <ArrowLeft size={14} aria-hidden="true" />
           {wording.shell.back}
-        </Button>
-        <strong className="approval-pane-slides-title">{title}</strong>
-        <Button
+        </LeanButton>
+        <strong className={styles.paneSlidesTitle}>{title}</strong>
+        <LeanButton
           type="button"
-          size="sm"
-          variant="ghost"
-          className="approval-lean-btn"
           aria-label={wording.preview.expand}
           title={wording.preview.expand}
           onClick={() => setSlidesExpanded(true)}
         >
           <Maximize2 size={14} aria-hidden="true" />
-        </Button>
+        </LeanButton>
       </div>
       {bundle === null ? (
-        <p className="inline-note">{wording.approvalPackage.unreadable}</p>
+        <InlineNote>{wording.approvalPackage.unreadable}</InlineNote>
       ) : (
         <SlidesView deck={bundle.deck} />
       )}
       <Dialog open={slidesExpanded} onOpenChange={setSlidesExpanded}>
-        <DialogContent className="device-preview-expanded approval-slide-deck-dialog">
+        <DialogContent className={styles.slideDeckDialog}>
           <DialogHeader>
             <DialogTitle>{title}</DialogTitle>
           </DialogHeader>
-          <div className="approval-slide-deck-modal-body">
+          <div
+            className={styles.slideDeckModalBody}
+            data-slot="slide-deck-modal"
+          >
             {bundle === null ? (
-              <p className="inline-note">
-                {wording.approvalPackage.unreadable}
-              </p>
+              <InlineNote>{wording.approvalPackage.unreadable}</InlineNote>
             ) : (
               <SlidesView deck={bundle.deck} />
             )}
@@ -1193,225 +1135,176 @@ function ReviewerTableRow({
 
   return (
     <li
-      className="approval-reviewer-item approval-reviewer-row"
+      className={styles.reviewer}
       data-expanded={isExpanded ? "true" : "false"}
     >
       <button
         type="button"
-        className="approval-reviewer-row-toggle"
+        className={styles.rowToggle}
         aria-expanded={isExpanded}
         onClick={onToggleExpand}
       >
-        <span className="approval-reviewer-chevron" aria-hidden="true">
+        <span className={styles.chevron} aria-hidden="true">
           {isExpanded ? <ChevronDown size={15} /> : <ChevronRight size={15} />}
         </span>
-        <strong className="approval-reviewer-cell-name">{reviewer.name}</strong>
-        <span className="approval-reviewer-cell-role">{reviewer.persona}</span>
-        <span className="approval-reviewer-cell-goal">{effectiveGoal}</span>
-        <span className="approval-reviewer-cell-status">
-          <span
-            className={`approval-status-text approval-status-${statusDisplay.tone}`}
-          >
+        <strong className={styles.cellName}>{reviewer.name}</strong>
+        <span className={styles.cellRole}>{reviewer.persona}</span>
+        <span className={styles.cellGoal}>{effectiveGoal}</span>
+        <span className={styles.cellStatus} data-cell="status">
+          <QuietState tone={statusDisplay.tone} dot={false}>
             {statusDisplay.label}
-          </span>
+          </QuietState>
         </span>
       </button>
-      <div className="approval-reviewer-drawer" hidden={!isExpanded}>
-        {rowFault === null ? null : (
-          <p className="inline-note" role="alert">
-            {rowFault}
-          </p>
-        )}
-        <div className="approval-inline-fields">
-          <div className="approval-field-row">
-            <span className="approval-field-label">
-              {roundText.fieldLabels.name}
-            </span>
-            <div className="approval-field-control">
-              <Input
-                className="approval-lean-input"
-                aria-label={`${reviewer.name} ${roundText.reviewerName}`}
-                value={nameDraft}
-                disabled={round.status !== "open"}
-                onChange={(event) => setNameDraft(event.target.value)}
-              />
-            </div>
-            <div className="approval-field-action">
-              {round.status === "open" && nameDirty ? (
-                <Button
+      <div
+        className={styles.drawer}
+        data-slot="reviewer-drawer"
+        hidden={!isExpanded}
+      >
+        {rowFault === null ? null : <Fault>{rowFault}</Fault>}
+        <ApprovalFields>
+          <ApprovalField
+            label={roundText.fieldLabels.name}
+            action={
+              round.status === "open" && nameDirty ? (
+                <FieldSaveButton
                   type="button"
-                  size="sm"
-                  variant="outline"
-                  className="approval-field-save-btn"
                   disabled={savingDetails}
                   onClick={() => void saveReviewerDetails()}
                 >
                   {savingDetails ? roundText.savingField : roundText.saveField}
-                </Button>
-              ) : null}
-            </div>
-          </div>
-          <div className="approval-field-row">
-            <span className="approval-field-label">
-              {roundText.fieldLabels.role}
-            </span>
-            <div className="approval-field-control">
-              <Input
-                className="approval-lean-input"
-                aria-label={`${reviewer.name} ${roundText.reviewerPersona}`}
-                value={personaDraft}
-                disabled={round.status !== "open"}
-                onChange={(event) => setPersonaDraft(event.target.value)}
-              />
-            </div>
-            <div className="approval-field-action">
-              {round.status === "open" && personaDirty ? (
-                <Button
+                </FieldSaveButton>
+              ) : null
+            }
+          >
+            <LeanInput
+              aria-label={`${reviewer.name} ${roundText.reviewerName}`}
+              value={nameDraft}
+              disabled={round.status !== "open"}
+              onChange={(event) => setNameDraft(event.target.value)}
+            />
+          </ApprovalField>
+          <ApprovalField
+            label={roundText.fieldLabels.role}
+            action={
+              round.status === "open" && personaDirty ? (
+                <FieldSaveButton
                   type="button"
-                  size="sm"
-                  variant="outline"
-                  className="approval-field-save-btn"
                   disabled={savingDetails}
                   onClick={() => void saveReviewerDetails()}
                 >
                   {savingDetails ? roundText.savingField : roundText.saveField}
-                </Button>
-              ) : null}
-            </div>
-          </div>
-          <div className="approval-field-row">
-            <span className="approval-field-label">
-              {roundText.fieldLabels.focus}
-            </span>
-            <div className="approval-field-control">
-              <Input
-                className="approval-lean-input"
-                aria-label={`${reviewer.name} ${roundText.reviewerGoal}`}
-                placeholder={roundText.defaultGoal(reviewer.persona)}
-                value={goalDraft}
-                disabled={round.status !== "open"}
-                onChange={(event) => setGoalDraft(event.target.value)}
-              />
-            </div>
-            <div className="approval-field-action">
-              {round.status === "open" && goalDirty ? (
-                <Button
+                </FieldSaveButton>
+              ) : null
+            }
+          >
+            <LeanInput
+              aria-label={`${reviewer.name} ${roundText.reviewerPersona}`}
+              value={personaDraft}
+              disabled={round.status !== "open"}
+              onChange={(event) => setPersonaDraft(event.target.value)}
+            />
+          </ApprovalField>
+          <ApprovalField
+            label={roundText.fieldLabels.focus}
+            action={
+              round.status === "open" && goalDirty ? (
+                <FieldSaveButton
                   type="button"
-                  size="sm"
-                  variant="outline"
-                  className="approval-field-save-btn"
                   disabled={savingDetails}
                   onClick={() => void saveReviewerDetails()}
                 >
                   {savingDetails ? roundText.savingField : roundText.saveField}
-                </Button>
-              ) : null}
-            </div>
-          </div>
-          <div className="approval-field-row">
-            <span className="approval-field-label">
-              {roundText.fieldLabels.decision}
-            </span>
-            <div className="approval-field-control">
-              <select
-                className="approval-lean-select"
-                aria-label={`${reviewer.name} ${roundText.outcomeLabel}`}
-                value={outcomeDraft}
-                disabled={round.status !== "open"}
-                onChange={(event) =>
-                  setOutcomeDraft(event.target.value as ReviewerOutcome | "")
-                }
-              >
-                <option value="">{roundText.pendingOutcome}</option>
-                {OUTCOME_OPTIONS.map((option) => (
-                  <option key={option} value={option}>
-                    {roundText.outcome[option]}
-                  </option>
-                ))}
-              </select>
-            </div>
-            <div className="approval-field-action">
-              {round.status === "open" && outcomeDirty ? (
-                <Button
+                </FieldSaveButton>
+              ) : null
+            }
+          >
+            <LeanInput
+              aria-label={`${reviewer.name} ${roundText.reviewerGoal}`}
+              placeholder={roundText.defaultGoal(reviewer.persona)}
+              value={goalDraft}
+              disabled={round.status !== "open"}
+              onChange={(event) => setGoalDraft(event.target.value)}
+            />
+          </ApprovalField>
+          <ApprovalField
+            label={roundText.fieldLabels.decision}
+            action={
+              round.status === "open" && outcomeDirty ? (
+                <FieldSaveButton
                   type="button"
-                  size="sm"
-                  variant="outline"
-                  className="approval-field-save-btn"
                   disabled={savingDecision}
                   onClick={() => void saveInlineDecision(false)}
                 >
                   {savingDecision ? roundText.savingField : roundText.saveField}
-                </Button>
-              ) : null}
-            </div>
-          </div>
-          <div className="approval-field-row">
-            <span className="approval-field-label">
-              {roundText.fieldLabels.feedback}
-            </span>
-            <div className="approval-field-control">
-              <Input
-                className="approval-lean-input"
-                aria-label={`${reviewer.name} ${roundText.noteLabel}`}
-                placeholder={roundText.inlineFeedbackPlaceholder}
-                value={noteDraft}
-                disabled={round.status !== "open"}
-                onChange={(event) => setNoteDraft(event.target.value)}
-              />
-            </div>
-            <div className="approval-field-action">
-              {round.status === "open" && noteDirty ? (
-                <Button
+                </FieldSaveButton>
+              ) : null
+            }
+          >
+            <LeanSelect
+              aria-label={`${reviewer.name} ${roundText.outcomeLabel}`}
+              value={outcomeDraft}
+              disabled={round.status !== "open"}
+              onChange={(event) =>
+                setOutcomeDraft(event.target.value as ReviewerOutcome | "")
+              }
+            >
+              <option value="">{roundText.pendingOutcome}</option>
+              {OUTCOME_OPTIONS.map((option) => (
+                <option key={option} value={option}>
+                  {roundText.outcome[option]}
+                </option>
+              ))}
+            </LeanSelect>
+          </ApprovalField>
+          <ApprovalField
+            label={roundText.fieldLabels.feedback}
+            action={
+              round.status === "open" && noteDirty ? (
+                <FieldSaveButton
                   type="button"
-                  size="sm"
-                  variant="outline"
-                  className="approval-field-save-btn"
                   disabled={savingDecision}
                   onClick={() => void saveInlineDecision(true)}
                 >
                   {savingDecision ? roundText.savingField : roundText.saveField}
-                </Button>
-              ) : null}
-            </div>
-          </div>
-        </div>
-        <div className="row approval-reviewer-actions">
+                </FieldSaveButton>
+              ) : null
+            }
+          >
+            <LeanInput
+              aria-label={`${reviewer.name} ${roundText.noteLabel}`}
+              placeholder={roundText.inlineFeedbackPlaceholder}
+              value={noteDraft}
+              disabled={round.status !== "open"}
+              onChange={(event) => setNoteDraft(event.target.value)}
+            />
+          </ApprovalField>
+        </ApprovalFields>
+        <div className={styles.reviewerActions}>
           {hasCuratedDeck ? (
             <>
-              <Button
-                type="button"
-                size="sm"
-                variant="ghost"
-                className="approval-lean-btn"
-                onClick={onViewSlides}
-              >
+              <LeanButton type="button" onClick={onViewSlides}>
                 <Presentation size={14} aria-hidden="true" />
                 {roundText.viewSlideDeck}
-              </Button>
-              <Button
+              </LeanButton>
+              <LeanButton
                 type="button"
-                size="sm"
-                variant="ghost"
-                className="approval-lean-btn"
                 aria-label={roundText.downloadReviewerZip(reviewer.name)}
                 onClick={openDownloadDialog}
               >
                 <Download size={14} aria-hidden="true" />
                 {roundText.downloadZipShort}
-              </Button>
+              </LeanButton>
             </>
           ) : (
-            <Button
+            <LeanButton
               type="button"
-              size="sm"
-              variant="ghost"
-              className="approval-lean-btn"
               disabled={isGenerating}
               onClick={() => void askCoordinatorToTailor()}
             >
               <Presentation size={14} aria-hidden="true" />
               {generateLabel}
-            </Button>
+            </LeanButton>
           )}
         </div>
         {renderReviewerDecisionSection(
@@ -1424,7 +1317,7 @@ function ReviewerTableRow({
         )}
       </div>
       <Dialog open={downloadOpen} onOpenChange={setDownloadOpen}>
-        <DialogContent className="approval-download-dialog">
+        <DialogContent>
           <DialogHeader>
             <DialogTitle>
               {roundText.downloadDialogTitle(reviewer.name)}
@@ -1432,10 +1325,8 @@ function ReviewerTableRow({
             <DialogDescription>{reviewer.persona}</DialogDescription>
           </DialogHeader>
           <DialogBody>
-            <div className="row approval-reviewer-download-head">
-              <span className="inline-note">
-                {roundText.downloadSectionLead}
-              </span>
+            <div className={styles.downloadHead}>
+              <InlineNote as="span">{roundText.downloadSectionLead}</InlineNote>
               <Button
                 type="button"
                 size="sm"
@@ -1447,9 +1338,9 @@ function ReviewerTableRow({
                   : roundText.selectAllFiles}
               </Button>
             </div>
-            <ul className="approval-package-checklist">
+            <ul className={styles.checklist}>
               <li>
-                <label className="approval-package-check-row">
+                <label className={styles.checkRow}>
                   <input
                     type="checkbox"
                     checked={!excludedPaths.has("deck.pptx")}
@@ -1459,7 +1350,7 @@ function ReviewerTableRow({
                 </label>
               </li>
               <li>
-                <label className="approval-package-check-row">
+                <label className={styles.checkRow}>
                   <input
                     type="checkbox"
                     checked={!excludedPaths.has("deck.pdf")}
@@ -1474,7 +1365,7 @@ function ReviewerTableRow({
                   wording.documentTab[source.kind] ?? source.kind;
                 return (
                   <li key={`${source.artifactId}:${String(source.version)}`}>
-                    <div className="approval-package-check-row">
+                    <div className={styles.checkRow}>
                       <input
                         type="checkbox"
                         aria-label={roundText.packageItemSource(
@@ -1485,9 +1376,7 @@ function ReviewerTableRow({
                         checked={!excludedPaths.has(docPath)}
                         onChange={() => togglePackageEntry(docPath)}
                       />
-                      <button
-                        type="button"
-                        className="approval-package-source-link"
+                      <SourceLink
                         onClick={() =>
                           onOpenSource?.(source.kind, source.version)
                         }
@@ -1497,7 +1386,7 @@ function ReviewerTableRow({
                           source.title,
                           source.version,
                         )}
-                      </button>
+                      </SourceLink>
                     </div>
                   </li>
                 );
@@ -1624,24 +1513,18 @@ function RoundCard({
 
   return (
     <section
-      className="approval-round-card approval-round-section"
+      className={styles.round}
       aria-label={roundText.roundHeading(round.packageVersion)}
     >
       {flush ? null : (
-        <header className="approval-round-meta">
+        <header className={styles.roundMeta}>
           <strong>{roundText.roundHeading(round.packageVersion)}</strong>
-          <span
-            className={`approval-status-text approval-status-${ROUND_STATUS_TONE[round.status]}`}
-          >
+          <QuietState tone={ROUND_STATUS_TONE[round.status]} dot={false}>
             {roundText.roundStatus[round.status]}
-          </span>
+          </QuietState>
         </header>
       )}
-      {fault === null ? null : (
-        <p className="inline-note" role="alert">
-          {fault}
-        </p>
-      )}
+      {fault === null ? null : <Fault>{fault}</Fault>}
       {viewingSlides !== null ? (
         <PaneSlideDeckView
           title={roundText.slideDeckDialogTitle(
@@ -1653,15 +1536,15 @@ function RoundCard({
         />
       ) : (
         <>
-          <div className="approval-reviewer-table">
-            <div className="approval-reviewer-table-head" aria-hidden="true">
+          <div className={styles.table}>
+            <div className={styles.tableHead} aria-hidden="true">
               <span />
               <span>{roundText.tableHeaders.reviewer}</span>
               <span>{roundText.tableHeaders.role}</span>
               <span>{roundText.tableHeaders.goal}</span>
               <span>{roundText.tableHeaders.status}</span>
             </div>
-            <ul className="approval-reviewer-list">
+            <ul className={styles.list}>
               {round.reviewers.map((reviewer, reviewerIndex) => {
                 const resolved = resolveReviewerPackage({
                   reviewer,
@@ -1705,17 +1588,14 @@ function RoundCard({
             </ul>
           </div>
           {round.status === "settled" ? null : (
-            <div className="row approval-editor-actions">
-              <Button
+            <div className={styles.editorActions}>
+              <LeanButton
                 type="button"
-                size="sm"
-                variant="ghost"
-                className="approval-lean-btn"
                 disabled={!canSettle || settling}
                 onClick={() => void settle()}
               >
                 {settling ? roundText.settlingRound : roundText.settleRound}
-              </Button>
+              </LeanButton>
             </div>
           )}
         </>
@@ -1966,8 +1846,8 @@ export function ApprovalRoundsPanel({
       );
     }
     return (
-      <div className="approval-rounds-empty">
-        <p className="inline-note">{roundText.empty}</p>
+      <div className={styles.empty}>
+        <InlineNote>{roundText.empty}</InlineNote>
         {bundle === null ? null : (
           <Button
             type="button"
@@ -1985,17 +1865,13 @@ export function ApprovalRoundsPanel({
 
   const renderRoundsContent = () => {
     if (loading) {
-      return (
-        <p className="inline-note" role="status">
-          {roundText.loading}
-        </p>
-      );
+      return <InlineNote role="status">{roundText.loading}</InlineNote>;
     }
     if (rounds.length === 0) {
       return renderEmptyRoundsContent();
     }
     return (
-      <div className="approval-rounds-list">
+      <div className={styles.rounds}>
         {rounds.map((round) => (
           <RoundCard
             key={round.roundId}
@@ -2018,12 +1894,12 @@ export function ApprovalRoundsPanel({
   };
 
   return (
-    <section className="approval-rounds-panel" aria-label={roundText.heading}>
+    <section className={styles.panel} aria-label={roundText.heading}>
       {flush ? null : (
         <>
-          <header className="approval-rounds-header">
+          <header className={styles.header}>
             <h2>{roundText.heading}</h2>
-            <div className="approval-rounds-actions">
+            <div className={styles.headerActions}>
               <Button
                 type="button"
                 size="sm"
@@ -2034,14 +1910,10 @@ export function ApprovalRoundsPanel({
               </Button>
             </div>
           </header>
-          <p className="inline-note">{roundText.lead}</p>
+          <InlineNote>{roundText.lead}</InlineNote>
         </>
       )}
-      {fault === null ? null : (
-        <p className="inline-note" role="alert">
-          {fault}
-        </p>
-      )}
+      {fault === null ? null : <Fault>{fault}</Fault>}
       <Dialog open={shareOpen} onOpenChange={setShareOpen}>
         <DialogContent>
           <DialogHeader>
@@ -2096,8 +1968,8 @@ export function ContextualApprovalRounds({
     }
     return (
       <>
-        <aside className="approval-package-reminder" role="note">
-          <p className="inline-note">{wording.approvalPackage.reminder}</p>
+        <aside className={styles.packageReminder} role="note">
+          <InlineNote>{wording.approvalPackage.reminder}</InlineNote>
         </aside>
         <ApprovalPackagePreview
           content={packageContent}
diff --git a/apps/web/src/pages/workspace/artifact-pane.module.css b/apps/web/src/pages/workspace/artifact-pane.module.css
new file mode 100644
index 00000000..1a280f96
--- /dev/null
+++ b/apps/web/src/pages/workspace/artifact-pane.module.css
@@ -0,0 +1,196 @@
+/* An underline strip on the pane's own surface: one hairline under the row,
+   and the open document marked by ink beneath its title, not a raised box. */
+.pane [data-slot="panel-header"] {
+  display: flex;
+  align-items: flex-end;
+  min-height: 0;
+  padding: 0 var(--space-4);
+  border-bottom: 1px solid color-mix(in srgb, var(--wb-border) 70%, transparent);
+  background: transparent;
+}
+
+.pane [data-slot="panel-tabs"] {
+  flex: 1;
+  min-width: 0;
+  gap: var(--space-1);
+  border: 0;
+  --tab-fade: 2rem;
+}
+
+/* A long row scrolls rather than squeezing its tabs, and fades at an end that hides more. */
+.pane [data-slot="panel-tabs"][data-more-start] {
+  mask-image: linear-gradient(to right, transparent, #000 var(--tab-fade));
+}
+
+.pane [data-slot="panel-tabs"][data-more-end] {
+  mask-image: linear-gradient(to left, transparent, #000 var(--tab-fade));
+}
+
+.pane [data-slot="panel-tabs"][data-more-start][data-more-end] {
+  mask-image: linear-gradient(
+    to right,
+    transparent,
+    #000 var(--tab-fade),
+    #000 calc(100% - var(--tab-fade)),
+    transparent
+  );
+}
+
+/* Tabs keep their size: the open or focused one shows its full name, the rest a shortened one. */
+.pane [data-slot="panel-tab"] {
+  flex: none;
+  height: 40px;
+  min-width: 0;
+  max-width: 9rem;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  color: var(--wb-muted-foreground);
+  box-shadow: inset 0 -2px 0 transparent;
+  transition:
+    color 120ms ease,
+    box-shadow 150ms ease-out;
+}
+
+.pane [data-slot="panel-tab"]:hover {
+  background: transparent;
+  color: var(--wb-foreground);
+}
+
+.pane [data-slot="panel-tab"][data-state="active"],
+.pane [data-slot="panel-tab"]:focus-within {
+  max-width: 20rem;
+}
+
+.pane [data-slot="panel-tab"][data-state="active"] {
+  border: 0;
+  background: transparent;
+  color: var(--wb-foreground);
+  box-shadow: inset 0 -2px 0 var(--wb-foreground);
+}
+
+.pane [role="tab"] {
+  gap: var(--space-2);
+  padding: 0 var(--space-2);
+  border-radius: var(--radius-md) var(--radius-md) 0 0;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  letter-spacing: -0.005em;
+}
+
+.pane [role="tab"]:focus-visible {
+  outline: 2px solid var(--wb-ring);
+  outline-offset: -2px;
+}
+
+/* Where a document tab's menu opens: the pointer, or the tab's corner from the keyboard. */
+.menuAnchor {
+  position: fixed;
+  width: 0;
+  height: 0;
+  pointer-events: none;
+}
+
+/* A tab chosen by pointer shows only its underline. */
+.pane [data-pointer-tabs] [role="tab"]:focus-visible {
+  outline: none;
+}
+
+.content {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  overscroll-behavior: contain;
+  padding: var(--space-3) var(--space-6) var(--space-6);
+  overflow-wrap: anywhere;
+}
+
+/* Each pane is its own scroller, so the padding belongs inside it: padding on the panel sat below
+   the scroller as a band the page never reached. The foot leaves room for the last lines to scroll
+   clear of the floating bar, whose height the bar sets on its pane. */
+.content[data-slot="panel-content"] {
+  position: relative;
+  padding: 0;
+}
+
+.content > [data-slot="panel-pane"]:not(.fill) {
+  padding: var(--space-3) var(--space-6)
+    calc(var(--space-6) + var(--pane-bar-height, 0px));
+}
+
+.empty {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--space-2);
+  max-width: 42ch;
+  margin: var(--space-2) 0 0;
+  color: var(--wb-muted-foreground);
+}
+
+.empty h2 {
+  margin: 0;
+  font-size: 1rem;
+  font-weight: 600;
+}
+
+.empty p {
+  margin: 0;
+  font-size: 0.8125rem;
+  line-height: 1.6;
+}
+
+.content > [data-slot="panel-pane"] > [data-slot="deliverable-body"] {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--space-4);
+  min-width: 0;
+}
+
+/* A page that fills its pane edge to edge under the tabs: no padding, card border or fixed
+   height, so the app or mockup is the whole pane and the bar floats over its foot. */
+.content:has(> .fill[data-state="active"]) {
+  overflow: hidden;
+}
+
+.fill {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.content > .fill > [data-slot="deliverable-body"] {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 0;
+  min-height: 0;
+}
+
+/* A state shown in place of the page sits at the content's inset; the loading line's own
+   padding already gives part of it. */
+.fill > [data-slot="fault"],
+.fill > [data-slot="inline-note"] {
+  margin: var(--space-3) var(--space-6);
+}
+
+.fill > [data-slot="document-loading"] {
+  margin: var(--space-1) var(--space-6);
+}
+
+@media (max-width: 760px) {
+  .pane [data-slot="panel-handle"] {
+    display: none;
+  }
+
+  .content {
+    padding: var(--space-3) var(--space-4) var(--space-4);
+  }
+
+  .content > [data-slot="panel-pane"]:not(.fill) {
+    padding-inline: var(--space-4);
+  }
+}
diff --git a/apps/web/src/pages/workspace/artifact-pane.stories.tsx b/apps/web/src/pages/workspace/artifact-pane.stories.tsx
new file mode 100644
index 00000000..5f97666f
--- /dev/null
+++ b/apps/web/src/pages/workspace/artifact-pane.stories.tsx
@@ -0,0 +1,137 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import type { ProjectArtifact } from "@corbits-builder/client";
+import { useState } from "react";
+import { fn } from "storybook/test";
+import { ArtifactPane } from "./artifact-pane.tsx";
+import type { DeliverableState } from "./deliverable-block.tsx";
+
+const brief: ProjectArtifact = {
+  artifactId: "brief",
+  kind: "problem_brief",
+  title: "Problem brief",
+  version: 2,
+  sha256: "a".repeat(64),
+};
+
+const requirements: ProjectArtifact = {
+  artifactId: "requirements",
+  kind: "product_requirements",
+  title: "Product requirements",
+  version: 1,
+  sha256: "b".repeat(64),
+};
+
+const BRIEF_V1 = `# Problem brief
+
+Small bakeries take cake orders by phone and lose some of them.
+`;
+
+const BRIEF_V2 = `# Problem brief
+
+Small bakeries take cake orders by phone and on paper, and lose some of them on busy days.
+
+## Who has it
+
+- Owners who bake and serve at once
+- Counter staff who answer the phone mid-shift
+
+## A good Saturday
+
+Every order is in one list, and nobody calls back to ask.
+`;
+
+const briefDocument = {
+  title: "Problem brief",
+  mediaType: "text/markdown",
+  content: BRIEF_V2,
+  filedAt: "2026-10-30T12:00:00.000Z",
+  version: 2,
+  sha256: "a".repeat(64),
+  before: {
+    version: 1,
+    content: BRIEF_V1,
+    filedAt: "2026-10-30T11:00:00.000Z",
+  },
+  versions: [
+    { version: 2, title: "Problem brief", mediaType: "text/markdown" },
+    { version: 1, title: "Problem brief", mediaType: "text/markdown" },
+  ],
+};
+
+const ready: DeliverableState = { status: "ready", document: briefDocument };
+
+type PaneArgs = {
+  deliverables: readonly ProjectArtifact[];
+  state: DeliverableState | undefined;
+  onAddToPrompt: () => void;
+};
+
+// Holds the tab and comparison the pane asks its host to keep.
+function Pane({ deliverables, state, onAddToPrompt }: PaneArgs) {
+  const [selectedId, setSelectedId] = useState(deliverables[0]?.artifactId);
+  const [changesOpen, setChangesOpen] = useState(false);
+  const selected =
+    deliverables.find((item) => item.artifactId === selectedId) ?? null;
+  return (
+    <div style={{ height: "100vh", display: "flex" }}>
+      <ArtifactPane
+        projectTitle="Bakery orders"
+        deliverables={deliverables}
+        selected={selected}
+        state={selected === null ? undefined : state}
+        onSelect={setSelectedId}
+        changesOpen={changesOpen}
+        onToggleChanges={() => setChangesOpen((open) => !open)}
+        onRetry={fn()}
+        onAddToPrompt={onAddToPrompt}
+      />
+    </div>
+  );
+}
+
+const meta = {
+  title: "Screens/Workspace/DocumentPane",
+  parameters: { layout: "fullscreen" },
+  args: {
+    deliverables: [brief, requirements],
+    state: ready,
+    onAddToPrompt: fn(),
+  },
+  render: (args) => <Pane {...args} />,
+} satisfies Meta<PaneArgs>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** Before the first document, the pane says where documents will appear. */
+export const Empty: Story = { args: { deliverables: [] } };
+
+export const Document: Story = {};
+
+export const Loading: Story = { args: { state: { status: "loading" } } };
+
+export const ReadError: Story = {
+  args: {
+    state: {
+      status: "error",
+      message: "The document could not be read.",
+      retryable: true,
+    },
+  },
+};
+
+/** HTML renders in a sandboxed device frame. */
+export const HtmlDesign: Story = {
+  args: {
+    state: {
+      status: "ready",
+      document: {
+        ...briefDocument,
+        mediaType: "text/html",
+        content:
+          "<h1 style='font-family:system-ui'>Today's orders</h1><p style='font-family:system-ui'>66 orders, 9 for pickup before noon.</p>",
+        versions: [],
+      },
+    },
+  },
+};
diff --git a/apps/web/src/pages/workspace/artifact-pane.test.tsx b/apps/web/src/pages/workspace/artifact-pane.test.tsx
index 10c01f23..4705faff 100644
--- a/apps/web/src/pages/workspace/artifact-pane.test.tsx
+++ b/apps/web/src/pages/workspace/artifact-pane.test.tsx
@@ -130,6 +130,35 @@ describe("persistent artifact pane", () => {
     expect(html).toContain('title="Design"');
     expect(html).toContain('sandbox=""');
     expect(html).toContain('srcDoc="&lt;h1&gt;Actual design&lt;/h1&gt;"');
+    // A page among a document's parts keeps its own height; only a whole-pane page fills.
+    expect(html).not.toMatch(
+      /<[a-z]+[^>]*data-slot="device-preview"[^>]*data-fill/,
+    );
+    expect(html).not.toMatch(/<iframe[^>]*data-fill/);
+  });
+  test("a page that fills the pane shows its notes as pills over it", () => {
+    if (document.status !== "ready") throw new Error("invalid fixture");
+    const note = (mediaType: string, title: string) =>
+      /<p[^>]*data-slot="inline-note"[^>]*>History unavailable/.exec(
+        render(
+          { ...ready, title },
+          {
+            status: "ready",
+            document: {
+              ...document.document,
+              title,
+              mediaType,
+              content: "name,count\nbolts,4",
+              historyError: "offline",
+            },
+          },
+        ),
+      )?.[0] ?? "";
+    expect(note("text/plain", "parts.csv")).toContain('data-pill=""');
+    expect(note("text/markdown", "Problem brief")).toContain(
+      'data-slot="inline-note"',
+    );
+    expect(note("text/markdown", "Problem brief")).not.toContain("data-pill");
   });
   test("shows compact loading and read errors", () => {
     expect(render(ready, { status: "loading" })).toContain(
diff --git a/apps/web/src/pages/workspace/artifact-pane.tsx b/apps/web/src/pages/workspace/artifact-pane.tsx
index d64db8cf..2a7d69dd 100644
--- a/apps/web/src/pages/workspace/artifact-pane.tsx
+++ b/apps/web/src/pages/workspace/artifact-pane.tsx
@@ -27,6 +27,8 @@ import {
   MenuItem,
   MenuTrigger,
 } from "@corbits/react-ui/ui/menu";
+import { DangerMenuItem } from "../../components.tsx";
+import styles from "./artifact-pane.module.css";
 import {
   DeliverableBody,
   type DeliverableState,
@@ -186,7 +188,7 @@ const liveIds = panelTabIds(TAB_PREFIX, LIVE_TAB);
 const THEMES_TAB = "design-themes";
 const themesIds = panelTabIds(TAB_PREFIX, THEMES_TAB);
 // A pane whose page fills it edge to edge: the app, a mockup, a spreadsheet or the design draft.
-const FILL_PANE = "workspace-pane-fill";
+const FILL_PANE = styles.fill;
 const POINTER_TABS = "data-pointer-tabs";
 const TAB_KEYS = new Set([
   "ArrowLeft",
@@ -466,14 +468,13 @@ export function ArtifactPane({
     if (onRemove === undefined || !removable(value)) return null;
     if (confirmingRemove)
       return (
-        <MenuItem className="menu-danger" onSelect={() => onRemove(value)}>
+        <DangerMenuItem onSelect={() => onRemove(value)}>
           <Trash2 size={16} aria-hidden="true" />
           {wording.removeAttachment.confirm}
-        </MenuItem>
+        </DangerMenuItem>
       );
     return (
-      <MenuItem
-        className="menu-danger"
+      <DangerMenuItem
         onSelect={(event) => {
           event.preventDefault();
           setConfirmingRemove(true);
@@ -481,7 +482,7 @@ export function ArtifactPane({
       >
         <Trash2 size={16} aria-hidden="true" />
         {wording.removeAttachment.menu}
-      </MenuItem>
+      </DangerMenuItem>
     );
   };
   const outputs =
@@ -493,7 +494,8 @@ export function ArtifactPane({
   return (
     <Panel
       ref={paneRef}
-      className="workspace-artifacts"
+      className={styles.pane}
+      data-slot="artifact-pane"
       aria-label="Artifacts"
       width={width}
       onWidthChange={(nextWidth) =>
@@ -659,7 +661,7 @@ export function ArtifactPane({
             >
               <MenuTrigger asChild>
                 <span
-                  className="document-tab-menu-anchor"
+                  className={styles.menuAnchor}
                   style={{ left: tabMenu.x, top: tabMenu.y }}
                   aria-hidden="true"
                 />
@@ -687,8 +689,8 @@ export function ArtifactPane({
         </PanelHeader>
       ) : null}
       {!outputs && selectedId === null ? (
-        <div className="workspace-artifact-content">
-          <div className="workspace-artifact-empty">
+        <div className={styles.content}>
+          <div className={styles.empty}>
             <FileText size={28} aria-hidden="true" />
             <h2>Your outputs appear here</h2>
             <p>
@@ -701,7 +703,7 @@ export function ArtifactPane({
         <PanelContent
           value={selectedId ?? ""}
           keepMounted
-          className="workspace-artifact-content"
+          className={styles.content}
         >
           {visibleDeliverables.flatMap((item) =>
             documentViews(item).map((view) => {
@@ -826,6 +828,7 @@ export function ArtifactPane({
                 files={draft}
                 device={draftDevice}
                 onDevice={setDraftDevice}
+                fill
                 leading={[
                   [
                     {
diff --git a/apps/web/src/pages/workspace/comparison-view.module.css b/apps/web/src/pages/workspace/comparison-view.module.css
new file mode 100644
index 00000000..35ba0269
--- /dev/null
+++ b/apps/web/src/pages/workspace/comparison-view.module.css
@@ -0,0 +1,47 @@
+.comparison {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--space-3);
+  width: 100%;
+  min-width: 0;
+}
+
+.chip {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  margin: 0;
+  padding: 2px 4px 2px 10px;
+  border: 1px solid var(--wb-border);
+  border-radius: 999px;
+  color: var(--wb-muted-foreground);
+  font-size: 0.8125rem;
+}
+
+.chip button {
+  display: inline-flex;
+  padding: 3px;
+  border: 0;
+  border-radius: 999px;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+}
+
+.chip button:hover {
+  background: var(--wb-muted);
+  color: var(--wb-foreground);
+}
+
+.chip button:focus-visible,
+.modes button:focus-visible {
+  outline: 2px solid var(--wb-ring);
+  outline-offset: 2px;
+}
+
+.modes {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+}
diff --git a/apps/web/src/pages/workspace/comparison-view.stories.tsx b/apps/web/src/pages/workspace/comparison-view.stories.tsx
new file mode 100644
index 00000000..7d08a78d
--- /dev/null
+++ b/apps/web/src/pages/workspace/comparison-view.stories.tsx
@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
+import { ComparisonView } from "./comparison-view.tsx";
+
+const meta = {
+  title: "Components/Workspace/ComparisonView",
+  component: ComparisonView,
+  args: {
+    before:
+      "## Problem\n\nBakeries take orders by phone.\n\n- Orders get lost\n- Staff are interrupted\n",
+    after:
+      "## Problem\n\nBakeries take orders by phone and on paper.\n\n- Orders get lost on busy days\n- Owners want one list\n",
+    beforeVersion: 1,
+    afterVersion: 2,
+    prose: true,
+    onClose: fn(),
+  },
+  parameters: { layout: "fullscreen" },
+} satisfies Meta<typeof ComparisonView>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** Prose marks changes inline, like tracked changes. */
+export const Prose: Story = {};
+
+/** Anything that isn't prose compares line by line. */
+export const Lines: Story = { args: { prose: false } };
diff --git a/apps/web/src/pages/workspace/comparison-view.tsx b/apps/web/src/pages/workspace/comparison-view.tsx
index c68e1411..9dc0dce6 100644
--- a/apps/web/src/pages/workspace/comparison-view.tsx
+++ b/apps/web/src/pages/workspace/comparison-view.tsx
@@ -10,6 +10,7 @@ import { wording } from "../../config.ts";
 import { Markdown } from "../../markdown.jsx";
 import { markChanges } from "../../revisions.ts";
 import { DiffPane } from "./diff-pane.tsx";
+import styles from "./comparison-view.module.css";
 
 export function ComparisonView({
   before,
@@ -32,8 +33,8 @@ export function ComparisonView({
   const olderText = beforeVersion <= afterVersion ? before : after;
   const newerText = beforeVersion <= afterVersion ? after : before;
   return (
-    <div className="workspace-comparison">
-      <p className="comparison-chip">
+    <div className={styles.comparison} data-slot="comparison-view">
+      <p className={styles.chip}>
         {wording.versions.comparing(older, newer)}
         <button
           type="button"
@@ -45,7 +46,7 @@ export function ComparisonView({
       </p>
       {prose ? (
         <div
-          className="workspace-comparison-modes"
+          className={styles.modes}
           role="group"
           aria-label="Comparison style"
         >
@@ -68,7 +69,7 @@ export function ComparisonView({
         </div>
       ) : null}
       {prose && !lines ? (
-        <div className="workspace-tracked" aria-label="Tracked changes">
+        <div aria-label="Tracked changes">
           <Markdown source={markChanges(olderText, newerText)} />
         </div>
       ) : (
diff --git a/apps/web/src/pages/workspace/deliverable-block.module.css b/apps/web/src/pages/workspace/deliverable-block.module.css
new file mode 100644
index 00000000..d4864789
--- /dev/null
+++ b/apps/web/src/pages/workspace/deliverable-block.module.css
@@ -0,0 +1,84 @@
+/* In the pane, the artifact pane lays the body out further; this is all a printed copy keeps. */
+.body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+
+/* A band across the pane's full width, ruled off from the document it names. */
+.header {
+  display: flex;
+  flex: none;
+  align-self: stretch;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-4);
+  min-width: 0;
+  padding: var(--space-5) var(--space-6);
+  border-bottom: 1px solid var(--wb-border);
+}
+
+.title {
+  flex: 1;
+  min-width: 0;
+  margin: 0;
+  font-size: 1.125rem;
+  text-wrap: balance;
+}
+
+.loading {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  min-height: 32px;
+  padding: var(--space-2) 0;
+  color: var(--wb-muted-foreground);
+  font-size: 0.8125rem;
+}
+
+.raw {
+  max-width: 100%;
+  margin: 0;
+  overflow: auto;
+  font-family: var(--wb-font-mono);
+  font-size: 12px;
+  white-space: pre-wrap;
+}
+
+.image {
+  max-width: 100%;
+  height: auto;
+}
+
+/* A page that fills the pane keeps its notes floating over its top edge. */
+.notes {
+  position: absolute;
+  top: var(--space-3);
+  left: 50%;
+  z-index: 2;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-1);
+  max-width: calc(100% - 2rem);
+  transform: translateX(-50%);
+}
+
+.notes:empty {
+  display: none;
+}
+
+/* On paper the rule prints in the text's own ink, with room before the document starts. */
+@media print {
+  .header {
+    margin-bottom: 8mm;
+    padding-bottom: 3mm;
+    border-bottom: 1px solid CanvasText;
+  }
+
+  .title {
+    margin: 0;
+    font-size: 18pt;
+    white-space: normal;
+  }
+}
diff --git a/apps/web/src/pages/workspace/deliverable-block.tsx b/apps/web/src/pages/workspace/deliverable-block.tsx
index a0c02515..996beae6 100644
--- a/apps/web/src/pages/workspace/deliverable-block.tsx
+++ b/apps/web/src/pages/workspace/deliverable-block.tsx
@@ -6,7 +6,7 @@
  */
 import { wording } from "../../config.ts";
 import { useEffect, useRef, useState } from "react";
-import { Button, CsvTable, ShimmerText } from "@corbits/react-ui";
+import { CsvTable, ShimmerText } from "@corbits/react-ui";
 import { Markdown } from "../../markdown.jsx";
 import {
   APPROVAL_PACKAGE_MEDIA_TYPE,
@@ -39,6 +39,8 @@ import type { ApproachesMeta } from "@corbits-builder/schemas/approaches";
 import { ApproachesComparison } from "./approaches-comparison.tsx";
 import type { ApproachChoice } from "./approach-choice.ts";
 import { ContextualApprovalRounds } from "./approval-rounds.tsx";
+import { Fault, InlineNote } from "../../components.jsx";
+import styles from "./deliverable-block.module.css";
 
 export type { RetainedVersion };
 
@@ -127,26 +129,20 @@ export function DeliverableBody({
   /** Opens a pinned source document tab at its pinned version. */
   onOpenSource?: ((kind: string, version: number) => void) | undefined;
 }) {
-  if (state === undefined)
-    return <p className="inline-note">Nothing to read yet.</p>;
+  if (state === undefined) return <InlineNote>Nothing to read yet.</InlineNote>;
   if (state.status === "loading") {
     return (
-      <div className="workspace-loading" role="status">
+      <div
+        className={styles.loading}
+        data-slot="document-loading"
+        role="status"
+      >
         <ShimmerText>Reading the document…</ShimmerText>
       </div>
     );
   }
   if (state.status === "error")
-    return (
-      <div className="workspace-fault" role="alert">
-        <p className="inline-note">{state.message}</p>
-        {onRetry ? (
-          <Button size="sm" variant="outline" onClick={onRetry}>
-            {wording.action.retry}
-          </Button>
-        ) : null}
-      </div>
-    );
+    return <Fault onRetry={onRetry}>{state.message}</Fault>;
   return (
     <ReadyDocument
       key={`${state.document.sha256}:${String(state.document.version)}:${state.document.content}`}
@@ -397,6 +393,9 @@ function ReadyDocument({
     files,
     tipsGroup,
   ];
+  // A mockup or spreadsheet fills the pane edge to edge: its tab names it, and its notes float over the page.
+  const fill =
+    (kind === "design" && designPart === "mockup") || kind === "sheet";
   const visual =
     kind === "html" || (kind === "design" && designPart === "mockup");
   const readingView = () => {
@@ -417,6 +416,7 @@ function ReadyDocument({
           device={device}
           onDevice={setDevice}
           trailing={barGroups}
+          fill={fill}
         />
       );
     if (kind === "approval_package")
@@ -430,9 +430,9 @@ function ReadyDocument({
     if (kind === "sheet")
       return <CsvTable text={body} caption={title} interactive />;
     if (kind === "json" || kind === "text")
-      return <pre className="document-raw">{body}</pre>;
+      return <pre className={styles.raw}>{body}</pre>;
     if (kind === "image")
-      return <img className="document-image" src={body} alt={title} />;
+      return <img className={styles.image} src={body} alt={title} />;
     if (kind === "file")
       return (
         <p>
@@ -460,57 +460,50 @@ function ReadyDocument({
                 })}
           />
         )}
-        <Markdown source={body} />
+        <Markdown source={body} document />
       </>
     );
   };
   const add = onAddToPrompt === undefined ? {} : { onAdd: onAddToPrompt };
 
-  // A mockup or spreadsheet fills the pane edge to edge: its tab names it, and its notes float over the page.
-  const fill =
-    (kind === "design" && designPart === "mockup") || kind === "sheet";
   const notes = (
     <>
       {viewing !== document.version ? (
-        <p className="inline-note" role="status">
+        <InlineNote role="status" pill={fill}>
           Showing v{String(viewing)}. The plan names v{String(document.version)}
           .
-        </p>
+        </InlineNote>
       ) : null}
       {pendingVersion !== null ? (
-        <p className="inline-note" role="status">
+        <InlineNote role="status" pill={fill}>
           Reading v{String(pendingVersion)}…
-        </p>
-      ) : null}
-      {readError !== null ? (
-        <p className="inline-note" role="alert">
-          {readError}
-        </p>
+        </InlineNote>
       ) : null}
+      {readError !== null ? <Fault>{readError}</Fault> : null}
       {document.historyError !== undefined ? (
-        <p className="inline-note" role="status">
+        <InlineNote role="status" pill={fill}>
           History unavailable: {document.historyError}
-        </p>
+        </InlineNote>
       ) : null}
       {changesOpen && compareWith !== null && beforeText === null ? (
-        <p className="inline-note" role="status">
+        <InlineNote role="status" pill={fill}>
           Reading v{String(compareWith)} for comparison…
-        </p>
+        </InlineNote>
       ) : null}
     </>
   );
 
   const renderDocumentHeader = () => {
     if (fill) {
-      return <div className="pane-notes">{notes}</div>;
+      return <div className={styles.notes}>{notes}</div>;
     }
     if (kind === "approval_package") {
       return notes;
     }
     return (
       <>
-        <header className="document-header">
-          <h1 className="workspace-artifact-title" title={title}>
+        <header className={styles.header} data-slot="document-header">
+          <h1 className={styles.title} title={title}>
             {lifted.heading ?? title}
           </h1>
         </header>
@@ -520,7 +513,7 @@ function ReadyDocument({
   };
 
   return (
-    <div className="deliverable-body">
+    <div className={styles.body} data-slot="deliverable-body">
       {renderDocumentHeader()}
       {kind === "approval_package" ? (
         <PassageQuotes title={title} version={viewing} {...add}>
@@ -539,7 +532,7 @@ function ReadyDocument({
           />
         </PassageQuotes>
       ) : (
-        <PassageQuotes title={title} version={viewing} {...add}>
+        <PassageQuotes title={title} version={viewing} fill={fill} {...add}>
           {readingView()}
           {comparison}
         </PassageQuotes>
diff --git a/apps/web/src/pages/workspace/design-concepts.module.css b/apps/web/src/pages/workspace/design-concepts.module.css
new file mode 100644
index 00000000..a036bd1c
--- /dev/null
+++ b/apps/web/src/pages/workspace/design-concepts.module.css
@@ -0,0 +1,33 @@
+.direction {
+  max-width: 32rem;
+  margin: 0;
+  color: var(--wb-muted-foreground);
+  font-size: 0.8125rem;
+}
+
+.choice {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--space-2);
+  margin: 0;
+}
+
+.choice > p {
+  margin: 0;
+}
+
+.options {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.options li {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
diff --git a/apps/web/src/pages/workspace/design-concepts.tsx b/apps/web/src/pages/workspace/design-concepts.tsx
index 02c924ae..edbd1bc1 100644
--- a/apps/web/src/pages/workspace/design-concepts.tsx
+++ b/apps/web/src/pages/workspace/design-concepts.tsx
@@ -6,7 +6,6 @@
  */
 import { useState, type CSSProperties } from "react";
 import { Badge, Button } from "@corbits/react-ui";
-import { MenuLabel } from "@corbits/react-ui/ui/menu";
 import { Info } from "lucide-react";
 import { toast } from "sonner";
 import type { ProjectArtifact } from "@corbits-builder/client";
@@ -22,10 +21,16 @@ import {
   type DesignFiles,
 } from "./design-preview.tsx";
 import { useDesignThemes, useThemeFiles } from "./design-themes.tsx";
-import { clock, useElapsedMs } from "./elapsed.tsx";
 import { DesignTarget, mockupLook } from "./mockup-tweaks.tsx";
 import type { PreviewDevice } from "./device-preview.tsx";
-import type { PaneBarGroup } from "./pane-bar.tsx";
+import { PaneBarTip, type PaneBarGroup } from "./pane-bar.tsx";
+import {
+  Sketching,
+  SketchingClock,
+  SketchingLead,
+  SketchingNote,
+} from "./sketching.tsx";
+import styles from "./design-concepts.module.css";
 
 export const DESIGN_OPTION = "design_option";
 const CONCEPT_TAB = "concept:";
@@ -133,11 +138,7 @@ export function ConceptMockup({
               id: "direction",
               label: wording.design.conceptDirection,
               icon: <Info size={16} aria-hidden="true" />,
-              menu: (
-                <MenuLabel className="pane-bar-tip">
-                  {concept.direction}
-                </MenuLabel>
-              ),
+              menu: <PaneBarTip>{concept.direction}</PaneBarTip>,
             },
           ],
           ...trailing,
@@ -151,6 +152,7 @@ export function ConceptMockup({
           device={device}
           onDevice={onDevice}
           trailing={bar}
+          fill
         />
       </DesignTarget.Provider>
     );
@@ -168,6 +170,7 @@ export function ConceptMockup({
         onDevice={onDevice}
         leading={[draftBadge(concept.run?.working === true)]}
         trailing={bar}
+        fill
       />
     </DesignTarget.Provider>
   );
@@ -204,31 +207,6 @@ function useConceptSeed(projectId: string, concept: ConceptView) {
   };
 }
 
-/** The running clock, mounted only while the designer is mid-turn. */
-function SketchingClock({ since }: { since: string }) {
-  const seconds = Math.floor(useElapsedMs(since) / 1_000);
-  return (
-    <span className="concept-sketching-clock" role="timer" aria-live="off">
-      {wording.design.conceptSketchingElapsed(clock(seconds))}
-    </span>
-  );
-}
-
-/** An app's frame drawn as placeholder bars; it pulses unless its container is still. */
-export const AppSketch = () => (
-  <div className="concept-sketch" aria-hidden="true">
-    <span className="concept-sketch-bar" />
-    <span className="concept-sketch-title" />
-    <span className="concept-sketch-line" />
-    <span className="concept-sketch-line concept-sketch-line-short" />
-    <span className="concept-sketch-cards">
-      <span />
-      <span />
-      <span />
-    </span>
-  </div>
-);
-
 /**
  * A gentle sketch in the concept's own look until its designer drafts the person's app. It moves
  * and counts only while the designer is mid-turn; a designer parked between turns is not drafting.
@@ -255,39 +233,36 @@ function ConceptSketching({
     ...(tokens.font === undefined ? {} : { "--sketch-font": tokens.font }),
   } as CSSProperties;
   return (
-    <div
-      className="concept-sketching"
-      data-state={run?.working ? "working" : "still"}
-      style={style}
-      role="status"
-    >
-      <AppSketch />
+    <Sketching working={run?.working === true} style={style}>
       {run === undefined ? null : (
-        <p className="concept-sketching-lead">
+        <SketchingLead>
           {run.working
             ? wording.design.conceptSketching(concept.label)
             : wording.design.conceptWaiting(concept.label)}
-        </p>
+        </SketchingLead>
       )}
-      <p className="concept-sketching-note">
+      <SketchingNote>
         {wording.design.conceptSketchingNote}
         {run?.working ? (
           <>
             {" "}
-            <SketchingClock since={run.startedAt} />
+            <SketchingClock
+              since={run.startedAt}
+              label={wording.design.conceptSketchingElapsed}
+            />
           </>
         ) : null}
-      </p>
+      </SketchingNote>
       {concept.direction === undefined ? null : (
-        <p className="concept-sketching-direction">{concept.direction}</p>
+        <p className={styles.direction}>{concept.direction}</p>
       )}
-    </div>
+    </Sketching>
   );
 }
 
 /** The design the person chose in the conversation, in place of the ask it answered. */
 export const DesignChosen = ({ concept }: { concept: string }) => (
-  <p className="design-choice">
+  <p className={styles.choice}>
     <Badge tone="success">{wording.design.chosen(concept)}</Badge>
   </p>
 );
@@ -324,7 +299,7 @@ export function DesignChoice({
   const [only] = concepts;
   if (concepts.length === 1 && only !== undefined)
     return (
-      <div className="design-choice">
+      <div className={styles.choice}>
         <p>{wording.design.confirmOne}</p>
         <Button
           type="button"
@@ -337,9 +312,9 @@ export function DesignChoice({
       </div>
     );
   return (
-    <div className="design-choice">
+    <div className={styles.choice}>
       <p>{wording.design.confirmSeveral}</p>
-      <ul className="design-choice-options">
+      <ul className={styles.options}>
         {concepts.map((concept) => (
           <li key={concept.label}>
             <Button
diff --git a/apps/web/src/pages/workspace/design-preview.module.css b/apps/web/src/pages/workspace/design-preview.module.css
new file mode 100644
index 00000000..c5f590bd
--- /dev/null
+++ b/apps/web/src/pages/workspace/design-preview.module.css
@@ -0,0 +1,21 @@
+/* A column per screen, wrapped to the pane and kept inside the viewport by the menu's own room. */
+.screenMenu {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-1) var(--space-2);
+  max-height: calc(
+    var(--radix-dropdown-menu-content-available-height, 80dvh) - 0.75rem
+  );
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+
+.screenColumn {
+  display: flex;
+  flex-direction: column;
+  min-width: 8rem;
+}
+
+.screenColumn [data-slot="menu-item"] {
+  padding-block: var(--space-1);
+}
diff --git a/apps/web/src/pages/workspace/design-preview.tsx b/apps/web/src/pages/workspace/design-preview.tsx
index 9567444e..ad172859 100644
--- a/apps/web/src/pages/workspace/design-preview.tsx
+++ b/apps/web/src/pages/workspace/design-preview.tsx
@@ -22,6 +22,7 @@ import { Markdown } from "../../markdown.jsx";
 import { keys } from "../../queries/keys.ts";
 import { readProjectActivity } from "../../api/activity.ts";
 import { readDesignDraft } from "../../api/artifacts.ts";
+import { InlineNote, MenuItemLabel } from "../../components.jsx";
 import { DevicePreview, type PreviewDevice } from "./device-preview.tsx";
 import type { PaneBarGroup } from "./pane-bar.tsx";
 import { QuoteOffer } from "./passage-note.tsx";
@@ -31,6 +32,7 @@ import {
   TweakPanel,
   type LookTweaks,
 } from "./mockup-tweaks.tsx";
+import styles from "./design-preview.module.css";
 
 const DRAFT_REFRESH_MS = 12_000;
 const DESIGNER_ACTIVITY_MS = 2_000;
@@ -237,6 +239,7 @@ export function MockupFrame({
   leading = [],
   trailing = [],
   onTweaks,
+  fill = false,
 }: {
   files: DesignFiles;
   device: PreviewDevice;
@@ -246,6 +249,8 @@ export function MockupFrame({
   trailing?: readonly PaneBarGroup[];
   /** Hears the live look tweaks as the person changes them. */
   onTweaks?: (tweaks: LookTweaks) => void;
+  /** Fills its container edge to edge, as a pane's whole page. */
+  fill?: boolean;
 }) {
   const frame = useRef<HTMLIFrameElement>(null);
   const expandedFrame = useRef<HTMLIFrameElement>(null);
@@ -369,7 +374,7 @@ export function MockupFrame({
   const current = screens.find((entry) => entry.screen === shown?.screen);
   // Portaled outside the pane, so the grid reads the pane's width when it opens to wrap within it.
   const fitPane = (grid: HTMLDivElement | null) => {
-    const pane = frame.current?.closest(".device-preview");
+    const pane = frame.current?.closest('[data-slot="device-preview"]');
     if (grid !== null && pane)
       grid.style.maxWidth = `min(${String(pane.clientWidth)}px, var(--radix-dropdown-menu-content-available-width, 100vw) - 0.75rem)`;
   };
@@ -385,11 +390,11 @@ export function MockupFrame({
                 : spoken(current.screen),
             icon: <ChevronDown size={12} aria-hidden="true" />,
             menu: (
-              <div className="screen-menu" ref={fitPane}>
+              <div className={styles.screenMenu} ref={fitPane}>
                 {screens.map((entry) => (
                   <MenuGroup
                     key={entry.screen}
-                    className="screen-menu-column"
+                    className={styles.screenColumn}
                     aria-label={spoken(entry.screen)}
                   >
                     <MenuLabel aria-hidden="true">
@@ -403,12 +408,12 @@ export function MockupFrame({
                             tell({ designGoto: stateHash(entry.screen, state) })
                           }
                         >
-                          <span className="version-menu-item">
+                          <MenuItemLabel>
                             {stateName(state)}
                             {entry === current && shown?.state === state ? (
                               <Check size={14} aria-label="Shown" />
                             ) : null}
-                          </span>
+                          </MenuItemLabel>
                         </MenuItem>
                       ),
                     )}
@@ -464,6 +469,7 @@ export function MockupFrame({
       expandedHtml={expandedHtml}
       expandedFrameRef={expandedFrame}
       trailing={trailing}
+      fill={fill}
       overlay={
         tweaking ? (
           <TweakPanel
@@ -491,16 +497,19 @@ export function DesignPreview({
   device,
   onDevice,
   trailing = [],
+  fill = false,
 }: {
   content: string;
   part: DesignPart;
   device: PreviewDevice;
   onDevice: (device: PreviewDevice) => void;
   trailing?: readonly PaneBarGroup[];
+  /** The mockup fills its container edge to edge, as a pane's whole page. */
+  fill?: boolean;
 }) {
   const files = parseBundle(content);
   if (!files || files[`designs/${INDEX_PAGE}`] === undefined)
-    return <p className="inline-note">This design cannot be shown.</p>;
+    return <InlineNote>This design cannot be shown.</InlineNote>;
   if (part === "mockup")
     return (
       <MockupFrame
@@ -508,13 +517,14 @@ export function DesignPreview({
         device={device}
         onDevice={onDevice}
         trailing={trailing}
+        fill={fill}
       />
     );
   const notes = files["DESIGN.md"];
   return notes === undefined ? (
-    <p className="inline-note">{wording.design.noPlan}</p>
+    <InlineNote>{wording.design.noPlan}</InlineNote>
   ) : (
-    <Markdown source={notes.replace(/^\s*# [^\n]*\n+/, "")} />
+    <Markdown document source={notes.replace(/^\s*# [^\n]*\n+/, "")} />
   );
 }
 
diff --git a/apps/web/src/pages/workspace/design-themes.module.css b/apps/web/src/pages/workspace/design-themes.module.css
new file mode 100644
index 00000000..0d9f06b9
--- /dev/null
+++ b/apps/web/src/pages/workspace/design-themes.module.css
@@ -0,0 +1,73 @@
+.gallery {
+  flex: 1;
+  min-height: 0;
+  padding: var(--space-4);
+  overflow-y: auto;
+}
+
+.lead {
+  margin: 0 0 var(--space-3);
+  color: var(--wb-muted-foreground);
+  font-size: 0.8125rem;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  gap: var(--space-4);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.card {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  width: 100%;
+  padding: 0 0 var(--space-3);
+  overflow: hidden;
+  border: 1px solid var(--wb-border);
+  border-radius: var(--radius-md);
+  background: var(--wb-background);
+  color: var(--wb-foreground);
+  font: inherit;
+  text-align: start;
+  cursor: pointer;
+}
+
+.card:hover {
+  border-color: var(--wb-muted-foreground);
+}
+
+.card:focus-visible {
+  outline: 2px solid var(--wb-ring);
+  outline-offset: 2px;
+}
+
+/* Holds the page's scaled-down still, which the frame lays out from this corner. */
+.thumb {
+  position: relative;
+  display: block;
+  aspect-ratio: 16 / 10;
+  margin-bottom: var(--space-2);
+  overflow: hidden;
+  border-bottom: 1px solid var(--wb-border);
+  background: var(--wb-muted);
+  pointer-events: none;
+}
+
+.name {
+  padding: 0 var(--space-3);
+  font-size: 0.875rem;
+  font-weight: 600;
+}
+
+.direction {
+  padding: 0 var(--space-3);
+  overflow: hidden;
+  color: var(--wb-muted-foreground);
+  font-size: 0.75rem;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
diff --git a/apps/web/src/pages/workspace/design-themes.tsx b/apps/web/src/pages/workspace/design-themes.tsx
index 24ba02ad..6d469d50 100644
--- a/apps/web/src/pages/workspace/design-themes.tsx
+++ b/apps/web/src/pages/workspace/design-themes.tsx
@@ -16,6 +16,8 @@ import type { PreviewDevice } from "./device-preview.tsx";
 import { GuiFrame } from "./gui-frame.tsx";
 import { DesignTarget, type LookTweaks } from "./mockup-tweaks.tsx";
 import type { PaneBarGroup } from "./pane-bar.tsx";
+import { InlineNote } from "../../components.tsx";
+import styles from "./design-themes.module.css";
 
 type Theme = DesignThemeList["themes"][number];
 
@@ -61,18 +63,18 @@ function ThemeCard({
   return (
     <button
       type="button"
-      className="design-theme-card"
+      className={styles.card}
       aria-label={wording.themes.open(theme.label)}
       onClick={onOpen}
     >
       {/* A still picture of the page: inert, so it neither takes focus nor eats the click. */}
-      <span className="design-theme-thumb" aria-hidden="true" inert>
+      <span className={styles.thumb} aria-hidden="true" inert>
         {files.data === undefined ? null : (
-          <GuiFrame html={firstPage(files.data)} scripts />
+          <GuiFrame html={firstPage(files.data)} scripts thumbnail />
         )}
       </span>
-      <span className="design-theme-name">{theme.label}</span>
-      <span className="design-theme-direction" title={theme.direction}>
+      <span className={styles.name}>{theme.label}</span>
+      <span className={styles.direction} title={theme.direction}>
         {theme.direction}
       </span>
     </button>
@@ -95,16 +97,16 @@ function ThemePreview({
   const [device, setDevice] = useState<PreviewDevice>("desktop");
   const [tweaks, setTweaks] = useState<LookTweaks>({});
   const files = useThemeFiles(projectId, theme.id);
-  if (files.isError)
-    return <p className="inline-note">{wording.themes.failed}</p>;
+  if (files.isError) return <InlineNote>{wording.themes.failed}</InlineNote>;
   if (files.data === undefined)
-    return <p className="inline-note">{wording.themes.loading}</p>;
+    return <InlineNote>{wording.themes.loading}</InlineNote>;
   return (
     <MockupFrame
       files={files.data}
       device={device}
       onDevice={setDevice}
       onTweaks={setTweaks}
+      fill
       leading={[
         [
           {
@@ -144,10 +146,9 @@ export function DesignThemes({
 }) {
   const [opened, setOpened] = useState<string | null>(null);
   const themes = useDesignThemes(projectId);
-  if (themes.isError)
-    return <p className="inline-note">{wording.themes.failed}</p>;
+  if (themes.isError) return <InlineNote>{wording.themes.failed}</InlineNote>;
   if (themes.data === undefined)
-    return <p className="inline-note">{wording.themes.loading}</p>;
+    return <InlineNote>{wording.themes.loading}</InlineNote>;
   const theme = themes.data.find((item) => item.id === opened);
   if (theme !== undefined)
     return (
@@ -164,9 +165,9 @@ export function DesignThemes({
       </DesignTarget.Provider>
     );
   return (
-    <div className="design-theme-gallery">
-      <p className="design-theme-lead">{wording.themes.title}</p>
-      <ul className="design-theme-grid" aria-label={wording.themes.gallery}>
+    <div className={styles.gallery} data-slot="design-themes">
+      <p className={styles.lead}>{wording.themes.title}</p>
+      <ul className={styles.grid} aria-label={wording.themes.gallery}>
         {themes.data.map((item) => (
           <li key={item.id}>
             <ThemeCard
diff --git a/apps/web/src/pages/workspace/device-preview.module.css b/apps/web/src/pages/workspace/device-preview.module.css
new file mode 100644
index 00000000..ed1688b9
--- /dev/null
+++ b/apps/web/src/pages/workspace/device-preview.module.css
@@ -0,0 +1,57 @@
+.preview {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  width: 100%;
+  margin: 0;
+}
+
+.bezel {
+  width: 100%;
+  border: 1px solid var(--wb-border);
+  border-radius: var(--radius-panel);
+  background: var(--wb-background);
+  overflow: hidden;
+}
+
+.preview[data-device="phone"] > .bezel {
+  width: min(100%, 24rem);
+  margin-inline: auto;
+}
+
+/* The pane's whole page: the pane is the frame, so only a phone keeps edges, at its sides. */
+.preview[data-fill] {
+  flex: 1;
+  min-height: 0;
+}
+
+.preview[data-fill] > .bezel {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  border: 0;
+  border-radius: 0;
+}
+
+.preview[data-fill][data-device="phone"] > .bezel {
+  border-inline: 1px solid var(--wb-border);
+}
+
+.expanded {
+  width: calc(100vw - 2rem);
+  max-width: none;
+  height: calc(100dvh - 2rem);
+  max-height: none;
+}
+
+.expanded .bezel {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+}
+
+.expanded .bezel[data-device="phone"] {
+  width: min(100%, 24rem);
+  margin-inline: auto;
+}
diff --git a/apps/web/src/pages/workspace/device-preview.stories.tsx b/apps/web/src/pages/workspace/device-preview.stories.tsx
new file mode 100644
index 00000000..bd49ce3a
--- /dev/null
+++ b/apps/web/src/pages/workspace/device-preview.stories.tsx
@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useState } from "react";
+import { DevicePreview, type PreviewDevice } from "./device-preview.tsx";
+import { GuiFrame } from "./gui-frame.tsx";
+
+const PAGE = `<!doctype html>
+<html><body style="font-family: system-ui; margin: 0; padding: 24px">
+<h1>Orders</h1>
+<p>Saturday, 66 orders.</p>
+<ul><li>Lemon cake, 2pm</li><li>Sourdough x4, 9am</li></ul>
+</body></html>`;
+
+const meta = {
+  title: "Components/Workspace/DevicePreview",
+  parameters: { layout: "fullscreen" },
+} satisfies Meta;
+
+export default meta;
+
+function Preview({ html }: { html: string }) {
+  const [device, setDevice] = useState<PreviewDevice>("desktop");
+  return (
+    <div style={{ height: 640 }}>
+      <DevicePreview html={html} device={device} onDevice={setDevice} />
+    </div>
+  );
+}
+
+/** A mockup in a desktop or phone frame; the frame is a size cue, not a running app. */
+export const Mockup: StoryObj = {
+  render: () => <Preview html={PAGE} />,
+};
+
+/** Nothing to show yet. */
+export const Empty: StoryObj = {
+  render: () => <Preview html="" />,
+};
+
+/** The sandboxed frame on its own. */
+export const Frame: StoryObj = {
+  render: () => (
+    <div style={{ height: 400 }}>
+      <GuiFrame html={PAGE} />
+    </div>
+  ),
+};
diff --git a/apps/web/src/pages/workspace/device-preview.tsx b/apps/web/src/pages/workspace/device-preview.tsx
index a19281a7..2d3773cd 100644
--- a/apps/web/src/pages/workspace/device-preview.tsx
+++ b/apps/web/src/pages/workspace/device-preview.tsx
@@ -13,6 +13,7 @@ import { useState, type ReactNode, type Ref } from "react";
 import { wording } from "../../config.ts";
 import { AppFrame, GuiFrame } from "./gui-frame.tsx";
 import { PaneBar, type PaneBarGroup } from "./pane-bar.tsx";
+import styles from "./device-preview.module.css";
 
 export type PreviewDevice = "desktop" | "phone";
 
@@ -31,6 +32,7 @@ export function DevicePreview({
   overlay,
   popover,
   popoverRef,
+  fill = false,
 }: {
   html?: string;
   src?: { url: string; title: string };
@@ -50,6 +52,8 @@ export function DevicePreview({
   /** A panel a bar action opens, anchored to the bar so it moves with it. */
   popover?: ReactNode;
   popoverRef?: Ref<HTMLDivElement> | undefined;
+  /** Fills its container edge to edge, without the bezel's border, as a pane's whole page. */
+  fill?: boolean;
 }) {
   const [expanded, setExpanded] = useState(false);
   if (src === undefined && html.trim().length === 0)
@@ -60,14 +64,23 @@ export function DevicePreview({
   };
   return (
     <figure
-      className={`device-preview device-preview-${device}`}
+      className={styles.preview}
+      data-slot="device-preview"
+      data-device={device}
+      data-fill={fill ? "" : undefined}
+      data-expanded={expanded ? "" : undefined}
       aria-label="Device preview"
     >
-      <div className="device-bezel">
+      <div className={styles.bezel}>
         {src === undefined ? (
-          <GuiFrame html={html} scripts={scripts} frameRef={frameRef} />
+          <GuiFrame
+            html={html}
+            scripts={scripts}
+            frameRef={frameRef}
+            fill={fill}
+          />
         ) : (
-          <AppFrame src={src.url} title={src.title} />
+          <AppFrame src={src.url} title={src.title} fill={fill} />
         )}
       </div>
       {overlay}
@@ -106,19 +119,20 @@ export function DevicePreview({
         ]}
       />
       <Dialog open={expanded} onOpenChange={expand}>
-        <DialogContent className="device-preview-expanded">
+        <DialogContent className={styles.expanded}>
           <DialogHeader>
             <DialogTitle>{wording.preview.expandedTitle}</DialogTitle>
           </DialogHeader>
-          <div className={`device-bezel device-preview-${device}`}>
+          <div className={styles.bezel} data-device={device}>
             {src === undefined ? (
               <GuiFrame
                 html={expandedHtml ?? html}
                 scripts={scripts}
                 frameRef={expandedFrameRef}
+                fill
               />
             ) : (
-              <AppFrame src={src.url} title={src.title} />
+              <AppFrame src={src.url} title={src.title} fill />
             )}
           </div>
         </DialogContent>
diff --git a/apps/web/src/pages/workspace/diff-pane.module.css b/apps/web/src/pages/workspace/diff-pane.module.css
new file mode 100644
index 00000000..c4a35aa7
--- /dev/null
+++ b/apps/web/src/pages/workspace/diff-pane.module.css
@@ -0,0 +1,10 @@
+.read {
+  padding: var(--space-5);
+}
+
+.lines {
+  font-family: var(--wb-font-mono);
+  font-size: 12px;
+  white-space: pre-wrap;
+  margin: 0;
+}
diff --git a/apps/web/src/pages/workspace/diff-pane.stories.tsx b/apps/web/src/pages/workspace/diff-pane.stories.tsx
new file mode 100644
index 00000000..276ef061
--- /dev/null
+++ b/apps/web/src/pages/workspace/diff-pane.stories.tsx
@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { DiffPane } from "./diff-pane.tsx";
+
+const meta = {
+  title: "Components/Workspace/DiffPane",
+  component: DiffPane,
+  args: {
+    before: "# Brief\n\nBakeries take orders by phone.\nOrders get lost.\n",
+    after:
+      "# Brief\n\nBakeries take orders by phone and on paper.\nOrders get lost on busy days.\nOwners want one list.\n",
+    beforeVersion: 1,
+    afterVersion: 2,
+  },
+} satisfies Meta<typeof DiffPane>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Changes: Story = {};
+
+/** The comparison header already names the versions. */
+export const WithoutRange: Story = { args: { hideRange: true } };
+
+export const NoEarlierVersion: Story = {
+  args: { before: null, beforeVersion: null },
+};
diff --git a/apps/web/src/pages/workspace/diff-pane.tsx b/apps/web/src/pages/workspace/diff-pane.tsx
index d1c52d2c..d6db3dc2 100644
--- a/apps/web/src/pages/workspace/diff-pane.tsx
+++ b/apps/web/src/pages/workspace/diff-pane.tsx
@@ -2,7 +2,9 @@
  * Previous retained version against the one the plan names. No earlier
  * version is an empty history, not a diff of the document against itself.
  */
+import { InlineNote } from "../../components.tsx";
 import { diffLines } from "./diff-lines.ts";
+import styles from "./diff-pane.module.css";
 
 export function DiffPane({
   before,
@@ -19,17 +21,17 @@ export function DiffPane({
   hideRange?: boolean;
 }) {
   if (before === null || beforeVersion === null || afterVersion === null) {
-    return <p className="inline-note">No earlier version.</p>;
+    return <InlineNote>No earlier version.</InlineNote>;
   }
   const lines = diffLines(before, after);
   return (
-    <article className="document-read">
+    <article className={styles.read} data-slot="diff-pane">
       {hideRange ? null : (
-        <p className="inline-note">
+        <InlineNote>
           v{String(beforeVersion)} → v{String(afterVersion)}
-        </p>
+        </InlineNote>
       )}
-      <pre className="diff-lines">
+      <pre className={styles.lines}>
         {lines.map((line, index) => (
           <div key={`${line.sign}:${String(index)}`}>
             {line.sign}
diff --git a/apps/web/src/pages/workspace/document-decision.module.css b/apps/web/src/pages/workspace/document-decision.module.css
new file mode 100644
index 00000000..82ebadef
--- /dev/null
+++ b/apps/web/src/pages/workspace/document-decision.module.css
@@ -0,0 +1,153 @@
+/* The library's ask wears an accent wash; here it is a plain card like the conversation's others. */
+.decision [data-slot="tool-approval-card"] {
+  max-width: 36rem;
+  min-width: 0;
+  overflow-wrap: anywhere;
+  border-color: var(--wb-border);
+  background: var(--wb-background);
+}
+
+.decision [data-slot="tool-approval-card"] > header > svg {
+  color: var(--wb-muted-foreground);
+}
+
+.what {
+  margin: 0;
+}
+
+/* The library card always renders Approve always as its second action.
+   Document cards and the design card do not offer that standing grant. */
+.decision[data-once]
+  [data-slot="tool-approval-card"]
+  > div:last-child
+  > button:nth-child(2) {
+  display: none;
+}
+
+/* Not yet is sm:ms-auto, and every action is shrink-0 nowrap. A long middle
+   label fills the row, Not yet wraps, and the auto margin pins it to the
+   right edge, so Not yet drops that margin. A label wider than the card
+   wraps between words inside its own button; the card's overflow-wrap
+   anywhere would otherwise break it a letter at a time. The design card
+   sizes its actions on their own. */
+.decision:not([data-design])
+  [data-slot="tool-approval-card"]
+  > div:last-child
+  > button {
+  flex-shrink: 1;
+  min-width: 0;
+  height: auto;
+  min-height: 2rem;
+  white-space: normal;
+  overflow-wrap: normal;
+  word-break: normal;
+}
+
+.decision:not([data-design])
+  [data-slot="tool-approval-card"]
+  > div:last-child
+  > button:last-child {
+  flex-shrink: 0;
+  margin-inline-start: 0;
+}
+
+/* Design approval: the two actions share one line and one height, and Not
+   yet is not pinned to the right edge. Each starts at its label's width and
+   shares the spare room, so a label wraps between words only once the line
+   is too narrow for it; the button centres its text, so clipping it would
+   cut both ends. */
+.decision[data-design] [data-slot="tool-approval-card"] > div:last-child {
+  flex-wrap: nowrap;
+  align-items: stretch;
+}
+
+.decision[data-design]
+  [data-slot="tool-approval-card"]
+  > div:last-child
+  > button {
+  flex: 1 1 auto;
+  margin-inline-start: 0;
+  height: auto;
+  min-height: 2rem;
+  white-space: normal;
+  overflow-wrap: normal;
+  word-break: normal;
+  text-align: center;
+}
+
+/* The library keeps a settled line's words from shrinking, so a long document title ran past the
+   column; it ellipsizes here, and the full line is the card's tooltip. */
+.decision > p > span {
+  flex-shrink: 1;
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+/* A long document title wraps inside the card instead of running past its edge. */
+.show {
+  align-self: flex-start;
+  max-width: 100%;
+  height: auto;
+  padding: 0;
+  white-space: normal;
+  text-align: start;
+  overflow-wrap: anywhere;
+}
+
+.sources {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.concepts {
+  width: 100%;
+  margin: 0;
+  border-collapse: collapse;
+}
+
+.concepts th,
+.concepts td {
+  padding: var(--space-1) var(--space-3) var(--space-1) 0;
+  text-align: start;
+  vertical-align: baseline;
+  font-weight: 400;
+}
+
+.concepts thead th {
+  font-weight: 600;
+  color: var(--wb-muted-foreground);
+}
+
+.concepts tbody td:first-child {
+  font-weight: 600;
+}
+
+.details summary {
+  color: var(--wb-muted-foreground);
+  font-size: 0.75rem;
+  cursor: pointer;
+}
+
+/* An opened list of many versions scrolls inside the card, so the decision stays in view. */
+.details .sources {
+  max-height: 16rem;
+  margin-top: var(--space-1);
+  overflow-y: auto;
+}
+
+.details p {
+  margin: var(--space-1) 0 0;
+  font-size: 0.75rem;
+}
+
+.next {
+  margin: 0;
+  color: var(--wb-muted-foreground);
+  font-size: 0.75rem;
+}
diff --git a/apps/web/src/pages/workspace/document-decision.stories.tsx b/apps/web/src/pages/workspace/document-decision.stories.tsx
new file mode 100644
index 00000000..5e5a61b0
--- /dev/null
+++ b/apps/web/src/pages/workspace/document-decision.stories.tsx
@@ -0,0 +1,68 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
+import { DocumentDecision, PackageDecision } from "./document-decision.tsx";
+
+const meta = {
+  title: "Components/Workspace/Decisions",
+  component: DocumentDecision,
+  args: {
+    approval: {
+      approvalId: "approval-1",
+      document: { kind: "problem_brief", title: "Problem brief", version: 2 },
+    },
+    onYes: fn(),
+    onAlways: fn(),
+    onNo: fn(),
+    onShowDocument: fn(),
+  },
+} satisfies Meta<typeof DocumentDecision>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const AskingForADocument: Story = {};
+
+export const DocumentShown: Story = {
+  args: { shownDocument: "problem_brief" },
+};
+
+export const SeveralDocuments: Story = {
+  args: {
+    approval: {
+      approvalId: "approval-2",
+      sources: [
+        { kind: "problem_brief", title: "Problem brief", version: 2 },
+        {
+          kind: "product_requirements",
+          title: "Product requirements",
+          version: 1,
+        },
+      ],
+    },
+  },
+};
+
+export const Approved: Story = {
+  args: {
+    approval: {
+      approvalId: "approval-3",
+      document: { kind: "problem_brief", title: "Problem brief", version: 2 },
+      outcome: { status: "approved", scope: "once" },
+    },
+  },
+};
+
+export const Failed: Story = {
+  args: { error: "The decision didn't reach the hub. Try again." },
+};
+
+export const Packages: StoryObj<typeof PackageDecision> = {
+  args: {
+    approvalId: "approval-4",
+    packages: ["react-router@7.9.1", "date-fns@4.1.0"],
+    onYes: fn(),
+    onAlways: fn(),
+    onNo: fn(),
+  },
+  render: (args) => <PackageDecision {...args} />,
+};
diff --git a/apps/web/src/pages/workspace/document-decision.tsx b/apps/web/src/pages/workspace/document-decision.tsx
index 8c3925e5..2dcc9619 100644
--- a/apps/web/src/pages/workspace/document-decision.tsx
+++ b/apps/web/src/pages/workspace/document-decision.tsx
@@ -17,6 +17,7 @@ import {
 import { approvalQuestion, shortDocumentName } from "./collaboration.ts";
 import { approvalToolPart } from "./conversation-parts.ts";
 import type { ApprovalOutcome, DocumentApproval } from "./transcript.tsx";
+import styles from "./document-decision.module.css";
 
 /** At most ten words of a design direction, with parenthetical notes removed. */
 function designConceptDescription(direction: string): string {
@@ -185,14 +186,14 @@ export function DocumentDecision({
   const sources = approval.sources ?? [];
   const sourceList =
     sources.length === 0 ? null : (
-      <ul className="document-decision-sources">
+      <ul className={styles.sources}>
         {sources.map((source) => (
           <li key={source.kind}>
             <UiButton
               type="button"
               variant="link"
               size="sm"
-              className="document-decision-show"
+              className={styles.show}
               title={text.source(source.title, source.version)}
               disabled={onShowDocument === undefined}
               onClick={() => onShowDocument?.(source.kind)}
@@ -211,13 +212,9 @@ export function DocumentDecision({
     );
   return (
     <ToolApproval
-      className={[
-        "document-decision",
-        "document-decision-once",
-        design ? "document-decision-design" : "",
-      ]
-        .filter((name) => name !== "")
-        .join(" ")}
+      className={styles.decision}
+      data-once=""
+      data-design={design ? "" : undefined}
       part={approvalToolPart(approval.approvalId, approval.outcome)}
       onDecide={decide}
       disabled={disabled}
@@ -236,13 +233,13 @@ export function DocumentDecision({
       }}
     >
       {approving === undefined ? null : (
-        <p className="document-decision-what">{approving}</p>
+        <p className={styles.what}>{approving}</p>
       )}
       {instruction !== undefined && INSTRUCTION_ASKS.has(tool) ? (
         <p>{instruction}</p>
       ) : null}
       {sources.length > 1 ? (
-        <details className="document-decision-details">
+        <details className={styles.details}>
           <summary>{text.covers(sources.length)}</summary>
           {sourceList}
         </details>
@@ -251,10 +248,7 @@ export function DocumentDecision({
       )}
       {approval.concepts === undefined ||
       approval.concepts.length === 0 ? null : (
-        <table
-          className="document-decision-concepts"
-          aria-label={text.concepts}
-        >
+        <table className={styles.concepts} aria-label={text.concepts}>
           <thead>
             <tr>
               <th scope="col">{text.conceptColumns.design}</th>
@@ -271,9 +265,7 @@ export function DocumentDecision({
           </tbody>
         </table>
       )}
-      {body === undefined ? null : (
-        <p className="document-decision-next">{body}</p>
-      )}
+      {body === undefined ? null : <p className={styles.next}>{body}</p>}
       {asked === undefined ||
       shown ||
       name === undefined ||
@@ -282,14 +274,14 @@ export function DocumentDecision({
           type="button"
           variant="link"
           size="sm"
-          className="document-decision-show"
+          className={styles.show}
           onClick={() => onShowDocument(asked.kind)}
         >
           {text.show(name)}
         </UiButton>
       )}
       {instruction !== undefined && FOLDED_INSTRUCTION_ASKS.has(tool) ? (
-        <details className="document-decision-details">
+        <details className={styles.details}>
           <summary>{text.details}</summary>
           <p>{instruction}</p>
         </details>
@@ -329,7 +321,7 @@ export function PackageDecision({
   };
   return (
     <ToolApproval
-      className="document-decision"
+      className={styles.decision}
       part={approvalToolPart(approvalId, outcome)}
       onDecide={decide}
       disabled={disabled}
@@ -344,7 +336,7 @@ export function PackageDecision({
         denied: text.packagesDeclined(packages.join(", ")),
       }}
     >
-      <p className="document-decision-next">{text.packagesDetail}</p>
+      <p className={styles.next}>{text.packagesDetail}</p>
       {countdown}
     </ToolApproval>
   );
diff --git a/apps/web/src/pages/workspace/document-tips.tsx b/apps/web/src/pages/workspace/document-tips.tsx
index 0cc29584..412390eb 100644
--- a/apps/web/src/pages/workspace/document-tips.tsx
+++ b/apps/web/src/pages/workspace/document-tips.tsx
@@ -1,4 +1,4 @@
-import { MenuItem, MenuLabel } from "@corbits/react-ui/ui/menu";
+import { MenuItem } from "@corbits/react-ui/ui/menu";
 import { Lightbulb } from "lucide-react";
 import { wording } from "../../config.ts";
 import {
@@ -7,7 +7,7 @@ import {
 } from "../../document-tips-setting.ts";
 import { useReducedMotion } from "../../reduced-motion.ts";
 import { useElapsedMs } from "./elapsed.tsx";
-import type { PaneBarGroup } from "./pane-bar.tsx";
+import { PaneBarTip, type PaneBarGroup } from "./pane-bar.tsx";
 
 const TIP_MS = 8_000;
 
@@ -17,11 +17,7 @@ function RotatingTip() {
   const elapsed = useElapsedMs();
   const tips = wording.tips.items;
   const index = still ? 0 : Math.floor(elapsed / TIP_MS) % tips.length;
-  return (
-    <MenuLabel key={index} className="pane-bar-tip">
-      {tips[index]}
-    </MenuLabel>
-  );
+  return <PaneBarTip key={index}>{tips[index]}</PaneBarTip>;
 }
 
 /** The tips as the pane bar's last group: an icon that opens one short tip at a time. */
diff --git a/apps/web/src/pages/workspace/gui-frame.module.css b/apps/web/src/pages/workspace/gui-frame.module.css
new file mode 100644
index 00000000..341f18ba
--- /dev/null
+++ b/apps/web/src/pages/workspace/gui-frame.module.css
@@ -0,0 +1,27 @@
+/* A page shown among a document's other parts takes most of the viewport's height. */
+.frame {
+  width: 100%;
+  height: 65dvh;
+  min-height: 480px;
+  border: 0;
+  background: #fff;
+}
+
+.frame[data-fill] {
+  flex: 1;
+  height: auto;
+  min-height: 0;
+}
+
+/* Four times the container's width, as a desktop lays it out, scaled down to fit; the container
+   is positioned and clips it. A still picture, so it takes no pointer. */
+.frame[data-thumbnail] {
+  position: absolute;
+  inset: 0 auto auto 0;
+  width: 400%;
+  height: 400%;
+  min-height: 0;
+  transform: scale(0.25);
+  transform-origin: 0 0;
+  pointer-events: none;
+}
diff --git a/apps/web/src/pages/workspace/gui-frame.tsx b/apps/web/src/pages/workspace/gui-frame.tsx
index 0093c79f..d22b6f85 100644
--- a/apps/web/src/pages/workspace/gui-frame.tsx
+++ b/apps/web/src/pages/workspace/gui-frame.tsx
@@ -3,6 +3,21 @@
  * run only for a designer's mockup. A running generated app is AppFrame.
  */
 import { useEffect, useRef, type Ref } from "react";
+import { InlineNote } from "../../components.tsx";
+import styles from "./gui-frame.module.css";
+
+/** How the frame is sized: a page-high frame, the whole of a flex container, or a scaled-down still. */
+type FrameSize = {
+  /** Grows to fill a flex container instead of taking a page's height. */
+  fill?: boolean | undefined;
+  /** Lays the page out at desktop width and scales it to a quarter, over a positioned container. */
+  thumbnail?: boolean | undefined;
+};
+
+const sizeAttributes = ({ fill = false, thumbnail = false }: FrameSize) => ({
+  "data-fill": fill ? "" : undefined,
+  "data-thumbnail": thumbnail ? "" : undefined,
+});
 
 const MOCKUP_HOST = "/mockup-frame.html";
 
@@ -16,9 +31,11 @@ function assignRef<T>(ref: Ref<T> | undefined, value: T | null) {
 function ScriptedFrame({
   html,
   frameRef,
+  size,
 }: {
   html: string;
   frameRef?: Ref<HTMLIFrameElement> | undefined;
+  size: FrameSize;
 }) {
   const own = useRef<HTMLIFrameElement | null>(null);
   useEffect(() => {
@@ -40,7 +57,9 @@ function ScriptedFrame({
         own.current = node;
         assignRef(frameRef, node);
       }}
-      className="gui-frame"
+      className={styles.frame}
+      data-slot="gui-frame"
+      {...sizeAttributes(size)}
       title="Design"
       sandbox="allow-scripts"
       src={MOCKUP_HOST}
@@ -52,21 +71,28 @@ export function GuiFrame({
   html,
   scripts = false,
   frameRef,
+  fill,
+  thumbnail,
 }: {
   html: string | null;
   scripts?: boolean;
   frameRef?: Ref<HTMLIFrameElement> | undefined;
-}) {
+} & FrameSize) {
+  const size = { fill, thumbnail };
   if (html === null || html.trim().length === 0) {
-    return <p className="inline-note">No design to show.</p>;
+    return <InlineNote>No design to show.</InlineNote>;
   }
   // The host takes one page, so a changed page is a fresh frame.
   if (scripts)
-    return <ScriptedFrame key={html} html={html} frameRef={frameRef} />;
+    return (
+      <ScriptedFrame key={html} html={html} frameRef={frameRef} size={size} />
+    );
   return (
     <iframe
       ref={frameRef}
-      className="gui-frame"
+      className={styles.frame}
+      data-slot="gui-frame"
+      {...sizeAttributes(size)}
       title="Design"
       sandbox=""
       srcDoc={html}
@@ -78,10 +104,20 @@ export function GuiFrame({
  * The running app at the origin the hub serves it on, which is never the workspace's own, so the
  * app keeps its own storage and requests while it cannot reach the workspace or its session.
  */
-export function AppFrame({ src, title }: { src: string; title: string }) {
+export function AppFrame({
+  src,
+  title,
+  fill,
+}: {
+  src: string;
+  title: string;
+  fill?: boolean | undefined;
+}) {
   return (
     <iframe
-      className="gui-frame"
+      className={styles.frame}
+      data-slot="gui-frame"
+      {...sizeAttributes({ fill })}
       title={title}
       sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-modals allow-downloads"
       // An iframe gets no powerful features unless its permissions policy lists them, so the app
diff --git a/apps/web/src/pages/workspace/index.module.css b/apps/web/src/pages/workspace/index.module.css
new file mode 100644
index 00000000..cdbfa4bb
--- /dev/null
+++ b/apps/web/src/pages/workspace/index.module.css
@@ -0,0 +1,178 @@
+.room {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-height: 0;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.mobileSwitch {
+  display: none;
+}
+
+/* The library Panel resizes the document from its start edge, so the row is
+   the flex row it expects: the conversation takes what the panel leaves. */
+.panes {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  min-width: 0;
+  width: 100%;
+  overflow: hidden;
+}
+
+/* Chat-first: before a stage has a drafted artifact, the conversation is
+   the whole page — one centred column at a reading measure, the composer at
+   its bottom. The split earns its keep only once there is something to split
+   against. */
+.panes[data-chat-first] {
+  flex-direction: column;
+  max-width: 52rem;
+  margin: 0 auto;
+}
+
+.conversationPane {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  background: var(--wb-background);
+}
+
+/* The column runs the full height, so the composer sits at the window's
+   foot with the thread above it, not just under the last message. */
+.panes[data-chat-first] > .conversationPane {
+  width: 100%;
+}
+
+/* The split's proportions before the person drags it. */
+.panes > [data-slot="artifact-pane"] {
+  width: var(--resizable-width, 58%);
+  background: var(--wb-background);
+}
+
+.conversation {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  position: relative;
+}
+
+.conversation > :last-child {
+  flex: none;
+}
+
+/* The composer keeps a reading measure in a wide pane. */
+.conversation > [data-slot="composer"] {
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 46rem;
+  margin-inline: auto;
+}
+
+/* The composer arrives once there is something it could send: it rises
+   into place rather than appearing. */
+.panes[data-chat-first] [data-slot="composer"] {
+  animation: composer-in 280ms ease-out backwards;
+}
+
+@keyframes composer-in {
+  from {
+    opacity: 0;
+    transform: translateY(16px);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .panes[data-chat-first] [data-slot="composer"] {
+    animation: none;
+  }
+}
+
+/* The archived banner's lead, fault and action, spaced as the banner spaces its rows. */
+/* A quiet line before a change to what a specialist builds from, with its two ways on. */
+.caution {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-2) var(--space-3);
+  padding-bottom: var(--space-2);
+  color: var(--wb-muted-foreground);
+  font-size: 0.8125rem;
+}
+
+.caution p {
+  margin: 0;
+  flex: 1 1 18rem;
+}
+
+.cautionActions {
+  display: flex;
+  gap: var(--space-1);
+}
+
+.replies {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+  padding-bottom: var(--space-2);
+}
+
+@media (max-width: 900px) {
+  .conversationPane {
+    border-bottom: 1px solid var(--wb-border);
+  }
+
+  .panes[data-chat-first] [data-slot="composer"] {
+    padding-right: calc(var(--space-4) + 44px + var(--space-6));
+  }
+}
+
+@media (max-width: 760px) {
+  .mobileSwitch {
+    display: flex;
+    flex-shrink: 0;
+    gap: var(--space-2);
+    padding: var(--space-2) var(--space-4);
+    border-bottom: 1px solid var(--wb-border);
+  }
+
+  .mobileSwitch button {
+    flex: 1;
+    min-height: 44px;
+    padding: var(--space-2);
+    border-radius: var(--radius-md);
+    color: var(--wb-muted-foreground);
+    font: inherit;
+  }
+
+  .mobileSwitch button[aria-pressed="true"] {
+    background: var(--wb-muted);
+    color: var(--wb-foreground);
+    font-weight: 600;
+  }
+
+  .mobileSwitch button:focus-visible {
+    outline: 2px solid var(--wb-ring);
+    outline-offset: 2px;
+  }
+
+  /* One pane at a time, chosen by the switch: the document is not resized. */
+  .panes > [data-slot="artifact-pane"] {
+    flex: 1;
+    width: auto;
+    min-width: 0;
+    max-width: none;
+    border-inline-start: 0;
+  }
+
+  .room[data-mobile-pane="conversation"] [data-slot="artifact-pane"],
+  .room[data-mobile-pane="artifacts"] .conversationPane {
+    display: none;
+  }
+}
diff --git a/apps/web/src/pages/workspace/index.tsx b/apps/web/src/pages/workspace/index.tsx
index 05210787..87f9c593 100644
--- a/apps/web/src/pages/workspace/index.tsx
+++ b/apps/web/src/pages/workspace/index.tsx
@@ -59,7 +59,6 @@ import {
 import { earlierDocumentRole } from "./earlier-document.ts";
 import { pastedFiles } from "./pasted-files.ts";
 import { ArtifactPane, LIVE_TAB } from "./artifact-pane.tsx";
-import "./persistent-workspace.css";
 import { ProductApiError, type ProjectArtifact } from "@corbits-builder/client";
 import type { InFlightRun } from "@corbits-builder/schemas/artifact";
 import { toast } from "sonner";
@@ -81,7 +80,7 @@ import {
 import type { ChatMessage, Wait } from "../../api/types.ts";
 import { deliveredText } from "@corbits-builder/schemas/conversation";
 import { keys } from "../../queries/keys.ts";
-import { COMPOSER_BOX_CLASS, CONV_CLASS, PANES_CLASS } from "./pane-classes.ts";
+import { Composer } from "../../composer.tsx";
 import { questionsOpen, RoomThread, turnItemId } from "./transcript.tsx";
 import { cardDocuments } from "./collaboration.ts";
 import { useFiledVersions } from "./filed-versions.tsx";
@@ -134,6 +133,9 @@ import {
   type RoomSnapshot,
 } from "./load-room.ts";
 import { RoomFault, RoomSkeleton } from "./room-skeleton.tsx";
+import { StageView } from "./stage-view.tsx";
+import { Banner, BannerAction, Fault } from "../../components.jsx";
+import styles from "./index.module.css";
 import { designDraftFiled, useDesignDraft } from "./design-preview.tsx";
 import { useUserManual } from "./user-manual.tsx";
 import {
@@ -155,7 +157,7 @@ import { composerPlaceholder } from "./composer-placeholder.ts";
 import { Dictated } from "../../dictation.jsx";
 import { useShellReply } from "../../flourish.tsx";
 import { EnableAiDialog, needsModelSetup } from "../model-setup.tsx";
-import { useModelCatalog } from "../providers.tsx";
+import { useModelCatalog } from "../settings/providers.tsx";
 
 // The stream says when the room moved. This read covers what it cannot see,
 // such as a coordinator run replaced while its old stream stays quiet.
@@ -1404,15 +1406,10 @@ function ReadyRoom({
   let dock: ReactNode;
   if (archived) {
     dock = (
-      <div className="banner" role="status">
-        <p className="banner-title">{wording.archivedProject.title}</p>
+      <Banner title={wording.archivedProject.title}>
         <p>{wording.archivedProject.lead}</p>
-        {restoreFault === null ? null : (
-          <p className="workspace-fault" role="alert">
-            {restoreFault}
-          </p>
-        )}
-        <div className="banner-action">
+        {restoreFault === null ? null : <Fault>{restoreFault}</Fault>}
+        <BannerAction>
           <UiButton
             type="button"
             size="sm"
@@ -1423,15 +1420,14 @@ function ReadyRoom({
               ? wording.archivedProject.restoring
               : wording.archivedProject.restore}
           </UiButton>
-        </div>
-      </div>
+        </BannerAction>
+      </Banner>
     );
   } else if (modelNeeded !== null && !providerMissing) {
     // A coordinator with no model to run on cannot answer, even one still bound from before.
     dock = (
-      <div className="banner" role="alert">
-        <p className="banner-title">{modelNeeded.message}</p>
-        <div className="banner-action">
+      <Banner tone="error" role="alert" title={modelNeeded.message}>
+        <BannerAction>
           <UiButton type="button" size="sm" onClick={onOpenSettings}>
             {wording.action.openSettings}
           </UiButton>
@@ -1443,25 +1439,18 @@ function ReadyRoom({
           >
             {wording.action.retry}
           </UiButton>
-        </div>
-      </div>
+        </BannerAction>
+      </Banner>
     );
   } else if (unbound && !providerMissing && !between) {
     // The person does not start the coordinator by typing: an unbound room waits for the
     // start that opening it asked for, and a refused start says why and offers it again.
     if (startFault === null) {
-      dock = (
-        <div className="banner" role="status">
-          <p className="banner-title">
-            {wording.conversation.startingCoordinator}
-          </p>
-        </div>
-      );
+      dock = <Banner title={wording.conversation.startingCoordinator} />;
     } else {
       dock = (
-        <div className="banner" role="alert">
-          <p className="banner-title">{startFault}</p>
-          <div className="banner-action">
+        <Banner tone="error" role="alert" title={startFault}>
+          <BannerAction>
             <UiButton
               type="button"
               size="sm"
@@ -1469,8 +1458,8 @@ function ReadyRoom({
             >
               {wording.action.retry}
             </UiButton>
-          </div>
-        </div>
+          </BannerAction>
+        </Banner>
       );
     }
   } else {
@@ -1483,64 +1472,57 @@ function ReadyRoom({
       !approvalBusy &&
       !providerMissing;
     dock = (
-      <div
-        className="composer"
-        data-working={working || sending ? "" : undefined}
-      >
-        <div className="composer-notes">
-          {attachFault === null ? null : (
-            <p className="workspace-fault" role="alert">
-              {attachFault}
-            </p>
-          )}
-          {sendFailed && sendFault ? (
-            <p className="workspace-fault" role="alert">
-              {sendFault}
-            </p>
-          ) : null}
-          {caution === null ? null : (
-            <div className="workspace-caution" role="alert">
-              <p>
-                {wording.earlierDocument.warning(participantLabel(caution))}
-              </p>
-              <div className="workspace-caution-actions">
-                <UiButton type="button" size="sm" onClick={sendNow}>
-                  {wording.earlierDocument.sendAnyway}
-                </UiButton>
-                <UiButton
-                  type="button"
-                  size="sm"
-                  variant="ghost"
-                  onClick={() => {
-                    setCaution(null);
-                    composerRef.current?.focus();
-                  }}
-                >
-                  {wording.action.cancel}
-                </UiButton>
+      <Composer
+        working={working || sending}
+        notes={
+          <>
+            {attachFault === null ? null : <Fault>{attachFault}</Fault>}
+            {sendFailed && sendFault ? <Fault>{sendFault}</Fault> : null}
+            {caution === null ? null : (
+              <div className={styles.caution} role="alert">
+                <p>
+                  {wording.earlierDocument.warning(participantLabel(caution))}
+                </p>
+                <div className={styles.cautionActions}>
+                  <UiButton type="button" size="sm" onClick={sendNow}>
+                    {wording.earlierDocument.sendAnyway}
+                  </UiButton>
+                  <UiButton
+                    type="button"
+                    size="sm"
+                    variant="ghost"
+                    onClick={() => {
+                      setCaution(null);
+                      composerRef.current?.focus();
+                    }}
+                  >
+                    {wording.action.cancel}
+                  </UiButton>
+                </div>
               </div>
-            </div>
-          )}
-          {replies.length > 0 && !providerMissing ? (
-            <div
-              className="workspace-replies"
-              role="group"
-              aria-label="Suggested replies"
-            >
-              {replies.map((reply) => (
-                <UiButton
-                  key={reply}
-                  type="button"
-                  variant="outline"
-                  size="sm"
-                  onClick={() => void deliver(reply)}
-                >
-                  {reply}
-                </UiButton>
-              ))}
-            </div>
-          ) : null}
-        </div>
+            )}
+            {replies.length > 0 && !providerMissing ? (
+              <div
+                className={styles.replies}
+                role="group"
+                aria-label="Suggested replies"
+              >
+                {replies.map((reply) => (
+                  <UiButton
+                    key={reply}
+                    type="button"
+                    variant="outline"
+                    size="sm"
+                    onClick={() => void deliver(reply)}
+                  >
+                    {reply}
+                  </UiButton>
+                ))}
+              </div>
+            ) : null}
+          </>
+        }
+      >
         <AttachmentDropZone
           onFiles={addFiles}
           disabled={!attaching}
@@ -1553,7 +1535,6 @@ function ReadyRoom({
           >
             {(mic) => (
               <PromptInput
-                className={COMPOSER_BOX_CLASS}
                 value={value}
                 onValueChange={setValue}
                 onSubmit={send}
@@ -1653,18 +1634,18 @@ function ReadyRoom({
             )}
           </Dictated>
         </AttachmentDropZone>
-      </div>
+      </Composer>
     );
   }
 
   return (
-    <div className="stage-view" aria-label={`Conversation for ${projectTitle}`}>
+    <StageView aria-label={`Conversation for ${projectTitle}`}>
       <div
-        className="room workspace-room"
+        className={styles.room}
         data-mobile-pane={chatFirst ? "conversation" : mobilePane}
       >
         {chatFirst ? null : (
-          <nav className="workspace-mobile-switch" aria-label="Workspace panes">
+          <nav className={styles.mobileSwitch} aria-label="Workspace panes">
             <button
               type="button"
               aria-pressed={mobilePane === "conversation"}
@@ -1682,10 +1663,14 @@ function ReadyRoom({
           </nav>
         )}
         <div
-          className={`${PANES_CLASS} workspace-split${chatFirst ? " chat-first" : ""}`}
+          className={styles.panes}
+          data-chat-first={chatFirst ? "" : undefined}
         >
-          <section className={CONV_CLASS} aria-label="Project conversation">
-            <div className="stage-conversation">
+          <section
+            className={styles.conversationPane}
+            aria-label="Project conversation"
+          >
+            <div className={styles.conversation}>
               {archived ? null : (
                 <NextStepLine
                   projectId={projectId}
@@ -1825,6 +1810,6 @@ function ReadyRoom({
         </div>
       </div>
       {shell.reply}
-    </div>
+    </StageView>
   );
 }
diff --git a/apps/web/src/pages/workspace/live-app.module.css b/apps/web/src/pages/workspace/live-app.module.css
new file mode 100644
index 00000000..cdca0446
--- /dev/null
+++ b/apps/web/src/pages/workspace/live-app.module.css
@@ -0,0 +1,214 @@
+.status {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  min-width: 0;
+  animation: activity-in 240ms cubic-bezier(0.2, 0, 0, 1);
+}
+
+.app {
+  position: relative;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+}
+
+/* A popover just above the floating bar, in the bar's border and surface, with the corner the
+   pill's ends have. It grows to its widest row before it grows taller, then scrolls. */
+.checklist {
+  display: flex;
+  flex-direction: column;
+  width: max-content;
+  min-height: 0;
+  max-width: min(44rem, calc(100% - 2rem));
+  max-height: 28rem;
+  border: 1px solid var(--wb-border);
+  border-radius: 1.25rem;
+  background: var(--wb-background);
+  box-shadow: var(--wb-shadow);
+}
+
+.checklist:focus-visible {
+  outline: 2px solid var(--wb-ring);
+  outline-offset: 2px;
+}
+
+.checklistHeader {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-1) var(--space-1) var(--space-1) var(--space-4);
+  border-bottom: 1px solid var(--wb-border);
+}
+
+.checklistHeader h3 {
+  margin: 0;
+  font-size: 0.875rem;
+}
+
+.checklistProgress {
+  flex: 1;
+  color: var(--wb-muted-foreground);
+  font-size: 0.75rem;
+  white-space: nowrap;
+}
+
+.checklistItems {
+  margin: 0;
+  padding: var(--space-1) var(--space-2) var(--space-2);
+  overflow: auto;
+  list-style: none;
+  font-size: 0.8125rem;
+}
+
+.checklistRow {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-2);
+  padding: var(--space-1) var(--space-2);
+  border-radius: var(--radius-md);
+  line-height: 1.4;
+}
+
+.checklistRow > svg {
+  flex-shrink: 0;
+  margin-top: 1px;
+  color: var(--wb-muted-foreground);
+}
+
+.checklistItems li[data-done] > .checklistRow > svg,
+.checklistItems li[data-done] > details > .checklistRow > svg {
+  color: var(--wb-foreground);
+}
+
+summary.checklistRow {
+  cursor: pointer;
+  list-style: none;
+}
+
+summary.checklistRow::-webkit-details-marker {
+  display: none;
+}
+
+summary.checklistRow:hover {
+  background: var(--wb-muted);
+}
+
+.checklistNote {
+  padding: var(--space-1) var(--space-2);
+  color: var(--wb-muted-foreground);
+}
+
+.checklistNote > :first-child > :first-child {
+  margin-top: 0;
+}
+
+.checklistNote > :first-child > :last-child {
+  margin-bottom: 0;
+}
+
+.checklistEvidence {
+  margin: 0 0 var(--space-1);
+  padding: 0 var(--space-2) 0 calc(var(--space-2) * 2 + 16px);
+  color: var(--wb-muted-foreground);
+  font-size: 0.75rem;
+  line-height: 1.45;
+}
+
+.checklistEvidence > :first-child > :first-child {
+  margin-top: 0;
+}
+
+.checklistEvidence > :first-child > :last-child {
+  margin-bottom: 0;
+}
+
+.checklistChildren {
+  margin: 0;
+  padding: 0 0 0 calc(var(--space-2) + 16px);
+  list-style: none;
+}
+
+/* Every state but the running app is one centred block in the empty pane, scrolling clear of the
+   floating bar when the pane is shorter than it. */
+.state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-3);
+  width: min(100%, 40rem);
+  margin: auto;
+  padding: var(--space-6) var(--space-6)
+    calc(var(--space-6) + var(--pane-bar-height, 0px));
+  overflow: auto;
+}
+
+.app > [data-slot="sketching"] {
+  justify-content: safe center;
+  padding-bottom: calc(var(--space-6) + var(--pane-bar-height, 0px));
+  overflow: auto;
+}
+
+.state .status {
+  justify-content: center;
+}
+
+.output {
+  width: 100%;
+}
+
+.output summary {
+  margin-bottom: var(--space-2);
+  color: var(--wb-muted-foreground);
+  font-size: 0.8125rem;
+  text-align: center;
+  cursor: pointer;
+}
+
+.spinner {
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.log {
+  width: 100%;
+  max-height: 16rem;
+  margin: 0;
+  overflow: auto;
+  padding: var(--space-3);
+  border-radius: var(--radius-panel);
+  background: var(--wb-muted);
+  font-size: 0.75rem;
+  white-space: pre-wrap;
+}
+
+@keyframes activity-in {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+}
+
+.setupActivity {
+  max-width: 32rem;
+  margin: 0;
+  overflow: hidden;
+  font-size: 0.875rem;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .status,
+  .spinner {
+    animation: none;
+  }
+}
diff --git a/apps/web/src/pages/workspace/live-app.tsx b/apps/web/src/pages/workspace/live-app.tsx
index 084c2f8d..42ba7438 100644
--- a/apps/web/src/pages/workspace/live-app.tsx
+++ b/apps/web/src/pages/workspace/live-app.tsx
@@ -41,11 +41,17 @@ import { keys } from "../../queries/keys.ts";
 import { wording } from "../../config.ts";
 import { activityPhrase, useProjectActivity } from "./agent-activity.tsx";
 import { setupProgressLine } from "./setup-progress.ts";
-import { AppSketch } from "./design-concepts.tsx";
-import { clock, useElapsedMs } from "./elapsed.tsx";
+import {
+  Sketching,
+  SketchingClock,
+  SketchingLead,
+  SketchingNote,
+} from "./sketching.tsx";
+import { useElapsedMs } from "./elapsed.tsx";
 import { DevicePreview, type PreviewDevice } from "./device-preview.tsx";
 import { PaneBar, type PaneBarGroup } from "./pane-bar.tsx";
 import { useFileGroup, ZIP_TYPE } from "./pane-file.tsx";
+import styles from "./live-app.module.css";
 
 const POLL_MS = 10_000;
 const STARTING_POLL_MS = 2_000;
@@ -94,7 +100,7 @@ function BuilderStatus({ projectId }: { projectId: string }) {
   if (builder === undefined) return null;
   const { phrase, asking } = activityPhrase(builder);
   return (
-    <p className="live-app-status" role="status">
+    <p className={styles.status} role="status">
       <StatusDot
         label=""
         live={!asking}
@@ -106,14 +112,7 @@ function BuilderStatus({ projectId }: { projectId: string }) {
   );
 }
 
-function SetupClock({ since }: { since: string }) {
-  const seconds = Math.floor(useElapsedMs(since) / 1_000);
-  return (
-    <span className="concept-sketching-clock" role="timer" aria-live="off">
-      {text.setup.elapsed(clock(seconds))}
-    </span>
-  );
-}
+const STATE = styles.state;
 
 /** The Builder's first app taking shape: what its own tool events say it is doing, while it does. */
 function BuilderSetup({
@@ -132,22 +131,24 @@ function BuilderSetup({
   const quietMs = useElapsedMs(builder.progress?.lastActivityAt);
   const progress = setupProgressLine(builder.progress, quietMs);
   return (
-    <div className="concept-sketching" data-state="working" role="status">
-      <AppSketch />
-      <p className="concept-sketching-lead">{text.setup.working}</p>
+    <Sketching working>
+      <SketchingLead>{text.setup.working}</SketchingLead>
       {phrase === undefined ? null : (
-        <p className="live-app-setup-activity">
+        <p className={styles.setupActivity}>
           <ShimmerText key={phrase}>{phrase}</ShimmerText>
         </p>
       )}
       {progress === undefined ? null : (
-        <p className="live-app-setup-activity">{progress}</p>
+        <p className={styles.setupActivity}>{progress}</p>
       )}
-      <p className="concept-sketching-note">
+      <SketchingNote>
         {text.setup.note}{" "}
-        <SetupClock since={builder.since ?? builder.startedAt} />
-      </p>
-    </div>
+        <SketchingClock
+          since={builder.since ?? builder.startedAt}
+          label={text.setup.elapsed}
+        />
+      </SketchingNote>
+    </Sketching>
   );
 }
 
@@ -160,7 +161,7 @@ function StarterHeld({ coder }: { coder: "checking" | "unknown" | "idle" }) {
   }[coder];
   return (
     <EmptyState
-      className="live-app-state"
+      className={STATE}
       icon={<AppWindow />}
       title={text.notBuiltTitle}
       description={description}
@@ -170,7 +171,7 @@ function StarterHeld({ coder }: { coder: "checking" | "unknown" | "idle" }) {
 
 function Log({ lines }: { lines: readonly string[] | undefined }) {
   if (!lines?.length) return null;
-  return <pre className="live-app-log">{lines.join("\n")}</pre>;
+  return <pre className={styles.log}>{lines.join("\n")}</pre>;
 }
 
 function AppState({
@@ -185,7 +186,7 @@ function AppState({
   if (unavailable)
     return (
       <EmptyState
-        className="live-app-state"
+        className={STATE}
         icon={<AppWindow />}
         title={text.unavailableTitle}
         description={text.unavailable}
@@ -194,14 +195,14 @@ function AppState({
   if (app === undefined) return null;
   if (app.state === "failed")
     return (
-      <div className="live-app-state" role="alert">
+      <div className={styles.state} role="alert">
         <EmptyState
           icon={<TriangleAlert />}
           title={app.error ?? text.failed}
           description={text.restarts}
         />
         {app.log?.length ? (
-          <details className="live-app-output">
+          <details className={styles.output}>
             <summary>{text.lastOutput}</summary>
             <Log lines={app.log.slice(-FAILED_LOG_LINES)} />
           </details>
@@ -211,7 +212,7 @@ function AppState({
   if (app.state === "not_built")
     return (
       <EmptyState
-        className="live-app-state"
+        className={STATE}
         icon={<AppWindow />}
         title={text.notBuiltTitle}
         description={text.notBuilt}
@@ -221,16 +222,16 @@ function AppState({
   if (app.state === "stopped")
     return (
       <EmptyState
-        className="live-app-state"
+        className={STATE}
         icon={<AppWindow />}
         title={text.stopped}
         description={text.stoppedNote}
       />
     );
   return (
-    <div className="live-app-state" role="status">
+    <div className={styles.state} role="status">
       <EmptyState
-        icon={<LoaderCircle className="live-app-spinner" />}
+        icon={<LoaderCircle className={styles.spinner} />}
         title={text.phase[app.phase ?? "starting"]}
         {...(app.version !== undefined
           ? { description: text.filedVersion(app.version) }
@@ -292,7 +293,7 @@ export function LiveApp({
     const onPointerDown = (event: PointerEvent) => {
       if (
         event.target instanceof Element &&
-        event.target.closest(".pane-bar") !== null &&
+        event.target.closest('[data-slot="pane-bar"]') !== null &&
         triggerRef.current?.contains(event.target) !== true
       )
         setChecklistOpen(false);
@@ -406,7 +407,7 @@ export function LiveApp({
       <Checklist markdown={markdown} onClose={popover.close} />
     ) : null;
   return (
-    <div className="live-app">
+    <div className={styles.app} data-slot="live-app">
       {url !== undefined && !held ? (
         <DevicePreview
           src={{ url, title: text.frameTitle }}
@@ -415,6 +416,7 @@ export function LiveApp({
           trailing={[own, checklistGroup, files, ...trailing]}
           popover={checklistPopover}
           popoverRef={popover.rootRef}
+          fill
         />
       ) : (
         <>
@@ -556,23 +558,23 @@ function ChecklistRow({ item }: { item: ChecklistItem }) {
   return (
     <li data-done={item.done ? "" : undefined}>
       {evidence === "" ? (
-        <div className="live-app-checklist-row">
+        <div className={styles.checklistRow}>
           {mark}
           <span>{item.title}</span>
         </div>
       ) : (
         <details>
-          <summary className="live-app-checklist-row">
+          <summary className={styles.checklistRow}>
             {mark}
             <span>{item.title}</span>
           </summary>
-          <div className="live-app-checklist-evidence">
-            <Markdown source={evidence} />
+          <div className={styles.checklistEvidence}>
+            <Markdown source={evidence} document />
           </div>
         </details>
       )}
       {item.children.length === 0 ? null : (
-        <ul className="live-app-checklist-children">
+        <ul className={styles.checklistChildren}>
           {item.children.map((child, index) => (
             <ChecklistRow key={index} item={child} />
           ))}
@@ -599,14 +601,14 @@ function Checklist({
   return (
     <aside
       ref={panel}
-      className="live-app-checklist"
+      className={styles.checklist}
       aria-label={text.checklistTitle}
       role="dialog"
       tabIndex={-1}
     >
-      <header className="live-app-checklist-header">
+      <header className={styles.checklistHeader}>
         <h3>{text.checklistTitle}</h3>
-        <span className="live-app-checklist-progress" role="status">
+        <span className={styles.checklistProgress} role="status">
           {text.checklistProgress(done, total)}
         </span>
         <Button
@@ -621,12 +623,12 @@ function Checklist({
         </Button>
       </header>
       {total === 0 ? (
-        <Markdown source={markdown} />
+        <Markdown source={markdown} document />
       ) : (
-        <ul className="live-app-checklist-items">
+        <ul className={styles.checklistItems}>
           {entries.map((entry, index) =>
             "note" in entry ? (
-              <li key={index} className="live-app-checklist-note">
+              <li key={index} className={styles.checklistNote}>
                 <Markdown source={entry.note} />
               </li>
             ) : (
diff --git a/apps/web/src/pages/workspace/mockup-tweaks.module.css b/apps/web/src/pages/workspace/mockup-tweaks.module.css
new file mode 100644
index 00000000..a9302ee3
--- /dev/null
+++ b/apps/web/src/pages/workspace/mockup-tweaks.module.css
@@ -0,0 +1,81 @@
+/* A small panel over the mockup, above the floating bar. */
+.panel {
+  position: absolute;
+  bottom: calc(var(--space-3) + 3rem);
+  left: 50%;
+  z-index: 3;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  width: min(18rem, calc(100% - 2rem));
+  padding: var(--space-3);
+  border: 1px solid var(--wb-border);
+  border-radius: var(--radius-panel);
+  background: var(--wb-background);
+  box-shadow: var(--wb-shadow);
+  color: var(--wb-foreground);
+  font-size: 0.8125rem;
+  transform: translateX(-50%);
+}
+
+.row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-2);
+  color: var(--wb-muted-foreground);
+}
+
+.row output {
+  font-variant-numeric: tabular-nums;
+}
+
+.row select {
+  max-width: 10rem;
+}
+
+.color {
+  width: 2rem;
+  height: 1.5rem;
+  padding: 0;
+  border: 1px solid var(--wb-border);
+  border-radius: 4px;
+  background: none;
+}
+
+.swatches {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-1);
+}
+
+.swatch {
+  width: 1.5rem;
+  height: 1.5rem;
+  padding: 0;
+  border: 1px solid var(--wb-border);
+  border-radius: 999px;
+  cursor: pointer;
+}
+
+.swatch[aria-pressed="true"] {
+  outline: 2px solid var(--wb-foreground);
+  outline-offset: 2px;
+}
+
+.swatch:focus-visible,
+.range:focus-visible {
+  outline: 2px solid var(--wb-ring);
+  outline-offset: 2px;
+}
+
+.range {
+  width: 100%;
+  accent-color: var(--wb-foreground);
+}
+
+.actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--space-2);
+}
diff --git a/apps/web/src/pages/workspace/mockup-tweaks.tsx b/apps/web/src/pages/workspace/mockup-tweaks.tsx
index 2758deef..f54b35d1 100644
--- a/apps/web/src/pages/workspace/mockup-tweaks.tsx
+++ b/apps/web/src/pages/workspace/mockup-tweaks.tsx
@@ -1,16 +1,24 @@
 /**
  * Live look tweaks over a designer's mockup: the frame is cross-origin, so the values go in as a
  * stylesheet message the page applies over its own tokens. Nothing changes in the design until
- * the person saves them: the hub writes them into the design's styles.css and tells the
+ * the person saves them: the hub writes them into the design's own stylesheet and tells the
  * coordinator and the designer. A save is never an approval.
  */
 import { Button, Select } from "@corbits/react-ui";
-import { createContext, useContext, useEffect, useRef, useState } from "react";
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+  type ReactNode,
+} from "react";
 import { toast } from "sonner";
 import { wording } from "../../config.ts";
 import { saveDesignTweaks } from "../../api/artifacts.ts";
 import type { DesignFiles } from "./design-preview.tsx";
 import { humanFault } from "./human-fault.ts";
+import styles from "./mockup-tweaks.module.css";
 
 export type LookTweaks = {
   primary?: string;
@@ -125,6 +133,30 @@ export function tweakCss(tweaks: LookTweaks): string {
   return rules.join("");
 }
 
+/** A label and its value side by side. */
+function TweakRow({
+  as: Tag = "label",
+  children,
+}: {
+  as?: "label" | "span" | "li";
+  children: ReactNode;
+}) {
+  return (
+    <Tag className={styles.row} data-slot="tweak-row">
+      {children}
+    </Tag>
+  );
+}
+
+/** A row of buttons pushed to the end. */
+function TweakActions({ children }: { children: ReactNode }) {
+  return (
+    <div className={styles.actions} data-slot="tweak-actions">
+      {children}
+    </div>
+  );
+}
+
 function Swatches({
   label,
   colors,
@@ -137,12 +169,12 @@ function Swatches({
   onPick: (color: string) => void;
 }) {
   return (
-    <div className="tweak-swatches" role="group" aria-label={label}>
+    <div className={styles.swatches} role="group" aria-label={label}>
       {colors.map((color) => (
         <button
           key={color}
           type="button"
-          className="tweak-swatch"
+          className={styles.swatch}
           style={{ background: color }}
           aria-label={color}
           aria-pressed={value?.toLowerCase() === color}
@@ -167,7 +199,7 @@ export function TweakPanel({
   const panel = useRef<HTMLDivElement>(null);
   const target = useContext(DesignTarget);
   const [saving, setSaving] = useState(false);
-  // The live tweaks stay applied after a save: they now match the design's own styles.css.
+  // The live tweaks stay applied after a save: they now match the design's own stylesheet.
   const save = async () => {
     if (target === null) return;
     setSaving(true);
@@ -203,41 +235,42 @@ export function TweakPanel({
   return (
     <div
       ref={panel}
-      className="tweak-panel"
+      className={styles.panel}
+      data-slot="tweak-panel"
       role="dialog"
       aria-label={wording.tweak.panel}
     >
-      <label className="tweak-row">
+      <TweakRow>
         <span>{wording.tweak.primary}</span>
         <input
           type="color"
-          className="tweak-color"
+          className={styles.color}
           value={primary}
           onChange={(event) =>
             onChange({ ...tweaks, primary: event.target.value })
           }
         />
-      </label>
+      </TweakRow>
       <Swatches
         label={wording.tweak.primary}
         colors={PRIMARY_SWATCHES}
         value={tweaks.primary ?? look.primary}
         onPick={(color) => onChange({ ...tweaks, primary: color })}
       />
-      <span className="tweak-row">{wording.tweak.background}</span>
+      <TweakRow as="span">{wording.tweak.background}</TweakRow>
       <Swatches
         label={wording.tweak.background}
         colors={BACKGROUND_SWATCHES}
         value={background}
         onPick={(color) => onChange({ ...tweaks, background: color })}
       />
-      <label className="tweak-row">
+      <TweakRow>
         <span>{wording.tweak.radius}</span>
         <output>{`${String(radius)}rem`}</output>
-      </label>
+      </TweakRow>
       <input
         type="range"
-        className="tweak-range"
+        className={styles.range}
         aria-label={wording.tweak.radius}
         min={0}
         max={RADIUS_MAX_REM}
@@ -247,7 +280,7 @@ export function TweakPanel({
           onChange({ ...tweaks, radius: Number(event.target.value) })
         }
       />
-      <label className="tweak-row">
+      <TweakRow>
         <span>{wording.tweak.font}</span>
         <Select
           value={fontKey}
@@ -264,8 +297,8 @@ export function TweakPanel({
             </option>
           ))}
         </Select>
-      </label>
-      <div className="tweak-actions">
+      </TweakRow>
+      <TweakActions>
         <Button
           type="button"
           variant="ghost"
@@ -285,7 +318,7 @@ export function TweakPanel({
             {wording.tweak.save}
           </Button>
         )}
-      </div>
+      </TweakActions>
     </div>
   );
 }
diff --git a/apps/web/src/pages/workspace/next-step.module.css b/apps/web/src/pages/workspace/next-step.module.css
new file mode 100644
index 00000000..46d949e1
--- /dev/null
+++ b/apps/web/src/pages/workspace/next-step.module.css
@@ -0,0 +1,24 @@
+.line {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  gap: var(--space-2);
+  min-height: 2.75rem;
+  padding: var(--space-1) var(--space-4);
+  border-bottom: 1px solid var(--wb-border);
+  background: var(--wb-background);
+  font-size: 0.8125rem;
+}
+
+.text {
+  flex: 1;
+  min-width: 0;
+  margin: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.now {
+  color: var(--wb-muted-foreground);
+}
diff --git a/apps/web/src/pages/workspace/next-step.tsx b/apps/web/src/pages/workspace/next-step.tsx
index 7a2d93e9..74315a59 100644
--- a/apps/web/src/pages/workspace/next-step.tsx
+++ b/apps/web/src/pages/workspace/next-step.tsx
@@ -13,6 +13,7 @@ import { productClient } from "../../api/transport.ts";
 import { workspaceTenantId } from "../../api/auth.ts";
 import { keys } from "../../queries/keys.ts";
 import { wording } from "../../config.ts";
+import styles from "./next-step.module.css";
 
 const POLL_MS = 5_000;
 // Mirrors the preference's id in apps/hub/src/config/preferences.ts.
@@ -80,15 +81,15 @@ function Line({
   const run = action === undefined ? undefined : actions[action];
   const busy = status.working.some((item) => item.state === "working");
   return (
-    <div className="next-step-line" role="status">
+    <div className={styles.line} role="status">
       <StatusDot
         label=""
         size="xs"
         live={busy}
         tone={busy ? "emphasis" : "neutral"}
       />
-      <p className="next-step-text" title={`${status.now} ${status.next.text}`}>
-        <span className="next-step-now">{status.now}</span>{" "}
+      <p className={styles.text} title={`${status.now} ${status.next.text}`}>
+        <span className={styles.now}>{status.now}</span>{" "}
         <strong>{status.next.text}</strong>
       </p>
       {action === undefined || run === undefined ? null : (
diff --git a/apps/web/src/pages/workspace/pane-bar.module.css b/apps/web/src/pages/workspace/pane-bar.module.css
new file mode 100644
index 00000000..f86b030f
--- /dev/null
+++ b/apps/web/src/pages/workspace/pane-bar.module.css
@@ -0,0 +1,128 @@
+.bar {
+  position: sticky;
+  bottom: var(--space-3);
+  z-index: 2;
+  display: flex;
+  align-self: center;
+  align-items: center;
+  gap: 2px;
+  max-width: calc(100% - 1rem);
+  margin-top: auto;
+  padding: 3px;
+  border: 1px solid var(--wb-border);
+  border-radius: 999px;
+  background: var(--wb-background);
+}
+
+.bar[data-floating],
+.handle {
+  position: absolute;
+  bottom: var(--space-3);
+  left: 50%;
+  margin: 0;
+  transform: translateX(-50%);
+}
+
+/* One class, not two: the app-wide disabled button colour has to win over the muted one here,
+   while hover and the pressed state still win over it. */
+.action {
+  border-radius: 999px;
+  color: var(--wb-muted-foreground);
+  font-variant-numeric: tabular-nums;
+}
+
+.action:hover,
+.action[aria-pressed="true"] {
+  color: var(--wb-foreground);
+}
+
+.rule {
+  flex-shrink: 0;
+  width: 1px;
+  height: 1.25rem;
+  margin-inline: 2px;
+  background: var(--wb-border);
+}
+
+.tip {
+  max-width: 18rem;
+  color: var(--wb-foreground);
+  font-size: 0.8125rem;
+  font-weight: 400;
+  line-height: 1.45;
+  text-transform: none;
+  letter-spacing: normal;
+}
+
+.note {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  padding: 0 var(--space-2);
+  color: var(--wb-muted-foreground);
+  font-size: 0.75rem;
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+/* The only part of the bar that gives way, so a long strip scrolls inside a narrow pane. The
+   padding keeps a focused chip's ring inside the scroll box, which would clip it. */
+.row {
+  position: relative;
+  display: flex;
+  flex: 0 1 auto;
+  gap: 2px;
+  min-width: 0;
+  margin-block: -4px;
+  padding: 4px;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+
+.row > * {
+  flex-shrink: 0;
+}
+
+/* The folded bar: a small tab at the page's foot that brings the bar back. */
+.handle {
+  z-index: 2;
+  width: 2.5rem;
+  height: 1.25rem;
+  border: 1px solid var(--wb-border);
+  border-radius: 999px;
+  background: var(--wb-background);
+  color: var(--wb-muted-foreground);
+  opacity: 0.8;
+}
+
+.handle:hover {
+  opacity: 1;
+}
+
+/* A floating bar with a popover: the anchor carries the bar's placement, so the popover sits on
+   whatever the bar is (the pill, a wrapped pill, or the folded handle) and a press on either is
+   inside it. It spans the page so a tall popover shrinks to fit rather than leave the pane; only
+   its own children take presses. */
+.anchor {
+  position: absolute;
+  inset: var(--space-3) 0;
+  z-index: 3;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--space-2);
+  pointer-events: none;
+}
+
+.anchor > * {
+  pointer-events: auto;
+}
+
+.anchor > .bar[data-floating],
+.anchor > .handle {
+  position: static;
+  flex-shrink: 0;
+  margin: 0;
+  transform: none;
+}
diff --git a/apps/web/src/pages/workspace/pane-bar.stories.tsx b/apps/web/src/pages/workspace/pane-bar.stories.tsx
new file mode 100644
index 00000000..2b65f266
--- /dev/null
+++ b/apps/web/src/pages/workspace/pane-bar.stories.tsx
@@ -0,0 +1,61 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Copy, Download, Search, Share2 } from "lucide-react";
+import { fn } from "storybook/test";
+import { PaneBar, type PaneBarGroup } from "./pane-bar.tsx";
+
+const GROUPS: readonly PaneBarGroup[] = [
+  [
+    { id: "version", label: "Versions", text: "v3", onSelect: fn() },
+    { id: "compare", label: "Compare", onSelect: fn() },
+  ],
+  [
+    { id: "search", label: "Search", icon: <Search />, onSelect: fn() },
+    { id: "copy", label: "Copy", icon: <Copy />, onSelect: fn() },
+    { id: "download", label: "Download", icon: <Download />, onSelect: fn() },
+    { id: "share", label: "Share", icon: <Share2 />, disabled: true },
+  ],
+];
+
+const meta = {
+  title: "Components/Workspace/PaneBar",
+  component: PaneBar,
+  args: { label: "Document actions", groups: GROUPS },
+} satisfies Meta<typeof PaneBar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Docked: Story = {};
+
+/** Floats over the foot of a page that fills the pane and folds to a handle. */
+export const Floating: Story = {
+  args: { floating: true },
+  decorators: [
+    (Story) => (
+      <div data-slot="panel-pane" style={{ position: "relative", height: 320 }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export const WithScreens: Story = {
+  args: {
+    groups: [
+      [
+        {
+          id: "screens",
+          label: "Screens",
+          row: ["Home", "Orders", "Order", "Settings"].map((name, index) => ({
+            id: name,
+            label: name,
+            text: name,
+            active: index === 1,
+            onSelect: fn(),
+          })),
+        },
+      ],
+      ...GROUPS,
+    ],
+  },
+};
diff --git a/apps/web/src/pages/workspace/pane-bar.tsx b/apps/web/src/pages/workspace/pane-bar.tsx
index 2ce1b26a..99bec307 100644
--- a/apps/web/src/pages/workspace/pane-bar.tsx
+++ b/apps/web/src/pages/workspace/pane-bar.tsx
@@ -4,7 +4,12 @@
  * the same place and look the same.
  */
 import { Button } from "@corbits/react-ui";
-import { Menu, MenuContent, MenuTrigger } from "@corbits/react-ui/ui/menu";
+import {
+  Menu,
+  MenuContent,
+  MenuLabel,
+  MenuTrigger,
+} from "@corbits/react-ui/ui/menu";
 import { ChevronDown, ChevronUp } from "lucide-react";
 import {
   Fragment,
@@ -19,6 +24,7 @@ import {
   useStoredPreference,
   writeStoredPreference,
 } from "../../stored-preference.ts";
+import styles from "./pane-bar.module.css";
 
 export type PaneBarAction = {
   id: string;
@@ -64,7 +70,7 @@ function ActionRow({
       strip.scrollLeft = chip.offsetLeft + chip.offsetWidth - strip.clientWidth;
   }, [pressed, actions.length]);
   return (
-    <div ref={row} className="pane-bar-row" role="group" aria-label={label}>
+    <div ref={row} className={styles.row} role="group" aria-label={label}>
       {actions.map((item) => (
         <ActionButton key={item.id} action={item} />
       ))}
@@ -79,7 +85,7 @@ function ActionButton({ action }: { action: PaneBarAction }) {
   if (action.note)
     return (
       <span
-        className="pane-bar-note"
+        className={styles.note}
         role="status"
         aria-label={action.label}
         title={action.label}
@@ -94,7 +100,7 @@ function ActionButton({ action }: { action: PaneBarAction }) {
       type="button"
       variant={action.active ? "secondary" : "ghost"}
       size={words === null ? "icon" : "sm"}
-      className="pane-bar-action"
+      className={styles.action}
       aria-label={action.label}
       title={action.label}
       disabled={action.disabled}
@@ -121,6 +127,15 @@ function ActionButton({ action }: { action: PaneBarAction }) {
   );
 }
 
+/** A short tip or note a bar action's menu shows as words rather than items. */
+export function PaneBarTip({ children }: { children: ReactNode }) {
+  return (
+    <MenuLabel className={styles.tip} data-slot="pane-bar-tip">
+      {children}
+    </MenuLabel>
+  );
+}
+
 // One choice for every floating bar, kept per viewer: hidden to see the whole page under it.
 const FLOATING_KEY = "builder-pane-bar";
 const parseFloating = (raw: string) =>
@@ -171,7 +186,7 @@ export function PaneBar({
         type="button"
         variant="ghost"
         size="icon"
-        className="pane-bar-handle"
+        className={styles.handle}
         aria-label={wording.paneBar.show}
         title={wording.paneBar.show}
         onClick={() => writeStoredPreference(FLOATING_KEY, "shown")}
@@ -181,14 +196,16 @@ export function PaneBar({
     ) : (
       <div
         ref={floating ? setFloatingBar : undefined}
-        className={floating ? "pane-bar pane-bar-floating" : "pane-bar"}
+        className={styles.bar}
+        data-slot="pane-bar"
+        data-floating={floating ? "" : undefined}
         role="toolbar"
         aria-label={label}
       >
         {shown.map((group, index) => (
           <Fragment key={group.map((action) => action.id).join(" ")}>
             {index > 0 ? (
-              <span className="pane-bar-rule" aria-hidden="true" />
+              <span className={styles.rule} aria-hidden="true" />
             ) : null}
             {group.map((action) => (
               <ActionButton key={action.id} action={action} />
@@ -197,7 +214,7 @@ export function PaneBar({
         ))}
         {floating ? (
           <>
-            <span className="pane-bar-rule" aria-hidden="true" />
+            <span className={styles.rule} aria-hidden="true" />
             <ActionButton
               action={{
                 id: "fold",
@@ -212,7 +229,7 @@ export function PaneBar({
     );
   if (popover === undefined) return bar;
   return (
-    <div ref={popoverRef} className="pane-bar-anchor">
+    <div ref={popoverRef} className={styles.anchor}>
       {popover}
       {bar}
     </div>
diff --git a/apps/web/src/pages/workspace/pane-classes.ts b/apps/web/src/pages/workspace/pane-classes.ts
deleted file mode 100644
index c3278d5c..00000000
--- a/apps/web/src/pages/workspace/pane-classes.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-/**
- * Layout class names matching mockups/project.html chrome.
- *
- * Each mock name sits next to the existing layout class so styles.css still
- * applies; the mock-named sheet is workspace-layout.css.
- */
-export const PANES_CLASS = "panes document-layout";
-export const CONV_CLASS = "conv stage-thread";
-export const CONV_SCROLL_CLASS = "conv-scroll thread-turns";
-export const COMPOSER_BOX_CLASS = "composer-box";
diff --git a/apps/web/src/pages/workspace/passage-note.module.css b/apps/web/src/pages/workspace/passage-note.module.css
new file mode 100644
index 00000000..6fa2cdb6
--- /dev/null
+++ b/apps/web/src/pages/workspace/passage-note.module.css
@@ -0,0 +1,20 @@
+.notes {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--space-3);
+  width: 100%;
+  min-width: 0;
+}
+
+.notes[data-fill] {
+  flex: 1;
+  align-items: stretch;
+  gap: 0;
+  min-height: 0;
+}
+
+.offer {
+  position: fixed;
+  z-index: 60;
+}
diff --git a/apps/web/src/pages/workspace/passage-note.stories.tsx b/apps/web/src/pages/workspace/passage-note.stories.tsx
new file mode 100644
index 00000000..b10e505e
--- /dev/null
+++ b/apps/web/src/pages/workspace/passage-note.stories.tsx
@@ -0,0 +1,36 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
+import { Markdown } from "../../markdown.tsx";
+import { PassageQuotes } from "./passage-note.tsx";
+
+const meta = {
+  title: "Components/Workspace/PassageQuotes",
+  component: PassageQuotes,
+  args: {
+    title: "Problem brief",
+    version: 2,
+    onAdd: fn(),
+    children: (
+      <Markdown
+        source={
+          "## Problem\n\nBakeries lose orders because they take them by phone.\n\nClick a passage to quote it into the message."
+        }
+      />
+    ),
+  },
+} satisfies Meta<typeof PassageQuotes>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** Clicking a passage offers to quote it. */
+export const Quotable: Story = {};
+
+/** Without `onAdd` the passages are plain reading. */
+export const ReadOnly: Story = {
+  render: ({ title, version, children }) => (
+    <PassageQuotes title={title} version={version}>
+      {children}
+    </PassageQuotes>
+  ),
+};
diff --git a/apps/web/src/pages/workspace/passage-note.tsx b/apps/web/src/pages/workspace/passage-note.tsx
index 0e51a344..697bbe8c 100644
--- a/apps/web/src/pages/workspace/passage-note.tsx
+++ b/apps/web/src/pages/workspace/passage-note.tsx
@@ -7,6 +7,7 @@ import { MessageSquareQuote } from "lucide-react";
 import { createContext, useRef, useState, type ReactNode } from "react";
 import { createPortal } from "react-dom";
 import { wording } from "../../config.ts";
+import styles from "./passage-note.module.css";
 
 export type PassageQuote = {
   quote: string;
@@ -50,11 +51,14 @@ export function PassageQuotes({
   title,
   version,
   onAdd,
+  fill = false,
   children,
 }: {
   title: string;
   version: number;
   onAdd?: (passage: PassageQuote) => void;
+  /** Its page fills the container edge to edge, as a pane's whole page. */
+  fill?: boolean;
   children: ReactNode;
 }) {
   const rootRef = useRef<HTMLDivElement>(null);
@@ -95,7 +99,8 @@ export function PassageQuotes({
     offer === null ? null : (
       <div
         ref={offerRef}
-        className="passage-offer"
+        className={styles.offer}
+        data-slot="passage-offer"
         style={{ top: offer.top, left: offer.left }}
       >
         <Button size="sm" onClick={add}>
@@ -109,7 +114,9 @@ export function PassageQuotes({
     <QuoteOffer.Provider value={open}>
       <div
         ref={rootRef}
-        className="passage-notes"
+        className={styles.notes}
+        data-slot="passage-notes"
+        data-fill={fill ? "" : undefined}
         onMouseUp={() => {
           if (rootRef.current === null) return;
           const selection = window.getSelection();
diff --git a/apps/web/src/pages/workspace/persistent-workspace.css b/apps/web/src/pages/workspace/persistent-workspace.css
deleted file mode 100644
index d17b64e6..00000000
--- a/apps/web/src/pages/workspace/persistent-workspace.css
+++ /dev/null
@@ -1,1349 +0,0 @@
-/* Persistent output workspace. Reuse the shell's semantic palette and spacing. */
-.room.workspace-room {
-  flex-direction: column;
-  overflow: hidden;
-}
-
-/* The library Panel resizes the document from its start edge, so the row is
-   the flex row it expects: the conversation takes what the panel leaves. */
-.workspace-room > .panes.workspace-split {
-  display: flex;
-  width: 100%;
-  max-width: none;
-  margin: 0;
-  overflow: hidden;
-}
-
-/* Before the first document: one centred column at a reading measure. */
-.workspace-room > .panes.workspace-split.chat-first {
-  display: flex;
-  flex-direction: column;
-  max-width: 52rem;
-  margin: 0 auto;
-}
-
-.workspace-split.chat-first > .conv {
-  flex: 1;
-  border-right: 0;
-}
-
-.workspace-split > .conv {
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  border-right: 0;
-}
-
-/* The split's proportions before the person drags it. */
-.workspace-split > .workspace-artifacts {
-  width: var(--resizable-width, 58%);
-  background: var(--wb-background);
-}
-
-/* An underline strip on the pane's own surface: one hairline under the row,
-   and the open document marked by ink beneath its title, not a raised box. */
-.workspace-artifacts [data-slot="panel-header"] {
-  display: flex;
-  align-items: flex-end;
-  min-height: 0;
-  padding: 0 var(--space-4);
-  border-bottom: 1px solid color-mix(in srgb, var(--wb-border) 70%, transparent);
-  background: transparent;
-}
-
-.workspace-artifacts [data-slot="panel-tabs"] {
-  flex: 1;
-  min-width: 0;
-  gap: var(--space-1);
-  border: 0;
-  --tab-fade: 2rem;
-}
-
-/* A long row scrolls rather than squeezing its tabs, and fades at an end that hides more. */
-.workspace-artifacts [data-slot="panel-tabs"][data-more-start] {
-  mask-image: linear-gradient(to right, transparent, #000 var(--tab-fade));
-}
-
-.workspace-artifacts [data-slot="panel-tabs"][data-more-end] {
-  mask-image: linear-gradient(to left, transparent, #000 var(--tab-fade));
-}
-
-.workspace-artifacts [data-slot="panel-tabs"][data-more-start][data-more-end] {
-  mask-image: linear-gradient(
-    to right,
-    transparent,
-    #000 var(--tab-fade),
-    #000 calc(100% - var(--tab-fade)),
-    transparent
-  );
-}
-
-/* Tabs keep their size: the open or focused one shows its full name, the rest a shortened one. */
-.workspace-artifacts [data-slot="panel-tab"] {
-  flex: none;
-  height: 40px;
-  min-width: 0;
-  max-width: 9rem;
-  border: 0;
-  border-radius: 0;
-  background: transparent;
-  color: var(--wb-muted-foreground);
-  box-shadow: inset 0 -2px 0 transparent;
-  transition:
-    color 120ms ease,
-    box-shadow 150ms ease-out;
-}
-
-.workspace-artifacts [data-slot="panel-tab"]:hover {
-  background: transparent;
-  color: var(--wb-foreground);
-}
-
-.workspace-artifacts [data-slot="panel-tab"][data-state="active"],
-.workspace-artifacts [data-slot="panel-tab"]:focus-within {
-  max-width: 20rem;
-}
-
-.workspace-artifacts [data-slot="panel-tab"][data-state="active"] {
-  border: 0;
-  background: transparent;
-  color: var(--wb-foreground);
-  box-shadow: inset 0 -2px 0 var(--wb-foreground);
-}
-
-.workspace-artifacts [role="tab"] {
-  gap: var(--space-2);
-  padding: 0 var(--space-2);
-  border-radius: var(--radius-md) var(--radius-md) 0 0;
-  font-size: 0.8125rem;
-  font-weight: 600;
-  letter-spacing: -0.005em;
-}
-
-.workspace-artifacts [role="tab"]:focus-visible {
-  outline: 2px solid var(--wb-ring);
-  outline-offset: -2px;
-}
-
-/* Where a document tab's menu opens: the pointer, or the tab's corner from the keyboard. */
-.document-tab-menu-anchor {
-  position: fixed;
-  width: 0;
-  height: 0;
-  pointer-events: none;
-}
-
-/* A tab chosen by pointer shows only its underline. */
-.workspace-artifacts [data-pointer-tabs] [role="tab"]:focus-visible {
-  outline: none;
-}
-
-.workspace-room-skeleton {
-  gap: var(--space-3);
-  padding: var(--space-4);
-}
-
-.workspace-skeleton-pane {
-  min-height: 16rem;
-  height: 100%;
-}
-
-.workspace-room-fault {
-  place-content: center;
-  padding: var(--space-4);
-}
-
-.workspace-loading,
-.workspace-status {
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
-}
-
-.workspace-artifact-empty h2 {
-  margin: 0;
-  font-size: 1rem;
-  font-weight: 600;
-}
-
-.workspace-artifact-content {
-  flex: 1;
-  min-height: 0;
-  overflow: auto;
-  overscroll-behavior: contain;
-  padding: var(--space-3) var(--space-6) var(--space-6);
-  overflow-wrap: anywhere;
-}
-
-/* Each pane is its own scroller, so the padding belongs inside it: padding on the panel sat below
-   the scroller as a band the page never reached. The foot leaves room for the last lines to scroll
-   clear of the floating bar, whose height the bar sets on its pane. */
-.workspace-artifact-content[data-slot="panel-content"] {
-  position: relative;
-  padding: 0;
-}
-
-.workspace-artifact-content
-  > [data-slot="panel-pane"]:not(.workspace-pane-fill) {
-  padding: var(--space-3) var(--space-6)
-    calc(var(--space-6) + var(--pane-bar-height, 0px));
-}
-
-.document-header {
-  display: flex;
-  align-self: stretch;
-  align-items: baseline;
-  gap: var(--space-3);
-  min-width: 0;
-}
-
-.workspace-artifact-title {
-  flex: 1;
-  min-width: 0;
-  margin: 0;
-  font-size: 1.125rem;
-  text-wrap: balance;
-}
-
-.workspace-artifact-content .prose > :where(p, ul, ol, blockquote) {
-  max-width: 75ch;
-  text-wrap: pretty;
-}
-
-.version-menu-item {
-  display: flex;
-  flex: 1;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--space-3);
-}
-
-/* A column per screen, wrapped to the pane and kept inside the viewport by the menu's own room. */
-.screen-menu {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--space-1) var(--space-2);
-  max-height: calc(
-    var(--radix-dropdown-menu-content-available-height, 80dvh) - 0.75rem
-  );
-  overflow-y: auto;
-  overscroll-behavior: contain;
-}
-
-.screen-menu-column {
-  display: flex;
-  flex-direction: column;
-  min-width: 8rem;
-}
-
-.screen-menu-column [data-slot="menu-item"] {
-  padding-block: var(--space-1);
-}
-
-.comparison-chip {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--space-1);
-  margin: 0;
-  padding: 2px 4px 2px 10px;
-  border: 1px solid var(--wb-border);
-  border-radius: 999px;
-  color: var(--wb-muted-foreground);
-  font-size: 0.8125rem;
-}
-
-.comparison-chip button {
-  display: inline-flex;
-  padding: 3px;
-  border: 0;
-  border-radius: 999px;
-  background: transparent;
-  color: inherit;
-  cursor: pointer;
-}
-
-.comparison-chip button:hover {
-  background: var(--wb-muted);
-  color: var(--wb-foreground);
-}
-
-.workspace-artifact-content .gui-frame {
-  width: 100%;
-  min-height: 480px;
-  height: 65dvh;
-}
-
-.workspace-artifact-content .document-raw {
-  max-width: 100%;
-  overflow: auto;
-}
-
-.workspace-artifact-content .document-image {
-  max-width: 100%;
-  height: auto;
-}
-
-.workspace-artifact-content .deliverable-body {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: var(--space-4);
-  min-width: 0;
-}
-
-.workspace-artifact-content .btn {
-  min-height: 44px;
-  align-self: flex-start;
-}
-
-.workspace-artifact-empty {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: var(--space-2);
-  max-width: 42ch;
-  margin: var(--space-2) 0 0;
-  color: var(--wb-muted-foreground);
-}
-
-.stage-conversation > .workspace-fault {
-  padding: var(--space-2) var(--space-4);
-}
-
-/* Pinned above the messages: who works now and the person's next step, on one line. */
-.next-step-line {
-  display: flex;
-  flex-shrink: 0;
-  align-items: center;
-  gap: var(--space-2);
-  min-height: 2.75rem;
-  padding: var(--space-1) var(--space-4);
-  border-bottom: 1px solid var(--wb-border);
-  background: var(--wb-background);
-  font-size: 0.8125rem;
-}
-
-.next-step-text {
-  flex: 1;
-  min-width: 0;
-  margin: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.next-step-now {
-  color: var(--wb-muted-foreground);
-}
-
-.workspace-artifact-empty h3 {
-  color: var(--wb-foreground);
-}
-
-.workspace-artifact-empty p,
-.workspace-status,
-.workspace-fault {
-  margin: 0;
-  font-size: 0.8125rem;
-  line-height: 1.6;
-}
-
-.workspace-fault {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: var(--space-2);
-  color: var(--wb-foreground);
-}
-
-.workspace-fault .inline-note {
-  color: var(--wb-foreground);
-}
-
-.composer-notes > .workspace-fault {
-  padding: 0;
-}
-
-.workspace-loading,
-.workspace-status {
-  min-height: 32px;
-  padding: var(--space-2) var(--space-4);
-  color: var(--wb-muted-foreground);
-  font-size: 0.8125rem;
-}
-
-.workspace-artifact-content .workspace-loading,
-.workspace-artifact-content .workspace-status,
-.workspace-artifact-content .workspace-fault {
-  padding-inline: 0;
-}
-
-.canvas-body.is-fill > .project-load-failure {
-  place-content: center;
-}
-
-.workspace-mobile-switch {
-  display: none;
-}
-
-@media (max-width: 760px) {
-  .workspace-mobile-switch {
-    display: flex;
-    flex-shrink: 0;
-    gap: var(--space-2);
-    padding: var(--space-2) var(--space-4);
-    border-bottom: 1px solid var(--wb-border);
-  }
-
-  .workspace-mobile-switch button {
-    flex: 1;
-    min-height: 44px;
-    padding: var(--space-2);
-    border-radius: var(--radius-md);
-    color: var(--wb-muted-foreground);
-    font: inherit;
-  }
-
-  .workspace-mobile-switch button[aria-pressed="true"] {
-    background: var(--wb-muted);
-    color: var(--wb-foreground);
-    font-weight: 600;
-  }
-
-  .workspace-mobile-switch button:focus-visible {
-    outline: 2px solid var(--wb-ring);
-    outline-offset: 2px;
-  }
-
-  /* One pane at a time, chosen by the switch: the document is not resized. */
-  .workspace-split > .workspace-artifacts {
-    flex: 1;
-    width: auto;
-    min-width: 0;
-    max-width: none;
-    border-inline-start: 0;
-  }
-
-  .workspace-artifacts [data-slot="panel-handle"] {
-    display: none;
-  }
-
-  .workspace-room[data-mobile-pane="conversation"] .workspace-artifacts,
-  .workspace-room[data-mobile-pane="artifacts"] .workspace-split > .conv {
-    display: none;
-  }
-
-  .workspace-artifact-content {
-    padding: var(--space-3) var(--space-4) var(--space-4);
-  }
-
-  .workspace-artifact-content
-    > [data-slot="panel-pane"]:not(.workspace-pane-fill) {
-    padding-inline: var(--space-4);
-  }
-}
-
-.comparison-chip button:focus-visible,
-.workspace-comparison-modes button:focus-visible {
-  outline: 2px solid var(--wb-ring);
-  outline-offset: 2px;
-}
-
-.device-preview {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  width: 100%;
-  margin: 0;
-}
-
-.pane-bar.pane-bar-floating,
-.pane-bar-handle {
-  position: absolute;
-  bottom: var(--space-3);
-  left: 50%;
-  margin: 0;
-  transform: translateX(-50%);
-}
-
-/* Look tweaks: a small panel over the mockup, above the floating bar. */
-.tweak-panel {
-  position: absolute;
-  bottom: calc(var(--space-3) + 3rem);
-  left: 50%;
-  z-index: 3;
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-2);
-  width: min(18rem, calc(100% - 2rem));
-  padding: var(--space-3);
-  border: 1px solid var(--wb-border);
-  border-radius: var(--radius-panel);
-  background: var(--wb-background);
-  box-shadow: var(--wb-shadow);
-  color: var(--wb-foreground);
-  font-size: 0.8125rem;
-  transform: translateX(-50%);
-}
-
-.tweak-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--space-2);
-  color: var(--wb-muted-foreground);
-}
-
-.tweak-row output {
-  font-variant-numeric: tabular-nums;
-}
-
-.tweak-row select {
-  max-width: 10rem;
-}
-
-.tweak-color {
-  width: 2rem;
-  height: 1.5rem;
-  padding: 0;
-  border: 1px solid var(--wb-border);
-  border-radius: 4px;
-  background: none;
-}
-
-.tweak-swatches {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--space-1);
-}
-
-.tweak-swatch {
-  width: 1.5rem;
-  height: 1.5rem;
-  padding: 0;
-  border: 1px solid var(--wb-border);
-  border-radius: 999px;
-  cursor: pointer;
-}
-
-.tweak-swatch[aria-pressed="true"] {
-  outline: 2px solid var(--wb-foreground);
-  outline-offset: 2px;
-}
-
-.tweak-swatch:focus-visible,
-.tweak-range:focus-visible {
-  outline: 2px solid var(--wb-ring);
-  outline-offset: 2px;
-}
-
-.tweak-range {
-  width: 100%;
-  accent-color: var(--wb-foreground);
-}
-
-.tweak-actions {
-  display: flex;
-  justify-content: flex-end;
-  gap: var(--space-2);
-}
-
-/* The folded bar: a small tab at the page's foot that brings the bar back. */
-.pane-bar-handle {
-  z-index: 2;
-  width: 2.5rem;
-  height: 1.25rem;
-  border: 1px solid var(--wb-border);
-  border-radius: 999px;
-  background: var(--wb-background);
-  color: var(--wb-muted-foreground);
-  opacity: 0.8;
-}
-
-.pane-bar-handle:hover {
-  opacity: 1;
-}
-
-.workspace-comparison-modes {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--space-2);
-}
-
-.device-bezel {
-  width: 100%;
-  border: 1px solid var(--wb-border);
-  border-radius: var(--radius-panel);
-  background: var(--wb-background);
-  overflow: hidden;
-}
-
-.device-preview-phone .device-bezel {
-  width: min(100%, 24rem);
-  margin-inline: auto;
-}
-
-.device-preview-expanded {
-  width: calc(100vw - 2rem);
-  max-width: none;
-  height: calc(100dvh - 2rem);
-  max-height: none;
-}
-
-.device-preview-expanded .device-bezel {
-  display: flex;
-  flex: 1;
-  min-height: 0;
-}
-
-.device-preview-expanded .device-preview-phone {
-  width: min(100%, 24rem);
-  margin-inline: auto;
-}
-
-.device-preview-expanded .gui-frame {
-  flex: 1;
-  width: 100%;
-  height: auto;
-  min-height: 0;
-  border: 0;
-}
-
-.workspace-comparison {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: var(--space-3);
-  width: 100%;
-  min-width: 0;
-}
-
-.passage-notes {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: var(--space-3);
-  width: 100%;
-  min-width: 0;
-}
-
-.passage-offer {
-  position: fixed;
-  z-index: 60;
-}
-
-/* A quiet line before a change to what a specialist builds from, with its two ways on. */
-.workspace-caution {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: var(--space-2) var(--space-3);
-  padding-bottom: var(--space-2);
-  color: var(--wb-muted-foreground);
-  font-size: 0.8125rem;
-}
-
-.workspace-caution p {
-  margin: 0;
-  flex: 1 1 18rem;
-}
-
-.workspace-caution-actions {
-  display: flex;
-  gap: var(--space-1);
-}
-
-.workspace-replies {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--space-2);
-  padding-bottom: var(--space-2);
-}
-
-.live-app-status {
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
-  min-width: 0;
-  animation: agent-activity-in 240ms cubic-bezier(0.2, 0, 0, 1);
-}
-
-.live-app {
-  position: relative;
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  min-width: 0;
-  min-height: 0;
-}
-
-/* A floating bar with a popover: the anchor carries the bar's placement, so the popover sits on
-   whatever the bar is (the pill, a wrapped pill, or the folded handle) and a press on either is
-   inside it. It spans the page so a tall popover shrinks to fit rather than leave the pane; only
-   its own children take presses. */
-.pane-bar-anchor {
-  position: absolute;
-  inset: var(--space-3) 0;
-  z-index: 3;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: flex-end;
-  gap: var(--space-2);
-  pointer-events: none;
-}
-
-.pane-bar-anchor > * {
-  pointer-events: auto;
-}
-
-.pane-bar-anchor > .pane-bar.pane-bar-floating,
-.pane-bar-anchor > .pane-bar-handle {
-  position: static;
-  flex-shrink: 0;
-  margin: 0;
-  transform: none;
-}
-
-/* A popover just above the floating bar, in the bar's border and surface, with the corner the
-   pill's ends have. It grows to its widest row before it grows taller, then scrolls. */
-.live-app-checklist {
-  display: flex;
-  flex-direction: column;
-  width: max-content;
-  min-height: 0;
-  max-width: min(44rem, calc(100% - 2rem));
-  max-height: 28rem;
-  border: 1px solid var(--wb-border);
-  border-radius: 1.25rem;
-  background: var(--wb-background);
-  box-shadow: var(--wb-shadow);
-}
-
-.live-app-checklist:focus-visible {
-  outline: 2px solid var(--wb-ring);
-  outline-offset: 2px;
-}
-
-.live-app-checklist-header {
-  display: flex;
-  flex-shrink: 0;
-  align-items: center;
-  gap: var(--space-2);
-  padding: var(--space-1) var(--space-1) var(--space-1) var(--space-4);
-  border-bottom: 1px solid var(--wb-border);
-}
-
-.live-app-checklist-header h3 {
-  margin: 0;
-  font-size: 0.875rem;
-}
-
-.live-app-checklist-progress {
-  flex: 1;
-  color: var(--wb-muted-foreground);
-  font-size: 0.75rem;
-  white-space: nowrap;
-}
-
-.live-app-checklist-items {
-  margin: 0;
-  padding: var(--space-1) var(--space-2) var(--space-2);
-  overflow: auto;
-  list-style: none;
-  font-size: 0.8125rem;
-}
-
-.live-app-checklist-row {
-  display: flex;
-  align-items: flex-start;
-  gap: var(--space-2);
-  padding: var(--space-1) var(--space-2);
-  border-radius: var(--radius-md);
-  line-height: 1.4;
-}
-
-.live-app-checklist-row > svg {
-  flex-shrink: 0;
-  margin-top: 1px;
-  color: var(--wb-muted-foreground);
-}
-
-.live-app-checklist-items li[data-done] > .live-app-checklist-row > svg,
-.live-app-checklist-items
-  li[data-done]
-  > details
-  > .live-app-checklist-row
-  > svg {
-  color: var(--wb-foreground);
-}
-
-summary.live-app-checklist-row {
-  cursor: pointer;
-  list-style: none;
-}
-
-summary.live-app-checklist-row::-webkit-details-marker {
-  display: none;
-}
-
-summary.live-app-checklist-row:hover {
-  background: var(--wb-muted);
-}
-
-.live-app-checklist-note {
-  padding: var(--space-1) var(--space-2);
-  color: var(--wb-muted-foreground);
-}
-
-.live-app-checklist-note > :first-child > :first-child {
-  margin-top: 0;
-}
-
-.live-app-checklist-note > :first-child > :last-child {
-  margin-bottom: 0;
-}
-
-.live-app-checklist-evidence {
-  margin: 0 0 var(--space-1);
-  padding: 0 var(--space-2) 0 calc(var(--space-2) * 2 + 16px);
-  color: var(--wb-muted-foreground);
-  font-size: 0.75rem;
-  line-height: 1.45;
-}
-
-.live-app-checklist-evidence > :first-child > :first-child {
-  margin-top: 0;
-}
-
-.live-app-checklist-evidence > :first-child > :last-child {
-  margin-bottom: 0;
-}
-
-.live-app-checklist-children {
-  margin: 0;
-  padding: 0 0 0 calc(var(--space-2) + 16px);
-  list-style: none;
-}
-
-/* Every state but the running app is one centred block in the empty pane, scrolling clear of the
-   floating bar when the pane is shorter than it. */
-.live-app-state {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: var(--space-3);
-  width: min(100%, 40rem);
-  margin: auto;
-  padding: var(--space-6) var(--space-6)
-    calc(var(--space-6) + var(--pane-bar-height, 0px));
-  overflow: auto;
-}
-
-.live-app > .concept-sketching {
-  justify-content: safe center;
-  padding-bottom: calc(var(--space-6) + var(--pane-bar-height, 0px));
-  overflow: auto;
-}
-
-.live-app-state .live-app-status {
-  justify-content: center;
-}
-
-.live-app-output {
-  width: 100%;
-}
-
-.live-app-output summary {
-  margin-bottom: var(--space-2);
-  color: var(--wb-muted-foreground);
-  font-size: 0.8125rem;
-  text-align: center;
-  cursor: pointer;
-}
-
-.live-app-spinner {
-  animation: live-app-spin 1s linear infinite;
-}
-
-@keyframes live-app-spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-.live-app-log {
-  width: 100%;
-  max-height: 16rem;
-  margin: 0;
-  overflow: auto;
-  padding: var(--space-3);
-  border-radius: var(--radius-panel);
-  background: var(--wb-muted);
-  font-size: 0.75rem;
-  white-space: pre-wrap;
-}
-
-@keyframes agent-activity-in {
-  from {
-    opacity: 0;
-    transform: translateY(4px);
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .live-app-status,
-  .live-app-spinner {
-    animation: none;
-  }
-}
-
-/* A piece of work's outcome: the document it filed, or why it stopped. */
-.work-unit-result {
-  display: flex;
-  min-width: 0;
-  align-items: center;
-  gap: var(--space-2);
-  margin: 0;
-  font-size: 0.875rem;
-}
-
-.work-unit-result[data-state="failed"] {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  color: var(--wb-destructive);
-}
-
-.work-unit-ready {
-  min-width: 0;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-
-.work-unit-open {
-  flex: none;
-  height: auto;
-  padding: 0;
-}
-
-.work-unit-time {
-  font-variant-numeric: tabular-nums;
-}
-
-.specialist-ended-details summary {
-  display: inline;
-  cursor: pointer;
-}
-
-.specialist-ended-details {
-  overflow-wrap: anywhere;
-}
-
-.pane-bar {
-  position: sticky;
-  bottom: var(--space-3);
-  z-index: 2;
-  display: flex;
-  align-self: center;
-  align-items: center;
-  gap: 2px;
-  max-width: calc(100% - 1rem);
-  margin-top: auto;
-  padding: 3px;
-  border: 1px solid var(--wb-border);
-  border-radius: 999px;
-  background: var(--wb-background);
-}
-
-.pane-bar .pane-bar-action {
-  border-radius: 999px;
-  color: var(--wb-muted-foreground);
-  font-variant-numeric: tabular-nums;
-}
-
-.pane-bar .pane-bar-action:hover,
-.pane-bar .pane-bar-action[aria-pressed="true"] {
-  color: var(--wb-foreground);
-}
-
-.pane-bar-rule {
-  flex-shrink: 0;
-  width: 1px;
-  height: 1.25rem;
-  margin-inline: 2px;
-  background: var(--wb-border);
-}
-
-.pane-bar-tip {
-  max-width: 18rem;
-  color: var(--wb-foreground);
-  font-size: 0.8125rem;
-  font-weight: 400;
-  line-height: 1.45;
-  text-transform: none;
-  letter-spacing: normal;
-}
-
-.pane-bar-note {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--space-1);
-  padding: 0 var(--space-2);
-  color: var(--wb-muted-foreground);
-  font-size: 0.75rem;
-  font-weight: 500;
-  white-space: nowrap;
-}
-
-/* The only part of the bar that gives way, so a long strip scrolls inside a narrow pane. The
-   padding keeps a focused chip's ring inside the scroll box, which would clip it. */
-.pane-bar-row {
-  position: relative;
-  display: flex;
-  flex: 0 1 auto;
-  gap: 2px;
-  min-width: 0;
-  margin-block: -4px;
-  padding: 4px;
-  overflow-x: auto;
-  scrollbar-width: none;
-}
-
-.pane-bar-row > * {
-  flex-shrink: 0;
-}
-
-/* A page that fills its pane edge to edge under the tabs: no padding, card border or fixed
-   height, so the app or mockup is the whole pane and the bar floats over its foot. */
-.workspace-artifact-content:has(> .workspace-pane-fill[data-state="active"]) {
-  overflow: hidden;
-}
-
-.workspace-pane-fill {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-
-.workspace-pane-fill > .deliverable-body,
-.workspace-pane-fill .passage-notes {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  align-items: stretch;
-  gap: 0;
-  min-height: 0;
-}
-
-.workspace-pane-fill > .workspace-loading,
-.workspace-pane-fill > .workspace-fault,
-.workspace-pane-fill > .inline-note {
-  padding: var(--space-3) var(--space-6);
-}
-
-/* Drawn in the concept's own tokens, when it has a theme, until its designer drafts the app. */
-.concept-sketching {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: var(--space-2);
-  min-height: 0;
-  padding: var(--space-6) var(--space-4);
-  font-family: var(--sketch-font, inherit);
-  text-align: center;
-}
-
-.concept-sketch {
-  display: grid;
-  gap: var(--space-2);
-  width: min(22rem, 100%);
-  margin-bottom: var(--space-3);
-  padding: var(--space-4);
-  border: 1px solid
-    color-mix(in srgb, var(--sketch-primary, var(--wb-border)) 35%, transparent);
-  border-radius: var(--sketch-radius, var(--radius-panel));
-  background: var(--sketch-background, var(--wb-background));
-}
-
-.concept-sketch > span,
-.concept-sketch-cards > span {
-  display: block;
-  height: 0.625rem;
-  border-radius: calc(var(--sketch-radius, 0.5rem) / 2);
-  background: color-mix(
-    in srgb,
-    var(--sketch-primary, var(--wb-muted-foreground)) 22%,
-    transparent
-  );
-  animation: concept-sketch-pulse 1.8s ease-in-out infinite;
-}
-
-.concept-sketch > .concept-sketch-bar {
-  height: 1rem;
-  background: color-mix(
-    in srgb,
-    var(--sketch-primary, var(--wb-muted-foreground)) 45%,
-    transparent
-  );
-}
-
-.concept-sketch > .concept-sketch-title {
-  width: 60%;
-  height: 1.25rem;
-  animation-delay: 0.15s;
-}
-
-.concept-sketch > .concept-sketch-line {
-  animation-delay: 0.3s;
-}
-
-.concept-sketch > .concept-sketch-line-short {
-  width: 75%;
-  animation-delay: 0.45s;
-}
-
-.concept-sketch > .concept-sketch-cards {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: var(--space-2);
-  height: auto;
-  background: none;
-  animation: none;
-}
-
-.concept-sketch-cards > span {
-  height: 3.5rem;
-  animation-delay: 0.6s;
-}
-
-.concept-sketching-lead {
-  margin: 0;
-  font-weight: 600;
-}
-
-.live-app-setup-activity {
-  max-width: 32rem;
-  margin: 0;
-  overflow: hidden;
-  font-size: 0.875rem;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.concept-sketching-note {
-  margin: 0;
-  color: var(--wb-muted-foreground);
-  font-size: 0.8125rem;
-}
-
-.concept-sketching-clock {
-  font-variant-numeric: tabular-nums;
-}
-
-.concept-sketching-direction {
-  max-width: 32rem;
-  margin: 0;
-  color: var(--wb-muted-foreground);
-  font-size: 0.8125rem;
-}
-
-.concept-sketching[data-state="still"] .concept-sketch span {
-  animation: none;
-}
-
-@keyframes concept-sketch-pulse {
-  50% {
-    opacity: 0.45;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .concept-sketch span {
-    animation: none;
-  }
-}
-
-.workspace-pane-fill .device-preview {
-  flex: 1;
-  min-height: 0;
-}
-
-.workspace-pane-fill .device-bezel {
-  display: flex;
-  flex: 1;
-  min-height: 0;
-  border: 0;
-  border-radius: 0;
-}
-
-.workspace-pane-fill .device-preview-phone .device-bezel {
-  border-inline: 1px solid var(--wb-border);
-}
-
-.workspace-pane-fill .gui-frame {
-  flex: 1;
-  height: auto;
-  min-height: 0;
-}
-
-.pane-notes {
-  position: absolute;
-  top: var(--space-3);
-  left: 50%;
-  z-index: 2;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: var(--space-1);
-  max-width: calc(100% - 2rem);
-  transform: translateX(-50%);
-}
-
-.pane-notes:empty {
-  display: none;
-}
-
-.pane-notes > .inline-note {
-  margin: 0;
-  padding: 2px var(--space-3);
-  border: 1px solid var(--wb-border);
-  border-radius: 999px;
-  background: var(--wb-background);
-  font-size: 0.75rem;
-}
-
-.design-theme-gallery {
-  flex: 1;
-  min-height: 0;
-  padding: var(--space-4);
-  overflow-y: auto;
-}
-
-.design-theme-lead {
-  margin: 0 0 var(--space-3);
-  color: var(--wb-muted-foreground);
-  font-size: 0.8125rem;
-}
-
-.design-theme-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
-  gap: var(--space-4);
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.design-theme-card {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-1);
-  width: 100%;
-  padding: 0 0 var(--space-3);
-  overflow: hidden;
-  border: 1px solid var(--wb-border);
-  border-radius: var(--radius-md);
-  background: var(--wb-background);
-  color: var(--wb-foreground);
-  font: inherit;
-  text-align: start;
-  cursor: pointer;
-}
-
-.design-theme-card:hover {
-  border-color: var(--wb-muted-foreground);
-}
-
-.design-theme-card:focus-visible {
-  outline: 2px solid var(--wb-ring);
-  outline-offset: 2px;
-}
-
-/* The page renders at four times the card's width, desktop size, and is scaled down to fit. */
-.design-theme-thumb {
-  position: relative;
-  display: block;
-  aspect-ratio: 16 / 10;
-  margin-bottom: var(--space-2);
-  overflow: hidden;
-  border-bottom: 1px solid var(--wb-border);
-  background: var(--wb-muted);
-  pointer-events: none;
-}
-
-.workspace-artifact-content .design-theme-thumb .gui-frame {
-  position: absolute;
-  inset: 0 auto auto 0;
-  width: 400%;
-  height: 400%;
-  min-height: 0;
-  transform: scale(0.25);
-  transform-origin: 0 0;
-}
-
-.design-theme-name {
-  padding: 0 var(--space-3);
-  font-size: 0.875rem;
-  font-weight: 600;
-}
-
-.design-theme-direction {
-  padding: 0 var(--space-3);
-  overflow: hidden;
-  color: var(--wb-muted-foreground);
-  font-size: 0.75rem;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-
-.typed-yes {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: var(--space-1) var(--space-2);
-  margin-top: var(--space-2);
-  color: var(--wb-foreground);
-  font-size: 0.875rem;
-}
-
-.typed-yes-count {
-  font-variant-numeric: tabular-nums;
-}
-
-.typed-yes-bar {
-  flex: 1 1 4rem;
-  height: 2px;
-  border-radius: 1px;
-  background: var(--wb-foreground);
-  transform-origin: left;
-  animation: typed-yes-drain linear forwards;
-}
-
-@keyframes typed-yes-drain {
-  from {
-    transform: scaleX(1);
-  }
-  to {
-    transform: scaleX(0);
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .typed-yes-bar {
-    animation: none;
-    opacity: 0.4;
-  }
-}
-
-/* The conversation map's rail sits over the column's left edge; the turns start clear of it. */
-.room-thread[data-mapped]
-  > [data-slot="conversation-content"]
-  > [data-slot="conversation-column"] {
-  padding-inline-start: 2.5rem;
-}
diff --git a/apps/web/src/pages/workspace/preview-interactions.test.tsx b/apps/web/src/pages/workspace/preview-interactions.test.tsx
index 8bf70992..7e35f4a8 100644
--- a/apps/web/src/pages/workspace/preview-interactions.test.tsx
+++ b/apps/web/src/pages/workspace/preview-interactions.test.tsx
@@ -3,6 +3,7 @@ import { renderToStaticMarkup } from "react-dom/server";
 import { designDraftFiled, firstPage } from "./design-preview.tsx";
 import { predecessorOf } from "./document-versions.ts";
 import { DevicePreview } from "./device-preview.tsx";
+import { GuiFrame } from "./gui-frame.tsx";
 
 describe("document versions", () => {
   test("uses the index when it is present and does not invent a predecessor", () => {
@@ -26,6 +27,42 @@ describe("device preview", () => {
     expect(html).not.toContain("allow-scripts");
   });
 
+  const tag = (html: string, slot: string) =>
+    new RegExp(`<[a-z]+[^>]*data-slot="${slot}"[^>]*>`).exec(html)?.[0] ?? "";
+
+  test("a preview that fills its pane says so on itself and its frame", () => {
+    const html = renderToStaticMarkup(
+      <DevicePreview
+        html="<h1>Actual design</h1>"
+        device="desktop"
+        onDevice={() => {}}
+        fill
+      />,
+    );
+    expect(tag(html, "device-preview")).toContain('data-fill=""');
+    expect(tag(html, "gui-frame")).toContain('data-fill=""');
+    expect(tag(html, "gui-frame")).not.toContain("data-thumbnail");
+  });
+
+  test("a preview in a document keeps its page-high frame", () => {
+    const html = renderToStaticMarkup(
+      <DevicePreview
+        html="<h1>Actual design</h1>"
+        device="desktop"
+        onDevice={() => {}}
+      />,
+    );
+    expect(html).not.toContain("data-fill");
+  });
+
+  test("a thumbnail frame is marked for its scaled-down size", () => {
+    const html = renderToStaticMarkup(
+      <GuiFrame html="<h1>Theme</h1>" thumbnail />,
+    );
+    expect(tag(html, "gui-frame")).toContain('data-thumbnail=""');
+    expect(tag(html, "gui-frame")).not.toContain("data-fill");
+  });
+
   test("splices per-screen files into index.html in navigation order", () => {
     const rendered = firstPage({
       "designs/index.html":
diff --git a/apps/web/src/pages/workspace/print-document.module.css b/apps/web/src/pages/workspace/print-document.module.css
new file mode 100644
index 00000000..5bb4abb5
--- /dev/null
+++ b/apps/web/src/pages/workspace/print-document.module.css
@@ -0,0 +1,46 @@
+/* A document copied out of its pane for printing; it exists only on paper. */
+.sheet {
+  display: none;
+}
+
+@media print {
+  /* The app's viewport-high, scrolling layout is set aside for the sheet,
+     which flows across as many pages as the document needs. */
+  body:has(> .sheet) > :not(.sheet) {
+    display: none !important;
+  }
+
+  /* Paper is light whatever theme the app wears, so a dark theme does not
+     print pale text. */
+  .sheet {
+    display: block;
+    color-scheme: light;
+    background: Canvas;
+    font-size: 11pt;
+    line-height: 1.5;
+  }
+
+  .sheet,
+  .sheet * {
+    color: CanvasText;
+  }
+
+  .status {
+    margin: 1mm 0 0;
+    font-size: 9pt;
+  }
+
+  .sheet :is(h1, h2, h3, h4, h5, h6) {
+    break-after: avoid;
+    break-inside: avoid;
+  }
+
+  .sheet :is(pre, figure, blockquote, tr, li) {
+    break-inside: avoid;
+  }
+
+  .sheet pre {
+    overflow: visible;
+    white-space: pre-wrap;
+  }
+}
diff --git a/apps/web/src/pages/workspace/print-document.ts b/apps/web/src/pages/workspace/print-document.ts
index d3d3f7a6..17ac42c0 100644
--- a/apps/web/src/pages/workspace/print-document.ts
+++ b/apps/web/src/pages/workspace/print-document.ts
@@ -1,6 +1,8 @@
-const SHEET_CLASS = "print-sheet";
+import styles from "./print-document.module.css";
+
 // Controls and selection affordances stay on screen.
-const SCREEN_ONLY = ".pane-bar, .passage-offer, button";
+const SCREEN_ONLY =
+  '[data-slot="pane-bar"], [data-slot="passage-offer"], button';
 
 /**
  * Prints the document a pane shows through the browser's dialog, whose "Save as PDF"
@@ -12,19 +14,19 @@ export function printDocument(
   fileName: string,
   status: string,
 ): void {
-  const body = pane.querySelector(".deliverable-body");
+  const body = pane.querySelector('[data-slot="deliverable-body"]');
   if (body === null) return;
   const copy = body.cloneNode(true) as HTMLElement;
   for (const element of copy.querySelectorAll(SCREEN_ONLY)) element.remove();
   const statusLine = document.createElement("p");
-  statusLine.className = "print-sheet-status";
+  statusLine.className = styles.status;
   statusLine.textContent = status;
-  const header = copy.querySelector(".document-header");
+  const header = copy.querySelector('[data-slot="document-header"]');
   if (header === null) copy.prepend(statusLine);
   else header.append(statusLine);
 
   const sheet = document.createElement("article");
-  sheet.className = SHEET_CLASS;
+  sheet.className = styles.sheet;
   sheet.append(copy);
   const appTitle = document.title;
   // The dialog names the PDF after the page title.
diff --git a/apps/web/src/pages/workspace/questions-card.css b/apps/web/src/pages/workspace/questions-card.module.css
similarity index 72%
rename from apps/web/src/pages/workspace/questions-card.css
rename to apps/web/src/pages/workspace/questions-card.module.css
index 1ac1cdfc..87b016ca 100644
--- a/apps/web/src/pages/workspace/questions-card.css
+++ b/apps/web/src/pages/workspace/questions-card.module.css
@@ -1,25 +1,25 @@
-.questions-card {
+.card {
   max-width: 100%;
   min-width: 0;
 }
 
 /* GateBlock's "Needs you · form" label: the heading and the step tabs say what the card is. */
-.questions-card > p:first-child {
+.card > p:first-child {
   display: none;
 }
 
-.questions-card > h3 {
+.card > h3 {
   margin-top: 0;
 }
 
-.questions-card-steps {
+.steps {
   display: flex;
   flex-wrap: wrap;
   gap: var(--space-1);
   margin-bottom: var(--space-3);
 }
 
-.questions-card-step {
+.step {
   display: inline-flex;
   align-items: center;
   gap: var(--space-1);
@@ -30,28 +30,28 @@
   color: var(--muted-foreground);
 }
 
-.questions-card-step[aria-selected="true"] {
+.step[aria-selected="true"] {
   border-color: var(--primary-emphasis);
   color: var(--foreground);
 }
 
-.questions-card-step:disabled {
+.step:disabled {
   opacity: 0.5;
 }
 
-.questions-card-step-mark {
+.stepMark {
   width: 0.75rem;
   height: 0.75rem;
   color: var(--ok);
 }
 
-.questions-card-prompt {
+.prompt {
   margin: 0;
   font-size: 0.875rem;
   font-weight: 500;
 }
 
-.questions-card-options {
+.options {
   display: flex;
   flex-direction: column;
   gap: 2px;
@@ -59,7 +59,7 @@
   outline: none;
 }
 
-.questions-card-choice {
+.choice {
   display: flex;
   align-items: center;
   gap: var(--space-2);
@@ -70,24 +70,24 @@
   cursor: pointer;
 }
 
-.questions-card-options:focus-visible .questions-card-choice[data-active],
-.questions-card-choice:hover {
+.options:focus-visible .choice[data-active],
+.choice:hover {
   background: color-mix(in oklab, var(--primary-emphasis) 12%, transparent);
 }
 
-.questions-card-choice-mark {
+.choiceMark {
   flex: none;
   width: 1rem;
   height: 1rem;
   color: var(--primary-emphasis);
 }
 
-.questions-card-choice .questions-card-other-input {
+.choice .otherInput {
   flex: 1 1 auto;
   min-width: 0;
 }
 
-.questions-card-answers {
+.answers {
   display: flex;
   flex-direction: column;
   gap: var(--space-2);
@@ -95,28 +95,28 @@
   font-size: 0.875rem;
 }
 
-.questions-card-answers dt {
+.answers dt {
   color: var(--muted-foreground);
 }
 
-.questions-card-answers dd {
+.answers dd {
   margin: 0;
   overflow-wrap: anywhere;
 }
 
-.questions-card-keys {
+.keys {
   margin: var(--space-3) 0 0;
   font-size: 0.6875rem;
   color: var(--muted-foreground);
 }
 
-.questions-card-fields {
+.fields {
   display: flex;
   flex-direction: column;
   gap: var(--space-4);
 }
 
-.questions-card-question {
+.question {
   display: flex;
   flex-direction: column;
   gap: var(--space-2);
@@ -127,31 +127,31 @@
 }
 
 /* Reads as the label IntakeForm gives a single-choice question. */
-.questions-card-question legend {
+.question legend {
   margin-bottom: var(--space-1);
   padding: 0;
   font-size: 0.875rem;
   font-weight: 500;
 }
 
-.questions-card-option {
+.option {
   align-items: center;
 }
 
-.questions-card-other {
+.other {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: var(--space-2);
 }
 
-.questions-card-other .questions-card-other-input {
+.other .otherInput {
   flex: 1 1 12rem;
   min-width: 0;
 }
 
 /* The open card's frame, quiet: done, not waiting on anyone. */
-.questions-card-settled {
+.settled {
   max-width: 100%;
   min-width: 0;
   padding: 0.75rem 0.875rem;
@@ -159,7 +159,7 @@
   border-radius: var(--radius-lg, 0.5rem);
 }
 
-.questions-card-settled-title {
+.settledTitle {
   display: flex;
   align-items: center;
   gap: var(--space-2);
@@ -169,16 +169,16 @@
   color: var(--muted-foreground);
 }
 
-.questions-card-settled-mark {
+.settledMark {
   flex: none;
   width: 1rem;
   height: 1rem;
 }
 
-.questions-card-settled-ok {
+.settledOk {
   color: var(--ok);
 }
 
-.questions-card-settled .questions-card-answers {
+.settled .answers {
   margin: var(--space-3) 0 0;
 }
diff --git a/apps/web/src/pages/workspace/questions-card.stories.tsx b/apps/web/src/pages/workspace/questions-card.stories.tsx
new file mode 100644
index 00000000..c016e7af
--- /dev/null
+++ b/apps/web/src/pages/workspace/questions-card.stories.tsx
@@ -0,0 +1,92 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import type { AskQuestions } from "@corbits-builder/schemas/questions";
+import { fn } from "storybook/test";
+import { wording } from "../../config.ts";
+import { QuestionsCard } from "./questions-card.tsx";
+
+const ask: AskQuestions = {
+  questions: [
+    {
+      id: "audience",
+      prompt: "Who is it for?",
+      kind: "single",
+      options: [
+        { value: "owners", label: "Bakery owners" },
+        { value: "staff", label: "Counter staff" },
+      ],
+      preselected: ["owners"],
+    },
+    {
+      id: "first_version",
+      prompt: "What must the first version do?",
+      kind: "multi",
+      options: [
+        { value: "take", label: "Take orders" },
+        { value: "list", label: "List the day's orders" },
+        { value: "remind", label: "Remind customers" },
+      ],
+      allowOther: true,
+    },
+  ],
+};
+
+const meta = {
+  title: "Screens/Workspace/QuestionsCard",
+  component: QuestionsCard,
+  args: {
+    id: "call-1",
+    ask,
+    layout: "steps",
+    state: {
+      kind: "open",
+      disabled: false,
+      onSend: fn(() => Promise.resolve(true)),
+    },
+  },
+  argTypes: { layout: { control: "inline-radio", options: ["steps", "all"] } },
+  decorators: [
+    (Story) => (
+      <div style={{ maxWidth: 640 }}>
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof QuestionsCard>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** One question at a time under step tabs ending in Submit. */
+export const OneAtATime: Story = {};
+
+export const AllAtOnce: Story = { args: { layout: "all" } };
+
+export const Disabled: Story = {
+  args: {
+    state: { kind: "open", disabled: true, onSend: fn() },
+  },
+};
+
+export const Answered: Story = {
+  args: {
+    state: {
+      kind: "answered",
+      reply: [
+        wording.questions.answerLine("Who is it for?", ["Bakery owners"]),
+        wording.questions.answerLine("What must the first version do?", [
+          "Take orders",
+          "List the day's orders",
+        ]),
+      ].join("\n"),
+    },
+  },
+};
+
+/** Answered in the person's own words, so the card shows no answers. */
+export const AnsweredInChat: Story = {
+  args: {
+    state: { kind: "answered", reply: "Actually, let's build a game." },
+  },
+};
+
+export const Replaced: Story = { args: { state: { kind: "replaced" } } };
diff --git a/apps/web/src/pages/workspace/questions-card.test.tsx b/apps/web/src/pages/workspace/questions-card.test.tsx
index 0652155c..bf42f200 100644
--- a/apps/web/src/pages/workspace/questions-card.test.tsx
+++ b/apps/web/src/pages/workspace/questions-card.test.tsx
@@ -64,7 +64,7 @@ describe("questions card", () => {
     expect(html).toContain("Small teams");
     expect(html).not.toContain("What must the first version do?");
     expect(html).toContain(text.keys.single);
-    expect(html).not.toContain("questions-card-step-mark");
+    expect(html).not.toContain("data-done");
   });
 
   test("all at once, every question shows and Other is an option until chosen", () => {
diff --git a/apps/web/src/pages/workspace/questions-card.tsx b/apps/web/src/pages/workspace/questions-card.tsx
index 2480635b..174f3d8f 100644
--- a/apps/web/src/pages/workspace/questions-card.tsx
+++ b/apps/web/src/pages/workspace/questions-card.tsx
@@ -27,7 +27,9 @@ import {
 import { wording } from "../../config.ts";
 import type { QuestionsLayout } from "../../questions-layout-setting.ts";
 import type { CallResult } from "./live-run.ts";
-import "./questions-card.css";
+import { clsx } from "clsx";
+import { Fault } from "../../components.jsx";
+import styles from "./questions-card.module.css";
 
 const text = wording.questions;
 
@@ -107,7 +109,7 @@ type AnswerRow = { id: string; prompt: string; answer: string };
 
 function AnswerList({ answers }: { answers: readonly AnswerRow[] }) {
   return (
-    <dl className="questions-card-answers">
+    <dl className={styles.answers}>
       {answers.map(({ id, prompt, answer }) => (
         <div key={id}>
           <dt>{prompt}</dt>
@@ -124,13 +126,11 @@ function Settled({ ask, reply }: { ask: AskQuestions; reply?: string }) {
     return (
       <SettledBox
         title={text.replaced}
-        mark={<CornerDownRight className="questions-card-settled-mark" />}
+        mark={<CornerDownRight className={styles.settledMark} />}
       />
     );
   const answers = repliedAnswers(ask.questions, reply);
-  const mark = (
-    <Check className="questions-card-settled-mark questions-card-settled-ok" />
-  );
+  const mark = <Check className={clsx(styles.settledMark, styles.settledOk)} />;
   if (answers.length === 0)
     return <SettledBox title={text.answeredInChat} mark={mark} />;
   return (
@@ -150,8 +150,8 @@ function SettledBox({
   children?: ReactNode;
 }) {
   return (
-    <section className="questions-card-settled" aria-label={title}>
-      <p className="questions-card-settled-title">
+    <section className={styles.settled} aria-label={title}>
+      <p className={styles.settledTitle}>
         {mark}
         {title}
       </p>
@@ -178,7 +178,7 @@ function OtherInput({
   return (
     <Input
       autoFocus
-      className="questions-card-other-input"
+      className={styles.otherInput}
       disabled={disabled}
       aria-label={`${question.prompt} ${text.otherAnswer}`}
       placeholder={text.other}
@@ -217,7 +217,7 @@ function SingleField({
     ? [...question.options, { value: other, label: text.other }]
     : question.options;
   return (
-    <div className="questions-card-question">
+    <div className={styles.question}>
       <IntakeForm
         idPrefix={idPrefix}
         disabled={disabled}
@@ -273,12 +273,12 @@ function MultiField({
   onChange: (answer: Answer) => void;
 }) {
   return (
-    <fieldset className="questions-card-question" disabled={disabled}>
+    <fieldset className={styles.question} disabled={disabled}>
       <legend>{question.prompt}</legend>
       {question.options.map((option) => (
         <Checkbox
           key={option.value}
-          className="questions-card-option"
+          className={styles.option}
           label={option.label}
           checked={answer.chosen.includes(option.value)}
           disabled={disabled}
@@ -323,7 +323,7 @@ function MultiOther({
   if (!answer.other)
     return (
       <Checkbox
-        className="questions-card-option"
+        className={styles.option}
         label={text.other}
         checked={false}
         disabled={disabled}
@@ -331,10 +331,10 @@ function MultiOther({
       />
     );
   return (
-    <div className="questions-card-other">
+    <div className={styles.other}>
       <Checkbox
         id={id}
-        className="questions-card-option"
+        className={styles.option}
         checked
         disabled={disabled}
         onCheckedChange={untick}
@@ -471,15 +471,15 @@ function StepQuestion({
     ...(allowOther ? [text.other] : []),
   ];
   return (
-    <div className="questions-card-question">
-      <p className="questions-card-prompt" id={`${idPrefix}-${question.id}`}>
+    <div className={styles.question}>
+      <p className={styles.prompt} id={`${idPrefix}-${question.id}`}>
         {question.prompt}
       </p>
       <div
         ref={list}
         role="listbox"
         tabIndex={disabled ? -1 : 0}
-        className="questions-card-options"
+        className={styles.options}
         aria-labelledby={`${idPrefix}-${question.id}`}
         aria-multiselectable={multi}
         aria-activedescendant={optionId(active)}
@@ -493,11 +493,11 @@ function StepQuestion({
               id={optionId(index)}
               role="option"
               aria-selected
-              className="questions-card-choice"
+              className={styles.choice}
               data-active={active === index ? "" : undefined}
             >
               <Check
-                className="questions-card-choice-mark"
+                className={styles.choiceMark}
                 onClick={() => {
                   if (disabled || !multi) return;
                   onChange(pick(otherIndex));
@@ -522,7 +522,7 @@ function StepQuestion({
               id={optionId(index)}
               role="option"
               aria-selected={chosen(index)}
-              className="questions-card-choice"
+              className={styles.choice}
               data-active={active === index ? "" : undefined}
               onClick={() => {
                 if (disabled) return;
@@ -532,9 +532,9 @@ function StepQuestion({
               }}
             >
               {chosen(index) ? (
-                <Check className="questions-card-choice-mark" />
+                <Check className={styles.choiceMark} />
               ) : (
-                <span className="questions-card-choice-mark" />
+                <span className={styles.choiceMark} />
               )}
               <span>{label}</span>
             </div>
@@ -565,7 +565,6 @@ function StepReview({
 }) {
   return (
     <div
-      className="questions-card-review"
       onKeyDown={(event) => {
         if (event.key !== "ArrowLeft") return;
         event.preventDefault();
@@ -623,11 +622,7 @@ function StepsBody({
   const question = questions[step];
   return (
     <>
-      <div
-        role="tablist"
-        aria-label={text.steps}
-        className="questions-card-steps"
-      >
+      <div role="tablist" aria-label={text.steps} className={styles.steps}>
         {[...questions.map((item) => stepName(item.id)), text.submit].map(
           (name, index) => {
             const item = questions[index];
@@ -641,12 +636,12 @@ function StepsBody({
                 type="button"
                 role="tab"
                 aria-selected={index === step}
-                className="questions-card-step"
+                className={styles.step}
                 data-done={done ? "" : undefined}
                 disabled={disabled || index > furthest}
                 onClick={() => go(index)}
               >
-                {done ? <Check className="questions-card-step-mark" /> : null}
+                {done ? <Check className={styles.stepMark} /> : null}
                 {name}
               </button>
             );
@@ -678,7 +673,7 @@ function StepsBody({
           onBack={() => go(step - 1)}
         />
       )}
-      <p className="questions-card-keys">
+      <p className={styles.keys}>
         {question === undefined ? text.keys.review : text.keys[question.kind]}
       </p>
     </>
@@ -731,11 +726,7 @@ export function QuestionsCard({
     setSending(false);
     setFailed(!sent);
   };
-  const notSent = failed ? (
-    <p className="inline-note" role="alert">
-      {text.notSent}
-    </p>
-  ) : undefined;
+  const notSent = failed ? <Fault>{text.notSent}</Fault> : undefined;
   const gate = {
     kind: "form" as const,
     title: text.title(ask.questions.length),
@@ -743,7 +734,7 @@ export function QuestionsCard({
   if (layout === "steps")
     return (
       <GateBlock
-        className="questions-card"
+        className={styles.card}
         gate={gate}
         {...(notSent === undefined ? {} : { footer: notSent })}
       >
@@ -760,7 +751,7 @@ export function QuestionsCard({
     );
   return (
     <GateBlock
-      className="questions-card"
+      className={styles.card}
       gate={gate}
       footer={
         <>
@@ -776,7 +767,7 @@ export function QuestionsCard({
         </>
       }
     >
-      <div className="questions-card-fields">
+      <div className={styles.fields}>
         {ask.questions.map((question) => {
           const answer = answerOf(question);
           const onChange = (next: Answer) => setAnswer(question, next);
diff --git a/apps/web/src/pages/workspace/room-skeleton.module.css b/apps/web/src/pages/workspace/room-skeleton.module.css
new file mode 100644
index 00000000..857a3acc
--- /dev/null
+++ b/apps/web/src/pages/workspace/room-skeleton.module.css
@@ -0,0 +1,39 @@
+.skeleton {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  padding: var(--space-4);
+}
+
+.status {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  min-height: 32px;
+  margin: 0;
+  padding: var(--space-2) var(--space-4);
+  color: var(--wb-muted-foreground);
+  font-size: 0.8125rem;
+  line-height: 1.6;
+}
+
+.panes {
+  flex: 1;
+  min-height: 0;
+}
+
+.pane {
+  min-height: 16rem;
+  height: 100%;
+}
+
+.fault {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: var(--space-4);
+}
diff --git a/apps/web/src/pages/workspace/room-skeleton.stories.tsx b/apps/web/src/pages/workspace/room-skeleton.stories.tsx
new file mode 100644
index 00000000..3d0d7360
--- /dev/null
+++ b/apps/web/src/pages/workspace/room-skeleton.stories.tsx
@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
+import { RoomFault, RoomSkeleton } from "./room-skeleton.tsx";
+
+const meta = {
+  title: "Components/Workspace/Room",
+  parameters: { layout: "fullscreen" },
+} satisfies Meta;
+
+export default meta;
+
+export const Loading: StoryObj = {
+  render: () => <RoomSkeleton />,
+};
+
+export const Fault: StoryObj<typeof RoomFault> = {
+  args: { onRetry: fn() },
+  render: (args) => <RoomFault {...args} />,
+};
diff --git a/apps/web/src/pages/workspace/room-skeleton.tsx b/apps/web/src/pages/workspace/room-skeleton.tsx
index 998ff836..66578884 100644
--- a/apps/web/src/pages/workspace/room-skeleton.tsx
+++ b/apps/web/src/pages/workspace/room-skeleton.tsx
@@ -4,33 +4,34 @@
  * Chat and artifacts share this until both have something that was actually
  * loaded. A skeleton box is not announced; the status line is.
  */
+import { Fault } from "../../components.jsx";
 import { wording } from "../../config.ts";
 import { Skeleton } from "@corbits/react-ui";
-import { PANES_CLASS } from "./pane-classes.ts";
+import styles from "./room-skeleton.module.css";
+import { StageView } from "./stage-view.tsx";
 
 export function RoomSkeleton() {
   return (
-    <div className="stage-view workspace-room-skeleton" aria-busy="true">
-      <p className="workspace-status" role="status">
-        {wording.message.projectLoading}
-      </p>
-      <div className={`${PANES_CLASS} workspace-split`}>
-        <Skeleton className="workspace-skeleton-pane" />
-        <Skeleton className="workspace-skeleton-pane" />
+    <StageView aria-busy="true">
+      <div className={styles.skeleton}>
+        <p className={styles.status} role="status">
+          {wording.message.projectLoading}
+        </p>
+        <div className={styles.panes}>
+          <Skeleton className={styles.pane} />
+          <Skeleton className={styles.pane} />
+        </div>
       </div>
-    </div>
+    </StageView>
   );
 }
 
 export function RoomFault({ onRetry }: { onRetry: () => void }) {
   return (
-    <div className="stage-view workspace-room-fault" role="alert">
-      <div className="workspace-fault">
-        <p>{wording.message.projectNotOpened}</p>
-        <button type="button" className="btn" onClick={onRetry}>
-          {wording.action.retry}
-        </button>
+    <StageView>
+      <div className={styles.fault}>
+        <Fault onRetry={onRetry}>{wording.message.projectNotOpened}</Fault>
       </div>
-    </div>
+    </StageView>
   );
 }
diff --git a/apps/web/src/pages/workspace/sketching.module.css b/apps/web/src/pages/workspace/sketching.module.css
new file mode 100644
index 00000000..bc8352cf
--- /dev/null
+++ b/apps/web/src/pages/workspace/sketching.module.css
@@ -0,0 +1,107 @@
+/* Drawn in the custom properties it is given, such as a concept's own theme, else the workspace's. */
+.sketching {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-2);
+  min-height: 0;
+  padding: var(--space-6) var(--space-4);
+  font-family: var(--sketch-font, inherit);
+  text-align: center;
+}
+
+.sketch {
+  display: grid;
+  gap: var(--space-2);
+  width: min(22rem, 100%);
+  margin-bottom: var(--space-3);
+  padding: var(--space-4);
+  border: 1px solid
+    color-mix(in srgb, var(--sketch-primary, var(--wb-border)) 35%, transparent);
+  border-radius: var(--sketch-radius, var(--radius-panel));
+  background: var(--sketch-background, var(--wb-background));
+}
+
+.sketch > span,
+.sketchCards > span {
+  display: block;
+  height: 0.625rem;
+  border-radius: calc(var(--sketch-radius, 0.5rem) / 2);
+  background: color-mix(
+    in srgb,
+    var(--sketch-primary, var(--wb-muted-foreground)) 22%,
+    transparent
+  );
+  animation: sketch-pulse 1.8s ease-in-out infinite;
+}
+
+.sketch > .sketchBar {
+  height: 1rem;
+  background: color-mix(
+    in srgb,
+    var(--sketch-primary, var(--wb-muted-foreground)) 45%,
+    transparent
+  );
+}
+
+.sketch > .sketchTitle {
+  width: 60%;
+  height: 1.25rem;
+  animation-delay: 0.15s;
+}
+
+.sketch > .sketchLine {
+  animation-delay: 0.3s;
+}
+
+.sketch > .sketchLineShort {
+  width: 75%;
+  animation-delay: 0.45s;
+}
+
+.sketch > .sketchCards {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: var(--space-2);
+  height: auto;
+  background: none;
+  animation: none;
+}
+
+.sketchCards > span {
+  height: 3.5rem;
+  animation-delay: 0.6s;
+}
+
+.lead {
+  margin: 0;
+  font-weight: 600;
+}
+
+.note {
+  margin: 0;
+  color: var(--wb-muted-foreground);
+  font-size: 0.8125rem;
+}
+
+.clock {
+  font-variant-numeric: tabular-nums;
+}
+
+.sketching[data-state="still"] .sketch span {
+  animation: none;
+}
+
+@keyframes sketch-pulse {
+  50% {
+    opacity: 0.45;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sketch span {
+    animation: none;
+  }
+}
diff --git a/apps/web/src/pages/workspace/sketching.tsx b/apps/web/src/pages/workspace/sketching.tsx
new file mode 100644
index 00000000..30a52c82
--- /dev/null
+++ b/apps/web/src/pages/workspace/sketching.tsx
@@ -0,0 +1,73 @@
+/**
+ * An app taking shape, drawn as a sketch with a few short lines under it: a concept's designer
+ * drafting it, or the Builder writing the first app. It moves only while that work is under way.
+ */
+import type { CSSProperties, ReactNode } from "react";
+import { clock, useElapsedMs } from "./elapsed.tsx";
+import styles from "./sketching.module.css";
+
+/** An app's frame drawn as placeholder bars; it pulses unless its container is still. */
+const AppSketch = () => (
+  <div className={styles.sketch} aria-hidden="true">
+    <span className={styles.sketchBar} />
+    <span className={styles.sketchTitle} />
+    <span className={styles.sketchLine} />
+    <span className={styles.sketchLineShort} />
+    <span className={styles.sketchCards}>
+      <span />
+      <span />
+      <span />
+    </span>
+  </div>
+);
+
+export function Sketching({
+  working,
+  style,
+  children,
+}: {
+  working: boolean;
+  /** The concept's own look, as the sketch's custom properties. */
+  style?: CSSProperties;
+  children: ReactNode;
+}) {
+  return (
+    <div
+      className={styles.sketching}
+      data-slot="sketching"
+      data-state={working ? "working" : "still"}
+      style={style}
+      role="status"
+    >
+      <AppSketch />
+      {children}
+    </div>
+  );
+}
+
+export const SketchingLead = ({ children }: { children: ReactNode }) => (
+  <p className={styles.lead}>{children}</p>
+);
+
+export const SketchingNote = ({ children }: { children: ReactNode }) => (
+  <p className={styles.note}>{children}</p>
+);
+
+/**
+ * The time the work has taken so far, ticking within the note; mounted only while it is under
+ * way. `label` words the running clock, such as "1:05 elapsed".
+ */
+export function SketchingClock({
+  since,
+  label,
+}: {
+  since: string;
+  label: (clock: string) => string;
+}) {
+  const seconds = Math.floor(useElapsedMs(since) / 1_000);
+  return (
+    <span className={styles.clock} role="timer" aria-live="off">
+      {label(clock(seconds))}
+    </span>
+  );
+}
diff --git a/apps/web/src/pages/workspace/source-link.module.css b/apps/web/src/pages/workspace/source-link.module.css
new file mode 100644
index 00000000..409f3e16
--- /dev/null
+++ b/apps/web/src/pages/workspace/source-link.module.css
@@ -0,0 +1,32 @@
+.sourceLink {
+  padding: 0;
+  border: 0;
+  background: none;
+  color: var(--wb-foreground);
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+  text-decoration-line: underline;
+  text-decoration-color: color-mix(
+    in srgb,
+    var(--wb-muted-foreground) 45%,
+    transparent
+  );
+  text-underline-offset: 3px;
+}
+
+.sourceLink:hover {
+  color: var(--wb-primary);
+  text-decoration-color: var(--wb-primary);
+}
+
+.sourceLink:focus-visible {
+  outline: 2px solid var(--wb-ring);
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+
+.sourceLink[data-version] {
+  font-family: var(--wb-font-mono);
+  font-size: 0.8125rem;
+}
diff --git a/apps/web/src/pages/workspace/source-link.tsx b/apps/web/src/pages/workspace/source-link.tsx
new file mode 100644
index 00000000..2bd09201
--- /dev/null
+++ b/apps/web/src/pages/workspace/source-link.tsx
@@ -0,0 +1,26 @@
+import type { ReactNode } from "react";
+import styles from "./source-link.module.css";
+
+/** A link-styled button that opens one of an approval package's source documents. */
+export function SourceLink({
+  version = false,
+  onClick,
+  children,
+}: {
+  /** Set on a version number, which reads in the mono face. */
+  version?: boolean;
+  onClick: () => void;
+  children: ReactNode;
+}) {
+  return (
+    <button
+      type="button"
+      className={styles.sourceLink}
+      data-slot="source-link"
+      data-version={version ? "" : undefined}
+      onClick={onClick}
+    >
+      {children}
+    </button>
+  );
+}
diff --git a/apps/web/src/pages/workspace/specialist-updates.module.css b/apps/web/src/pages/workspace/specialist-updates.module.css
new file mode 100644
index 00000000..5b05d9ac
--- /dev/null
+++ b/apps/web/src/pages/workspace/specialist-updates.module.css
@@ -0,0 +1,31 @@
+.row {
+  align-items: flex-start;
+}
+
+.names {
+  display: block;
+  font-weight: 500;
+  color: var(--wb-foreground);
+}
+
+/* The row's summary uses the column's width and wraps to a second line before it cuts off. */
+.summary {
+  display: -webkit-box;
+  overflow: hidden;
+  white-space: normal;
+  color: var(--wb-muted-foreground);
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+}
+
+.fold > summary {
+  cursor: pointer;
+  padding: var(--space-1);
+  font-size: 0.875rem;
+  color: var(--wb-muted-foreground);
+}
+
+.turn + .turn {
+  margin-top: var(--space-3);
+}
diff --git a/apps/web/src/pages/workspace/specialist-updates.tsx b/apps/web/src/pages/workspace/specialist-updates.tsx
index a7531d0b..e8b6d779 100644
--- a/apps/web/src/pages/workspace/specialist-updates.tsx
+++ b/apps/web/src/pages/workspace/specialist-updates.tsx
@@ -20,6 +20,7 @@ import type { ConversationThread } from "../../api/conversation.ts";
 import { participantLabel, visibleChatText } from "./visible-chat.ts";
 import { type } from "arktype";
 import { readJson } from "../../json.ts";
+import styles from "./specialist-updates.module.css";
 
 export type SpecialistUpdate = {
   readonly sender: string;
@@ -137,19 +138,17 @@ function UpdateRow({
       }}
     >
       <ToolHeader
-        className="room-mail-row"
+        className={styles.row}
         label={
           <>
-            <span className="room-mail-names">
+            <span className={styles.names} data-slot="update-names">
               {wording.updates(
                 subject ?? participantLabel(group.sender),
                 group.updates.length,
               )}
             </span>
             {latest === undefined ? null : (
-              <span className="room-mail-summary">
-                {summaryLine(latest.text)}
-              </span>
+              <span className={styles.summary}>{summaryLine(latest.text)}</span>
             )}
           </>
         }
@@ -161,7 +160,7 @@ function UpdateRow({
           group.updates.map((update) => (
             <div
               key={`${String(update.at)}:${update.text}`}
-              className="room-mail-turn"
+              className={styles.turn}
             >
               <Markdown source={update.text} />
             </div>
@@ -198,7 +197,7 @@ export function FoldedUpdates({
   const count = groups.reduce((sum, group) => sum + group.updates.length, 0);
   return (
     <ConversationItem itemId={`folded:${groups[0]?.key ?? ""}`}>
-      <details className="room-mail-fold">
+      <details className={styles.fold}>
         <summary>{wording.updatesFolded(count)}</summary>
         {groups.map((group) => (
           <UpdateRow
diff --git a/apps/web/src/pages/workspace/stage-chrome.css b/apps/web/src/pages/workspace/stage-chrome.css
deleted file mode 100644
index a2da8bcd..00000000
--- a/apps/web/src/pages/workspace/stage-chrome.css
+++ /dev/null
@@ -1,20 +0,0 @@
-/* Extra chrome folds into one Guidance summary — not stacked bands. */
-
-.stage-chrome {
-  flex: none;
-  border-bottom: 1px solid var(--wb-border);
-  background: var(--wb-background);
-}
-
-.stage-chrome > summary {
-  font-family: var(--wb-font-mono);
-  font-size: 11px;
-  letter-spacing: 0.04em;
-  color: var(--wb-muted-foreground);
-  padding: var(--space-2) var(--space-4);
-  cursor: pointer;
-}
-
-.stage-chrome > summary:hover {
-  color: var(--wb-foreground);
-}
diff --git a/apps/web/src/pages/workspace/stage-view.module.css b/apps/web/src/pages/workspace/stage-view.module.css
new file mode 100644
index 00000000..727862fa
--- /dev/null
+++ b/apps/web/src/pages/workspace/stage-view.module.css
@@ -0,0 +1,14 @@
+/* The stage's one view at a time. Fills the region and settles in on change. */
+.stageView {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  animation: global(settle-in) 380ms cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .stageView {
+    animation: none;
+  }
+}
diff --git a/apps/web/src/pages/workspace/stage-view.tsx b/apps/web/src/pages/workspace/stage-view.tsx
new file mode 100644
index 00000000..91e52d17
--- /dev/null
+++ b/apps/web/src/pages/workspace/stage-view.tsx
@@ -0,0 +1,7 @@
+import type { ComponentProps } from "react";
+import styles from "./stage-view.module.css";
+
+/** The frame each state of the room fills the stage with: loading, failed or open. */
+export function StageView(props: Omit<ComponentProps<"div">, "className">) {
+  return <div {...props} className={styles.stageView} data-slot="stage-view" />;
+}
diff --git a/apps/web/src/pages/workspace/transcript.module.css b/apps/web/src/pages/workspace/transcript.module.css
new file mode 100644
index 00000000..c2c08a4e
--- /dev/null
+++ b/apps/web/src/pages/workspace/transcript.module.css
@@ -0,0 +1,72 @@
+/* ChatThread brings its own transcript layout, scrolling and message
+   treatment; this only places it in the pane's flexible row. */
+.thread {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-height: 0;
+  min-width: 0;
+}
+
+/* The conversation map's rail sits over the column's left edge; the turns start clear of it. */
+.thread[data-mapped]
+  > [data-slot="conversation-content"]
+  > [data-slot="conversation-column"] {
+  padding-inline-start: 2.5rem;
+}
+
+/* The log scrolls inside the room. flex-shrink 0 made its height follow the
+   settle spacer, and the spacer then grew from that new height. */
+.log {
+  flex: 1 1 auto;
+  min-height: 0;
+  /* Never sideways (#321): `overflow-y: auto` alone makes the x axis auto
+     too, so one child wider than the column let a trackpad gesture carry
+     the whole log to the right and hide the start of every message. */
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding: var(--space-5);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+  /* The conversation engine writes scrollTop and reads it back in the same
+     turn. A smooth scroll reports the old position, so each correction
+     starts another one. */
+  scroll-behavior: auto;
+}
+
+/* Each turn is held to the column; whatever is wide inside it scrolls or
+   clips within its own box. */
+.log > * {
+  min-width: 0;
+  max-width: 100%;
+}
+
+/* A turn arriving. The newest row rises into place. The reserve under a
+   settled turn is not a turn; animating it moves the measurement the
+   reserve is computed from. */
+.log [data-slot="conversation-item"]:last-child {
+  animation: global(turn-in) var(--duration-standard, 200ms)
+    var(--ease-out, ease) both;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .log [data-slot="conversation-item"]:last-child {
+    animation: none;
+  }
+}
+
+@media (max-width: 640px) {
+  .log {
+    padding: var(--space-4);
+  }
+}
+
+.endedDetails {
+  overflow-wrap: anywhere;
+}
+
+.endedDetails summary {
+  display: inline;
+  cursor: pointer;
+}
diff --git a/apps/web/src/pages/workspace/transcript.stories.tsx b/apps/web/src/pages/workspace/transcript.stories.tsx
new file mode 100644
index 00000000..107f31d8
--- /dev/null
+++ b/apps/web/src/pages/workspace/transcript.stories.tsx
@@ -0,0 +1,142 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import type { AskQuestions } from "@corbits-builder/schemas/questions";
+import { fn } from "storybook/test";
+import { ASK_QUESTIONS } from "./questions-card.tsx";
+import { RoomThread, type TranscriptTurn } from "./transcript.tsx";
+
+const BRIEF = { id: "problem_brief", title: "Problem brief" };
+
+const opening: readonly TranscriptTurn[] = [
+  {
+    role: "person",
+    text: "I run a small bakery and we lose cake orders taken by phone.",
+    at: 1,
+  },
+  {
+    role: "assistant",
+    text: "That's worth fixing. I drafted the **Problem brief** from what you said. What should a good Saturday look like once this works?",
+    at: 2,
+  },
+  {
+    role: "person",
+    text: "Every order in one list, and nobody calls back to ask.",
+    at: 3,
+  },
+];
+
+const ask: AskQuestions = {
+  questions: [
+    {
+      id: "audience",
+      prompt: "Who uses it first?",
+      kind: "single",
+      options: [
+        { value: "owner", label: "The owner" },
+        { value: "staff", label: "Counter staff" },
+      ],
+    },
+  ],
+};
+
+const meta = {
+  title: "Screens/Workspace/Conversation",
+  component: RoomThread,
+  args: {
+    turns: opening,
+    documents: [BRIEF],
+    onOpenDocument: fn(),
+    onDecide: fn(),
+    onRequestChanges: fn(),
+    onAnswerQuestions: fn(() => Promise.resolve(true)),
+  },
+  parameters: { layout: "fullscreen" },
+  decorators: [
+    (Story) => (
+      <div
+        style={{ height: "100vh", display: "flex", flexDirection: "column" }}
+      >
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof RoomThread>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Empty: Story = { args: { turns: [] } };
+
+/** A document named in the conversation opens it in the reading pane. */
+export const Conversation: Story = {};
+
+export const Thinking: Story = {
+  args: {
+    turns: [
+      ...opening,
+      { role: "person", text: "Can you start on the plan?", at: 4 },
+    ],
+    thinking: true,
+  },
+};
+
+export const Streaming: Story = {
+  args: {
+    turns: [
+      ...opening,
+      {
+        role: "assistant",
+        text: "Starting on the plan. First I'll list what",
+        at: 4,
+        streaming: true,
+      },
+    ],
+  },
+};
+
+export const AskingForApproval: Story = {
+  args: {
+    approvals: [
+      {
+        approvalId: "approval-1",
+        toolName: "request_approval",
+        document: { kind: BRIEF.id, title: BRIEF.title, version: 2 },
+      },
+    ],
+  },
+};
+
+export const AskingQuestions: Story = {
+  args: {
+    turns: [
+      ...opening,
+      {
+        role: "assistant",
+        text: "",
+        at: 4,
+        parts: [
+          {
+            kind: "tool-trace",
+            toolCallId: "call-questions",
+            name: ASK_QUESTIONS,
+            status: "output-available",
+            input: ask,
+          },
+        ],
+      },
+    ],
+  },
+};
+
+/** Specialists' mail from their own threads folds in between the turns. */
+export const SpecialistUpdates: Story = {
+  args: {
+    updates: [
+      {
+        sender: "Writer",
+        text: "Filed the problem brief, version 2.",
+        at: 2.5,
+      },
+      { sender: "Designer", text: "Three concepts are ready.", at: 2.6 },
+    ],
+  },
+};
diff --git a/apps/web/src/pages/workspace/transcript.test.tsx b/apps/web/src/pages/workspace/transcript.test.tsx
index 1ff0f1e7..8e4b9ca2 100644
--- a/apps/web/src/pages/workspace/transcript.test.tsx
+++ b/apps/web/src/pages/workspace/transcript.test.tsx
@@ -90,7 +90,7 @@ describe("conversation transcript", () => {
         onOpenDocument={() => {}}
       />,
     );
-    expect(html).toContain('class="artifact-mention"');
+    expect(html).toContain('data-slot="document-mention"');
     expect(html).toContain("problem brief");
     expect(html).toContain("What should the outcome be?");
     expect(html).not.toContain(briefId);
@@ -109,8 +109,8 @@ describe("conversation transcript", () => {
       />,
     );
     // Inline, not a <button>: a button is one unbreakable box, so the title would leave the line.
-    expect(html).toContain(
-      'into <strong><span role="button" tabindex="0" class="artifact-mention">Ways to build your list</span></strong>. What',
+    expect(html.replace(/ class="[^"]*"/g, "")).toContain(
+      'into <strong><span role="button" tabindex="0" data-slot="document-mention">Ways to build your list</span></strong>. What',
     );
     expect(html).not.toContain("href");
 
@@ -170,7 +170,7 @@ describe("conversation transcript", () => {
         onNo={() => {}}
       />,
     );
-    expect(html).toContain("document-decision-once");
+    expect(html).toContain('data-once=""');
     expect(html).toContain(">Start Designs<");
     expect(html).not.toContain("Start designs without asking");
   });
@@ -351,9 +351,9 @@ describe("conversation transcript", () => {
     );
     expect(html).toContain('data-item-id="work:call-1"');
     expect(html).toContain(`>${wording.activity.role.writer}<`);
-    expect(html).not.toContain('class="room-mail-names">Constraints<');
+    expect(html).not.toContain('data-slot="update-names">Constraints<');
     expect(html).toContain(wording.updatesFolded(4));
-    expect(html).toContain(`class="room-mail-names">${wording.buildSubject}<`);
+    expect(html).toContain(`data-slot="update-names">${wording.buildSubject}<`);
   });
 
   test("a coordinator stretch has one header, its words first and its cards last", () => {
diff --git a/apps/web/src/pages/workspace/transcript.tsx b/apps/web/src/pages/workspace/transcript.tsx
index 856519db..eee6ed14 100644
--- a/apps/web/src/pages/workspace/transcript.tsx
+++ b/apps/web/src/pages/workspace/transcript.tsx
@@ -52,7 +52,7 @@ import {
 import { toolPhrase, toolResult, toolSubject } from "./agent-activity.tsx";
 import { DOCUMENT_LINK, Markdown } from "../../markdown.jsx";
 import { toast } from "sonner";
-import { CONV_SCROLL_CLASS } from "./pane-classes.ts";
+import styles from "./transcript.module.css";
 import { proseSegments, type NamedDocument } from "./collaboration.ts";
 import { DocumentDecision, PackageDecision } from "./document-decision.tsx";
 import { TypedYesCountdown, type TypedYes } from "./typed-yes.tsx";
@@ -578,11 +578,11 @@ function SpecialistEnded({ text }: { text: string }) {
   const cause =
     code === undefined ? undefined : wording.specialistEnded.cause[code];
   return (
-    <span className="specialist-ended">
+    <span>
       {cause === undefined ? line : `${line.replace(/\.$/, "")} (${cause}).`}{" "}
       {wording.specialistEnded.restart}
       {recorded === null ? null : (
-        <details className="specialist-ended-details">
+        <details className={styles.endedDetails}>
           <summary>{wording.specialistEnded.details}</summary>
           {code === undefined ? recorded[2] : `${code}: ${recorded[2] ?? ""}`}
         </details>
@@ -884,12 +884,12 @@ export function RoomThread({
     <Conversation
       scrollPolicy="stick"
       sentId={sentId}
-      className="room-thread"
+      className={styles.thread}
       data-mapped={mapTurns.length > 1 ? "" : undefined}
     >
       <ConversationContent
         aria-label={wording.conversation.label}
-        className={CONV_SCROLL_CLASS}
+        className={styles.log}
       >
         {sections.map((section, position) => {
           if (section.kind === "coordinator") {
diff --git a/apps/web/src/pages/workspace/typed-yes.module.css b/apps/web/src/pages/workspace/typed-yes.module.css
new file mode 100644
index 00000000..ce7adafc
--- /dev/null
+++ b/apps/web/src/pages/workspace/typed-yes.module.css
@@ -0,0 +1,38 @@
+.countdown {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-1) var(--space-2);
+  margin-top: var(--space-2);
+  color: var(--wb-foreground);
+  font-size: 0.875rem;
+}
+
+.count {
+  font-variant-numeric: tabular-nums;
+}
+
+.bar {
+  flex: 1 1 4rem;
+  height: 2px;
+  border-radius: 1px;
+  background: var(--wb-foreground);
+  transform-origin: left;
+  animation: drain linear forwards;
+}
+
+@keyframes drain {
+  from {
+    transform: scaleX(1);
+  }
+  to {
+    transform: scaleX(0);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .bar {
+    animation: none;
+    opacity: 0.4;
+  }
+}
diff --git a/apps/web/src/pages/workspace/typed-yes.stories.tsx b/apps/web/src/pages/workspace/typed-yes.stories.tsx
new file mode 100644
index 00000000..77008e88
--- /dev/null
+++ b/apps/web/src/pages/workspace/typed-yes.stories.tsx
@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useState } from "react";
+import { fn } from "storybook/test";
+import { Button } from "../../components.tsx";
+import { TypedYesCountdown } from "./typed-yes.tsx";
+
+const meta = {
+  title: "Components/Workspace/TypedYesCountdown",
+} satisfies Meta;
+
+export default meta;
+
+function Countdown({ onUndo }: { onUndo: () => void }) {
+  // The deadline is set on mount, so the countdown starts when the story opens.
+  const [held, setHeld] = useState(() => ({
+    approvalId: "approval-1",
+    message: "yes",
+    endsAt: Date.now() + 5_000,
+  }));
+  return (
+    <div style={{ display: "grid", gap: 12, maxWidth: 420 }}>
+      <TypedYesCountdown held={held} onUndo={onUndo} />
+      <Button onClick={() => setHeld({ ...held, endsAt: Date.now() + 5_000 })}>
+        Restart
+      </Button>
+    </div>
+  );
+}
+
+export const Counting: StoryObj<{ onUndo: () => void }> = {
+  args: { onUndo: fn() },
+  render: (args) => <Countdown onUndo={args.onUndo} />,
+};
diff --git a/apps/web/src/pages/workspace/typed-yes.tsx b/apps/web/src/pages/workspace/typed-yes.tsx
index 2d450517..c87efb31 100644
--- a/apps/web/src/pages/workspace/typed-yes.tsx
+++ b/apps/web/src/pages/workspace/typed-yes.tsx
@@ -5,6 +5,7 @@
 import { useEffect, useRef, useState } from "react";
 import { Button as UiButton } from "@corbits/react-ui";
 import { wording } from "../../config.ts";
+import styles from "./typed-yes.module.css";
 
 const text = wording.approval.typedYes;
 const SECONDS = 5;
@@ -174,10 +175,10 @@ export function TypedYesCountdown({
     return () => clearInterval(tick);
   }, [held]);
   return (
-    <div className="typed-yes" role="status">
-      <span className="typed-yes-count">{text.countdown(seconds)}</span>
+    <div className={styles.countdown} role="status">
+      <span className={styles.count}>{text.countdown(seconds)}</span>
       <span
-        className="typed-yes-bar"
+        className={styles.bar}
         aria-hidden="true"
         style={{ animationDuration: `${String(SECONDS)}s` }}
       />
@@ -185,7 +186,6 @@ export function TypedYesCountdown({
         type="button"
         variant="link"
         size="sm"
-        className="typed-yes-undo"
         title={text.undoHint}
         aria-keyshortcuts="Escape"
         onClick={onUndo}
diff --git a/apps/web/src/pages/workspace/user-manual.tsx b/apps/web/src/pages/workspace/user-manual.tsx
index f4c1ded4..4369d2b5 100644
--- a/apps/web/src/pages/workspace/user-manual.tsx
+++ b/apps/web/src/pages/workspace/user-manual.tsx
@@ -31,6 +31,7 @@ export function useUserManual(
 export function UserManualPane({ manual }: { manual: UserManual }) {
   return (
     <Markdown
+      document
       source={manual.markdown}
       images={new Map(Object.entries(manual.pictures))}
     />
diff --git a/apps/web/src/pages/workspace/version-menu.tsx b/apps/web/src/pages/workspace/version-menu.tsx
index 8ecf6833..8a121c5b 100644
--- a/apps/web/src/pages/workspace/version-menu.tsx
+++ b/apps/web/src/pages/workspace/version-menu.tsx
@@ -4,6 +4,7 @@
  */
 import { MenuItem, MenuSeparator } from "@corbits/react-ui/ui/menu";
 import { Check, ChevronDown } from "lucide-react";
+import { MenuItemLabel } from "../../components.jsx";
 import { wording } from "../../config.ts";
 import type { PaneBarGroup } from "./pane-bar.tsx";
 
@@ -38,12 +39,12 @@ export function versionGroup({
         <>
           {ordered.map((item) => (
             <MenuItem key={item.version} onSelect={() => onView(item.version)}>
-              <span className="version-menu-item">
+              <MenuItemLabel>
                 v{String(item.version)}
                 {item.version === viewing ? (
                   <Check size={14} aria-label="Shown" />
                 ) : null}
-              </span>
+              </MenuItemLabel>
             </MenuItem>
           ))}
           {canCompare ? (
diff --git a/apps/web/src/pages/workspace/work-unit-view.module.css b/apps/web/src/pages/workspace/work-unit-view.module.css
new file mode 100644
index 00000000..13b93fe8
--- /dev/null
+++ b/apps/web/src/pages/workspace/work-unit-view.module.css
@@ -0,0 +1,32 @@
+.result {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: var(--space-2);
+  margin: 0;
+  font-size: 0.875rem;
+}
+
+.result[data-state="failed"] {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  color: var(--wb-destructive);
+}
+
+.ready {
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.open {
+  flex: none;
+  height: auto;
+  padding: 0;
+}
+
+.time {
+  font-variant-numeric: tabular-nums;
+}
diff --git a/apps/web/src/pages/workspace/work-unit-view.tsx b/apps/web/src/pages/workspace/work-unit-view.tsx
index c3b6a746..1a7371d8 100644
--- a/apps/web/src/pages/workspace/work-unit-view.tsx
+++ b/apps/web/src/pages/workspace/work-unit-view.tsx
@@ -34,6 +34,7 @@ import {
   type DispatchStatus,
 } from "./dispatch-card.tsx";
 import { useElapsedMs } from "./elapsed.tsx";
+import styles from "./work-unit-view.module.css";
 import type { DocumentApproval } from "./transcript.tsx";
 import {
   WORK_RESULT_BLOCK,
@@ -50,7 +51,7 @@ const sentenceStart = (line: string) =>
 function Elapsed({ since }: { since: string }) {
   const seconds = Math.floor(useElapsedMs(since) / 1_000);
   return (
-    <span className="work-unit-time">
+    <span className={styles.time}>
       {wording.activity.elapsed(Math.floor(seconds / 60), seconds % 60)}
     </span>
   );
@@ -124,15 +125,15 @@ function WorkResult({
 }) {
   if (status.state === "failed")
     return (
-      <p className="work-unit-result" data-state="failed" title={status.reason}>
+      <p className={styles.result} data-state="failed" title={status.reason}>
         {text.failed(status.reason)}
       </p>
     );
   if (status.state !== "ready") return null;
   const ready = text.ready(status.title, status.version);
   return (
-    <p className="work-unit-result">
-      <span className="work-unit-ready" title={ready}>
+    <p className={styles.result}>
+      <span className={styles.ready} title={ready}>
         {ready}
       </span>
       {onOpen === undefined ? null : (
@@ -140,7 +141,7 @@ function WorkResult({
           type="button"
           variant="link"
           size="sm"
-          className="work-unit-open"
+          className={styles.open}
           onClick={() => onOpen(status.kind)}
         >
           {text.open}
diff --git a/apps/web/src/styles.css b/apps/web/src/styles.css
index aabac6c6..758745d8 100644
--- a/apps/web/src/styles.css
+++ b/apps/web/src/styles.css
@@ -195,463 +195,6 @@ form:has(> div > textarea) textarea:focus-visible {
   outline: none;
 }
 
-/* ---- App shell: a rail on the left, a filling canvas beside it ---- */
-
-.app {
-  display: grid;
-  grid-template-columns: auto minmax(0, 1fr);
-  grid-template-rows: minmax(0, 1fr);
-  /* The window is the app. Nothing scrolls but the one region meant to. */
-  height: 100vh;
-  overflow: hidden;
-  background: var(--wb-frame);
-}
-
-/* A grid item defaults to min-content width, so anything wide inside — a
-   table, the stage timeline — pushes the whole page sideways instead of
-   scrolling within its own panel. */
-.app > * {
-  min-width: 0;
-}
-
-/* ---- Rail: quiet type on the frame, no rules or boxes of its own ----
-   32px rows with 16px icons on one left edge; the current row is lifted
-   onto the page surface rather than tinted. */
-
-.app-sidebar {
-  --rail-hover: color-mix(in srgb, var(--wb-foreground) 5%, transparent);
-  --rail-press: color-mix(in srgb, var(--wb-foreground) 8%, transparent);
-  grid-row: 1 / -1;
-  width: 15rem;
-  padding: 10px 8px 8px;
-  border-right: 0;
-  background: transparent;
-  transition: width 200ms cubic-bezier(0.2, 0, 0, 1);
-}
-
-.app-sidebar[data-collapsed="true"] {
-  width: 3.5rem;
-}
-
-.app-sidebar [data-slot="sidebar-header"] {
-  min-height: 40px;
-  gap: 8px;
-  margin-bottom: 8px;
-  padding: 0 2px 0 8px;
-  border: 0;
-}
-
-.app-sidebar-name {
-  flex: 1;
-  font-size: 0.875rem;
-  font-weight: 700;
-  letter-spacing: -0.01em;
-}
-
-/* The open workspace and its menu: the mark, the name, a chevron. */
-.app-sidebar-workspace {
-  display: flex;
-  flex: 1;
-  align-items: center;
-  gap: 8px;
-  min-width: 0;
-  min-height: 32px;
-  margin-left: -6px;
-  padding: 4px 6px;
-  border: 0;
-  border-radius: var(--radius-panel);
-  background: transparent;
-  color: var(--wb-foreground);
-  text-align: left;
-  cursor: pointer;
-  transition: background-color 120ms ease;
-}
-
-.app-sidebar-workspace:hover,
-.app-sidebar-workspace[data-state="open"] {
-  background: var(--rail-hover);
-}
-
-.app-sidebar-workspace:focus-visible {
-  outline: 2px solid var(--wb-ring);
-  outline-offset: -2px;
-}
-
-.app-sidebar-workspace svg.app-sidebar-name {
-  flex: none;
-  width: 14px;
-  height: 14px;
-  color: var(--wb-muted-foreground);
-}
-
-.app-sidebar[data-collapsed="true"] .app-sidebar-workspace {
-  flex: none;
-  margin: 0;
-}
-
-.workspace-menu {
-  min-width: 14rem;
-}
-
-.workspace-menu-name {
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.workspace-menu-check {
-  width: 14px;
-  height: 14px;
-  color: var(--wb-muted-foreground);
-}
-
-.app-sidebar [data-slot="sidebar-collapse-toggle"] {
-  width: 32px;
-  height: 32px;
-  border-radius: var(--radius-md);
-  color: var(--wb-muted-foreground);
-  transition:
-    background-color 120ms ease,
-    color 120ms ease;
-}
-
-.app-sidebar [data-slot="sidebar-collapse-toggle"]:hover {
-  background: var(--rail-hover);
-  color: var(--wb-foreground);
-}
-
-.app-sidebar [data-slot="sidebar-content"] {
-  padding: 0;
-}
-
-.app-sidebar-list {
-  display: flex;
-  flex-direction: column;
-  gap: 1px;
-}
-
-/* The projects in progress sit under a thin rule; their label is for assistive tech only. */
-.app-sidebar [data-slot="sidebar-section"].app-sidebar-projects {
-  margin-top: 12px;
-  padding: 12px 0 0;
-  border-top: 1px solid var(--wb-border);
-}
-
-.app-sidebar [data-slot="sidebar-section"].app-sidebar-projects > p {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  overflow: hidden;
-  clip-path: inset(50%);
-  white-space: nowrap;
-}
-
-.app-sidebar [data-slot="sidebar-section"] > p {
-  margin: 0 0 3px;
-  padding: 0 8px 4px;
-  font-size: 0.75rem;
-  font-weight: 700;
-  letter-spacing: 0;
-  text-transform: none;
-}
-
-.app-sidebar [data-slot="sidebar-section"] > ul {
-  gap: 1px;
-}
-
-/* SidebarItem puts all children in one inline label, so the badge needs its own row to centre and space against the text. */
-.app-sidebar-whats-new {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  vertical-align: middle;
-}
-
-.app-sidebar .app-sidebar-initial {
-  width: 18px;
-  height: 18px;
-  border-radius: 5px;
-  background: color-mix(in srgb, var(--wb-foreground) 7%, transparent);
-  color: inherit;
-  font-size: 0.625rem;
-}
-
-.app-sidebar [aria-current] .app-sidebar-initial {
-  background: var(--wb-foreground);
-  color: var(--wb-background);
-}
-
-/* Every row's highlight spans the rail, whatever its label's length, with
-   the main pane's corner radius. A project row's highlight is its inner
-   frame, which holds the name and the options menu together. */
-.app-sidebar li {
-  display: block;
-  width: 100%;
-}
-
-.app-sidebar [data-slot="sidebar-item"],
-.app-sidebar [data-slot="sidebar-item-row"] > div {
-  box-sizing: border-box;
-  width: 100%;
-  min-height: 32px;
-  border-radius: var(--radius-panel);
-  background: transparent;
-  color: var(--wb-muted-foreground);
-  font-size: 0.84375rem;
-  font-weight: 500;
-  line-height: 1.25;
-  transition:
-    background-color 120ms ease,
-    color 120ms ease,
-    box-shadow 120ms ease;
-}
-
-.app-sidebar [data-slot="sidebar-item"] {
-  display: flex;
-  gap: 10px;
-  padding: 5px 8px;
-  border: 0;
-  font: inherit;
-  font-size: 0.84375rem;
-  font-weight: 500;
-  text-align: left;
-  cursor: pointer;
-}
-
-.app-sidebar [data-slot="sidebar-item-row"] > div {
-  gap: 0;
-  padding-right: 4px;
-}
-
-.app-sidebar [data-slot="sidebar-item-row"] > div > button:first-child {
-  gap: 10px;
-  padding: 5px 8px;
-}
-
-.app-sidebar [data-slot="sidebar-item"] > span:first-child {
-  color: var(--wb-muted-foreground);
-  transition: color 120ms ease;
-}
-
-.app-sidebar [data-slot="sidebar-item"] svg {
-  width: 16px;
-  height: 16px;
-  stroke-width: 1.75;
-}
-
-.app-sidebar [data-slot="sidebar-item"]:hover,
-.app-sidebar [data-slot="sidebar-item-row"] > div:hover {
-  background: var(--rail-hover);
-  color: var(--wb-foreground);
-}
-
-.app-sidebar [data-slot="sidebar-item"]:hover > span:first-child {
-  color: var(--wb-foreground);
-}
-
-.app-sidebar [data-slot="sidebar-item"]:active,
-.app-sidebar [data-slot="sidebar-item-row"] > div:active {
-  background: var(--rail-press);
-}
-
-.app-sidebar [data-slot="sidebar-item"][aria-current="page"],
-.app-sidebar [data-slot="sidebar-item-row"] > div:has(> [aria-current]) {
-  background: var(--wb-background);
-  box-shadow: var(--wb-shadow);
-  color: var(--wb-foreground);
-  font-weight: 600;
-}
-
-.app-sidebar
-  [data-slot="sidebar-item"][aria-current="page"]
-  > span:first-child {
-  color: var(--wb-foreground);
-}
-
-.app-sidebar [data-slot="sidebar-item"]:focus-visible,
-.app-sidebar [data-slot="sidebar-item-row"] button:focus-visible,
-.app-sidebar [data-slot="sidebar-collapse-toggle"]:focus-visible {
-  outline: 2px solid var(--wb-ring);
-  outline-offset: -2px;
-}
-
-.app-sidebar [data-slot="sidebar-footer"] {
-  margin-top: 6px;
-  padding: 8px 0 0;
-  border-top: 1px solid color-mix(in srgb, var(--wb-border) 60%, transparent);
-}
-
-/* Collapsed: the brand mark over its toggle, and every row a centred
-   36px square, so the icon column reads as deliberate rather than clipped. */
-.app-sidebar[data-collapsed="true"] [data-slot="sidebar-header"] {
-  flex-direction: column;
-  justify-content: center;
-  gap: 6px;
-  padding: 4px 0;
-}
-
-.app-sidebar[data-collapsed="true"] .app-sidebar-name {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  overflow: hidden;
-  clip-path: inset(50%);
-  white-space: nowrap;
-}
-
-.app-sidebar[data-collapsed="true"] [data-slot="sidebar-item"],
-.app-sidebar[data-collapsed="true"] [data-slot="sidebar-item-row"] > div {
-  width: 36px;
-  min-height: 36px;
-  margin: 0 auto;
-  padding: 0;
-}
-
-.app-sidebar[data-collapsed="true"]
-  [data-slot="sidebar-item-row"]
-  > div
-  > button:first-child {
-  justify-content: center;
-  gap: 0;
-  padding: 0;
-}
-
-/* The one call to action in the rail, in the primary colour. */
-.app-sidebar [data-slot="sidebar-item"].app-sidebar-new,
-.app-sidebar [data-slot="sidebar-item"].app-sidebar-new > span:first-child {
-  color: var(--primary-emphasis, var(--wb-primary));
-}
-
-.app-sidebar [data-slot="sidebar-item"].app-sidebar-new {
-  margin-bottom: 4px;
-  background: color-mix(in srgb, var(--wb-primary) 10%, transparent);
-  box-shadow: inset 0 0 0 1px
-    color-mix(in srgb, var(--wb-primary) 45%, transparent);
-  font-weight: 600;
-}
-
-.app-sidebar [data-slot="sidebar-item"].app-sidebar-new:hover {
-  background: color-mix(in srgb, var(--wb-primary) 16%, transparent);
-}
-
-.app-sidebar [data-slot="sidebar-item"].app-sidebar-new[aria-current="page"] {
-  background: color-mix(in srgb, var(--wb-primary) 18%, transparent);
-  box-shadow: inset 0 0 0 1px var(--wb-primary);
-}
-
-/* A project row's options: the library reveals the ellipsis while the row
-   is pointed at or focused; an open menu keeps it up. */
-.app-sidebar .app-sidebar-row-menu {
-  width: 24px;
-  height: 24px;
-  color: var(--wb-muted-foreground);
-}
-
-.app-sidebar
-  [data-slot="sidebar-item-row"]
-  > div
-  > span:has(> .app-sidebar-row-menu[data-state="open"]) {
-  opacity: 1;
-}
-
-.app-sidebar .app-sidebar-row-menu:hover,
-.app-sidebar .app-sidebar-row-menu[data-state="open"] {
-  background: var(--rail-press);
-  color: var(--wb-foreground);
-}
-
-.app-sidebar[data-collapsed="true"]
-  [data-slot="sidebar-item-row"]
-  > div
-  > span {
-  display: none;
-}
-
-.app-sidebar[data-collapsed="true"]
-  [data-slot="sidebar-item-row"]
-  button
-  > span:last-child {
-  flex: none;
-  width: 0;
-}
-
-/* Phone widths: the rail stays an icon column, and opening it lays the full
-   rail over the workspace instead of squeezing it. */
-@media (max-width: 640px) {
-  .app {
-    grid-template-columns: 3.5rem minmax(0, 1fr);
-  }
-
-  .app-sidebar[data-collapsed="false"] {
-    position: fixed;
-    inset: 0 auto 0 0;
-    z-index: 40;
-    background: var(--wb-frame);
-    box-shadow: var(--wb-pane-shadow);
-  }
-}
-
-/* ---- Canvas ---- */
-
-.canvas {
-  display: flex;
-  margin: var(--space-2) var(--space-2) var(--space-2) 0;
-  border-radius: var(--radius-panel);
-  box-shadow: var(--wb-pane-shadow);
-  flex-direction: column;
-  min-width: 0;
-  min-height: 0;
-  overflow: hidden;
-  background: var(--wb-pane);
-}
-
-.wordmark {
-  font-size: 0.9375rem;
-  font-weight: 600;
-  letter-spacing: -0.01em;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-/* Everything beside the rail. Scrolls, except where a surface fills instead. */
-.canvas-body {
-  flex: 1;
-  min-height: 0;
-  overflow-y: auto;
-  padding: var(--space-4) var(--space-5) var(--space-6);
-  display: grid;
-  gap: var(--space-2);
-  align-content: start;
-  max-width: var(--section-max);
-  width: 100%;
-}
-
-.canvas-body.is-fill {
-  background: var(--wb-background);
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  gap: 0;
-  padding: 0;
-  max-width: none;
-}
-
-/* The conversation log is the room's scrollport. A content-sized room lets
-   the settle spacer's height feed back into that measurement, and the page
-   grows on every resize. */
-.canvas-body.is-fill:has(> .stage-view) {
-  overflow: hidden;
-}
-
-.canvas-body.is-fill > .stage-view {
-  flex: 1 1 auto;
-  min-height: 0;
-  overflow: hidden;
-}
-
 h1 {
   font-size: 1.75rem;
   font-weight: 400;
@@ -677,257 +220,6 @@ h3 {
     transition-duration: 0.01ms !important;
   }
 }
-
-.consequence {
-  color: var(--wb-muted-foreground);
-  margin: 0;
-  max-width: 72ch;
-}
-
-.version-list dd {
-  margin: 0;
-  min-width: 0;
-  overflow-wrap: anywhere;
-}
-
-.hash {
-  font-family: var(--wb-font-mono);
-  font-size: 0.6875rem;
-  color: var(--wb-muted-foreground);
-  word-break: break-all;
-}
-
-/* A label stacked above the control it names. */
-.field {
-  display: grid;
-  gap: var(--space-2);
-}
-
-/* ---- Artifact rendering ---- */
-
-/* Not a card: the artifact body *is* the panel's content. A bordered, filled
-   box inside an already-bordered panel is the nested-card tell, and it adds a
-   frame the reader has to look past to reach the text. */
-.artifact {
-  border: 0;
-  border-top: 1px solid var(--wb-border);
-  background: var(--wb-background);
-  padding: var(--space-5) 0 0;
-  max-height: 60vh;
-  overflow: auto;
-}
-
-.artifact pre {
-  margin: 0;
-  white-space: pre-wrap;
-  word-break: break-word;
-  font-family: var(--wb-font-mono);
-  font-size: 0.8125rem;
-  line-height: 1.6;
-}
-
-.banner {
-  border: 1px solid var(--wb-border-strong);
-  background: var(--wb-card);
-  padding: var(--space-3) var(--space-4);
-  display: grid;
-  gap: var(--space-1);
-  border-radius: var(--radius-panel);
-}
-
-/* Severity reads from the words and the state label, not a coloured edge. */
-.banner.is-okay {
-  border-color: var(--wb-okay);
-}
-.banner p {
-  margin: 0;
-}
-.banner .banner-body {
-  margin: 0;
-}
-.banner .banner-title {
-  font-weight: 500;
-}
-
-/* The gate forms are named `row` and were unstyled outside Settings, so the
-   label, field, and button stacked down the left of a wide card. */
-.banner form.row {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: flex-end;
-  gap: var(--space-3);
-  margin-top: var(--space-2);
-}
-
-.banner form.row .field {
-  flex: 1 1 16rem;
-  max-width: 24rem;
-}
-
-.banner form.row .field input {
-  width: 100%;
-}
-
-.banner form.row button {
-  flex: none;
-}
-
-.inline-note {
-  font-size: 0.8125rem;
-  color: var(--wb-muted-foreground);
-  margin: 0;
-}
-
-/* A failed project load: calm and centered, not a raw red box. */
-.project-load-failure {
-  max-width: 32rem;
-  margin: var(--space-8) auto;
-  padding: var(--space-6);
-  display: grid;
-  justify-items: center;
-  gap: var(--space-2);
-  text-align: center;
-}
-
-.project-load-failure-title {
-  margin: 0;
-  font-size: 1rem;
-  font-weight: 600;
-}
-
-.project-load-failure p {
-  margin: 0;
-  color: var(--wb-muted-foreground);
-}
-
-.project-load-failure-actions {
-  margin-top: var(--space-2);
-  display: flex;
-  gap: var(--space-2);
-}
-
-.project-load-failure-details {
-  margin-top: var(--space-4);
-  width: 100%;
-  text-align: left;
-}
-
-.project-load-failure-details summary {
-  cursor: pointer;
-  color: var(--wb-muted-foreground);
-  font-size: 0.8125rem;
-}
-
-.project-load-failure-details pre {
-  margin: var(--space-2) 0;
-  padding: var(--space-3);
-  border: 1px solid var(--wb-border-strong);
-  border-radius: var(--radius-panel);
-  background: var(--wb-card);
-  white-space: pre-wrap;
-  word-break: break-word;
-  font-family: var(--wb-font-mono);
-  font-size: 0.8125rem;
-}
-
-/* ---- Responsive: desktop multi-panel -> tablet master-detail -> phone queue ---- */
-
-/* The rail narrows to icons rather than stacking on top of the work. Stacking
-   left a dead band beside a 240px aside and pushed the conversation below the
-   fold; the library collapses to a 56px icon rail and keeps its labels for
-   screen readers. */
-
-@media (max-width: 640px) {
-  .canvas {
-    padding: var(--space-4) var(--space-4) var(--space-8);
-  }
-  /* A filling surface (the workspace) is the page itself, edge to edge. */
-  .canvas:has(> .canvas-body.is-fill) {
-    padding: 0;
-  }
-  .artifact pre {
-    font-size: 0.75rem;
-  }
-  .version-list {
-    grid-template-columns: 1fr;
-  }
-}
-
-/* Version lists inside the hero read as grouped rows, per the mockup. */
-.version-list > div {
-  display: grid;
-  grid-template-columns: 144px minmax(0, 1fr);
-  gap: var(--space-4);
-  padding: var(--space-1) 0;
-  border-bottom: 1px solid var(--wb-border);
-}
-
-.version-list > div:last-child {
-  border-bottom: 0;
-}
-
-.version-list > div > dt,
-.version-list > div > dd {
-  margin: 0;
-}
-
-/* The conversation: transcript that grows upward, composer pinned beneath.
-   A flex column, not a grid: `.thread-head` and `.composer` already declare
-   `flex: none` (their fixed rows), and `.thread-turns` — the actual
-   scrolling element, from `@corbits/react-ui` — ships Tailwind's
-   `flex-1 min-h-0 overflow-y-auto`, which only takes effect under a flex
-   parent. Under `display: grid` those utilities were inert, so a short
-   viewport let the transcript's own min-content size push past its row
-   instead of shrinking and scrolling, overlapping the approve row beneath
-   it. */
-.stage-thread {
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-  background: var(--wb-background);
-  border-right: 1px solid var(--wb-border);
-}
-
-/* ChatThread brings its own transcript layout, scrolling and message
-   treatment; this only places it in the pane's flexible row. */
-.thread-turns {
-  min-height: 0;
-  /* The conversation engine writes scrollTop and reads it back in the same
-     turn. A smooth scroll reports the old position, so each correction
-     starts another one. */
-  scroll-behavior: auto;
-}
-
-/* A turn arriving. The newest row rises into place. The reserve under a
-   settled turn is not a turn; animating it moves the measurement the
-   reserve is computed from. */
-.thread-turns [data-slot="conversation-item"]:last-child {
-  animation: turn-in var(--duration-standard, 200ms) var(--ease-out, ease) both;
-}
-
-/* The record between turns — boundaries, versions, decisions, aborts — as
-   quiet mono lines; the stage's boundary is the only one with a rule. */
-/* The line itself carries its inset and, at a boundary, its rule (see
-   workspace-layout.css), so both transcripts space it alike; the library's
-   bubble around it adds neither. */
-[data-slot="message-bubble"]:has(.conv-event) {
-  text-align: left;
-  padding: 0;
-}
-
-[data-slot="agent-turn"] > span[aria-hidden] {
-  display: none;
-}
-
-/* The specialist's turns are cards on the ground; the person's stay filled. */
-[data-slot="message-bubble"].items-start
-  > div:first-child:not(:has(.thinking)) {
-  background: var(--card);
-  border: 1px solid var(--wb-border);
-  border-radius: var(--radius-lg);
-  padding: 10px 14px;
-}
-
 @keyframes turn-in {
   from {
     opacity: 0;
@@ -939,28 +231,6 @@ h3 {
   }
 }
 
-/* The specialist mid-sentence: a shine crossing the word, after aicss.dev's
-   thinking state. Motion says "working" where a static word says "stuck". */
-.thinking {
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: transparent;
-  -webkit-text-fill-color: transparent;
-  background: linear-gradient(
-    90deg,
-    var(--wb-muted-foreground) 0%,
-    var(--wb-muted-foreground) 30%,
-    color-mix(in srgb, var(--wb-muted-foreground) 40%, transparent) 45%,
-    color-mix(in srgb, var(--wb-muted-foreground) 40%, transparent) 55%,
-    var(--wb-muted-foreground) 70%,
-    var(--wb-muted-foreground) 100%
-  );
-  background-size: 300% 100%;
-  -webkit-background-clip: text;
-  background-clip: text;
-  animation: label-shine 2.25s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
-}
-
 /* While the specialist writes, a thin ring sweeps the composer's border,
    after aicss.dev's input. The wait is at the box, so the box says so. */
 @property --ring-angle {
@@ -969,34 +239,6 @@ h3 {
   initial-value: 0deg;
 }
 
-.composer > form {
-  position: relative;
-}
-
-.composer[data-working] > form::after {
-  content: "";
-  position: absolute;
-  inset: -1px;
-  border-radius: inherit;
-  padding: 2px;
-  background: conic-gradient(
-    from var(--ring-angle),
-    var(--wb-primary),
-    color-mix(in srgb, var(--wb-primary) 15%, transparent),
-    var(--wb-primary)
-  );
-  /* The mask only needs an opaque colour; which one is irrelevant. */
-  -webkit-mask:
-    linear-gradient(currentColor 0 0) content-box,
-    linear-gradient(currentColor 0 0);
-  -webkit-mask-composite: xor;
-  mask-composite: exclude;
-  animation:
-    ring-spin 1.1s linear infinite,
-    fade-in 220ms ease-out both;
-  pointer-events: none;
-}
-
 @keyframes ring-spin {
   to {
     --ring-angle: 360deg;
@@ -1025,692 +267,6 @@ h3 {
   }
 }
 
-@keyframes label-shine {
-  0%,
-  18% {
-    background-position: 100% 0;
-  }
-  82%,
-  100% {
-    background-position: 0% 0;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .thread-turns {
-    scroll-behavior: auto;
-  }
-  .thread-turns [data-slot="conversation-item"]:last-child,
-  .stage-view,
-  .composer[data-working] > form::after,
-  .thinking {
-    animation: none;
-  }
-  .thinking {
-    color: var(--wb-muted-foreground);
-    -webkit-text-fill-color: currentColor;
-  }
-}
-
-.composer {
-  padding: var(--space-2) var(--space-4) var(--space-4);
-  display: grid;
-  gap: var(--space-2);
-  flex: none;
-  position: relative;
-  /* Capped so the send, stop, attach and mic controls never leave the pane.
-     The composer itself must not scroll: the attachment tray and the model
-     list float above the box, and a scrolling composer clips them. The
-     textarea scrolls its own text, and the notes above the box give way. */
-  max-height: 70vh;
-  min-height: 0;
-}
-
-/* Errors, the earlier-document caution and suggested replies share one
-   region that scrolls once the composer reaches its cap, so the box below
-   keeps its full height. */
-.composer > .composer-notes {
-  display: grid;
-  gap: var(--space-2);
-  min-height: 0;
-  overflow-y: auto;
-}
-
-.composer > .composer-notes:empty {
-  display: none;
-}
-
-/* The box itself is a flex column: textarea body above, action row beneath.
-   Capping the box and letting the body scroll keeps the action row pinned
-   at every text length. The textarea's own cap is the library's 200px; a
-   short window gets less. */
-.composer .composer-box {
-  min-height: 0;
-  max-height: min(50vh, 480px);
-}
-
-.composer .composer-box [data-slot="prompt-input-toolbar"] {
-  flex: none;
-}
-
-/* The library's input row is `flex: 1 1 0%` beside a full-basis toolbar that wraps below it, and
-   with a content-sized textarea the row resolved to 0 px wide: one character per line, and the
-   box grew to fill the page. A full basis gives it the whole first line. */
-.home-page .composer-box > div:has(> textarea) {
-  flex: 1 1 100%;
-}
-
-/* The stage composer stacks its input above the toolbar, and the library's `items-end` then
-   shrank the input to its content against the right edge, placeholder and all. */
-.composer .composer-box > div:has(> textarea) {
-  align-self: stretch;
-}
-
-.composer .composer-box textarea,
-.home-page .composer-box textarea {
-  max-height: min(200px, 30vh);
-  overflow-y: auto;
-}
-
-.document {
-  border: 1px solid var(--wb-border);
-  background: var(--wb-card);
-  border-radius: var(--radius-panel);
-  /* Its own scroll. Without this the draft was merely clipped by the fill
-     region, so it could not be scrolled at all — and once anything scrolled
-     that hidden container (focusing the composer does, to reveal the input)
-     there was no way to scroll it back. */
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-  overflow: hidden;
-}
-
-/* In the workspace the document pane is the grey ground the strip blends
-   into; the paper is the card inside it, and the pane — not the card —
-   carries the scroll. */
-.document-layout .document {
-  display: block;
-  border: 0;
-  border-radius: 0;
-  background: var(--card);
-  overflow-y: auto;
-}
-
-.document-header {
-  display: flex;
-  gap: var(--space-4);
-  align-items: center;
-  justify-content: space-between;
-  padding: var(--space-5) var(--space-6);
-  border-bottom: 1px solid var(--wb-border);
-  flex: none;
-}
-
-.document-header h2 {
-  font-size: 1.125rem;
-  font-weight: 500;
-}
-
-/* Tracked changes: added in green, removed in red and struck through. */
-.prose ins {
-  text-decoration: none;
-  background: color-mix(in srgb, var(--wb-okay) 18%, transparent);
-  color: color-mix(in srgb, var(--wb-okay) 60%, var(--wb-foreground));
-  border-radius: 2px;
-}
-
-.prose del {
-  background: color-mix(in srgb, var(--wb-destructive) 12%, transparent);
-  color: color-mix(in srgb, var(--wb-destructive) 70%, var(--wb-foreground));
-  text-decoration: line-through;
-  border-radius: 2px;
-}
-
-/* The document itself. Measure and rhythm are the whole job here: this is the
-   one surface in the app a person reads rather than scans. */
-.prose {
-  font-size: 0.9375rem;
-  line-height: 1.7;
-}
-
-/* The measure applies to running text, not the block: a table, code fence
-   or embedded frame inside the same document reads better at the pane's
-   full width than squeezed into the same column as the prose around it.
-   Left-aligned rather than centred: the measure lines up with the document
-   header above it, and a centred column in a wide pane reads as a mistake.
-   Wide enough that the card's own width — not this cap — is usually what
-   limits a line: 80ch left a wide empty gutter once the document pane grew
-   to take the room the proportional chat column gave up. */
-.prose > :where(h1, h2, h3, h4, h5, h6, p, ul, ol, blockquote) {
-  max-width: min(120ch, 1100px);
-}
-
-.prose > * + * {
-  margin-top: 1em;
-}
-
-.prose h2,
-.prose h3,
-.prose h4 {
-  font-weight: 500;
-  line-height: 1.3;
-}
-
-.prose > h2 {
-  font-size: 1.25rem;
-  margin-top: 2em;
-}
-.prose > h3 {
-  font-size: 1.0625rem;
-  margin-top: 1.75em;
-}
-.prose > h4 {
-  font-size: 0.9375rem;
-  margin-top: 1.5em;
-  color: var(--wb-muted-foreground);
-}
-.prose > :first-child {
-  margin-top: 0;
-}
-
-.prose ul,
-.prose ol {
-  padding-left: 1.25em;
-}
-
-.prose ul {
-  list-style: disc;
-}
-
-.prose ol {
-  list-style: decimal;
-}
-
-.prose li.task {
-  list-style: none;
-  margin-left: -1.25em;
-}
-
-.prose li + li {
-  margin-top: 0.35em;
-}
-
-.prose blockquote {
-  margin-left: 0;
-  padding-left: var(--space-4);
-  border-left: 2px solid var(--wb-border-strong);
-  color: var(--wb-muted-foreground);
-}
-
-.prose code {
-  font-family: var(--wb-font-mono);
-  font-size: 0.875em;
-  background: var(--wb-muted);
-  padding: 1px var(--space-1);
-}
-
-.prose pre {
-  background: var(--wb-muted);
-  padding: var(--space-3) var(--space-4);
-  overflow-x: auto;
-}
-
-.prose pre code {
-  background: none;
-  padding: 0;
-}
-
-/* A wide table scrolls inside its own box rather than widening the page. */
-.prose-table {
-  overflow-x: auto;
-  margin: 1em 0;
-}
-
-.prose table {
-  border-collapse: collapse;
-  font-size: 0.9375em;
-}
-
-.prose th,
-.prose td {
-  border: 1px solid var(--wb-border);
-  padding: var(--space-2) var(--space-3);
-  text-align: left;
-  vertical-align: top;
-}
-
-.prose th {
-  background: var(--wb-muted);
-  font-weight: 600;
-}
-
-.prose hr {
-  border: 0;
-  border-top: 1px solid var(--wb-border);
-  margin: 2em 0;
-}
-
-.prose ::selection {
-  background: color-mix(in srgb, var(--wb-primary) 26%, transparent);
-}
-
-@media (max-width: 640px) {
-  .version-list > div {
-    grid-template-columns: 1fr;
-    gap: var(--space-1);
-  }
-}
-
-/* Connect a model: the sign-in column's rhythm and LoginForm's heading, for
-   the one screen before the project list. */
-.model-setup {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-4);
-}
-
-.model-setup hgroup {
-  display: grid;
-  gap: var(--space-2);
-}
-
-.model-setup h1 {
-  margin: 0;
-  font-size: 1.875rem;
-  font-weight: 600;
-  line-height: 1;
-  letter-spacing: -0.015em;
-  text-wrap: balance;
-}
-
-.model-setup hgroup p,
-.model-setup-later p {
-  margin: 0;
-  color: var(--wb-muted-foreground);
-  font-size: 0.875rem;
-  line-height: 1.5;
-}
-
-.provider-tiles > button {
-  gap: var(--space-2);
-  min-height: 7.5rem;
-  padding: var(--space-4);
-  border-radius: var(--radius-md);
-  cursor: pointer;
-}
-
-.provider-tiles > button svg {
-  width: 24px;
-  height: 24px;
-  color: var(--wb-foreground);
-}
-
-.model-setup-divider {
-  margin: 0;
-  border: 0;
-  border-top: 1px solid var(--wb-border);
-}
-
-.model-setup-later {
-  display: grid;
-  justify-items: center;
-  gap: var(--space-1);
-  text-align: center;
-}
-
-/* The one look for every select and menu trigger: borderless quiet text
-   that underlines on hover, as the version menu always did. A select keeps
-   room on its right for the library's chevron. */
-.quiet-control {
-  width: auto;
-  height: auto;
-  padding: 2px 4px;
-  border: 0;
-  border-radius: 4px;
-  background: transparent;
-  box-shadow: none;
-  color: var(--wb-muted-foreground);
-  font: inherit;
-  font-size: 0.8125rem;
-  text-underline-offset: 3px;
-  cursor: pointer;
-}
-
-select.quiet-control {
-  padding-right: 22px;
-}
-
-.quiet-control:hover:not(:disabled) {
-  color: var(--wb-foreground);
-  text-decoration: underline;
-}
-
-.quiet-control:focus-visible {
-  outline: 2px solid var(--wb-ring);
-  outline-offset: 2px;
-}
-
-/* Add a model provider: stacked fields, each with its label above it. DialogBody scrolls, which
-   clips at its edge; the inset keeps focus rings inside the clip without moving the fields. */
-.provider-form {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-4);
-  margin: -4px;
-  padding: 4px;
-}
-
-/* The form sits between the dialog's header and its edges, so the body scrolls and the footer stays. */
-.provider-dialog-form {
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-}
-
-.provider-field {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-.provider-hint {
-  margin: 0;
-  font-size: 0.8125rem;
-  color: var(--wb-muted-foreground);
-}
-
-.provider-cards {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
-  gap: var(--space-2);
-}
-
-.provider-card {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-1);
-  padding: 10px 12px;
-  border: 1px solid var(--wb-border);
-  border-radius: var(--radius-md);
-  background: var(--wb-card);
-  color: var(--wb-foreground);
-  font: inherit;
-  text-align: left;
-  cursor: pointer;
-  transition:
-    border-color 120ms ease-out,
-    background-color 120ms ease-out;
-}
-
-.provider-card:hover:not(:disabled) {
-  border-color: var(--wb-border-strong);
-}
-
-.provider-card[aria-checked="true"] {
-  border-color: var(--wb-primary);
-  background: color-mix(in srgb, var(--wb-primary) 8%, var(--wb-card));
-  box-shadow: inset 0 0 0 1px var(--wb-primary);
-}
-
-.provider-card:focus-visible {
-  outline: 2px solid var(--wb-ring);
-  outline-offset: 2px;
-}
-
-.provider-card:disabled {
-  cursor: default;
-  opacity: 0.6;
-}
-
-.provider-card-head {
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
-  font-size: 0.875rem;
-}
-
-.provider-card-logo {
-  display: inline-grid;
-  place-items: center;
-  flex: none;
-  width: 24px;
-  height: 24px;
-}
-
-.provider-card-logo svg {
-  width: 20px;
-  height: 20px;
-}
-
-/* A large single-question form, for the first project. */
-.ask {
-  display: grid;
-  gap: var(--space-2);
-  min-width: 0;
-}
-
-.banner-action {
-  margin-top: var(--space-1);
-}
-
-/* The generated mockup is its own page and paints on white whatever
-   theme the app wears. Height is most of the window, not a strip. */
-.design-preview {
-  width: 100%;
-  height: clamp(460px, 72vh, 1100px);
-  border: 1px solid var(--wb-border);
-  border-radius: var(--radius-md);
-  background: #fff;
-}
-
-.canvas-body.is-fill > .banner {
-  flex: none;
-  margin: var(--space-3) var(--space-4) 0;
-}
-
-/* Tabs owns the region, so the fill has to pass through it and its panel to
-   reach the conversation — otherwise the composer floats up under the last
-   message instead of sitting at the bottom of the window. */
-.canvas-body.is-fill > * {
-  flex: 1;
-  min-height: 0;
-  gap: 0;
-}
-
-.canvas-body.is-fill .document-layout {
-  flex: 1;
-  min-height: 0;
-}
-
-/* Cards are paper on the tinted canvas. */
-.canvas-body:not(.is-fill) > [data-slot="card"] {
-  background: var(--wb-background);
-  box-shadow: var(--wb-shadow);
-}
-
-/* ---- Projects: one question, then the work as cards ---- */
-.projects {
-  display: grid;
-  gap: var(--space-8);
-  max-width: 960px;
-  width: 100%;
-  margin: 0 auto;
-  padding: var(--space-8) 0 var(--space-6);
-}
-
-.start {
-  display: grid;
-  gap: var(--space-3);
-}
-
-.start h2 {
-  font-size: 1.75rem;
-  letter-spacing: -0.01em;
-}
-
-/* --- Dictation --------------------------------------------------------------
-   The microphone stands to the left of the composer, level with its send
-   button, rather than inside the input, whose layout belongs to the component
-   library. While listening the button pulses and a line under the composer
-   says so, because a live microphone must never be ambiguous. */
-.dictated {
-  display: grid;
-  gap: var(--space-1);
-  min-width: 0;
-}
-
-.dictated-row {
-  display: flex;
-  align-items: flex-end;
-  gap: var(--space-2);
-  min-width: 0;
-}
-
-.dictated-row > :last-child {
-  flex: 1;
-  min-width: 0;
-}
-
-/* Beside a plain text area the microphone sits at the top; beside a one-line
-   field, on its center line. Neither has a send button to be level with. */
-.dictated-row-start {
-  align-items: flex-start;
-}
-
-.dictated-row-center {
-  align-items: center;
-}
-
-.dictated-row-start > .dictate,
-.dictated-row-center > .dictate {
-  margin-bottom: 0;
-}
-
-/* The input's send button is 36px inside 8px of padding; the same size and
-   the same inset puts the two on one line. */
-.dictate {
-  width: 36px;
-  height: 36px;
-  margin-bottom: var(--space-2);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: var(--radius-control);
-  border: 1px solid var(--wb-border);
-  background: var(--wb-card);
-  color: var(--wb-foreground);
-  cursor: pointer;
-  flex: none;
-}
-
-.dictate svg {
-  width: 16px;
-  height: 16px;
-}
-
-.dictate:hover:not(:disabled) {
-  border-color: var(--wb-primary);
-}
-
-.dictate:disabled {
-  cursor: default;
-  opacity: 0.5;
-}
-
-/* Open: the microphone itself goes green. The waveform beside "Listening:"
-   is the input level, bar by bar, newest on the right; it moves because the
-   room does, never on its own. */
-.dictate[aria-pressed="true"] {
-  border-color: var(--wb-okay);
-  color: var(--wb-okay);
-  background: color-mix(in srgb, var(--wb-okay) 12%, var(--wb-card));
-}
-
-.dictation-state {
-  margin: 0;
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
-  min-height: 1.25rem;
-  font-size: 0.8125rem;
-  color: var(--wb-muted-foreground);
-}
-
-.dictation-state[role="alert"] {
-  color: var(--wb-destructive);
-}
-
-.menu-danger {
-  color: var(--wb-destructive);
-}
-
-/* ---- Settings: three sections, one column ---- */
-.settings {
-  display: grid;
-  gap: var(--space-6);
-  max-width: 880px;
-  width: 100%;
-  margin: 0 auto;
-  padding: var(--space-6) 0;
-}
-
-/* The stage's one view at a time. Fills the region and settles in on change. */
-.stage-view {
-  flex: 1;
-  min-height: 0;
-  display: flex;
-  flex-direction: column;
-  animation: settle-in 380ms cubic-bezier(0.22, 1, 0.36, 1) both;
-}
-
-.stage-view > .banner {
-  flex: none;
-}
-
-/* KEEP: stage-view cards + stage-conversation bounds (conv) */
-/* The plain conversation stages (no fill panel of their own): the
-   specialist's current reply and the thread below it are two stacked
-   regions, and neither had a bounded height, so a long reply just grew past
-   the fold instead of scrolling — the outer `.canvas-body.is-fill` clips
-   rather than scrolls. Each region now takes its share of `.stage-view` and
-   scrolls itself, `ChatThread`'s own `flex-1 min-h-0 overflow-y-auto` only
-   takes effect once its parent is a bounded flex box. */
-.stage-view > [data-slot="card"] {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  min-height: 0;
-  overflow: hidden;
-}
-
-.stage-view > [data-slot="card"] > div:last-child {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  min-height: 0;
-  overflow: hidden;
-}
-
-.stage-conversation {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  min-height: 0;
-  position: relative;
-}
-
-.stage-conversation > *:last-child {
-  flex: none;
-}
-
-/* Filling the window, a stage screen is the page, not a card on grey. */
-.canvas-body.is-fill > [data-slot="card"] {
-  background: var(--wb-background);
-  border: 0;
-  border-radius: 0;
-}
-
 /* Disabled is a state, not a faded brand colour. The library's `opacity-50`
    over the primary fill left the send arrow at 1.63:1 against it, which reads
    as a rendering fault rather than as "not yet". A neutral fill says the same
@@ -1754,132 +310,46 @@ button[aria-disabled="true"] {
 :root:is(.dark, .dark *) {
   --input: var(--border-strong);
 }
-
-/* The library's message bubble fills with --muted, which reads clearly on a
-   light ground and all but vanishes on a dark one (1.17:1). A hairline gives
-   the person's own message an edge in either scheme. */
-/* Only the person's own message is a filled bubble — the library aligns that
-   one to the end — so only that one takes the edge. Bordering the specialist's
-   turns would box plain prose that is meant to sit on the ground. */
-[data-slot="message-bubble"].items-end > div:first-child {
-  border: 1px solid var(--wb-border-strong);
-}
-
-/* --- Stage 3 side by side, and the likely answers under a question --- */
-
-/* The approaches a version filed, as columns. The grid fits as many as the
-   pane's width allows and stacks the rest, so a narrow pane never scrolls
-   sideways. */
-.approaches {
-  align-self: stretch;
-  margin: var(--space-4) 0 var(--space-6);
-}
-
-.approaches-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
-  gap: var(--space-4);
-}
-
-.approaches .approach-card {
-  min-width: 0;
-  gap: var(--space-3);
-  padding: var(--space-4);
-  border-radius: var(--radius-panel);
-  border-color: var(--wb-border);
-  background: var(--wb-card);
-}
-
-.approaches .approach-card[data-chosen],
-.approaches-grid:not(:has([data-chosen])) .approach-card[data-recommended] {
-  border-color: var(--wb-border-strong);
-  background: color-mix(in srgb, var(--wb-muted) 45%, var(--wb-card));
+/* --- Sidebar width ----------------------------------------------------------
+   The rail's default is a fifth of a laptop window; the conversation needs
+   it more than the two labels do. */
+[data-slot="sidebar"]:not([data-collapsed="true"]) {
+  width: 12.75rem;
 }
 
-.approach-badges {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--space-1);
-  margin-bottom: var(--space-1);
+/* Typing "fine" outside a field (flourish.tsx) makes the whole page deliberately bad for a moment. */
+:root[data-ux="fine"] body,
+:root[data-ux="fine"] body * {
+  font-family:
+    "Comic Sans MS", "Chalkboard SE", "Comic Neue", cursive !important;
 }
 
-.approaches .approach-card p,
-.approach-points ul {
-  margin: 0;
+:root[data-ux="fine"] body {
+  background: #ff00d4 !important;
+  color: #3cff00 !important;
 }
 
-.approach-points h4 {
-  margin: 0 0 var(--space-1);
-  font-size: 0.75rem;
-  font-weight: 600;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-  color: var(--wb-muted-foreground);
+:root[data-ux="fine"] #app-sidebar {
+  transform: rotate(-1.5deg) translateY(7px);
+  background: #fff200 !important;
 }
 
-.approach-points ul {
-  padding-inline-start: 1.1em;
-  list-style: disc;
+:root[data-ux="fine"] main,
+:root[data-ux="fine"] [data-slot="settings-page"] {
+  transform: rotate(0.8deg) translateX(11px);
+  background: #00e5ff !important;
 }
 
-.approach-points li + li {
-  margin-top: var(--space-1);
+:root[data-ux="fine"] button {
+  border-radius: 0 !important;
+  background: #ff6a00 !important;
+  color: #0019ff !important;
 }
 
-.approaches .approach-footer {
-  margin-top: auto;
-  padding-top: var(--space-2);
-}
-
-/* --- Pending turn ----------------------------------------------------------
-   The bubble stamps every message with a relative time. The one turn the host
-   has not recorded is the specialist still working; a time under it is noise. */
-.thread-turns div:has(> div > .thinking) time {
-  display: none;
-}
-
-/* --- Sidebar width ----------------------------------------------------------
-   The rail's default is a fifth of a laptop window; the conversation needs
-   it more than the two labels do. */
-[data-slot="sidebar"]:not([data-collapsed="true"]) {
-  width: 12.75rem;
-}
-
-/* Text with a disclosure widget (#678): the chevron turns when open. */
-.disclosure {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--space-1);
-  padding: 2px 4px;
-  border: 0;
-  background: none;
-  color: var(--wb-foreground);
-  font: inherit;
-  font-size: 0.875rem;
-  cursor: pointer;
-  border-radius: var(--radius-control);
-}
-
-.disclosure:hover {
-  background: var(--wb-muted);
-}
-
-.disclosure:focus-visible {
-  outline: 2px solid var(--wb-primary);
-  outline-offset: 2px;
-}
-
-/* ------------------------------------------------------------------ print */
-
-/* A document copied out of its pane for printing; it exists only on paper. */
-.print-sheet {
-  display: none;
-}
-
-@media print {
-  @page {
-    margin: 18mm;
-  }
+@media print {
+  @page {
+    margin: 18mm;
+  }
 
   /* The app's viewport-high, scrolling layout is set aside for the sheet,
      which flows across as many pages as the document needs. */
@@ -1888,1257 +358,4 @@ button[aria-disabled="true"] {
     height: auto !important;
     overflow: visible !important;
   }
-
-  body:has(> .print-sheet) > :not(.print-sheet) {
-    display: none !important;
-  }
-
-  /* Paper is light whatever theme the app wears, so a dark theme does not
-     print pale text. */
-  .print-sheet {
-    display: block;
-    color-scheme: light;
-    background: Canvas;
-    font-size: 11pt;
-    line-height: 1.5;
-  }
-
-  .print-sheet,
-  .print-sheet * {
-    color: CanvasText;
-  }
-
-  .print-sheet .prose {
-    font-size: inherit;
-    line-height: inherit;
-  }
-
-  .print-sheet .prose > * {
-    max-width: none;
-  }
-
-  .print-sheet .document-header {
-    margin-bottom: 8mm;
-    padding-bottom: 3mm;
-    border-bottom: 1px solid CanvasText;
-  }
-
-  .print-sheet .workspace-artifact-title {
-    margin: 0;
-    font-size: 18pt;
-    white-space: normal;
-  }
-
-  .print-sheet-status {
-    margin: 1mm 0 0;
-    font-size: 9pt;
-  }
-
-  .print-sheet :is(h1, h2, h3, h4, h5, h6) {
-    break-after: avoid;
-    break-inside: avoid;
-  }
-
-  .print-sheet :is(pre, figure, blockquote, tr, li) {
-    break-inside: avoid;
-  }
-
-  .print-sheet :is(pre, .prose-table) {
-    overflow: visible;
-  }
-
-  .print-sheet pre {
-    white-space: pre-wrap;
-  }
-}
-
-.project-info {
-  width: min(52rem, calc(100vw - 2rem));
-  max-width: none;
-}
-
-.project-info-facts {
-  margin-bottom: var(--space-4);
-}
-
-/* ---- Stage 5: the slides on screen before they are saved (#95) ---- */
-
-.slide {
-  position: relative;
-  width: 100%;
-  overflow: hidden;
-  background: var(--slide-paper);
-  color: var(--slide-ink);
-  font-family: var(--slide-body-face), sans-serif;
-  border: 1px solid var(--wb-border);
-  border-radius: var(--radius-md);
-  box-shadow: var(--wb-shadow);
-}
-
-.slide p,
-.slide ul {
-  margin: 0;
-}
-
-/* A picture in a document (#737): the PRD for people's screens, captioned. */
-.prose .prose-figure {
-  margin: 1rem 0 1.25rem;
-}
-.prose .prose-figure img {
-  display: block;
-  max-width: 100%;
-  height: auto;
-  border: 1px solid var(--wb-border, #e5e7eb);
-  border-radius: 8px;
-}
-.prose .prose-figure figcaption {
-  margin-top: 0.375rem;
-  font-size: 0.8125rem;
-  color: var(--wb-muted-foreground);
-}
-.prose .prose-missing-picture {
-  color: var(--wb-muted-foreground);
-}
-
-/* ---- Approval package preview ---- */
-
-.approval-package {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-4);
-  padding: 0 var(--space-6) var(--space-6);
-}
-
-.approval-package-tabs {
-  display: inline-flex;
-  align-self: flex-start;
-  flex-wrap: wrap;
-  gap: 0.25rem;
-  padding: 0.25rem;
-  border: 1px solid var(--wb-border);
-  border-radius: var(--radius-control);
-  background: color-mix(in srgb, var(--wb-muted) 50%, var(--wb-background));
-}
-
-.approval-package-subtab {
-  color: var(--wb-muted-foreground);
-  border: 1px solid transparent;
-}
-
-.approval-package-subtab[aria-selected="true"] {
-  background: var(--wb-card);
-  color: var(--wb-foreground);
-  border-color: var(--wb-border);
-  font-weight: 600;
-  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
-}
-
-.approval-package-slides {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-6);
-}
-
-.approval-package-slide {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-2);
-}
-
-.approval-package-slide-meta {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--space-2);
-  padding: 0 var(--space-1);
-}
-
-.approval-package-slide-index {
-  font-size: 0.75rem;
-  font-weight: 600;
-  letter-spacing: 0.05em;
-  text-transform: uppercase;
-  color: var(--wb-muted-foreground);
-}
-
-.approval-package-slide-stage {
-  position: relative;
-  width: 100%;
-  aspect-ratio: 16 / 9;
-  container-type: inline-size;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  overflow: hidden;
-  border: 1px solid var(--wb-border-strong);
-  border-radius: var(--radius-panel);
-  background: var(--slide-bg, #ffffff);
-  color: var(--slide-fg, #0f172a);
-  box-shadow:
-    0 12px 28px -8px rgba(15, 23, 42, 0.2),
-    0 4px 10px -4px rgba(15, 23, 42, 0.1);
-}
-
-@media (max-width: 640px) {
-  .approval-package-slide-stage {
-    aspect-ratio: auto;
-    min-height: 18rem;
-  }
-}
-
-.approval-package-slide-accent-bar {
-  width: 100%;
-  height: 5px;
-  flex: none;
-  background: var(--slide-accent, var(--wb-primary));
-}
-
-.approval-package-slide-canvas {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: clamp(0.625rem, 1.5cqw, 1.15rem);
-  padding: clamp(1rem, 2.8cqw, 2.25rem) clamp(1.25rem, 3.4cqw, 2.75rem)
-    clamp(0.5rem, 1.2cqw, 1rem);
-  min-height: 0;
-  overflow-y: auto;
-}
-
-.approval-package-slide-stage[data-slide-layout="title"]
-  .approval-package-slide-canvas {
-  justify-content: center;
-}
-
-.approval-package-slide-kicker {
-  display: inline-block;
-  width: 3rem;
-  height: 4px;
-  border-radius: 999px;
-  margin-bottom: var(--space-1);
-}
-
-.approval-package-slide-heading {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-2);
-}
-
-.approval-package-slide-title {
-  margin: 0;
-  font-size: clamp(1.25rem, 2.2vw, 1.65rem);
-  font-weight: 700;
-  line-height: 1.2;
-  letter-spacing: -0.015em;
-  color: var(--slide-heading, inherit);
-}
-
-.approval-package-slide-stage[data-slide-layout="title"]
-  .approval-package-slide-title {
-  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
-  line-height: 1.12;
-  letter-spacing: -0.025em;
-}
-
-.approval-package-slide-subtitle {
-  margin: 0;
-  font-size: clamp(0.925rem, 1.35vw, 1.075rem);
-  line-height: 1.5;
-  max-width: 68ch;
-  color: var(--slide-subtitle, inherit);
-}
-
-.approval-package-slide-stage[data-slide-layout="title"]
-  .approval-package-slide-subtitle {
-  font-size: clamp(1rem, 1.6vw, 1.25rem);
-  line-height: 1.55;
-  max-width: 62ch;
-}
-
-.approval-package-slide-body {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-2);
-  font-size: clamp(0.925rem, 1.3vw, 1.05rem);
-  line-height: 1.6;
-}
-
-.approval-package-slide-body p {
-  margin: 0;
-}
-
-.approval-package-slide-body ul,
-.approval-package-slide-body ol {
-  margin: 0;
-  padding-left: 1.5rem;
-  display: flex;
-  flex-direction: column;
-  gap: 0.45rem;
-}
-
-.approval-package-slide-body ul {
-  list-style: disc;
-}
-
-.approval-package-slide-body ol {
-  list-style: decimal;
-}
-
-.approval-package-slide-body li::marker {
-  color: var(--slide-accent, currentColor);
-}
-
-.approval-package-columns {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
-  gap: clamp(0.875rem, 2vw, 1.5rem);
-  flex: 1;
-  align-content: start;
-}
-
-.approval-package-column {
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-2);
-  padding: clamp(0.875rem, 1.8vw, 1.25rem);
-  border-radius: var(--radius-md);
-  background: var(--slide-column-bg, rgba(15, 23, 42, 0.035));
-  border: 1px solid var(--slide-column-border, rgba(15, 23, 42, 0.1));
-}
-
-.approval-package-column-heading {
-  margin: 0;
-  padding-bottom: var(--space-1);
-  border-bottom: 1px solid var(--slide-column-border, rgba(15, 23, 42, 0.1));
-  font-size: clamp(0.95rem, 1.35vw, 1.1rem);
-  font-weight: 600;
-  letter-spacing: -0.01em;
-}
-
-.approval-package-slide-caption {
-  margin: auto 0 0;
-  font-size: 0.875rem;
-  color: var(--slide-subtitle, var(--wb-muted-foreground));
-}
-
-.approval-package-slide-stage-footer {
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  padding: 0 clamp(1.75rem, 4.2vw, 3.25rem) clamp(0.75rem, 1.6vw, 1.25rem);
-  font-size: 0.75rem;
-  font-weight: 600;
-  letter-spacing: 0.04em;
-  opacity: 0.8;
-}
-
-.approval-package-pdf {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-4);
-}
-
-.approval-package-pdf-toolbar {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--space-3);
-  padding: var(--space-3) var(--space-4);
-  border: 1px solid var(--wb-border);
-  border-radius: var(--radius-panel);
-  background: var(--wb-card);
-}
-
-.approval-package-pdf-toolbar-meta {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: baseline;
-  gap: var(--space-2);
-}
-
-.approval-package-pdf-title {
-  font-size: 0.875rem;
-  font-weight: 600;
-  color: var(--wb-foreground);
-}
-
-.approval-package-pdf-filename {
-  font-family: var(--wb-font-mono);
-  font-size: 0.75rem;
-  color: var(--wb-muted-foreground);
-}
-
-.approval-package-pdf-toolbar-actions {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: var(--space-2);
-}
-
-.approval-package-pdf-action {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0.375rem 0.75rem;
-  border-radius: var(--radius-control);
-  border: 1px solid var(--wb-border);
-  background: var(--wb-background);
-  color: var(--wb-foreground);
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-decoration: none;
-  transition: background-color 120ms ease-out;
-}
-
-.approval-package-pdf-action:hover {
-  background: var(--wb-muted);
-}
-
-.approval-package-pdf-action-primary {
-  background: var(--wb-muted);
-  border-color: var(--wb-border-strong);
-  color: var(--wb-foreground);
-  font-weight: 600;
-}
-
-.approval-package-pdf-action-primary:hover {
-  background: color-mix(in srgb, var(--wb-muted) 85%, var(--wb-foreground));
-}
-
-.approval-package-pdf-pages {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-5);
-  padding: var(--space-5);
-  border: 1px solid var(--wb-border);
-  border-radius: var(--radius-panel);
-  background: color-mix(in srgb, var(--wb-muted) 65%, var(--wb-background));
-}
-
-.approval-package-pdf-page {
-  margin: 0 auto;
-  width: 100%;
-  max-width: 56rem;
-}
-
-.approval-package-source-link {
-  padding: 0;
-  border: 0;
-  background: none;
-  color: var(--wb-foreground);
-  font: inherit;
-  text-align: left;
-  cursor: pointer;
-  text-decoration-line: underline;
-  text-decoration-color: color-mix(
-    in srgb,
-    var(--wb-muted-foreground) 45%,
-    transparent
-  );
-  text-underline-offset: 3px;
-}
-
-.approval-package-source-link:hover {
-  color: var(--wb-primary);
-  text-decoration-color: var(--wb-primary);
-}
-
-.approval-package-source-link:focus-visible {
-  outline: 2px solid var(--wb-ring);
-  outline-offset: 2px;
-  border-radius: 2px;
-}
-
-.approval-package-source-version {
-  font-family: var(--wb-font-mono);
-  font-size: 0.8125rem;
-}
-
-.approval-package-sources {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-5);
-}
-
-.approval-package-manifest {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
-  gap: var(--space-3);
-  margin: 0;
-  padding: var(--space-4);
-  border: 1px solid var(--wb-border);
-  border-radius: var(--radius-panel);
-  background: var(--wb-card);
-}
-
-.approval-package-manifest dt {
-  font-size: 0.75rem;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-  color: var(--wb-muted-foreground);
-}
-
-.approval-package-manifest dd {
-  margin: var(--space-1) 0 0;
-  font-size: 0.9375rem;
-}
-
-.approval-package-sources-table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 0.875rem;
-}
-
-.approval-package-sources-table th,
-.approval-package-sources-table td {
-  padding: var(--space-2) var(--space-3);
-  border-bottom: 1px solid var(--wb-border);
-  text-align: left;
-}
-
-.approval-package-sources-table th {
-  font-weight: 600;
-  color: var(--wb-muted-foreground);
-}
-
-.approval-package-documents-list {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-4);
-}
-
-.approval-package-document {
-  padding: var(--space-4);
-  border: 1px solid var(--wb-border);
-  border-radius: var(--radius-panel);
-  background: var(--wb-card);
-}
-
-/* ---- Stage 5: approval package review rounds ---- */
-
-.approval-rounds-panel,
-.approval-round-section,
-.approval-round-card,
-.approval-reviewer-table,
-.approval-reviewer-list,
-.approval-reviewer-row,
-.approval-reviewer-item,
-.approval-reviewer-drawer {
-  min-width: 0;
-  max-width: 100%;
-  overflow-x: hidden;
-  box-sizing: border-box;
-}
-
-.approval-rounds-panel {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-3);
-  padding: 0 var(--space-6) 5rem;
-}
-
-.approval-rounds-empty {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: var(--space-3);
-  min-width: 0;
-}
-
-.approval-rounds-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--space-3);
-  min-width: 0;
-}
-
-.approval-rounds-header h2 {
-  margin: 0;
-  font-size: 1rem;
-  font-weight: 600;
-}
-
-.approval-rounds-actions {
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
-}
-
-.approval-rounds-list {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-3);
-  min-width: 0;
-}
-
-.approval-share-dialog {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-  padding: 0;
-  border: none;
-  background: transparent;
-  min-width: 0;
-}
-
-.approval-share-dialog .settings-reviewer-form {
-  margin-top: 0;
-  padding-top: 0;
-  border-top: none;
-}
-
-.approval-share-field {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-1);
-  font-size: 0.8125rem;
-  min-width: 0;
-}
-
-.approval-share-reviewers {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-2);
-  min-width: 0;
-}
-
-.approval-custom-persona-row {
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
-  min-width: 0;
-}
-
-.approval-save-workspace-toggle {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--space-2);
-  font-size: 0.8125rem;
-  color: var(--wb-muted-foreground);
-  cursor: pointer;
-}
-
-.approval-package-reminder {
-  margin: 0 var(--space-6) var(--space-3);
-  padding: var(--space-2) 0;
-  border: none;
-  border-bottom: 1px solid var(--wb-border);
-  background: transparent;
-  color: var(--wb-muted-foreground);
-}
-
-.approval-package-reminder p {
-  margin: 0;
-}
-
-.approval-share-actions {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 0.5rem;
-  padding-top: 0.25rem;
-}
-
-.approval-round-section,
-.approval-round-card {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-2);
-  padding: 0;
-  border: none;
-  background: transparent;
-}
-
-.approval-round-meta {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--space-2);
-  min-width: 0;
-}
-
-.approval-reviewer-table-head {
-  display: grid;
-  grid-template-columns: 1rem minmax(0, 1.1fr) minmax(0, 0.75fr) minmax(
-      0,
-      1.85fr
-    ) 5.25rem;
-  align-items: center;
-  gap: 0.75rem;
-  padding: var(--space-2) 0;
-  border-bottom: 1px solid var(--wb-border);
-  font-size: 0.75rem;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-  color: var(--wb-muted-foreground);
-  min-width: 0;
-}
-
-.approval-reviewer-table-head > span {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  text-align: left;
-}
-
-.approval-reviewer-table-head > span:last-child {
-  text-align: right;
-}
-
-.approval-reviewer-table,
-.approval-reviewer-list {
-  display: flex;
-  flex-direction: column;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.approval-reviewer-row,
-.approval-reviewer-item {
-  display: flex;
-  flex-direction: column;
-  border: none;
-  border-bottom: 1px solid var(--wb-border);
-  border-radius: 0;
-  background: transparent;
-}
-
-.approval-reviewer-row-toggle {
-  display: grid;
-  grid-template-columns: 1rem minmax(0, 1.1fr) minmax(0, 0.75fr) minmax(
-      0,
-      1.85fr
-    ) 5.25rem;
-  align-items: center;
-  gap: 0.75rem;
-  width: 100%;
-  min-width: 0;
-  max-width: 100%;
-  box-sizing: border-box;
-  padding: var(--space-2) 0;
-  border: 0;
-  background: transparent;
-  color: var(--wb-foreground);
-  font: inherit;
-  text-align: left;
-  cursor: pointer;
-}
-
-.approval-reviewer-chevron {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--wb-muted-foreground);
-}
-
-.approval-reviewer-cell-name,
-.approval-reviewer-cell-role,
-.approval-reviewer-cell-goal {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.approval-reviewer-cell-name {
-  font-weight: 500;
-  font-size: 0.875rem;
-}
-
-.approval-reviewer-cell-role {
-  font-size: 0.8125rem;
-  color: var(--wb-muted-foreground);
-}
-
-.approval-reviewer-cell-goal {
-  font-size: 0.8125rem;
-  color: var(--wb-muted-foreground);
-}
-
-.approval-reviewer-cell-status {
-  display: inline-flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: var(--space-1);
-  min-width: 0;
-  white-space: nowrap;
-}
-
-.approval-status-text,
-.approval-reviewer-cell-role .badge,
-.approval-reviewer-cell-status .badge,
-.approval-triage-item .badge {
-  border: none !important;
-  background: transparent !important;
-  padding: 0 !important;
-  font-size: 0.75rem;
-  font-weight: 500;
-  box-shadow: none !important;
-  color: var(--muted-fg, var(--wb-muted-foreground));
-}
-
-.approval-status-success,
-.approval-status-text[data-tone="success"],
-.approval-reviewer-cell-status .badge[data-tone="success"],
-.approval-triage-item .badge[data-tone="success"] {
-  color: var(--success-fg, #15803d);
-}
-
-.approval-status-warning,
-.approval-status-text[data-tone="warning"],
-.approval-reviewer-cell-status .badge[data-tone="warning"],
-.approval-triage-item .badge[data-tone="warning"] {
-  color: var(--warning-fg, #b45309);
-}
-
-.approval-status-danger,
-.approval-status-text[data-tone="danger"],
-.approval-reviewer-cell-status .badge[data-tone="danger"],
-.approval-triage-item .badge[data-tone="danger"] {
-  color: var(--danger-fg, #b91c1c);
-}
-
-.approval-status-neutral,
-.approval-status-text[data-tone="neutral"],
-.approval-reviewer-cell-status .badge[data-tone="neutral"],
-.approval-triage-item .badge[data-tone="neutral"] {
-  color: var(--muted-fg, var(--wb-muted-foreground));
-}
-
-.approval-reviewer-drawer {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr);
-  gap: 0.5rem;
-  padding: 0.625rem 1rem 0.75rem 2.25rem;
-  margin: 0;
-  align-items: start;
-  background: var(--surface-subtle, rgba(0, 0, 0, 0.015));
-  border-top: 1px solid var(--border-subtle, var(--border));
-}
-
-.approval-reviewer-drawer[hidden] {
-  display: none !important;
-}
-
-.approval-inline-fields {
-  display: flex;
-  flex-direction: column;
-  gap: 0.375rem;
-  width: 100%;
-  min-width: 0;
-}
-
-.approval-field-row {
-  display: grid;
-  grid-template-columns: 4.75rem minmax(0, 1fr) auto;
-  align-items: center;
-  gap: 0.5rem;
-  width: 100%;
-  min-width: 0;
-  min-height: 1.875rem;
-}
-
-.approval-field-label {
-  font-size: 0.75rem;
-  font-weight: 500;
-  color: var(--muted-fg, var(--wb-muted-foreground));
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.approval-field-control {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  width: 100%;
-  min-width: 0;
-}
-
-.approval-lean-input,
-.approval-lean-select {
-  width: 100%;
-  min-width: 0;
-  height: 1.75rem;
-  padding: 0.125rem 0.5rem;
-  font-size: 0.8125rem;
-  border-radius: var(--radius-sm, 0.25rem);
-  border: 1px solid transparent;
-  background: transparent;
-  transition:
-    border-color 120ms ease,
-    background-color 120ms ease;
-}
-
-.approval-lean-input:hover,
-.approval-lean-select:hover {
-  border-color: var(--border-subtle, var(--border, var(--wb-border)));
-}
-
-.approval-lean-input:focus,
-.approval-lean-select:focus {
-  border-color: var(--border, var(--wb-border));
-  background: var(--surface, transparent);
-  outline: none;
-}
-
-.approval-field-save-btn {
-  height: 1.625rem;
-  padding: 0 0.5rem;
-  font-size: 0.75rem;
-  white-space: nowrap;
-}
-
-.settings-reviewer-form {
-  margin-top: var(--space-2);
-  padding-top: var(--space-2);
-  border-top: 1px solid var(--wb-border, var(--border));
-}
-
-.settings-reviewer-form .approval-field-row {
-  grid-template-columns: 4.75rem minmax(0, 1fr);
-}
-
-.settings-reviewer-form .approval-lean-input,
-.settings-reviewer-form .approval-lean-select,
-.section-body .approval-inline-fields .approval-lean-input,
-.section-body .approval-inline-fields .approval-lean-select {
-  border: 1px solid var(--wb-border, var(--border));
-  background: var(--wb-background, transparent);
-}
-
-.settings-reviewer-form .approval-lean-input:focus,
-.settings-reviewer-form .approval-lean-select:focus,
-.section-body .approval-inline-fields .approval-lean-input:focus,
-.section-body .approval-inline-fields .approval-lean-select:focus {
-  border-color: var(--wb-primary, var(--primary));
-}
-
-.settings-reviewer-form-actions {
-  display: flex;
-  justify-content: flex-end;
-  padding-top: 0.25rem;
-}
-
-@media (max-width: 760px) {
-  .approval-reviewer-drawer {
-    padding-left: 1rem;
-  }
-}
-
-.approval-reviewer-download-head {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--space-2);
-  font-size: 0.8125rem;
-}
-
-.approval-package-checklist {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr);
-  gap: 0.375rem;
-  max-height: 18rem;
-  overflow-y: auto;
-  margin: 0;
-  padding: 0.25rem 0;
-  list-style: none;
-}
-
-.approval-download-check-item,
-.approval-package-check-row {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.375rem 0.5rem;
-  border-radius: var(--radius-sm, 0.25rem);
-  font-size: 0.8125rem;
-  color: var(--wb-foreground);
-  cursor: pointer;
-  min-width: 0;
-}
-
-.approval-download-check-item:hover,
-.approval-package-check-row:hover {
-  background: var(--wb-muted);
-}
-
-.approval-reviewer-actions {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 0.25rem;
-  padding-top: 0.125rem;
-}
-
-.approval-lean-btn,
-.approval-reviewer-actions button,
-.approval-reviewer-actions .btn {
-  height: 1.625rem;
-  padding: 0 0.5rem;
-  font-size: 0.75rem;
-  border: none;
-  background: transparent;
-  color: var(--muted-fg, var(--wb-muted-foreground));
-  box-shadow: none;
-}
-
-.approval-lean-btn:hover:not(:disabled),
-.approval-reviewer-actions button:hover:not(:disabled),
-.approval-reviewer-actions .btn:hover:not(:disabled) {
-  color: var(--fg, var(--wb-foreground));
-  background: var(--surface-hover, rgba(0, 0, 0, 0.04));
-}
-
-.approval-pane-slides-view {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-3);
-  min-width: 0;
-  max-width: 100%;
-  overflow-x: hidden;
-  box-sizing: border-box;
-}
-
-.approval-pane-slides-bar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--space-2);
-  padding: var(--space-1) 0;
-  border-bottom: 1px solid var(--wb-border);
-  min-width: 0;
-  max-width: 100%;
-  overflow-x: hidden;
-  box-sizing: border-box;
-}
-
-.approval-pane-slides-title {
-  flex: 1 1 auto;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-align: center;
-  color: var(--wb-foreground);
-}
-
-.approval-slide-deck-dialog {
-  display: flex;
-  flex-direction: column;
-  width: calc(100vw - 2rem);
-  max-width: none;
-  height: calc(100dvh - 2rem);
-  max-height: none;
-  overflow: hidden;
-}
-
-.approval-slide-deck-modal-body {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  min-height: 0;
-  overflow: auto;
-  padding: 1rem;
-}
-
-.approval-slide-deck-dialog .slides-view,
-.approval-slide-deck-modal-body .slides-view,
-.approval-slide-deck-dialog .approval-package-slides,
-.approval-slide-deck-modal-body .approval-package-slides {
-  width: min(100%, 72rem);
-  margin: 0 auto;
-}
-
-.approval-reviewer-decision {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-1);
-  padding: 0;
-  border: none;
-  background: transparent;
-  min-width: 0;
-}
-
-.approval-reviewer-decision p {
-  margin: 0;
-}
-
-.approval-reviewer-editor {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-2);
-  padding: var(--space-2) 0;
-  border: none;
-  background: transparent;
-  min-width: 0;
-}
-
-.approval-feedback-attachments {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-2);
-  font-size: 0.8125rem;
-}
-
-.approval-feedback-attach-bar {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: var(--space-2);
-}
-
-.approval-feedback-file-list {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: var(--space-2);
-}
-
-.approval-feedback-file-pill {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--space-1);
-}
-
-.approval-editor-actions {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: var(--space-2);
-}
-
-/* Approval round feedback triage items. */
-.approval-triage-list {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-}
-
-.approval-feedback-item,
-.approval-triage-item {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  padding: 0.25rem 0;
-  border: none;
-  border-bottom: 1px solid var(--border-subtle, var(--border));
-  background: transparent;
-  min-width: 0;
-}
-
-.approval-triage-item-inline {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0.25rem 0;
-  gap: 0.5rem;
-  border: none;
-  border-bottom: 1px solid var(--border-subtle, var(--border));
-  background: transparent;
-  width: 100%;
-  min-width: 0;
-}
-
-.approval-triage-item .approval-triage-item-inline {
-  padding: 0;
-  border-bottom: none;
-}
-
-.approval-triage-summary {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: var(--space-2);
-  flex: 1 1 auto;
-  min-width: 0;
-}
-
-.approval-triage-meta {
-  font-size: 0.75rem;
-  color: var(--wb-muted-foreground);
-}
-
-.approval-triage-actions {
-  display: inline-flex;
-  flex-shrink: 0;
-  align-items: center;
-  gap: 0.25rem;
-}
-
-.approval-triage-icon-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 1.5rem;
-  height: 1.5rem;
-  padding: 0;
-  border: none;
-  background: transparent;
-  box-shadow: none;
-  border-radius: var(--radius-control);
-  color: var(--wb-muted-foreground);
-}
-
-.approval-triage-icon-btn-check:hover:not(:disabled) {
-  color: #15803d;
-  background: rgba(22, 163, 74, 0.1);
-}
-
-.approval-triage-icon-btn-dismiss:hover:not(:disabled) {
-  color: #b91c1c;
-  background: rgba(220, 38, 38, 0.1);
-}
-
-.approval-triage-text {
-  margin: 0;
-  font-size: 0.8125rem;
-}
-
-.whats-new-panel {
-  padding-top: 0.75rem;
-  display: flex;
-  flex-direction: column;
-  gap: 0.875rem;
-  font-family: var(--font-sans);
-}
-
-.whats-new-copy {
-  margin: 0;
-  font-size: 0.875rem;
-  line-height: 1.55;
-  color: var(--fg);
-}
-
-.whats-new-action-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.75rem;
-  padding-top: 0.25rem;
-}
-
-.row {
-  transition: background-color 300ms ease;
-}
-
-.row[data-highlighted="true"],
-.settings-page .row[data-highlighted="true"] {
-  background: var(--surface-hover, rgba(233, 132, 40, 0.08));
-  border-radius: var(--radius-sm, 0.25rem);
-  transition: background-color 300ms ease;
 }
diff --git a/apps/web/src/workspace-menu.module.css b/apps/web/src/workspace-menu.module.css
new file mode 100644
index 00000000..e6f1ca98
--- /dev/null
+++ b/apps/web/src/workspace-menu.module.css
@@ -0,0 +1,78 @@
+/* The open workspace and its menu: the mark, the name, a chevron. */
+.trigger {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  min-height: 32px;
+  margin-left: -6px;
+  padding: 4px 6px;
+  border: 0;
+  border-radius: var(--radius-panel);
+  background: transparent;
+  color: var(--wb-foreground);
+  text-align: left;
+  cursor: pointer;
+  transition: background-color 120ms ease;
+}
+
+.trigger:hover,
+.trigger[data-state="open"] {
+  background: var(--rail-hover);
+}
+
+.trigger:focus-visible {
+  outline: 2px solid var(--wb-ring);
+  outline-offset: -2px;
+}
+
+.name {
+  flex: 1;
+  font-size: 0.9375rem;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.chevron {
+  flex: none;
+  width: 14px;
+  height: 14px;
+  color: var(--wb-muted-foreground);
+}
+
+[data-slot="sidebar"][data-collapsed="true"] .trigger {
+  flex: none;
+  margin: 0;
+}
+
+/* Collapsed, the rail shows the mark alone; the name stays for assistive tech. */
+[data-slot="sidebar"][data-collapsed="true"] :is(.name, .chevron) {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+.menu {
+  min-width: 14rem;
+}
+
+.menuName {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.menuCheck {
+  width: 14px;
+  height: 14px;
+  color: var(--wb-muted-foreground);
+}
diff --git a/apps/web/src/workspace-menu.tsx b/apps/web/src/workspace-menu.tsx
index 83e0bcf9..93b9a904 100644
--- a/apps/web/src/workspace-menu.tsx
+++ b/apps/web/src/workspace-menu.tsx
@@ -32,7 +32,8 @@ import {
 import { Check, ChevronDown, Plus } from "lucide-react";
 import { useState } from "react";
 import { toast } from "sonner";
-import { Button } from "./components.jsx";
+import { Button, Field } from "./components.jsx";
+import styles from "./workspace-menu.module.css";
 import { LogoMark } from "./flourish.tsx";
 import {
   createWorkspace,
@@ -68,15 +69,15 @@ export function WorkspaceMenu({
         <MenuTrigger asChild>
           <button
             type="button"
-            className="app-sidebar-workspace"
+            className={styles.trigger}
             aria-label={wording.workspace.menu(name)}
           >
             <LogoMark size={20} />
-            <span className="wordmark app-sidebar-name">{name}</span>
-            <ChevronDown className="app-sidebar-name" aria-hidden="true" />
+            <span className={styles.name}>{name}</span>
+            <ChevronDown className={styles.chevron} aria-hidden="true" />
           </button>
         </MenuTrigger>
-        <MenuContent align="start" className="workspace-menu">
+        <MenuContent align="start" className={styles.menu}>
           <MenuGroup>
             <MenuLabel>{wording.workspace.listLabel}</MenuLabel>
             {read.data?.list.map((workspace) => (
@@ -86,9 +87,9 @@ export function WorkspaceMenu({
                   if (workspace.id !== read.data?.openId) onOpen(workspace.id);
                 }}
               >
-                <span className="workspace-menu-name">{workspace.name}</span>
+                <span className={styles.menuName}>{workspace.name}</span>
                 {workspace.id === read.data?.openId ? (
-                  <Check aria-label="Open" className="workspace-menu-check" />
+                  <Check aria-label="Open" className={styles.menuCheck} />
                 ) : null}
               </MenuItem>
             ))}
@@ -161,7 +162,7 @@ function CreateWorkspaceDialog({
               <DialogDescription>{copy.createLead}</DialogDescription>
             </DialogHeader>
             <DialogBody>
-              <div className="field">
+              <Field>
                 <DialogFieldLabel htmlFor="workspace-name">
                   {copy.nameLabel}
                 </DialogFieldLabel>
@@ -174,7 +175,7 @@ function CreateWorkspaceDialog({
                   disabled={busy}
                   onChange={(event) => setName(event.target.value)}
                 />
-              </div>
+              </Field>
             </DialogBody>
             <DialogFooter>
               <Button variant="ghost" disabled={busy} onClick={onClose}>
diff --git a/apps/web/tsconfig.json b/apps/web/tsconfig.json
index bd26f2b4..65eb16a1 100644
--- a/apps/web/tsconfig.json
+++ b/apps/web/tsconfig.json
@@ -18,5 +18,5 @@
     "noEmit": true,
     "jsx": "react-jsx"
   },
-  "include": ["src"]
+  "include": ["src", ".storybook"]
 }
diff --git a/bun.lock b/bun.lock
index f339c17a..9727a223 100644
--- a/bun.lock
+++ b/bun.lock
@@ -133,6 +133,7 @@
         "@tanstack/react-query": "5.104.1",
         "@tanstack/react-query-persist-client": "5.104.1",
         "arktype": "catalog:",
+        "clsx": "2.1.1",
         "diff": "9.0.0",
         "idb-keyval": "6.2.2",
         "jszip": "3.10.2",
@@ -142,9 +143,12 @@
         "sonner": "2.0.8",
       },
       "devDependencies": {
+        "@storybook/react-vite": "11.0.0-beta.0",
         "@types/react": "19.3.0",
         "@types/react-dom": "19.3.0",
         "@vitejs/plugin-react": "5.2.0",
+        "storybook": "11.0.0-beta.0",
+        "typed-css-modules": "0.9.1",
         "typescript": "5.9.3",
         "vite": "6.4.5",
       },
@@ -688,6 +692,8 @@
     "tar": "7.5.22",
   },
   "packages": {
+    "@adobe/css-tools": ["@adobe/css-tools@4.5.0", "", {}, "sha512-6OzddxPio9UiWTCemp4N8cYLV2ZN1ncRnV1cVGtve7dhPOtRkleRyx32GQCYSwDYgaHU3USMm84tNsvKzRCa1Q=="],
+
     "@anthropic-ai/sandbox-runtime": ["@anthropic-ai/sandbox-runtime@0.0.81", "", { "dependencies": { "@pondwader/socks5-server": "^1.0.10", "commander": "^12.1.0", "node-forge": "^1.4.0", "zod": "^3.25.0" }, "bin": { "srt": "dist/cli.js" } }, "sha512-bjHDu87gjIR7+Oxy9jPiK3v8CvSELCzfpXa3fjqfSKdvlZET2iF51xcXILWPayTpowB3xtZeQVf2JR916nVW/w=="],
 
     "@ark/schema": ["@ark/schema@0.56.8", "", { "dependencies": { "@ark/util": "0.56.8" } }, "sha512-R05TOe85oQBGFFw2zKMuZpqkXibLKuC/aJt6VwFn5Cjc4x3NkWfhvGRpRDycNkj3ddcHnOPtIsmjVowJO9Yxdw=="],
@@ -726,6 +732,8 @@
 
     "@babel/plugin-transform-react-jsx-source": ["@babel/plugin-transform-react-jsx-source@7.29.7", "", { "dependencies": { "@babel/helper-plugin-utils": "^7.29.7" }, "peerDependencies": { "@babel/core": "^7.0.0-0" } }, "sha512-06IyK09H3wi4cGbhDBwp5gUGo0IKtnYa8tyTiephirPCK6fbobVGiXMMI5zLQ4aKEYP3wZ3ArU44o+8KMrSG/Q=="],
 
+    "@babel/runtime": ["@babel/runtime@7.29.10", "", {}, "sha512-NpugTzbKgGrNe45Ui32cN8vCFFMxVtP/9rtfwv0nP5FRDAjvYBxJcLVpYA9mr1jxP6cnIT7x9LUzuDTbWYYNRA=="],
+
     "@babel/template": ["@babel/template@7.29.7", "", { "dependencies": { "@babel/code-frame": "^7.29.7", "@babel/parser": "^7.29.7", "@babel/types": "^7.29.7" } }, "sha512-puq+Gf35oI24FeN11LkoUQFqv9uwNeWpxXZi/Ji3rRIoKAzKnxRaZ+Gkj0vKS9ZCiTESfng1N9LyOyXvo+m+Gg=="],
 
     "@babel/traverse": ["@babel/traverse@7.29.10", "", { "dependencies": { "@babel/code-frame": "^7.29.7", "@babel/generator": "^7.29.8", "@babel/helper-globals": "^7.29.7", "@babel/parser": "^7.29.9", "@babel/template": "^7.29.7", "@babel/types": "^7.29.8", "debug": "^4.3.1" } }, "sha512-B3lYAs2nkKskbgQ1nfy8Ma9ao9Q1rntTAQHrzzyDuj+TSO+X3le6PfWwqDvodsb+OumE10eMFfuMCTQSQ5iuIQ=="],
@@ -794,6 +802,12 @@
 
     "@drizzle-team/brocli": ["@drizzle-team/brocli@0.10.2", "", {}, "sha512-z33Il7l5dKjUgGULTqBsQBQwckHh5AbIuxhdsIxDDiZAzBOrZO6q9ogcWC65kU382AfynTfgNumVcNIjuIua6w=="],
 
+    "@emnapi/core": ["@emnapi/core@1.11.0", "", { "dependencies": { "@emnapi/wasi-threads": "1.2.2", "tslib": "^2.4.0" } }, "sha512-l9Oo58x0HOP5znGzVhYW9U3e5wVuA4LAZU2AGezTmkhO1CgQRFDhDg4nneHsu/t3WniXg9QrG2nIXL/ZS8ln8Q=="],
+
+    "@emnapi/runtime": ["@emnapi/runtime@1.11.0", "", { "dependencies": { "tslib": "^2.4.0" } }, "sha512-55coeOFKHv1ywEcUXJtWU5f+Jr/W5tZDvZig8DLKSwUN1JpROQ4rk/SNOQiFWmaR/VKF4zuFyW1B8JduOSv6Pg=="],
+
+    "@emnapi/wasi-threads": ["@emnapi/wasi-threads@1.2.2", "", { "dependencies": { "tslib": "^2.4.0" } }, "sha512-c95qOXkHdydNKhscBTebqEC1CVAZpyqOfVfBzQ1qgzyl3gfeldUjIggDbIZgDKsHLgnsM+igH7TJ/eAasaVuMA=="],
+
     "@emulators/core": ["@emulators/core@0.12.3", "", { "dependencies": { "jose": "^6.2.2" } }, "sha512-xbKgJKyk8inuyVDv/um8/M5FowgA7xI1UJVZYbIcRL1JxRWyPBnbo5n+EEQcypVDoZTLrXdJZ/STGBthbek2YA=="],
 
     "@emulators/google": ["@emulators/google@0.12.3", "", { "dependencies": { "@emulators/core": "0.12.3", "jose": "^6" } }, "sha512-X+YUkR6tjJFYscdsL9+UeUTlKpzdxCUfW2jKU4+yhU5s/qjI4qTikFy20yUy88FUq/0hDRBPk9H3AdeUM7Hn9w=="],
@@ -934,12 +948,16 @@
 
     "@intx/workflow-host": ["@intx/workflow-host@workspace:vendor/interchange/packages/workflow-host"],
 
+    "@isaacs/cliui": ["@isaacs/cliui@8.0.2", "", { "dependencies": { "string-width": "^5.1.2", "string-width-cjs": "npm:string-width@^4.2.0", "strip-ansi": "^7.0.1", "strip-ansi-cjs": "npm:strip-ansi@^6.0.1", "wrap-ansi": "^8.1.0", "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0" } }, "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA=="],
+
     "@isaacs/fs-minipass": ["@isaacs/fs-minipass@4.0.1", "", { "dependencies": { "minipass": "^7.0.4" } }, "sha512-wgm9Ehl2jpeqP3zw/7mo3kRHFp5MEDhqAdwy1fTGkHAwnkGOVsgpvQhL8B5n1qlb01jV3n/bI0ZfZp5lWA1k4w=="],
 
     "@isomorphic-git/idb-keyval": ["@isomorphic-git/idb-keyval@3.3.2", "", {}, "sha512-r8/AdpiS0/WJCNR/t/gsgL+M8NMVj/ek7s60uz3LmpCaTF2mEVlZJlB01ZzalgYzRLXwSPC92o+pdzjM7PN/pA=="],
 
     "@isomorphic-git/lightning-fs": ["@isomorphic-git/lightning-fs@4.7.0", "", { "dependencies": { "@isomorphic-git/idb-keyval": "3.3.2", "isomorphic-textencoder": "1.0.1", "just-debounce-it": "1.1.0", "just-once": "1.1.0" }, "bin": { "superblocktxt": "src/superblocktxt.js" } }, "sha512-eJg541itXKCOyj3DBAnd0KNY1mNgi29GCpy7FgKWsgatu/ulEKv+dMxxjhUNL68Jh3uPTaGNfeAjdJiHUYEGnw=="],
 
+    "@joshwooding/vite-plugin-react-docgen-typescript": ["@joshwooding/vite-plugin-react-docgen-typescript@0.7.0", "", { "dependencies": { "glob": "^13.0.1", "react-docgen-typescript": "^2.2.2" }, "peerDependencies": { "typescript": ">= 4.3.x", "vite": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0" }, "optionalPeers": ["typescript"] }, "sha512-qvsTEwEFefhdirGOPnu9Wp6ChfIwy2dBCRuETU3uE+4cC+PFoxMSiiEhxk4lOluA34eARHA0OxqsEUYDqRMgeQ=="],
+
     "@jridgewell/gen-mapping": ["@jridgewell/gen-mapping@0.3.13", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.0", "@jridgewell/trace-mapping": "^0.3.24" } }, "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA=="],
 
     "@jridgewell/remapping": ["@jridgewell/remapping@2.3.5", "", { "dependencies": { "@jridgewell/gen-mapping": "^0.3.5", "@jridgewell/trace-mapping": "^0.3.24" } }, "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ=="],
@@ -960,6 +978,8 @@
 
     "@napi-rs/lzma-linux-x64-gnu": ["@napi-rs/lzma-linux-x64-gnu@1.5.1", "", { "os": "linux", "cpu": "x64" }, "sha512-oTXEIha4SsuXdTA4Iyskj0kpdx2yVXdhd75c2v3xGrHFfVMsbhTPZU/nMPL4sWKo4pBHm3aucLaqGlF696dTyQ=="],
 
+    "@napi-rs/wasm-runtime": ["@napi-rs/wasm-runtime@1.2.7", "", { "dependencies": { "@tybys/wasm-util": "^0.10.3" }, "peerDependencies": { "@emnapi/core": "^1.7.1 || 2.0.0-beta.2 || 2.0.0-beta.3", "@emnapi/runtime": "^1.7.1 || 2.0.0-beta.2 || 2.0.0-beta.3" } }, "sha512-zJccwplOAbgfZju95IUHazLnx9RAPtPN2YGJXI6UbrgeaR9QfPjGrQL6ERkSAtnVCA4Q+83ApGyaX5zdpCaKkQ=="],
+
     "@noble/ciphers": ["@noble/ciphers@2.4.0", "", {}, "sha512-AnjFn0Jv92laAkvMrghlFZq4qQCIN/4DxFV/eooqtC2YTjB7kBeLMS2T9KJX4Dn+ZVXLOwK0lSgqDtx9gvxtiw=="],
 
     "@noble/hashes": ["@noble/hashes@2.4.0", "", {}, "sha512-X5XaVWZIBCT7HHZGm5I7ZQXDwLG+bGXuSrMQAW+7Zvl87h1kmc1ZB1VSRJcpUfoUrGQp4Fkoxm5kZ+Ms+aW+eA=="],
@@ -998,6 +1018,84 @@
 
     "@opentelemetry/semantic-conventions": ["@opentelemetry/semantic-conventions@1.44.0", "", {}, "sha512-E3JkOlMBi3N8OGGkbl7tFyqk2MAS6/lySRZBK3Mu7AzjF1fT8oIChH9ChE48SUWzDn9Kdwta+G/p5LJ4xW4CLQ=="],
 
+    "@oxc-parser/binding-android-arm-eabi": ["@oxc-parser/binding-android-arm-eabi@0.155.0", "", { "os": "android", "cpu": "arm" }, "sha512-A6xv7hDtnTm+xlZ7utn6rRQpRMJHRhVr3gjRGqlx0RUX84mNk0pAsy6YN/wWhuOTkaZhRrrzaLxf0NfbH77j2w=="],
+
+    "@oxc-parser/binding-android-arm64": ["@oxc-parser/binding-android-arm64@0.155.0", "", { "os": "android", "cpu": "arm64" }, "sha512-T1wWwH9/JI5g7Z4kEQwDOwhToxdDhRyOTklH+uuNpJ16m3MZFmGl+l2rKc0NHQdbVRG2LTOBsNjpW3h1BWytPA=="],
+
+    "@oxc-parser/binding-darwin-arm64": ["@oxc-parser/binding-darwin-arm64@0.155.0", "", { "os": "darwin", "cpu": "arm64" }, "sha512-ZoRB3qJxJ8DWA41jHja+YeB0lLfjBy4T+Kr15vnN1k65X3zbJt3rPZftEwN4Ju4tmA4K/T9dWWD7Z8ewQLnrVA=="],
+
+    "@oxc-parser/binding-darwin-x64": ["@oxc-parser/binding-darwin-x64@0.155.0", "", { "os": "darwin", "cpu": "x64" }, "sha512-vxtL86BtM+IgrpejA86nbTk5j0HKTIMeuaJ1fQciw6p9RfavPtIPjI7gN34owap0yG9txXBaAWpGdxokNwdqIw=="],
+
+    "@oxc-parser/binding-freebsd-x64": ["@oxc-parser/binding-freebsd-x64@0.155.0", "", { "os": "freebsd", "cpu": "x64" }, "sha512-tN6Ru5e0UVnWaIuiH8jEwnvxuxg7FvhWwSd3oe5oDhOD4ObsSr9/N6WfHLjilUWlPPj65ptwrSDH0Y7lzwTzmw=="],
+
+    "@oxc-parser/binding-linux-arm-gnueabihf": ["@oxc-parser/binding-linux-arm-gnueabihf@0.155.0", "", { "os": "linux", "cpu": "arm" }, "sha512-h4ozA5n6L6lwolsz9iwunEhKWnIVbmFRots5QxEix0H6nJ5ICpuDa7PuShuhfpIDFe3+Qvyscioyiv+9g+4Syg=="],
+
+    "@oxc-parser/binding-linux-arm-musleabihf": ["@oxc-parser/binding-linux-arm-musleabihf@0.155.0", "", { "os": "linux", "cpu": "arm" }, "sha512-058/+LardpfuUlsKIvBGk/CYoakEVcMgqYx8GgyUZeOxFWTojYLlCc1Gb60/y21v3esDhHidgiY/Zbq9LpBhaQ=="],
+
+    "@oxc-parser/binding-linux-arm64-gnu": ["@oxc-parser/binding-linux-arm64-gnu@0.155.0", "", { "os": "linux", "cpu": "arm64", "libc": "glibc" }, "sha512-nrOt2Y3xIAzu+lSPzH0864ieO+iCCXgoo9qFlGANE8Xh0cQ+RP8Wstfp+/wXN2YCyb98cAGzX0VruKYw7it/jw=="],
+
+    "@oxc-parser/binding-linux-arm64-musl": ["@oxc-parser/binding-linux-arm64-musl@0.155.0", "", { "os": "linux", "cpu": "arm64", "libc": "musl" }, "sha512-KYAayyN5hQbJPtGKtRxlyc8XYmyntOplyXSQzTDrmbz7l/GCrzQbSswvyJFBTH1LGtsZrbXOAfN52i/Kz6kLKg=="],
+
+    "@oxc-parser/binding-linux-ppc64-gnu": ["@oxc-parser/binding-linux-ppc64-gnu@0.155.0", "", { "os": "linux", "cpu": "ppc64", "libc": "glibc" }, "sha512-CSuSY5hfjtsBnHXydOj8jiNfS1qHbdPZuPz1YL1cSgK7VmNYP+QlZIbG0BBYYBgX/vYEgZwbG9mBdW4YairZ5w=="],
+
+    "@oxc-parser/binding-linux-riscv64-gnu": ["@oxc-parser/binding-linux-riscv64-gnu@0.155.0", "", { "os": "linux", "cpu": "none", "libc": "glibc" }, "sha512-7KCfOQm+Nz2N8trAXbQkal4TQ5756WVEmhm35y816YHvyFnEfVsICsiV5k0pEszNf/fRm4cm2i6i18SJ6/iCWg=="],
+
+    "@oxc-parser/binding-linux-riscv64-musl": ["@oxc-parser/binding-linux-riscv64-musl@0.155.0", "", { "os": "linux", "cpu": "none", "libc": "musl" }, "sha512-JSlhgoK+/g1TGJI5NuADx2+6syhxnQNLCWLXyO5QLFyetomcr/vIxSdiNlmyAv963YXUzCuwAwRG6npZ5xyJ1A=="],
+
+    "@oxc-parser/binding-linux-s390x-gnu": ["@oxc-parser/binding-linux-s390x-gnu@0.155.0", "", { "os": "linux", "cpu": "s390x", "libc": "glibc" }, "sha512-WFIX+dPokWp64mi434Md3U3lJaTwNxAphvGjpltoyQjGUsdXavOIRrnp9dOS34Hd75HOAwDxAI+YwWOwqmJbtg=="],
+
+    "@oxc-parser/binding-linux-x64-gnu": ["@oxc-parser/binding-linux-x64-gnu@0.155.0", "", { "os": "linux", "cpu": "x64", "libc": "glibc" }, "sha512-g6xSDC/JpbnVOz5uafMGyK3txBVRFMQTx8opv/yHXGxqV3ZMVl3bf7W8XrSnF68dmy3gM4dgReNryuE53+WkeQ=="],
+
+    "@oxc-parser/binding-linux-x64-musl": ["@oxc-parser/binding-linux-x64-musl@0.155.0", "", { "os": "linux", "cpu": "x64", "libc": "musl" }, "sha512-6/4xlxKlZJWrQ0uwDFPc0H9+xLu7068CKhX3vIDW3SbvP/lVgnVuT5v6dyugeWskWpuxqF/WJ4WKwhxjU3pG2w=="],
+
+    "@oxc-parser/binding-openharmony-arm64": ["@oxc-parser/binding-openharmony-arm64@0.155.0", "", { "os": "none", "cpu": "arm64" }, "sha512-tltklL0J0XjDxIRTBXWOBhvc2mitcmES45pIxhwDWfxRyqz7Vkeu0NekTZEIxGE4f/lXgq3vZcjjffteQOVorg=="],
+
+    "@oxc-parser/binding-win32-arm64-msvc": ["@oxc-parser/binding-win32-arm64-msvc@0.155.0", "", { "os": "win32", "cpu": "arm64" }, "sha512-alAb9TzjatUEsOeoncAziUnfdTDxfyswhalFZ9sC6plUgATIUx2NIZ0+bMn6aJ28AduS1OpG/OAisr/YISn4Ig=="],
+
+    "@oxc-parser/binding-win32-ia32-msvc": ["@oxc-parser/binding-win32-ia32-msvc@0.155.0", "", { "os": "win32", "cpu": "ia32" }, "sha512-yc5cbSfcGmRv/KpxDFuyk8adEBaWd/9HilWvBbQ4bFbus1V2PUh2mGB2Cfq9rqZTqLeiMT8x0skV+LKp9hOMgQ=="],
+
+    "@oxc-parser/binding-win32-x64-msvc": ["@oxc-parser/binding-win32-x64-msvc@0.155.0", "", { "os": "win32", "cpu": "x64" }, "sha512-8heq6jGq+rfpTDRDjoQiBHw0maQZf3IXkS99pdHQZPoTL5kyF5qyPS0RidUlSdnWDIqxXb5nux7GBD9cT+imUw=="],
+
+    "@oxc-project/types": ["@oxc-project/types@0.155.0", "", {}, "sha512-SeE8JPwW1xs1tHeNycjUtUBdhorRa8o4jlvjwk49R7/Z291i+4DQa7JJIgOm/TaYQZx+QrPQbVJ/9c8dMIZN8Q=="],
+
+    "@oxc-resolver/binding-android-arm-eabi": ["@oxc-resolver/binding-android-arm-eabi@11.21.2", "", { "os": "android", "cpu": "arm" }, "sha512-xQoCRv+gKax9KTdwdaQNnAFOai8neay7g3jExDIORzhbrejwGSJaZNTdOJHR5ziLg2joMxOCMOFMo4zuxza2uQ=="],
+
+    "@oxc-resolver/binding-android-arm64": ["@oxc-resolver/binding-android-arm64@11.21.2", "", { "os": "android", "cpu": "arm64" }, "sha512-HF5oiE2L05yInPYCFD/4uxSrEZW4SuIfn99Y6L1xnJnzl066JR+MJs2rIdstw8A2MPlAKH+13dpFPNycjqzvGg=="],
+
+    "@oxc-resolver/binding-darwin-arm64": ["@oxc-resolver/binding-darwin-arm64@11.21.2", "", { "os": "darwin", "cpu": "arm64" }, "sha512-UX4u49CVCAD8QZNELaW8eMGgMAGwFWYEPbvNsh+3r/gs4NX3KfpiACMVwRQT0EuH3uat9hM5Zl+Ppm9pJD8tgg=="],
+
+    "@oxc-resolver/binding-darwin-x64": ["@oxc-resolver/binding-darwin-x64@11.21.2", "", { "os": "darwin", "cpu": "x64" }, "sha512-J9xPx7YBkrRmJ+xl561ztnMWEc1aOyjEIxBiGX1dVb3u7bGSnfObfcZk+Pd+uM0HZAPNsQ1xvD8j52A/uOSqNQ=="],
+
+    "@oxc-resolver/binding-freebsd-x64": ["@oxc-resolver/binding-freebsd-x64@11.21.2", "", { "os": "freebsd", "cpu": "x64" }, "sha512-fRlt7OvSaQkWj6+EDTVxawVxOlqJB2QSnBfkeCyK4RTvsGctbw3BiH2Tb7DzMs7bikc4BRBpvWP5zF9K8b54Zg=="],
+
+    "@oxc-resolver/binding-linux-arm-gnueabihf": ["@oxc-resolver/binding-linux-arm-gnueabihf@11.21.2", "", { "os": "linux", "cpu": "arm" }, "sha512-gK+vPUcPQITkGwBKpZGrcDHSlU6eDGl7AQacxS2CEKAZIBHWkOVFeJwLZ4tYnA1acJqRM5lt7yYwPCVqGHIJ7A=="],
+
+    "@oxc-resolver/binding-linux-arm-musleabihf": ["@oxc-resolver/binding-linux-arm-musleabihf@11.21.2", "", { "os": "linux", "cpu": "arm" }, "sha512-L/Rgas7SrOKy/z7IH+HxSFRqVO4PuLDKLEGKvnhoCBBq3UJ0YzGBou3qMzaAGgkJwsIvX2pBF+7ojzfUhLiZxQ=="],
+
+    "@oxc-resolver/binding-linux-arm64-gnu": ["@oxc-resolver/binding-linux-arm64-gnu@11.21.2", "", { "os": "linux", "cpu": "arm64", "libc": "glibc" }, "sha512-CUEYvlX1Fk7E9kUMzuswru1J9HLxMwnpDeQGjQuI4ZH+iNCoa2X9T+pvyzrbsgl7WnIeTFTlNlHsRfVdf5g9/g=="],
+
+    "@oxc-resolver/binding-linux-arm64-musl": ["@oxc-resolver/binding-linux-arm64-musl@11.21.2", "", { "os": "linux", "cpu": "arm64", "libc": "musl" }, "sha512-ViN1ZibQyxwC67GpoP33oo+S9UyUnkog13vzQb9+v9bCNvrVzJuk0MRdacjtv/9xfRMVF/eqHFyl8YOeykI10Q=="],
+
+    "@oxc-resolver/binding-linux-ppc64-gnu": ["@oxc-resolver/binding-linux-ppc64-gnu@11.21.2", "", { "os": "linux", "cpu": "ppc64", "libc": "glibc" }, "sha512-CU1sCqWnhGqYD5I1HedHk5pujrn7ssDkNB/AEQd/pd3D/EojVSgJUlpbafwIbyhia3PgIfkvdFpRPWSALzVumA=="],
+
+    "@oxc-resolver/binding-linux-riscv64-gnu": ["@oxc-resolver/binding-linux-riscv64-gnu@11.21.2", "", { "os": "linux", "cpu": "none", "libc": "glibc" }, "sha512-jWVyZtIHca4Gb96x7dag+y69vlei7ffjrsveLkmf2ZhqEAz6ZSBnY1GWvgZUaZlwZP62A3xD092BW97Q5VGc+g=="],
+
+    "@oxc-resolver/binding-linux-riscv64-musl": ["@oxc-resolver/binding-linux-riscv64-musl@11.21.2", "", { "os": "linux", "cpu": "none", "libc": "musl" }, "sha512-LF29obFqNgBUgDX7rmUK7M4D0JQG5LxhYzn3xXmECcHU9aQAdWG7NiY052qybtesEdwHQXKNTWYQ7mTsybNvWg=="],
+
+    "@oxc-resolver/binding-linux-s390x-gnu": ["@oxc-resolver/binding-linux-s390x-gnu@11.21.2", "", { "os": "linux", "cpu": "s390x", "libc": "glibc" }, "sha512-+NYcm+cCHBbtdQQ3A4phQTSuVRYnNHz7wrl9XRAPEovcdoqi0mb1K5ZOl+jN54ZD+q1zz3V0vltbFJmzecJKmw=="],
+
+    "@oxc-resolver/binding-linux-x64-gnu": ["@oxc-resolver/binding-linux-x64-gnu@11.21.2", "", { "os": "linux", "cpu": "x64", "libc": "glibc" }, "sha512-UQqZDdG2r2HhAOsZEgufkIWHPQ886IUyuJQkoZByvzhW8j51R4UNzGBJFkTiTnLhQnggwJRdJgFWK4uY6ZVIMw=="],
+
+    "@oxc-resolver/binding-linux-x64-musl": ["@oxc-resolver/binding-linux-x64-musl@11.21.2", "", { "os": "linux", "cpu": "x64", "libc": "musl" }, "sha512-3Q9PMRjalWkT6NZ4jfujuqTCFwoWErg3y3BnOgb544B8IMw4PktiwWOigMfOHNRLMghZeJ7hpfpZf4CP7rV7Og=="],
+
+    "@oxc-resolver/binding-openharmony-arm64": ["@oxc-resolver/binding-openharmony-arm64@11.21.2", "", { "os": "none", "cpu": "arm64" }, "sha512-Eljeq3ndtyKhM+Es8LITi4Zl2htzuRZcrPMF3kMCsrILztvU6AjZ3FuEhHHKobPUB9rMpzLpJP5bDqXI7r+iog=="],
+
+    "@oxc-resolver/binding-wasm32-wasi": ["@oxc-resolver/binding-wasm32-wasi@11.21.2", "", { "dependencies": { "@emnapi/core": "1.11.0", "@emnapi/runtime": "1.11.0", "@napi-rs/wasm-runtime": "^1.1.5" }, "cpu": "none" }, "sha512-HGDbNsIywqc4LxU38+CTJNnB/6BF7rheWOJ259b4eE0aEnelYblC8x+1tEd63bp31fYne63RQz9Jb4yVnC7Yig=="],
+
+    "@oxc-resolver/binding-win32-arm64-msvc": ["@oxc-resolver/binding-win32-arm64-msvc@11.21.2", "", { "os": "win32", "cpu": "arm64" }, "sha512-iWx25CBEgH49iE9q5coEGI/jb1jl5kkCY9z6U5Og67xCkQ/WFMDc2J5U78+AE91SUxM2NqSLhJC8/PLfWnImww=="],
+
+    "@oxc-resolver/binding-win32-x64-msvc": ["@oxc-resolver/binding-win32-x64-msvc@11.21.2", "", { "os": "win32", "cpu": "x64" }, "sha512-VPoCAhKvCQTlG7vxqaBXcmuvbh77BfnGXj8g0pbvVXpm1F/R8rDVwqIWcEbMzrI1JvJlm8v7T9uMVQb6UctMRg=="],
+
     "@oxlint/binding-android-arm-eabi": ["@oxlint/binding-android-arm-eabi@1.89.0", "", { "os": "android", "cpu": "arm" }, "sha512-Pflpba5F3gRAQ12sWglRxvWTHEdAusNDvmi4Y5N1T5SY1AGkM7AixOnET8qkrnLJ/F32qAlNokO6eCknT8tmnw=="],
 
     "@oxlint/binding-android-arm64": ["@oxlint/binding-android-arm64@1.89.0", "", { "os": "android", "cpu": "arm64" }, "sha512-dYmyD1x7LaPlb79vZWUcpTShk8dI9z1I+IubtqrBxWNJaDhQdPHwcsvg7q5StTU4xWyd9AwPfLaTYFZY8NZgtQ=="],
@@ -1036,6 +1134,8 @@
 
     "@oxlint/binding-win32-x64-msvc": ["@oxlint/binding-win32-x64-msvc@1.89.0", "", { "os": "win32", "cpu": "x64" }, "sha512-hLFJ/o0f/dTJh/EW0vmcbREYSQO9tYgfiAAlsOkiLFiJuRRWvYtFELUXN5o2ijpSo/tlO1n+YlWN58tZwPG18A=="],
 
+    "@pkgjs/parseargs": ["@pkgjs/parseargs@0.11.0", "", {}, "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg=="],
+
     "@playwright/mcp": ["@playwright/mcp@0.0.83", "", { "dependencies": { "playwright": "1.64.0-alpha-1790635538000", "playwright-core": "1.64.0-alpha-1790635538000" }, "bin": { "playwright-mcp": "cli.js" } }, "sha512-oNcl+Ae2/IAjhfPeP46BfIkSakfmprY+aOtkv5MjrQ4lPav4/yNtPhL0iq8SlIM90oApWgBDUxaNKvktazUKOg=="],
 
     "@playwright/test": ["@playwright/test@1.64.1", "", { "dependencies": { "playwright": "1.64.1" }, "bin": { "playwright": "cli.js" } }, "sha512-IaYGml/nSOiZWROfPtuIL7neuu9qDOZ3TNvNljUIrhDMxiGTgPjzj/g9p9RxpS2tSepPDRY+UwAaEeiKtUvIAg=="],
@@ -1120,6 +1220,8 @@
 
     "@rolldown/pluginutils": ["@rolldown/pluginutils@1.0.0-rc.3", "", {}, "sha512-eybk3TjzzzV97Dlj5c+XrBFW57eTNhzod66y9HrBlzJ6NsCrWCp/2kaPS3K9wJmurBC0Tdw4yPjXKZqlznim3Q=="],
 
+    "@rollup/pluginutils": ["@rollup/pluginutils@5.5.1", "", { "dependencies": { "@types/estree": "^1.0.0", "estree-walker": "^2.0.2", "picomatch": "^4.0.2" }, "peerDependencies": { "rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0" }, "optionalPeers": ["rollup"] }, "sha512-P9ZvnfouRu4MSC+ilERaw6FmZs8zqKhpHxEs4aGDGWQAMzQGXnhvCSvoNwokfNvdt7t3Y5Y4p6gStQgezeIqug=="],
+
     "@rollup/rollup-android-arm-eabi": ["@rollup/rollup-android-arm-eabi@4.65.1", "", { "os": "android", "cpu": "arm" }, "sha512-5coxNSjqOI2J3NkVhlp3u+zGcyjnowQFsU9sg7MMz4UPXY4Dv63kFGLt7ConXz9CNq2i0yuOJZAF/2RMrgI2OA=="],
 
     "@rollup/rollup-android-arm64": ["@rollup/rollup-android-arm64@4.65.1", "", { "os": "android", "cpu": "arm64" }, "sha512-K0HFf6XMB3IYs+jDZ1/RRhZaVOwxNXrl0n4MDEyGDjuK7+B6K/nDJp8DCBitO3S1sK/fzNxAf9QZAny4AIUPtg=="],
@@ -1176,6 +1278,16 @@
 
     "@standard-schema/spec": ["@standard-schema/spec@1.1.0", "", {}, "sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w=="],
 
+    "@storybook/builder-vite": ["@storybook/builder-vite@11.0.0-beta.0", "", { "dependencies": { "ts-dedent": "^2.2.0" }, "peerDependencies": { "storybook": "^11.0.0-beta.0", "vite": "^6.3.0 || ^7.0.0 || ^8.0.0" } }, "sha512-Hh2CoQtU0Q/ZM1u+p1PQsk2o4GjkMKfb9tGDZlPBezqtuvqU4XzQkrkWU2AMv11K2CTZQhuHCTSJeTWz1FYimA=="],
+
+    "@storybook/global": ["@storybook/global@5.0.0", "", {}, "sha512-FcOqPAXACP0I3oJ/ws6/rrPT9WGhu915Cg8D02a9YxLo0DE9zI+a9A5gRGvmQ09fiWPukqI8ZAEoQEdWUKMQdQ=="],
+
+    "@storybook/icons": ["@storybook/icons@2.2.0", "", { "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-FpUB/xizIrV1ILhCIYFo+TtQNN9YEoLjfcnAW0JtOXL+BcM2aisSysI0B54JMWDnljriXySBHgN6ps4s9lb75A=="],
+
+    "@storybook/react": ["@storybook/react@11.0.0-beta.0", "", { "dependencies": { "@storybook/global": "^5.0.0", "react-docgen": "^8.0.2", "react-docgen-typescript": "^2.2.2" }, "peerDependencies": { "@types/react": "^18.0.0 || ^19.0.0", "@types/react-dom": "^18.0.0 || ^19.0.0", "react": "^18.0.0 || ^19.0.0", "react-dom": "^18.0.0 || ^19.0.0", "storybook": "^11.0.0-beta.0", "typescript": "^5.9.0 || ^6.0.0 || ^7.0.0" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-WjS3HQdZCHzoYqf4z6DUtpSR/26O+hPbrNf9nwAsL50VUrpUAOJuTVxieWBbql8icWVyxZ1E//4cL0T+bwzI1Q=="],
+
+    "@storybook/react-vite": ["@storybook/react-vite@11.0.0-beta.0", "", { "dependencies": { "@joshwooding/vite-plugin-react-docgen-typescript": "^0.7.0", "@rollup/pluginutils": "^5.0.2", "@storybook/builder-vite": "11.0.0-beta.0", "@storybook/react": "11.0.0-beta.0", "empathic": "^2.0.0", "magic-string": "^1.1.0", "react-docgen": "^8.0.2", "resolve": "^1.22.8", "tsconfig-paths": "^4.2.0" }, "peerDependencies": { "react": "^18.0.0 || ^19.0.0", "react-dom": "^18.0.0 || ^19.0.0", "storybook": "^11.0.0-beta.0", "typescript": "^5.9.0 || ^6.0.0 || ^7.0.0", "vite": "^6.3.0 || ^7.0.0 || ^8.0.0" } }, "sha512-nqrYNAp6JJBgXbgIXSvFxcoTdJb6noD0nGRz0EX5egO/u5iTe+ZJK2XARQCNY/JF191xEuOBevk7+X7Hw0N/ew=="],
+
     "@tanstack/query-async-storage-persister": ["@tanstack/query-async-storage-persister@5.104.1", "", { "dependencies": { "@tanstack/query-core": "5.104.1", "@tanstack/query-persist-client-core": "5.104.1" } }, "sha512-wSs/HrangoSMVW3zLifawRT9lA+fbiilPQmaY+YhxBOM/VS9oqx+MQvROHpW+hKwDpdvFmhyBjWiyDhTHL1YXg=="],
 
     "@tanstack/query-core": ["@tanstack/query-core@5.104.1", "", {}, "sha512-TiRghcrGkUTE+M4JBxvpPSpBhxvIzQairw+cksrHYGr+2uwC77yW1SY9nYxnYRYOppvucf8rEg6b5byoz4rTpw=="],
@@ -1186,6 +1298,16 @@
 
     "@tanstack/react-query-persist-client": ["@tanstack/react-query-persist-client@5.104.1", "", { "dependencies": { "@tanstack/query-persist-client-core": "5.104.1" }, "peerDependencies": { "@tanstack/react-query": "^5.104.1", "react": "^18 || ^19" } }, "sha512-kU3YaqjkwEUzUUfPF0JVg56d6gJKWHaFVqOlQztwc4C2IT0P5sv/23orrSoQqjxKaUe6Ejw5IIQtA/G12uNmow=="],
 
+    "@testing-library/dom": ["@testing-library/dom@10.4.2", "", { "dependencies": { "@babel/code-frame": "^7.10.4", "@babel/runtime": "^7.12.5", "@types/aria-query": "^5.0.1", "aria-query": "5.3.0", "dom-accessibility-api": "^0.5.9", "lz-string": "^1.5.0", "picocolors": "1.1.1", "pretty-format": "^27.0.2" } }, "sha512-yzr2S9HyAIdhz2/6qHgbs665Q7PKVcDF05vsOlHPxG1mo36gKVesdYVeDLnXgfjJ03CrKRk08knc6+E/9m8v2Q=="],
+
+    "@testing-library/jest-dom": ["@testing-library/jest-dom@6.9.1", "", { "dependencies": { "@adobe/css-tools": "^4.4.0", "aria-query": "^5.0.0", "css.escape": "^1.5.1", "dom-accessibility-api": "^0.6.3", "picocolors": "^1.1.1", "redent": "^3.0.0" } }, "sha512-zIcONa+hVtVSSep9UT3jZ5rizo2BsxgyDYU7WFD5eICBE7no3881HGeb/QkGfsJs6JTkY1aQhT7rIPC7e+0nnA=="],
+
+    "@testing-library/user-event": ["@testing-library/user-event@14.6.8", "", { "peerDependencies": { "@testing-library/dom": ">=7.21.4" } }, "sha512-vgSSqnANMnkcYR/vUNDbwS7aM3OErRLNUG8vCVVlj4oc6cKffUrccX7UAS5AmJQQNZTSibi9z5GvvRZ0aYgUCQ=="],
+
+    "@tybys/wasm-util": ["@tybys/wasm-util@0.10.4", "", { "dependencies": { "tslib": "^2.4.0" } }, "sha512-W3c4gRigFS0T/Ma4qIYF3GDAc5AQdHb1yL5znJT1Zv1YaD9Kitx656wBjvr19qbiosmZT8lWDM5BEMynUqX65A=="],
+
+    "@types/aria-query": ["@types/aria-query@5.0.4", "", {}, "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw=="],
+
     "@types/babel__core": ["@types/babel__core@7.20.5", "", { "dependencies": { "@babel/parser": "^7.20.7", "@babel/types": "^7.20.7", "@types/babel__generator": "*", "@types/babel__template": "*", "@types/babel__traverse": "*" } }, "sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA=="],
 
     "@types/babel__generator": ["@types/babel__generator@7.27.0", "", { "dependencies": { "@babel/types": "^7.0.0" } }, "sha512-ufFd2Xi92OAVPYsy+P4n7/U7e68fex0+Ee8gSG9KX7eo084CWiQ4sdxktvdl0bOPupXtVJPY19zk6EwWqUQ8lg=="],
@@ -1196,6 +1318,12 @@
 
     "@types/bun": ["@types/bun@1.4.4", "", { "dependencies": { "bun-types": "1.4.4" } }, "sha512-9wkRDXUXK124pEnAutE6n/l18j+i9GC5IAHK8TmX/2nlySETmky0OU6yL5U8pW1AoKh++AN9auDCr647BfurjQ=="],
 
+    "@types/chai": ["@types/chai@5.2.3", "", { "dependencies": { "@types/deep-eql": "*", "assertion-error": "^2.0.1" } }, "sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA=="],
+
+    "@types/deep-eql": ["@types/deep-eql@4.0.2", "", {}, "sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw=="],
+
+    "@types/doctrine": ["@types/doctrine@0.0.9", "", {}, "sha512-eOIHzCUSH7SMfonMG1LsC2f8vxBFtho6NGBznK41R84YzPuvSBzrhEps33IsQiOW9+VL6NQ9DbjQJznk/S4uRA=="],
+
     "@types/estree": ["@types/estree@1.0.9", "", {}, "sha512-GhdPgy1el4/ImP05X05Uw4cw2/M93BCUmnEvWZNStlCzEKME4Fkk+YpoA5OiHNQmoS7Cafb8Xa3Pya8m1Qrzeg=="],
 
     "@types/json-schema": ["@types/json-schema@7.0.15", "", {}, "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA=="],
@@ -1210,6 +1338,8 @@
 
     "@types/react-dom": ["@types/react-dom@19.3.0", "", { "peerDependencies": { "@types/react": "^19.3.0" } }, "sha512-ZI7bU42mZXXKHn/qNLEw2IrbiINU7X5+vfgdixBHkCNpYWXjKgfQ/P+uyGb5CjOLB9UcnTeg3rylQtV2hym44Q=="],
 
+    "@types/resolve": ["@types/resolve@1.20.6", "", {}, "sha512-A4STmOXPhMUtHH+S6ymgE2GiBSMqf4oTvcQZMcHzokuTLVYzXTB8ttjcgxOVaAp2lGwEdzZ0J+cRbbeevQj1UQ=="],
+
     "@types/semver": ["@types/semver@7.8.0", "", {}, "sha512-1mAINjtQCXXeLkJ9ehXkwOcBpqtLxiVtKhpUf83DdRNdQKV0iXZpaHYqRr7nj+wvxuJzoAmAwXI+sCNMv1CzLQ=="],
 
     "@types/ssri": ["@types/ssri@7.1.5", "", { "dependencies": { "@types/node": "*" } }, "sha512-odD/56S3B51liILSk5aXJlnYt99S6Rt9EFDDqGtJM26rKHApHcwyU/UoYHrzKkdkHMAIquGWCuHtQTbes+FRQw=="],
@@ -1218,6 +1348,14 @@
 
     "@vitejs/plugin-react": ["@vitejs/plugin-react@5.2.0", "", { "dependencies": { "@babel/core": "^7.29.0", "@babel/plugin-transform-react-jsx-self": "^7.27.1", "@babel/plugin-transform-react-jsx-source": "^7.27.1", "@rolldown/pluginutils": "1.0.0-rc.3", "@types/babel__core": "^7.20.5", "react-refresh": "^0.18.0" }, "peerDependencies": { "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0" } }, "sha512-YmKkfhOAi3wsB1PhJq5Scj3GXMn3WvtQ/JC0xoopuHoXSdmtdStOpFrYaT1kie2YgFBcIe64ROzMYRjCrYOdYw=="],
 
+    "@vitest/expect": ["@vitest/expect@3.2.4", "", { "dependencies": { "@types/chai": "^5.2.2", "@vitest/spy": "3.2.4", "@vitest/utils": "3.2.4", "chai": "^5.2.0", "tinyrainbow": "^2.0.0" } }, "sha512-Io0yyORnB6sikFlt8QW5K7slY4OjqNX9jmJQ02QDda8lyM6B5oNgVWoSoKPac8/kgnCUzuHQKrSLtu/uOqqrig=="],
+
+    "@vitest/pretty-format": ["@vitest/pretty-format@3.2.4", "", { "dependencies": { "tinyrainbow": "^2.0.0" } }, "sha512-IVNZik8IVRJRTr9fxlitMKeJeXFFFN0JaB9PHPGQ8NKQbGpfjlTx9zO4RefN8gp7eqjNy8nyK3NZmBzOPeIxtA=="],
+
+    "@vitest/spy": ["@vitest/spy@3.2.4", "", { "dependencies": { "tinyspy": "^4.0.3" } }, "sha512-vAfasCOe6AIK70iP5UD11Ac4siNUNJ9i/9PZ3NKx07sG6sUxeag1LWdNrMWeKKYBLlzuK+Gn65Yd5nyL6ds+nw=="],
+
+    "@vitest/utils": ["@vitest/utils@3.2.4", "", { "dependencies": { "@vitest/pretty-format": "3.2.4", "loupe": "^3.1.4", "tinyrainbow": "^2.0.0" } }, "sha512-fB2V0JFrQSMsCo9HiSq3Ezpdv4iYaXRG1Sx8edX3MwxfyNn83mKiGzOcH+Fkxt4MHxr3y42fQi1oeAInqgX2QA=="],
+
     "@vscode/ripgrep": ["@vscode/ripgrep@1.18.0", "", { "optionalDependencies": { "@vscode/ripgrep-darwin-arm64": "1.18.0", "@vscode/ripgrep-darwin-x64": "1.18.0", "@vscode/ripgrep-linux-arm": "1.18.0", "@vscode/ripgrep-linux-arm64": "1.18.0", "@vscode/ripgrep-linux-ia32": "1.18.0", "@vscode/ripgrep-linux-ppc64": "1.18.0", "@vscode/ripgrep-linux-riscv64": "1.18.0", "@vscode/ripgrep-linux-s390x": "1.18.0", "@vscode/ripgrep-linux-x64": "1.18.0", "@vscode/ripgrep-win32-arm64": "1.18.0", "@vscode/ripgrep-win32-ia32": "1.18.0", "@vscode/ripgrep-win32-x64": "1.18.0" } }, "sha512-ns5lWe44tSfbTMbVUsyB+I1819PVSw4AdpgK0RNkzfWfwy6+3IUNSxwSrfTno1/oWaS/hERNz+XLWVyga2aJBQ=="],
 
     "@vscode/ripgrep-darwin-arm64": ["@vscode/ripgrep-darwin-arm64@1.18.0", "", { "os": "darwin", "cpu": "arm64" }, "sha512-r3ktHSvbFycQNF6sl7sNDPocpsI7J+mEzh1IaZFkY0spm3k2Z9t8hPAeOK7+p0l6p6/swkQC14XWX01low+94Q=="],
@@ -1244,6 +1382,8 @@
 
     "@vscode/ripgrep-win32-x64": ["@vscode/ripgrep-win32-x64@1.18.0", "", { "os": "win32", "cpu": "x64" }, "sha512-KNPvtElldqILHdnAetujPaowkNbpqJy3ssIGGN6F6Kve9Qi+nNLI2DN01O83JjCEVQbCzl8Ov3QZ9Eov3BR8Dg=="],
 
+    "@webcontainer/env": ["@webcontainer/env@1.1.1", "", {}, "sha512-6aN99yL695Hi9SuIk1oC88l9o0gmxL1nGWWQ/kNy81HigJ0FoaoTXpytCj6ItzgyCEwA9kF1wixsTuv5cjsgng=="],
+
     "abort-controller": ["abort-controller@3.0.0", "", { "dependencies": { "event-target-shim": "^5.0.0" } }, "sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg=="],
 
     "agent-base": ["agent-base@7.1.4", "", {}, "sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ=="],
@@ -1254,17 +1394,23 @@
 
     "ansi-styles": ["ansi-styles@4.3.0", "", { "dependencies": { "color-convert": "^2.0.1" } }, "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg=="],
 
+    "anymatch": ["anymatch@3.1.3", "", { "dependencies": { "normalize-path": "^3.0.0", "picomatch": "^2.0.4" } }, "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw=="],
+
     "aria-hidden": ["aria-hidden@1.2.6", "", { "dependencies": { "tslib": "^2.0.0" } }, "sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA=="],
 
+    "aria-query": ["aria-query@5.3.0", "", { "dependencies": { "dequal": "^2.0.3" } }, "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A=="],
+
     "arkregex": ["arkregex@0.0.14", "", { "dependencies": { "@ark/util": "0.56.8" } }, "sha512-G3I/uCtWE0IKQiPh0qqmmAFDdtjZKZQ5mNPR6gJBeAMZ7VqYCpoaDeXnLju2Zo6ywExtmxZJELeVFb0MPDjPyA=="],
 
     "arktype": ["arktype@2.2.9", "", { "dependencies": { "@ark/schema": "0.56.8", "@ark/util": "0.56.8", "arkregex": "0.0.14" } }, "sha512-Cja0IMEn19rB35on9da1i1z6QMasuS7ULffXbetCry09jvCGYT8Bi1KgYiqri5FymF4nQAXkM90yksYkgSK2EA=="],
 
+    "assertion-error": ["assertion-error@2.0.1", "", {}, "sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA=="],
+
     "async-lock": ["async-lock@1.4.1", "", {}, "sha512-Az2ZTpuytrtqENulXwO3GGv1Bztugx6TT37NIo7imr/Qo0gsYiGtSdBa2B6fsXhTpVZDNfu1Qn3pk531e3q+nQ=="],
 
     "available-typed-arrays": ["available-typed-arrays@1.0.7", "", { "dependencies": { "possible-typed-array-names": "^1.0.0" } }, "sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ=="],
 
-    "balanced-match": ["balanced-match@4.0.4", "", {}, "sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA=="],
+    "balanced-match": ["balanced-match@1.0.2", "", {}, "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="],
 
     "base64-js": ["base64-js@1.5.1", "", {}, "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA=="],
 
@@ -1274,7 +1420,11 @@
 
     "better-call": ["better-call@1.4.4", "", { "dependencies": { "@better-auth/utils": "^0.5.0", "@better-fetch/fetch": "^1.3.1", "rou3": "^0.9.1", "set-cookie-parser": "^3.1.2" }, "peerDependencies": { "zod": "^4.0.0" }, "optionalPeers": ["zod"] }, "sha512-Gq4XdGFy4dmUxFEAX2nj0ycFcFbD9ZWh8YROouZoyXeF1M11TpYbplk0pDByTFF8Wz+MYa6W9052c9m7dD+mfw=="],
 
-    "brace-expansion": ["brace-expansion@5.0.12", "", { "dependencies": { "balanced-match": "^4.0.2" } }, "sha512-YovQ3rzhaLMIrDjNDMkNS01tea93qhEhG5xy8f6+R0l+dw3Ki+5sCoIoI942iuLZTHWogWktgwVDhU09iNEimQ=="],
+    "binary-extensions": ["binary-extensions@2.3.0", "", {}, "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw=="],
+
+    "brace-expansion": ["brace-expansion@2.1.7", "", { "dependencies": { "balanced-match": "^1.0.0" } }, "sha512-uZbew1NqdmPDTMJ8ah1y+b+9QEJrfkXFk3RcTQw3X0jW/xRUvFKsg1CfQdSYGdTbXZWExtU3J3ccxtnfw1Fi0g=="],
+
+    "braces": ["braces@3.0.3", "", { "dependencies": { "fill-range": "^7.1.1" } }, "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA=="],
 
     "browserslist": ["browserslist@4.29.5", "", { "dependencies": { "baseline-browser-mapping": "^2.11.33", "caniuse-lite": "^1.0.30001819", "electron-to-chromium": "^1.5.464", "node-releases": "^2.0.60", "update-browserslist-db": "^1.3.4" }, "bin": { "browserslist": "cli.js" } }, "sha512-khTmKu5NGYTotqcYo8Bew2k4RAE9PuXRSFRXG2lQBrCEQHyeQ/vX6gKMxfokwywBsLiXZMnHsmWMG1pnO8J7uQ=="],
 
@@ -1284,6 +1434,8 @@
 
     "bun-types": ["bun-types@1.4.4", "", { "dependencies": { "@types/node": "*", "undici-types": "*" } }, "sha512-yjrJh5oGX7mMPKGd19YXyIjmEuj4G4zNC30bs7PM9Az7NQ3ndF3j6hbeRdvJTRQEhJ/FYQwW0a2moweEi2hMxQ=="],
 
+    "bundle-name": ["bundle-name@4.1.1", "", { "dependencies": { "run-applescript": "^7.0.0" } }, "sha512-DdH81/zPLVS11EUgWq3tEu/xn+EzljlMYooDNdzWEnFha3R3NBMpMV1UqYIpjYHV/SgpFKMIX1Oh7o06SjM/oA=="],
+
     "cacache": ["cacache@20.0.4", "", { "dependencies": { "@npmcli/fs": "^5.0.0", "fs-minipass": "^3.0.0", "glob": "^13.0.0", "lru-cache": "^11.1.0", "minipass": "^7.0.3", "minipass-collect": "^2.0.1", "minipass-flush": "^1.0.5", "minipass-pipeline": "^1.2.4", "p-map": "^7.0.2", "ssri": "^13.0.0" } }, "sha512-M3Lab8NPYlZU2exsL3bMVvMrMqgwCnMWfdZbK28bn3pK6APT/Te/I8hjRPNu1uwORY9a1eEQoifXbKPQMfMTOA=="],
 
     "call-bind": ["call-bind@1.0.9", "", { "dependencies": { "call-bind-apply-helpers": "^1.0.2", "es-define-property": "^1.0.1", "get-intrinsic": "^1.3.0", "set-function-length": "^1.2.2" } }, "sha512-a/hy+pNsFUTR+Iz8TCJvXudKVLAnz/DyeSUo10I5yvFDQJBFU2s9uqQpoSrJlroHUKoKqzg+epxyP9lqFdzfBQ=="],
@@ -1292,8 +1444,18 @@
 
     "call-bound": ["call-bound@1.0.4", "", { "dependencies": { "call-bind-apply-helpers": "^1.0.2", "get-intrinsic": "^1.3.0" } }, "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg=="],
 
+    "camelcase": ["camelcase@6.3.0", "", {}, "sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA=="],
+
     "caniuse-lite": ["caniuse-lite@1.0.30001819", "", {}, "sha512-LFUqIIAwpzsIuevnKnsR9qnStBcgzPShTX61lBwN9uFkkf8o8zLiebEjbW8AYtZiF+1YKDWfdt/pWDtMuG8Xwg=="],
 
+    "chai": ["chai@5.3.3", "", { "dependencies": { "assertion-error": "^2.0.1", "check-error": "^2.1.1", "deep-eql": "^5.0.1", "loupe": "^3.1.0", "pathval": "^2.0.0" } }, "sha512-4zNhdJD/iOjSH0A05ea+Ke6MU5mmpQcbQsSOkgdaUMJ9zTlDTD/GYlwohmIE2u0gaxHYiVHEn1Fw9mZ/ktJWgw=="],
+
+    "chalk": ["chalk@4.1.2", "", { "dependencies": { "ansi-styles": "^4.1.0", "supports-color": "^7.1.0" } }, "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA=="],
+
+    "check-error": ["check-error@2.1.3", "", {}, "sha512-PAJdDJusoxnwm1VwW07VWwUN1sl7smmC3OKggvndJFadxxDRyFJBX/ggnu/KE4kQAB7a3Dp8f/YXC1FlUprWmA=="],
+
+    "chokidar": ["chokidar@3.6.0", "", { "dependencies": { "anymatch": "~3.1.2", "braces": "~3.0.2", "glob-parent": "~5.1.2", "is-binary-path": "~2.1.0", "is-glob": "~4.0.1", "normalize-path": "~3.0.0", "readdirp": "~3.6.0" }, "optionalDependencies": { "fsevents": "~2.3.2" } }, "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw=="],
+
     "chownr": ["chownr@3.0.0", "", {}, "sha512-+IxzY9BZOQd/XuYPRmrvEVjF/nqj5kgT4kEq7VofrDoM1MxoRjEWkrCC3EtLi59TVawxTAn+orJwFQcrqEN1+g=="],
 
     "class-variance-authority": ["class-variance-authority@0.7.1", "", { "dependencies": { "clsx": "^2.1.1" } }, "sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg=="],
@@ -1318,32 +1480,56 @@
 
     "crc-32": ["crc-32@1.2.2", "", { "bin": { "crc32": "bin/crc32.njs" } }, "sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ=="],
 
+    "cross-spawn": ["cross-spawn@7.0.6", "", { "dependencies": { "path-key": "^3.1.0", "shebang-command": "^2.0.0", "which": "^2.0.1" } }, "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA=="],
+
+    "css.escape": ["css.escape@1.5.1", "", {}, "sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg=="],
+
+    "cssesc": ["cssesc@3.0.0", "", { "bin": { "cssesc": "bin/cssesc" } }, "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg=="],
+
     "csstype": ["csstype@3.2.3", "", {}, "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ=="],
 
     "debug": ["debug@4.4.3", "", { "dependencies": { "ms": "^2.1.3" }, "peerDependencies": { "supports-color": "*" }, "optionalPeers": ["supports-color"] }, "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA=="],
 
     "decompress-response": ["decompress-response@6.0.0", "", { "dependencies": { "mimic-response": "^3.1.0" } }, "sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ=="],
 
+    "deep-eql": ["deep-eql@5.0.2", "", {}, "sha512-h5k/5U50IJJFpzfL6nO9jaaumfjO/f2NjK/oYB2Djzm4p9L+3T9qWpZqZ2hAbLPuuYq9wrU08WQyBTL5GbPk5Q=="],
+
+    "default-browser": ["default-browser@5.5.1", "", { "dependencies": { "bundle-name": "^4.1.0", "default-browser-id": "^5.0.0" } }, "sha512-m1pAzaJgZ/gssEqlOhJkPJp8Xly7QyW6xcrkUa2KKcDeDSEMP7X8xipU3snUcfisTQx0w1AGae+9UtJSfVnXGw=="],
+
+    "default-browser-id": ["default-browser-id@5.0.1", "", {}, "sha512-x1VCxdX4t+8wVfd1so/9w+vQ4vx7lKd2Qp5tDRutErwmR85OgmfX7RlLRMWafRMY7hbEiXIbudNrjOAPa/hL8Q=="],
+
     "define-data-property": ["define-data-property@1.1.4", "", { "dependencies": { "es-define-property": "^1.0.0", "es-errors": "^1.3.0", "gopd": "^1.0.1" } }, "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A=="],
 
+    "define-lazy-prop": ["define-lazy-prop@3.0.0", "", {}, "sha512-N+MeXYoqr3pOgn8xfyRPREN7gHakLYjhsHhWGT3fWAiL4IkAt0iDw14QiiEm2bE30c5XX5q0FtAA3CK5f9/BUg=="],
+
     "defu": ["defu@6.1.7", "", {}, "sha512-7z22QmUWiQ/2d0KkdYmANbRUVABpZ9SNYyH5vx6PZ+nE5bcC0l7uFvEfHlyld/HcGBFTL536ClDt3DEcSlEJAQ=="],
 
+    "dequal": ["dequal@2.0.3", "", {}, "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA=="],
+
     "detect-node-es": ["detect-node-es@1.1.0", "", {}, "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ=="],
 
     "diff": ["diff@9.0.0", "", {}, "sha512-svtcdpS8CgJyqAjEQIXdb3OjhFVVYjzGAPO8WGCmRbrml64SPw/jJD4GoE98aR7r25A0XcgrK3F02yw9R/vhQw=="],
 
     "diff3": ["diff3@0.0.3", "", {}, "sha512-iSq8ngPOt0K53A6eVr4d5Kn6GNrM2nQZtC740pzIriHtn4pOQ2lyzEXQMBeVcWERN0ye7fhBsk9PbLLQOnUx/g=="],
 
+    "doctrine": ["doctrine@3.0.0", "", { "dependencies": { "esutils": "^2.0.2" } }, "sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w=="],
+
+    "dom-accessibility-api": ["dom-accessibility-api@0.5.16", "", {}, "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg=="],
+
     "drizzle-kit": ["drizzle-kit@0.31.9", "", { "dependencies": { "@drizzle-team/brocli": "^0.10.2", "@esbuild-kit/esm-loader": "^2.5.5", "esbuild": "^0.25.4", "esbuild-register": "^3.5.0" }, "bin": { "drizzle-kit": "bin.cjs" } }, "sha512-GViD3IgsXn7trFyBUUHyTFBpH/FsHTxYJ66qdbVggxef4UBPHRYxQaRzYLTuekYnk9i5FIEL9pbBIwMqX/Uwrg=="],
 
     "drizzle-orm": ["drizzle-orm@0.45.4", "", { "peerDependencies": { "@aws-sdk/client-rds-data": ">=3", "@cloudflare/workers-types": ">=4", "@electric-sql/pglite": ">=0.2.0", "@libsql/client": ">=0.10.0", "@libsql/client-wasm": ">=0.10.0", "@neondatabase/serverless": ">=0.10.0", "@netlify/db": ">=0.4.0", "@op-engineering/op-sqlite": ">=2", "@opentelemetry/api": "^1.4.1", "@planetscale/database": ">=1.13", "@prisma/client": "*", "@tidbcloud/serverless": "*", "@types/better-sqlite3": "*", "@types/pg": "*", "@types/sql.js": "*", "@upstash/redis": ">=1.34.7", "@vercel/postgres": ">=0.8.0", "@xata.io/client": "*", "better-sqlite3": ">=7", "bun-types": "*", "expo-sqlite": ">=14.0.0", "gel": ">=2", "knex": "*", "kysely": "*", "mysql2": ">=2", "pg": ">=8", "postgres": ">=3", "prisma": "*", "sql.js": ">=1", "sqlite3": ">=5" }, "optionalPeers": ["@aws-sdk/client-rds-data", "@cloudflare/workers-types", "@electric-sql/pglite", "@libsql/client", "@libsql/client-wasm", "@neondatabase/serverless", "@netlify/db", "@op-engineering/op-sqlite", "@opentelemetry/api", "@planetscale/database", "@prisma/client", "@tidbcloud/serverless", "@types/better-sqlite3", "@types/pg", "@types/sql.js", "@upstash/redis", "@vercel/postgres", "@xata.io/client", "better-sqlite3", "bun-types", "expo-sqlite", "gel", "knex", "kysely", "mysql2", "pg", "postgres", "prisma", "sql.js", "sqlite3"] }, "sha512-NiM1YZpJ2UxyeE67DpDDZ+Tsw4YLX3trSlkNT7Tm9eKoUNb1LvaAaQzXgYQsWs+AQ9TUmmwMmBOCXuqqxUWKKQ=="],
 
     "dunder-proto": ["dunder-proto@1.0.1", "", { "dependencies": { "call-bind-apply-helpers": "^1.0.1", "es-errors": "^1.3.0", "gopd": "^1.2.0" } }, "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A=="],
 
+    "eastasianwidth": ["eastasianwidth@0.2.0", "", {}, "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA=="],
+
     "electron-to-chromium": ["electron-to-chromium@1.5.467", "", {}, "sha512-Nw9X371rtZmYcBSnEijnCDONILjs93biCZO34juC7MBOmK8E+GFnyD4T/WvyrlJkppul7oxg6TwvtKst9SODTw=="],
 
     "emoji-regex": ["emoji-regex@8.0.0", "", {}, "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="],
 
+    "empathic": ["empathic@2.1.0", "", {}, "sha512-AnfC1ATldl49/cvZdLPDjBfrRNwbDO05aibiOtzQu3qtlbJtomNLhF30HEtn/7iBz50dlMECqATo3fG0LrdEgw=="],
+
     "es-define-property": ["es-define-property@1.0.1", "", {}, "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g=="],
 
     "es-errors": ["es-errors@1.3.0", "", {}, "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw=="],
@@ -1356,6 +1542,10 @@
 
     "escalade": ["escalade@3.2.0", "", {}, "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA=="],
 
+    "estree-walker": ["estree-walker@2.0.2", "", {}, "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="],
+
+    "esutils": ["esutils@2.0.3", "", {}, "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g=="],
+
     "event-target-shim": ["event-target-shim@5.0.1", "", {}, "sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ=="],
 
     "events": ["events@3.3.0", "", {}, "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q=="],
@@ -1368,8 +1558,12 @@
 
     "fdir": ["fdir@6.5.0", "", { "peerDependencies": { "picomatch": "^3 || ^4" }, "optionalPeers": ["picomatch"] }, "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg=="],
 
+    "fill-range": ["fill-range@7.1.1", "", { "dependencies": { "to-regex-range": "^5.0.1" } }, "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg=="],
+
     "for-each": ["for-each@0.3.5", "", { "dependencies": { "is-callable": "^1.2.7" } }, "sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg=="],
 
+    "foreground-child": ["foreground-child@3.3.1", "", { "dependencies": { "cross-spawn": "^7.0.6", "signal-exit": "^4.0.1" } }, "sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw=="],
+
     "fs-minipass": ["fs-minipass@3.0.3", "", { "dependencies": { "minipass": "^7.0.3" } }, "sha512-XUBA9XClHbnJWSfBzjkm6RvPsyg3sryZt06BEQoXcF7EK/xpGaQYJgQKDJSUH5SGZ76Y7pFx1QBnXz09rU5Fbw=="],
 
     "fsevents": ["fsevents@2.3.3", "", { "os": "darwin" }, "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw=="],
@@ -1388,10 +1582,14 @@
 
     "get-tsconfig": ["get-tsconfig@4.14.3", "", { "dependencies": { "resolve-pkg-maps": "^1.0.0" } }, "sha512-++QEw4DIY7WGoukz+/+A/8dGYPT9l9yIadnmSgZ8Rjr3YVSVDipQSO9CdnJo9ePqFqUUqh+wk9uIaoiAwsiPkA=="],
 
-    "glob": ["glob@13.0.6", "", { "dependencies": { "minimatch": "^10.2.2", "minipass": "^7.1.3", "path-scurry": "^2.0.2" } }, "sha512-Wjlyrolmm8uDpm/ogGyXZXb1Z+Ca2B8NbJwqBVg0axK9GbBeoS7yGV6vjXnYdGm6X53iehEuxxbyiKp8QmN4Vw=="],
+    "glob": ["glob@10.5.0", "", { "dependencies": { "foreground-child": "^3.1.0", "jackspeak": "^3.1.2", "minimatch": "^9.0.4", "minipass": "^7.1.2", "package-json-from-dist": "^1.0.0", "path-scurry": "^1.11.1" }, "bin": { "glob": "dist/esm/bin.mjs" } }, "sha512-DfXN8DfhJ7NH3Oe7cFmu3NCu1wKbkReJ8TorzSAFbSKrlNaQSKfIzqYqVY8zlbs2NLBbWpRiU52GX2PbaBVNkg=="],
+
+    "glob-parent": ["glob-parent@5.1.2", "", { "dependencies": { "is-glob": "^4.0.1" } }, "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow=="],
 
     "gopd": ["gopd@1.2.0", "", {}, "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg=="],
 
+    "has-flag": ["has-flag@4.0.0", "", {}, "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="],
+
     "has-property-descriptors": ["has-property-descriptors@1.0.2", "", { "dependencies": { "es-define-property": "^1.0.0" } }, "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg=="],
 
     "has-symbols": ["has-symbols@1.1.0", "", {}, "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ=="],
@@ -1414,6 +1612,10 @@
 
     "iconv-lite": ["iconv-lite@0.7.3", "", { "dependencies": { "safer-buffer": ">= 2.1.2 < 3.0.0" } }, "sha512-IKXpvIzjnC9XTAUbVBcMfGS0EPaIXtW6v+zr+RRp+hqULEpo0owZax6wyRwPOJbWbzjYspQwusTsfVr0ifh4uQ=="],
 
+    "icss-replace-symbols": ["icss-replace-symbols@1.1.0", "", {}, "sha512-chIaY3Vh2mh2Q3RGXttaDIzeiPvaVXJ+C4DAh/w3c37SKZ/U6PGMmuicR2EQQp9bKG8zLMCl7I+PtIoOOPp8Gg=="],
+
+    "icss-utils": ["icss-utils@5.1.0", "", { "peerDependencies": { "postcss": "^8.1.0" } }, "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA=="],
+
     "idb-keyval": ["idb-keyval@6.2.2", "", {}, "sha512-yjD9nARJ/jb1g+CvD0tlhUHOrJ9Sy0P8T9MF3YaLlHnSRpwPfpTX0XIvpmw3gAJUmEu3FiICLBDPXVwyEvrleg=="],
 
     "ieee754": ["ieee754@1.2.1", "", {}, "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA=="],
@@ -1422,16 +1624,36 @@
 
     "immediate": ["immediate@3.0.6", "", {}, "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ=="],
 
+    "indent-string": ["indent-string@4.0.0", "", {}, "sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg=="],
+
     "inherits": ["inherits@2.0.4", "", {}, "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="],
 
     "ip-address": ["ip-address@10.7.5", "", {}, "sha512-t2v0rkILYv9WXmSL7TpAaU3HXgaFYOPUcH3QHgwQ++gpJuH3bqyMy4Fvt/DJCTKwzH3Cf+bAp5W/mFL39KPLzA=="],
 
+    "is-binary-path": ["is-binary-path@2.1.0", "", { "dependencies": { "binary-extensions": "^2.0.0" } }, "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw=="],
+
     "is-callable": ["is-callable@1.2.7", "", {}, "sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA=="],
 
+    "is-core-module": ["is-core-module@2.18.0", "", { "dependencies": { "hasown": "^2.0.4" } }, "sha512-qyax9fgaKOEC4qK8WZn7Q4IcoZC9RC1O1fFxRcRTq/oMMkWT/uXpqpXa12kzWR409zAt1drYN9N9BO26UmBCmw=="],
+
+    "is-docker": ["is-docker@3.0.0", "", { "bin": { "is-docker": "cli.js" } }, "sha512-eljcgEDlEns/7AXFosB5K/2nCM4P7FQPkGc/DWLy5rmFEWvZayGrik1d9/QIY5nJ4f9YsVvBkA6kJpHn9rISdQ=="],
+
+    "is-extglob": ["is-extglob@2.1.1", "", {}, "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ=="],
+
     "is-fullwidth-code-point": ["is-fullwidth-code-point@3.0.0", "", {}, "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg=="],
 
+    "is-glob": ["is-glob@4.0.3", "", { "dependencies": { "is-extglob": "^2.1.1" } }, "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg=="],
+
+    "is-inside-container": ["is-inside-container@1.0.0", "", { "dependencies": { "is-docker": "^3.0.0" }, "bin": { "is-inside-container": "cli.js" } }, "sha512-KIYLCCJghfHZxqjYBE7rEy0OBuTd5xCHS7tHVgvCLkx7StIoaxwNW3hCALgEUjFfeRk+MG/Qxmp/vtETEF3tRA=="],
+
+    "is-number": ["is-number@7.0.0", "", {}, "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng=="],
+
+    "is-there": ["is-there@4.5.2", "", {}, "sha512-ixMkfz3rtS1vEsLf0TjgjqUn96Q0ukpUVDMnPYVocJyTzu2G/QgEtqYddcHZawHO+R31cKVPggJmBLrm1vJCOg=="],
+
     "is-typed-array": ["is-typed-array@1.1.15", "", { "dependencies": { "which-typed-array": "^1.1.16" } }, "sha512-p3EcsicXjit7SaskXHs1hA91QxgTw46Fv6EFKKGS5DRFLD8yKnohjF3hxoju94b/OcMZoQukzpPpBE9uLVKzgQ=="],
 
+    "is-wsl": ["is-wsl@3.1.1", "", { "dependencies": { "is-inside-container": "^1.0.0" } }, "sha512-e6rvdUCiQCAuumZslxRJWR/Doq4VpPR82kqclvcS0efgt430SlGIk05vdCN58+VrzgtIcfNODjozVielycD4Sw=="],
+
     "isarray": ["isarray@1.0.0", "", {}, "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ=="],
 
     "isexe": ["isexe@3.1.5", "", {}, "sha512-6B3tLtFqtQS4ekarvLVMZ+X+VlvQekbe4taUkf/rhVO3d/h0M2rfARm/pXLcPEsjjMsFgrFgSrhQIxcSVrBz8w=="],
@@ -1440,6 +1662,8 @@
 
     "isomorphic-textencoder": ["isomorphic-textencoder@1.0.1", "", { "dependencies": { "fast-text-encoding": "^1.0.0" } }, "sha512-676hESgHullDdHDsj469hr+7t3i/neBKU9J7q1T4RHaWwLAsaQnywC0D1dIUId0YZ+JtVrShzuBk1soo0+GVcQ=="],
 
+    "jackspeak": ["jackspeak@3.4.3", "", { "dependencies": { "@isaacs/cliui": "^8.0.2" }, "optionalDependencies": { "@pkgjs/parseargs": "^0.11.0" } }, "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw=="],
+
     "jose": ["jose@6.2.13", "", {}, "sha512-7TIg10ZE1x82YediN+lcrPNvGMKge9yFHQD+Qho/b8y2adfugU3AsvvHfxV0fzyFllT6l9xCjf4RWY9g/Z9PJQ=="],
 
     "js-tokens": ["js-tokens@4.0.0", "", {}, "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="],
@@ -1450,6 +1674,8 @@
 
     "json5": ["json5@2.2.3", "", { "bin": { "json5": "lib/cli.js" } }, "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg=="],
 
+    "jsonc-parser": ["jsonc-parser@3.3.1", "", {}, "sha512-HUgH65KyejrUFPvHFPbqOY0rsFip3Bo5wb4ngvdi1EpCYWUQDC5V+Y7mZws+DLkr4M//zQJoanu1SP+87Dv1oQ=="],
+
     "jsonparse": ["jsonparse@1.3.1", "", {}, "sha512-POQXvpdL69+CluYsillJ7SUhKvytYjW9vG/GKpnf+xP8UWgYEM/RaMzHHofbALDiKbbP1W8UEYmgGl39WkPZsg=="],
 
     "jszip": ["jszip@3.10.2", "", { "dependencies": { "lie": "~3.3.0", "pako": "~1.0.2", "readable-stream": "~2.3.6", "setimmediate": "^1.0.5" } }, "sha512-3l+rb15IOWtUhU0H5MFqES/T6Kh7abYwjosBey/vD6hDt8zoEffkSC5Ws5SGtgVw3gBx2NEbhTeSW1+kWkpyTQ=="],
@@ -1466,17 +1692,25 @@
 
     "long": ["long@5.3.2", "", {}, "sha512-mNAgZ1GmyNhD7AuqnTG3/VQ26o760+ZYBPKjPvugO8+nLbYfX6TVpJPseBvopbdY+qpZ/lKUnmEc1LeZYS3QAA=="],
 
+    "loupe": ["loupe@3.2.1", "", {}, "sha512-CdzqowRJCeLU72bHvWqwRBBlLcMEtIvGrlvef74kMnV2AolS9Y8xUv1I0U/MNAWMhBlKIoyuEgoJ0t/bbwHbLQ=="],
+
     "lru-cache": ["lru-cache@10.4.3", "", {}, "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ=="],
 
     "lucide-react": ["lucide-react@0.545.0", "", { "peerDependencies": { "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-7r1/yUuflQDSt4f1bpn5ZAocyIxcTyVyBBChSVtBKn5M+392cPmI5YJMWOJKk/HUWGm5wg83chlAZtCcGbEZtw=="],
 
+    "lz-string": ["lz-string@1.5.0", "", { "bin": { "lz-string": "bin/bin.js" } }, "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ=="],
+
+    "magic-string": ["magic-string@1.4.5", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.6.0" } }, "sha512-oLLC2+YvQUfAa+vxoufE/yc1icb87M9iXIRqAoR/2EhE/8cb3SF/+Gi0c2By1B+5Vz2e2vQtUvHiu1+63Znh+w=="],
+
     "make-fetch-happen": ["make-fetch-happen@15.0.6", "", { "dependencies": { "@gar/promise-retry": "^1.0.0", "@npmcli/agent": "^4.0.0", "@npmcli/redact": "^4.0.0", "cacache": "^20.0.1", "http-cache-semantics": "^4.1.1", "minipass": "^7.0.2", "minipass-fetch": "^5.0.0", "minipass-flush": "^1.0.5", "minipass-pipeline": "^1.2.4", "negotiator": "^1.0.0", "proc-log": "^6.0.0", "ssri": "^13.0.0" } }, "sha512-Je0fLJ0F5atA7F+eIlLzk+Wkcl57JDf4kf+EW8xiP5E31xOQxkIxTbgf1Oi1Lw9tRI9UEMRdI5Vz2xTzoNU1Jw=="],
 
     "math-intrinsics": ["math-intrinsics@1.1.0", "", {}, "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g=="],
 
     "mimic-response": ["mimic-response@3.1.0", "", {}, "sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ=="],
 
-    "minimatch": ["minimatch@10.2.6", "", { "dependencies": { "brace-expansion": "^5.0.8" } }, "sha512-vpLQEs+VLCr1nU0BXS07maYoFwlDAH0gngQuuttxIwutDFEMHq2blX+8vpgxDdK3J1PwjCJiep77OitTZ4Ll1A=="],
+    "min-indent": ["min-indent@1.0.1", "", {}, "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg=="],
+
+    "minimatch": ["minimatch@9.0.9", "", { "dependencies": { "brace-expansion": "^2.0.2" } }, "sha512-OBwBN9AL4dqmETlpS2zasx+vTeWclWzkblfZk7KTA5j3jeOONz/tRCnZomUyvNg83wL5Zv9Ss6HMJXAgL8R2Yg=="],
 
     "minimist": ["minimist@1.2.8", "", {}, "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA=="],
 
@@ -1496,6 +1730,8 @@
 
     "minizlib": ["minizlib@3.1.0", "", { "dependencies": { "minipass": "^7.1.2" } }, "sha512-KZxYo1BUkWD2TVFLr0MQoM8vUUigWD3LlD83a/75BqC+4qE0Hb1Vo5v1FgcfaNXvfXzr+5EhQ6ing/CaBijTlw=="],
 
+    "mkdirp": ["mkdirp@3.0.1", "", { "bin": { "mkdirp": "dist/cjs/src/bin.js" } }, "sha512-+NsyUUAZDmo6YVHzL/stxSu3t9YS1iljliy3BSDrXJ/dkn1KYdmtZODGGjLcc9XLgVVpH4KshHB8XmZgMhaBXg=="],
+
     "ms": ["ms@2.1.3", "", {}, "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="],
 
     "nanoid": ["nanoid@3.3.20", "", { "bin": { "nanoid": "bin/nanoid.cjs" } }, "sha512-uKdg2G3GNCKQn9byYOpxbGqrT2fGO5KRt5J/8b3pok8rT6qxGWF6hxMyJiEYtAf+FVyYuD9hRaDqX5uPFYJ4ZQ=="],
@@ -1510,6 +1746,8 @@
 
     "nodemailer": ["nodemailer@10.1.0", "", {}, "sha512-fXW8AulB25aOTuwfRYV6lqHyfz2VM4rr4SGXH03mE7x5znEUpzL5mu6anARUpZN7744Ziwkmr4AxSLPJsBQspg=="],
 
+    "normalize-path": ["normalize-path@3.0.0", "", {}, "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA=="],
+
     "npm-install-checks": ["npm-install-checks@7.1.2", "", { "dependencies": { "semver": "^7.1.1" } }, "sha512-z9HJBCYw9Zr8BqXcllKIs5nI+QggAImbBdHphOzVYrz2CB4iQ6FzWyKmlqDZua+51nAu7FcemlbTc9VgQN5XDQ=="],
 
     "npm-normalize-package-bin": ["npm-normalize-package-bin@4.0.0", "", {}, "sha512-TZKxPvItzai9kN9H/TkmCtx/ZN/hvr3vUycjlfmH0ootY9yFBzNOpiXAdIn1Iteqsvk4lQn6B5PTrt+n6h8k/w=="],
@@ -1522,15 +1760,29 @@
 
     "once": ["once@1.4.0", "", { "dependencies": { "wrappy": "1" } }, "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w=="],
 
+    "open": ["open@10.2.0", "", { "dependencies": { "default-browser": "^5.2.1", "define-lazy-prop": "^3.0.0", "is-inside-container": "^1.0.0", "wsl-utils": "^0.1.0" } }, "sha512-YgBpdJHPyQ2UE5x+hlSXcnejzAvD0b22U2OuAP+8OnlJT+PjWPxtgmGqKKc+RgTM63U9gN0YzrYc71R2WT/hTA=="],
+
     "openapi-types": ["openapi-types@12.1.3", "", {}, "sha512-N4YtSYJqghVu4iek2ZUvcN/0aqH1kRDuNqzcycDxhOUpg7GdvLa2F3DgS6yBNhInhv2r/6I0Flkn7CqL8+nIcw=="],
 
+    "oxc-parser": ["oxc-parser@0.155.0", "", { "dependencies": { "@oxc-project/types": "^0.155.0" }, "optionalDependencies": { "@oxc-parser/binding-android-arm-eabi": "0.155.0", "@oxc-parser/binding-android-arm64": "0.155.0", "@oxc-parser/binding-darwin-arm64": "0.155.0", "@oxc-parser/binding-darwin-x64": "0.155.0", "@oxc-parser/binding-freebsd-x64": "0.155.0", "@oxc-parser/binding-linux-arm-gnueabihf": "0.155.0", "@oxc-parser/binding-linux-arm-musleabihf": "0.155.0", "@oxc-parser/binding-linux-arm64-gnu": "0.155.0", "@oxc-parser/binding-linux-arm64-musl": "0.155.0", "@oxc-parser/binding-linux-ppc64-gnu": "0.155.0", "@oxc-parser/binding-linux-riscv64-gnu": "0.155.0", "@oxc-parser/binding-linux-riscv64-musl": "0.155.0", "@oxc-parser/binding-linux-s390x-gnu": "0.155.0", "@oxc-parser/binding-linux-x64-gnu": "0.155.0", "@oxc-parser/binding-linux-x64-musl": "0.155.0", "@oxc-parser/binding-openharmony-arm64": "0.155.0", "@oxc-parser/binding-win32-arm64-msvc": "0.155.0", "@oxc-parser/binding-win32-ia32-msvc": "0.155.0", "@oxc-parser/binding-win32-x64-msvc": "0.155.0" } }, "sha512-C/ReSf1JUFukK/zvk6jhcNibSssvas5+ktIzK7fbKVd3CedWe59C3QwHEOrEZj/4Rt9+xg0Jeis/Jv1F/KM1mw=="],
+
+    "oxc-resolver": ["oxc-resolver@11.21.2", "", { "optionalDependencies": { "@oxc-resolver/binding-android-arm-eabi": "11.21.2", "@oxc-resolver/binding-android-arm64": "11.21.2", "@oxc-resolver/binding-darwin-arm64": "11.21.2", "@oxc-resolver/binding-darwin-x64": "11.21.2", "@oxc-resolver/binding-freebsd-x64": "11.21.2", "@oxc-resolver/binding-linux-arm-gnueabihf": "11.21.2", "@oxc-resolver/binding-linux-arm-musleabihf": "11.21.2", "@oxc-resolver/binding-linux-arm64-gnu": "11.21.2", "@oxc-resolver/binding-linux-arm64-musl": "11.21.2", "@oxc-resolver/binding-linux-ppc64-gnu": "11.21.2", "@oxc-resolver/binding-linux-riscv64-gnu": "11.21.2", "@oxc-resolver/binding-linux-riscv64-musl": "11.21.2", "@oxc-resolver/binding-linux-s390x-gnu": "11.21.2", "@oxc-resolver/binding-linux-x64-gnu": "11.21.2", "@oxc-resolver/binding-linux-x64-musl": "11.21.2", "@oxc-resolver/binding-openharmony-arm64": "11.21.2", "@oxc-resolver/binding-wasm32-wasi": "11.21.2", "@oxc-resolver/binding-win32-arm64-msvc": "11.21.2", "@oxc-resolver/binding-win32-x64-msvc": "11.21.2" } }, "sha512-w5tLwYN3Zo24w5EeWJjJWZOwhYqTtC8PS2B1tIt7BZUuqTIcU07sQValbDw+rq7+AuAGzOHklgK+ifsy4lpXfw=="],
+
     "oxlint": ["oxlint@1.89.0", "", { "optionalDependencies": { "@oxlint/binding-android-arm-eabi": "1.89.0", "@oxlint/binding-android-arm64": "1.89.0", "@oxlint/binding-darwin-arm64": "1.89.0", "@oxlint/binding-darwin-x64": "1.89.0", "@oxlint/binding-freebsd-x64": "1.89.0", "@oxlint/binding-linux-arm-gnueabihf": "1.89.0", "@oxlint/binding-linux-arm-musleabihf": "1.89.0", "@oxlint/binding-linux-arm64-gnu": "1.89.0", "@oxlint/binding-linux-arm64-musl": "1.89.0", "@oxlint/binding-linux-ppc64-gnu": "1.89.0", "@oxlint/binding-linux-riscv64-gnu": "1.89.0", "@oxlint/binding-linux-riscv64-musl": "1.89.0", "@oxlint/binding-linux-s390x-gnu": "1.89.0", "@oxlint/binding-linux-x64-gnu": "1.89.0", "@oxlint/binding-linux-x64-musl": "1.89.0", "@oxlint/binding-openharmony-arm64": "1.89.0", "@oxlint/binding-win32-arm64-msvc": "1.89.0", "@oxlint/binding-win32-ia32-msvc": "1.89.0", "@oxlint/binding-win32-x64-msvc": "1.89.0" }, "peerDependencies": { "oxlint-tsgolint": ">=7.0.2003", "vite-plus": "*" }, "optionalPeers": ["oxlint-tsgolint", "vite-plus"], "bin": { "oxlint": "bin/oxlint" } }, "sha512-a25hkfo61okGPvJz432fRIPoxlKtNnOVy9w4rzrmGgNm4iVTPwpSQlmdqNWnp6p9QyyPVfAZRgnf5XvSBZFk/A=="],
 
     "p-map": ["p-map@7.1.1", "", {}, "sha512-6Lh3jQPLthYujSrlw6ccWXBGZTkoTCz27Hd92g79LH/kjAbgoEu0t442cCCNbegPSJsA0lwDX8z0bcKtkpA32g=="],
 
+    "package-json-from-dist": ["package-json-from-dist@1.0.1", "", {}, "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw=="],
+
     "pako": ["pako@1.0.11", "", {}, "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw=="],
 
-    "path-scurry": ["path-scurry@2.0.2", "", { "dependencies": { "lru-cache": "^11.0.0", "minipass": "^7.1.2" } }, "sha512-3O/iVVsJAPsOnpwWIeD+d6z/7PmqApyQePUtCndjatj/9I5LylHvt5qluFaBT3I5h3r1ejfR056c+FCv+NnNXg=="],
+    "path-key": ["path-key@3.1.1", "", {}, "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q=="],
+
+    "path-parse": ["path-parse@1.0.7", "", {}, "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="],
+
+    "path-scurry": ["path-scurry@1.11.1", "", { "dependencies": { "lru-cache": "^10.2.0", "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0" } }, "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA=="],
+
+    "pathval": ["pathval@2.0.1", "", {}, "sha512-//nshmD55c46FuFw26xV/xFAaB5HF9Xdap7HJBBnrKdAd6/GxDBaNA1870O79+9ueg61cZLSVc+OaFlfmObYVQ=="],
 
     "picocolors": ["picocolors@1.1.1", "", {}, "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="],
 
@@ -1546,8 +1798,22 @@
 
     "postcss": ["postcss@8.5.32", "", { "dependencies": { "nanoid": "^3.3.20", "picocolors": "^1.1.1", "source-map-js": "^1.2.2" } }, "sha512-LJlKCCAUFKOuZxipUdYw1NzIITEsPcgyOG9LkvRJvuKj/bRzbuRY0ARXvL0pWGpsZvn8jku+LMep2eU0seHp8g=="],
 
+    "postcss-modules-extract-imports": ["postcss-modules-extract-imports@3.1.0", "", { "peerDependencies": { "postcss": "^8.1.0" } }, "sha512-k3kNe0aNFQDAZGbin48pL2VNidTF0w4/eASDsxlyspobzU3wZQLOGj7L9gfRe0Jo9/4uud09DsjFNH7winGv8Q=="],
+
+    "postcss-modules-local-by-default": ["postcss-modules-local-by-default@4.2.0", "", { "dependencies": { "icss-utils": "^5.0.0", "postcss-selector-parser": "^7.0.0", "postcss-value-parser": "^4.1.0" }, "peerDependencies": { "postcss": "^8.1.0" } }, "sha512-5kcJm/zk+GJDSfw+V/42fJ5fhjL5YbFDl8nVdXkJPLLW+Vf9mTD5Xe0wqIaDnLuL2U6cDNpTr+UQ+v2HWIBhzw=="],
+
+    "postcss-modules-scope": ["postcss-modules-scope@3.2.1", "", { "dependencies": { "postcss-selector-parser": "^7.0.0" }, "peerDependencies": { "postcss": "^8.1.0" } }, "sha512-m9jZstCVaqGjTAuny8MdgE88scJnCiQSlSrOWcTQgM2t32UBe+MUmFSO5t7VMSfAf/FJKImAxBav8ooCHJXCJA=="],
+
+    "postcss-modules-values": ["postcss-modules-values@4.0.0", "", { "dependencies": { "icss-utils": "^5.0.0" }, "peerDependencies": { "postcss": "^8.1.0" } }, "sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ=="],
+
+    "postcss-selector-parser": ["postcss-selector-parser@7.1.7", "", { "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" } }, "sha512-wWBro/7hJ40ye6TPiXkUQoXKCw23xSsjriUvqd7Uls9Sso3oLiON1flc18cCdnjgCRXw4fBVqUJJeOdDTh3P3g=="],
+
+    "postcss-value-parser": ["postcss-value-parser@4.2.0", "", {}, "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="],
+
     "postgres": ["postgres@3.4.9", "", {}, "sha512-GD3qdB0x1z9xgFI6cdRD6xu2Sp2WCOEoe3mtnyB5Ee0XrrL5Pe+e4CCnJrRMnL1zYtRDZmQQVbvOttLnKDLnaw=="],
 
+    "pretty-format": ["pretty-format@27.5.1", "", { "dependencies": { "ansi-regex": "^5.0.1", "ansi-styles": "^5.0.0", "react-is": "^17.0.1" } }, "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ=="],
+
     "proc-log": ["proc-log@5.0.0", "", {}, "sha512-Azwzvl90HaF0aCz1JrDdXQykFakSSNPaPoiZ9fm5qJIMHioDZEi7OAdRwSm6rSoPtY3Qutnm3L7ogmg3dc+wbQ=="],
 
     "process": ["process@0.11.10", "", {}, "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A=="],
@@ -1560,8 +1826,14 @@
 
     "react": ["react@19.3.0", "", {}, "sha512-E8LUcbtBWt20bbl2YoHfx4ZDBdxVTfOKtCZn9cDSJ4l6/nuoApcpIBcj47t2wZoVX8g2ZHuMHbiShgCR1T5Sog=="],
 
+    "react-docgen": ["react-docgen@8.0.4", "", { "dependencies": { "@babel/core": "^7.28.0", "@babel/traverse": "^7.28.0", "@babel/types": "^7.28.2", "@types/babel__core": "^7.20.5", "@types/babel__traverse": "^7.20.7", "@types/doctrine": "^0.0.9", "@types/resolve": "^1.20.2", "doctrine": "^3.0.0", "resolve": "^1.22.1", "strip-indent": "^4.0.0" } }, "sha512-gIYjtVTU4NCWZnb/LXVSWfClZXnjzX3+xxi69Tkfu4YsmYuqiOk8giLkKt/WwxWqh+U66CTh8Kqbha1uPv8/qQ=="],
+
+    "react-docgen-typescript": ["react-docgen-typescript@2.4.0", "", { "peerDependencies": { "typescript": ">= 4.3.x" } }, "sha512-ZtAp5XTO5HRzQctjPU0ybY0RRCQO19X/8fxn3w7y2VVTUbGHDKULPTL4ky3vB05euSgG5NpALhEhDPvQ56wvXg=="],
+
     "react-dom": ["react-dom@19.3.0", "", { "dependencies": { "scheduler": "^0.28.0" }, "peerDependencies": { "react": "^19.3.0" } }, "sha512-JDk8dgif51OjFoDE70+OT9ICyYr+69HlmihNwp1+Nsfbna3t5sIiCa9ZJktDmQ4/1b/rn26hIAR2uYXDMr5r0Q=="],
 
+    "react-is": ["react-is@17.0.2", "", {}, "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="],
+
     "react-refresh": ["react-refresh@0.18.0", "", {}, "sha512-QgT5//D3jfjJb6Gsjxv0Slpj23ip+HtOpnNgnb2S5zU3CB26G/IDPGoy4RJB42wzFE46DRsstbW6tKHoKbhAxw=="],
 
     "react-remove-scroll": ["react-remove-scroll@2.7.2", "", { "dependencies": { "react-remove-scroll-bar": "^2.3.7", "react-style-singleton": "^2.2.3", "tslib": "^2.1.0", "use-callback-ref": "^1.3.3", "use-sidecar": "^1.1.3" }, "peerDependencies": { "@types/react": "*", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-Iqb9NjCCTt6Hf+vOdNIZGdTiH1QSqr27H/Ek9sv/a97gfueI/5h1s3yRi1nngzMUaOOToin5dI1dXKdXiF+u0Q=="],
@@ -1572,16 +1844,24 @@
 
     "readable-stream": ["readable-stream@2.3.8", "", { "dependencies": { "core-util-is": "~1.0.0", "inherits": "~2.0.3", "isarray": "~1.0.0", "process-nextick-args": "~2.0.0", "safe-buffer": "~5.1.1", "string_decoder": "~1.1.1", "util-deprecate": "~1.0.1" } }, "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA=="],
 
+    "readdirp": ["readdirp@3.6.0", "", { "dependencies": { "picomatch": "^2.2.1" } }, "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA=="],
+
+    "redent": ["redent@3.0.0", "", { "dependencies": { "indent-string": "^4.0.0", "strip-indent": "^3.0.0" } }, "sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg=="],
+
     "require-directory": ["require-directory@2.1.1", "", {}, "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q=="],
 
     "require-from-string": ["require-from-string@2.0.2", "", {}, "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw=="],
 
+    "resolve": ["resolve@1.22.14", "", { "dependencies": { "es-errors": "^1.3.0", "is-core-module": "^2.18.0", "path-parse": "^1.0.7", "supports-preserve-symlinks-flag": "^1.0.0" }, "bin": { "resolve": "bin/resolve" } }, "sha512-1ZjYvR9sbkiwC5+9QHetqW5HmA2pHRMaoupD01t2HlYnV/vydC2zPwLixhsMieSWVZt0JJRg5LVIk0Ow1D/TrA=="],
+
     "resolve-pkg-maps": ["resolve-pkg-maps@1.0.0", "", {}, "sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw=="],
 
     "rollup": ["rollup@4.65.1", "", { "dependencies": { "@types/estree": "1.0.9" }, "optionalDependencies": { "@napi-rs/lzma-linux-x64-gnu": "1.5.1", "@rollup/rollup-android-arm-eabi": "4.65.1", "@rollup/rollup-android-arm64": "4.65.1", "@rollup/rollup-darwin-arm64": "4.65.1", "@rollup/rollup-darwin-x64": "4.65.1", "@rollup/rollup-freebsd-arm64": "4.65.1", "@rollup/rollup-freebsd-x64": "4.65.1", "@rollup/rollup-linux-arm-gnueabihf": "4.65.1", "@rollup/rollup-linux-arm-musleabihf": "4.65.1", "@rollup/rollup-linux-arm64-gnu": "4.65.1", "@rollup/rollup-linux-arm64-musl": "4.65.1", "@rollup/rollup-linux-loong64-gnu": "4.65.1", "@rollup/rollup-linux-loong64-musl": "4.65.1", "@rollup/rollup-linux-ppc64-gnu": "4.65.1", "@rollup/rollup-linux-ppc64-musl": "4.65.1", "@rollup/rollup-linux-riscv64-gnu": "4.65.1", "@rollup/rollup-linux-riscv64-musl": "4.65.1", "@rollup/rollup-linux-s390x-gnu": "4.65.1", "@rollup/rollup-linux-x64-gnu": "4.65.1", "@rollup/rollup-linux-x64-musl": "4.65.1", "@rollup/rollup-openbsd-x64": "4.65.1", "@rollup/rollup-openharmony-arm64": "4.65.1", "@rollup/rollup-win32-arm64-msvc": "4.65.1", "@rollup/rollup-win32-ia32-msvc": "4.65.1", "@rollup/rollup-win32-x64-gnu": "4.65.1", "@rollup/rollup-win32-x64-msvc": "4.65.1", "fsevents": "~2.3.2" }, "bin": { "rollup": "dist/bin/rollup" } }, "sha512-HzD4IdphaPMvuAacnL/vtoq5B8FwqewKvxTtqYibWvP6VDyZ+UsTtlw5F8HIOIIpLQAkN2NOP/0sM3puo9xN/A=="],
 
     "rou3": ["rou3@0.9.2", "", {}, "sha512-3SOzvaAg8rkHrXtRjpCvCvbyO5to9oOO27Z/XqHEYXfMRVSw/qMIVdmaOk9W2lcRLtR6dlqTjo9hDeJk70QBYQ=="],
 
+    "run-applescript": ["run-applescript@7.1.0", "", {}, "sha512-DPe5pVFaAsinSaV6QjQ6gdiedWDcRCbUuiQfQa2wmWV7+xC9bGulGI8+TdRmoFkAPaBXk8CrAbnlY2ISniJ47Q=="],
+
     "safe-buffer": ["safe-buffer@5.1.2", "", {}, "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="],
 
     "safer-buffer": ["safer-buffer@2.1.2", "", {}, "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="],
@@ -1598,6 +1878,12 @@
 
     "sha.js": ["sha.js@2.4.12", "", { "dependencies": { "inherits": "^2.0.4", "safe-buffer": "^5.2.1", "to-buffer": "^1.2.0" }, "bin": { "sha.js": "bin.js" } }, "sha512-8LzC5+bvI45BjpfXU8V5fdU2mfeKiQe1D1gIMn7XUlF3OTUrpdJpPPH4EMAnF0DsHHdSZqCdSss5qCmJKuiO3w=="],
 
+    "shebang-command": ["shebang-command@2.0.0", "", { "dependencies": { "shebang-regex": "^3.0.0" } }, "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA=="],
+
+    "shebang-regex": ["shebang-regex@3.0.0", "", {}, "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A=="],
+
+    "signal-exit": ["signal-exit@4.1.0", "", {}, "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw=="],
+
     "simple-concat": ["simple-concat@1.0.1", "", {}, "sha512-cSFtAPtRhljv69IK0hTVZQ+OfE9nePi/rtJmw5UjHeVyVroEqJXP1sFztKUy1qU+xvz3u/sfYJLa947b7nAN2Q=="],
 
     "simple-get": ["simple-get@4.0.1", "", { "dependencies": { "decompress-response": "^6.0.0", "once": "^1.3.1", "simple-concat": "^1.0.0" } }, "sha512-brv7p5WgH0jmQJr1ZDDfKDOSeWWg+OVypG99A/5vYGPqJ6pxiaHLy8nxtFjBA7oMa01ebA9gfh1uMCFqOuXxvA=="],
@@ -1618,24 +1904,50 @@
 
     "ssri": ["ssri@12.0.0", "", { "dependencies": { "minipass": "^7.0.3" } }, "sha512-S7iGNosepx9RadX82oimUkvr0Ct7IjJbEbs4mJcTxst8um95J3sDYU1RBEOvdu6oL1Wek2ODI5i4MAw+dZ6cAQ=="],
 
+    "storybook": ["storybook@11.0.0-beta.0", "", { "dependencies": { "@storybook/global": "^5.0.0", "@storybook/icons": "^2.0.2", "@testing-library/dom": "^10.4.1", "@testing-library/jest-dom": "6.9.1", "@testing-library/user-event": "^14.6.3", "@types/chai": "^5.2.2", "@vitest/expect": "3.2.4", "@vitest/spy": "3.2.4", "@webcontainer/env": "^1.1.1", "esbuild": "^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0 || ^0.24.0 || ^0.25.0 || ^0.26.0 || ^0.27.0 || ^0.28.0", "jsonc-parser": "^3.3.1", "open": "^10.2.0", "oxc-parser": "^0.155.0", "oxc-resolver": "11.21.2", "semver": "^7.7.3", "use-sync-external-store": "^1.5.0", "ws": "^8.21.1" }, "peerDependencies": { "@types/react": "^18.0.0 || ^19.0.0", "prettier": "^2 || ^3", "vite-plus": "^0.1.15 || ^0.2.0 || ^0.3.0" }, "optionalPeers": ["@types/react", "prettier", "vite-plus"], "bin": "./dist/bin/dispatcher.js" }, "sha512-kl7YgZYn35UvGGz9HMAnHoPdvp4gczlcus2V4nW2Q8X5De6AVNKDKJd2WOXf1gKikJ1NbfCee7u2DaxnKrCgyw=="],
+
     "string-width": ["string-width@4.2.3", "", { "dependencies": { "emoji-regex": "^8.0.0", "is-fullwidth-code-point": "^3.0.0", "strip-ansi": "^6.0.1" } }, "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g=="],
 
+    "string-width-cjs": ["string-width@4.2.3", "", { "dependencies": { "emoji-regex": "^8.0.0", "is-fullwidth-code-point": "^3.0.0", "strip-ansi": "^6.0.1" } }, "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g=="],
+
     "string_decoder": ["string_decoder@1.1.1", "", { "dependencies": { "safe-buffer": "~5.1.0" } }, "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg=="],
 
     "strip-ansi": ["strip-ansi@6.0.1", "", { "dependencies": { "ansi-regex": "^5.0.1" } }, "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A=="],
 
+    "strip-ansi-cjs": ["strip-ansi@6.0.1", "", { "dependencies": { "ansi-regex": "^5.0.1" } }, "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A=="],
+
+    "strip-bom": ["strip-bom@3.0.0", "", {}, "sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA=="],
+
+    "strip-indent": ["strip-indent@4.1.1", "", {}, "sha512-SlyRoSkdh1dYP0PzclLE7r0M9sgbFKKMFXpFRUMNuKhQSbC6VQIGzq3E0qsfvGJaUFJPGv6Ws1NZ/haTAjfbMA=="],
+
+    "supports-color": ["supports-color@7.2.0", "", { "dependencies": { "has-flag": "^4.0.0" } }, "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw=="],
+
+    "supports-preserve-symlinks-flag": ["supports-preserve-symlinks-flag@1.0.0", "", {}, "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w=="],
+
     "tailwind-merge": ["tailwind-merge@3.7.0", "", {}, "sha512-XPPUyAc+cvspz3lHTcR/QgPfW2A0lv/xQNIjX3HGhLR+Nq2lHaLq5MtTesHn8GUr3W3DguT2KT5x3NVgRtYwmA=="],
 
     "tar": ["tar@7.5.22", "", { "dependencies": { "@isaacs/fs-minipass": "^4.0.0", "chownr": "^3.0.0", "minipass": "^7.1.2", "minizlib": "^3.1.0", "yallist": "^5.0.0" } }, "sha512-MFO/QzvtAOmJbkhOaCTvbGcFN9L9b+JunIsDwaKljSOdcLMea3NJ1k9Usz/rjdfSXTq4dfzfeS7W4p4YOAAHeA=="],
 
     "tinyglobby": ["tinyglobby@0.2.17", "", { "dependencies": { "fdir": "^6.5.0", "picomatch": "^4.0.4" } }, "sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g=="],
 
+    "tinyrainbow": ["tinyrainbow@2.0.0", "", {}, "sha512-op4nsTR47R6p0vMUUoYl/a+ljLFVtlfaXkLQmqfLR1qHma1h/ysYk4hEXZ880bf2CYgTskvTa/e196Vd5dDQXw=="],
+
+    "tinyspy": ["tinyspy@4.0.6", "", {}, "sha512-u8KszXvGfU68hVcZpRHKG28T0krMuv2G5nDhiHaMLen/gIuFEgIJhaJuO69qjnXg5paSrbPMFfx3brNuN8eVSg=="],
+
     "to-buffer": ["to-buffer@1.2.2", "", { "dependencies": { "isarray": "^2.0.5", "safe-buffer": "^5.2.1", "typed-array-buffer": "^1.0.3" } }, "sha512-db0E3UJjcFhpDhAF4tLo03oli3pwl3dbnzXOUIlRKrp+ldk/VUxzpWYZENsw2SZiuBjHAk7DfB0VU7NKdpb6sw=="],
 
+    "to-regex-range": ["to-regex-range@5.0.1", "", { "dependencies": { "is-number": "^7.0.0" } }, "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ=="],
+
+    "ts-dedent": ["ts-dedent@2.3.0", "", {}, "sha512-JfJeIHke7y2egdGGgRAvpCwYFUsHlM2gPcrVOxFkznt/4uzQ7HFmvE63iFHVLBJNDuyDOQgijDK/tXH/f6Msjg=="],
+
+    "tsconfig-paths": ["tsconfig-paths@4.2.0", "", { "dependencies": { "json5": "^2.2.2", "minimist": "^1.2.6", "strip-bom": "^3.0.0" } }, "sha512-NoZ4roiN7LnbKn9QqE1amc9DJfzvZXxF4xDavcOWt1BPkdx+m+0gJuPM+S0vCe7zTJMYUP0R8pO2XMr+Y8oLIg=="],
+
     "tslib": ["tslib@2.8.1", "", {}, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
 
     "typed-array-buffer": ["typed-array-buffer@1.0.3", "", { "dependencies": { "call-bound": "^1.0.3", "es-errors": "^1.3.0", "is-typed-array": "^1.1.14" } }, "sha512-nAYYwfY3qnzX30IkA6AQZjVbtK6duGontcQm1WSG1MD94YLqK0515GNApXkoxKOWMusVssAHWLh9SeaoefYFGw=="],
 
+    "typed-css-modules": ["typed-css-modules@0.9.1", "", { "dependencies": { "camelcase": "^6.0.0", "chalk": "^4.0.0", "chokidar": "^3.4.0", "glob": "^10.3.10", "icss-replace-symbols": "^1.1.0", "is-there": "^4.4.2", "mkdirp": "^3.0.0", "postcss": "^8.0.0", "postcss-modules-extract-imports": "^3.0.0", "postcss-modules-local-by-default": "^4.0.0", "postcss-modules-scope": "^3.0.0", "postcss-modules-values": "^4.0.0", "yargs": "^17.7.2" }, "bin": { "tcm": "lib/cli.js" } }, "sha512-W2HWKncdKd+bLWsnuWB2EyuQBzZ7KJ9Byr/67KLiiyGegcN52rOveun9JR8yAvuL5IXunRMxt0eORMtAUj5bmA=="],
+
     "typescript": ["typescript@5.9.3", "", { "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" } }, "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw=="],
 
     "undici-types": ["undici-types@8.12.3", "", {}, "sha512-EXE4ydL3S76dFb27UFjNVZHTyv/TLdATj/KUe29ptdcg6qXL48J2tZ3126E5kICj5jn781OR+XlVH1N6Mz8jbA=="],
@@ -1646,6 +1958,8 @@
 
     "use-sidecar": ["use-sidecar@1.1.3", "", { "dependencies": { "detect-node-es": "^1.1.0", "tslib": "^2.0.0" }, "peerDependencies": { "@types/react": "*", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ=="],
 
+    "use-sync-external-store": ["use-sync-external-store@1.7.0", "", { "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-6L+EeigHMQhdaIPNIFUKwfWJSwWFQ8gJbJ2DLOs5sDIegTwR9fRxvnM3uciHKjIZhFz+KAv2emhWMRvDmMcY8A=="],
+
     "util-deprecate": ["util-deprecate@1.0.2", "", {}, "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="],
 
     "validate-npm-package-name": ["validate-npm-package-name@6.0.2", "", {}, "sha512-IUoow1YUtvoBBC06dXs8bR8B9vuA3aJfmQNKMoaPG/OFsPmoQvw8xh+6Ye25Gx9DQhoEom3Pcu9MKHerm/NpUQ=="],
@@ -1662,8 +1976,14 @@
 
     "wrap-ansi": ["wrap-ansi@7.0.0", "", { "dependencies": { "ansi-styles": "^4.0.0", "string-width": "^4.1.0", "strip-ansi": "^6.0.0" } }, "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q=="],
 
+    "wrap-ansi-cjs": ["wrap-ansi@7.0.0", "", { "dependencies": { "ansi-styles": "^4.0.0", "string-width": "^4.1.0", "strip-ansi": "^6.0.0" } }, "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q=="],
+
     "wrappy": ["wrappy@1.0.2", "", {}, "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="],
 
+    "ws": ["ws@8.22.1", "", { "peerDependencies": { "bufferutil": "^4.0.1", "utf-8-validate": ">=5.0.2" }, "optionalPeers": ["bufferutil", "utf-8-validate"] }, "sha512-oyL6OPYme/CmiFvNuGzeoxCJ4nOrZE2O1FwM9MWM1AsGri6nLXB2pg+lNA8aLeXMSav0J6eIVS1j6vUPzUtK9g=="],
+
+    "wsl-utils": ["wsl-utils@0.1.0", "", { "dependencies": { "is-wsl": "^3.1.0" } }, "sha512-h3Fbisa2nKGPxCpm89Hk33lBLsnaGBvctQopaBSOW/uIs6FTe1ATyAnKFJrzVs9vpGdsTe73WF3V4lIsk4Gacw=="],
+
     "y18n": ["y18n@5.0.8", "", {}, "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA=="],
 
     "yallist": ["yallist@5.0.0", "", {}, "sha512-YgvUTfwqyc7UXVMrB+SImsVYSmTS8X/tSrtdNZMImM+n7+QTriRXyXim0mBrTXNeqzVF0KWGgHPeiyViFFrNDw=="],
@@ -1688,18 +2008,34 @@
 
     "@esbuild-kit/core-utils/esbuild": ["esbuild@0.18.20", "", { "optionalDependencies": { "@esbuild/android-arm": "0.18.20", "@esbuild/android-arm64": "0.18.20", "@esbuild/android-x64": "0.18.20", "@esbuild/darwin-arm64": "0.18.20", "@esbuild/darwin-x64": "0.18.20", "@esbuild/freebsd-arm64": "0.18.20", "@esbuild/freebsd-x64": "0.18.20", "@esbuild/linux-arm": "0.18.20", "@esbuild/linux-arm64": "0.18.20", "@esbuild/linux-ia32": "0.18.20", "@esbuild/linux-loong64": "0.18.20", "@esbuild/linux-mips64el": "0.18.20", "@esbuild/linux-ppc64": "0.18.20", "@esbuild/linux-riscv64": "0.18.20", "@esbuild/linux-s390x": "0.18.20", "@esbuild/linux-x64": "0.18.20", "@esbuild/netbsd-x64": "0.18.20", "@esbuild/openbsd-x64": "0.18.20", "@esbuild/sunos-x64": "0.18.20", "@esbuild/win32-arm64": "0.18.20", "@esbuild/win32-ia32": "0.18.20", "@esbuild/win32-x64": "0.18.20" }, "bin": { "esbuild": "bin/esbuild" } }, "sha512-ceqxoedUrcayh7Y7ZX6NdbbDzGROiyVBgC4PriJThBKSVPWnnFHZAkfI1lJT8QFkOwH4qOS2SJkS4wvpGl8BpA=="],
 
+    "@isaacs/cliui/string-width": ["string-width@5.1.2", "", { "dependencies": { "eastasianwidth": "^0.2.0", "emoji-regex": "^9.2.2", "strip-ansi": "^7.0.1" } }, "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA=="],
+
+    "@isaacs/cliui/strip-ansi": ["strip-ansi@7.2.0", "", { "dependencies": { "ansi-regex": "^6.2.2" } }, "sha512-yDPMNjp4WyfYBkHnjIRLfca1i6KMyGCtsVgoKe/z1+6vukgaENdgGBZt+ZmKPc4gavvEZ5OgHfHdrazhgNyG7w=="],
+
+    "@isaacs/cliui/wrap-ansi": ["wrap-ansi@8.1.0", "", { "dependencies": { "ansi-styles": "^6.1.0", "string-width": "^5.0.1", "strip-ansi": "^7.0.1" } }, "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ=="],
+
+    "@joshwooding/vite-plugin-react-docgen-typescript/glob": ["glob@13.0.6", "", { "dependencies": { "minimatch": "^10.2.2", "minipass": "^7.1.3", "path-scurry": "^2.0.2" } }, "sha512-Wjlyrolmm8uDpm/ogGyXZXb1Z+Ca2B8NbJwqBVg0axK9GbBeoS7yGV6vjXnYdGm6X53iehEuxxbyiKp8QmN4Vw=="],
+
     "@npmcli/agent/lru-cache": ["lru-cache@11.5.3", "", {}, "sha512-U4N8FgzmWxc8k1VH8Kr6lQg18U7Fjvby6wXHVRX/ZZ7IwWbRMgrRbP0Wrb5q5NVinryp4SQampHKdvtecItxUg=="],
 
     "@playwright/mcp/playwright": ["playwright@1.64.0-alpha-1790635538000", "", { "dependencies": { "playwright-core": "1.64.0-alpha-1790635538000" }, "bin": { "playwright": "cli.js" } }, "sha512-/5XDUMxpOd/9AojJtWDFIRV3EJZNQ0AwvK69wgt3CPzy8wTgiBG9pX45VfxtqtvIRGwfWzMhrvawNKreG69Snw=="],
 
+    "@testing-library/jest-dom/dom-accessibility-api": ["dom-accessibility-api@0.6.3", "", {}, "sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w=="],
+
     "@types/node/undici-types": ["undici-types@8.9.0", "", {}, "sha512-KTDyRTYX8sWmKXAikPHHSyc63CRPETMctyjKFupcC6OBLXT3xsN0e9aF7m+mIXutFWpUXuedtowG7iLOzp0kQg=="],
 
+    "anymatch/picomatch": ["picomatch@2.3.2", "", {}, "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA=="],
+
     "better-auth/zod": ["zod@4.6.7", "", {}, "sha512-g8W2D2kU6a8untc053fX1uVBKzM7yqAxW/3zwk83+6RyF2+SKOuV+c0wBDhUwzV1PaGapmZH+rmcUzPf+3CGwg=="],
 
+    "cacache/glob": ["glob@13.0.6", "", { "dependencies": { "minimatch": "^10.2.2", "minipass": "^7.1.3", "path-scurry": "^2.0.2" } }, "sha512-Wjlyrolmm8uDpm/ogGyXZXb1Z+Ca2B8NbJwqBVg0axK9GbBeoS7yGV6vjXnYdGm6X53iehEuxxbyiKp8QmN4Vw=="],
+
     "cacache/lru-cache": ["lru-cache@11.5.3", "", {}, "sha512-U4N8FgzmWxc8k1VH8Kr6lQg18U7Fjvby6wXHVRX/ZZ7IwWbRMgrRbP0Wrb5q5NVinryp4SQampHKdvtecItxUg=="],
 
     "cacache/ssri": ["ssri@13.0.1", "", { "dependencies": { "minipass": "^7.0.3" } }, "sha512-QUiRf1+u9wPTL/76GTYlKttDEBWV1ga9ZXW8BG6kfdeyyM8LGPix9gROyg9V2+P0xNyF3X2Go526xKFdMZrHSQ=="],
 
+    "cross-spawn/which": ["which@2.0.2", "", { "dependencies": { "isexe": "^2.0.0" }, "bin": { "node-which": "./bin/node-which" } }, "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA=="],
+
     "hono-openapi/@hono/standard-validator": ["@hono/standard-validator@0.4.1", "", { "peerDependencies": { "@standard-schema/spec": "^1.0.0", "hono": ">=4.11.2" } }, "sha512-Q0+1dgMKAXEvsmJ5FNoamwnfrf/I5JNnKn7WzfynH8nJlNe1lNOW1+vlKpEQZbrBLEgmxIeys6HjRotDvZzq+A=="],
 
     "isomorphic-git/readable-stream": ["readable-stream@4.8.0", "", { "dependencies": { "abort-controller": "^3.0.0", "buffer": "^6.0.3", "events": "^3.3.0", "process": "^0.11.10", "string_decoder": "^1.3.0" } }, "sha512-2jhTTU3Eilp/2DMT71gbcoqC35eQHasMJH0RHkYxwlxIv3+FR6Y5xAFZIwEGLxKkjZYEFlsiMNIdwUqjK2lLHQ=="],
@@ -1716,10 +2052,14 @@
 
     "npm-registry-fetch/proc-log": ["proc-log@6.1.0", "", {}, "sha512-iG+GYldRf2BQ0UDUAd6JQ/RwzaQy6mXmsk/IzlYyal4A4SNFw54MeH4/tLkF4I5WoWG9SQwuqWzS99jaFQHBuQ=="],
 
-    "path-scurry/lru-cache": ["lru-cache@11.5.3", "", {}, "sha512-U4N8FgzmWxc8k1VH8Kr6lQg18U7Fjvby6wXHVRX/ZZ7IwWbRMgrRbP0Wrb5q5NVinryp4SQampHKdvtecItxUg=="],
-
     "playwright/playwright-core": ["playwright-core@1.64.1", "", { "bin": { "playwright-core": "cli.js" } }, "sha512-BC4s8y6SEVA6Q1rSxZTto8hI1KUI3xXlHGZgvGqP4IqPdI/a6FX9H29IDNz7vKo9l21b6LfYosScPL6M3xxyDQ=="],
 
+    "pretty-format/ansi-styles": ["ansi-styles@5.2.0", "", {}, "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA=="],
+
+    "readdirp/picomatch": ["picomatch@2.3.2", "", {}, "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA=="],
+
+    "redent/strip-indent": ["strip-indent@3.0.0", "", { "dependencies": { "min-indent": "^1.0.0" } }, "sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ=="],
+
     "sha.js/safe-buffer": ["safe-buffer@5.2.1", "", {}, "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ=="],
 
     "to-buffer/isarray": ["isarray@2.0.5", "", {}, "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw=="],
@@ -1778,6 +2118,22 @@
 
     "@esbuild-kit/core-utils/esbuild/@esbuild/win32-x64": ["@esbuild/win32-x64@0.18.20", "", { "os": "win32", "cpu": "x64" }, "sha512-kTdfRcSiDfQca/y9QIkng02avJ+NCaQvrMejlsB3RRv5sE9rRoeBPISaZpKxHELzRxZyLvNts1P27W3wV+8geQ=="],
 
+    "@isaacs/cliui/string-width/emoji-regex": ["emoji-regex@9.2.2", "", {}, "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg=="],
+
+    "@isaacs/cliui/strip-ansi/ansi-regex": ["ansi-regex@6.5.0", "", {}, "sha512-zhvbbbdt1kbw7EJ9OQoxmQcuaNR9P5kTj7e/YdmOSU10aHWbycofJxA6jKfoEy3vlLdctOF9ZHaxLtmSm998wQ=="],
+
+    "@isaacs/cliui/wrap-ansi/ansi-styles": ["ansi-styles@6.2.3", "", {}, "sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg=="],
+
+    "@joshwooding/vite-plugin-react-docgen-typescript/glob/minimatch": ["minimatch@10.2.6", "", { "dependencies": { "brace-expansion": "^5.0.8" } }, "sha512-vpLQEs+VLCr1nU0BXS07maYoFwlDAH0gngQuuttxIwutDFEMHq2blX+8vpgxDdK3J1PwjCJiep77OitTZ4Ll1A=="],
+
+    "@joshwooding/vite-plugin-react-docgen-typescript/glob/path-scurry": ["path-scurry@2.0.2", "", { "dependencies": { "lru-cache": "^11.0.0", "minipass": "^7.1.2" } }, "sha512-3O/iVVsJAPsOnpwWIeD+d6z/7PmqApyQePUtCndjatj/9I5LylHvt5qluFaBT3I5h3r1ejfR056c+FCv+NnNXg=="],
+
+    "cacache/glob/minimatch": ["minimatch@10.2.6", "", { "dependencies": { "brace-expansion": "^5.0.8" } }, "sha512-vpLQEs+VLCr1nU0BXS07maYoFwlDAH0gngQuuttxIwutDFEMHq2blX+8vpgxDdK3J1PwjCJiep77OitTZ4Ll1A=="],
+
+    "cacache/glob/path-scurry": ["path-scurry@2.0.2", "", { "dependencies": { "lru-cache": "^11.0.0", "minipass": "^7.1.2" } }, "sha512-3O/iVVsJAPsOnpwWIeD+d6z/7PmqApyQePUtCndjatj/9I5LylHvt5qluFaBT3I5h3r1ejfR056c+FCv+NnNXg=="],
+
+    "cross-spawn/which/isexe": ["isexe@2.0.0", "", {}, "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="],
+
     "isomorphic-git/readable-stream/string_decoder": ["string_decoder@1.3.0", "", { "dependencies": { "safe-buffer": "~5.2.0" } }, "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA=="],
 
     "minipass-flush/minipass/yallist": ["yallist@4.0.0", "", {}, "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="],
@@ -1788,8 +2144,18 @@
 
     "npm-registry-fetch/npm-package-arg/validate-npm-package-name": ["validate-npm-package-name@7.0.2", "", {}, "sha512-hVDIBwsRruT73PbK7uP5ebUt+ezEtCmzZz3F59BSr2F6OVFnJ/6h8liuvdLrQ88Xmnk6/+xGGuq+pG9WwTuy3A=="],
 
+    "@joshwooding/vite-plugin-react-docgen-typescript/glob/minimatch/brace-expansion": ["brace-expansion@5.0.12", "", { "dependencies": { "balanced-match": "^4.0.2" } }, "sha512-YovQ3rzhaLMIrDjNDMkNS01tea93qhEhG5xy8f6+R0l+dw3Ki+5sCoIoI942iuLZTHWogWktgwVDhU09iNEimQ=="],
+
+    "@joshwooding/vite-plugin-react-docgen-typescript/glob/path-scurry/lru-cache": ["lru-cache@11.5.3", "", {}, "sha512-U4N8FgzmWxc8k1VH8Kr6lQg18U7Fjvby6wXHVRX/ZZ7IwWbRMgrRbP0Wrb5q5NVinryp4SQampHKdvtecItxUg=="],
+
+    "cacache/glob/minimatch/brace-expansion": ["brace-expansion@5.0.12", "", { "dependencies": { "balanced-match": "^4.0.2" } }, "sha512-YovQ3rzhaLMIrDjNDMkNS01tea93qhEhG5xy8f6+R0l+dw3Ki+5sCoIoI942iuLZTHWogWktgwVDhU09iNEimQ=="],
+
     "isomorphic-git/readable-stream/string_decoder/safe-buffer": ["safe-buffer@5.2.1", "", {}, "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ=="],
 
     "npm-registry-fetch/npm-package-arg/hosted-git-info/lru-cache": ["lru-cache@11.5.3", "", {}, "sha512-U4N8FgzmWxc8k1VH8Kr6lQg18U7Fjvby6wXHVRX/ZZ7IwWbRMgrRbP0Wrb5q5NVinryp4SQampHKdvtecItxUg=="],
+
+    "@joshwooding/vite-plugin-react-docgen-typescript/glob/minimatch/brace-expansion/balanced-match": ["balanced-match@4.0.4", "", {}, "sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA=="],
+
+    "cacache/glob/minimatch/brace-expansion/balanced-match": ["balanced-match@4.0.4", "", {}, "sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA=="],
   }
 }
diff --git a/bunfig.toml b/bunfig.toml
new file mode 100644
index 00000000..e4b6bc75
--- /dev/null
+++ b/bunfig.toml
@@ -0,0 +1,3 @@
+[test]
+# The interface's CSS modules, readable in rendered markup.
+preload = ["./apps/web/src/css-modules-preload.ts"]
diff --git a/package.json b/package.json
index 19f22d42..ce29e04d 100644
--- a/package.json
+++ b/package.json
@@ -34,7 +34,7 @@
     "lint": "bun --bun run oxlint --deny-warnings",
     "format": "bun fmt --no-script",
     "format:check": "bun fmt --no-script --check",
-    "typecheck": "bun check --no-script && bun check --no-script -p packages/client && bun check --no-script -p packages/pdf && bun check --no-script -p packages/slidedeck && bun check --no-script -p packages/zip && bun check --no-script -p apps/web",
+    "typecheck": "bun run --cwd apps/web css-types && bun check --no-script && bun check --no-script -p packages/client && bun check --no-script -p packages/pdf && bun check --no-script -p packages/slidedeck && bun check --no-script -p packages/zip && bun check --no-script -p apps/web",
     "test": "bun --conditions=intx-src test ./apps/hub ./apps/web/src ./packages ./workflows ./test/integration",
     "test:e2e": "bun --env-file=.env.hub --conditions=intx-src test ./test/e2e",
     "vendor:verify": "bun scripts/verify-vendor.ts",

From 78e1ff879de18b4b3fe3838e422f94a20afb3dcc Mon Sep 17 00:00:00 2001
From: etodanik <dannypovolotski@gmail.com>
Date: Sat, 7 Nov 2026 01:30:24 +0900
Subject: [PATCH 2/2] fix(web): drop the test preload for CSS modules

A root bunfig preload that registered a Bun plugin stopped the hub's
macros from running in the shared test process. Tests find elements by
data-* attributes, so they no longer need class names in markup. Also
replace nested ternaries and an invented empty-list fallback that the
move touched.
---
 apps/web/src/App.tsx                          | 70 ++++++++++---------
 apps/web/src/css-modules-preload.ts           | 17 -----
 apps/web/src/pages/project-library.tsx        |  9 ++-
 .../src/pages/settings/settings-row.test.tsx  |  2 +-
 apps/web/src/pages/settings/settings-row.tsx  | 12 ++--
 bunfig.toml                                   |  3 -
 6 files changed, 46 insertions(+), 67 deletions(-)
 delete mode 100644 apps/web/src/css-modules-preload.ts
 delete mode 100644 bunfig.toml

diff --git a/apps/web/src/App.tsx b/apps/web/src/App.tsx
index ad782686..ef1824de 100644
--- a/apps/web/src/App.tsx
+++ b/apps/web/src/App.tsx
@@ -804,6 +804,41 @@ export function App() {
     );
   }
 
+  const projectView = () => {
+    if (selected === null)
+      return (
+        <div className={styles.loadFailure}>
+          <p className={styles.loadFailureTitle}>
+            {wording.shell.noProjectTitle}
+          </p>
+          <p>{wording.shell.noProjectLead}</p>
+        </div>
+      );
+    if (settledMissId === selected && openProjectSummary === null)
+      return (
+        <ProjectLoadFailure
+          detail={wording.projectLoadFailure.notListed}
+          onRetry={() => void refresh()}
+          onBackToProjects={() => navigate("projects")}
+        />
+      );
+    return (
+      <StageWorkspace
+        key={selected}
+        projectId={selected}
+        projectTitle={
+          openProjectSummary?.title ?? wording.shell.untitledProject
+        }
+        {...(openProjectSummary === null
+          ? {}
+          : { listedArchived: openProjectSummary.archivedAt !== null })}
+        onChanged={refresh}
+        onOpenSettings={openSettings}
+        {...(openingMessage !== undefined ? { openingMessage } : {})}
+      />
+    );
+  };
+
   return (
     <>
       <div className={styles.app}>
@@ -871,40 +906,7 @@ export function App() {
               />
             ) : null}
 
-            {view === "project" ? (
-              selected !== null &&
-              settledMissId === selected &&
-              openProjectSummary === null ? (
-                <ProjectLoadFailure
-                  detail={wording.projectLoadFailure.notListed}
-                  onRetry={() => void refresh()}
-                  onBackToProjects={() => navigate("projects")}
-                />
-              ) : selected !== null ? (
-                <StageWorkspace
-                  key={selected}
-                  projectId={selected}
-                  projectTitle={
-                    openProjectSummary?.title ?? wording.shell.untitledProject
-                  }
-                  {...(openProjectSummary === null
-                    ? {}
-                    : {
-                        listedArchived: openProjectSummary.archivedAt !== null,
-                      })}
-                  onChanged={refresh}
-                  onOpenSettings={openSettings}
-                  {...(openingMessage !== undefined ? { openingMessage } : {})}
-                />
-              ) : (
-                <div className={styles.loadFailure}>
-                  <p className={styles.loadFailureTitle}>
-                    {wording.shell.noProjectTitle}
-                  </p>
-                  <p>{wording.shell.noProjectLead}</p>
-                </div>
-              )
-            ) : null}
+            {view === "project" ? projectView() : null}
 
             {view === "settings" ? (
               <Settings
diff --git a/apps/web/src/css-modules-preload.ts b/apps/web/src/css-modules-preload.ts
deleted file mode 100644
index 57886eb2..00000000
--- a/apps/web/src/css-modules-preload.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * `bun test` has no CSS modules: an import of one comes back empty, so every
- * class would render as `undefined`. Here each class comes back as its own
- * name instead, which keeps rendered markup readable in assertions.
- */
-import { plugin } from "bun";
-
-plugin({
-  name: "css-modules",
-  setup(build) {
-    build.onLoad({ filter: /\.module\.css$/ }, () => ({
-      loader: "js",
-      contents:
-        "export default new Proxy({}, { get: (_, key) => (typeof key === 'string' ? key : undefined) });",
-    }));
-  },
-});
diff --git a/apps/web/src/pages/project-library.tsx b/apps/web/src/pages/project-library.tsx
index d86e0cd3..022cfae4 100644
--- a/apps/web/src/pages/project-library.tsx
+++ b/apps/web/src/pages/project-library.tsx
@@ -172,13 +172,12 @@ export function ProjectLibrary({
     if (pending === null || pending.before === projects) return;
     changed.current = null;
     if (shown.some((project) => project.id === pending.id)) return;
-    const cards =
-      section.current?.querySelectorAll<HTMLElement>("[data-card-open]") ?? [];
+    const root = section.current;
+    if (root === null) return;
+    const cards = root.querySelectorAll<HTMLElement>("[data-card-open]");
     const next =
       cards[Math.min(pending.index, cards.length - 1)] ??
-      section.current?.querySelector<HTMLElement>(
-        "[data-filters] [aria-pressed='true']",
-      );
+      root.querySelector<HTMLElement>("[data-filters] [aria-pressed='true']");
     next?.focus();
   }, [projects, shown]);
 
diff --git a/apps/web/src/pages/settings/settings-row.test.tsx b/apps/web/src/pages/settings/settings-row.test.tsx
index 02a59d19..4eef9eeb 100644
--- a/apps/web/src/pages/settings/settings-row.test.tsx
+++ b/apps/web/src/pages/settings/settings-row.test.tsx
@@ -14,7 +14,7 @@ test("a row names its control in its key, with one hint line per entry", () => {
   );
 
   expect(html).toMatch(
-    /data-slot="settings-row-key"><label for="theme"><span [^>]*>Theme<\/span><\/label>/,
+    /data-slot="settings-row-key"><label for="theme"><span[^>]*>Theme<\/span><\/label>/,
   );
   expect(html.match(/>Light or dark<|>On this device</g)).toHaveLength(2);
   expect(html).not.toContain("data-highlighted");
diff --git a/apps/web/src/pages/settings/settings-row.tsx b/apps/web/src/pages/settings/settings-row.tsx
index 802e0808..590101cd 100644
--- a/apps/web/src/pages/settings/settings-row.tsx
+++ b/apps/web/src/pages/settings/settings-row.tsx
@@ -12,15 +12,13 @@ function SettingsRowKey({
   htmlFor?: string | undefined;
 }) {
   const hints: readonly ReactNode[] = Array.isArray(hint) ? hint : [hint];
+  let name: ReactNode = null;
+  if (label !== undefined) name = <span className={styles.label}>{label}</span>;
+  if (label !== undefined && htmlFor !== undefined)
+    name = <label htmlFor={htmlFor}>{name}</label>;
   return (
     <div className={styles.key} data-slot="settings-row-key">
-      {label === undefined ? null : htmlFor === undefined ? (
-        <span className={styles.label}>{label}</span>
-      ) : (
-        <label htmlFor={htmlFor}>
-          <span className={styles.label}>{label}</span>
-        </label>
-      )}
+      {name}
       {hints.map((line, index) =>
         line === undefined || line === null || line === "" ? null : (
           <span key={index} className={styles.hint}>
diff --git a/bunfig.toml b/bunfig.toml
deleted file mode 100644
index e4b6bc75..00000000
--- a/bunfig.toml
+++ /dev/null
@@ -1,3 +0,0 @@
-[test]
-# The interface's CSS modules, readable in rendered markup.
-preload = ["./apps/web/src/css-modules-preload.ts"]