diff --git a/.gitignore b/.gitignore
index 6539b17..be86e8f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -109,3 +109,4 @@ pnpm-debug.log*
 
 # Upstream research clone kept out of this clean-room implementation repo.
 /Forza-Horizon-DualSense-Python/
+.superpowers/
diff --git a/PRODUCT.md b/PRODUCT.md
new file mode 100644
index 0000000..12b551b
--- /dev/null
+++ b/PRODUCT.md
@@ -0,0 +1,67 @@
+# Product
+
+## Register
+
+product
+
+## Users
+
+Non-technical Windows gamers ("No Python, no scripts, no command line") who own a
+PlayStation DualSense or DualSense Edge and play on PC — mostly racing games.
+They open DSCC in two modes: a one-time **setup** moment (connect controller,
+check it works) and a recurring **play** moment (pick a game, tune how it feels).
+Between those moments the app should answer one question at a glance:
+"is everything working?"
+
+They are not sim-rig tinkerers. Density, jargon, and diagnostics-first layouts
+read as risk, not power.
+
+## Product Purpose
+
+DSCC changes how a DualSense controller feels on PC: adaptive trigger
+resistance, rich haptics, lights, and live racing-game telemetry turned into
+feel. Success looks like: a user connects a controller, starts a supported
+game, and feels the difference — without ever wondering whether the app is
+about to do something scary to their hardware.
+
+## Brand Personality
+
+Calm, trustworthy, capable. Quiet confidence: a well-made tool that writes to
+real hardware and never makes that feel dangerous. Plain language over jargon
+(domain terms come from CONTEXT.md and are law). Microcopy reassures rather
+than performs.
+
+## Anchor References
+
+- **Linear** — soft dark surfaces, quiet hierarchy, restrained accent use,
+  speed as a feeling.
+- **Raycast** — disciplined density, muted accents, exemplary settings panels.
+
+## Anti-references
+
+- The "gamer cockpit" HUD: grid textures, glows, glassmorphism, scanline
+  energy, all-caps telemetry labels everywhere. (This is what the current UI
+  does and what the rework moves away from.)
+- RGB-gamer aesthetic (Razer/ROG software): loud, busy, salesy.
+- Diagnostics-first layouts that lead with raw numbers instead of the task.
+
+## Design Principles
+
+1. **Status before controls.** Every screen answers "is everything OK?" before
+   it offers anything to change.
+2. **The task is the navigation.** Lead with what the user is doing (set up my
+   controller, make my game feel great), not with tool categories.
+3. **Advanced is opt-in.** Button mapping, calibration readouts, Edge slots,
+   and raw telemetry live behind a clear "Advanced" door — reachable, never
+   ambient.
+4. **Safety is visible, not scary.** Always distinguish dry-run/test effects
+   from live Hardware Output, and Global Profile from an active Game Profile,
+   in plain words.
+5. **Quiet surfaces, one voice.** One accent color doing real work (state,
+   selection, primary action), consistent component vocabulary on every screen.
+
+## Accessibility & Inclusion
+
+WCAG AA contrast (≥4.5:1 body text), full `prefers-reduced-motion` support,
+keyboard navigable. The 390px mobile viewport is an enforced layout target via
+the visual smoke test.
diff --git a/docs/superpowers/plans/2026-06-10-ui-rework.md b/docs/superpowers/plans/2026-06-10-ui-rework.md
new file mode 100644
index 0000000..93ebb23
--- /dev/null
+++ b/docs/superpowers/plans/2026-06-10-ui-rework.md
@@ -0,0 +1,409 @@
+# DSCC Web UI Rework Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Rebuild the DSCC web UI shell and routes into the Status / Tuning / Advanced architecture specified in `docs/superpowers/specs/2026-06-10-ui-rework-design.md`, with the Calm Console + PlayStation-blue visual system.
+
+**Architecture:** Svelte 5 + Vite SPA, hash routing, plain CSS design tokens. New slim sidebar shell replaces the HUD/ribbon; the existing feature components (haptics panels, button mapping, controllers detail) are re-housed, not rewritten. Behavior and API contracts unchanged except UX changes named in the spec.
+
+**Tech Stack:** Svelte 5 runes, plain CSS (no libs), `@lucide/svelte` icons, Playwright visual smoke harness.
+
+**Source-of-truth documents (read before starting any task):**
+- Spec: `docs/superpowers/specs/2026-06-10-ui-rework-design.md`
+- Domain language (law for all copy): `CONTEXT.md`
+- Strategic context: `PRODUCT.md`
+- Approved mockups (layout truth, HTML/CSS reference): `.superpowers/brainstorm/9273-1781129906/content/` — most relevant: `tuning-canvas-v9.html` (canvas + saved rail), `status-advanced-v2-psblue.html` (Status, Advanced, blue tokens), `game-setup.html` + `setup-reentry.html` (setup flow), `shell-hybrid.html` (game dropdown)
+- App.svelte concern map: `docs/architecture-audit.md`
+
+**Ground rules for every task:**
+- Branch: `ui-improvements` only. Never commit to `main`.
+- Gates after each task: `cd web && npm run typecheck && npm run build`. Tasks that change routes/layout also run `npm run test:visual-smoke`. Final task runs the full `npm run check`.
+- No `_Avoid_` terms from CONTEXT.md in any user-facing copy. "Everyday" label always pairs with "Global Profile".
+- This is a UI rework: do not modify `web/src/lib/api/*`, `web/src/lib/mock/*`, or `web/src/lib/types.ts` (the artwork fields `artwork.bannerUrl` / `artwork.heroUrl` already exist at `web/src/lib/types.ts:145-162`).
+- No Rust/backend changes; everything runs from `web/` with `npm run dev:mock`.
+
+---
+
+### Task 1: New design tokens
+
+**Files:**
+- Modify: `web/src/styles/tokens.css` (full replacement)
+
+- [ ] **Step 1: Replace tokens.css with the Calm Console + PS-blue system**
+
+```css
+:root {
+  /* neutrals — calm console */
+  --bg: #141417;
+  --bg-rail: #18181c;        /* sidebar, header bars */
+  --surface: #1d1d22;        /* panels that need a bounded field */
+  --surface-raised: #26262c; /* active nav item, chips, inputs */
+  --hairline: #232329;
+  --hairline-strong: #2e2e36;
+  --ink: #d6d6dc;
+  --ink-muted: #8b8b96;      /* secondary text only; not body-sized prose */
+
+  /* accent — PlayStation blue */
+  --accent: #0070cc;          /* primary buttons */
+  --accent-bright: #1f8fff;   /* slider fills, live lines, meters */
+  --accent-text: #5db2ff;     /* accent-colored text on dark (>=4.5:1) */
+  --accent-tint: #12273d;     /* edited/unsaved backgrounds */
+  --accent-outline: #1d4f80;  /* edited outlines */
+
+  /* semantic */
+  --ok: #4ade80;
+  --ok-tint: #143620;
+  --warn: #facc15;
+  --danger: #f03e3e;
+
+  /* shape & rhythm */
+  --radius-s: 6px;
+  --radius-m: 8px;
+  --radius-l: 10px;
+  --speed: 180ms;
+  --ease: cubic-bezier(0.22, 1, 0.36, 1); /* ease-out-quint-ish */
+
+  /* layout contract (spec §6) */
+  --curve-min: 280px;
+  --curve-max: 460px;
+  --slider-cap: 220px;
+  --saved-rail-w: 260px;
+
+  /* z-scale: dropdown < sticky < backdrop < dialog < toast < tooltip */
+  --z-dropdown: 10;
+  --z-sticky: 20;
+  --z-backdrop: 30;
+  --z-dialog: 40;
+  --z-toast: 50;
+  --z-tooltip: 60;
+
+  color: var(--ink);
+  background: var(--bg);
+  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :root { --speed: 0ms; }
+}
+```
+
+- [ ] **Step 2: Map legacy token names onto the new system so existing CSS keeps compiling**
+
+Append to `tokens.css` (removed again in Task 10 when legacy styles die):
+
+```css
+/* TEMPORARY legacy aliases — delete in cleanup task */
+:root {
+  --obsidian: var(--bg);
+  --carbon: var(--bg-rail);
+  --actuation: var(--accent);
+  --haptic: var(--ink);
+  --tungsten: var(--ink-muted);
+  --overdrive: var(--danger);
+  --ready: var(--ok);
+  --matte: rgba(214, 214, 220, 0.045);
+  --line: rgba(139, 139, 150, 0.28);
+}
+```
+
+- [ ] **Step 3: Gates**
+
+Run: `cd web && npm run typecheck && npm run build && npm run test:visual-smoke`
+Expected: all pass (visuals shift color, structure unchanged).
+
+- [ ] **Step 4: Commit** — `git commit -m "ui-rework: calm-console + PS-blue design tokens with legacy aliases"`
+
+---
+
+### Task 2: Navigation model — new views, old hashes redirect
+
+**Files:**
+- Modify: `web/src/app/navigation.ts` (full replacement)
+- Modify: `web/src/App.svelte` (only the places that consume `AppView` — see `docs/architecture-audit.md` for the routing region)
+- Modify: `web/src/components/ViewNav.svelte` (consumes `appViews`; will be deleted in Task 3 — for now just keep it compiling)
+
+- [ ] **Step 1: Replace navigation.ts**
+
+```ts
+export type AppView = 'status' | 'tuning' | 'advancedController' | 'advancedButtonMapping' | 'advancedEdgeSlots';
+
+export type AppViewDefinition = {
+  id: AppView;
+  label: string;
+  hash: string;
+  group: 'main' | 'advanced';
+};
+
+export type ViewReadiness = {
+  tuningReady: boolean;
+  buttonMappingReady: boolean;
+};
+
+export const appViews: AppViewDefinition[] = [
+  { id: 'status', label: 'Status', hash: '#/status', group: 'main' },
+  { id: 'tuning', label: 'Tuning', hash: '#/tuning', group: 'main' },
+  { id: 'advancedController', label: 'Controller details', hash: '#/advanced/controller', group: 'advanced' },
+  { id: 'advancedButtonMapping', label: 'Button mapping', hash: '#/advanced/button-mapping', group: 'advanced' },
+  { id: 'advancedEdgeSlots', label: 'Edge onboard slots', hash: '#/advanced/edge-slots', group: 'advanced' }
+];
+
+export const viewTooltips: Record<AppView, string> = {
+  status: 'Check that your controller, game detection, and telemetry are working.',
+  tuning: 'Tune trigger feel, rumble, and lights for a game or the Global Profile.',
+  advancedController: 'Live inputs, calibration readings, and connection details.',
+  advancedButtonMapping: 'Edit game/local-app mappings through Steam Input or DSCC Input Bridge.',
+  advancedEdgeSlots: 'Manage DualSense Edge onboard profile slots.'
+};
+
+/** Old routes keep working forever; they land on the new home for that content. */
+const legacyRedirects: Record<string, string> = {
+  '#/games': '#/tuning',
+  '#/adaptive-triggers-haptics': '#/tuning',
+  '#/controllers': '#/advanced/controller',
+  '#/button-mapping': '#/advanced/button-mapping'
+};
+
+export function hashForView(view: AppView): string {
+  return appViews.find((item) => item.id === view)?.hash ?? '#/status';
+}
+
+export function guardView(view: AppView, readiness: ViewReadiness): AppView {
+  if (view === 'tuning' && !readiness.tuningReady) return 'status';
+  if (view === 'advancedButtonMapping' && !readiness.buttonMappingReady) return 'status';
+  return view;
+}
+
+export function viewFromHash(rawHash: string, readiness: ViewReadiness): AppView {
+  const hash = legacyRedirects[rawHash] ?? rawHash;
+  const match = appViews.find((item) => item.hash === hash);
+  return guardView(match?.id ?? 'status', readiness);
+}
+```
+
+- [ ] **Step 2: Fix all compile errors from the `AppView` union change**
+
+Run `npm run typecheck` and chase every error. In `App.svelte`, the old view ids map: `games`→`tuning` (scope strip moves in Task 5), `controllers`→`advancedController`, `haptics`→`tuning`, `buttonMapping`→`advancedButtonMapping`. Keep rendering the *existing* feature views for each new id (GamesView temporarily renders inside `tuning` alongside HapticsView gated by the same conditionals as today — Task 5 replaces this).
+
+- [ ] **Step 3: Gates** — typecheck + build pass. Visual smoke will FAIL on route hashes; that is expected until Task 3 Step 3. Do not run it yet.
+
+- [ ] **Step 4: Commit** — `git commit -m "ui-rework: status/tuning/advanced navigation model with legacy hash redirects"`
+
+---
+
+### Task 3: Shell — sidebar replaces HUD + ribbon, smoke test retargeted
+
+**Files:**
+- Create: `web/src/components/AppSidebar.svelte`
+- Create: `web/src/styles/shell-v2.css`
+- Modify: `web/src/App.svelte` (shell markup region), `web/src/styles/app.css` (import shell-v2 instead of shell/ribbon)
+- Modify: `web/scripts/visual-smoke.mjs` (route list + text expectations)
+- Delete (Task 10, not now): `ViewNav.svelte`, `ContextRibbon.svelte`, `shell.css`, `ribbon.css`
+
+- [ ] **Step 1: Build AppSidebar.svelte**
+
+Props: `view: AppView`, `readiness: ViewReadiness`, `onNavigate(view)`. Layout truth: sidebar in `status-advanced-v2-psblue.html`. Structure:
+
+```svelte
+<script lang="ts">
+  import { appViews, viewTooltips, type AppView, type ViewReadiness } from '../app/navigation';
+  let { view, readiness, onNavigate }: {
+    view: AppView; readiness: ViewReadiness; onNavigate: (view: AppView) => void;
+  } = $props();
+  let advancedOpen = $state(view.startsWith('advanced'));
+  const main = appViews.filter((v) => v.group === 'main');
+  const advanced = appViews.filter((v) => v.group === 'advanced');
+</script>
+
+<nav class="sidebar" aria-label="Main">
+  <div class="sidebar-brand">DSCC</div>
+  {#each main as item}
+    <button class="sidebar-item" class:active={view === item.id}
+      title={viewTooltips[item.id]} onclick={() => onNavigate(item.id)}>{item.label}</button>
+  {/each}
+  <button class="sidebar-group" aria-expanded={advancedOpen}
+    onclick={() => (advancedOpen = !advancedOpen)}>Advanced {advancedOpen ? '▾' : '▸'}</button>
+  {#if advancedOpen}
+    {#each advanced as item}
+      <button class="sidebar-item sidebar-sub" class:active={view === item.id}
+        title={viewTooltips[item.id]} onclick={() => onNavigate(item.id)}>{item.label}</button>
+    {/each}
+  {/if}
+  <div class="sidebar-spacer"></div>
+  <slot name="footer" />
+</nav>
+```
+
+- [ ] **Step 2: shell-v2.css**
+
+```css
+.app-shell { display: flex; min-height: 100vh; background: var(--bg); }
+.sidebar {
+  width: 168px; flex: 0 0 auto; background: var(--bg-rail);
+  display: flex; flex-direction: column; gap: 2px; padding: 14px 10px;
+  position: sticky; top: 0; height: 100vh; z-index: var(--z-sticky);
+}
+.sidebar-brand { font-weight: 600; padding: 6px 10px; }
+.sidebar-item, .sidebar-group {
+  text-align: left; font: inherit; color: var(--ink-muted); background: none; border: 0;
+  padding: 7px 10px; border-radius: var(--radius-s); cursor: pointer;
+  transition: background var(--speed) var(--ease), color var(--speed) var(--ease);
+}
+.sidebar-item:hover { color: var(--ink); background: color-mix(in srgb, var(--surface-raised) 60%, transparent); }
+.sidebar-item.active { color: var(--ink); background: var(--surface-raised); }
+.sidebar-item:focus-visible, .sidebar-group:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 1px; }
+.sidebar-group { font-size: 0.78rem; letter-spacing: 0.02em; text-transform: uppercase; margin-top: 12px; }
+.sidebar-sub { padding-left: 20px; font-size: 0.92em; }
+.sidebar-spacer { flex: 1; }
+.app-main { flex: 1; min-width: 0; }
+
+@media (max-width: 760px) {
+  .app-shell { flex-direction: column; }
+  .sidebar { width: 100%; height: auto; position: sticky; flex-direction: row; flex-wrap: wrap; align-items: center; }
+  .sidebar-spacer { display: none; }
+}
+```
+
+- [ ] **Step 3: Re-house App.svelte's shell** — replace `.ops-shell`/`.dm-hud`/ContextRibbon markup with `.app-shell > AppSidebar + .app-main`. Keep ToastStack, OnboardingTutorial, SupportPanel mounted (SupportPanel trigger moves into the sidebar footer slot). The controller/profile context the ribbon provided moves into the Tuning header (Task 5) and Status (Task 4); until those tasks, render the existing pickers in a plain `.app-main` toolbar so nothing is lost.
+
+- [ ] **Step 4: Retarget the smoke test** — in `web/scripts/visual-smoke.mjs`, update the route table: `#/status` (expect `/Status|Everything|controller/i`), `#/tuning` (expect `/Tuning|Profile/i`), `#/advanced/controller` (expect `/Controller details|Live input/i`), `#/advanced/button-mapping` (keep the existing `/Button Mapping|Default mirror/i` and read-only copy assertions). Also assert the legacy hashes redirect (navigate to `#/games`, expect final hash `#/tuning`).
+
+- [ ] **Step 5: Gates** — typecheck, build, visual-smoke all green at all 3 viewports.
+
+- [ ] **Step 6: Commit** — `git commit -m "ui-rework: sidebar shell, smoke test retargeted to new routes"`
+
+---
+
+### Task 4: Status page
+
+**Files:**
+- Create: `web/src/lib/features/status/StatusView.svelte`
+- Create: `web/src/styles/status.css` (import from app.css)
+- Modify: `web/src/App.svelte` (render StatusView for `view === 'status'`; make `#/status` the default route)
+
+Layout truth: Status block of `status-advanced-v2-psblue.html`. Compose entirely from state App.svelte already holds (controllers list, selected controller, runtime snapshot, profile resolution, telemetry freshness — see `docs/architecture-audit.md` for which module owns each; pass as props, do not re-fetch).
+
+- [ ] **Step 1: Build the four regions**
+  1. Sentence of truth: dot (`--ok`/`--warn`/`--danger`) + "Everything is working." / "Something needs your attention." / "No controller connected yet." + one clause naming game + controller alias.
+  2. CONTROLLER block: alias, family, transport, battery, charging; inline Rename (reuse existing rename action); empty state: "Plug in or pair a controller and it appears here."
+  3. WHAT'S ACTIVE, AND WHY: rows for game detected / profile in use / telemetry / "when the game closes → back to Global Profile" — wording exactly as the mockup; uses Profile Resolution state.
+  4. NEEDS ATTENTION: renders only real findings (telemetry quiet for a running game, controller disconnected mid-session, port conflicts surfaced by existing error state); when empty renders "Nothing else needs you."
+- [ ] **Step 2: CSS** — groups are intrinsic-width flex children (`flex: 1 1 280px; max-width: 420px`), wrap per the layout contract; label style `.lbl` (10px caps muted) shared via status.css.
+- [ ] **Step 3: Gates** — typecheck, build, visual-smoke (Status text assertions now hit real content).
+- [ ] **Step 4: Commit** — `git commit -m "ui-rework: status page with sentence-of-truth and profile resolution"`
+
+---
+
+### Task 5: Tuning canvas — header band, game dropdown, profile menu
+
+**Files:**
+- Create: `web/src/lib/features/tuning/TuningHeader.svelte` (band + game dropdown + profile menu + telemetry chip)
+- Create: `web/src/lib/features/tuning/gameSelect.ts` (pure: builds dropdown groups from games list + detection state — Running now / Everyday · Global Profile / Supported games / Setup guide / Add manually)
+- Create: `web/src/styles/tuning.css`
+- Modify: `web/src/App.svelte` (Tuning route renders TuningHeader + existing HapticsView content; GamesView's scope/selection logic migrates into gameSelect.ts; AddGameDialog opens from the dropdown's "+ Add a game manually…")
+
+Layout truth: header band of `tuning-canvas-v9.html`, dropdown of `shell-hybrid.html`, chip of `setup-reentry.html`.
+
+- [ ] **Step 1: Header band** — 80px, `background-image` from `artwork.heroUrl` with the double scrim (90° dark-left + 0° fade-to-bg); cover thumb from `artwork.bannerUrl` falls back to `InitialBadge`; Everyday/Global renders a flat `--bg-rail` band, no art. Title row: game name + dropdown caret + telemetry chip; second row: `Profile: <name> ▾` + unsaved count (wire in Task 7). Right: controller alias + battery.
+- [ ] **Step 2: Game dropdown** — native-feeling menu (positioned `fixed`, `--z-dropdown`), groups from `gameSelect.ts`, entries: detected game(s) with ● badge, "Everyday (no game) · Global Profile", supported games, divider, "Setup guide for <current>…", "+ Add a game manually…" → existing AddGameDialog. Selecting an entry drives the same scope state GamesView drives today.
+- [ ] **Step 3: Profile menu** — reuse `profileSelection.ts`/`profileManagement.ts` actions (switch, create, duplicate, import, export) in a compact menu under the profile label. GamesView and ProfileConsole stop being routed; leave files in place (deleted Task 10).
+- [ ] **Step 4: Gates + eyes** — gates green; `npm run dev:mock`: dropdown groups correct, art band renders, Everyday band neutral.
+- [ ] **Step 5: Commit** — `git commit -m "ui-rework: tuning header with game dropdown, profile menu, bespoke art band"`
+
+---### Task 6: Tuning canvas — semantic columns
+
+**Files:**
+- Create: `web/src/lib/features/tuning/TuningCanvas.svelte` (the column grid; slots existing panels)
+- Modify: `web/src/styles/tuning.css`
+- Modify: `web/src/App.svelte` / `web/src/lib/features/haptics/*` wiring only (panels keep their internals: TriggerCurvesPanel splits visually into per-trigger columns via props if it doesn't already support single-trigger rendering — if it renders both triggers as one block, add a `trigger: 'L2' | 'R2'` prop rather than rewriting it)
+
+Layout truth + CSS contract: `tuning-canvas-v9.html` (`.canvas-grid`, `.col-trigger`, `.col-small`).
+
+- [ ] **Step 1: Grid CSS**
+
+```css
+.canvas-grid { display: flex; flex-wrap: wrap; gap: 18px 22px; padding: 14px 16px 18px; flex: 1; min-width: 0; }
+.col-trigger { flex: 1 1 300px; min-width: var(--curve-min); max-width: var(--curve-max); }
+.col-small   { flex: 1 1 220px; min-width: 210px; max-width: 320px; }
+.canvas-grid .control-slider { max-width: var(--slider-cap); }
+@media (max-width: 760px) {
+  .col-trigger, .col-small { max-width: none; flex-basis: 100%; }
+}
+```
+
+- [ ] **Step 2: Column composition** — BRAKE · L2 (curve + ABS pulse + lockup effects), THROTTLE · R2 (curve + gear-shift kick + rev-limiter buzz), ROAD FEEL (road texture + surface detail + "More effects appear here for games that send them."), LIGHTS (LightbarControls + brightness + player LEDs). Map the existing Forza effect controls (`forzaEffectState.ts`, HapticsAside) into these groups; effect display names use the spec's plain-words labels.
+- [ ] **Step 3: Gates + eyes** — gates green; verify wrap behavior at ~1280px (Road feel/Lights wrap under triggers) and 390px (stack), no horizontal overflow.
+- [ ] **Step 4: Commit** — `git commit -m "ui-rework: semantic tuning columns (brake/throttle/road feel/lights)"`
+
+---
+
+### Task 7: Saved rail + unsaved diff
+
+**Files:**
+- Create: `web/src/lib/features/tuning/SavedRail.svelte`
+- Create: `web/src/lib/features/tuning/savedDiff.ts` (pure: `(savedProfile, draft) => Array<{label, savedValue, currentValue, dirty}>`)
+- Modify: `web/src/app/profileDraft.ts` consumers in App.svelte to feed savedDiff; `web/src/styles/tuning.css`
+
+Layout truth: saved rail of `tuning-canvas-v9.html` (sticky, outside `.canvas-grid`), mobile bar in the same file's `phone-note`.
+
+- [ ] **Step 1: savedDiff.ts** — derives rows from the active profile's saved values vs. the working draft (`profileDraft.ts` already models the draft; see `docs/architecture-audit.md`). Dirty rows carry both values.
+- [ ] **Step 2: SavedRail.svelte** — `flex: 0 0 var(--saved-rail-w); position: sticky; top: 14px;` docked right of `.canvas-grid` inside a `.work-and-rail` flex wrapper; rows show `saved` muted, dirty rows `saved (strikethrough) → current (--accent-text)`; footer: Preview feel (existing dry-run/test action, caption "3s · nothing saved"), Save changes (`--accent`), Discard. Header band shows "· N unsaved changes" when N > 0. Curve editors render the saved curve as a dashed ghost path when dirty (TriggerCurvesPanel gets a `savedCurve` prop).
+- [ ] **Step 3: <900px bar** — rail hides; a bottom-docked bar (position: fixed, `--z-sticky`) shows "N unsaved changes · Save · Discard", expanding to the rows on tap.
+- [ ] **Step 4: Gates + eyes** — tweak a slider in dev:mock: count appears, rail diffs, Discard restores, Save persists (mock). Smoke green.
+- [ ] **Step 5: Commit** — `git commit -m "ui-rework: sticky saved rail with tweak-vs-saved diff and mobile bar"`
+
+---
+
+### Task 8: Per-game setup state + telemetry chip re-entry
+
+**Files:**
+- Create: `web/src/lib/features/tuning/SetupGuide.svelte`
+- Create: `web/src/lib/features/tuning/setupRequirements.ts` (pure: derives `{required, steps, verified}` per game from existing Game Module metadata + telemetry state; Forza-family games → Data Out steps with IP `127.0.0.1` / port from existing telemetry routing state; shared-memory games → `required: false`)
+- Modify: `TuningHeader.svelte` (chip states + click), `web/src/App.svelte` (canvas renders SetupGuide when selected game unverified)
+
+Layout truth: `game-setup.html`, `setup-reentry.html`. The existing `TelemetryRoutingPanel.svelte` holds today's routing knowledge — mine it for state, then stop routing to it (its LAN settings move to the guide's "Stuck?" details).
+
+- [ ] **Step 1: setupRequirements.ts + persistence** — verification = telemetry packets seen for that game at least once (persist per game id in the same store the app already uses for UI prefs/onboarding state). Once verified, guide never auto-shows.
+- [ ] **Step 2: SetupGuide.svelte** — numbered steps with done/now/todo states; copy buttons for IP/port (`navigator.clipboard.writeText`); LISTENING box bound to live telemetry state, flips to `--ok` automatically and swaps the canvas in (no click). Zero-setup variant: "No setup needed" + "Start tuning →" (pre-tune base feel).
+- [ ] **Step 3: Chip re-entry** — chip variants: green "● TELEMETRY FRESH · setup ↗", neutral (no telemetry game), yellow "● TELEMETRY QUIET · fix ↗". Click toggles the guide over the canvas (canvas state, not modal); Status → Needs attention links to `#/tuning` with the guide open when quiet.
+- [ ] **Step 4: Gates + eyes** — mock flow: select unverified Forza → guide; simulate packets (mock fixture) → canvas swaps in; chip reopens guide. Smoke green.
+- [ ] **Step 5: Commit** — `git commit -m "ui-rework: per-game setup guide with passive verification and chip re-entry"`
+
+---
+
+### Task 9: Advanced section
+
+**Files:**
+- Modify: `web/src/App.svelte` (route the three advanced views), `web/src/lib/features/controllers/ControllersView.svelte` (restyle wrapper to canvas system; live input meters to `--accent-bright`; plain-words drift line; Support Bundle button joins this page), Edge slots UI extracted from ControllersView into the `advancedEdgeSlots` route if currently embedded
+- Modify: `web/src/styles/controllers.css` → re-skin to tokens (structure may stay)
+- Modify: button-mapping styles only where old tokens/HUD chrome leak through (`web/src/styles/button-mapping/*`); **all button-mapping copy and workflow unchanged** (smoke asserts it)
+
+- [ ] **Step 1: Controller details** — LIVE INPUT / CONNECTION / SUPPORT groups per `status-advanced-v2-psblue.html`; header line "Kyle's Edge · live readouts for checking, not for everyday tuning" pattern.
+- [ ] **Step 2: Edge onboard slots route** — existing slots UI under `#/advanced/edge-slots`; hidden when the Target Controller isn't an Edge (sidebar item disabled with tooltip).
+- [ ] **Step 3: Button mapping re-skin** — token sweep only.
+- [ ] **Step 4: Gates** — typecheck, build, visual-smoke (button-mapping copy assertions prove behavior intact).
+- [ ] **Step 5: Commit** — `git commit -m "ui-rework: advanced section (controller details, edge slots, button mapping reskin)"`
+
+---
+
+### Task 10: Cleanup + full gate run
+
+**Files:**
+- Delete: `web/src/components/ViewNav.svelte`, `web/src/components/ContextRibbon.svelte`, `web/src/lib/features/games/GamesView.svelte`, `web/src/lib/features/profiles/ProfileConsole.svelte` (confirm nothing imports them first), `web/src/styles/shell.css`, `web/src/styles/ribbon.css`, `web/src/styles/games.css`, `web/src/styles/games-catalog.css`, `web/src/styles/workspace.css` (audit each for still-used rules before deleting; move survivors into the new files)
+- Modify: `web/src/styles/tokens.css` (delete the legacy alias block), `web/src/styles/app.css` (prune imports), `web/src/styles/responsive.css` (prune dead selectors)
+
+- [ ] **Step 1: Dead-code sweep** — `grep -rn "ContextRibbon\|ViewNav\|GamesView\|ProfileConsole\|--obsidian\|--carbon\|--actuation\|--haptic\b\|--tungsten\|--matte\|dm-hud\|ops-shell" web/src web/scripts` must return zero hits after deletions.
+- [ ] **Step 2: Full gates** — `cd web && npm run check` (typecheck, source-audit, button-map, snapshot-map, haptics-graph, build, release-size, visual-smoke) — ALL green.
+- [ ] **Step 3: Eyes-on pass** — `npm run dev:mock`: walk Status → Tuning (Everyday + Forza + zero-setup game) → setup guide → Advanced ×3, at desktop width and 390px. Check every spec §11 state.
+- [ ] **Step 4: Commit** — `git commit -m "ui-rework: remove HUD-era shell, styles, and routed views"`
+
+---
+
+## Self-review notes (already applied)
+
+- Spec §5 route map ↔ Task 2 redirects: consistent.
+- Spec §12 safety copy lives in Tasks 5 (chip), 7 (rail/preview), 8 (guide).
+- Smoke-test retarget happens in the same task that breaks old routes (Task 3) so the suite is never red across a commit boundary.
+- TriggerCurvesPanel/`savedCurve` and `trigger` props are the only feature-component API changes; everything else is composition.
+- Release-size budget (`test:release-size`) may need headroom if Steam hero images were bundled — they are NOT: art comes from existing `artwork.*Url` fields at runtime; no new assets ship.
diff --git a/docs/superpowers/specs/2026-06-10-ui-rework-design.md b/docs/superpowers/specs/2026-06-10-ui-rework-design.md
new file mode 100644
index 0000000..a828f83
--- /dev/null
+++ b/docs/superpowers/specs/2026-06-10-ui-rework-design.md
@@ -0,0 +1,206 @@
+# DSCC Web UI Rework — Design Brief
+
+**Date:** 2026-06-10 · **Branch:** `ui-improvements` · **Status:** awaiting approval, no implementation yet
+**Inputs:** brainstorm + 12 browser-validated mockups (`.superpowers/brainstorm/9273-1781129906/content/`), PRODUCT.md, CONTEXT.md, impeccable skill (product register)
+
+## 1. Feature Summary
+
+Reimagine the DSCC web UI as a calm, task-oriented app for non-technical Windows
+gamers. The four parallel tool routes become a three-destination shell — Status,
+Tuning, Advanced — where the primary surface is a game-led tuning canvas and
+power tools are demoted behind an Advanced door. Visual system moves from the
+"gamer cockpit" HUD to a Calm Console aesthetic (Linear/Raycast lineage) with a
+PlayStation-blue accent.
+
+## 2. Primary User Action
+
+Pick a game (or Everyday), tune how the controller feels, and always know two
+things at a glance: *is everything working* and *what's saved vs. what I've
+tweaked*.
+
+## 3. Design Direction
+
+- **Color strategy:** Restrained. Neutral dark surfaces; one accent doing real
+  work (actions, selection, live/edited state).
+- **Scene sentence:** An evening PC gamer at a desk or couch in a dim room,
+  controller in hand, game about to launch — glancing at DSCC to confirm
+  everything works, then nudging feel. → Dark theme, low-glare, quiet.
+- **Anchors:** Linear (soft dark surfaces, quiet hierarchy), Raycast
+  (disciplined density, settings craft).
+- **Anti-references:** current HUD (grid textures, glows, glass), RGB-gamer
+  software, diagnostics-first layouts.
+
+## 4. Scope
+
+- **Fidelity:** production-ready (the mockups are direction; implementation is
+  real Svelte 5 + CSS, no component library).
+- **Breadth:** whole web UI — shell, all routes, tokens.
+- **Interactivity:** shipped-quality; behavior preserved except where this
+  brief intentionally changes UX.
+- **Time intent:** iterate route-by-route on `ui-improvements`; nothing merges
+  until the gates pass and the user signs off in the running app.
+
+## 5. Information Architecture
+
+```
+Sidebar (slim, persistent; icon rail <760px)
+├─ Status        ← default route on launch
+├─ Tuning        ← game-led canvas (the heart of the app)
+├─ ADVANCED ▸    ← collapsed group, expands in place
+│   ├─ Controller details   (live input, calibration, connection)
+│   ├─ Button mapping       (existing workflow, restyled only)
+│   └─ Edge onboard slots
+└─ ⚙ Settings
+```
+
+- **No Games page.** Game selection is a dropdown in the Tuning header:
+  Running now (detected) → Everyday (Global Profile) → Supported games →
+  "Setup guide for <game>…" → "+ Add a game manually…".
+- **Profiles live in the canvas**: profile selector under the game title;
+  create/duplicate/import/export inside that menu.
+- Old routes `#/games`, `#/controllers`, `#/adaptive-triggers-haptics`,
+  `#/button-mapping` map to `#/status`, `#/tuning`,
+  `#/advanced/controller`, `#/advanced/button-mapping` (old hashes redirect).
+
+## 6. The Tuning Canvas (locked pattern, mockup v9)
+
+**Header band (per game, bespoke):** Steam `library_hero` behind a slim ~80px
+band, double-scrimmed into the page bg; `library_600x900` cover thumbnail
+anchors the game dropdown; profile selector + unsaved-changes count beneath the
+title; controller name/battery right-aligned; clickable telemetry status chip.
+Everyday (Global Profile) uses a neutral band, no game art.
+
+**Working surface — semantic columns, not control-type rows:**
+- **Brake · L2** — trigger curve editor + brake effects (ABS pulse, lockup rumble)
+- **Throttle · R2** — trigger curve editor + throttle effects (gear-shift kick,
+  rev-limiter buzz)
+- **Road feel** — road texture rumble, surface detail; game-provided effects
+  appear here
+- **Lights** — lightbar mode/RPM colors, brightness, player LEDs
+
+**Saved rail (furniture):** fixed ~260px panel docked right, sticky on scroll,
+excluded from wrapping. Shows the active profile's saved values; edited rows
+render `saved → current` with strikethrough; curve editors echo with a dashed
+saved-curve ghost. Contains Preview feel ("3s · nothing saved") above
+Save changes / Discard. Below ~900px it becomes a docked bottom bar
+("2 unsaved changes · Save · Discard", expands to the list on tap).
+
+**Layout contract (the no-wasted-space law):**
+- Controls have intrinsic sizes; extra width adds columns or grows
+  *instruments only* — never stretches sliders/rows.
+- Curve editors: flex 280→460px (instruments earn size). Sliders: ~220px cap.
+- Columns flex-wrap: 5-across on wide, Road feel/Lights wrap under
+  Brake/Throttle near 720p widths, single column <760px.
+- Saved rail is outside the wrap container at all times (until the <900px bar).
+- Smoke test enforces no horizontal overflow at 390px.
+
+## 7. Status (default route)
+
+1. **One sentence of truth:** green/yellow/red dot + "Everything is working." +
+   one plain-language clause naming game and controller.
+2. **Controller** block: alias, family, connection/transport, battery; Rename
+   inline; hint line for adding another controller.
+3. **What's active, and why:** Profile Resolution as plain-words rows — game
+   detected, profile in use, telemetry freshness, "when the game closes →
+   back to Global Profile".
+4. **Needs attention:** the only home for warnings; states "Nothing else needs
+   you" when empty. Links into game setup if telemetry goes quiet.
+
+## 8. Per-Game Setup (canvas state, not a pop-up)
+
+- Each Game Module declares its requirements. Selecting an unverified game
+  renders the walkthrough *in the canvas*; once verified, the canvas shows
+  tuning controls permanently.
+- Forza-style flow: numbered steps (a real sequence): ① game found
+  (auto-verified) ② enable Data Out with exact menu path + copy buttons for
+  IP/port ③ drive. A "Listening on port 5300…" box flips green passively when
+  packets arrive — completion requires zero clicks.
+- Zero-setup games (Assetto Corsa Rally): "No setup needed" reassurance +
+  offer to pre-tune with base feel.
+- **Re-entry:** the header telemetry chip ("● TELEMETRY FRESH · setup ↗") opens
+  the guide anytime; turns yellow and deep-links to the fix when telemetry is
+  quiet. Fallback entry in the game dropdown. Telemetry loss never yanks the
+  canvas — it flags Status → Needs attention.
+
+## 9. Advanced
+
+Sidebar group expands in place. Controller details = live input meters,
+connection facts (transport, input path, polling, firmware), stick-drift
+plain-words readout, Support Bundle download. Framed as "for checking, not for
+everyday tuning." Button mapping keeps its current workflow and copy
+(read-only mirror messaging preserved for the smoke test), restyled to the new
+tokens. Edge onboard slots move here.
+
+## 10. Visual System (tokens.css rewrite)
+
+Neutrals (Calm Console): bg `#141417` · sidebar/header `#18181c` · surface
+`#1d1d22` · raised `#26262c` · hairline `#232329` / `#2e2e36` · ink `#d6d6dc`
+· muted `#8b8b96` (large/secondary text only; verify 4.5:1 where body-sized).
+
+Accent (PlayStation blue): `--accent #0070CC` (primary buttons) ·
+`--accent-bright #1f8fff` (slider fills, live lines, meters) ·
+`--accent-text #5db2ff` (accent text on dark, ≥4.5:1) · `--accent-tint #12273d`
+(edited/unsaved bg) · `--accent-outline #1d4f80` (edited outlines).
+Semantic: green = working, yellow = attention, red = errors only.
+Final values to be expressed in OKLCH with contrast verified at implementation.
+
+Type: Inter only (drop Space Grotesk display pairing); fixed rem scale, ratio
+~1.2; JetBrains Mono retained solely for literal values (ports, IPs).
+Surfaces: flat fills + hairlines; no glassmorphism, grid textures, glows, or
+side-stripe borders. Radii ~6–10px. Motion: 150–250ms ease-out state
+transitions only; full `prefers-reduced-motion` support.
+
+## 11. Key States
+
+- Tuning: setup-needed (walkthrough) · waiting-for-detection · active-clean ·
+  active-with-unsaved (count in header, diff in rail, ghost curves) ·
+  Everyday/Global (neutral band) · no-controller (point to Status).
+- Status: all-good · attention (yellow) · no-controller-yet (first-run:
+  connect instructions) · telemetry-quiet.
+- Saved rail: clean (values only) · dirty (diffs + actions) · mobile bar.
+- Empty states teach ("Plug in or pair a controller and it appears here").
+
+## 12. Safety Framing (constraint #4)
+
+Preview feel is always labeled "Nothing is saved"; unsaved drift is always
+visible (header count + rail diff); plain-words distinction between what's
+saved, what the controller is using right now, and what happens on
+Save/Discard. Global vs Game Profile state is always named in the header and
+on Status.
+
+## 13. Constraints & Gates
+
+- Domain language from CONTEXT.md is law; no _Avoid_ terms in copy.
+  "Everyday" is a presentation label only and always appears with its domain
+  term ("Everyday · Global Profile"); the term of record in copy, code, and
+  docs remains Global Profile.
+- Mock/real API contracts unchanged (`web/src/lib/mock/`, `web/src/lib/api/`).
+  Steam art assets come via existing game artwork fields; if hero/cover grades
+  are missing for a title, fall back to a neutral band + InitialBadge.
+- Behavior preserved except UX changes specified here.
+- Gates before any "done": `npm run typecheck`, `npm run build`,
+  `npm run test:visual-smoke` (route-text assertions will need updating to the
+  new IA in the same change), `npm run test:source-audit`, plus eyes-on
+  `dev:mock` at desktop and 390px.
+- Coordinate with the architecture-decomposition effort: this rework
+  effectively decomposes App.svelte's route shells; note overlaps in PRs.
+
+## 14. Implementation Shape (route-by-route, each step green)
+
+1. Tokens + shell: new tokens.css, sidebar, hash redirects (old routes still
+   render existing views inside the new shell).
+2. Status page (new).
+3. Tuning canvas: header band + game dropdown + profile menu; semantic
+   columns wrapping existing trigger/haptics controls; saved rail.
+4. Per-game setup state + telemetry chip re-entry.
+5. Advanced: move controllers detail + button mapping + Edge slots; restyle.
+6. Delete dead styles (HUD, ribbon, games grid); update smoke-test
+   expectations; full gate run.
+
+## 15. Open Questions (deliberately few)
+
+- Sidebar at 390px: icon rail vs. bottom tab bar — decide in implementation
+  against the smoke test; mockups assume collapse, either satisfies the
+  contract.
+- Onboarding tutorial and LAN settings panel: keep current behavior, restyle
+  only; revisit copy in a later pass.
diff --git a/web/scripts/visual-smoke.mjs b/web/scripts/visual-smoke.mjs
index 7afd905..b8d4533 100644
--- a/web/scripts/visual-smoke.mjs
+++ b/web/scripts/visual-smoke.mjs
@@ -12,11 +12,15 @@ const port = requestedPort > 0 ? requestedPort : await findOpenPort(5174);
 const baseUrl = `http://${host}:${port}`;
 const npmCommand = process.platform === 'win32' ? 'npm.cmd' : 'npm';
 const routeChecks = [
-  { hash: '#/games', pattern: /Profiles|Games|Selected Game/i },
-  { hash: '#/controllers', pattern: /Controllers|Live Input|Input Path/i },
-  { hash: '#/adaptive-triggers-haptics', pattern: /Trigger Curves|Base Haptics|Adaptive/i },
-  { hash: '#/button-mapping', pattern: /Customize Button Assignments|Button Mapping|Default mirror/i }
+  { hash: '#/status', pattern: /Status|Everything|controller/i },
+  { hash: '#/tuning', pattern: /Tuning|Profile/i },
+  { hash: '#/advanced/controller', pattern: /Controller details|Live input/i },
+  // Button mapping needs a game scope first; main() selects one via the
+  // toolbar on the previously loaded page, so this check must stay LAST.
+  { hash: '#/advanced/button-mapping', pattern: /Button Mapping|Default mirror/i }
 ];
+// Old routes keep working forever; each lands on the new home for its content.
+const legacyRedirectChecks = [{ from: '#/games', to: '#/tuning' }];
 const viewports = [
   { width: 1366, height: 768 },
   { width: 1440, height: 900 },
@@ -114,6 +118,16 @@ async function main() {
       });
 
       for (const check of routeChecks) {
+        if (check.hash === '#/advanced/button-mapping') {
+          // Button mapping is guarded behind a game scope; pick the mock
+          // running game from the Tuning header's game dropdown so the route
+          // does not bounce.
+          await page.goto(`${baseUrl}/#/tuning`, { waitUntil: 'domcontentloaded' });
+          await page.waitForTimeout(300);
+          await page.click('.tuning-header-game');
+          await page.click('.tuning-menu .tuning-menu-item:has(.tuning-running-dot)');
+          await page.waitForTimeout(500);
+        }
         await page.goto(`${baseUrl}/${check.hash}`, { waitUntil: 'domcontentloaded' });
         await page.waitForTimeout(300);
         const snapshot = await routeSnapshot(page);
@@ -122,8 +136,17 @@ async function main() {
         if (!check.pattern.test(snapshot.text)) failures.push(`${label}: expected route text was missing`);
         if (!snapshot.canReachBottom) failures.push(`${label}: page content could not scroll to the bottom`);
         if (snapshot.scrollWidth > snapshot.clientWidth + 2) failures.push(`${label}: horizontal overflow ${snapshot.scrollWidth - snapshot.clientWidth}px`);
-        if (check.hash === '#/button-mapping' && !/Default mirror only|No writable|read-only|Global Profile/i.test(snapshot.text)) {
-          failures.push(`${label}: read-only/default-mirror mapping copy was missing`);
+        if (check.hash === '#/advanced/button-mapping' && !/Default mirror only|No writable|read-only|inputs mapped/i.test(snapshot.text)) {
+          failures.push(`${label}: mapping session copy (read-only or live layout) was missing`);
+        }
+      }
+
+      for (const redirect of legacyRedirectChecks) {
+        await page.goto(`${baseUrl}/${redirect.from}`, { waitUntil: 'domcontentloaded' });
+        await page.waitForTimeout(300);
+        const finalHash = await page.evaluate(() => location.hash);
+        if (finalHash !== redirect.to) {
+          failures.push(`${viewport.width}x${viewport.height} ${redirect.from}: redirected to ${finalHash}, expected ${redirect.to}`);
         }
       }
       if (consoleErrors.length) {
diff --git a/web/src/App.svelte b/web/src/App.svelte
index e5366bc..313f4d6 100644
--- a/web/src/App.svelte
+++ b/web/src/App.svelte
@@ -1,15 +1,14 @@
 <script lang="ts">
   import { Cable, CircleHelp, ExternalLink, LifeBuoy, RefreshCw } from '@lucide/svelte';
   import { onMount } from 'svelte';
-  import Tooltip from './components/Tooltip.svelte';
-  import ContextRibbon from './components/ContextRibbon.svelte';
+  import AppSidebar from './components/AppSidebar.svelte';
   import AddGameDialog from './lib/features/games/AddGameDialog.svelte';
-  import GamesView from './lib/features/games/GamesView.svelte';
+  import StatusView from './lib/features/status/StatusView.svelte';
+  import TuningHeader from './lib/features/tuning/TuningHeader.svelte';
   import OnboardingTutorial from './components/OnboardingTutorial.svelte';
-  import ViewNav from './components/ViewNav.svelte';
   import SupportPanel from './components/SupportPanel.svelte';
   import ToastStack from './components/ToastStack.svelte';
-  import { appViews, guardView, hashForView, viewFromHash, viewTooltips } from './app/navigation';
+  import { guardView, hashForView, isViewHash, viewFromHash } from './app/navigation';
   import { createAppRuntime } from './app/runtime';
   import {
     createButtonMappingSession,
@@ -81,11 +80,27 @@
     type TuningScope
   } from './app/profileWorkspace';
   import ControllersView from './lib/features/controllers/ControllersView.svelte';
-  import HapticsAside from './lib/features/haptics/HapticsAside.svelte';
-  import HapticsView from './lib/features/haptics/HapticsView.svelte';
+  import EdgeSlotsView from './lib/features/controllers/EdgeSlotsView.svelte';
+  import GlobalFeelPanel from './lib/features/haptics/GlobalFeelPanel.svelte';
+  import LightbarControls from './lib/features/haptics/LightbarControls.svelte';
+  import TelemetryRoutingPanel from './lib/features/haptics/TelemetryRoutingPanel.svelte';
   import TriggerCurvesPanel from './lib/features/haptics/TriggerCurvesPanel.svelte';
+  import TuningCanvas from './lib/features/tuning/TuningCanvas.svelte';
+  import SavedRail from './lib/features/tuning/SavedRail.svelte';
+  import SetupGuide from './lib/features/tuning/SetupGuide.svelte';
+  import { telemetryPortFromAdapter } from './lib/features/tuning/setupRequirements';
+  import {
+    loadVerifiedSetupGameIds,
+    markSetupVerified,
+    type VerifiedSetupGameIds
+  } from './app/setupVerification';
+  import { savedDiffRows, unsavedChangeCount } from './lib/features/tuning/savedDiff';
   import {
     clampUnit,
+    DEFAULT_BODY_FEEL,
+    DEFAULT_LIGHTBAR_BRIGHTNESS,
+    DEFAULT_LIGHTBAR_COLOR,
+    DEFAULT_REDLINE_COLOR,
     defaultTriggerCurve,
     defaultTriggerCurvePoints,
     type ForzaEffectMeta,
@@ -131,6 +146,7 @@
     bodyRumbleModeOptions,
     forzaEffectMetas,
     forzaRoutes,
+    tuningColumnForEffect,
     triggerEffectHelp,
     triggerEffectOptions,
     triggerStrengthHelp,
@@ -163,13 +179,6 @@
     forzaTuningFromConfig,
     type ForzaTuningValues
   } from './app/forzaEffectState';
-  import {
-    gameAccentColor,
-    gameArtwork,
-    gameMediaDetails,
-    gameTileStatus,
-    profileScopeCount as countProfilesForGame
-  } from './lib/features/games/gamePresentation';
   import {
     defaultProfileIdForGame,
     usesForzaRuntimeProfile
@@ -269,6 +278,9 @@
   let edgeProfilesError = '';
   let inputBridgeBusy: 'mode' | 'start' | 'stop' | '' = '';
   let profileSaveBaselineSignature = '';
+  // The saved baseline retained as a config object so the saved rail can diff
+  // the working draft against what the profile actually has on disk.
+  let profileSaveBaselineConfig: EditableControllerConfig | null = null;
   let profileConfigDirty = false;
   let effectActivityUntil: Record<string, number> = {};
   let partialErrorsDismissed = false;
@@ -279,6 +291,13 @@
   let updateDismissalLoaded = false;
   let onboardingOpen = false;
   let onboardingLoaded = false;
+  // Per-game setup state (Task 8). `verifiedSetupGameIds` mirrors the
+  // persisted "packets seen at least once" flags; `setupGuideManual` tracks a
+  // deliberate re-entry (chip, dropdown, Status deep-link) and resets when the
+  // selected game changes. Unverified games pin the guide open on their own.
+  let verifiedSetupGameIds: VerifiedSetupGameIds = loadVerifiedSetupGameIds();
+  let setupGuideManual = false;
+  let setupGuideGameTracker = '';
   let renameProfileId = '';
   let renameProfileName = '';
   let profileRenameBusy = false;
@@ -317,11 +336,11 @@
   let curveDragSide: TriggerSide | null = null;
   let curveDragPoint: CurveDragPoint | null = null;
   let triggerCurveDisplayMode: TriggerCurveDisplayMode = 'base';
-  let activeView: AppView = 'games';
+  let activeView: AppView = 'status';
   let triggerEffect = 'Adaptive resistance';
   let triggerIntensity = 'Strong (Standard)';
   let vibrationIntensity = 'Medium';
-  let vibrationMode = 'Balanced';
+  let vibrationMode: string = DEFAULT_BODY_FEEL;
   let forzaTuning: ForzaTuningValues = defaultForzaTuningValues();
   $: forzaBodyRumbleMode = forzaTuning.bodyRumbleMode;
   $: forzaEffects = forzaTuning.effects;
@@ -331,9 +350,9 @@
   $: forzaShiftTuning = forzaTuning.shift;
   $: forzaRevLimiterTuning = forzaTuning.revLimiter;
   let lightbarEnabled = true;
-  let lightbarColor = '#4cc9f0';
-  let rpmColor = '#ff3a2e';
-  let lightbarBrightness = 72;
+  let lightbarColor: string = DEFAULT_LIGHTBAR_COLOR;
+  let rpmColor: string = DEFAULT_REDLINE_COLOR;
+  let lightbarBrightness: number = DEFAULT_LIGHTBAR_BRIGHTNESS;
   let leftStickDeadzone = 0;
   let rightStickDeadzone = 0;
 
@@ -343,6 +362,12 @@
   // when forzaEffects is reassigned (Svelte can't statically trace the
   // dependency through a plain function call to forzaEffect()).
   $: forzaEffectsById = new Map(forzaEffects.map((effect) => [effect.id, effect]));
+  // Semantic tuning columns: effects grouped by what is being tuned (never by
+  // control type); anything unmapped lands in Road feel.
+  const brakeEffectMetas = forzaEffectMetas.filter((meta) => tuningColumnForEffect(meta) === 'brake');
+  const throttleEffectMetas = forzaEffectMetas.filter((meta) => tuningColumnForEffect(meta) === 'throttle');
+  const roadEffectMetas = forzaEffectMetas.filter((meta) => tuningColumnForEffect(meta) === 'road');
+  const lightEffectMetas = forzaEffectMetas.filter((meta) => tuningColumnForEffect(meta) === 'lights');
 
   $: {
     const nextSelection = reconcileTargetControllerWorkspaceSelection({
@@ -475,8 +500,9 @@
   $: selectedTuningGame = profileWorkspace.selectedTuningGame;
   $: tuningReady = profileWorkspace.tuningReady;
   $: buttonMappingReady = profileWorkspace.buttonMappingReady;
+  $: edgeSlotsReady = isEdgeTargetController(controller);
   $: {
-    const guardedView = guardView(activeView, { tuningReady, buttonMappingReady });
+    const guardedView = guardView(activeView, { tuningReady, buttonMappingReady, edgeSlotsReady });
     if (guardedView !== activeView) {
       activeView = guardedView;
       setViewHash(guardedView);
@@ -498,10 +524,85 @@
   $: activeProfileHeader = profileWorkspace.activeProfileHeader;
   $: activeProfileHeaderName = profileWorkspace.activeProfileHeaderName;
   $: activeProfileHeaderMeta = profileWorkspace.activeProfileHeaderMeta;
-  $: buttonMappingActive = activeView === 'buttonMapping';
+  $: buttonMappingActive = activeView === 'advancedButtonMapping';
+  // View composition: each route renders its own view; views the guard rejects
+  // land on 'status' (Edge onboard slots land on Controller details instead).
+  $: showAdvancedControllerView = activeView === 'advancedController';
+  $: showEdgeSlotsView = activeView === 'advancedEdgeSlots';
+  $: showStatusView = activeView === 'status';
+  $: showTuningView = activeView === 'tuning';
+  $: showWorkspaceViews =
+    showAdvancedControllerView ||
+    showEdgeSlotsView ||
+    (tuningReady && (activeView === 'tuning' || activeView === 'advancedButtonMapping'));
   $: steamInputStatus = snapshot?.steamInput;
   $: inputBridgeStatus = snapshot?.inputBridge;
   $: telemetryPacketRate = adapter?.packetRateHz ?? 0;
+  // --- per-game setup guide state (Task 8) --------------------------------
+  $: telemetryPort = telemetryPortFromAdapter(adapter);
+  $: selectedGameSetupVerified =
+    selectedTuningScope !== 'game' || !selectedTuningGame
+      ? true
+      : Boolean(verifiedSetupGameIds[selectedTuningGame.gameId]);
+  // Fresh Telemetry attributed to the selected game: it must be the game the
+  // agent actually detected, with its Telemetry Adapter running and packets
+  // arriving. Telemetry loss never yanks the canvas — it only flips the chip
+  // to Quiet and surfaces a Status finding.
+  $: selectedGameTelemetryFresh = Boolean(
+    selectedTuningScope === 'game' &&
+      selectedTuningGame?.running &&
+      selectedTuningGame.supportLevel === 'telemetry' &&
+      snapshot?.gameDetection.activeGameId === selectedTuningGame.gameId &&
+      adapter?.state === 'running' &&
+      telemetryPacketRate > 0
+  );
+  $: if (selectedTuningGameId !== setupGuideGameTracker) {
+    setupGuideGameTracker = selectedTuningGameId;
+    setupGuideManual = false;
+  }
+  $: showSetupGuide =
+    showTuningView &&
+    tuningReady &&
+    selectedTuningScope === 'game' &&
+    Boolean(selectedTuningGame) &&
+    (setupGuideManual || !selectedGameSetupVerified);
+
+  const markSelectedGameSetupVerified = () => {
+    const gameId = selectedTuningScope === 'game' ? (selectedTuningGame?.gameId ?? '') : '';
+    if (!gameId) return;
+    verifiedSetupGameIds = markSetupVerified(verifiedSetupGameIds, gameId);
+  };
+
+  // Passive completion: SetupGuide calls this when the first packets arrive
+  // (or via "Start tuning" on the zero-setup variant). The canvas swaps in
+  // because the unverified pin disappears — no click required.
+  const completeSetupGuide = () => {
+    markSelectedGameSetupVerified();
+    setupGuideManual = false;
+  };
+
+  const toggleSetupGuide = () => {
+    if (!selectedGameSetupVerified) return; // pinned open until verified
+    setupGuideManual = !setupGuideManual;
+  };
+
+  const openSetupGuide = () => {
+    if (selectedTuningScope !== 'game') return;
+    setupGuideManual = true;
+  };
+
+  // Status → Needs attention deep-link: land on #/tuning with the guide open
+  // for the detected game.
+  const openSetupGuideFromStatus = async () => {
+    const game = selectedGame ?? selectedTuningGame ?? null;
+    if (!game) {
+      navigateToView('tuning');
+      return;
+    }
+    await selectTuningGame(game);
+    setupGuideGameTracker = game.gameId;
+    setupGuideManual = true;
+  };
   $: telemetryRateText = `${telemetryPacketRate >= 100 ? telemetryPacketRate.toFixed(0) : telemetryPacketRate.toFixed(1)} Hz`;
   $: telemetryRateDetail = telemetryRateStatusText(adapter);
   $: systemReadoutTitle = selectedTuningScope === 'global' ? 'Profile Scope' : 'Telemetry Rate';
@@ -632,8 +733,8 @@
   };
 
   const appViewFromHash = (): AppView => {
-    if (typeof window === 'undefined') return 'games';
-    return viewFromHash(window.location.hash, { tuningReady, buttonMappingReady });
+    if (typeof window === 'undefined') return 'status';
+    return viewFromHash(window.location.hash, { tuningReady, buttonMappingReady, edgeSlotsReady });
   };
 
   const setViewHash = (view: AppView) => {
@@ -649,7 +750,7 @@
   };
 
   const navigateToView = (view: AppView) => {
-    view = guardView(view, { tuningReady, buttonMappingReady });
+    view = guardView(view, { tuningReady, buttonMappingReady, edgeSlotsReady });
     activeView = view;
     setViewHash(view);
   };
@@ -756,8 +857,6 @@
     stopTriggerInputPolling();
   };
 
-  const profileScopeCount = (game: SupportedGame) => countProfilesForGame(game, profiles);
-
   const openAddGameDialog = async () => {
     addGameOpen = true;
     addGameError = '';
@@ -916,8 +1015,8 @@
     selectedTuningGameId = '';
     const profileId = globalTuningProfileSelection(profiles, activeProfileId);
     selectedOverrideProfileId = profileId;
-    activeView = 'haptics';
-    setViewHash('haptics');
+    activeView = 'tuning';
+    setViewHash('tuning');
     if (profileId) await selectProfileForScope(profileId, null, 'Global Profile');
   };
 
@@ -931,8 +1030,8 @@
       currentControllerConfig
     });
     if (preferredProfileId) selectedOverrideProfileId = preferredProfileId;
-    activeView = 'haptics';
-    setViewHash('haptics');
+    activeView = 'tuning';
+    setViewHash('tuning');
     if (preferredProfileId) await selectProfileForScope(preferredProfileId, game.gameId, game.name);
   };
 
@@ -988,6 +1087,88 @@
     Boolean(currentControllerConfig && profileSaveBaselineSignature) &&
     profileConfigSignature(buildControllerConfig()) !== profileSaveBaselineSignature;
 
+
+  // Saved rail diff (Task 7). The object literal mirrors
+  // currentProfileDraftValues() but names every draft variable directly so
+  // Svelte re-derives the snapshot the moment any tunable value moves (a
+  // plain function call would hide the dependencies from the compiler).
+  $: profileDraftSnapshot = {
+    l2From,
+    l2To,
+    r2From,
+    r2To,
+    l2Curve,
+    r2Curve,
+    l2CurvePoints,
+    r2CurvePoints,
+    triggerEffect,
+    triggerIntensity,
+    vibrationIntensity,
+    vibrationMode,
+    lightbarEnabled,
+    lightbarColor,
+    rpmColor,
+    lightbarBrightness,
+    forzaBodyRumbleMode: forzaTuning.bodyRumbleMode,
+    forzaEffects: forzaTuning.effects,
+    forzaBrakeTuning: forzaTuning.brake,
+    forzaAbsTuning: forzaTuning.abs,
+    forzaThrottleTuning: forzaTuning.throttle,
+    forzaShiftTuning: forzaTuning.shift,
+    forzaRevLimiterTuning: forzaTuning.revLimiter,
+    leftStickDeadzone,
+    rightStickDeadzone
+  };
+  $: savedRailRows = savedDiffRows(profileSaveBaselineConfig, profileDraftSnapshot, {
+    includeForza: selectedTuningScope === 'game',
+    intensityPercent: forzaIntensityPercent
+  });
+  $: unsavedCount = unsavedChangeCount(savedRailRows);
+  $: savedRailProfileName =
+    profiles.find((profile) => profile.id === (selectedOverrideProfileId || activeProfileId))?.name ??
+    'this profile';
+
+  // Discard: put the draft back to the saved baseline. The live controller
+  // sync then pushes the restored values to hardware; the baseline itself is
+  // untouched, so the dirty flag and rail diff clear together.
+  const discardDraftChanges = () => {
+    if (!profileSaveBaselineConfig) return;
+    applyEditableConfig(profileSaveBaselineConfig);
+    scheduleBaseFeelTestRefresh();
+    scheduleLiveControllerConfigSync();
+    setApplyMessage('Unsaved changes discarded', 'info');
+  };
+
+  // Saved-curve ghosts: dashed echo of the saved curve in each editor while
+  // the draft's shape differs from the saved one.
+  const savedCurveShapePath = (
+    side: TriggerSide,
+    saved: EditableControllerConfig | null,
+    displayMode: TriggerCurveDisplayMode
+  ): string | null => {
+    if (!saved) return null;
+    return curveShapeViewFor(
+      triggerCurveEditorContext({
+        side,
+        from: side === 'l2' ? saved.trigger.l2From : saved.trigger.r2From,
+        to: side === 'l2' ? saved.trigger.l2To : saved.trigger.r2To,
+        curve: side === 'l2' ? saved.trigger.l2Curve : saved.trigger.r2Curve,
+        points: side === 'l2' ? saved.trigger.l2CurvePoints : saved.trigger.r2CurvePoints,
+        triggerEffect: saved.trigger.effect,
+        triggerIntensity: saved.trigger.intensity,
+        displayMode,
+        forzaEffects: saved.forza?.effects ?? [],
+        forzaBrakeTuning: normalizeForzaBrakeTuning(saved.forza?.brake),
+        forzaThrottleTuning: normalizeForzaThrottleTuning(saved.forza?.throttle)
+      })
+    ).path;
+  };
+
+  $: l2SavedShapePath = savedCurveShapePath('l2', profileSaveBaselineConfig, triggerCurveDisplayMode);
+  $: r2SavedShapePath = savedCurveShapePath('r2', profileSaveBaselineConfig, triggerCurveDisplayMode);
+  $: l2SavedCurvePath = l2SavedShapePath && l2SavedShapePath !== l2CurveShape.path ? l2SavedShapePath : null;
+  $: r2SavedCurvePath = r2SavedShapePath && r2SavedShapePath !== r2CurveShape.path ? r2SavedShapePath : null;
+
   const forzaEffectState = createForzaEffectState({
     store: {
       get: () => forzaTuning,
@@ -1173,19 +1354,27 @@
     triggerEffect = config.trigger.effect;
     triggerIntensity = config.trigger.intensity;
     vibrationIntensity = config.trigger.vibration;
-    vibrationMode = config.trigger.vibrationMode ?? 'Balanced';
+    vibrationMode = config.trigger.vibrationMode ?? DEFAULT_BODY_FEEL;
     lightbarEnabled = config.lightbar?.enabled ?? true;
-    lightbarColor = config.lightbar?.color ?? '#4cc9f0';
-    rpmColor = config.lightbar?.rpmColor ?? '#ff3a2e';
-    lightbarBrightness = config.lightbar?.brightness ?? 72;
+    lightbarColor = config.lightbar?.color ?? DEFAULT_LIGHTBAR_COLOR;
+    rpmColor = config.lightbar?.rpmColor ?? DEFAULT_REDLINE_COLOR;
+    lightbarBrightness = config.lightbar?.brightness ?? DEFAULT_LIGHTBAR_BRIGHTNESS;
     leftStickDeadzone = normalizeStickDeadzone(config.sticks?.leftDeadzone ?? 0);
     rightStickDeadzone = normalizeStickDeadzone(config.sticks?.rightDeadzone ?? 0);
     forzaTuning = forzaTuningFromConfig(config.forza);
   };
+  // Capture the saved baseline as both a signature (cheap dirty check) and a
+  // config object (saved rail diff + discard target).
+  const captureProfileSaveBaseline = () => {
+    const config = buildControllerConfig();
+    profileSaveBaselineSignature = profileConfigSignature(config);
+    profileSaveBaselineConfig = config;
+  };
+
   const applyControllerConfig = (config: ControllerConfiguration, updateProfileBaseline = true) => {
     currentControllerConfig = config;
     applyEditableConfig(config);
-    if (updateProfileBaseline) profileSaveBaselineSignature = profileConfigSignature(buildControllerConfig());
+    if (updateProfileBaseline) captureProfileSaveBaseline();
   };
 
   const loadControllerConfig = async (controllerId: string) => {
@@ -1193,6 +1382,7 @@
     configLoadError = '';
     currentControllerConfig = null;
     profileSaveBaselineSignature = '';
+    profileSaveBaselineConfig = null;
     try {
       const config = await getControllerConfig(controllerId);
       if (config.controllerId !== controllerId || selectedControllerId !== controllerId) return;
@@ -1305,7 +1495,7 @@
     }
 
     applyEditableConfig(config);
-    profileSaveBaselineSignature = profileConfigSignature(buildControllerConfig());
+    captureProfileSaveBaseline();
   };
 
   const applyTriggerConfig = (trigger: EditableControllerConfig['trigger']) => {
@@ -1320,7 +1510,7 @@
     triggerEffect = trigger.effect;
     triggerIntensity = trigger.intensity;
     vibrationIntensity = trigger.vibration;
-    vibrationMode = trigger.vibrationMode ?? 'Balanced';
+    vibrationMode = trigger.vibrationMode ?? DEFAULT_BODY_FEEL;
   };
 
   const resetTriggerCurvesToProfileDefaults = () => {
@@ -1348,13 +1538,18 @@
     lightbarColor,
     rpmColor,
     lightbarBrightness,
-    forzaBodyRumbleMode,
-    forzaEffects,
-    forzaBrakeTuning,
-    forzaAbsTuning,
-    forzaThrottleTuning,
-    forzaShiftTuning,
-    forzaRevLimiterTuning,
+    // Read forzaTuning directly, not the `$:` aliases (forzaEffects et al.):
+    // captureProfileSaveBaseline() runs synchronously right after
+    // applyEditableConfig() reassigns forzaTuning, before Svelte re-runs the
+    // reactive aliases — reading the aliases here baselines stale values and
+    // marks a freshly loaded profile dirty.
+    forzaBodyRumbleMode: forzaTuning.bodyRumbleMode,
+    forzaEffects: forzaTuning.effects,
+    forzaBrakeTuning: forzaTuning.brake,
+    forzaAbsTuning: forzaTuning.abs,
+    forzaThrottleTuning: forzaTuning.throttle,
+    forzaShiftTuning: forzaTuning.shift,
+    forzaRevLimiterTuning: forzaTuning.revLimiter,
     leftStickDeadzone,
     rightStickDeadzone
   });
@@ -1678,6 +1873,8 @@
     profileConfigSignature: (config) => profileConfigSignature(config),
     setProfileSaveBaseline: (signature) => {
       profileSaveBaselineSignature = signature;
+      // Saving makes the current draft the new saved truth for the rail diff.
+      profileSaveBaselineConfig = buildControllerConfig();
     },
     saveControllerConfigForProfileTargets,
     setProfileOverrideForTargets: (profileId, gameId) => setProfileOverrideForTargets(profileId, gameId),
@@ -1727,7 +1924,7 @@
   function shouldPollTriggerInput() {
     return Boolean(
       controller?.id &&
-        activeView === 'haptics' &&
+        activeView === 'tuning' &&
         typeof window !== 'undefined' &&
         typeof document !== 'undefined' &&
         !document.hidden
@@ -1738,12 +1935,7 @@
     triggerInputPoller.sync();
   }
 
-  $: if (
-    typeof window !== 'undefined' &&
-    (window.location.hash === '#/controllers' ||
-      window.location.hash === '#/adaptive-triggers-haptics' ||
-      window.location.hash === '#/button-mapping')
-  ) {
+  $: if (typeof window !== 'undefined' && isViewHash(window.location.hash)) {
     const routeView = appViewFromHash();
     if (routeView !== activeView) {
       activeView = routeView;
@@ -1957,7 +2149,7 @@
   // Live trigger polling feeds the haptics curve cursor and the base-feel test.
   // It is intentionally limited to the visible Haptics view so inactive routes
   // do not spend the 25Hz input budget or trigger extra DOM work.
-  $: if (controller?.id && activeView === 'haptics') {
+  $: if (controller?.id && activeView === 'tuning') {
     startTriggerInputPolling();
   } else {
     stopTriggerInputPolling();
@@ -1980,7 +2172,41 @@
   }
 </script>
 
-<main class="ops-shell">
+<div class="app-shell">
+  <AppSidebar
+    view={activeView}
+    readiness={{ tuningReady, buttonMappingReady, edgeSlotsReady }}
+    onNavigate={navigateToView}
+  >
+    {#snippet footer()}
+      <div class="sidebar-footer">
+        <button
+          class="sidebar-item"
+          type="button"
+          title="Open the quick start guide again. It explains Profiles, trigger tests, telemetry safety, and support bundles."
+          aria-label="Open quick start guide"
+          onclick={openOnboarding}
+        >
+          <CircleHelp size={14} /> Guide
+        </button>
+        <button
+          class:active={supportPanelOpen}
+          class="sidebar-item"
+          type="button"
+          title="Copy or export a sanitized support bundle for GitHub issues or Discord help. Raw hardware ids are excluded."
+          aria-expanded={supportPanelOpen}
+          aria-controls="support-bundle-panel"
+          onclick={() => {
+            supportPanelOpen = !supportPanelOpen;
+          }}
+        >
+          <LifeBuoy size={14} /> Support
+        </button>
+      </div>
+    {/snippet}
+  </AppSidebar>
+
+  <main class="app-main">
   {#if loading}
     <section class="ops-state">
       <RefreshCw class="spin" size={24} />
@@ -1995,56 +2221,64 @@
       <button class="solid-action compact" type="button" onclick={refresh}>Retry</button>
     </section>
   {:else if snapshot}
-    <header class="dm-hud" aria-label="Global command state">
-      <div class="dm-hardware-state">
-        <span class="dm-controller-glyph" aria-hidden="true"></span>
-        <div>
-          <h1>DualSense Command Center</h1>
-          <p><span class="dm-app-tagline">Adaptive triggers, haptics, and live telemetry &mdash; tuned locally.</span></p>
-        </div>
+    <!-- Utility row: cross-view context that has no single page home — the
+         target controller for writes, the web UI bind address, the Forza glyph
+         override, and a compact system readout. -->
+    <section class="app-toolbar" aria-label="Controller and display options">
+      <label class="app-toolbar-field">
+        <span>Target Controller</span>
+        <select
+          aria-label="Target controller"
+          disabled={!connectedControllerIds.length}
+          value={profileTargetsAllConnected ? '__all__' : profileTargetControllerIds[0] ?? controller?.id ?? ''}
+          onchange={(event) => {
+            const picked = event.currentTarget.value;
+            if (picked === '__all__') pickAllControllers();
+            else if (picked) pickControllerTarget(picked);
+          }}
+        >
+          {#if connectedControllerIds.length > 1}
+            <option value="__all__">All Connected</option>
+          {/if}
+          {#each connectedControllers as item (item.id)}
+            <option value={item.id}>{item.name || controllerModelText(item)}</option>
+          {/each}
+        </select>
+      </label>
+      <label class="app-toolbar-field">
+        <span>Web UI Location</span>
+        <select
+          aria-label="Web UI location"
+          disabled={appSettingsBusy}
+          title={lanRestartRequired ? `restart -> ${appSettings?.desiredBindAddress}` : status?.bindAddress}
+          value={listenOnAllInterfaces ? 'lan' : 'local'}
+          onchange={(event) => void updateLanAccess(event.currentTarget.value === 'lan')}
+        >
+          <option value="local">Local Only</option>
+          <option value="lan">LAN Access</option>
+        </select>
+        <small>{lanRestartRequired ? `restart -> ${appSettings?.desiredBindAddress}` : status?.bindAddress}</small>
+      </label>
+      <button
+        class="app-toolbar-toggle"
+        class:active={glyphOverrideEnabled}
+        type="button"
+        disabled={appSettingsBusy}
+        aria-pressed={glyphOverrideEnabled}
+        title={forzaGlyphs?.lastStatus ?? glyphInstallPath}
+        onclick={() => void updateForzaGlyphOverride()}
+      >
+        Controller Glyphs: {glyphOverrideEnabled ? 'PlayStation Icons' : 'Game Default'}
+      </button>
+      <div class="app-toolbar-spacer"></div>
+      <div
+        class="app-toolbar-readout"
+        title={selectedTuningScope === 'global' ? systemReadoutDetail : adapter?.setupHint ?? telemetryRateDetail}
+      >
+        <span>{systemReadoutTitle}</span>
+        <p><strong>{systemReadoutValue}</strong><small>{systemReadoutDetail}</small></p>
       </div>
-
-      <ViewNav
-        views={appViews}
-        {activeView}
-        tooltips={viewTooltips}
-        {tuningReady}
-        {buttonMappingReady}
-        onNavigate={navigateToView}
-      />
-
-      <div class="dm-system-cluster">
-        <div class="dm-system-readout" title={selectedTuningScope === 'global' ? systemReadoutDetail : adapter?.setupHint ?? telemetryRateDetail}>
-          <span>{systemReadoutTitle}</span>
-          <strong>{systemReadoutValue}</strong>
-          <small>{systemReadoutDetail}</small>
-        </div>
-        <Tooltip text="Open the quick start guide again. It explains Profiles, trigger tests, telemetry safety, and support bundles." side="bottom" align="end">
-          <button
-            class="dm-support-trigger"
-            type="button"
-            aria-label="Open quick start guide"
-            onclick={openOnboarding}
-          >
-            <CircleHelp size={14} /> Guide
-          </button>
-        </Tooltip>
-        <Tooltip text="Copy or export a sanitized support bundle for GitHub issues or Discord help. Raw hardware ids are excluded." side="bottom" align="end">
-          <button
-            class:active={supportPanelOpen}
-            class="dm-support-trigger"
-            type="button"
-            aria-expanded={supportPanelOpen}
-            aria-controls="support-bundle-panel"
-            onclick={() => {
-              supportPanelOpen = !supportPanelOpen;
-            }}
-          >
-            <LifeBuoy size={14} /> Support
-          </button>
-        </Tooltip>
-      </div>
-    </header>
+    </section>
 
     {#if showPartialErrorBanner}
       <aside class="ops-warning dm-warning" role="status" aria-live="polite">
@@ -2081,67 +2315,78 @@
       onNavigate={navigateToView}
     />
 
-    {#if activeView === 'games' || (!tuningReady && activeView !== 'controllers')}
-      <GamesView
+    {#if showStatusView}
+      <StatusView
+        {controllers}
         {controller}
-        {connectedControllers}
-        {selectedTuningScope}
-        {selectedTuningGameId}
-        {globalProfilePreview}
-        {profileTargetsAllConnected}
-        {profileTargetControllerIds}
+        detectedGame={selectedGame}
+        detectedGameName={snapshot.gameDetection.activeGameName ?? null}
+        {activeProfile}
+        {activeProfileName}
+        {overrideActive}
+        {adapter}
+        adapters={snapshot.adapters ?? []}
+        renameActiveId={controllerRenameId}
+        bind:renameName={controllerRenameName}
+        renameBusy={controllerRenameBusy}
+        onBeginRename={beginControllerRename}
+        onSubmitRename={submitControllerRename}
+        onCancelRename={cancelControllerRename}
+        onRenameKeydown={handleControllerRenameKeydown}
+        onOpenSetupGuide={openSetupGuideFromStatus}
+      />
+    {/if}
+    {#if showTuningView}
+      <TuningHeader
+        scope={selectedTuningScope}
+        selectedGame={selectedTuningGame}
         {discoveredGames}
-        {detectionSignalText}
-        {gameArtwork}
-        {gameMediaDetails}
-        {profileScopeCount}
-        {gameAccentColor}
-        {gameTileStatus}
+        adapterRunning={adapter?.state === 'running'}
+        packetRateHz={telemetryPacketRate}
+        setupVerified={selectedGameSetupVerified}
+        setupGuideOpen={showSetupGuide}
+        onToggleSetupGuide={toggleSetupGuide}
+        onOpenSetupGuide={openSetupGuide}
+        {controller}
+        profiles={profileContextProfiles}
+        {activeProfileId}
+        {selectedOverrideProfileId}
+        {selectedActionProfile}
+        {canRenameSelectedProfile}
+        {canDeleteSelectedProfile}
+        {profileConfigDirty}
+        unsavedChangeCount={unsavedCount}
+        {profileSaveBusy}
+        {profileFileBusy}
+        {profileSaveAsBusy}
+        {profileRenameBusy}
+        saveAsOpen={saveAsProfileOpen}
+        bind:saveAsName={saveAsProfileName}
+        {renameProfileId}
+        bind:renameName={renameProfileName}
         onSelectGlobal={selectGlobalTuning}
         onSelectGame={selectTuningGame}
         onOpenAddGame={openAddGameDialog}
-        onPickAllControllers={pickAllControllers}
-        onPickControllerTarget={pickControllerTarget}
-      />
-    {:else}
-      <ContextRibbon
-        {controller}
-        {connectedControllers}
-        {connectedControllerIds}
-        {profileTargetsAllConnected}
-        {profileTargetControllerIds}
-        {selectedTuningScope}
-        {selectedTuningGameId}
-        {steamContextGame}
-        {steamContextArt}
-        {steamContextBackdropArt}
-        {steamContextMeta}
-        {discoveredGames}
-        {profileContextProfiles}
-        {selectedOverrideProfileId}
-        {activeProfileId}
-        {activeProfileHeaderName}
-        {activeProfileHeaderMeta}
-        {listenOnAllInterfaces}
-        {appSettingsBusy}
-        {lanRestartRequired}
-        desiredBindAddress={appSettings?.desiredBindAddress}
-        currentBindAddress={status?.bindAddress}
-        {glyphOverrideEnabled}
-        glyphStatus={forzaGlyphs?.lastStatus ?? glyphInstallPath}
-        {gameAccentColor}
-        onPickGlobal={selectGlobalTuning}
-        onPickGame={selectTuningGame}
-        onPickProfile={selectProfileForScope}
-        onPickAllControllers={pickAllControllers}
-        onPickController={pickControllerTarget}
-        onUpdateLanAccess={updateLanAccess}
-        onUpdateGlyphOverride={updateForzaGlyphOverride}
+        onSelectProfile={selectProfileForScope}
+        onSaveProfile={saveActiveProfile}
+        onBeginSaveAs={beginSaveAsProfile}
+        onCancelSaveAs={cancelSaveAsProfile}
+        onSubmitSaveAs={submitSaveAsProfile}
+        onSaveAsKeydown={handleSaveAsProfileKeydown}
+        onBeginRename={beginRenameSelectedProfile}
+        onCancelRename={cancelRenameProfile}
+        onSubmitRename={submitRenameProfile}
+        onRenameKeydown={handleRenameProfileKeydown}
+        onDeleteProfile={(profile) => void deleteProfileById(profile.id, profile.name)}
+        onRestoreDefaults={restoreDefaults}
+        onImportFile={handleProfileImport}
+        onExportProfile={exportSelectedProfile}
       />
-
-      {#if activeView === 'controllers'}
+    {/if}
+    {#if showWorkspaceViews}
+      {#if showAdvancedControllerView}
         <ControllersView
-          active={activeView === 'controllers'}
+          active={showAdvancedControllerView}
           {controllers}
           {controller}
           {selectedControllerId}
@@ -2154,12 +2399,6 @@
           inputBridge={snapshot?.inputBridge ?? null}
           activeGameName={selectedGame?.name ?? null}
           activeInputProvider={selectedGame?.inputProvider ?? currentControllerConfig?.inputMode ?? 'native_dualsense'}
-          {edgeProfiles}
-          {edgeProfilesLoading}
-          {edgeProfilesBusySlot}
-          {edgeProfilesError}
-          {edgeSlotsReadTooltip}
-          edgeSlotWriteLabel={edgeSlotWriteLabel()}
           onSelect={selectTargetController}
           onBeginRename={beginControllerRename}
           onSubmitRename={submitControllerRename}
@@ -2170,6 +2409,21 @@
           onSetStickDeadzone={setStickDeadzone}
           onStartInputBridge={startControllerInputBridge}
           onStopInputBridge={stopControllerInputBridge}
+          {supportBundleBusy}
+          onDownloadSupportBundle={exportSupportBundle}
+        />
+      {/if}
+
+      {#if showEdgeSlotsView}
+        <EdgeSlotsView
+          {controller}
+          {currentControllerConfig}
+          {edgeProfiles}
+          {edgeProfilesLoading}
+          {edgeProfilesBusySlot}
+          {edgeProfilesError}
+          {edgeSlotsReadTooltip}
+          edgeSlotWriteLabel={edgeSlotWriteLabel()}
           onRefreshEdgeProfiles={() => controller && void loadEdgeProfiles(controller.id, true)}
           onWriteEdgeSlot={writeCurrentConfigToEdgeSlot}
           {edgeSlotName}
@@ -2179,143 +2433,208 @@
         />
       {/if}
 
-      {#if activeView === 'haptics'}
-      <HapticsView active>
-      <TriggerCurvesPanel
-        {selectedTuningScope}
-        {snapshot}
-        {baseFeelTestActive}
-        {baseFeelTestBusy}
-        {resetTriggerCurvesToProfileDefaults}
-        {toggleBaseFeelTest}
-        {l2CurveShape}
-        {r2CurveShape}
-        {l2CurveLive}
-        {r2CurveLive}
-        {curveHover}
-        {curveDragPoint}
-        {l2LivePress}
-        {r2LivePress}
-        {l2From}
-        {l2To}
-        {r2From}
-        {r2To}
-        {l2Curve}
-        {r2Curve}
-        {l2CurvePoints}
-        {r2CurvePoints}
-        {triggerEffect}
-        {triggerIntensity}
-        {vibrationIntensity}
-        {vibrationMode}
-        {triggerEffectOptions}
-        {vibrationModeOptions}
-        {triggerEffectHelp}
-        {triggerStrengthHelp}
-        {vibrationHelp}
-        {vibrationModeHelp}
-        {triggerPressLabel}
-        triggerRangeTooltip={triggerRangeTooltipForCurrentTuning}
-        {triggerCurveTooltip}
-        {showTriggerPress}
-        {handleCurvePointer}
-        {updateCurveHover}
-        {clearCurveHover}
-        {handleCurvePointPointer}
-        {setTriggerRangeValue}
-        {setTriggerCurveValue}
-        {removeCurvePoint}
-        {addCurvePoint}
-        {setTriggerEffect}
-        {setTriggerIntensity}
-        {setVibrationIntensity}
-        {setVibrationMode}
-      />
-      <HapticsAside
-        {selectedTuningScope}
-        {snapshot}
-        {baseFeelTestActive}
-        {baseFeelTestBusy}
-        {triggerEffect}
-        {triggerIntensity}
-        {vibrationIntensity}
-        {vibrationMode}
-        {triggerEffectOptions}
-        {vibrationModeOptions}
-        {triggerEffectHelp}
-        {vibrationModeHelp}
-        {setTriggerEffect}
-        {setVibrationIntensity}
-        {setVibrationMode}
-        {toggleBaseFeelTest}
-        {previewBodyHaptics}
-        {enabledForzaEffectCount}
-        {allForzaEffectsEnabled}
-        {forzaEffectMetas}
-        {forzaEffectsById}
-        {effectStatusById}
-        {forzaBodyRumbleMode}
-        {forzaBrakeTuning}
-        {forzaAbsTuning}
-        {forzaThrottleTuning}
-        {forzaShiftTuning}
-        {forzaRevLimiterTuning}
-        {bodyRumbleModeOptions}
-        {forzaRoutes}
-        {forzaEffect}
-        {toggleAllForzaEffects}
-        {setForzaBodyRumbleMode}
-        {updateForzaBrakeTuning}
-        {updateForzaAbsTuning}
-        {updateForzaThrottleTuning}
-        {updateForzaShiftTuning}
-        {updateForzaRevLimiterTuning}
-        {updateForzaEffect}
-        {intensityTooltip}
-        {routeTooltip}
-        {forzaIntensityPercent}
-        {forzaIntensityFromPercent}
-        {lightbarEnabled}
-        bind:lightbarColor
-        bind:rpmColor
-        {lightbarBrightness}
-        onColorChange={handleLightbarColorChange}
-        {setLightbarBrightness}
-        {setLightbarEnabled}
-        {previewLightbar}
-        {previewRpmColor}
-        {profileContextProfiles}
-        {activeProfileId}
-        {selectedOverrideProfileId}
-        {selectedActionProfile}
-        selectedGameName={steamContextGame?.name ?? 'game'}
-        {canRenameSelectedProfile}
-        {canDeleteSelectedProfile}
-        {profileConfigDirty}
-        {profileSaveBusy}
-        {profileFileBusy}
-        {profileSaveAsBusy}
-        {profileRenameBusy}
-        {saveAsProfileOpen}
-        bind:saveAsProfileName
-        {renameProfileId}
-        bind:renameProfileName
-        onSelectProfile={selectProfileForScope}
-        onImportFile={handleProfileImport}
-        onExportProfile={exportSelectedProfile}
-        onBeginSaveAs={beginSaveAsProfile}
-        onCancelSaveAs={cancelSaveAsProfile}
-        onSubmitSaveAs={submitSaveAsProfile}
-        onSaveAsKeydown={handleSaveAsProfileKeydown}
-        onBeginRename={beginRenameSelectedProfile}
-        onCancelRename={cancelRenameProfile}
-        onSubmitRename={submitRenameProfile}
-        onRenameKeydown={handleRenameProfileKeydown}
-        onDeleteProfile={(profile) => void deleteProfileById(profile.id, profile.name)}
-        onRestoreDefaults={restoreDefaults}
-        onSaveProfile={saveActiveProfile}
-      />
-      </HapticsView>
+      {#if activeView === 'tuning' && tuningReady}
+      <!-- Each trigger column owns its own curve editor instrument. -->
+      {#snippet triggerCurveEditor(trigger: 'L2' | 'R2')}
+        <TriggerCurvesPanel
+          {trigger}
+          showControls={false}
+          {selectedTuningScope}
+          {snapshot}
+          {baseFeelTestActive}
+          {baseFeelTestBusy}
+          {resetTriggerCurvesToProfileDefaults}
+          {toggleBaseFeelTest}
+          {l2CurveShape}
+          {r2CurveShape}
+          {l2CurveLive}
+          {r2CurveLive}
+          {curveHover}
+          {curveDragPoint}
+          {l2SavedCurvePath}
+          {r2SavedCurvePath}
+          {l2LivePress}
+          {r2LivePress}
+          {l2From}
+          {l2To}
+          {r2From}
+          {r2To}
+          {l2Curve}
+          {r2Curve}
+          {l2CurvePoints}
+          {r2CurvePoints}
+          {triggerPressLabel}
+          triggerRangeTooltip={triggerRangeTooltipForCurrentTuning}
+          {triggerCurveTooltip}
+          {showTriggerPress}
+          {handleCurvePointer}
+          {updateCurveHover}
+          {clearCurveHover}
+          {handleCurvePointPointer}
+          {setTriggerRangeValue}
+          {setTriggerCurveValue}
+          {removeCurvePoint}
+          {addCurvePoint}
+        />
+      {/snippet}
+      <!-- One embedded effect list per semantic column (game scope only). -->
+      {#snippet forzaEffectGroup(metas: ForzaEffectMeta[])}
+        <TelemetryRoutingPanel
+          showChrome={false}
+          forzaEffectMetas={metas}
+          {forzaEffectsById}
+          {effectStatusById}
+          {forzaBrakeTuning}
+          {forzaAbsTuning}
+          {forzaThrottleTuning}
+          {forzaShiftTuning}
+          {forzaRevLimiterTuning}
+          {forzaRoutes}
+          {forzaEffect}
+          {updateForzaBrakeTuning}
+          {updateForzaAbsTuning}
+          {updateForzaThrottleTuning}
+          {updateForzaShiftTuning}
+          {updateForzaRevLimiterTuning}
+          {updateForzaEffect}
+          {intensityTooltip}
+          {routeTooltip}
+          {forzaIntensityPercent}
+          {forzaIntensityFromPercent}
+        />
+      {/snippet}
+      {#if showSetupGuide && selectedTuningGame}
+        <!-- Setup is a canvas state: the walkthrough replaces the tuning grid
+             (rail included) until the game's requirements verify or the
+             manually re-opened guide is toggled away. -->
+        <SetupGuide
+          game={selectedTuningGame}
+          telemetryFresh={selectedGameTelemetryFresh}
+          verified={selectedGameSetupVerified}
+          port={telemetryPort}
+          packetRateHz={telemetryPacketRate}
+          adapterName={adapter?.name ?? ''}
+          adapterHint={adapter?.setupHint ?? ''}
+          onVerified={completeSetupGuide}
+          onStartTuning={completeSetupGuide}
+        />
+      {:else}
+      <TuningCanvas>
+        <svelte:fragment slot="brake">
+          {@render triggerCurveEditor('L2')}
+          {#if selectedTuningScope === 'game'}
+            {@render forzaEffectGroup(brakeEffectMetas)}
+          {/if}
+        </svelte:fragment>
+        <svelte:fragment slot="throttle">
+          {@render triggerCurveEditor('R2')}
+          {#if selectedTuningScope === 'game'}
+            {@render forzaEffectGroup(throttleEffectMetas)}
+          {/if}
+        </svelte:fragment>
+        <svelte:fragment slot="road">
+          {#if selectedTuningScope === 'game'}
+            {@render forzaEffectGroup(roadEffectMetas)}
+          {/if}
+        </svelte:fragment>
+        <svelte:fragment slot="lights">
+          <LightbarControls
+            {selectedTuningScope}
+            {lightbarEnabled}
+            bind:lightbarColor
+            bind:rpmColor
+            {lightbarBrightness}
+            onColorChange={handleLightbarColorChange}
+            {setLightbarBrightness}
+            {setLightbarEnabled}
+            {previewLightbar}
+            {previewRpmColor}
+          />
+          {#if selectedTuningScope === 'game'}
+            {@render forzaEffectGroup(lightEffectMetas)}
+          {/if}
+        </svelte:fragment>
+        <svelte:fragment slot="rail">
+          <SavedRail
+            profileName={savedRailProfileName}
+            rows={savedRailRows}
+            dirty={profileConfigDirty}
+            previewActive={baseFeelTestActive}
+            previewBusy={baseFeelTestBusy}
+            previewDisabled={!snapshot}
+            saveBusy={profileSaveBusy}
+            canSave={Boolean(selectedActionProfile) && profileConfigDirty}
+            onPreviewFeel={toggleBaseFeelTest}
+            onSave={saveActiveProfile}
+            onDiscard={discardDraftChanges}
+          />
+        </svelte:fragment>
+        <svelte:fragment slot="below">
+          <!-- Parked until Tasks 8-10 re-home it; nothing previously rendered
+               may be lost. Curve reset/test head + base feel strip: -->
+          <TriggerCurvesPanel
+            showCurves={false}
+            {selectedTuningScope}
+            {snapshot}
+            {baseFeelTestActive}
+            {baseFeelTestBusy}
+            {resetTriggerCurvesToProfileDefaults}
+            {toggleBaseFeelTest}
+            {triggerEffect}
+            {triggerIntensity}
+            {vibrationIntensity}
+            {vibrationMode}
+            {triggerEffectOptions}
+            {vibrationModeOptions}
+            {triggerEffectHelp}
+            {triggerStrengthHelp}
+            {vibrationHelp}
+            {vibrationModeHelp}
+            {setTriggerEffect}
+            {setTriggerIntensity}
+            {setVibrationIntensity}
+            {setVibrationMode}
+          />
+          {#if selectedTuningScope === 'game'}
+            <!-- Telemetry stream head + body rumble source routing chrome. -->
+            <div class="canvas-parked">
+              <TelemetryRoutingPanel
+                showEffects={false}
+                {enabledForzaEffectCount}
+                {allForzaEffectsEnabled}
+                {forzaEffectMetas}
+                {forzaBodyRumbleMode}
+                {bodyRumbleModeOptions}
+                {toggleAllForzaEffects}
+                {setForzaBodyRumbleMode}
+              />
+            </div>
+          {:else}
+            <!-- Global scope: base haptics panel (trigger pattern + body). -->
+            <div class="canvas-parked">
+              <GlobalFeelPanel
+                {snapshot}
+                {baseFeelTestActive}
+                {baseFeelTestBusy}
+                {triggerEffect}
+                {triggerIntensity}
+                {vibrationIntensity}
+                {vibrationMode}
+                {triggerEffectOptions}
+                {vibrationModeOptions}
+                {triggerEffectHelp}
+                {vibrationModeHelp}
+                {setTriggerEffect}
+                {setVibrationIntensity}
+                {setVibrationMode}
+                {toggleBaseFeelTest}
+                {previewBodyHaptics}
+              />
+            </div>
+          {/if}
+        </svelte:fragment>
+      </TuningCanvas>
+      {/if}
       {/if}
     <ButtonMappingView session={buttonMappingSession} />
     {/if}
@@ -2333,4 +2652,5 @@
     onValidateLocal={validateLocalGameFromDialog}
     onAddLocal={addLocalGameFromDialog}
   />
-</main>
+  </main>
+</div>
diff --git a/web/src/app/navigation.ts b/web/src/app/navigation.ts
index cec87f4..9d2a8e2 100644
--- a/web/src/app/navigation.ts
+++ b/web/src/app/navigation.ts
@@ -1,42 +1,68 @@
-export type AppView = 'games' | 'controllers' | 'haptics' | 'buttonMapping';
+export type AppView = 'status' | 'tuning' | 'advancedController' | 'advancedButtonMapping' | 'advancedEdgeSlots';
 
 export type AppViewDefinition = {
   id: AppView;
   label: string;
   hash: string;
+  group: 'main' | 'advanced';
 };
 
 export type ViewReadiness = {
   tuningReady: boolean;
   buttonMappingReady: boolean;
+  /** True when the Target Controller is a DualSense Edge. */
+  edgeSlotsReady: boolean;
 };
 
 export const appViews: AppViewDefinition[] = [
-  { id: 'games', label: 'Profiles', hash: '#/games' },
-  { id: 'controllers', label: 'Controllers', hash: '#/controllers' },
-  { id: 'haptics', label: 'Adaptive Triggers & Haptics', hash: '#/adaptive-triggers-haptics' },
-  { id: 'buttonMapping', label: 'Button Mapping', hash: '#/button-mapping' }
+  { id: 'status', label: 'Status', hash: '#/status', group: 'main' },
+  { id: 'tuning', label: 'Tuning', hash: '#/tuning', group: 'main' },
+  { id: 'advancedController', label: 'Controller details', hash: '#/advanced/controller', group: 'advanced' },
+  { id: 'advancedButtonMapping', label: 'Button mapping', hash: '#/advanced/button-mapping', group: 'advanced' },
+  { id: 'advancedEdgeSlots', label: 'Edge onboard slots', hash: '#/advanced/edge-slots', group: 'advanced' }
 ];
 
 export const viewTooltips: Record<AppView, string> = {
-  games: 'Choose Global Profile or a supported game scope for tuning.',
-  controllers: 'View controller details, live inputs, calibration readings, and DualSense Edge onboard slots.',
-  haptics: 'Tune L2/R2 curves, manual trigger tests, body haptics, lightbar colors, and telemetry routes.',
-  buttonMapping: 'Edit game/local-app mappings through Steam Input or DSCC Input Bridge.'
+  status: 'Check that your controller, game detection, and telemetry are working.',
+  tuning: 'Tune trigger feel, rumble, and lights for a game or the Global Profile.',
+  advancedController: 'Live inputs, calibration readings, and connection details.',
+  advancedButtonMapping: 'Edit game/local-app mappings through Steam Input or DSCC Input Bridge.',
+  advancedEdgeSlots: 'Manage DualSense Edge onboard profile slots.'
 };
 
+/** Old routes keep working forever; they land on the new home for that content. */
+const legacyRedirects: Record<string, string> = {
+  '#/games': '#/tuning',
+  '#/adaptive-triggers-haptics': '#/tuning',
+  '#/controllers': '#/advanced/controller',
+  '#/button-mapping': '#/advanced/button-mapping'
+};
+
+/** Every hash the router answers to: current view hashes plus old-route redirects. */
+export const knownViewHashes: string[] = [
+  ...appViews.map((item) => item.hash),
+  ...Object.keys(legacyRedirects)
+];
+
+export function isViewHash(hash: string): boolean {
+  return knownViewHashes.includes(hash);
+}
+
 export function hashForView(view: AppView): string {
-  return appViews.find((item) => item.id === view)?.hash ?? appViews[0].hash;
+  return appViews.find((item) => item.id === view)?.hash ?? '#/status';
 }
 
 export function guardView(view: AppView, readiness: ViewReadiness): AppView {
-  if (view === 'haptics' && !readiness.tuningReady) return 'games';
+  if (view === 'tuning' && !readiness.tuningReady) return 'status';
+  if (view === 'advancedButtonMapping' && !readiness.buttonMappingReady) return 'status';
+  // Edge onboard slots only exist on a DualSense Edge; direct hash navigation
+  // lands on Controller details, which explains the selected controller.
+  if (view === 'advancedEdgeSlots' && !readiness.edgeSlotsReady) return 'advancedController';
   return view;
 }
 
-export function viewFromHash(hash: string, readiness: ViewReadiness): AppView {
-  if (hash === '#/controllers') return 'controllers';
-  if (hash === '#/button-mapping') return guardView('buttonMapping', readiness);
-  if (hash === '#/adaptive-triggers-haptics') return guardView('haptics', readiness);
-  return 'games';
+export function viewFromHash(rawHash: string, readiness: ViewReadiness): AppView {
+  const hash = legacyRedirects[rawHash] ?? rawHash;
+  const match = appViews.find((item) => item.hash === hash);
+  return guardView(match?.id ?? 'status', readiness);
 }
diff --git a/web/src/app/profileDraft.ts b/web/src/app/profileDraft.ts
index 2c4ac2a..6c72c46 100644
--- a/web/src/app/profileDraft.ts
+++ b/web/src/app/profileDraft.ts
@@ -1,4 +1,9 @@
 import {
+  DEFAULT_BODY_FEEL,
+  DEFAULT_BODY_RUMBLE_MODE,
+  DEFAULT_LIGHTBAR_BRIGHTNESS,
+  DEFAULT_LIGHTBAR_COLOR,
+  DEFAULT_REDLINE_COLOR,
   defaultTriggerCurve,
   defaultTriggerCurvePoints,
   normalizeStickDeadzone,
@@ -132,7 +137,7 @@ const defaultForzaTelemetryConfig = (
   defaults: ForzaTuningDefaults,
   effects: ForzaEffectConfiguration[] = defaults.effects
 ): EditableControllerConfig['forza'] => ({
-  bodyRumbleMode: 'native_passthrough',
+  bodyRumbleMode: DEFAULT_BODY_RUMBLE_MODE,
   effects: cloneForzaEffects(effects),
   brake: cloneForzaTuning(defaults.brake),
   abs: cloneForzaTuning(defaults.abs),
@@ -172,7 +177,7 @@ const forzaTelemetryFromDraft = (
   );
 
 export const normalizeForzaBodyRumbleMode = (mode: string | undefined | null): ForzaBodyRumbleMode =>
-  mode === 'dscc_full_control' ? 'dscc_full_control' : 'native_passthrough';
+  mode === 'dscc_full_control' ? 'dscc_full_control' : DEFAULT_BODY_RUMBLE_MODE;
 
 export const defaultButtonAssignments = (edge = false): EditableControllerConfig['buttons'] => [
   { key: 'Cross', label: 'Cross' },
@@ -279,7 +284,7 @@ export function baseForzaTriggerDefaults(): EditableControllerConfig['trigger']
     effect: 'Adaptive resistance',
     intensity: 'Strong (Standard)',
     vibration: 'Medium',
-    vibrationMode: 'Balanced'
+    vibrationMode: DEFAULT_BODY_FEEL
   };
 }
 
@@ -301,13 +306,13 @@ export function buildDefaultControllerConfig(options: DraftConfigOptions): Edita
       effect: 'Adaptive resistance',
       intensity: 'Strong (Standard)',
       vibration: 'Medium',
-      vibrationMode: 'Balanced'
+      vibrationMode: DEFAULT_BODY_FEEL
     },
     lightbar: {
       enabled: true,
-      color: '#4cc9f0',
-      rpmColor: '#ff3a2e',
-      brightness: 72
+      color: DEFAULT_LIGHTBAR_COLOR,
+      rpmColor: DEFAULT_REDLINE_COLOR,
+      brightness: DEFAULT_LIGHTBAR_BRIGHTNESS
     },
     forza: defaultForzaTelemetryConfig(forzaDefaults),
     sticks: {
@@ -446,13 +451,13 @@ export function profileConfigSignature(
       effect: config.trigger.effect,
       intensity: config.trigger.intensity,
       vibration: config.trigger.vibration,
-      vibrationMode: config.trigger.vibrationMode ?? 'Balanced'
+      vibrationMode: config.trigger.vibrationMode ?? DEFAULT_BODY_FEEL
     },
     lightbar: {
       enabled: config.lightbar?.enabled ?? true,
-      color: config.lightbar?.color ?? '#4cc9f0',
-      rpmColor: config.lightbar?.rpmColor ?? '#ff3a2e',
-      brightness: normalizeTriggerPercent(config.lightbar?.brightness ?? 72)
+      color: config.lightbar?.color ?? DEFAULT_LIGHTBAR_COLOR,
+      rpmColor: config.lightbar?.rpmColor ?? DEFAULT_REDLINE_COLOR,
+      brightness: normalizeTriggerPercent(config.lightbar?.brightness ?? DEFAULT_LIGHTBAR_BRIGHTNESS)
     },
     forza: {
       bodyRumbleMode: forza.bodyRumbleMode,
diff --git a/web/src/app/setupVerification.ts b/web/src/app/setupVerification.ts
new file mode 100644
index 0000000..fab0881
--- /dev/null
+++ b/web/src/app/setupVerification.ts
@@ -0,0 +1,42 @@
+// Per-game setup verification flags. A game is "verified" once telemetry
+// packets have been seen for it at least once; after that the setup guide
+// never auto-shows again (re-entry stays manual via the telemetry chip or the
+// game dropdown). Persists in localStorage alongside the other UI preferences
+// (see onboardingState.ts / updateState.ts for the same pattern).
+
+const SETUP_VERIFIED_KEY = 'dscc-setup-verified-v1';
+
+export type VerifiedSetupGameIds = Record<string, true>;
+
+export function loadVerifiedSetupGameIds(): VerifiedSetupGameIds {
+  if (typeof window === 'undefined') return {};
+  try {
+    const raw = window.localStorage.getItem(SETUP_VERIFIED_KEY);
+    if (!raw) return {};
+    const parsed: unknown = JSON.parse(raw);
+    if (!parsed || typeof parsed !== 'object' || Array.isArray(parsed)) return {};
+    const next: VerifiedSetupGameIds = {};
+    for (const key of Object.keys(parsed)) {
+      if ((parsed as Record<string, unknown>)[key]) next[key] = true;
+    }
+    return next;
+  } catch {
+    return {};
+  }
+}
+
+export function markSetupVerified(
+  current: VerifiedSetupGameIds,
+  gameId: string
+): VerifiedSetupGameIds {
+  if (!gameId || current[gameId]) return current;
+  const next: VerifiedSetupGameIds = { ...current, [gameId]: true };
+  if (typeof window !== 'undefined') {
+    try {
+      window.localStorage.setItem(SETUP_VERIFIED_KEY, JSON.stringify(next));
+    } catch {
+      // Verification is a convenience flag; the guide simply auto-shows again.
+    }
+  }
+  return next;
+}
diff --git a/web/src/components/AppSidebar.svelte b/web/src/components/AppSidebar.svelte
new file mode 100644
index 0000000..e6c4284
--- /dev/null
+++ b/web/src/components/AppSidebar.svelte
@@ -0,0 +1,81 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { appViews, viewTooltips, type AppView, type ViewReadiness } from '../app/navigation';
+
+  let {
+    view,
+    readiness,
+    onNavigate,
+    footer
+  }: {
+    view: AppView;
+    readiness: ViewReadiness;
+    onNavigate: (view: AppView) => void;
+    footer?: Snippet;
+  } = $props();
+
+  // svelte-ignore state_referenced_locally -- the initial value is intentional;
+  // the $effect below keeps the group open whenever the view enters it.
+  let advancedOpen = $state(view.startsWith('advanced'));
+  $effect(() => {
+    if (view.startsWith('advanced')) advancedOpen = true;
+  });
+
+  const main = appViews.filter((item) => item.group === 'main');
+  const advanced = appViews.filter((item) => item.group === 'advanced');
+
+  const itemDisabled = (id: AppView): boolean =>
+    (id === 'tuning' && !readiness.tuningReady) ||
+    (id === 'advancedButtonMapping' && !readiness.buttonMappingReady) ||
+    (id === 'advancedEdgeSlots' && !readiness.edgeSlotsReady);
+
+  const itemTooltip = (id: AppView): string => {
+    if (id === 'tuning' && !readiness.tuningReady) return 'Select a controller before tuning haptics.';
+    if (id === 'advancedButtonMapping' && !readiness.buttonMappingReady) {
+      return 'Select a game or local app scope before editing mappings.';
+    }
+    if (id === 'advancedEdgeSlots' && !readiness.edgeSlotsReady) {
+      return 'Onboard slots are available when the Target Controller is a DualSense Edge.';
+    }
+    return viewTooltips[id];
+  };
+</script>
+
+<nav class="sidebar" aria-label="Main">
+  <div class="sidebar-brand" title="DualSense Command Center">
+    <span class="dm-controller-glyph sidebar-brand-glyph" aria-hidden="true"></span>
+    <span class="visually-hidden">DualSense Command Center</span>
+  </div>
+  {#each main as item (item.id)}
+    <button
+      class="sidebar-item"
+      class:active={view === item.id}
+      type="button"
+      title={itemTooltip(item.id)}
+      disabled={itemDisabled(item.id)}
+      aria-current={view === item.id ? 'page' : undefined}
+      onclick={() => onNavigate(item.id)}
+    >{item.label}</button>
+  {/each}
+  <button
+    class="sidebar-group"
+    type="button"
+    aria-expanded={advancedOpen}
+    onclick={() => (advancedOpen = !advancedOpen)}
+  >Advanced {advancedOpen ? '▾' : '▸'}</button>
+  {#if advancedOpen}
+    {#each advanced as item (item.id)}
+      <button
+        class="sidebar-item sidebar-sub"
+        class:active={view === item.id}
+        type="button"
+        title={itemTooltip(item.id)}
+        disabled={itemDisabled(item.id)}
+        aria-current={view === item.id ? 'page' : undefined}
+        onclick={() => onNavigate(item.id)}
+      >{item.label}</button>
+    {/each}
+  {/if}
+  <div class="sidebar-spacer"></div>
+  {@render footer?.()}
+</nav>
diff --git a/web/src/components/ContextRibbon.svelte b/web/src/components/ContextRibbon.svelte
deleted file mode 100644
index e99a26d..0000000
--- a/web/src/components/ContextRibbon.svelte
+++ /dev/null
@@ -1,411 +0,0 @@
-<script lang="ts">
-  import InitialBadge from './InitialBadge.svelte';
-  import Tooltip from './Tooltip.svelte';
-  import { controllerConnectionText, controllerModelText } from '../lib/controllerDisplay';
-  import type { ControllerStatus, ProfileSummary, SupportedGame } from '../lib/types';
-
-  type TuningScope = 'none' | 'global' | 'game';
-  type MenuPosition = {
-    left: number;
-    top: number;
-    minWidth: number;
-  };
-
-  const SCOPE_ACCENT_GLOBAL = '#C18BEF';
-
-  export let controller: ControllerStatus | null | undefined = null;
-  export let connectedControllers: ControllerStatus[] = [];
-  export let connectedControllerIds: string[] = [];
-  export let profileTargetsAllConnected = false;
-  export let profileTargetControllerIds: string[] = [];
-  export let selectedTuningScope: TuningScope = 'global';
-  export let selectedTuningGameId = '';
-  export let steamContextGame: SupportedGame | null = null;
-  export let steamContextArt = '';
-  export let steamContextBackdropArt = '';
-  export let steamContextMeta = '';
-  export let discoveredGames: SupportedGame[] = [];
-  export let profileContextProfiles: ProfileSummary[] = [];
-  export let selectedOverrideProfileId = '';
-  export let activeProfileId = '';
-  export let activeProfileHeaderName = 'None';
-  export let activeProfileHeaderMeta = '';
-  export let listenOnAllInterfaces = false;
-  export let appSettingsBusy = false;
-  export let lanRestartRequired = false;
-  export let desiredBindAddress: string | null | undefined = null;
-  export let currentBindAddress: string | null | undefined = null;
-  export let glyphOverrideEnabled = false;
-  export let glyphStatus = '';
-  export let gameAccentColor: (game: SupportedGame | null | undefined) => string = () => SCOPE_ACCENT_GLOBAL;
-  export let onPickGlobal: () => void | Promise<void> = () => {};
-  export let onPickGame: (game: SupportedGame) => void | Promise<void> = () => {};
-  export let onPickProfile: (profileId: string) => void | Promise<void> = () => {};
-  export let onPickAllControllers: () => void = () => {};
-  export let onPickController: (controllerId: string) => void = () => {};
-  export let onUpdateLanAccess: (enabled: boolean) => void | Promise<void> = () => {};
-  export let onUpdateGlyphOverride: () => void | Promise<void> = () => {};
-
-  let scopePickerOpen = false;
-  let profilePickerOpen = false;
-  let controllerPickerOpen = false;
-  let scopeTriggerEl: HTMLButtonElement | null = null;
-  let profileTriggerEl: HTMLButtonElement | null = null;
-  let controllerTriggerEl: HTMLButtonElement | null = null;
-  let scopeMenuPos: MenuPosition = { left: 0, top: 0, minWidth: 240 };
-  let profileMenuPos: MenuPosition = { left: 0, top: 0, minWidth: 240 };
-  let controllerMenuPos: MenuPosition = { left: 0, top: 0, minWidth: 240 };
-
-  const menuPositionFor = (element: HTMLButtonElement | null, minWidth: number): MenuPosition => {
-    if (!element) return { left: 0, top: 0, minWidth };
-    const rect = element.getBoundingClientRect();
-    return {
-      left: rect.left,
-      top: rect.bottom + 6,
-      minWidth: Math.max(minWidth, rect.width)
-    };
-  };
-
-  const updateMenuPositions = () => {
-    scopeMenuPos = menuPositionFor(scopeTriggerEl, 240);
-    profileMenuPos = menuPositionFor(profileTriggerEl, 260);
-    controllerMenuPos = menuPositionFor(controllerTriggerEl, 260);
-  };
-
-  const closePickers = () => {
-    scopePickerOpen = false;
-    profilePickerOpen = false;
-    controllerPickerOpen = false;
-  };
-
-  const toggleScopePicker = () => {
-    if (!scopePickerOpen) updateMenuPositions();
-    scopePickerOpen = !scopePickerOpen;
-    if (scopePickerOpen) {
-      profilePickerOpen = false;
-      controllerPickerOpen = false;
-    }
-  };
-
-  const toggleProfilePicker = () => {
-    if (!profilePickerOpen) updateMenuPositions();
-    profilePickerOpen = !profilePickerOpen;
-    if (profilePickerOpen) {
-      scopePickerOpen = false;
-      controllerPickerOpen = false;
-    }
-  };
-
-  const toggleControllerPicker = () => {
-    if (!controllerPickerOpen) updateMenuPositions();
-    controllerPickerOpen = !controllerPickerOpen;
-    if (controllerPickerOpen) {
-      scopePickerOpen = false;
-      profilePickerOpen = false;
-    }
-  };
-
-  const handleWindowChange = () => {
-    if (scopePickerOpen || profilePickerOpen || controllerPickerOpen) updateMenuPositions();
-  };
-
-  const handleKeydown = (event: KeyboardEvent) => {
-    if (event.key !== 'Escape' || (!scopePickerOpen && !profilePickerOpen && !controllerPickerOpen)) return;
-    event.preventDefault();
-    closePickers();
-  };
-
-  const handleDocumentClick = (event: MouseEvent) => {
-    if (!scopePickerOpen && !profilePickerOpen && !controllerPickerOpen) return;
-    const target = event.target;
-    if (!(target instanceof Element)) return;
-    if (target.closest('.dm-ribbon-picker-host')) return;
-    closePickers();
-  };
-
-  const profileTargetSummary = () => {
-    if (profileTargetsAllConnected) return 'All Connected';
-    const selectedId = profileTargetControllerIds[0] ?? controller?.id ?? '';
-    const selected = connectedControllers.find((item) => item.id === selectedId) ?? controller;
-    return selected ? selected.name || controllerModelText(selected) : 'No Controller';
-  };
-
-  const profileAccentColor = (scope: ProfileSummary['scope']): string => {
-    if (scope === 'Game') return '#0070CC';
-    if (scope === 'Built-in') return '#7EE0FF';
-    return SCOPE_ACCENT_GLOBAL;
-  };
-
-  const pickGlobal = async () => {
-    closePickers();
-    if (selectedTuningScope !== 'global') await onPickGlobal();
-  };
-
-  const pickGame = async (game: SupportedGame) => {
-    closePickers();
-    if (selectedTuningScope === 'game' && selectedTuningGameId === game.gameId) return;
-    await onPickGame(game);
-  };
-
-  const pickProfile = async (profileId: string) => {
-    closePickers();
-    if (!profileId || profileId === selectedOverrideProfileId) return;
-    await onPickProfile(profileId);
-  };
-
-  const pickAllControllers = () => {
-    onPickAllControllers();
-    closePickers();
-  };
-
-  const pickController = (controllerId: string) => {
-    onPickController(controllerId);
-    closePickers();
-  };
-</script>
-
-<svelte:window
-  onkeydown={handleKeydown}
-  onclick={handleDocumentClick}
-  onresize={handleWindowChange}
-  onscroll={handleWindowChange}
-/>
-
-<section class="dm-tuning-ribbon" aria-label="Selected game context and production controls">
-  <div class="dm-steam-identity">
-    <div class="dm-ribbon-picker-host">
-      <button
-        bind:this={controllerTriggerEl}
-        type="button"
-        class="dm-steam-identity-cell dm-ribbon-picker-trigger"
-        class:open={controllerPickerOpen}
-        aria-haspopup="listbox"
-        aria-expanded={controllerPickerOpen}
-        disabled={!connectedControllerIds.length}
-        onclick={toggleControllerPicker}
-      >
-        <span>Target Controller</span>
-        <strong>{profileTargetsAllConnected ? 'All Connected' : profileTargetSummary()}</strong>
-        <p>{profileTargetsAllConnected ? `${connectedControllerIds.length} controller${connectedControllerIds.length === 1 ? '' : 's'}` : controllerConnectionText(controller ?? undefined)}</p>
-        <span class="dm-ribbon-picker-caret" aria-hidden="true">▾</span>
-      </button>
-      {#if controllerPickerOpen}
-        <div
-          class="dm-ribbon-picker-menu"
-          role="listbox"
-          aria-label="Select target controller"
-          style:left="{controllerMenuPos.left}px"
-          style:top="{controllerMenuPos.top}px"
-          style:min-width="{controllerMenuPos.minWidth}px"
-        >
-          <button
-            type="button"
-            class="dm-ribbon-picker-item"
-            class:active={profileTargetsAllConnected}
-            disabled={connectedControllerIds.length <= 1}
-            role="option"
-            aria-selected={profileTargetsAllConnected}
-            onclick={pickAllControllers}
-          >
-            <span class="dm-ribbon-picker-thumb art" aria-hidden="true">
-              <InitialBadge label="A" accent={SCOPE_ACCENT_GLOBAL} />
-            </span>
-            <span class="dm-ribbon-picker-copy">
-              <strong>All Connected</strong>
-              <small>{connectedControllerIds.length} controller{connectedControllerIds.length === 1 ? '' : 's'}</small>
-            </span>
-          </button>
-          <div class="dm-ribbon-picker-divider" role="separator"></div>
-          {#each connectedControllers as item (item.id)}
-            <button
-              type="button"
-              class="dm-ribbon-picker-item"
-              class:active={!profileTargetsAllConnected && profileTargetControllerIds.includes(item.id)}
-              role="option"
-              aria-selected={!profileTargetsAllConnected && profileTargetControllerIds.includes(item.id)}
-              onclick={() => pickController(item.id)}
-            >
-              <span class="dm-ribbon-picker-thumb art" aria-hidden="true">
-                <span class="dm-controller-glyph small" aria-hidden="true"></span>
-              </span>
-              <span class="dm-ribbon-picker-copy">
-                <strong>{item.name || controllerModelText(item)}</strong>
-                <small>{controllerConnectionText(item)}</small>
-              </span>
-            </button>
-          {/each}
-        </div>
-      {/if}
-    </div>
-
-    <div class="dm-ribbon-picker-host">
-      <button
-        bind:this={scopeTriggerEl}
-        type="button"
-        class="dm-steam-identity-cell dm-game-identity-cell dm-ribbon-picker-trigger"
-        class:open={scopePickerOpen}
-        aria-haspopup="listbox"
-        aria-expanded={scopePickerOpen}
-        onclick={toggleScopePicker}
-      >
-        {#if selectedTuningScope === 'game' && steamContextBackdropArt}
-          <span class="dm-ribbon-game-backdrop" aria-hidden="true">
-            <img src={steamContextBackdropArt} alt="" loading="lazy" />
-          </span>
-        {/if}
-        <span class="dm-ribbon-game-media" aria-hidden="true">
-          {#if selectedTuningScope === 'game' && steamContextArt}
-            <img src={steamContextArt} alt="" loading="lazy" />
-          {:else}
-            <InitialBadge label="G" accent={SCOPE_ACCENT_GLOBAL} />
-          {/if}
-        </span>
-        <span class="dm-ribbon-game-copy">
-          <span>{selectedTuningScope === 'global' ? 'Selected Scope' : 'Selected Game'}</span>
-          <strong>{selectedTuningScope === 'global' ? 'Global Profile' : steamContextGame?.name ?? 'No supported game selected'}</strong>
-          <p>{steamContextMeta}</p>
-        </span>
-        <span class="dm-ribbon-picker-caret" aria-hidden="true">▾</span>
-      </button>
-      {#if scopePickerOpen}
-        <div
-          class="dm-ribbon-picker-menu"
-          role="listbox"
-          aria-label="Select tuning scope"
-          style:left="{scopeMenuPos.left}px"
-          style:top="{scopeMenuPos.top}px"
-          style:min-width="{scopeMenuPos.minWidth}px"
-        >
-          <button
-            type="button"
-            class="dm-ribbon-picker-item"
-            class:active={selectedTuningScope === 'global'}
-            role="option"
-            aria-selected={selectedTuningScope === 'global'}
-            onclick={() => void pickGlobal()}
-          >
-            <span class="dm-ribbon-picker-thumb art" aria-hidden="true">
-              <InitialBadge label="G" accent={SCOPE_ACCENT_GLOBAL} />
-            </span>
-            <span class="dm-ribbon-picker-copy">
-              <strong>Global Profile</strong>
-              <small>Controller-only tuning</small>
-            </span>
-          </button>
-          {#if discoveredGames.length}
-            <div class="dm-ribbon-picker-divider" role="separator"></div>
-            {#each discoveredGames as game (game.gameId)}
-              {@const gameArt = game.artwork?.capsuleUrl ?? game.artwork?.bannerUrl ?? game.artwork?.iconUrl}
-              <button
-                type="button"
-                class="dm-ribbon-picker-item"
-                class:active={selectedTuningScope === 'game' && game.gameId === selectedTuningGameId}
-                role="option"
-                aria-selected={selectedTuningScope === 'game' && game.gameId === selectedTuningGameId}
-                onclick={() => void pickGame(game)}
-              >
-                <span class="dm-ribbon-picker-thumb art" aria-hidden="true">
-                  {#if gameArt}
-                    <img src={gameArt} alt="" loading="lazy" />
-                  {:else}
-                    <InitialBadge label={game.name} accent={gameAccentColor(game)} />
-                  {/if}
-                </span>
-                <span class="dm-ribbon-picker-copy">
-                  <strong>{game.name}</strong>
-                  <small>{game.supportLevel === 'custom' ? 'custom game' : game.running ? 'running' : game.installed ? 'installed' : 'discovered'}</small>
-                </span>
-              </button>
-            {/each}
-          {/if}
-        </div>
-      {/if}
-    </div>
-
-    <div class="dm-ribbon-picker-host">
-      <button
-        bind:this={profileTriggerEl}
-        type="button"
-        class="dm-steam-identity-cell dm-active-profile-cell dm-ribbon-picker-trigger"
-        class:open={profilePickerOpen}
-        aria-haspopup="listbox"
-        aria-expanded={profilePickerOpen}
-        aria-live="polite"
-        disabled={profileContextProfiles.length === 0}
-        onclick={toggleProfilePicker}
-      >
-        <span>Live Profile</span>
-        <strong>{activeProfileHeaderName}</strong>
-        <p>{activeProfileHeaderMeta}</p>
-        <span class="dm-ribbon-picker-caret" aria-hidden="true">▾</span>
-      </button>
-      {#if profilePickerOpen && profileContextProfiles.length}
-        <div
-          class="dm-ribbon-picker-menu profile"
-          role="listbox"
-          aria-label="Select active profile"
-          style:left="{profileMenuPos.left}px"
-          style:top="{profileMenuPos.top}px"
-          style:min-width="{profileMenuPos.minWidth}px"
-        >
-          {#each profileContextProfiles as profile (profile.id)}
-            <button
-              type="button"
-              class="dm-ribbon-picker-item"
-              class:active={profile.id === (selectedOverrideProfileId || activeProfileId)}
-              role="option"
-              aria-selected={profile.id === (selectedOverrideProfileId || activeProfileId)}
-              onclick={() => void pickProfile(profile.id)}
-            >
-              <span class="dm-ribbon-picker-thumb art" aria-hidden="true">
-                <InitialBadge label={profile.name} accent={profileAccentColor(profile.scope)} />
-              </span>
-              <span class="dm-ribbon-picker-copy">
-                <strong>{profile.name}</strong>
-                <small>{profile.builtIn ? (profile.scope === 'Global' ? 'Stock / Global' : 'Built-in template') : profile.scope === 'Game' ? `Custom / ${steamContextGame?.name ?? 'game'}` : 'Custom / Global'}{profile.id === activeProfileId ? ' / live' : ''}</small>
-              </span>
-            </button>
-          {/each}
-        </div>
-      {/if}
-    </div>
-  </div>
-
-  <div class="dm-system-toggles" aria-label="Production system controls">
-    <Tooltip block text="Local keeps the web UI bound to this PC. LAN exposes it on your network so you can tune from another device; a restart may be required after changing the bind address." side="bottom" align="end">
-      <div class="dm-location-line">
-        <label>
-          <span>Web UI Location</span>
-          <select
-            value={listenOnAllInterfaces ? 'lan' : 'local'}
-            disabled={appSettingsBusy}
-            aria-label="Web UI location"
-            onchange={(event) => void onUpdateLanAccess(event.currentTarget.value === 'lan')}
-          >
-            <option value="local">Local Only</option>
-            <option value="lan">LAN Access</option>
-          </select>
-          <small>{lanRestartRequired ? `restart -> ${desiredBindAddress}` : currentBindAddress}</small>
-        </label>
-      </div>
-    </Tooltip>
-    <Tooltip block text="Installs or restores PlayStation-style button glyphs for supported games. DSCC keeps backups so the game can be returned to its default glyph files." side="bottom" align="end">
-      <div class="dm-switch-line dm-glyph-switch">
-        <div>
-          <span>Controller Glyphs</span>
-          <strong>{glyphOverrideEnabled ? 'PlayStation Icons' : 'Game Default'}</strong>
-          <small>{glyphStatus}</small>
-        </div>
-        <button
-          class:active={glyphOverrideEnabled}
-          class="dm-toggle"
-          type="button"
-          disabled={appSettingsBusy}
-          aria-label="Toggle PlayStation controller button glyphs"
-          aria-pressed={glyphOverrideEnabled}
-          onclick={() => void onUpdateGlyphOverride()}
-        ><span></span></button>
-      </div>
-    </Tooltip>
-  </div>
-</section>
diff --git a/web/src/components/OnboardingTutorial.svelte b/web/src/components/OnboardingTutorial.svelte
index 9c60478..9ceceec 100644
--- a/web/src/components/OnboardingTutorial.svelte
+++ b/web/src/components/OnboardingTutorial.svelte
@@ -10,16 +10,18 @@
     X
   } from '@lucide/svelte';
 
+  import type { AppView } from '../app/navigation';
+
   export let open = false;
   export let onClose: () => void = () => {};
-  export let onNavigate: (view: 'games' | 'controllers' | 'haptics' | 'buttonMapping') => void = () => {};
+  export let onNavigate: (view: AppView) => void = () => {};
 
   type TutorialStep = {
     title: string;
     eyebrow: string;
     body: string;
     actionLabel: string;
-    targetView?: 'games' | 'controllers' | 'haptics' | 'buttonMapping';
+    targetView?: AppView;
     icon: typeof Gamepad2;
   };
 
@@ -27,25 +29,25 @@
     {
       eyebrow: 'Start here',
       title: 'Pick the controller and scope',
-      body: 'Use Controllers for hardware state and live inputs, then use Profiles to choose Global or a supported game scope.',
-      actionLabel: 'Open Controllers',
-      targetView: 'controllers',
+      body: 'Status shows your controller, game detection, and telemetry at a glance. In Tuning, choose Global or a supported game from the header.',
+      actionLabel: 'Open Status',
+      targetView: 'status',
       icon: Gamepad2
     },
     {
       eyebrow: 'Safety first',
       title: 'Game effects wait for telemetry',
       body: 'DSCC keeps triggers neutral until a supported game is detected and fresh telemetry is flowing. Manual test buttons attach only for the short test window.',
-      actionLabel: 'Open haptics',
-      targetView: 'haptics',
+      actionLabel: 'Open Tuning',
+      targetView: 'tuning',
       icon: RadioTower
     },
     {
       eyebrow: 'Tune feel',
       title: 'Shape L2 and R2 with curve points',
       body: 'Drag the trigger dots for custom brake and throttle response, then use Test Actuation to feel the current profile without starting a game.',
-      actionLabel: 'Open haptics',
-      targetView: 'haptics',
+      actionLabel: 'Open Tuning',
+      targetView: 'tuning',
       icon: SlidersHorizontal
     },
     {
diff --git a/web/src/components/Tooltip.svelte b/web/src/components/Tooltip.svelte
index b93680c..658e083 100644
--- a/web/src/components/Tooltip.svelte
+++ b/web/src/components/Tooltip.svelte
@@ -3,6 +3,8 @@
   export let side: 'top' | 'right' | 'bottom' | 'left' = 'top';
   export let align: 'start' | 'center' | 'end' = 'center';
   export let block = false;
+  let extraClass = '';
+  export { extraClass as class };
 
   const id = `dscc-tooltip-${Math.random().toString(36).slice(2)}`;
   let hostEl: HTMLSpanElement | undefined;
@@ -47,7 +49,7 @@
 
 <span
   bind:this={hostEl}
-  class="dscc-tooltip"
+  class="dscc-tooltip {extraClass}"
   class:block
   data-side={side}
   data-align={align}
diff --git a/web/src/components/ViewNav.svelte b/web/src/components/ViewNav.svelte
deleted file mode 100644
index cc17cef..0000000
--- a/web/src/components/ViewNav.svelte
+++ /dev/null
@@ -1,38 +0,0 @@
-<script lang="ts">
-  import Tooltip from './Tooltip.svelte';
-  import type { AppView, AppViewDefinition } from '../app/navigation';
-
-  export let views: AppViewDefinition[] = [];
-  export let activeView: AppView = 'games';
-  export let tooltips: Record<AppView, string>;
-  export let tuningReady = false;
-  export let buttonMappingReady = false;
-  export let onNavigate: (view: AppView) => void = () => {};
-
-  $: viewModels = views.map((view) => {
-    const disabled = (view.id === 'haptics' && !tuningReady) || (view.id === 'buttonMapping' && !buttonMappingReady);
-    const tooltip =
-      view.id === 'buttonMapping' && !buttonMappingReady
-        ? 'Select a game or local app scope before editing mappings.'
-        : view.id === 'haptics' && !tuningReady
-          ? 'Select a controller before tuning haptics.'
-          : tooltips[view.id];
-    return { ...view, disabled, tooltip };
-  });
-</script>
-
-<nav class="dm-view-nav" aria-label="Command center views">
-  {#each viewModels as view}
-    <Tooltip text={view.tooltip} side="bottom" align="center">
-      <button
-        class:active={activeView === view.id}
-        disabled={view.disabled}
-        type="button"
-        aria-current={activeView === view.id ? 'page' : undefined}
-        onclick={() => onNavigate(view.id)}
-      >
-        {view.label}
-      </button>
-    </Tooltip>
-  {/each}
-</nav>
diff --git a/web/src/lib/features/controllers/ControllerCard.svelte b/web/src/lib/features/controllers/ControllerCard.svelte
index 5888bb0..9ad91d8 100644
--- a/web/src/lib/features/controllers/ControllerCard.svelte
+++ b/web/src/lib/features/controllers/ControllerCard.svelte
@@ -121,7 +121,7 @@
           <dd>{controllerDiagnosticDetail(item)}</dd>
         </div>
         <div class="wide">
-          <dt>HID ID</dt>
+          <dt>Sanitized ID</dt>
           <dd class="mono">{item.id}</dd>
         </div>
         {#if item.capabilities.length}
diff --git a/web/src/lib/features/controllers/ControllersView.svelte b/web/src/lib/features/controllers/ControllersView.svelte
index a269427..a272a32 100644
--- a/web/src/lib/features/controllers/ControllersView.svelte
+++ b/web/src/lib/features/controllers/ControllersView.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
   import { onDestroy, onMount } from 'svelte';
   import ControllerCard from './ControllerCard.svelte';
-  import Tooltip from '../../../components/Tooltip.svelte';
   import { getControllerInput } from '../../api';
   import {
     controllerBatteryDetail,
@@ -18,8 +17,6 @@
     ControllerInputState,
     ControllerInputStickState,
     ControllerStatus,
-    EdgeProfileSlot,
-    EdgeProfilesResponse,
     InputBridgeStatus
   } from '../../types';
 
@@ -53,12 +50,6 @@
   export let currentControllerConfig: ControllerConfiguration | null = null;
   export let leftStickDeadzone = 0;
   export let rightStickDeadzone = 0;
-  export let edgeProfiles: EdgeProfilesResponse | null = null;
-  export let edgeProfilesLoading = false;
-  export let edgeProfilesBusySlot = '';
-  export let edgeProfilesError = '';
-  export let edgeSlotsReadTooltip = '';
-  export let edgeSlotWriteLabel = 'Write';
   export let inputBridge: InputBridgeStatus | null = null;
   export let activeGameName: string | null = null;
   export let activeInputProvider = 'native_dualsense';
@@ -72,12 +63,8 @@
   export let onSetStickDeadzone: (side: 'left' | 'right', value: number) => void | Promise<void> = () => {};
   export let onStartInputBridge: () => void | Promise<void> = () => {};
   export let onStopInputBridge: () => void | Promise<void> = () => {};
-  export let onRefreshEdgeProfiles: () => void | Promise<void> = () => {};
-  export let onWriteEdgeSlot: (slot: EdgeProfileSlot) => void | Promise<void> = () => {};
-  export let edgeSlotName: (slot: EdgeProfileSlot) => string = (slot) => slot.name ?? slot.shortcut;
-  export let edgeSlotStatus: (slot: EdgeProfileSlot) => string = (slot) => slot.state;
-  export let edgeSlotInfoTooltip: (slot: EdgeProfileSlot) => string = (slot) => edgeSlotStatus(slot);
-  export let edgeSlotWriteTooltip: (slot: EdgeProfileSlot) => string = (slot) => `Write ${edgeSlotName(slot)}`;
+  export let supportBundleBusy: 'copy' | 'download' | '' = '';
+  export let onDownloadSupportBundle: () => void | Promise<void> = () => {};
 
   let inputState: ControllerInputState | null = null;
   let inputFresh = false;
@@ -100,6 +87,8 @@
     currentControllerConfig?.inputMode === 'dscc_input_bridge' && Boolean(currentControllerConfig?.inputBridge?.enabled);
   $: bridgeSessionActive = bridgeSession?.state === 'active';
   $: powerDiagnostics = controller?.powerDiagnostics ?? null;
+  $: alias = controller?.name || controller?.family || 'No controller';
+  $: stickDriftLine = driftSummary(selectedInput, leftStick, rightStick);
   $: powerSuggestions = batteryFriendlySuggestions(controller, currentControllerConfig);
   $: if ((controller?.id ?? '') !== observedForController) {
     observedForController = controller?.id ?? '';
@@ -273,6 +262,18 @@
     return `${Math.min(40, Math.max(3, Math.ceil(stick.magnitude * 100 + 2)))}%`;
   }
 
+  /** Plain-words stick summary; raw per-stick values stay in the group below. */
+  function driftSummary(
+    input: ControllerInputState | null,
+    left: ControllerInputStickState,
+    right: ControllerInputStickState
+  ) {
+    if (!input) return 'waiting for input';
+    const max = Math.max(left.magnitude, right.magnitude);
+    if (max < 0.05) return 'centered · no drift detected';
+    return `reading ${percent(max)} of travel — fine while you move them; if untouched, raise the deadzone`;
+  }
+
   function inputFreshness(input: ControllerInputState | null) {
     if (!input?.available) return input?.message ?? 'Input unavailable';
     if (typeof input.ageMs === 'number') return `${input.source} / ${input.ageMs}ms`;
@@ -302,7 +303,7 @@
     if (bridgeSessionActive || controllerBridgeConfigured || appRequiresBridge) {
       return inputBridge?.available
         ? `${inputBridge.provider} / ${inputBridge.state}`
-        : inputBridge?.message ?? 'Bridge backend unavailable';
+        : inputBridge?.message ?? 'Bridge unavailable';
     }
     if (inputPathTitle() === 'Steam Input Companion') {
       return 'Steam handles game-facing mapping; DSCC keeps typed haptics and diagnostics.';
@@ -345,12 +346,6 @@
     return value ? yes : no;
   }
 
-  function hasPowerMetrics(item: ControllerStatus | undefined) {
-    const diagnostics = item?.powerDiagnostics;
-    if (!diagnostics) return false;
-    return Object.values(diagnostics).some((value) => value !== null && value !== undefined);
-  }
-
   function batteryFriendlySuggestions(
     item: ControllerStatus | undefined,
     config: ControllerConfiguration | null
@@ -394,387 +389,243 @@
   onDestroy(stopInputPolling);
 </script>
 
-<section class="dm-controllers-page" aria-label="Controllers">
-  <div class="dm-games-column">
-    <div class="dm-games-head">
-      <span>Hardware</span>
-      <h2>Controllers</h2>
-    </div>
-    <div class="dm-controller-choice-list">
-      {#if controllers.length}
-        {#each controllers as item, index (item.id)}
-          <ControllerCard
-            {item}
-            {index}
-            selected={item.id === selectedControllerId}
-            renameActive={renameActiveId === item.id}
-            bind:renameName
-            renameBusy={renameBusy}
-            onSelect={onSelect}
-            onBeginRename={onBeginRename}
-            onSubmitRename={onSubmitRename}
-            onCancelRename={onCancelRename}
-            onRenameKeydown={onRenameKeydown}
-          />
-        {/each}
-      {:else}
-        <div class="dm-empty-choice">
-          <strong>No controller detected</strong>
-          <span>Controller unavailable</span>
-        </div>
-      {/if}
-    </div>
-
-    {#if controller?.family === 'DualSense Edge'}
-      <section class="dm-edge-slots" aria-label="DualSense Edge onboard profiles">
-        <div class="dm-edge-slots-head">
-          <div>
-            <span>Onboard Memory</span>
-            <strong>Edge Slots</strong>
-          </div>
-          <Tooltip text={edgeSlotsReadTooltip} side="bottom" align="end">
-            <button
-              type="button"
-              class="dm-mini-button"
-              disabled={edgeProfilesLoading}
-              aria-label="Refresh DualSense Edge onboard slots"
-              onclick={() => void onRefreshEdgeProfiles()}
-            >
-              {edgeProfilesLoading ? 'Reading' : 'Read'}
-            </button>
-          </Tooltip>
-        </div>
-
-        {#if edgeProfilesError}
-          <p class="dm-edge-slots-note error">{edgeProfilesError}</p>
-        {:else if edgeProfiles?.warning}
-          <p class="dm-edge-slots-note">{edgeProfiles.warning}</p>
-        {/if}
+<section class="ctl-view" aria-label="Controller details">
+  <div class="ctl-head">
+    <h1 class="ctl-title">Controller details</h1>
+    <span class="ctl-sub">{alias} &middot; live readouts for checking, not for everyday tuning</span>
+  </div>
 
-        <div class="dm-edge-slot-list">
-          {#if edgeProfiles?.slots.length}
-            {#each edgeProfiles.slots as slot (slot.slotId)}
-              <div class="dm-edge-slot-row" class:disabled={!slot.editable}>
-                <Tooltip block text={edgeSlotInfoTooltip(slot)} side="right" align="start">
-                  <div class="dm-edge-slot-copy">
-                    <span>{slot.shortcut}</span>
-                    <strong>{edgeSlotName(slot)}</strong>
-                    <small>{edgeSlotStatus(slot)}</small>
-                  </div>
-                </Tooltip>
-                {#if slot.editable}
-                  <Tooltip text={edgeSlotWriteTooltip(slot)} side="left" align="center">
-                    <button
-                      type="button"
-                      class="dm-mini-button primary"
-                      disabled={!currentControllerConfig || edgeProfilesBusySlot === slot.slotId}
-                      onclick={() => void onWriteEdgeSlot(slot)}
-                    >
-                      {edgeProfilesBusySlot === slot.slotId ? 'Writing' : edgeSlotWriteLabel}
-                    </button>
-                  </Tooltip>
-                {/if}
-              </div>
-            {/each}
-          {:else}
-            <div class="dm-edge-slot-row disabled">
-              <div>
-                <span>Fn Slots</span>
-                <strong>{edgeProfilesLoading ? 'Reading slots' : 'No slot data'}</strong>
-                <small>{edgeProfilesLoading ? 'controller scan' : 'unavailable'}</small>
-              </div>
-            </div>
-          {/if}
+  <div class="ctl-groups">
+    {#if controllers.length > 1}
+      <div class="ctl-group ctl-group-controllers">
+        <div class="lbl">Controllers</div>
+        <div class="ctl-controller-list">
+          {#each controllers as item, index (item.id)}
+            <ControllerCard
+              {item}
+              {index}
+              selected={item.id === selectedControllerId}
+              renameActive={renameActiveId === item.id}
+              bind:renameName
+              renameBusy={renameBusy}
+              onSelect={onSelect}
+              onBeginRename={onBeginRename}
+              onSubmitRename={onSubmitRename}
+              onCancelRename={onCancelRename}
+              onRenameKeydown={onRenameKeydown}
+            />
+          {/each}
         </div>
-      </section>
+      </div>
     {/if}
-  </div>
 
-  <div class="dm-controllers-workbench">
-    <section class="dm-controller-overview" aria-label="Selected controller details">
-      <div class="dm-controller-overview-copy">
-        <span>Selected</span>
-        <strong>{controllerModelText(controller)}</strong>
-        <small>{statusTone(controller)}</small>
+    {#if !controller}
+      <div class="ctl-group">
+        <div class="lbl">Live input</div>
+        <div class="ctl-surf ctl-empty">
+          <strong>No controller selected</strong>
+          <span>Connect a DualSense controller to view live input, trigger travel, and calibration readings.</span>
+        </div>
       </div>
-      {#if controller}
-        <dl class="dm-controller-metric-grid">
-          <div>
-            <dt>Connection</dt>
-            <dd>{controllerTransportDetail(controller)}</dd>
-          </div>
-          <div>
-            <dt>Battery</dt>
-            <dd>{controllerBatteryDetail(controller)}</dd>
+    {:else}
+      <div class="ctl-group">
+        <div class="lbl">Live input</div>
+        <div class="ctl-surf" aria-label="Live controller input">
+          <div class="ctl-meter-row">
+            <span>L2</span>
+            <span class="ctl-mut">{percent(l2Value)}</span>
           </div>
-          <div>
-            <dt>Permission</dt>
-            <dd>{controllerPermissionDetail(controller)}</dd>
+          <div class="ctl-meter" aria-hidden="true"><span style={triggerStyle(l2Value)}></span></div>
+          <div class="ctl-meter-row">
+            <span>R2</span>
+            <span class="ctl-mut">{percent(r2Value)}</span>
           </div>
-          <div>
-            <dt>Diagnostics</dt>
-            <dd>{controllerDiagnosticDetail(controller)}</dd>
+          <div class="ctl-meter" aria-hidden="true"><span style={triggerStyle(r2Value)}></span></div>
+          <div class="ctl-meter-row">
+            <span>Sticks</span>
+            <span class="ctl-mut">{stickDriftLine}</span>
           </div>
-          <div class="wide">
-            <dt>Sanitized ID</dt>
-            <dd class="mono">{controller.id}</dd>
+          <div class="ctl-meter-row">
+            <span>Feed</span>
+            <span class="ctl-mut ctl-mono">{inputFreshness(inputState)}</span>
           </div>
-        </dl>
-      {/if}
-    </section>
-
-    {#if !controller}
-      <section class="dm-controller-empty-state" aria-label="No controller selected">
-        <strong>No controller selected</strong>
-        <span>Connect a DualSense controller to view input routing, live stick plots, trigger travel, and calibration readings.</span>
-      </section>
-    {:else}
-    <section class="dm-input-path-panel" aria-label="Controller input path">
-      <div class="dm-live-panel-head">
-        <div>
-          <span>Input Path</span>
-          <strong>{inputPathTitle()}</strong>
-        </div>
-        <code>{activeGameName ?? 'No active app'}</code>
-      </div>
-      <dl class="dm-controller-metric-grid compact">
-        <div>
-          <dt>Provider</dt>
-          <dd>{inputPathDetail()}</dd>
-        </div>
-        <div>
-          <dt>Duplicate Input</dt>
-          <dd>{duplicateInputDetail()}</dd>
-        </div>
-        <div class="wide">
-          <dt>Bridge Session</dt>
-          <dd>{bridgeSessionState()}</dd>
-        </div>
-      </dl>
-      <div class="dm-input-path-actions" aria-label="Input path controls">
-        <button
-          type="button"
-          class:active={currentControllerConfig?.inputMode === 'native_dualsense'}
-          disabled={!controller || !currentControllerConfig || Boolean(inputBridgeBusy)}
-          aria-pressed={currentControllerConfig?.inputMode === 'native_dualsense'}
-          onclick={() => void onSetInputMode('native_dualsense')}
-        >Native</button>
-        <button
-          type="button"
-          class:active={currentControllerConfig?.inputMode === 'steam_input_companion'}
-          disabled={!controller || !currentControllerConfig || Boolean(inputBridgeBusy)}
-          aria-pressed={currentControllerConfig?.inputMode === 'steam_input_companion'}
-          onclick={() => void onSetInputMode('steam_input_companion')}
-        >Steam</button>
-        <button
-          type="button"
-          class:active={controllerBridgeConfigured}
-          disabled={!controller || !currentControllerConfig || Boolean(inputBridgeBusy)}
-          aria-pressed={controllerBridgeConfigured}
-          onclick={() => void onSetInputMode('dscc_input_bridge')}
-        >Bridge</button>
-        <span></span>
-        <button
-          type="button"
-          class="primary"
-          disabled={!controller || !controllerBridgeConfigured || !appRequiresBridge || bridgeSessionActive || !inputBridge?.available || Boolean(inputBridgeBusy)}
-          onclick={() => void onStartInputBridge()}
-        >{inputBridgeBusy === 'start' ? 'Starting' : 'Start'}</button>
-        <button
-          type="button"
-          disabled={!controller || !bridgeSession || !bridgeSessionActive || Boolean(inputBridgeBusy)}
-          onclick={() => void onStopInputBridge()}
-        >{inputBridgeBusy === 'stop' ? 'Stopping' : 'Stop'}</button>
-      </div>
-      {#if controllerBridgeConfigured && !appRequiresBridge}
-        <p class="dm-edge-slots-note">Bridge sessions start only while the selected local app is active.</p>
-      {/if}
-      {#if inputBridge?.warnings.length && inputPathTitle() === 'DSCC Input Bridge'}
-        <p class="dm-edge-slots-note">{inputBridge.warnings[0]}</p>
-      {/if}
-    </section>
-
-    <section class="dm-power-diagnostics-panel" aria-label="Power diagnostics">
-      <div class="dm-live-panel-head">
-        <div>
-          <span>Power Diagnostics</span>
-          <strong>{hasPowerMetrics(controller) ? 'Output Cadence' : 'Awaiting Agent Metrics'}</strong>
-        </div>
-        <code>{controller.transport}</code>
-      </div>
-      <dl class="dm-controller-metric-grid compact">
-        <div>
-          <dt>Write Rate</dt>
-          <dd>{formatHz(powerDiagnostics?.outputWriteRateHz)}</dd>
-        </div>
-        <div>
-          <dt>Cadence</dt>
-          <dd>{formatMs(powerDiagnostics?.outputCadenceMs)}</dd>
         </div>
-        <div>
-          <dt>Suppressed</dt>
-          <dd>{formatCount(powerDiagnostics?.suppressedRedundantReports)}</dd>
-        </div>
-        <div>
-          <dt>Keepalive</dt>
-          <dd>{formatMs(powerDiagnostics?.keepaliveIntervalMs)}</dd>
-        </div>
-        <div>
-          <dt>Last Write</dt>
-          <dd>{formatMs(powerDiagnostics?.lastWriteAgeMs)}</dd>
-        </div>
-        <div>
-          <dt>Rumble Path</dt>
-          <dd>{formatFlag(powerDiagnostics?.nativeRumblePassthrough, 'native passthrough', 'DSCC shaped')}</dd>
-        </div>
-        <div class="wide">
-          <dt>Trigger Policy</dt>
-          <dd>{formatFlag(powerDiagnostics?.adaptiveTriggersRetained, 'adaptive triggers retained', 'adaptive triggers not retained')}</dd>
-        </div>
-      </dl>
-      <div class="dm-power-suggestion-list" aria-label="Battery-friendly haptic guidance">
-        {#each powerSuggestions as suggestion}
-          <p>{suggestion}</p>
-        {/each}
-      </div>
-    </section>
 
-    <section class="dm-live-input-panel" aria-label="Live controller input">
-      <div class="dm-live-panel-head">
-        <div>
-          <span>Live Input</span>
-          <strong>{inputFresh ? 'Streaming' : 'Unavailable'}</strong>
-        </div>
-        <code>{inputFreshness(inputState)}</code>
-      </div>
-
-      <div class="dm-live-stick-grid">
-        <article class="dm-stick-module">
-          <div class="dm-stick-head">
-            <span>Left Stick</span>
-            <code>{signedPercent(leftStick.x)} / {signedPercent(leftStick.y)}</code>
-          </div>
-          <div class="dm-stick-plot" style={stickStyle(leftStick)} aria-hidden="true">
-            <span class="dm-stick-ring"></span>
-            <span class="dm-stick-dot"></span>
-          </div>
-          <dl>
-            <div>
-              <dt>Drift</dt>
-              <dd>{percent(leftStick.magnitude)}</dd>
+        <div class="ctl-stick-grid">
+          <article class="ctl-stick">
+            <div class="ctl-meter-row">
+              <span>Left stick</span>
+              <span class="ctl-mut ctl-mono">{signedPercent(leftStick.x)} / {signedPercent(leftStick.y)}</span>
             </div>
-            <div>
-              <dt>Suggested DZ</dt>
-              <dd>{suggestedDeadzone(leftStick)}</dd>
+            <div class="ctl-stick-plot" style={stickStyle(leftStick)} aria-hidden="true">
+              <span class="ctl-stick-ring"></span>
+              <span class="ctl-stick-dot"></span>
             </div>
-          </dl>
-          <div class="dm-stick-tuning-row">
-            <span>Deadzone</span>
-            <input
-              class="dm-mini-range"
-              style="--value:{leftStickDeadzone * 2.5}%"
-              type="range"
-              min="0"
-              max="40"
-              value={leftStickDeadzone}
-              disabled={!controller || !currentControllerConfig}
-              aria-label="Left stick deadzone"
-              oninput={(event) => void onSetStickDeadzone('left', event.currentTarget.valueAsNumber)}
-            />
-            <code>{leftStickDeadzone}%</code>
-          </div>
-        </article>
-
-        <article class="dm-stick-module">
-          <div class="dm-stick-head">
-            <span>Right Stick</span>
-            <code>{signedPercent(rightStick.x)} / {signedPercent(rightStick.y)}</code>
-          </div>
-          <div class="dm-stick-plot" style={stickStyle(rightStick)} aria-hidden="true">
-            <span class="dm-stick-ring"></span>
-            <span class="dm-stick-dot"></span>
-          </div>
-          <dl>
-            <div>
-              <dt>Drift</dt>
-              <dd>{percent(rightStick.magnitude)}</dd>
+            <div class="ctl-rows">
+              <div class="ctl-row"><span>Off-center now</span><span class="ctl-mut">{percent(leftStick.magnitude)}</span></div>
+              <div class="ctl-row"><span>Suggested deadzone</span><span class="ctl-mut">{suggestedDeadzone(leftStick)}</span></div>
             </div>
-            <div>
-              <dt>Suggested DZ</dt>
-              <dd>{suggestedDeadzone(rightStick)}</dd>
+            <div class="ctl-deadzone-row">
+              <span>Deadzone</span>
+              <input
+                type="range"
+                min="0"
+                max="40"
+                value={leftStickDeadzone}
+                disabled={!controller || !currentControllerConfig}
+                aria-label="Left stick deadzone"
+                oninput={(event) => void onSetStickDeadzone('left', event.currentTarget.valueAsNumber)}
+              />
+              <span class="ctl-mono">{leftStickDeadzone}%</span>
             </div>
-          </dl>
-          <div class="dm-stick-tuning-row">
-            <span>Deadzone</span>
-            <input
-              class="dm-mini-range"
-              style="--value:{rightStickDeadzone * 2.5}%"
-              type="range"
-              min="0"
-              max="40"
-              value={rightStickDeadzone}
-              disabled={!controller || !currentControllerConfig}
-              aria-label="Right stick deadzone"
-              oninput={(event) => void onSetStickDeadzone('right', event.currentTarget.valueAsNumber)}
-            />
-            <code>{rightStickDeadzone}%</code>
-          </div>
-        </article>
-      </div>
+          </article>
+          <article class="ctl-stick">
+            <div class="ctl-meter-row">
+              <span>Right stick</span>
+              <span class="ctl-mut ctl-mono">{signedPercent(rightStick.x)} / {signedPercent(rightStick.y)}</span>
+            </div>
+            <div class="ctl-stick-plot" style={stickStyle(rightStick)} aria-hidden="true">
+              <span class="ctl-stick-ring"></span>
+              <span class="ctl-stick-dot"></span>
+            </div>
+            <div class="ctl-rows">
+              <div class="ctl-row"><span>Off-center now</span><span class="ctl-mut">{percent(rightStick.magnitude)}</span></div>
+              <div class="ctl-row"><span>Suggested deadzone</span><span class="ctl-mut">{suggestedDeadzone(rightStick)}</span></div>
+            </div>
+            <div class="ctl-deadzone-row">
+              <span>Deadzone</span>
+              <input
+                type="range"
+                min="0"
+                max="40"
+                value={rightStickDeadzone}
+                disabled={!controller || !currentControllerConfig}
+                aria-label="Right stick deadzone"
+                oninput={(event) => void onSetStickDeadzone('right', event.currentTarget.valueAsNumber)}
+              />
+              <span class="ctl-mono">{rightStickDeadzone}%</span>
+            </div>
+          </article>
+        </div>
 
-      <div class="dm-trigger-meter-grid">
-        <article class="dm-trigger-meter" style={triggerStyle(l2Value)}>
-          <div>
-            <span>L2</span>
-            <strong>{percent(l2Value)}</strong>
-          </div>
-          <div class="dm-trigger-bar" aria-hidden="true"><span></span></div>
-        </article>
-        <article class="dm-trigger-meter" style={triggerStyle(r2Value)}>
-          <div>
-            <span>R2</span>
-            <strong>{percent(r2Value)}</strong>
-          </div>
-          <div class="dm-trigger-bar" aria-hidden="true"><span></span></div>
-        </article>
+        <div class="ctl-button-grid" aria-label="Live button states">
+          {#each visibleButtons as button (button.id)}
+            <div class:pressed={button.pressed} class="ctl-button-state">
+              <span>{button.label}</span>
+              <span class="ctl-mono">{button.id === 'l2' || button.id === 'r2' ? percent(button.value) : button.pressed ? 'ON' : 'OFF'}</span>
+            </div>
+          {/each}
+        </div>
       </div>
 
-      <div class="dm-button-grid" aria-label="Live button states">
-        {#each visibleButtons as button (button.id)}
-          <div class:pressed={button.pressed} class="dm-button-state">
-            <span>{button.label}</span>
-            <code>{button.id === 'l2' || button.id === 'r2' ? percent(button.value) : button.pressed ? 'ON' : 'OFF'}</code>
-          </div>
-        {/each}
-      </div>
-    </section>
+      <div class="ctl-group">
+        <div class="lbl">Connection</div>
+        <div class="ctl-rows">
+          <div class="ctl-row"><span>Controller</span><span class="ctl-mut">{controllerModelText(controller)}</span></div>
+          <div class="ctl-row"><span>State</span><span class="ctl-mut">{statusTone(controller)}</span></div>
+          <div class="ctl-row"><span>Transport</span><span class="ctl-mut">{controllerTransportDetail(controller)}</span></div>
+          <div class="ctl-row"><span>Battery</span><span class="ctl-mut">{controllerBatteryDetail(controller)}</span></div>
+          <div class="ctl-row"><span>Permission</span><span class="ctl-mut">{controllerPermissionDetail(controller)}</span></div>
+          <div class="ctl-row"><span>Diagnostics</span><span class="ctl-mut">{controllerDiagnosticDetail(controller)}</span></div>
+          <div class="ctl-row"><span>Sanitized ID</span><span class="ctl-mut ctl-mono">{controller.id}</span></div>
+        </div>
 
-    <section class="dm-calibration-readout" aria-label="Calibration measurements">
-      <div class="dm-live-panel-head">
-        <div>
-          <span>Calibration</span>
-          <strong>Session Readings</strong>
+        <div class="lbl ctl-sublabel">Input path</div>
+        <div class="ctl-rows">
+          <div class="ctl-row"><span>Path</span><span class="ctl-mut">{inputPathTitle()}</span></div>
+          <div class="ctl-row"><span>Active app</span><span class="ctl-mut">{activeGameName ?? 'No active app'}</span></div>
+          <div class="ctl-row"><span>Provider</span><span class="ctl-mut">{inputPathDetail()}</span></div>
+          <div class="ctl-row"><span>Duplicate input</span><span class="ctl-mut">{duplicateInputDetail()}</span></div>
+          <div class="ctl-row"><span>Bridge session</span><span class="ctl-mut">{bridgeSessionState()}</span></div>
         </div>
-      </div>
-      <dl class="dm-calibration-grid">
-        <div>
-          <dt>Left Range</dt>
-          <dd>{stickRange(observed.leftStick)}</dd>
+        <div class="ctl-actions" aria-label="Input path controls">
+          <button
+            type="button"
+            class="ctl-button"
+            class:active={currentControllerConfig?.inputMode === 'native_dualsense'}
+            disabled={!controller || !currentControllerConfig || Boolean(inputBridgeBusy)}
+            aria-pressed={currentControllerConfig?.inputMode === 'native_dualsense'}
+            onclick={() => void onSetInputMode('native_dualsense')}
+          >Native</button>
+          <button
+            type="button"
+            class="ctl-button"
+            class:active={currentControllerConfig?.inputMode === 'steam_input_companion'}
+            disabled={!controller || !currentControllerConfig || Boolean(inputBridgeBusy)}
+            aria-pressed={currentControllerConfig?.inputMode === 'steam_input_companion'}
+            onclick={() => void onSetInputMode('steam_input_companion')}
+          >Steam</button>
+          <button
+            type="button"
+            class="ctl-button"
+            class:active={controllerBridgeConfigured}
+            disabled={!controller || !currentControllerConfig || Boolean(inputBridgeBusy)}
+            aria-pressed={controllerBridgeConfigured}
+            onclick={() => void onSetInputMode('dscc_input_bridge')}
+          >Bridge</button>
+          <button
+            type="button"
+            class="ctl-button primary"
+            disabled={!controller || !controllerBridgeConfigured || !appRequiresBridge || bridgeSessionActive || !inputBridge?.available || Boolean(inputBridgeBusy)}
+            onclick={() => void onStartInputBridge()}
+          >{inputBridgeBusy === 'start' ? 'Starting' : 'Start'}</button>
+          <button
+            type="button"
+            class="ctl-button"
+            disabled={!controller || !bridgeSession || !bridgeSessionActive || Boolean(inputBridgeBusy)}
+            onclick={() => void onStopInputBridge()}
+          >{inputBridgeBusy === 'stop' ? 'Stopping' : 'Stop'}</button>
         </div>
-        <div>
-          <dt>Right Range</dt>
-          <dd>{stickRange(observed.rightStick)}</dd>
+        {#if controllerBridgeConfigured && !appRequiresBridge}
+          <p class="ctl-note">Bridge sessions start only while the selected local app is active.</p>
+        {/if}
+        {#if inputBridge?.warnings.length && inputPathTitle() === 'DSCC Input Bridge'}
+          <p class="ctl-note">{inputBridge.warnings[0]}</p>
+        {/if}
+      </div>
+
+      <div class="ctl-group">
+        <div class="lbl">Power</div>
+        <div class="ctl-rows">
+          <div class="ctl-row"><span>Write rate</span><span class="ctl-mut">{formatHz(powerDiagnostics?.outputWriteRateHz)}</span></div>
+          <div class="ctl-row"><span>Cadence</span><span class="ctl-mut">{formatMs(powerDiagnostics?.outputCadenceMs)}</span></div>
+          <div class="ctl-row"><span>Suppressed writes</span><span class="ctl-mut">{formatCount(powerDiagnostics?.suppressedRedundantReports)}</span></div>
+          <div class="ctl-row"><span>Keepalive</span><span class="ctl-mut">{formatMs(powerDiagnostics?.keepaliveIntervalMs)}</span></div>
+          <div class="ctl-row"><span>Last write</span><span class="ctl-mut">{formatMs(powerDiagnostics?.lastWriteAgeMs)}</span></div>
+          <div class="ctl-row"><span>Rumble path</span><span class="ctl-mut">{formatFlag(powerDiagnostics?.nativeRumblePassthrough, 'native passthrough', 'DSCC shaped')}</span></div>
+          <div class="ctl-row"><span>Trigger policy</span><span class="ctl-mut">{formatFlag(powerDiagnostics?.adaptiveTriggersRetained, 'adaptive triggers retained', 'adaptive triggers not retained')}</span></div>
         </div>
-        <div>
-          <dt>L2 Range</dt>
-          <dd>{rangePair(observed.l2Min, observed.l2Max)}</dd>
+        <div class="ctl-suggestions" aria-label="Battery-friendly haptic guidance">
+          {#each powerSuggestions as suggestion}
+            <p class="ctl-note">{suggestion}</p>
+          {/each}
         </div>
-        <div>
-          <dt>R2 Range</dt>
-          <dd>{rangePair(observed.r2Min, observed.r2Max)}</dd>
+      </div>
+
+      <div class="ctl-group">
+        <div class="lbl">Session readings</div>
+        <div class="ctl-rows">
+          <div class="ctl-row"><span>Left range</span><span class="ctl-mut ctl-mono">{stickRange(observed.leftStick)}</span></div>
+          <div class="ctl-row"><span>Right range</span><span class="ctl-mut ctl-mono">{stickRange(observed.rightStick)}</span></div>
+          <div class="ctl-row"><span>L2 range</span><span class="ctl-mut ctl-mono">{rangePair(observed.l2Min, observed.l2Max)}</span></div>
+          <div class="ctl-row"><span>R2 range</span><span class="ctl-mut ctl-mono">{rangePair(observed.r2Min, observed.r2Max)}</span></div>
         </div>
-      </dl>
-    </section>
+        <p class="ctl-note">Ranges are observed while this page is open; move the sticks and pull the triggers to fill them in.</p>
+      </div>
     {/if}
+
+    <div class="ctl-group narrow">
+      <div class="lbl">Support</div>
+      <div class="ctl-support">
+        <span>Having trouble?</span>
+        <p class="ctl-note">Download a Support Bundle &mdash; sanitized diagnostics, no private data.</p>
+        <button
+          type="button"
+          class="ctl-button"
+          disabled={Boolean(supportBundleBusy)}
+          onclick={() => void onDownloadSupportBundle()}
+        >{supportBundleBusy === 'download' ? 'Preparing bundle' : 'Download bundle'}</button>
+      </div>
+    </div>
   </div>
 </section>
diff --git a/web/src/lib/features/controllers/EdgeSlotsView.svelte b/web/src/lib/features/controllers/EdgeSlotsView.svelte
new file mode 100644
index 0000000..a3d6eed
--- /dev/null
+++ b/web/src/lib/features/controllers/EdgeSlotsView.svelte
@@ -0,0 +1,94 @@
+<script lang="ts">
+  import Tooltip from '../../../components/Tooltip.svelte';
+  import type {
+    ControllerConfiguration,
+    ControllerStatus,
+    EdgeProfileSlot,
+    EdgeProfilesResponse
+  } from '../../types';
+
+  export let controller: ControllerStatus | undefined = undefined;
+  export let currentControllerConfig: ControllerConfiguration | null = null;
+  export let edgeProfiles: EdgeProfilesResponse | null = null;
+  export let edgeProfilesLoading = false;
+  export let edgeProfilesBusySlot = '';
+  export let edgeProfilesError = '';
+  export let edgeSlotsReadTooltip = '';
+  export let edgeSlotWriteLabel = 'Write';
+  export let onRefreshEdgeProfiles: () => void | Promise<void> = () => {};
+  export let onWriteEdgeSlot: (slot: EdgeProfileSlot) => void | Promise<void> = () => {};
+  export let edgeSlotName: (slot: EdgeProfileSlot) => string = (slot) => slot.name ?? slot.shortcut;
+  export let edgeSlotStatus: (slot: EdgeProfileSlot) => string = (slot) => slot.state;
+  export let edgeSlotInfoTooltip: (slot: EdgeProfileSlot) => string = (slot) => edgeSlotStatus(slot);
+  export let edgeSlotWriteTooltip: (slot: EdgeProfileSlot) => string = (slot) => `Write ${edgeSlotName(slot)}`;
+
+  $: alias = controller?.name || controller?.family || 'No controller';
+</script>
+
+<section class="ctl-view" aria-label="Edge onboard slots">
+  <div class="ctl-head">
+    <h1 class="ctl-title">Edge onboard slots</h1>
+    <span class="ctl-sub">{alias} &middot; profiles stored on the controller itself, for checking, not for everyday tuning</span>
+  </div>
+
+  <div class="ctl-groups">
+    <div class="ctl-group">
+      <div class="ctl-group-head">
+        <div class="lbl">Onboard memory</div>
+        <Tooltip text={edgeSlotsReadTooltip} side="bottom" align="end">
+          <button
+            type="button"
+            class="ctl-button"
+            disabled={edgeProfilesLoading}
+            aria-label="Refresh DualSense Edge onboard slots"
+            onclick={() => void onRefreshEdgeProfiles()}
+          >
+            {edgeProfilesLoading ? 'Reading' : 'Read'}
+          </button>
+        </Tooltip>
+      </div>
+
+      {#if edgeProfilesError}
+        <p class="ctl-note error">{edgeProfilesError}</p>
+      {:else if edgeProfiles?.warning}
+        <p class="ctl-note">{edgeProfiles.warning}</p>
+      {/if}
+
+      <div class="edge-slot-list">
+        {#if edgeProfiles?.slots.length}
+          {#each edgeProfiles.slots as slot (slot.slotId)}
+            <div class="edge-slot-row" class:disabled={!slot.editable}>
+              <Tooltip block text={edgeSlotInfoTooltip(slot)} side="right" align="start">
+                <div class="edge-slot-copy">
+                  <span class="lbl">{slot.shortcut}</span>
+                  <strong>{edgeSlotName(slot)}</strong>
+                  <small>{edgeSlotStatus(slot)}</small>
+                </div>
+              </Tooltip>
+              {#if slot.editable}
+                <Tooltip text={edgeSlotWriteTooltip(slot)} side="left" align="center">
+                  <button
+                    type="button"
+                    class="ctl-button primary"
+                    disabled={!currentControllerConfig || edgeProfilesBusySlot === slot.slotId}
+                    onclick={() => void onWriteEdgeSlot(slot)}
+                  >
+                    {edgeProfilesBusySlot === slot.slotId ? 'Writing' : edgeSlotWriteLabel}
+                  </button>
+                </Tooltip>
+              {/if}
+            </div>
+          {/each}
+        {:else}
+          <div class="edge-slot-row disabled">
+            <div class="edge-slot-copy">
+              <span class="lbl">Fn Slots</span>
+              <strong>{edgeProfilesLoading ? 'Reading slots' : 'No slot data'}</strong>
+              <small>{edgeProfilesLoading ? 'controller scan' : 'unavailable'}</small>
+            </div>
+          </div>
+        {/if}
+      </div>
+    </div>
+  </div>
+</section>
diff --git a/web/src/lib/features/games/GamesView.svelte b/web/src/lib/features/games/GamesView.svelte
deleted file mode 100644
index f196f77..0000000
--- a/web/src/lib/features/games/GamesView.svelte
+++ /dev/null
@@ -1,165 +0,0 @@
-<script lang="ts">
-  import Tooltip from '../../../components/Tooltip.svelte';
-  import InitialBadge from '../../../components/InitialBadge.svelte';
-  import { controllerConnectionText, controllerModelText } from '../../controllerDisplay';
-  import type { ControllerStatus, ProfileSummary, SupportedGame } from '../../types';
-
-  export let controller: ControllerStatus | undefined = undefined;
-  export let connectedControllers: ControllerStatus[] = [];
-  export let selectedTuningScope: 'none' | 'global' | 'game' = 'global';
-  export let selectedTuningGameId = '';
-  export let globalProfilePreview: ProfileSummary | null | undefined = null;
-  export let profileTargetsAllConnected = false;
-  export let profileTargetControllerIds: string[] = [];
-  export let discoveredGames: SupportedGame[] = [];
-  export let detectionSignalText = '';
-  export let gameArtwork: (game: SupportedGame, kind: 'hero' | 'banner' | 'capsule' | 'icon') => string | null = () => null;
-  export let gameMediaDetails: (game: SupportedGame) => string[] = () => [];
-  export let profileScopeCount: (game: SupportedGame) => number = () => 0;
-  export let gameAccentColor: (game: SupportedGame) => string = () => '#3BA0FF';
-  export let gameTileStatus: (game: SupportedGame) => string = () => 'installed';
-  export let onSelectGlobal: () => void | Promise<void> = () => {};
-  export let onSelectGame: (game: SupportedGame) => void | Promise<void> = () => {};
-  export let onOpenAddGame: () => void | Promise<void> = () => {};
-  export let onPickAllControllers: () => void = () => {};
-  export let onPickControllerTarget: (controllerId: string) => void = () => {};
-
-  $: connectedCount = connectedControllers.length;
-  $: targetSummary = profileTargetsAllConnected
-    ? 'All Connected'
-    : connectedControllers.find((item) => profileTargetControllerIds.includes(item.id))?.name ||
-      controllerModelText(controller);
-  $: targetDetail = profileTargetsAllConnected
-    ? `${connectedCount} controller${connectedCount === 1 ? '' : 's'}`
-    : controllerConnectionText(controller);
-</script>
-
-<section class="dm-games-page" aria-label="Profiles and supported games">
-  <div class="dm-games-column wide">
-    <div class="dm-games-head">
-      <span>Profiles</span>
-      <h2>Games</h2>
-    </div>
-
-    <div class="dm-profile-target-strip" aria-label="Profile target controller">
-      <div>
-        <span>Target Controller</span>
-        <strong>{targetSummary}</strong>
-        <small>{targetDetail}</small>
-      </div>
-      {#if connectedControllers.length > 1}
-        <button
-          type="button"
-          class:active={profileTargetsAllConnected}
-          aria-pressed={profileTargetsAllConnected}
-          onclick={onPickAllControllers}
-        >All</button>
-        {#each connectedControllers as item (item.id)}
-          <button
-            type="button"
-            class:active={!profileTargetsAllConnected && profileTargetControllerIds.includes(item.id)}
-            aria-pressed={!profileTargetsAllConnected && profileTargetControllerIds.includes(item.id)}
-            onclick={() => onPickControllerTarget(item.id)}
-          >{item.name || controllerModelText(item)}</button>
-        {/each}
-      {/if}
-    </div>
-
-    <div class="dm-scope-strip">
-      <Tooltip
-        text="Per-game profiles auto-load when the game launches via Steam. Global tunes the controller when nothing is detected or an unsupported game is running."
-        side="bottom"
-        align="start"
-      >
-        <button
-          type="button"
-          class:active={selectedTuningScope === 'global'}
-          disabled={!controller}
-          onclick={() => void onSelectGlobal()}
-        >
-          <span class="dm-controller-glyph small" aria-hidden="true"></span>
-          <span class="dm-scope-chip">
-            <span class="dm-scope-chip-label">Profile Scope</span>
-            <strong class="dm-scope-chip-value">Global</strong>
-            <small class="dm-scope-chip-detail">{globalProfilePreview?.name ?? 'Base'} · Controller-only tuning</small>
-          </span>
-        </button>
-      </Tooltip>
-    </div>
-
-    {#if discoveredGames.length}
-      <div class="dm-game-grid">
-        {#each discoveredGames as game (game.gameId)}
-          {@const heroArt = gameArtwork(game, 'hero') ?? gameArtwork(game, 'banner')}
-          {@const tileArt = gameArtwork(game, 'banner') ?? gameArtwork(game, 'capsule') ?? gameArtwork(game, 'icon')}
-          {@const details = gameMediaDetails(game)}
-          {@const scopedProfiles = profileScopeCount(game)}
-          <button
-            type="button"
-            class="dm-game-card"
-            class:active={selectedTuningScope === 'game' && game.gameId === selectedTuningGameId}
-            class:running={game.running}
-            class:custom={game.supportLevel === 'custom'}
-            disabled={!controller}
-            aria-pressed={selectedTuningScope === 'game' && game.gameId === selectedTuningGameId}
-            style={heroArt ? `--game-hero: url("${heroArt}")` : ''}
-            onclick={() => void onSelectGame(game)}
-          >
-            <span class="dm-game-card-media">
-              {#if tileArt}
-                <img
-                  src={tileArt}
-                  alt=""
-                  loading="lazy"
-                  aria-hidden="true"
-                  onerror={(event) => {
-                    const img = event.currentTarget;
-                    if (img instanceof HTMLImageElement) img.style.display = 'none';
-                  }}
-                />
-              {/if}
-              <span class="dm-game-art-fallback" aria-hidden="true">
-                <InitialBadge label={game.name} accent={gameAccentColor(game)} />
-              </span>
-              <code>{game.running ? 'LIVE' : game.supportLevel === 'custom' ? 'CUSTOM' : game.installed ? 'READY' : 'SUPPORTED'}</code>
-            </span>
-            <span class="dm-game-copy">
-              <strong>{game.name}</strong>
-              <span class="dm-game-meta">
-                {#each details as detail}
-                  <em>{detail}</em>
-                {/each}
-              </span>
-              <small>{scopedProfiles ? `${scopedProfiles} game profile${scopedProfiles === 1 ? '' : 's'}` : game.supportLevel === 'custom' ? 'custom / no telemetry adapter' : `${gameTileStatus(game)} / telemetry`}</small>
-            </span>
-          </button>
-        {/each}
-        <button
-          type="button"
-          class="dm-game-card dm-game-card-add"
-          disabled={!controller}
-          aria-label="Add a custom game from your Steam library"
-          onclick={() => void onOpenAddGame()}
-        >
-          <span class="dm-add-game-icon" aria-hidden="true">+</span>
-          <span class="dm-game-copy">
-            <strong>Add a Game</strong>
-            <small>Pick from your installed Steam library or local apps. DSCC will save a profile per game and auto-load it on launch.</small>
-          </span>
-        </button>
-      </div>
-    {:else}
-      <div class="dm-empty-choice wide">
-        <strong>No supported games discovered</strong>
-        <span>{detectionSignalText || 'Steam library data unavailable'}</span>
-        <button
-          type="button"
-          class="dm-mini-button"
-          style="margin-top: 8px;"
-          disabled={!controller}
-          onclick={() => void onOpenAddGame()}
-        >Add a game manually</button>
-      </div>
-    {/if}
-  </div>
-</section>
diff --git a/web/src/lib/features/games/addGameDialog.css b/web/src/lib/features/games/addGameDialog.css
index 85ba718..07e8d8b 100644
--- a/web/src/lib/features/games/addGameDialog.css
+++ b/web/src/lib/features/games/addGameDialog.css
@@ -36,7 +36,7 @@
 
 .dm-add-game-head span {
   display: block;
-  color: var(--tungsten);
+  color: var(--ink-muted);
   font-size: 11px;
   font-weight: 800;
   letter-spacing: 0.04em;
@@ -55,7 +55,7 @@
 .dm-add-game-head p {
   margin: 0;
   max-width: 60ch;
-  color: var(--tungsten);
+  color: var(--ink-muted);
   font-size: 12px;
   line-height: 1.4;
 }
@@ -67,7 +67,7 @@
   height: 28px;
   border: 1px solid rgba(113, 113, 122, 0.32);
   border-radius: 6px;
-  color: var(--haptic);
+  color: var(--ink);
   background: rgba(18, 18, 20, 0.6);
   cursor: pointer;
 }
@@ -86,7 +86,7 @@
   border: 1px solid rgba(113, 113, 122, 0.28);
   border-radius: 6px;
   background: rgba(10, 10, 12, 0.62);
-  color: var(--tungsten);
+  color: var(--ink-muted);
 }
 
 .dm-add-game-tabs {
@@ -104,7 +104,7 @@
   border: 0;
   border-radius: 5px;
   padding: 6px 10px;
-  color: var(--tungsten);
+  color: var(--ink-muted);
   background: transparent;
   font-size: 12px;
   font-weight: 800;
@@ -134,7 +134,7 @@
 }
 
 .dm-add-game-search input::placeholder {
-  color: var(--tungsten);
+  color: var(--ink-muted);
 }
 
 .dm-add-game-error {
@@ -167,7 +167,7 @@
 .dm-local-app-field {
   display: grid;
   gap: 6px;
-  color: var(--tungsten);
+  color: var(--ink-muted);
   font-size: 11px;
   font-weight: 800;
   letter-spacing: 0.04em;
@@ -221,7 +221,7 @@
 }
 
 .dm-local-validation span {
-  color: var(--tungsten);
+  color: var(--ink-muted);
   font-family: "JetBrains Mono", monospace;
   font-size: 11px;
 }
@@ -240,7 +240,7 @@
   gap: 4px;
   padding: 24px 8px;
   text-align: center;
-  color: var(--tungsten);
+  color: var(--ink-muted);
   font-size: 13px;
 }
 
@@ -331,7 +331,7 @@
   display: flex;
   flex-wrap: wrap;
   gap: 4px 6px;
-  color: var(--tungsten);
+  color: var(--ink-muted);
   font-size: 11px;
 }
 
@@ -344,7 +344,7 @@
 }
 
 .dm-add-game-copy small {
-  color: var(--tungsten);
+  color: var(--ink-muted);
   font-size: 11px;
   line-height: 1.3;
 }
@@ -382,7 +382,7 @@
   padding: 6px 12px;
   border: 1px solid rgba(113, 113, 122, 0.42);
   border-radius: 5px;
-  color: var(--haptic);
+  color: var(--ink);
   background: rgba(10, 10, 12, 0.42);
   font-size: 12px;
   font-weight: 700;
@@ -414,7 +414,7 @@
   align-items: center;
   gap: 4px 6px;
   padding: 10px 20px 0;
-  color: var(--tungsten);
+  color: var(--ink-muted);
   font-size: 11px;
   font-family: "JetBrains Mono", "Space Mono", ui-monospace, monospace;
 }
@@ -423,7 +423,7 @@
   appearance: none;
   border: 0;
   background: transparent;
-  color: var(--haptic);
+  color: var(--ink);
   font: inherit;
   cursor: pointer;
   padding: 2px 4px;
@@ -466,7 +466,7 @@
 .dm-add-game-browse-empty {
   padding: 16px 8px;
   text-align: center;
-  color: var(--tungsten);
+  color: var(--ink-muted);
   font-size: 12px;
 }
 
@@ -478,7 +478,7 @@
   padding: 7px 10px;
   border: 0;
   border-radius: 5px;
-  color: var(--haptic);
+  color: var(--ink);
   background: transparent;
   font: inherit;
   text-align: left;
@@ -494,11 +494,11 @@
 }
 
 .dm-add-game-browse-row.dir .dm-add-game-browse-icon {
-  color: var(--actuation);
+  color: var(--accent);
 }
 
 .dm-add-game-browse-row.exe .dm-add-game-browse-icon {
-  color: var(--haptic);
+  color: var(--ink);
 }
 
 .dm-add-game-browse-row.selected {
@@ -523,17 +523,17 @@
 }
 
 .dm-add-game-browse-meta {
-  color: var(--tungsten);
+  color: var(--ink-muted);
   font-size: 10px;
   font-family: "JetBrains Mono", monospace;
 }
 
 .dm-add-game-browse-affordance {
-  color: var(--tungsten);
+  color: var(--ink-muted);
 }
 
 .dm-add-game-browse-affordance.selected-pill {
-  color: var(--actuation);
+  color: var(--accent);
   font-size: 10px;
   font-weight: 800;
   letter-spacing: 0.04em;
@@ -541,7 +541,7 @@
 }
 
 .dm-add-game-browse-affordance.hint-pill {
-  color: var(--tungsten);
+  color: var(--ink-muted);
   font-size: 10px;
   font-weight: 700;
   letter-spacing: 0.04em;
@@ -551,7 +551,7 @@
 
 .dm-add-game-browse-row:hover .dm-add-game-browse-affordance.hint-pill {
   opacity: 1;
-  color: var(--haptic);
+  color: var(--ink);
 }
 
 .dm-add-game-pick-selected {
@@ -566,7 +566,7 @@
 }
 
 .dm-add-game-pick-selected-label {
-  color: var(--tungsten);
+  color: var(--ink-muted);
   font-size: 10px;
   font-weight: 800;
   letter-spacing: 0.04em;
@@ -575,7 +575,7 @@
 }
 
 .dm-add-game-pick-selected-empty {
-  color: var(--tungsten);
+  color: var(--ink-muted);
   font-size: 11px;
   font-style: italic;
 }
@@ -602,7 +602,7 @@
   height: 16px;
   border: 0;
   border-radius: 50%;
-  color: var(--haptic);
+  color: var(--ink);
   background: transparent;
   cursor: pointer;
 }
@@ -621,7 +621,7 @@
   padding: 4px 8px;
   border: 1px solid rgba(113, 113, 122, 0.32);
   border-radius: 999px;
-  color: var(--tungsten);
+  color: var(--ink-muted);
   font-size: 10px;
   font-weight: 800;
   letter-spacing: 0.04em;
@@ -635,7 +635,7 @@
   gap: 12px;
   padding: 12px 20px 16px;
   border-top: 1px solid rgba(113, 113, 122, 0.18);
-  color: var(--tungsten);
+  color: var(--ink-muted);
   font-size: 11px;
   font-weight: 700;
   letter-spacing: 0.02em;
@@ -646,7 +646,7 @@
   padding: 7px 14px;
   border: 1px solid rgba(113, 113, 122, 0.34);
   border-radius: 5px;
-  color: var(--haptic);
+  color: var(--ink);
   background: rgba(10, 10, 12, 0.42);
   font-size: 12px;
   font-weight: 800;
diff --git a/web/src/lib/features/haptics/HapticsAside.svelte b/web/src/lib/features/haptics/HapticsAside.svelte
deleted file mode 100644
index 0b246ba..0000000
--- a/web/src/lib/features/haptics/HapticsAside.svelte
+++ /dev/null
@@ -1,297 +0,0 @@
-<script lang="ts">
-  import GlobalFeelPanel from './GlobalFeelPanel.svelte';
-  import LightbarControls from './LightbarControls.svelte';
-  import TelemetryRoutingPanel from './TelemetryRoutingPanel.svelte';
-  import ProfileConsole from '../profiles/ProfileConsole.svelte';
-  import type {
-    AppSnapshot,
-    ForzaAbsTuningConfiguration,
-    ForzaBrakeTuningConfiguration,
-    ForzaBodyRumbleMode,
-    ForzaEffectConfiguration,
-    ForzaEffectRoute,
-    ForzaRevLimiterTuningConfiguration,
-    ForzaShiftTuningConfiguration,
-    ForzaThrottleTuningConfiguration,
-    ProfileSummary
-  } from '../../types';
-  import type { ForzaEffectMeta, LightbarColorTarget } from './hapticsModel';
-
-  type TuningScope = 'none' | 'global' | 'game';
-  type PatternOption = {
-    label: string;
-    badge?: string;
-  };
-  type BodyRumbleModeOption = {
-    value: ForzaBodyRumbleMode;
-    label: string;
-    badge: string;
-    help: string;
-  };
-  type RouteOption = {
-    value: ForzaEffectRoute;
-    label: string;
-  };
-
-  const noop = () => undefined;
-
-  export let selectedTuningScope: TuningScope = 'none';
-  export let snapshot: AppSnapshot | null = null;
-  export let baseFeelTestActive = false;
-  export let baseFeelTestBusy = false;
-  export let triggerEffect = 'Adaptive resistance';
-  export let triggerIntensity = 'Strong (Standard)';
-  export let vibrationIntensity = 'Medium';
-  export let vibrationMode = 'Balanced';
-  export let triggerEffectOptions: PatternOption[] = [];
-  export let vibrationModeOptions: PatternOption[] = [];
-  export let triggerEffectHelp: Record<string, string> = {};
-  export let vibrationModeHelp: Record<string, string> = {};
-  export let setTriggerEffect: (value: string) => void = noop as (value: string) => void;
-  export let setVibrationIntensity: (value: string) => void = noop as (value: string) => void;
-  export let setVibrationMode: (value: string) => void = noop as (value: string) => void;
-  export let toggleBaseFeelTest: () => Promise<void> | void = noop;
-  export let previewBodyHaptics: () => Promise<void> | void = noop;
-
-  export let enabledForzaEffectCount = 0;
-  export let allForzaEffectsEnabled = false;
-  export let forzaEffectMetas: ForzaEffectMeta[] = [];
-  export let forzaEffectsById: ReadonlyMap<string, ForzaEffectConfiguration> = new Map();
-  export let effectStatusById: ReadonlyMap<string, { state?: string }> = new Map();
-  export let forzaBodyRumbleMode: ForzaBodyRumbleMode = 'native_passthrough';
-  export let forzaBrakeTuning: ForzaBrakeTuningConfiguration = {
-    baselineForce: 76 / 255,
-    normalForce: 1,
-    endstopForce: 1,
-    endstopBoost: 1.25,
-    wallPosition: 0.48,
-    guardMinEnd: 0.48,
-    fullForceAt: 0.8,
-    rampCurve: 0.8
-  };
-  export let forzaAbsTuning: ForzaAbsTuningConfiguration = {
-    mode: 'strong_pulse',
-    slipSource: 'auto_front_first',
-    slipThreshold: 0.68,
-    brakeThresholdRatio: 0.38,
-    minSpeedKmh: 12,
-    minStrength: 48 / 63,
-    maxStrength: 1,
-    frequencyHz: 34,
-    curve: 1
-  };
-  export let forzaThrottleTuning: ForzaThrottleTuningConfiguration = {
-    baselineForce: 3 / 255,
-    normalForce: 28 / 255,
-    endstopForce: 106 / 255,
-    endstopBoost: 3,
-    wallPosition: 0.8,
-    guardMinEnd: 0.8,
-    rampWidth: 0.2,
-    rampCurve: 2.4
-  };
-  export let forzaShiftTuning: ForzaShiftTuningConfiguration = {
-    wallFormAt: 0.15,
-    frequencyHz: 34,
-    wallZones: 4,
-    bodyLowWeight: 0.92,
-    bodyHighWeight: 0.84,
-    clutchMode: 'auto',
-    clutchThreshold: 0.4,
-    withClutchStrength: 0.58,
-    withoutClutchStrength: 1,
-    withClutchDurationMs: 130,
-    withoutClutchDurationMs: 240,
-    clutchBodyCut: 0.78
-  };
-  export let forzaRevLimiterTuning: ForzaRevLimiterTuningConfiguration = {
-    thresholdRatio: 0.93,
-    minStrength: 18 / 63,
-    maxStrength: 18 / 63,
-    frequencyHz: 42,
-    wallFormThrottleAt: 0.6,
-    wallZones: 4,
-    curve: 1,
-    bodyLowWeight: 0.2,
-    bodyHighWeight: 0.8
-  };
-  export let bodyRumbleModeOptions: BodyRumbleModeOption[] = [];
-  export let forzaRoutes: RouteOption[] = [];
-  export let forzaEffect: (id: string) => ForzaEffectConfiguration = (id) => ({
-    id,
-    enabled: false,
-    intensity: 0,
-    route: 'body_both'
-  });
-  export let toggleAllForzaEffects: () => void = noop;
-  export let setForzaBodyRumbleMode: (value: ForzaBodyRumbleMode) => void = noop as (value: ForzaBodyRumbleMode) => void;
-  export let updateForzaBrakeTuning: (patch: Partial<ForzaBrakeTuningConfiguration>) => void = noop as (
-    patch: Partial<ForzaBrakeTuningConfiguration>
-  ) => void;
-  export let updateForzaAbsTuning: (patch: Partial<ForzaAbsTuningConfiguration>) => void = noop as (
-    patch: Partial<ForzaAbsTuningConfiguration>
-  ) => void;
-  export let updateForzaThrottleTuning: (patch: Partial<ForzaThrottleTuningConfiguration>) => void = noop as (
-    patch: Partial<ForzaThrottleTuningConfiguration>
-  ) => void;
-  export let updateForzaShiftTuning: (patch: Partial<ForzaShiftTuningConfiguration>) => void = noop as (
-    patch: Partial<ForzaShiftTuningConfiguration>
-  ) => void;
-  export let updateForzaRevLimiterTuning: (patch: Partial<ForzaRevLimiterTuningConfiguration>) => void = noop as (
-    patch: Partial<ForzaRevLimiterTuningConfiguration>
-  ) => void;
-  export let updateForzaEffect: (id: string, patch: Partial<ForzaEffectConfiguration>) => void = noop as (
-    id: string,
-    patch: Partial<ForzaEffectConfiguration>
-  ) => void;
-  export let intensityTooltip: (meta: ForzaEffectMeta, intensity: number) => string = () => '';
-  export let routeTooltip: (route: ForzaEffectRoute) => string = () => '';
-  export let forzaIntensityPercent: (intensity: number) => number = () => 0;
-  export let forzaIntensityFromPercent: (value: number | string) => number = () => 0;
-
-  export let lightbarEnabled = true;
-  export let lightbarColor = '#4cc9f0';
-  export let rpmColor = '#ff3a2e';
-  export let lightbarBrightness = 72;
-  export let onColorChange: (target: LightbarColorTarget, color: string) => void = noop as (
-    target: LightbarColorTarget,
-    color: string
-  ) => void;
-  export let setLightbarBrightness: (value: number | string) => void = noop as (value: number | string) => void;
-  export let setLightbarEnabled: (enabled: boolean) => void = noop as (enabled: boolean) => void;
-  export let previewLightbar: () => Promise<void> | void = noop;
-  export let previewRpmColor: () => Promise<void> | void = noop;
-
-  export let profileContextProfiles: ProfileSummary[] = [];
-  export let activeProfileId = '';
-  export let selectedOverrideProfileId = '';
-  export let selectedActionProfile: ProfileSummary | null | undefined = null;
-  export let selectedGameName = 'game';
-  export let canRenameSelectedProfile = false;
-  export let canDeleteSelectedProfile = false;
-  export let profileConfigDirty = false;
-  export let profileSaveBusy = false;
-  export let profileFileBusy = false;
-  export let profileSaveAsBusy = false;
-  export let profileRenameBusy = false;
-  export let saveAsProfileOpen = false;
-  export let saveAsProfileName = '';
-  export let renameProfileId = '';
-  export let renameProfileName = '';
-  export let onSelectProfile: (profileId: string) => void | Promise<void> = noop as (profileId: string) => void;
-  export let onImportFile: (event: Event) => void | Promise<void> = noop as (event: Event) => void;
-  export let onExportProfile: () => void | Promise<void> = noop;
-  export let onBeginSaveAs: () => void = noop;
-  export let onCancelSaveAs: () => void = noop;
-  export let onSubmitSaveAs: () => void | Promise<void> = noop;
-  export let onSaveAsKeydown: (event: KeyboardEvent) => void = noop as (event: KeyboardEvent) => void;
-  export let onBeginRename: () => void = noop;
-  export let onCancelRename: () => void = noop;
-  export let onSubmitRename: () => void | Promise<void> = noop;
-  export let onRenameKeydown: (event: KeyboardEvent) => void = noop as (event: KeyboardEvent) => void;
-  export let onDeleteProfile: (profile: ProfileSummary) => void | Promise<void> = noop as (profile: ProfileSummary) => void;
-  export let onRestoreDefaults: () => void | Promise<void> = noop;
-  export let onSaveProfile: () => void | Promise<void> = noop;
-</script>
-
-<aside
-  class:dm-global-feel={selectedTuningScope === 'global'}
-  class="dm-routing"
-  aria-label={selectedTuningScope === 'global' ? 'Controller haptic tuning' : 'Telemetry haptic routing'}
->
-  {#if selectedTuningScope === 'global'}
-    <GlobalFeelPanel
-      {snapshot}
-      {baseFeelTestActive}
-      {baseFeelTestBusy}
-      {triggerEffect}
-      {triggerIntensity}
-      {vibrationIntensity}
-      {vibrationMode}
-      {triggerEffectOptions}
-      {vibrationModeOptions}
-      {triggerEffectHelp}
-      {vibrationModeHelp}
-      {setTriggerEffect}
-      {setVibrationIntensity}
-      {setVibrationMode}
-      {toggleBaseFeelTest}
-      {previewBodyHaptics}
-    />
-  {:else}
-    <TelemetryRoutingPanel
-      {enabledForzaEffectCount}
-      {allForzaEffectsEnabled}
-      {forzaEffectMetas}
-      {forzaEffectsById}
-      {effectStatusById}
-      {forzaBodyRumbleMode}
-      {forzaBrakeTuning}
-      {forzaAbsTuning}
-      {forzaThrottleTuning}
-      {forzaShiftTuning}
-      {forzaRevLimiterTuning}
-      {bodyRumbleModeOptions}
-      {forzaRoutes}
-      {forzaEffect}
-      {toggleAllForzaEffects}
-      {setForzaBodyRumbleMode}
-      {updateForzaBrakeTuning}
-      {updateForzaAbsTuning}
-      {updateForzaThrottleTuning}
-      {updateForzaShiftTuning}
-      {updateForzaRevLimiterTuning}
-      {updateForzaEffect}
-      {intensityTooltip}
-      {routeTooltip}
-      {forzaIntensityPercent}
-      {forzaIntensityFromPercent}
-    />
-  {/if}
-
-  <LightbarControls
-    {selectedTuningScope}
-    {lightbarEnabled}
-    bind:lightbarColor
-    bind:rpmColor
-    {lightbarBrightness}
-    {onColorChange}
-    {setLightbarBrightness}
-    {setLightbarEnabled}
-    {previewLightbar}
-    {previewRpmColor}
-  />
-
-  <ProfileConsole
-    {profileContextProfiles}
-    {activeProfileId}
-    {selectedOverrideProfileId}
-    {selectedActionProfile}
-    {selectedGameName}
-    {canRenameSelectedProfile}
-    {canDeleteSelectedProfile}
-    {profileConfigDirty}
-    {profileSaveBusy}
-    {profileFileBusy}
-    {profileSaveAsBusy}
-    {profileRenameBusy}
-    {saveAsProfileOpen}
-    bind:saveAsProfileName
-    {renameProfileId}
-    bind:renameProfileName
-    onSelectProfile={onSelectProfile}
-    onImportFile={onImportFile}
-    onExportProfile={onExportProfile}
-    onBeginSaveAs={onBeginSaveAs}
-    onCancelSaveAs={onCancelSaveAs}
-    onSubmitSaveAs={onSubmitSaveAs}
-    onSaveAsKeydown={onSaveAsKeydown}
-    onBeginRename={onBeginRename}
-    onCancelRename={onCancelRename}
-    onSubmitRename={onSubmitRename}
-    onRenameKeydown={onRenameKeydown}
-    onDeleteProfile={onDeleteProfile}
-    onRestoreDefaults={onRestoreDefaults}
-    onSaveProfile={onSaveProfile}
-  />
-</aside>
diff --git a/web/src/lib/features/haptics/HapticsView.svelte b/web/src/lib/features/haptics/HapticsView.svelte
deleted file mode 100644
index 0354dd4..0000000
--- a/web/src/lib/features/haptics/HapticsView.svelte
+++ /dev/null
@@ -1,12 +0,0 @@
-<script lang="ts">
-  export let active = false;
-</script>
-
-<section
-  class:dm-view-hidden={!active}
-  class="dm-deck"
-  aria-label="Adaptive triggers and haptics"
-  aria-hidden={!active}
->
-  <slot />
-</section>
diff --git a/web/src/lib/features/haptics/TelemetryRoutingPanel.svelte b/web/src/lib/features/haptics/TelemetryRoutingPanel.svelte
index 5303539..229c493 100644
--- a/web/src/lib/features/haptics/TelemetryRoutingPanel.svelte
+++ b/web/src/lib/features/haptics/TelemetryRoutingPanel.svelte
@@ -37,6 +37,14 @@
     route: 'body_both'
   });
 
+  // Semantic-column rendering (Task 6): the tuning canvas renders one
+  // embedded instance per column with a filtered `forzaEffectMetas` subset
+  // (showChrome=false), and parks the stream head + body source chrome below
+  // the grid in a chrome-only instance (showEffects=false). Defaults keep the
+  // original all-in-one panel behavior.
+  export let showChrome = true;
+  export let showEffects = true;
+
   export let enabledForzaEffectCount = 0;
   export let allForzaEffectsEnabled = false;
   export let forzaEffectMetas: ForzaEffectMeta[] = [];
@@ -226,6 +234,7 @@
   };
 </script>
 
+{#if showChrome}
 <div class="dm-section-head compact">
   <div>
     <span>Haptic Routing</span>
@@ -233,13 +242,15 @@
   </div>
   <div class="dm-effects-count">
     <code>{enabledForzaEffectCount}/{forzaEffectMetas.length}</code>
-    <button
-      class:active={advancedOpen}
-      class="dm-mini-button dm-advanced-toggle"
-      type="button"
-      aria-expanded={advancedOpen}
-      onclick={() => (advancedOpen = !advancedOpen)}
-    >Advanced</button>
+    {#if showEffects}
+      <button
+        class:active={advancedOpen}
+        class="dm-mini-button dm-advanced-toggle"
+        type="button"
+        aria-expanded={advancedOpen}
+        onclick={() => (advancedOpen = !advancedOpen)}
+      >Advanced</button>
+    {/if}
     <button
       class:active={allForzaEffectsEnabled}
       class="dm-toggle"
@@ -250,7 +261,9 @@
     ><span></span></button>
   </div>
 </div>
+{/if}
 
+{#if showChrome}
 <div class="dm-body-mode-panel" aria-label="Body rumble source">
   <div class="dm-body-mode-title">
     <span>Body Source</span>
@@ -274,7 +287,20 @@
     {/each}
   </div>
 </div>
+{/if}
 
+{#if showEffects}
+{#if !showChrome}
+  <div class="dm-effects-embedded-head">
+    <button
+      class:active={advancedOpen}
+      class="dm-mini-button dm-advanced-toggle"
+      type="button"
+      aria-expanded={advancedOpen}
+      onclick={() => (advancedOpen = !advancedOpen)}
+    >Advanced</button>
+  </div>
+{/if}
 <div
   class:advanced={advancedOpen}
   class="dm-channel-list"
@@ -288,7 +314,7 @@
       class:disabled={!tuning.enabled}
       class="dm-channel-strip"
     >
-      <Tooltip text={(tuning.enabled ? 'Disable ' : 'Enable ') + meta.label + '.'} side="right" align="start">
+      <Tooltip class="strip-toggle" text={(tuning.enabled ? 'Disable ' : 'Enable ') + meta.label + '.'} side="right" align="start">
         <button
           class:active={tuning.enabled}
           class="dm-toggle"
@@ -298,12 +324,12 @@
           onclick={() => updateForzaEffect(meta.id, { enabled: !tuning.enabled })}
         ><span></span></button>
       </Tooltip>
-      <Tooltip block text={meta.help} side="bottom" align="start">
+      <Tooltip block class="strip-name" text={meta.help} side="bottom" align="start">
         <div class="dm-channel-name">
           <strong>{meta.label}</strong>
         </div>
       </Tooltip>
-      <Tooltip block text={intensityTooltip(meta, tuning.intensity)} side="bottom" align="center">
+      <Tooltip block class="strip-fader" text={intensityTooltip(meta, tuning.intensity)} side="bottom" align="center">
         <label class="dm-fader">
           <input
             class="dm-range"
@@ -327,7 +353,7 @@
           />
         </label>
       </Tooltip>
-      <Tooltip block text={routeTooltip(tuning.route)} side="bottom" align="end">
+      <Tooltip block class="strip-route" text={routeTooltip(tuning.route)} side="bottom" align="end">
         <label class="dm-route-select-wrap">
           <span>Route</span>
           <select
@@ -923,3 +949,4 @@
     </article>
   {/each}
 </div>
+{/if}
diff --git a/web/src/lib/features/haptics/TriggerCurvesPanel.svelte b/web/src/lib/features/haptics/TriggerCurvesPanel.svelte
index fee1eb6..23d5623 100644
--- a/web/src/lib/features/haptics/TriggerCurvesPanel.svelte
+++ b/web/src/lib/features/haptics/TriggerCurvesPanel.svelte
@@ -48,6 +48,14 @@
   const emptyCurveLive: CurveLive = { liveX: 0, liveY: 100 };
   const noop = () => undefined;
 
+  // Semantic-column rendering (Task 6): 'L2'/'R2' renders a single trigger's
+  // curve editor so each tuning column owns its own instrument; 'both' keeps
+  // the original two-curve block. showCurves/showControls let the canvas park
+  // the shared head + base-feel strip separately without losing them.
+  export let trigger: 'L2' | 'R2' | 'both' = 'both';
+  export let showCurves = true;
+  export let showControls = true;
+
   export let selectedTuningScope: TuningScope = 'none';
   export let snapshot: unknown = null;
   export let baseFeelTestActive = false;
@@ -62,6 +70,12 @@
   export let curveHover: CurveHover = null;
   export let curveDragPoint: CurveDragPoint = null;
 
+  // Saved-curve ghosts (Task 7): when the working draft drifts from the saved
+  // profile, the saved curve renders as a dashed ghost behind the live curve.
+  // null means clean (no ghost).
+  export let l2SavedCurvePath: string | null = null;
+  export let r2SavedCurvePath: string | null = null;
+
   export let l2LivePress = 0;
   export let r2LivePress = 0;
   export let l2From = 0;
@@ -103,6 +117,7 @@
 </script>
 
 <section class="dm-physics" aria-label="Actuation curve tuning">
+  {#if showControls}
   <div class="dm-section-head">
     <div>
       <span>Actuation Engine</span>
@@ -135,8 +150,11 @@
       {/if}
     </div>
   </div>
+  {/if}
 
+  {#if showCurves}
   <div class="dm-curve-stack">
+    {#if trigger !== 'R2'}
     <article class="dm-curve-module" aria-label="L2 brake actuation curve">
       <div class="dm-module-title">
         <div>
@@ -165,6 +183,9 @@
           <rect class="curve-range-fill" x={l2CurveShape.rangeStart} y="96" width={l2CurveShape.rangeWidth} height="2.5" rx="1.25" />
           <line class="curve-range-edge" x1={l2CurveShape.rangeStart} y1="0" x2={l2CurveShape.rangeStart} y2="100" />
           <line class="curve-range-edge" x1={l2CurveShape.rangeEnd} y1="0" x2={l2CurveShape.rangeEnd} y2="100" />
+          {#if l2SavedCurvePath}
+            <path class="curve-saved-ghost" d={l2SavedCurvePath} />
+          {/if}
           <path class="curve-force" d={l2CurveShape.path} />
           {#if curveHover?.side === 'l2'}
             <line class="curve-crosshair" x1={curveHover.left.toFixed(2)} y1="0" x2={curveHover.left.toFixed(2)} y2="100" />
@@ -233,7 +254,9 @@
         </div>
       </div>
     </article>
+    {/if}
 
+    {#if trigger !== 'L2'}
     <article class="dm-curve-module" aria-label="R2 throttle actuation curve">
       <div class="dm-module-title">
         <div>
@@ -256,6 +279,9 @@
           <rect class="curve-range-fill" x={r2CurveShape.rangeStart} y="96" width={r2CurveShape.rangeWidth} height="2.5" rx="1.25" />
           <line class="curve-range-edge" x1={r2CurveShape.rangeStart} y1="0" x2={r2CurveShape.rangeStart} y2="100" />
           <line class="curve-range-edge" x1={r2CurveShape.rangeEnd} y1="0" x2={r2CurveShape.rangeEnd} y2="100" />
+          {#if r2SavedCurvePath}
+            <path class="curve-saved-ghost" d={r2SavedCurvePath} />
+          {/if}
           <path class="curve-force" d={r2CurveShape.path} />
           {#if curveHover?.side === 'r2'}
             <line class="curve-crosshair" x1={curveHover.left.toFixed(2)} y1="0" x2={curveHover.left.toFixed(2)} y2="100" />
@@ -324,8 +350,11 @@
         </div>
       </div>
     </article>
+    {/if}
   </div>
+  {/if}
 
+  {#if showControls}
   <div class="dm-parameter-strip" aria-label="Base force and light routing">
     <Tooltip block text={triggerEffectHelp[triggerEffect] ?? 'Selects the base adaptive trigger behavior.'} side="top" align="start">
       <label>
@@ -364,4 +393,5 @@
       </label>
     </Tooltip>
   </div>
+  {/if}
 </section>
diff --git a/web/src/lib/features/haptics/hapticsModel.ts b/web/src/lib/features/haptics/hapticsModel.ts
index eeea08b..bd22525 100644
--- a/web/src/lib/features/haptics/hapticsModel.ts
+++ b/web/src/lib/features/haptics/hapticsModel.ts
@@ -1,4 +1,8 @@
-import type { ForzaEffectRoute, TriggerCurvePoint } from '../../types';
+import type { ForzaBodyRumbleMode, ForzaEffectRoute, TriggerCurvePoint } from '../../types';
+
+// Semantic tuning columns (Task 6): effects group by what is being tuned —
+// brake, throttle, road feel, or lights — never by control type.
+export type TuningColumnId = 'brake' | 'throttle' | 'road' | 'lights';
 
 export type ForzaEffectMeta = {
   id: string;
@@ -8,6 +12,8 @@ export type ForzaEffectMeta = {
   defaultIntensity: number;
   defaultRoute: ForzaEffectRoute;
   help: string;
+  /** Tuning canvas column. Omitted: Light-group effects land in Lights, everything else in Road feel. */
+  column?: TuningColumnId;
 };
 
 export type LightbarColorTarget = 'lightbar' | 'rpm';
@@ -25,6 +31,15 @@ export const LIGHTBAR_COLOR_PRESETS = [
   '#facc15'
 ];
 
+// Shared profile defaults: the fallback values every config reader/writer
+// (profileDraft signature, saved rail diff, App's applyEditableConfig) must
+// agree on when a saved profile omits a field.
+export const DEFAULT_LIGHTBAR_COLOR = '#4cc9f0';
+export const DEFAULT_REDLINE_COLOR = '#ff3a2e';
+export const DEFAULT_LIGHTBAR_BRIGHTNESS = 72;
+export const DEFAULT_BODY_FEEL = 'Balanced';
+export const DEFAULT_BODY_RUMBLE_MODE: ForzaBodyRumbleMode = 'native_passthrough';
+
 export const TRIGGER_CURVE_POINT_MIN = 4;
 export const TRIGGER_CURVE_POINT_MAX = 8;
 export const TRIGGER_CURVE_SAMPLE_POSITIONS = Array.from({ length: 101 }, (_, index) => index / 100);
diff --git a/web/src/lib/features/haptics/hapticsOptions.ts b/web/src/lib/features/haptics/hapticsOptions.ts
index 8c44a95..f8515f2 100644
--- a/web/src/lib/features/haptics/hapticsOptions.ts
+++ b/web/src/lib/features/haptics/hapticsOptions.ts
@@ -1,5 +1,5 @@
 import type { ForzaAbsMode, ForzaAbsSlipSource, ForzaBodyRumbleMode, ForzaEffectRoute } from '../../types';
-import type { ForzaEffectMeta } from './hapticsModel';
+import type { ForzaEffectMeta, TuningColumnId } from './hapticsModel';
 export const forzaRoutes: Array<{ value: ForzaEffectRoute; label: string }> = [
     { value: 'body_both', label: 'Both grips' },
     { value: 'body_left', label: 'Left grip' },
@@ -155,6 +155,7 @@ export const forzaAbsSlipSourceOptions: Array<{ value: ForzaAbsSlipSource; label
 export const forzaEffectMetas: ForzaEffectMeta[] = [
     {
       id: 'brake_resistance',
+      column: 'brake',
       label: 'Brake pressure',
       signal: 'input.brake',
       group: 'Trigger',
@@ -164,7 +165,8 @@ export const forzaEffectMetas: ForzaEffectMeta[] = [
     },
     {
       id: 'abs_slip_pulse',
-      label: 'ABS / front slip',
+      column: 'brake',
+      label: 'ABS pulse',
       signal: 'wheel.slip.front_max',
       group: 'Trigger',
       defaultIntensity: 100,
@@ -173,6 +175,7 @@ export const forzaEffectMetas: ForzaEffectMeta[] = [
     },
     {
       id: 'handbrake_wall',
+      column: 'brake',
       label: 'Handbrake wall',
       signal: 'input.handbrake',
       group: 'Trigger',
@@ -182,6 +185,7 @@ export const forzaEffectMetas: ForzaEffectMeta[] = [
     },
     {
       id: 'throttle_resistance',
+      column: 'throttle',
       label: 'Throttle load',
       signal: 'input.throttle',
       group: 'Trigger',
@@ -191,7 +195,8 @@ export const forzaEffectMetas: ForzaEffectMeta[] = [
     },
     {
       id: 'gear_shift_thump',
-      label: 'Paddle shift thump',
+      column: 'throttle',
+      label: 'Gear-shift kick',
       signal: 'drivetrain.shift_pulse',
       group: 'Cue',
       defaultIntensity: FORZA_SHIFT_THUMP_DEFAULT_INTENSITY,
@@ -200,7 +205,8 @@ export const forzaEffectMetas: ForzaEffectMeta[] = [
     },
     {
       id: 'rev_limiter_buzz',
-      label: 'Rev limiter buzz',
+      column: 'throttle',
+      label: 'Rev-limiter buzz',
       signal: 'vehicle.rpm_ratio',
       group: 'Cue',
       defaultIntensity: 120,
@@ -218,7 +224,7 @@ export const forzaEffectMetas: ForzaEffectMeta[] = [
     },
     {
       id: 'rumble_strip',
-      label: 'Rumble strips',
+      label: 'Surface detail',
       signal: 'surface.rumble_strip.max',
       group: 'Body',
       defaultIntensity: 72,
@@ -245,7 +251,7 @@ export const forzaEffectMetas: ForzaEffectMeta[] = [
     },
     {
       id: 'suspension_impact',
-      label: 'Suspension / impact',
+      label: 'Suspension impact',
       signal: 'suspension.impact_pulse',
       group: 'Body',
       defaultIntensity: 115,
@@ -254,6 +260,7 @@ export const forzaEffectMetas: ForzaEffectMeta[] = [
     },
     {
       id: 'rpm_leds',
+      column: 'lights',
       label: 'Redline ramp',
       signal: 'vehicle.rpm_ratio',
       group: 'Light',
@@ -262,3 +269,13 @@ export const forzaEffectMetas: ForzaEffectMeta[] = [
       help: 'Gradually warms the lightbar toward the redline color before the limiter, then blinks the lightbar and player LEDs at the rev-limiter buzz threshold.'
     }
   ];
+
+// Semantic tuning columns (Task 6): effects group by what is being tuned —
+// brake, throttle, road feel, or lights — never by control type. Each meta
+// carries its own compiler-checked `column`; effects without an explicit
+// column land in Road feel (Lights for Light-group effects); the canvas
+// teaches "More effects appear here for games that send them."
+export type { TuningColumnId } from './hapticsModel';
+
+export const tuningColumnForEffect = (meta: ForzaEffectMeta): TuningColumnId =>
+  meta.column ?? (meta.group === 'Light' ? 'lights' : 'road');
diff --git a/web/src/lib/features/profiles/ProfileConsole.svelte b/web/src/lib/features/profiles/ProfileConsole.svelte
deleted file mode 100644
index 08e0c71..0000000
--- a/web/src/lib/features/profiles/ProfileConsole.svelte
+++ /dev/null
@@ -1,159 +0,0 @@
-<script lang="ts">
-  import { CopyPlus, RotateCcw, Save } from '@lucide/svelte';
-  import Tooltip from '../../../components/Tooltip.svelte';
-  import type { ProfileSummary } from '../../types';
-
-  export let profileContextProfiles: ProfileSummary[] = [];
-  export let activeProfileId = '';
-  export let selectedOverrideProfileId = '';
-  export let selectedActionProfile: ProfileSummary | null | undefined = null;
-  export let selectedGameName = 'game';
-  export let canRenameSelectedProfile = false;
-  export let canDeleteSelectedProfile = false;
-  export let profileConfigDirty = false;
-  export let profileSaveBusy = false;
-  export let profileFileBusy = false;
-  export let profileSaveAsBusy = false;
-  export let profileRenameBusy = false;
-  export let saveAsProfileOpen = false;
-  export let saveAsProfileName = '';
-  export let renameProfileId = '';
-  export let renameProfileName = '';
-  export let onSelectProfile: (profileId: string) => void | Promise<void> = () => {};
-  export let onImportFile: (event: Event) => void | Promise<void> = () => {};
-  export let onExportProfile: () => void | Promise<void> = () => {};
-  export let onBeginSaveAs: () => void = () => {};
-  export let onCancelSaveAs: () => void = () => {};
-  export let onSubmitSaveAs: () => void | Promise<void> = () => {};
-  export let onSaveAsKeydown: (event: KeyboardEvent) => void = () => {};
-  export let onBeginRename: () => void = () => {};
-  export let onCancelRename: () => void = () => {};
-  export let onSubmitRename: () => void | Promise<void> = () => {};
-  export let onRenameKeydown: (event: KeyboardEvent) => void = () => {};
-  export let onDeleteProfile: (profile: ProfileSummary) => void | Promise<void> = () => {};
-  export let onRestoreDefaults: () => void | Promise<void> = () => {};
-  export let onSaveProfile: () => void | Promise<void> = () => {};
-
-  let importInput: HTMLInputElement | undefined;
-
-  const profileOptionLabel = (profile: ProfileSummary) => {
-    if (profile.scope === 'Game') return `${profile.name} / ${selectedGameName}`;
-    if (profile.id === activeProfileId) return `${profile.name} / live`;
-    return profile.name;
-  };
-
-  $: profileOptions = profileContextProfiles.map((profile) => ({
-    profile,
-    label: profileOptionLabel(profile)
-  }));
-
-  const requestImport = () => {
-    if (!profileFileBusy) importInput?.click();
-  };
-</script>
-
-<div class="dm-profile-console">
-  <div class="dm-profile-line">
-    <label>
-      <span>Editing Profile</span>
-      <select
-        value={selectedOverrideProfileId || activeProfileId}
-        disabled={!profileContextProfiles.length}
-        onchange={(event) => void onSelectProfile(event.currentTarget.value)}
-      >
-        {#each profileOptions as option}
-          <option value={option.profile.id}>{option.label}</option>
-        {/each}
-      </select>
-    </label>
-    <div class="dm-action-row">
-      <Tooltip text="Import a DSCC profile JSON file into the selected scope." side="top" align="center">
-        <button class="dm-mini-button" type="button" onclick={requestImport}>Import</button>
-      </Tooltip>
-      <input bind:this={importInput} class="ops-hidden-file" type="file" accept="application/json,.json,.dscc-profile" onchange={(event) => void onImportFile(event)} />
-      <Tooltip text="Export the selected profile as a DSCC profile JSON file." side="top" align="center">
-        <button class="dm-mini-button" type="button" disabled={!activeProfileId || profileFileBusy} onclick={() => void onExportProfile()}>Export</button>
-      </Tooltip>
-      <Tooltip text="Save the current tuning into a new custom profile without changing the built-in template." side="top" align="center">
-        <button
-          class="dm-mini-button wide"
-          type="button"
-          disabled={!selectedActionProfile || profileSaveAsBusy}
-          onclick={onBeginSaveAs}
-        ><CopyPlus size={14} /> Save As</button>
-      </Tooltip>
-      <Tooltip text={canRenameSelectedProfile ? 'Rename the selected custom profile.' : 'Built-in profiles cannot be renamed. Use Save As first.'} side="top" align="center">
-        <button
-          class="dm-mini-button"
-          type="button"
-          disabled={!canRenameSelectedProfile || profileRenameBusy || !selectedActionProfile}
-          onclick={onBeginRename}
-        >Rename</button>
-      </Tooltip>
-      <Tooltip text={canDeleteSelectedProfile ? 'Delete the selected custom profile from DSCC.' : 'Built-in profiles cannot be deleted.'} side="top" align="center">
-        <button
-          class="dm-mini-button"
-          type="button"
-          disabled={!canDeleteSelectedProfile || profileFileBusy || !selectedActionProfile}
-          onclick={() => selectedActionProfile && void onDeleteProfile(selectedActionProfile)}
-        >Delete</button>
-      </Tooltip>
-      <Tooltip text="Restore the selected profile's trigger, haptic, and lightbar values to defaults." side="top" align="center">
-        <button class="dm-mini-button" type="button" onclick={() => void onRestoreDefaults()}><RotateCcw size={14} /> Reset</button>
-      </Tooltip>
-      <Tooltip text={profileConfigDirty ? 'Save the current tuning to the selected profile.' : 'No unsaved tuning changes.'} side="top" align="end">
-        <button
-          class:dirty={profileConfigDirty}
-          class="dm-apply-button"
-          type="button"
-          disabled={!selectedActionProfile || profileSaveBusy || !profileConfigDirty}
-          onclick={() => void onSaveProfile()}
-        ><Save size={14} /> {profileSaveBusy ? 'Saving' : 'Save'}</button>
-      </Tooltip>
-    </div>
-  </div>
-
-  {#if saveAsProfileOpen}
-    <div class="dm-profile-rename">
-      <label>
-        <span>Save As</span>
-        <input
-          bind:value={saveAsProfileName}
-          disabled={profileSaveAsBusy}
-          maxlength="80"
-          spellcheck="false"
-          onkeydown={onSaveAsKeydown}
-          aria-label="New profile name"
-        />
-      </label>
-      <div class="dm-action-row">
-        <button class="dm-mini-button" type="button" disabled={profileSaveAsBusy} onclick={onCancelSaveAs}>Cancel</button>
-        <button class="dm-mini-button primary" type="button" disabled={profileSaveAsBusy || !saveAsProfileName.trim()} onclick={() => void onSubmitSaveAs()}>
-          {profileSaveAsBusy ? 'Saving' : 'Create'}
-        </button>
-      </div>
-    </div>
-  {/if}
-
-  {#if renameProfileId}
-    <div class="dm-profile-rename">
-      <label>
-        <span>Name</span>
-        <input
-          bind:value={renameProfileName}
-          disabled={profileRenameBusy}
-          maxlength="80"
-          spellcheck="false"
-          onkeydown={onRenameKeydown}
-          aria-label="Profile name"
-        />
-      </label>
-      <div class="dm-action-row">
-        <button class="dm-mini-button" type="button" disabled={profileRenameBusy} onclick={onCancelRename}>Cancel</button>
-        <button class="dm-mini-button primary" type="button" disabled={profileRenameBusy || !renameProfileName.trim()} onclick={() => void onSubmitRename()}>
-          {profileRenameBusy ? 'Saving' : 'Apply'}
-        </button>
-      </div>
-    </div>
-  {/if}
-</div>
diff --git a/web/src/lib/features/status/StatusView.svelte b/web/src/lib/features/status/StatusView.svelte
new file mode 100644
index 0000000..ff3ec65
--- /dev/null
+++ b/web/src/lib/features/status/StatusView.svelte
@@ -0,0 +1,269 @@
+<script lang="ts">
+  import type {
+    AdapterStatus,
+    ControllerStatus,
+    ProfileSummary,
+    SupportedGame
+  } from '../../types';
+
+  let {
+    controllers = [],
+    controller = undefined,
+    detectedGame = null,
+    detectedGameName = null,
+    activeProfile = undefined,
+    activeProfileName = 'None',
+    overrideActive = false,
+    adapter = undefined,
+    adapters = [],
+    renameActiveId = '',
+    renameName = $bindable(''),
+    renameBusy = false,
+    onBeginRename = () => {},
+    onSubmitRename = () => {},
+    onCancelRename = () => {},
+    onRenameKeydown = () => {},
+    onOpenSetupGuide = () => {}
+  }: {
+    controllers?: ControllerStatus[];
+    controller?: ControllerStatus | undefined;
+    detectedGame?: SupportedGame | null;
+    detectedGameName?: string | null;
+    activeProfile?: ProfileSummary | undefined;
+    activeProfileName?: string;
+    overrideActive?: boolean;
+    adapter?: AdapterStatus | undefined;
+    adapters?: AdapterStatus[];
+    renameActiveId?: string;
+    renameName?: string;
+    renameBusy?: boolean;
+    onBeginRename?: (item: ControllerStatus) => void;
+    onSubmitRename?: () => void | Promise<void>;
+    onCancelRename?: () => void;
+    onRenameKeydown?: (event: KeyboardEvent) => void;
+    onOpenSetupGuide?: () => void | Promise<void>;
+  } = $props();
+
+  type Finding = { id: string; text: string; detail?: string };
+
+  const connectedControllers = $derived(controllers.filter((item) => item.connected));
+  const hasController = $derived(connectedControllers.length > 0);
+  const alias = $derived(controller?.name || controller?.family || 'your controller');
+  const gameName = $derived(detectedGameName ?? detectedGame?.name ?? null);
+  const gameRunning = $derived(Boolean(detectedGame?.running && gameName));
+  const telemetryExpected = $derived(gameRunning && detectedGame?.supportLevel === 'telemetry');
+  const telemetryFresh = $derived(
+    Boolean(adapter && adapter.state === 'running' && adapter.packetRateHz > 0)
+  );
+
+  const findings = $derived.by(() => {
+    const list: Finding[] = [];
+    for (const item of controllers) {
+      if (!item.connected) {
+        list.push({
+          id: `controller-disconnected-${item.id}`,
+          text: `${item.name || item.family} is disconnected.`,
+          detail: 'Reconnect it and its tuned feel comes right back.'
+        });
+      }
+    }
+    if (telemetryExpected && !telemetryFresh) {
+      list.push({
+        id: 'telemetry-quiet',
+        text: `${gameName} is running, but its telemetry has gone quiet.`,
+        detail: adapter?.setupHint || 'Check the game\'s Data Out setting if the feel stops.'
+      });
+    }
+    for (const item of adapters) {
+      if (item.state === 'faulted') {
+        list.push({
+          id: `adapter-faulted-${item.id}`,
+          text: `${item.name} is blocked — another app may be using its port.`,
+          detail: item.setupHint || undefined
+        });
+      }
+    }
+    return list;
+  });
+
+  const dotState = $derived(!hasController ? 'danger' : findings.length ? 'warn' : 'ok');
+  const headline = $derived(
+    !hasController
+      ? 'No controller connected yet.'
+      : findings.length
+        ? 'Something needs your attention.'
+        : 'Everything is working.'
+  );
+  const clause = $derived.by(() => {
+    if (!hasController) return 'Plug in or pair a controller and DSCC takes it from there.';
+    if (gameRunning && telemetryExpected && !telemetryFresh) {
+      return `${gameName} detected, but its telemetry is quiet on ${alias}.`;
+    }
+    if (gameRunning) return `${gameName} detected — tuned feel is live on ${alias}.`;
+    return `${alias} is connected and ready. Tuned feel starts when a supported game does.`;
+  });
+
+  const profileScopeNote = $derived.by(() => {
+    if (!activeProfile) return '';
+    if (activeProfile.scope === 'Game') return 'its Game Profile';
+    if (activeProfile.scope === 'Global') return 'Everyday · Global Profile';
+    return 'built-in';
+  });
+
+  const connectionLine = (item: ControllerStatus): string => {
+    const parts: string[] = [];
+    if (item.connected && item.transport !== 'Unknown') parts.push(item.transport);
+    if (typeof item.battery === 'number' && item.batteryState !== 'unknown') {
+      if (item.batteryState === 'charging') parts.push(`battery ${item.battery}%, charging`);
+      else if (item.batteryState === 'full') parts.push(`battery ${item.battery}%, full`);
+      else parts.push(`battery ${item.battery}%`);
+    }
+    return parts.join(' · ');
+  };
+</script>
+
+<section class="status-view" aria-label="Status">
+  <h1 class="visually-hidden">Status</h1>
+
+  <div class="status-sentence">
+    <span class="status-dot {dotState}" aria-hidden="true"></span>
+    <span class="status-headline">{headline}</span>
+    <span class="status-clause">{clause}</span>
+  </div>
+
+  <div class="status-groups">
+    <div class="status-group">
+      <div class="lbl">Controller</div>
+      {#if controllers.length}
+        <div class="status-surf">
+          {#each controllers as item (item.id)}
+            <div class="status-controller-card">
+              <div class="status-controller-icon" aria-hidden="true">🎮</div>
+              <div class="status-controller-main">
+                {#if renameActiveId === item.id}
+                  <div class="status-rename">
+                    <!-- svelte-ignore a11y_autofocus -->
+                    <input
+                      type="text"
+                      aria-label="Controller name"
+                      bind:value={renameName}
+                      onkeydown={onRenameKeydown}
+                      disabled={renameBusy}
+                      autofocus
+                    />
+                    <button
+                      class="status-link"
+                      type="button"
+                      disabled={renameBusy}
+                      onclick={() => void onSubmitRename()}
+                    >Save</button>
+                    <button
+                      class="status-link mut"
+                      type="button"
+                      disabled={renameBusy}
+                      onclick={onCancelRename}
+                    >Cancel</button>
+                  </div>
+                {:else}
+                  <div class="status-controller-name">
+                    {item.name || item.family}
+                    <span class="status-mut">&middot; {item.family}</span>
+                  </div>
+                {/if}
+                <div class="status-controller-line">
+                  {#if item.connected}
+                    <span class="status-ok"><span aria-hidden="true">&#9679;</span> Connected</span>
+                  {:else}
+                    <span class="status-warn"><span aria-hidden="true">&#9679;</span> Disconnected</span>
+                  {/if}
+                  {#if connectionLine(item)}
+                    &middot; {connectionLine(item)}
+                  {/if}
+                </div>
+              </div>
+              {#if renameActiveId !== item.id}
+                <button
+                  class="status-link"
+                  type="button"
+                  disabled={renameBusy}
+                  onclick={() => onBeginRename(item)}
+                >Rename</button>
+              {/if}
+            </div>
+          {/each}
+        </div>
+        <div class="status-hint">Another controller? Plug it in or pair it and it appears here.</div>
+      {:else}
+        <div class="status-surf status-empty">Plug in or pair a controller and it appears here.</div>
+      {/if}
+    </div>
+
+    <div class="status-group">
+      <div class="lbl">What's active, and why</div>
+      <div class="status-rows">
+        <div class="status-row">
+          <span>Game detected</span>
+          {#if gameRunning}
+            <span>{gameName} <span class="status-ok" aria-hidden="true">&#9679;</span></span>
+          {:else if gameName}
+            <span>{gameName} <span class="status-mut">(installed, not running)</span></span>
+          {:else}
+            <span class="status-mut">None yet</span>
+          {/if}
+        </div>
+        <div class="status-row">
+          <span>Profile in use</span>
+          <span class="status-strong">
+            {activeProfileName}
+            {#if profileScopeNote}
+              <span class="status-mut">({profileScopeNote})</span>
+            {/if}
+            {#if overrideActive}
+              <span class="status-mut">&middot; chosen by you</span>
+            {/if}
+          </span>
+        </div>
+        <div class="status-row">
+          <span>Telemetry</span>
+          {#if telemetryExpected && telemetryFresh}
+            <span class="status-ok">Fresh &middot; driving feel is live</span>
+          {:else if telemetryExpected}
+            <span class="status-warn">Quiet &middot; waiting for game data</span>
+          {:else}
+            <span class="status-mut">Idle until a supported game runs</span>
+          {/if}
+        </div>
+        <div class="status-row">
+          <span>When the game closes</span>
+          <span class="status-mut">Back to Global Profile</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="status-group narrow">
+      <div class="lbl">Needs attention</div>
+      <div class="status-surf">
+        {#if findings.length}
+          {#each findings as finding (finding.id)}
+            <div class="status-finding">
+              <span class="status-warn" aria-hidden="true">&#9679;</span> {finding.text}
+              {#if finding.detail}
+                <div class="status-finding-detail">{finding.detail}</div>
+              {/if}
+              {#if finding.id === 'telemetry-quiet'}
+                <button
+                  class="status-link"
+                  type="button"
+                  onclick={() => void onOpenSetupGuide()}
+                >Open the setup guide</button>
+              {/if}
+            </div>
+          {/each}
+        {:else}
+          <div class="status-finding">Nothing else needs you.</div>
+          <div class="status-finding-detail">This box stays empty when all is well.</div>
+        {/if}
+      </div>
+    </div>
+  </div>
+</section>
diff --git a/web/src/lib/features/tuning/ProfileMenu.svelte b/web/src/lib/features/tuning/ProfileMenu.svelte
new file mode 100644
index 0000000..a964ce7
--- /dev/null
+++ b/web/src/lib/features/tuning/ProfileMenu.svelte
@@ -0,0 +1,316 @@
+<!--
+  Profile cluster extracted from TuningHeader (Task 7 housekeeping, scheduled
+  in the Task 5 review): the profile dropdown menu, the inline save-as/rename
+  name editors, and the hidden import file input. Pure extraction — behavior
+  matches the in-header version: Escape closes with focus returned to the
+  anchor, Tab closes without stealing focus, any outside pointerdown / window
+  scroll / resize closes without focus return, ArrowUp/ArrowDown cycle items.
+
+  The trigger button stays in TuningHeader (it is header chrome); it is passed
+  in as `anchor` for positioning and focus return, and `open` is bindable so
+  the header toggles it.
+-->
+<script lang="ts">
+  import { tick } from 'svelte';
+  import type { ProfileSummary } from '../../types';
+
+  let {
+    open = $bindable(false),
+    anchor = undefined,
+    profiles = [],
+    selectedProfileId = '',
+    activeProfileId = '',
+    selectedActionProfile = null,
+    canRenameSelectedProfile = false,
+    canDeleteSelectedProfile = false,
+    profileConfigDirty = false,
+    profileSaveBusy = false,
+    profileFileBusy = false,
+    profileSaveAsBusy = false,
+    profileRenameBusy = false,
+    saveAsOpen = false,
+    saveAsName = $bindable(''),
+    renameProfileId = '',
+    renameName = $bindable(''),
+    onSelectProfile = () => {},
+    onSaveProfile = () => {},
+    onBeginSaveAs = () => {},
+    onCancelSaveAs = () => {},
+    onSubmitSaveAs = () => {},
+    onSaveAsKeydown = () => {},
+    onBeginRename = () => {},
+    onCancelRename = () => {},
+    onSubmitRename = () => {},
+    onRenameKeydown = () => {},
+    onDeleteProfile = () => {},
+    onRestoreDefaults = () => {},
+    onImportFile = () => {},
+    onExportProfile = () => {}
+  }: {
+    open?: boolean;
+    anchor?: HTMLButtonElement | undefined;
+    profiles?: ProfileSummary[];
+    selectedProfileId?: string;
+    activeProfileId?: string;
+    selectedActionProfile?: ProfileSummary | null;
+    canRenameSelectedProfile?: boolean;
+    canDeleteSelectedProfile?: boolean;
+    profileConfigDirty?: boolean;
+    profileSaveBusy?: boolean;
+    profileFileBusy?: boolean;
+    profileSaveAsBusy?: boolean;
+    profileRenameBusy?: boolean;
+    saveAsOpen?: boolean;
+    saveAsName?: string;
+    renameProfileId?: string;
+    renameName?: string;
+    onSelectProfile?: (profileId: string) => void | Promise<void>;
+    onSaveProfile?: () => void | Promise<void>;
+    onBeginSaveAs?: () => void;
+    onCancelSaveAs?: () => void;
+    onSubmitSaveAs?: () => void | Promise<void>;
+    onSaveAsKeydown?: (event: KeyboardEvent) => void;
+    onBeginRename?: () => void;
+    onCancelRename?: () => void;
+    onSubmitRename?: () => void | Promise<void>;
+    onRenameKeydown?: (event: KeyboardEvent) => void;
+    onDeleteProfile?: (profile: ProfileSummary) => void | Promise<void>;
+    onRestoreDefaults?: () => void | Promise<void>;
+    onImportFile?: (event: Event) => void | Promise<void>;
+    onExportProfile?: () => void | Promise<void>;
+  } = $props();
+
+  let menuLeft = $state(0);
+  let menuTop = $state(0);
+  let menuEl: HTMLDivElement | undefined = $state();
+  let importInput: HTMLInputElement | undefined = $state();
+  let placedFor: HTMLButtonElement | undefined;
+
+  const closeMenu = (returnFocus = true) => {
+    if (!open) return;
+    open = false;
+    if (returnFocus) anchor?.focus();
+  };
+
+  const menuItems = (): HTMLButtonElement[] =>
+    menuEl ? Array.from(menuEl.querySelectorAll<HTMLButtonElement>('button.tuning-menu-item:not(:disabled)')) : [];
+
+  const focusMenuItem = (index: number) => {
+    const items = menuItems();
+    if (!items.length) return;
+    const next = ((index % items.length) + items.length) % items.length;
+    items[next]?.focus();
+  };
+
+  // Place the menu against the anchor and focus the first item when opened.
+  $effect(() => {
+    if (!open || !anchor) {
+      placedFor = undefined;
+      return;
+    }
+    if (placedFor !== anchor) {
+      placedFor = anchor;
+      const rect = anchor.getBoundingClientRect();
+      menuLeft = Math.max(8, Math.min(rect.left, window.innerWidth - 268));
+      menuTop = Math.min(rect.bottom + 6, window.innerHeight - 60);
+      void tick().then(() => focusMenuItem(0));
+    }
+  });
+
+  const handleMenuKeydown = (event: KeyboardEvent) => {
+    if (event.key === 'Escape') {
+      event.preventDefault();
+      closeMenu();
+      return;
+    }
+    if (event.key === 'Tab') {
+      // Close so aria-expanded stays honest, but let Tab move focus naturally.
+      closeMenu(false);
+      return;
+    }
+    if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp') return;
+    event.preventDefault();
+    const items = menuItems();
+    const current = items.indexOf(document.activeElement as HTMLButtonElement);
+    focusMenuItem(current + (event.key === 'ArrowDown' ? 1 : -1));
+  };
+
+  const handleWindowPointerDown = (event: PointerEvent) => {
+    if (!open) return;
+    const target = event.target as Node;
+    if (menuEl?.contains(target)) return;
+    if (anchor?.contains(target)) return;
+    closeMenu(false);
+  };
+
+  // The menu is position: fixed and placed once at open; any scroll or
+  // resize would leave it floating away from the trigger, so just close.
+  $effect(() => {
+    if (!open) return;
+    const closeOnViewportChange = (event: Event) => {
+      // Ignore scrolls that originate inside the menu itself.
+      if (event.target instanceof Node && menuEl?.contains(event.target)) return;
+      closeMenu(false);
+    };
+    window.addEventListener('scroll', closeOnViewportChange, true);
+    window.addEventListener('resize', closeOnViewportChange);
+    return () => {
+      window.removeEventListener('scroll', closeOnViewportChange, true);
+      window.removeEventListener('resize', closeOnViewportChange);
+    };
+  });
+
+  const pickProfile = (profileId: string) => {
+    closeMenu();
+    if (profileId !== selectedProfileId) void onSelectProfile(profileId);
+  };
+
+  const runProfileAction = (action: () => void | Promise<void>) => {
+    closeMenu();
+    void action();
+  };
+
+  const requestImport = () => {
+    closeMenu();
+    if (!profileFileBusy) importInput?.click();
+  };
+
+  const deleteSelectedProfile = () => {
+    const profile = selectedActionProfile;
+    if (profile) runProfileAction(() => onDeleteProfile(profile));
+  };
+</script>
+
+<svelte:window onpointerdown={handleWindowPointerDown} />
+
+{#if saveAsOpen || renameProfileId}
+  <div class="tuning-profile-editor">
+    {#if saveAsOpen}
+      <label>
+        <span>New profile name</span>
+        <input
+          bind:value={saveAsName}
+          disabled={profileSaveAsBusy}
+          maxlength="80"
+          spellcheck="false"
+          aria-label="New profile name"
+          onkeydown={onSaveAsKeydown}
+        />
+      </label>
+      <button class="dm-mini-button" type="button" disabled={profileSaveAsBusy} onclick={onCancelSaveAs}>Cancel</button>
+      <button
+        class="dm-mini-button primary"
+        type="button"
+        disabled={profileSaveAsBusy || !saveAsName.trim()}
+        onclick={() => void onSubmitSaveAs()}
+      >{profileSaveAsBusy ? 'Saving' : 'Create'}</button>
+    {:else}
+      <label>
+        <span>Profile name</span>
+        <input
+          bind:value={renameName}
+          disabled={profileRenameBusy}
+          maxlength="80"
+          spellcheck="false"
+          aria-label="Profile name"
+          onkeydown={onRenameKeydown}
+        />
+      </label>
+      <button class="dm-mini-button" type="button" disabled={profileRenameBusy} onclick={onCancelRename}>Cancel</button>
+      <button
+        class="dm-mini-button primary"
+        type="button"
+        disabled={profileRenameBusy || !renameName.trim()}
+        onclick={() => void onSubmitRename()}
+      >{profileRenameBusy ? 'Saving' : 'Apply'}</button>
+    {/if}
+  </div>
+{/if}
+
+{#if open}
+  <div
+    class="tuning-menu"
+    role="menu"
+    tabindex="-1"
+    aria-label="Profile actions"
+    bind:this={menuEl}
+    style={`left:${menuLeft}px;top:${menuTop}px;`}
+    onkeydown={handleMenuKeydown}
+  >
+    <div class="tuning-menu-label">Profiles</div>
+    {#each profiles as profile (profile.id)}
+      <button
+        class="tuning-menu-item"
+        class:current={profile.id === selectedProfileId}
+        type="button"
+        role="menuitemradio"
+        aria-checked={profile.id === selectedProfileId}
+        onclick={() => pickProfile(profile.id)}
+      >
+        <span class="tuning-menu-item-text">{profile.name}</span>
+        {#if profile.id === activeProfileId}<span class="tuning-menu-item-meta">live</span>{/if}
+      </button>
+    {/each}
+    <div class="tuning-menu-divider" role="separator"></div>
+    <button
+      class="tuning-menu-item"
+      type="button"
+      role="menuitem"
+      disabled={!selectedActionProfile || profileSaveBusy || !profileConfigDirty}
+      onclick={() => runProfileAction(onSaveProfile)}
+    >
+      <span class="tuning-menu-item-text">{profileSaveBusy ? 'Saving…' : 'Save changes'}</span>
+    </button>
+    <button
+      class="tuning-menu-item"
+      type="button"
+      role="menuitem"
+      disabled={!selectedActionProfile || profileSaveAsBusy}
+      onclick={() => runProfileAction(onBeginSaveAs)}
+    >
+      <span class="tuning-menu-item-text">Duplicate as new profile…</span>
+    </button>
+    <button
+      class="tuning-menu-item"
+      type="button"
+      role="menuitem"
+      disabled={!canRenameSelectedProfile || profileRenameBusy}
+      onclick={() => runProfileAction(onBeginRename)}
+    >
+      <span class="tuning-menu-item-text">Rename…</span>
+    </button>
+    <button
+      class="tuning-menu-item"
+      type="button"
+      role="menuitem"
+      disabled={!canDeleteSelectedProfile || profileFileBusy}
+      onclick={deleteSelectedProfile}
+    >
+      <span class="tuning-menu-item-text">Delete</span>
+    </button>
+    <button class="tuning-menu-item" type="button" role="menuitem" onclick={() => runProfileAction(onRestoreDefaults)}>
+      <span class="tuning-menu-item-text">Reset to profile defaults</span>
+    </button>
+    <div class="tuning-menu-divider" role="separator"></div>
+    <button class="tuning-menu-item" type="button" role="menuitem" disabled={profileFileBusy} onclick={requestImport}>
+      <span class="tuning-menu-item-text">Import profile file…</span>
+    </button>
+    <button
+      class="tuning-menu-item"
+      type="button"
+      role="menuitem"
+      disabled={!selectedProfileId || profileFileBusy}
+      onclick={() => runProfileAction(onExportProfile)}
+    >
+      <span class="tuning-menu-item-text">Export profile file</span>
+    </button>
+  </div>
+{/if}
+
+<input
+  bind:this={importInput}
+  class="ops-hidden-file"
+  type="file"
+  accept="application/json,.json,.dscc-profile"
+  onchange={(event) => void onImportFile(event)}
+/>
diff --git a/web/src/lib/features/tuning/SavedRail.svelte b/web/src/lib/features/tuning/SavedRail.svelte
new file mode 100644
index 0000000..d7da522
--- /dev/null
+++ b/web/src/lib/features/tuning/SavedRail.svelte
@@ -0,0 +1,163 @@
+<!--
+  Saved rail (Task 7; layout truth: tuning-canvas-v9 mockup).
+
+  The rail is furniture: fixed --saved-rail-w wide, sticky, docked right of
+  .canvas-grid inside TuningCanvas's .work-and-rail flex wrapper. It never
+  participates in column wrapping. Below 900px the rail hides and this
+  component instead renders a bottom-docked bar (only while dirty) that
+  expands to the full diff list on tap.
+
+  Safety framing (spec §12): Preview feel is always captioned exactly
+  "3s · nothing saved"; Save/Discard say in plain words what they touch.
+-->
+<script lang="ts">
+  import { unsavedChangeCount, type SavedDiffRow } from './savedDiff';
+
+  let {
+    profileName = 'profile',
+    rows = [],
+    dirty = false,
+    previewActive = false,
+    previewBusy = false,
+    previewDisabled = false,
+    saveBusy = false,
+    canSave = false,
+    onPreviewFeel = () => {},
+    onSave = () => {},
+    onDiscard = () => {}
+  }: {
+    profileName?: string;
+    rows?: SavedDiffRow[];
+    /**
+     * Signature-based dirtiness from App (profileConfigDirty). It covers more
+     * fields than the rail rows do (input mode, buttons, input bridge,
+     * profile assignments), so it can be true while every row is clean.
+     */
+    dirty?: boolean;
+    previewActive?: boolean;
+    previewBusy?: boolean;
+    previewDisabled?: boolean;
+    saveBusy?: boolean;
+    canSave?: boolean;
+    onPreviewFeel?: () => void | Promise<void>;
+    onSave?: () => void | Promise<void>;
+    onDiscard?: () => void;
+  } = $props();
+
+  let barExpanded = $state(false);
+
+  const dirtyCount = $derived(unsavedChangeCount(rows));
+  const anyDirty = $derived(dirty || dirtyCount > 0);
+  // Dirty by signature only: the edits live outside the rail's rows.
+  const outsideOnly = $derived(dirty && dirtyCount === 0);
+
+  // Collapse the expanded phone list once everything is saved or discarded.
+  $effect(() => {
+    if (!anyDirty) barExpanded = false;
+  });
+
+  const changeSummary = $derived(
+    outsideOnly ? 'Unsaved changes' : `${dirtyCount} unsaved change${dirtyCount === 1 ? '' : 's'}`
+  );
+</script>
+
+{#snippet diffRows()}
+  {#each rows as item (item.id)}
+    <div class="saved-row" class:dirty={item.dirty}>
+      <span class="saved-row-label">{item.label}</span>
+      <span class="saved-row-value">
+        {#if item.dirty && item.savedValue !== item.currentValue}
+          <s class="saved-row-was">{item.savedValue}</s>
+          <span class="saved-row-now">→ {item.currentValue}</span>
+        {:else if item.dirty}
+          <!-- Group summaries ("2 of 5 edited") have no single saved value to strike. -->
+          <span class="saved-row-now">{item.currentValue}</span>
+        {:else}
+          <span class="saved-row-saved">{item.savedValue}</span>
+        {/if}
+      </span>
+    </div>
+  {/each}
+  {#if outsideOnly}
+    <div class="saved-row">
+      <span class="saved-row-label saved-row-saved">Changes outside this panel are unsaved.</span>
+    </div>
+  {/if}
+{/snippet}
+
+{#snippet actionButtons()}
+  <button
+    class="saved-save-button"
+    type="button"
+    disabled={!canSave || saveBusy}
+    title={`Writes the current values into ${profileName}. Until then the controller follows your tweaks but the profile keeps its saved values.`}
+    onclick={() => void onSave()}
+  >{saveBusy ? 'Saving…' : 'Save changes'}</button>
+  <button
+    class="saved-discard-button"
+    type="button"
+    disabled={!anyDirty}
+    title={`Throws away the tweaks and puts back what ${profileName} has saved.`}
+    onclick={onDiscard}
+  >Discard</button>
+{/snippet}
+
+<aside class="saved-rail" aria-label="Saved profile values">
+  <div class="saved-rail-title">Saved in {profileName}</div>
+  <div class="saved-rail-rows">
+    {@render diffRows()}
+  </div>
+  <div class="saved-rail-foot">
+    <div class="saved-preview-row">
+      <button
+        class="saved-preview-button"
+        class:active={previewActive}
+        type="button"
+        aria-pressed={previewActive}
+        disabled={previewBusy || previewDisabled}
+        onclick={() => void onPreviewFeel()}
+      >{previewActive ? 'Previewing…' : 'Preview feel'}</button>
+      <span class="saved-preview-note">3s · nothing saved</span>
+    </div>
+    <div class="saved-rail-actions">
+      {@render actionButtons()}
+    </div>
+  </div>
+</aside>
+
+{#if anyDirty}
+  <div class="saved-mobile-bar" role="region" aria-label="Unsaved changes">
+    {#if barExpanded}
+      <div class="saved-mobile-rows">
+        {@render diffRows()}
+        <div class="saved-preview-row">
+          <button
+            class="saved-preview-button"
+            class:active={previewActive}
+            type="button"
+            aria-pressed={previewActive}
+            disabled={previewBusy || previewDisabled}
+            onclick={() => void onPreviewFeel()}
+          >{previewActive ? 'Previewing…' : 'Preview feel'}</button>
+          <span class="saved-preview-note">3s · nothing saved</span>
+        </div>
+      </div>
+    {/if}
+    <div class="saved-mobile-summary">
+      <button
+        class="saved-mobile-toggle"
+        type="button"
+        aria-expanded={barExpanded}
+        onclick={() => {
+          barExpanded = !barExpanded;
+        }}
+      >
+        <strong>{changeSummary}</strong>
+        <span>· tap to compare</span>
+      </button>
+      <div class="saved-mobile-actions">
+        {@render actionButtons()}
+      </div>
+    </div>
+  </div>
+{/if}
diff --git a/web/src/lib/features/tuning/SetupGuide.svelte b/web/src/lib/features/tuning/SetupGuide.svelte
new file mode 100644
index 0000000..2b2ae8d
--- /dev/null
+++ b/web/src/lib/features/tuning/SetupGuide.svelte
@@ -0,0 +1,200 @@
+<script lang="ts">
+  import { deriveSetupModel, TELEMETRY_TARGET_IP } from './setupRequirements';
+  import type { SupportedGame } from '../../types';
+
+  // Per-game setup walkthrough (Task 8). Rendered as a CANVAS STATE: it
+  // replaces the tuning grid until the game's requirements verify, and can be
+  // re-entered any time from the telemetry chip or the game dropdown.
+  // Verification is passive — the LISTENING box flips green by itself when
+  // packets arrive and the canvas swaps back in without a click.
+
+  let {
+    game,
+    telemetryFresh = false,
+    verified = false,
+    port = 5300,
+    packetRateHz = 0,
+    adapterName = '',
+    adapterHint = '',
+    onVerified = () => {},
+    onStartTuning = () => {}
+  }: {
+    game: SupportedGame;
+    telemetryFresh?: boolean;
+    verified?: boolean;
+    port?: number;
+    packetRateHz?: number;
+    adapterName?: string;
+    adapterHint?: string;
+    onVerified?: () => void;
+    onStartTuning?: () => void;
+  } = $props();
+
+  const model = $derived(deriveSetupModel({ game, telemetryFresh, verified, port }));
+
+  // Passive verification: the first fresh packets complete setup on their
+  // own. A short green beat on the LISTENING box, then the parent swaps the
+  // tuning canvas in. Manual re-entry (already verified) never auto-closes.
+  const VERIFY_SWAP_DELAY_MS = 900;
+  $effect(() => {
+    if (!telemetryFresh || verified || game.supportLevel !== 'telemetry') return;
+    const timer = window.setTimeout(() => onVerified(), VERIFY_SWAP_DELAY_MS);
+    return () => window.clearTimeout(timer);
+  });
+
+  // Copy buttons: clipboard API first, hidden-textarea fallback (same graceful
+  // degradation the support bundle copy uses), calm inline failure note last.
+  let copiedValue = $state('');
+  let copyFailed = $state(false);
+  let copyResetTimer = 0;
+
+  const legacyCopy = (value: string): boolean => {
+    const area = document.createElement('textarea');
+    area.value = value;
+    area.setAttribute('readonly', '');
+    area.style.position = 'fixed';
+    area.style.opacity = '0';
+    document.body.appendChild(area);
+    area.select();
+    let ok = false;
+    try {
+      ok = document.execCommand('copy');
+    } catch {
+      ok = false;
+    }
+    area.remove();
+    return ok;
+  };
+
+  const copyValue = async (value: string) => {
+    let ok = false;
+    try {
+      if (navigator.clipboard?.writeText) {
+        await navigator.clipboard.writeText(value);
+        ok = true;
+      } else {
+        ok = legacyCopy(value);
+      }
+    } catch {
+      ok = legacyCopy(value);
+    }
+    copiedValue = ok ? value : '';
+    copyFailed = !ok;
+    window.clearTimeout(copyResetTimer);
+    copyResetTimer = window.setTimeout(() => {
+      copiedValue = '';
+      copyFailed = false;
+    }, 1600);
+  };
+
+  $effect(() => {
+    return () => {
+      window.clearTimeout(copyResetTimer);
+    };
+  });
+
+  const stepNumber = (index: number) => index + 1;
+</script>
+
+<section class="setup-guide" aria-label={`Setup guide for ${game.name}`}>
+  {#if model.required}
+    <header class="setup-guide-head">
+      <h2>One-time setup for {game.name}</h2>
+      <p class="setup-guide-sub">
+        {#if verified}
+          Already verified — these are the values DSCC is listening with.
+        {:else}
+          About 2 minutes, once. Then it's automatic forever.
+        {/if}
+      </p>
+    </header>
+
+    <div class="setup-guide-grid">
+      <ol class="setup-steps" role="list">
+        {#each model.steps as step, index (step.id)}
+          <li class="setup-step" data-state={step.state}>
+            <span class="setup-stepnum" class:done={step.state === 'done'} class:now={step.state === 'now'} aria-hidden="true">
+              {step.state === 'done' ? '✓' : stepNumber(index)}
+            </span>
+            <div class="setup-step-body">
+              <div class="setup-step-title" class:settled={step.state !== 'now'}>
+                {step.title}
+                <span class="visually-hidden">
+                  {step.state === 'done' ? ' — done' : step.state === 'now' ? ' — current step' : ''}
+                </span>
+              </div>
+              <div class="setup-step-detail">
+                {step.detail}{#if step.menuPath}<b>{step.menuPath}</b>{step.detailAfterPath ?? ''}{/if}
+              </div>
+              {#if step.copyValues?.length}
+                <div class="setup-copy-card">
+                  {#each step.copyValues as item (item.label)}
+                    <div class="setup-copy-row">
+                      <span class="setup-copy-label">{item.label}</span>
+                      <code class="setup-kbd">{item.value}</code>
+                      <button class="setup-copy-button" type="button" onclick={() => void copyValue(item.value)}>
+                        {copiedValue === item.value ? 'copied ✓' : 'copy'}
+                      </button>
+                    </div>
+                  {/each}
+                  {#if copyFailed}
+                    <div class="setup-copy-fallback" role="status">Copy is blocked in this browser — select the value and copy it yourself.</div>
+                  {/if}
+                </div>
+              {/if}
+            </div>
+          </li>
+        {/each}
+      </ol>
+
+      <aside class="setup-listening" class:ok={model.fresh} aria-live="polite">
+        <span class="setup-lbl">Listening</span>
+        <div class="setup-listening-line">
+          <span class="setup-listening-dot" aria-hidden="true"></span>
+          {#if model.fresh}
+            <span>Packets arriving on port {model.port}{packetRateHz > 0 ? ` · ${Math.round(packetRateHz)} Hz` : ''}</span>
+          {:else}
+            <span>Waiting on port {model.port}…</span>
+          {/if}
+        </div>
+        <p class="setup-listening-note">
+          {#if model.fresh && !verified}
+            Data arrived — setup is complete. Opening the tuning canvas…
+          {:else if model.fresh}
+            Telemetry is fresh. The driving feel is live.
+          {:else}
+            Nothing has arrived yet. That's expected until you finish step 2 and start driving.
+            This box turns green by itself — no refresh, no button.
+          {/if}
+        </p>
+        <details class="setup-stuck">
+          <summary>Stuck? Common {game.name} fixes</summary>
+          <ul>
+            <li>Data Out only sends while you're driving — menus stay silent.</li>
+            <li>Double-check the in-game values: IP <code class="setup-kbd">{TELEMETRY_TARGET_IP}</code>, port <code class="setup-kbd">{model.port}</code>.</li>
+            <li>If another app is using port {model.port}, close it and re-enter a driving session.</li>
+            <li>The feed stays on this PC — packets go to {TELEMETRY_TARGET_IP} and never leave your machine.</li>
+          </ul>
+          {#if adapterHint}
+            <p class="setup-adapter-hint">{adapterName ? `${adapterName}: ` : ''}{adapterHint}</p>
+          {/if}
+        </details>
+      </aside>
+    </div>
+  {:else}
+    <header class="setup-guide-head">
+      <span class="setup-zero-chip">● No setup needed</span>
+      <h2>{game.name} is ready when you are</h2>
+      <p class="setup-guide-sub">
+        DSCC detects this game on its own. Start the game and your tuned feel loads with it —
+        nothing to configure.
+      </p>
+    </header>
+    <div class="setup-pretune">
+      <p>Meanwhile, you can pre-tune its profile with base feel — no game required.</p>
+      <button class="setup-pretune-button" type="button" onclick={() => void onStartTuning()}>
+        Start tuning →
+      </button>
+    </div>
+  {/if}
+</section>
diff --git a/web/src/lib/features/tuning/TuningCanvas.svelte b/web/src/lib/features/tuning/TuningCanvas.svelte
new file mode 100644
index 0000000..3ae20f5
--- /dev/null
+++ b/web/src/lib/features/tuning/TuningCanvas.svelte
@@ -0,0 +1,56 @@
+<!--
+  Tuning canvas — semantic columns (layout truth: tuning-canvas-v9 mockup).
+  Columns group by WHAT IS BEING TUNED (Brake / Throttle / Road feel / Lights),
+  never by control type. Extra width grows the trigger-curve instruments only;
+  small columns and sliders keep intrinsic caps so no region stretches dead.
+
+  Task 7: `.canvas-grid` lives inside the `.work-and-rail` flex wrapper with
+  the saved rail (slot "rail") docked beside it. The rail is furniture — fixed
+  width, sticky, outside the column wrap; only the grid reflows.
+
+  The `below` slot parks content that has not been re-homed yet (Tasks 8-10
+  move it); nothing previously rendered may be lost.
+-->
+
+<section class="tuning-canvas" aria-label="Tuning canvas">
+  <div class="work-and-rail">
+    <div class="canvas-grid">
+      <section class="col-trigger" aria-label="Brake tuning">
+        <div class="lbl">Brake · L2</div>
+        <div class="canvas-col-body">
+          <slot name="brake" />
+        </div>
+      </section>
+
+      <section class="col-trigger" aria-label="Throttle tuning">
+        <div class="lbl">Throttle · R2</div>
+        <div class="canvas-col-body">
+          <slot name="throttle" />
+        </div>
+      </section>
+
+      <section class="col-small" aria-label="Road feel tuning">
+        <div class="lbl">Road feel</div>
+        <div class="canvas-col-body">
+          <slot name="road" />
+        </div>
+        <p class="canvas-hint">More effects appear here for games that send them.</p>
+      </section>
+
+      <section class="col-small" aria-label="Lights tuning">
+        <div class="lbl">Lights</div>
+        <div class="canvas-col-body">
+          <slot name="lights" />
+        </div>
+      </section>
+    </div>
+
+    <slot name="rail" />
+  </div>
+
+  {#if $$slots.below}
+    <div class="canvas-below">
+      <slot name="below" />
+    </div>
+  {/if}
+</section>
diff --git a/web/src/lib/features/tuning/TuningHeader.svelte b/web/src/lib/features/tuning/TuningHeader.svelte
new file mode 100644
index 0000000..7b43f55
--- /dev/null
+++ b/web/src/lib/features/tuning/TuningHeader.svelte
@@ -0,0 +1,442 @@
+<script lang="ts">
+  import { tick } from 'svelte';
+  import InitialBadge from '../../../components/InitialBadge.svelte';
+  import ProfileMenu from './ProfileMenu.svelte';
+  import { gameAccentColor, gameArtwork } from '../games/gamePresentation';
+  import { controllerModelText } from '../../controllerDisplay';
+  import {
+    buildGameSelectModel,
+    telemetryChipState,
+    type GameSelectEntry,
+    type TuningScopeKind
+  } from './gameSelect';
+  import type { ControllerStatus, ProfileSummary, SupportedGame } from '../../types';
+
+  let {
+    scope = 'global',
+    selectedGame = null,
+    discoveredGames = [],
+    adapterRunning = false,
+    packetRateHz = 0,
+    setupVerified = true,
+    setupGuideOpen = false,
+    controller = undefined,
+    profiles = [],
+    activeProfileId = '',
+    selectedOverrideProfileId = '',
+    selectedActionProfile = null,
+    canRenameSelectedProfile = false,
+    canDeleteSelectedProfile = false,
+    profileConfigDirty = false,
+    unsavedChangeCount = 0,
+    profileSaveBusy = false,
+    profileFileBusy = false,
+    profileSaveAsBusy = false,
+    profileRenameBusy = false,
+    saveAsOpen = false,
+    saveAsName = $bindable(''),
+    renameProfileId = '',
+    renameName = $bindable(''),
+    onSelectGlobal = () => {},
+    onSelectGame = () => {},
+    onOpenAddGame = () => {},
+    onToggleSetupGuide = () => {},
+    onOpenSetupGuide = () => {},
+    onSelectProfile = () => {},
+    onSaveProfile = () => {},
+    onBeginSaveAs = () => {},
+    onCancelSaveAs = () => {},
+    onSubmitSaveAs = () => {},
+    onSaveAsKeydown = () => {},
+    onBeginRename = () => {},
+    onCancelRename = () => {},
+    onSubmitRename = () => {},
+    onRenameKeydown = () => {},
+    onDeleteProfile = () => {},
+    onRestoreDefaults = () => {},
+    onImportFile = () => {},
+    onExportProfile = () => {}
+  }: {
+    scope?: TuningScopeKind;
+    selectedGame?: SupportedGame | null;
+    discoveredGames?: SupportedGame[];
+    adapterRunning?: boolean;
+    packetRateHz?: number;
+    setupVerified?: boolean;
+    setupGuideOpen?: boolean;
+    controller?: ControllerStatus | undefined;
+    profiles?: ProfileSummary[];
+    activeProfileId?: string;
+    selectedOverrideProfileId?: string;
+    selectedActionProfile?: ProfileSummary | null;
+    canRenameSelectedProfile?: boolean;
+    canDeleteSelectedProfile?: boolean;
+    profileConfigDirty?: boolean;
+    unsavedChangeCount?: number;
+    profileSaveBusy?: boolean;
+    profileFileBusy?: boolean;
+    profileSaveAsBusy?: boolean;
+    profileRenameBusy?: boolean;
+    saveAsOpen?: boolean;
+    saveAsName?: string;
+    renameProfileId?: string;
+    renameName?: string;
+    onSelectGlobal?: () => void | Promise<void>;
+    onSelectGame?: (game: SupportedGame) => void | Promise<void>;
+    onOpenAddGame?: () => void | Promise<void>;
+    onToggleSetupGuide?: () => void;
+    onOpenSetupGuide?: () => void;
+    onSelectProfile?: (profileId: string) => void | Promise<void>;
+    onSaveProfile?: () => void | Promise<void>;
+    onBeginSaveAs?: () => void;
+    onCancelSaveAs?: () => void;
+    onSubmitSaveAs?: () => void | Promise<void>;
+    onSaveAsKeydown?: (event: KeyboardEvent) => void;
+    onBeginRename?: () => void;
+    onCancelRename?: () => void;
+    onSubmitRename?: () => void | Promise<void>;
+    onRenameKeydown?: (event: KeyboardEvent) => void;
+    onDeleteProfile?: (profile: ProfileSummary) => void | Promise<void>;
+    onRestoreDefaults?: () => void | Promise<void>;
+    onImportFile?: (event: Event) => void | Promise<void>;
+    onExportProfile?: () => void | Promise<void>;
+  } = $props();
+
+  const gameModel = $derived(
+    buildGameSelectModel({
+      games: discoveredGames,
+      scope,
+      selectedGameId: selectedGame?.gameId ?? '',
+      setupGuideGame: scope === 'game' ? selectedGame : null,
+      setupGuideEnabled: true
+    })
+  );
+  const chipState = $derived(
+    telemetryChipState({ scope, selectedGame, adapterRunning, packetRateHz, setupVerified })
+  );
+  const chipPresentation = $derived.by(() => {
+    switch (chipState) {
+      case 'fresh':
+        return {
+          label: 'Telemetry Fresh',
+          suffix: '· setup ↗',
+          title: 'Game data is arriving — the driving feel is live. Open the setup guide to check the port or re-copy values.'
+        };
+      case 'quiet':
+        return {
+          label: 'Telemetry Quiet',
+          suffix: '· fix ↗',
+          title: 'The game is running but its data feed is silent. Open the guide to fix it.'
+        };
+      case 'setup':
+        return {
+          label: 'One-Time Setup Needed',
+          suffix: '',
+          title: "About 2 minutes, once. Then it's automatic forever."
+        };
+      case 'none':
+        return {
+          label: 'No Setup Needed',
+          suffix: '· setup ↗',
+          title: 'This game needs no telemetry feed. Open the guide for details.'
+        };
+      default:
+        return null;
+    }
+  });
+
+  const heroArt = $derived(scope === 'game' ? gameArtwork(selectedGame, 'hero') : null);
+  const thumbArt = $derived(scope === 'game' ? gameArtwork(selectedGame, 'banner') : null);
+  const selectedProfileId = $derived(selectedOverrideProfileId || activeProfileId);
+  const profileName = $derived(
+    profiles.find((profile) => profile.id === selectedProfileId)?.name ?? 'None'
+  );
+  const controllerAlias = $derived(controllerModelText(controller));
+  const batteryText = $derived(
+    controller?.connected && typeof controller.battery === 'number' && controller.batteryState !== 'unknown'
+      ? `${controller.battery}%`
+      : ''
+  );
+  const unsavedNote = $derived(
+    unsavedChangeCount > 0
+      ? `· ${unsavedChangeCount} unsaved change${unsavedChangeCount === 1 ? '' : 's'}`
+      : profileConfigDirty
+        ? '· unsaved changes'
+        : ''
+  );
+
+  // --- game menu state (the profile menu lives in ProfileMenu.svelte) -------
+  let gameMenuOpen = $state(false);
+  let profileMenuOpen = $state(false);
+  let menuLeft = $state(0);
+  let menuTop = $state(0);
+  let gameTrigger: HTMLButtonElement | undefined = $state();
+  let profileTrigger: HTMLButtonElement | undefined = $state();
+  let menuEl: HTMLDivElement | undefined = $state();
+
+  const closeGameMenu = (returnFocus = true) => {
+    if (!gameMenuOpen) return;
+    gameMenuOpen = false;
+    if (returnFocus) gameTrigger?.focus();
+  };
+
+  const toggleGameMenu = async () => {
+    profileMenuOpen = false;
+    if (gameMenuOpen) {
+      closeGameMenu();
+      return;
+    }
+    if (!gameTrigger) return;
+    const rect = gameTrigger.getBoundingClientRect();
+    menuLeft = Math.max(8, Math.min(rect.left, window.innerWidth - 268));
+    menuTop = Math.min(rect.bottom + 6, window.innerHeight - 60);
+    gameMenuOpen = true;
+    await tick();
+    focusMenuItem(0);
+  };
+
+  const toggleProfileMenu = () => {
+    closeGameMenu(false);
+    profileMenuOpen = !profileMenuOpen;
+  };
+
+  const menuItems = (): HTMLButtonElement[] =>
+    menuEl ? Array.from(menuEl.querySelectorAll<HTMLButtonElement>('button.tuning-menu-item:not(:disabled)')) : [];
+
+  const focusMenuItem = (index: number) => {
+    const items = menuItems();
+    if (!items.length) return;
+    const next = ((index % items.length) + items.length) % items.length;
+    items[next]?.focus();
+  };
+
+  const handleMenuKeydown = (event: KeyboardEvent) => {
+    if (event.key === 'Escape') {
+      event.preventDefault();
+      closeGameMenu();
+      return;
+    }
+    if (event.key === 'Tab') {
+      // Close so aria-expanded stays honest, but let Tab move focus naturally.
+      closeGameMenu(false);
+      return;
+    }
+    if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp') return;
+    event.preventDefault();
+    const items = menuItems();
+    const current = items.indexOf(document.activeElement as HTMLButtonElement);
+    focusMenuItem(current + (event.key === 'ArrowDown' ? 1 : -1));
+  };
+
+  const handleWindowPointerDown = (event: PointerEvent) => {
+    if (!gameMenuOpen) return;
+    const target = event.target as Node;
+    if (menuEl?.contains(target)) return;
+    if (gameTrigger?.contains(target)) return;
+    closeGameMenu(false);
+  };
+
+  // The menu is position: fixed and placed once at open; any scroll or
+  // resize would leave it floating away from the trigger, so just close.
+  $effect(() => {
+    if (!gameMenuOpen) return;
+    const closeOnViewportChange = (event: Event) => {
+      // Ignore scrolls that originate inside the menu itself.
+      if (event.target instanceof Node && menuEl?.contains(event.target)) return;
+      closeGameMenu(false);
+    };
+    window.addEventListener('scroll', closeOnViewportChange, true);
+    window.addEventListener('resize', closeOnViewportChange);
+    return () => {
+      window.removeEventListener('scroll', closeOnViewportChange, true);
+      window.removeEventListener('resize', closeOnViewportChange);
+    };
+  });
+
+  const pickGameEntry = (entry: GameSelectEntry) => {
+    closeGameMenu();
+    if (entry.kind === 'everyday') void onSelectGlobal();
+    else if (entry.kind === 'game') void onSelectGame(entry.game);
+    else if (entry.kind === 'setup-guide') onOpenSetupGuide();
+    else if (entry.kind === 'add-game') void onOpenAddGame();
+  };
+</script>
+
+<svelte:window onpointerdown={handleWindowPointerDown} />
+
+<header
+  class="tuning-header"
+  class:has-art={Boolean(heroArt)}
+  style={heroArt ? `background-image: url("${heroArt}")` : ''}
+>
+  {#if heroArt}
+    <div class="tuning-header-scrim" aria-hidden="true"></div>
+  {/if}
+  <div class="tuning-header-content">
+    <div class="tuning-header-identity">
+      {#if scope === 'game' && selectedGame}
+        <span class="tuning-header-thumb" aria-hidden="true">
+          {#if thumbArt}
+            <img src={thumbArt} alt="" loading="lazy" />
+          {:else}
+            <InitialBadge label={selectedGame.name} accent={gameAccentColor(selectedGame)} size={48} />
+          {/if}
+        </span>
+      {/if}
+      <div class="tuning-header-titles">
+        <div class="tuning-header-title-row">
+          <button
+            class="tuning-header-game"
+            type="button"
+            bind:this={gameTrigger}
+            aria-haspopup="menu"
+            aria-expanded={gameMenuOpen}
+            onclick={() => void toggleGameMenu()}
+          >
+            <strong>{gameModel.title}</strong>
+            <span class="tuning-caret" aria-hidden="true">▾</span>
+          </button>
+          {#if chipState && chipPresentation}
+            <button
+              class="tuning-telemetry-chip clickable"
+              class:fresh={chipState === 'fresh'}
+              class:quiet={chipState === 'quiet'}
+              class:setup={chipState === 'setup'}
+              class:none={chipState === 'none'}
+              type="button"
+              disabled={!setupVerified}
+              title={!setupVerified ? 'The setup guide is open below — it closes by itself once setup verifies.' : chipPresentation.title}
+              aria-pressed={setupGuideOpen}
+              onclick={onToggleSetupGuide}
+            >
+              ● {chipPresentation.label}{#if chipPresentation.suffix}
+                <span class="tuning-chip-suffix">{chipPresentation.suffix}</span>
+              {/if}
+            </button>
+          {/if}
+        </div>
+        <div class="tuning-header-profile-row">
+          <button
+            class="tuning-header-profile"
+            type="button"
+            bind:this={profileTrigger}
+            aria-haspopup="menu"
+            aria-expanded={profileMenuOpen}
+            disabled={!profiles.length}
+            onclick={toggleProfileMenu}
+          >
+            <span class="tuning-profile-label">Profile:</span>
+            <strong>{profileName}</strong>
+            <span class="tuning-caret" aria-hidden="true">▾</span>
+          </button>
+          {#if unsavedNote}
+            <span class="tuning-unsaved-note">{unsavedNote}</span>
+          {/if}
+        </div>
+      </div>
+    </div>
+    <div class="tuning-header-controller">
+      <span class="tuning-controller-alias">{controllerAlias}</span>
+      {#if controller?.connected}
+        <span class="tuning-controller-dot" aria-hidden="true">●</span>
+      {/if}
+      {#if batteryText}
+        <span class="tuning-controller-battery">{batteryText}</span>
+      {/if}
+    </div>
+  </div>
+</header>
+
+<ProfileMenu
+  bind:open={profileMenuOpen}
+  anchor={profileTrigger}
+  {profiles}
+  {selectedProfileId}
+  {activeProfileId}
+  {selectedActionProfile}
+  {canRenameSelectedProfile}
+  {canDeleteSelectedProfile}
+  {profileConfigDirty}
+  {profileSaveBusy}
+  {profileFileBusy}
+  {profileSaveAsBusy}
+  {profileRenameBusy}
+  {saveAsOpen}
+  bind:saveAsName
+  {renameProfileId}
+  bind:renameName
+  {onSelectProfile}
+  {onSaveProfile}
+  {onBeginSaveAs}
+  {onCancelSaveAs}
+  {onSubmitSaveAs}
+  {onSaveAsKeydown}
+  {onBeginRename}
+  {onCancelRename}
+  {onSubmitRename}
+  {onRenameKeydown}
+  {onDeleteProfile}
+  {onRestoreDefaults}
+  {onImportFile}
+  {onExportProfile}
+/>
+
+{#if gameMenuOpen}
+  <div
+    class="tuning-menu"
+    role="menu"
+    tabindex="-1"
+    aria-label="Pick a game to tune"
+    bind:this={menuEl}
+    style={`left:${menuLeft}px;top:${menuTop}px;`}
+    onkeydown={handleMenuKeydown}
+  >
+    {#each gameModel.groups as group (group.id)}
+      {#if group.id === 'actions'}
+        <div class="tuning-menu-divider" role="separator"></div>
+      {:else if group.label}
+        <div class="tuning-menu-label">{group.label}</div>
+      {/if}
+      {#each group.entries as entry (entry.id)}
+        {#if entry.kind === 'game'}
+          <button
+            class="tuning-menu-item"
+            class:current={entry.current}
+            type="button"
+            role="menuitem"
+            onclick={() => pickGameEntry(entry)}
+          >
+            <span class="tuning-menu-item-text">{#if entry.running}<span class="tuning-running-dot" aria-hidden="true">●</span>{/if}{entry.label}</span>
+            {#if entry.running}<span class="tuning-menu-item-meta">detected</span>
+            {:else if entry.current}<span class="tuning-menu-item-meta">current</span>{/if}
+          </button>
+        {:else if entry.kind === 'everyday'}
+          <button
+            class="tuning-menu-item"
+            class:current={entry.current}
+            type="button"
+            role="menuitem"
+            onclick={() => pickGameEntry(entry)}
+          >
+            <span class="tuning-menu-item-text">{entry.label}</span>
+            <span class="tuning-menu-item-meta">{entry.detail}</span>
+          </button>
+        {:else if entry.kind === 'setup-guide'}
+          <button
+            class="tuning-menu-item accent"
+            type="button"
+            role="menuitem"
+            disabled={!entry.enabled}
+            onclick={() => pickGameEntry(entry)}
+          >
+            <span class="tuning-menu-item-text">{entry.label}</span>
+          </button>
+        {:else}
+          <button class="tuning-menu-item accent" type="button" role="menuitem" onclick={() => pickGameEntry(entry)}>
+            <span class="tuning-menu-item-text">{entry.label}</span>
+          </button>
+        {/if}
+      {/each}
+    {/each}
+  </div>
+{/if}
diff --git a/web/src/lib/features/tuning/gameSelect.ts b/web/src/lib/features/tuning/gameSelect.ts
new file mode 100644
index 0000000..9de0ff3
--- /dev/null
+++ b/web/src/lib/features/tuning/gameSelect.ts
@@ -0,0 +1,146 @@
+import type { SupportedGame } from '../../types';
+
+// Pure presentation model for the Tuning header's game dropdown. Builds the
+// grouped menu (Running now / Everyday / Supported games / footer actions)
+// from the discovered games list plus the current selection. No fetching, no
+// component state: types in, types out.
+
+export type TuningScopeKind = 'none' | 'global' | 'game';
+
+export type GameSelectEntry =
+  | { kind: 'game'; id: string; game: SupportedGame; label: string; running: boolean; current: boolean }
+  | { kind: 'everyday'; id: 'everyday'; label: string; detail: string; current: boolean }
+  | { kind: 'setup-guide'; id: 'setup-guide'; label: string; enabled: boolean }
+  | { kind: 'add-game'; id: 'add-game'; label: string };
+
+export type GameSelectGroup = {
+  id: 'running' | 'everyday' | 'supported' | 'actions';
+  label: string | null;
+  entries: GameSelectEntry[];
+};
+
+export type GameSelectModel = {
+  groups: GameSelectGroup[];
+  /** Header title for the closed state of the dropdown. */
+  title: string;
+};
+
+const gameEntry = (game: SupportedGame, options: BuildGameSelectOptions): GameSelectEntry => ({
+  kind: 'game',
+  id: game.gameId,
+  game,
+  label: game.name,
+  running: Boolean(game.running),
+  current: options.scope === 'game' && options.selectedGameId === game.gameId
+});
+
+export type BuildGameSelectOptions = {
+  /** Discovered games, already sorted running > installed > name. */
+  games: SupportedGame[];
+  scope: TuningScopeKind;
+  selectedGameId: string;
+  /**
+   * Game whose setup guide the footer should offer (usually the selected
+   * game when it has telemetry support). Null hides the entry.
+   */
+  setupGuideGame?: SupportedGame | null;
+  /** Whether the setup-guide entry is actionable yet. */
+  setupGuideEnabled?: boolean;
+};
+
+export function buildGameSelectModel(options: BuildGameSelectOptions): GameSelectModel {
+  const games = options.games ?? [];
+  const running = games.filter((game) => game.running);
+  const rest = games.filter((game) => !game.running);
+
+  const groups: GameSelectGroup[] = [];
+
+  if (running.length) {
+    groups.push({
+      id: 'running',
+      label: 'Running now',
+      entries: running.map((game) => gameEntry(game, options))
+    });
+  }
+
+  groups.push({
+    id: 'everyday',
+    label: 'Everyday',
+    entries: [
+      {
+        kind: 'everyday',
+        id: 'everyday',
+        label: 'Everyday (no game)',
+        detail: 'Global Profile',
+        current: options.scope !== 'game'
+      }
+    ]
+  });
+
+  if (rest.length) {
+    groups.push({
+      id: 'supported',
+      label: 'Supported games',
+      entries: rest.map((game) => gameEntry(game, options))
+    });
+  }
+
+  const actions: GameSelectEntry[] = [];
+  if (options.setupGuideGame) {
+    actions.push({
+      kind: 'setup-guide',
+      id: 'setup-guide',
+      label: `Setup guide for ${options.setupGuideGame.name}…`,
+      enabled: Boolean(options.setupGuideEnabled)
+    });
+  }
+  actions.push({ kind: 'add-game', id: 'add-game', label: '+ Add a game manually…' });
+  groups.push({ id: 'actions', label: null, entries: actions });
+
+  return {
+    groups,
+    title: headerTitle(options)
+  };
+}
+
+export function headerTitle(options: {
+  games: SupportedGame[];
+  scope: TuningScopeKind;
+  selectedGameId: string;
+}): string {
+  if (options.scope === 'game' && options.selectedGameId) {
+    const game = (options.games ?? []).find((item) => item.gameId === options.selectedGameId);
+    if (game) return game.name;
+  }
+  /* "Everyday" is a presentation label and must always pair with its
+     domain term, Global Profile (CONTEXT.md / spec §13). */
+  return 'Everyday · Global Profile';
+}
+
+export type TelemetryChipState = 'fresh' | 'quiet' | 'setup' | 'none' | null;
+
+/**
+ * Telemetry chip state for the header band. The chip is the door back into
+ * the setup guide:
+ * - `fresh` (green): packets are arriving for the running game.
+ * - `quiet` (yellow): the game is up but its data feed is silent.
+ * - `setup` (accent): a telemetry game that has never verified — one-time
+ *   setup is in progress.
+ * - `none` (neutral): the selected game needs no telemetry feed at all.
+ */
+export function telemetryChipState(options: {
+  scope: TuningScopeKind;
+  selectedGame: SupportedGame | null;
+  adapterRunning: boolean;
+  packetRateHz: number;
+  /** Telemetry packets have been seen for this game at least once. */
+  setupVerified: boolean;
+}): TelemetryChipState {
+  if (options.scope !== 'game') return null;
+  const game = options.selectedGame;
+  if (!game) return null;
+  if (game.supportLevel !== 'telemetry') return 'none';
+  if (!options.setupVerified) return 'setup';
+  if (!game.running) return null;
+  return options.adapterRunning && options.packetRateHz > 0 ? 'fresh' : 'quiet';
+}
diff --git a/web/src/lib/features/tuning/savedDiff.ts b/web/src/lib/features/tuning/savedDiff.ts
new file mode 100644
index 0000000..fc379eb
--- /dev/null
+++ b/web/src/lib/features/tuning/savedDiff.ts
@@ -0,0 +1,312 @@
+// Saved-vs-draft diff for the tuning saved rail (Task 7).
+//
+// Pure and total: given the SAVED profile config (the baseline captured when a
+// profile is loaded or saved) and the current working draft values, derive
+// human-labeled rows covering the tunable surface. Dirty rows carry both the
+// saved and current value formatted for display; the rail renders
+// `saved (strikethrough) → current`, clean rows show the saved value muted.
+//
+// Comparison normalizes through the same helpers the draft/save path uses
+// (hapticsModel normalizers) so the diff agrees with the signature-based
+// `profileConfigDirty` flag in App.svelte.
+
+import {
+  DEFAULT_BODY_FEEL,
+  DEFAULT_BODY_RUMBLE_MODE,
+  DEFAULT_LIGHTBAR_BRIGHTNESS,
+  DEFAULT_LIGHTBAR_COLOR,
+  DEFAULT_REDLINE_COLOR,
+  defaultTriggerCurve,
+  normalizeStickDeadzone,
+  normalizeTriggerCurve,
+  normalizeTriggerCurvePoints,
+  normalizeTriggerPercent
+} from '../haptics/hapticsModel';
+import { forzaEffectMetas, forzaRoutes } from '../haptics/hapticsOptions';
+import type {
+  ControllerConfiguration,
+  ForzaAbsTuningConfiguration,
+  ForzaBodyRumbleMode,
+  ForzaBrakeTuningConfiguration,
+  ForzaEffectConfiguration,
+  ForzaRevLimiterTuningConfiguration,
+  ForzaShiftTuningConfiguration,
+  ForzaThrottleTuningConfiguration,
+  TriggerCurvePoint
+} from '../../types';
+
+export type SavedDiffRow = {
+  id: string;
+  label: string;
+  savedValue: string;
+  currentValue: string;
+  dirty: boolean;
+};
+
+/** The saved baseline: the editable slice of a controller configuration. */
+export type SavedProfileConfig = Pick<
+  ControllerConfiguration,
+  'trigger' | 'lightbar' | 'forza' | 'sticks'
+>;
+
+/** Structural mirror of App's working-draft values (app/profileDraft.ts). */
+export type SavedDiffDraft = {
+  l2From: number;
+  l2To: number;
+  r2From: number;
+  r2To: number;
+  l2Curve: number;
+  r2Curve: number;
+  l2CurvePoints: TriggerCurvePoint[];
+  r2CurvePoints: TriggerCurvePoint[];
+  triggerEffect: string;
+  triggerIntensity: string;
+  vibrationIntensity: string;
+  vibrationMode: string;
+  lightbarEnabled: boolean;
+  lightbarColor: string;
+  rpmColor: string;
+  lightbarBrightness: number;
+  forzaBodyRumbleMode: ForzaBodyRumbleMode;
+  forzaEffects: ForzaEffectConfiguration[];
+  forzaBrakeTuning: ForzaBrakeTuningConfiguration;
+  forzaAbsTuning: ForzaAbsTuningConfiguration;
+  forzaThrottleTuning: ForzaThrottleTuningConfiguration;
+  forzaShiftTuning: ForzaShiftTuningConfiguration;
+  forzaRevLimiterTuning: ForzaRevLimiterTuningConfiguration;
+  leftStickDeadzone: number;
+  rightStickDeadzone: number;
+};
+
+export type SavedDiffOptions = {
+  /** Include the telemetry effect/tuning rows (game scope only). */
+  includeForza: boolean;
+  /** Maps a raw 0-255 effect intensity to a display percent (hapticsState). */
+  intensityPercent: (intensity: number) => number;
+};
+
+const routeLabelByValue = new Map(forzaRoutes.map((route) => [route.value as string, route.label]));
+
+const routeLabel = (route: string) => routeLabelByValue.get(route) ?? route;
+
+const roundish = (value: number) => Math.round(value * 1000) / 1000;
+
+const numbersEqual = (a: number, b: number) => roundish(a) === roundish(b);
+
+const pointsEqual = (a: TriggerCurvePoint[], b: TriggerCurvePoint[]) =>
+  a.length === b.length &&
+  a.every(
+    (point, index) =>
+      numbersEqual(point.input, b[index].input) && numbersEqual(point.output, b[index].output)
+  );
+
+type NormalizedCurve = {
+  from: number;
+  to: number;
+  curve: number;
+  points: TriggerCurvePoint[];
+};
+
+const normalizedCurve = (
+  side: 'l2' | 'r2',
+  from: number,
+  to: number,
+  curve: number,
+  points: TriggerCurvePoint[] | undefined
+): NormalizedCurve => {
+  const safeFrom = normalizeTriggerPercent(from);
+  const safeTo = Math.max(safeFrom, normalizeTriggerPercent(to));
+  const safeCurve = normalizeTriggerCurve(curve, defaultTriggerCurve(side));
+  return {
+    from: safeFrom,
+    to: safeTo,
+    curve: safeCurve,
+    points: normalizeTriggerCurvePoints(points, safeCurve)
+  };
+};
+
+const formatRange = (value: NormalizedCurve) => `${value.from}–${value.to}%`;
+
+const formatCurve = (value: NormalizedCurve) =>
+  `x${value.curve.toFixed(2)} · ${value.points.length} pts`;
+
+const row = (
+  id: string,
+  label: string,
+  savedValue: string,
+  currentValue: string,
+  dirty = savedValue !== currentValue
+): SavedDiffRow => ({ id, label, savedValue, currentValue, dirty });
+
+/** A generic per-field comparison for the deep telemetry tuning groups. */
+const tuningGroupRow = <T extends object>(
+  id: string,
+  label: string,
+  saved: T,
+  current: T
+): SavedDiffRow => {
+  const keys = Object.keys(saved) as Array<keyof T>;
+  let changed = 0;
+  for (const key of keys) {
+    const savedValue = saved[key];
+    const currentValue = current[key];
+    if (typeof savedValue === 'number' && typeof currentValue === 'number') {
+      if (!numbersEqual(savedValue, currentValue)) changed += 1;
+    } else if (savedValue !== currentValue) {
+      changed += 1;
+    }
+  }
+  if (changed > 0) {
+    // Group rows summarize many fields; there is no single saved value to
+    // strike through, so both sides carry the same "N of M edited" text and
+    // the rail renders it once, without a strikethrough.
+    const edited = `${changed} of ${keys.length} edited`;
+    return row(id, label, edited, edited, true);
+  }
+  const clean = `${keys.length} settings`;
+  return row(id, label, clean, clean, false);
+};
+
+const effectValue = (
+  effect: ForzaEffectConfiguration,
+  intensityPercent: SavedDiffOptions['intensityPercent']
+) => (effect.enabled ? `${intensityPercent(effect.intensity)}% · ${routeLabel(effect.route)}` : 'Off');
+
+const effectById = (
+  effects: ForzaEffectConfiguration[],
+  id: string,
+  fallback: ForzaEffectConfiguration
+) => effects.find((effect) => effect.id === id) ?? fallback;
+
+const curveRows = (
+  side: 'l2' | 'r2',
+  label: string,
+  saved: SavedProfileConfig,
+  draft: SavedDiffDraft
+): SavedDiffRow[] => {
+  const savedCurve = normalizedCurve(
+    side,
+    saved.trigger[`${side}From`],
+    saved.trigger[`${side}To`],
+    saved.trigger[`${side}Curve`],
+    saved.trigger[`${side}CurvePoints`]
+  );
+  const draftCurve = normalizedCurve(
+    side,
+    draft[`${side}From`],
+    draft[`${side}To`],
+    draft[`${side}Curve`],
+    draft[`${side}CurvePoints`]
+  );
+
+  const curveDirty =
+    !numbersEqual(savedCurve.curve, draftCurve.curve) ||
+    !pointsEqual(savedCurve.points, draftCurve.points);
+  const savedLabel = formatCurve(savedCurve);
+  let currentLabel = formatCurve(draftCurve);
+  // A moved point can leave the summary text identical; say so in plain words.
+  if (curveDirty && currentLabel === savedLabel) currentLabel = 'reshaped';
+
+  return [
+    row(`${side}-range`, `${label} range`, formatRange(savedCurve), formatRange(draftCurve)),
+    row(`${side}-curve`, `${label} curve`, savedLabel, currentLabel, curveDirty)
+  ];
+};
+
+/**
+ * Derive the saved-vs-current rows for the saved rail.
+ *
+ * Returns [] when there is no saved baseline yet (config still loading).
+ */
+export const savedDiffRows = (
+  saved: SavedProfileConfig | null | undefined,
+  draft: SavedDiffDraft,
+  options: SavedDiffOptions
+): SavedDiffRow[] => {
+  if (!saved) return [];
+
+  const rows: SavedDiffRow[] = [
+    ...curveRows('l2', 'Brake', saved, draft),
+    ...curveRows('r2', 'Throttle', saved, draft),
+    row('trigger-mode', 'Trigger mode', saved.trigger.effect, draft.triggerEffect),
+    row('trigger-force', 'Trigger force', saved.trigger.intensity, draft.triggerIntensity),
+    row('body-rumble', 'Body rumble', saved.trigger.vibration, draft.vibrationIntensity),
+    row(
+      'body-feel',
+      'Body feel',
+      saved.trigger.vibrationMode ?? DEFAULT_BODY_FEEL,
+      draft.vibrationMode
+    ),
+    row(
+      'lightbar',
+      'Lightbar',
+      saved.lightbar?.enabled ?? true
+        ? `On · ${normalizeTriggerPercent(saved.lightbar?.brightness ?? DEFAULT_LIGHTBAR_BRIGHTNESS)}%`
+        : 'Off',
+      draft.lightbarEnabled ? `On · ${normalizeTriggerPercent(draft.lightbarBrightness)}%` : 'Off'
+    ),
+    row(
+      'lightbar-color',
+      'Lightbar color',
+      (saved.lightbar?.color ?? DEFAULT_LIGHTBAR_COLOR).toLowerCase(),
+      draft.lightbarColor.toLowerCase()
+    ),
+    row(
+      'redline-color',
+      'Redline color',
+      (saved.lightbar?.rpmColor ?? DEFAULT_REDLINE_COLOR).toLowerCase(),
+      draft.rpmColor.toLowerCase()
+    ),
+    row(
+      'left-deadzone',
+      'Left stick deadzone',
+      `${normalizeStickDeadzone(saved.sticks?.leftDeadzone ?? 0)}%`,
+      `${normalizeStickDeadzone(draft.leftStickDeadzone)}%`
+    ),
+    row(
+      'right-deadzone',
+      'Right stick deadzone',
+      `${normalizeStickDeadzone(saved.sticks?.rightDeadzone ?? 0)}%`,
+      `${normalizeStickDeadzone(draft.rightStickDeadzone)}%`
+    )
+  ];
+
+  if (options.includeForza) {
+    const savedMode = saved.forza?.bodyRumbleMode ?? DEFAULT_BODY_RUMBLE_MODE;
+    const modeLabel = (mode: ForzaBodyRumbleMode) =>
+      mode === 'dscc_full_control' ? 'DSCC full control' : 'Game native';
+    rows.push(row('rumble-source', 'Rumble source', modeLabel(savedMode), modeLabel(draft.forzaBodyRumbleMode)));
+
+    const savedEffects = saved.forza?.effects ?? [];
+    for (const meta of forzaEffectMetas) {
+      const fallback: ForzaEffectConfiguration = {
+        id: meta.id,
+        enabled: true,
+        intensity: meta.defaultIntensity,
+        route: meta.defaultRoute
+      };
+      const savedEffect = effectById(savedEffects, meta.id, fallback);
+      const draftEffect = effectById(draft.forzaEffects, meta.id, fallback);
+      rows.push(
+        row(
+          `effect-${meta.id}`,
+          meta.label,
+          effectValue(savedEffect, options.intensityPercent),
+          effectValue(draftEffect, options.intensityPercent)
+        )
+      );
+    }
+
+    if (saved.forza?.brake) rows.push(tuningGroupRow('brake-detail', 'Brake feel detail', saved.forza.brake, draft.forzaBrakeTuning));
+    if (saved.forza?.abs) rows.push(tuningGroupRow('abs-detail', 'ABS detail', saved.forza.abs, draft.forzaAbsTuning));
+    if (saved.forza?.throttle) rows.push(tuningGroupRow('throttle-detail', 'Throttle feel detail', saved.forza.throttle, draft.forzaThrottleTuning));
+    if (saved.forza?.shift) rows.push(tuningGroupRow('shift-detail', 'Gear-shift detail', saved.forza.shift, draft.forzaShiftTuning));
+    if (saved.forza?.revLimiter) rows.push(tuningGroupRow('rev-detail', 'Rev limiter detail', saved.forza.revLimiter, draft.forzaRevLimiterTuning));
+  }
+
+  return rows;
+};
+
+/** Count of dirty rows — drives the header "N unsaved changes" note. */
+export const unsavedChangeCount = (rows: SavedDiffRow[]) =>
+  rows.reduce((count, item) => count + (item.dirty ? 1 : 0), 0);
diff --git a/web/src/lib/features/tuning/setupRequirements.ts b/web/src/lib/features/tuning/setupRequirements.ts
new file mode 100644
index 0000000..622cd0d
--- /dev/null
+++ b/web/src/lib/features/tuning/setupRequirements.ts
@@ -0,0 +1,119 @@
+import type { AdapterStatus, SupportedGame } from '../../types';
+
+// Pure setup-walkthrough model for the Tuning canvas (Task 8). Each Game
+// Module's metadata plus live telemetry state derive `{required, steps,
+// verified}` — no fetching, no storage, no component state. Persistence of
+// "verified once" lives in app/setupVerification.ts.
+
+export const TELEMETRY_TARGET_IP = '127.0.0.1';
+export const DEFAULT_TELEMETRY_PORT = 5300;
+
+export type SetupStepState = 'done' | 'now' | 'todo';
+
+export type SetupCopyValue = {
+  label: string;
+  value: string;
+};
+
+export type SetupStep = {
+  id: 'found' | 'data-out' | 'drive';
+  state: SetupStepState;
+  title: string;
+  detail: string;
+  /** Exact in-game menu path, rendered emphasized before `detailAfterPath`. */
+  menuPath?: string;
+  detailAfterPath?: string;
+  copyValues?: SetupCopyValue[];
+};
+
+export type SetupModel = {
+  /** False for games DSCC reads without any in-game configuration. */
+  required: boolean;
+  /** Telemetry packets have been seen for this game at least once. */
+  verified: boolean;
+  /** Live freshness: packets are arriving right now. */
+  fresh: boolean;
+  port: number;
+  steps: SetupStep[];
+};
+
+/**
+ * The UDP port the active Telemetry Adapter listens on. The agent reports its
+ * bound address inside the adapter's config string (for example
+ * `127.0.0.1:5300`); fall back to the well-known Forza Data Out default when
+ * no adapter or no port is visible (the mock fixture, early startup).
+ */
+export function telemetryPortFromAdapter(adapter: AdapterStatus | null | undefined): number {
+  // Try address shape first: ipv4:port (e.g., 127.0.0.1:5300)
+  const config = adapter?.config;
+  if (config) {
+    const addressMatch = config.match(/(?:\d{1,3}\.){3}\d{1,3}:(\d{1,5})/);
+    if (addressMatch) {
+      const port = Number(addressMatch[1]);
+      if (Number.isInteger(port) && port > 0 && port <= 65535) return port;
+    }
+  }
+  // Fall back to hint field if config didn't match
+  const hint = adapter?.setupHint;
+  if (hint) {
+    const addressMatch = hint.match(/(?:\d{1,3}\.){3}\d{1,3}:(\d{1,5})/);
+    if (addressMatch) {
+      const port = Number(addressMatch[1]);
+      if (Number.isInteger(port) && port > 0 && port <= 65535) return port;
+    }
+  }
+  return DEFAULT_TELEMETRY_PORT;
+}
+
+const foundDetail = (game: SupportedGame): string => {
+  if (game.running) return 'Running now.';
+  if (game.source === 'local_app') return 'Added as a local app.';
+  if (game.installed) return 'Installed via Steam.';
+  return 'DSCC spots the game on its own once it starts.';
+};
+
+export function deriveSetupModel(options: {
+  game: SupportedGame;
+  /** Fresh Telemetry attributed to this game (it is the detected game). */
+  telemetryFresh: boolean;
+  /** Packets were seen for this game at least once (persisted). */
+  verified: boolean;
+  port?: number;
+}): SetupModel {
+  const { game, telemetryFresh, verified } = options;
+  const port = options.port ?? DEFAULT_TELEMETRY_PORT;
+
+  if (game.supportLevel !== 'telemetry') {
+    return { required: false, verified, fresh: telemetryFresh, port, steps: [] };
+  }
+
+  const found = game.installed || game.running;
+  const steps: SetupStep[] = [
+    {
+      id: 'found',
+      state: found ? 'done' : 'now',
+      title: `${game.name} found`,
+      detail: foundDetail(game)
+    },
+    {
+      id: 'data-out',
+      state: telemetryFresh ? 'done' : found ? 'now' : 'todo',
+      title: "Turn on the game's telemetry feed",
+      detail: `In ${game.name}: `,
+      menuPath: 'Settings → HUD and Gameplay → Data Out',
+      detailAfterPath: '. Some versions call it UDP Race Telemetry. Set:',
+      copyValues: [
+        { label: 'IP address', value: TELEMETRY_TARGET_IP },
+        { label: 'Port', value: String(port) }
+      ]
+    },
+    {
+      id: 'drive',
+      state: telemetryFresh ? 'done' : 'todo',
+      title: 'Drive',
+      detail: 'Get in a car. The moment data arrives, this page becomes the tuning canvas.'
+    }
+  ];
+
+  return { required: true, verified, fresh: telemetryFresh, port, steps };
+}
diff --git a/web/src/styles/app.css b/web/src/styles/app.css
index 13a84d0..46c3d9d 100644
--- a/web/src/styles/app.css
+++ b/web/src/styles/app.css
@@ -1,13 +1,11 @@
 @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Inter+Tight:wght@600;700;800&family=JetBrains+Mono:wght@400;500;600;700&family=Space+Grotesk:wght@600;700&display=swap");
 @import "./tokens.css";
 @import "./base.css";
-@import "./shell.css";
-@import "./ribbon.css";
-@import "./games.css";
+@import "./shell-v2.css";
+@import "./status.css";
+@import "./tuning.css";
 @import "./controllers.css";
-@import "./games-catalog.css";
 @import "./feedback.css";
-@import "./workspace.css";
 @import "./button-mapping.css";
 @import "./haptics.css";
 @import "./dialogs.css";
diff --git a/web/src/styles/base.css b/web/src/styles/base.css
index bde1665..2839147 100644
--- a/web/src/styles/base.css
+++ b/web/src/styles/base.css
@@ -7,13 +7,11 @@ body,
 #app {
   width: 100%;
   min-width: 320px;
-  height: 100%;
   margin: 0;
 }
 
 body {
-  overflow: hidden;
-  background: var(--obsidian);
+  background: var(--bg);
 }
 
 button,
@@ -34,13 +32,12 @@ input:disabled {
 }
 
 code,
-.dm-system-readout,
 .dm-module-title code,
 .dm-slider-row code,
 .dm-fader-value,
 .dm-led-row code,
 .dm-effects-count code,
 .dm-curve-tooltip {
-  font-family: "JetBrains Mono", "Space Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-family: var(--font-mono);
   font-variant-numeric: tabular-nums;
 }
diff --git a/web/src/styles/button-mapping.css b/web/src/styles/button-mapping.css
index 14b1aba..8b22273 100644
--- a/web/src/styles/button-mapping.css
+++ b/web/src/styles/button-mapping.css
@@ -1,6 +1,5 @@
 @import "./button-mapping/base.css";
 @import "./button-mapping/mirror.css";
-@import "./button-mapping/stage.css";
 @import "./button-mapping/editor.css";
 @import "./button-mapping/responsive.css";
 @import "./button-mapping/layout.css";
diff --git a/web/src/styles/button-mapping/base.css b/web/src/styles/button-mapping/base.css
index 1a99abc..553766c 100644
--- a/web/src/styles/button-mapping/base.css
+++ b/web/src/styles/button-mapping/base.css
@@ -29,8 +29,8 @@
   display: inline-flex;
   align-items: center;
   gap: 6px;
-  color: var(--actuation);
-  font-family: "JetBrains Mono", monospace;
+  color: var(--accent-text);
+  font-family: var(--font-mono);
   font-size: 10px;
   font-weight: 800;
   letter-spacing: 0.18em;
@@ -38,7 +38,7 @@
 }
 
 .dm-mapping-eyebrow em {
-  color: var(--tungsten);
+  color: var(--ink-muted);
   font-style: normal;
   font-weight: 700;
   letter-spacing: 0;
@@ -60,7 +60,7 @@
   flex-wrap: wrap;
   gap: 8px;
   margin: 0;
-  color: var(--tungsten);
+  color: var(--ink-muted);
   font-size: 12px;
   line-height: 1.3;
   text-align: right;
@@ -68,19 +68,19 @@
 }
 
 .dm-mapping-context strong {
-  color: var(--haptic);
+  color: var(--ink);
   font-weight: 700;
 }
 
 .dm-mapping-context em {
-  color: var(--tungsten);
+  color: var(--ink-muted);
   font-style: normal;
   font-weight: 500;
 }
 
 .dm-mapping-context-count {
-  color: var(--actuation);
-  font-family: "JetBrains Mono", monospace;
+  color: var(--accent-text);
+  font-family: var(--font-mono);
   font-weight: 700;
 }
 
@@ -125,7 +125,7 @@
 
 .dm-paddle-preset-title svg {
   flex: 0 0 auto;
-  color: var(--haptic);
+  color: var(--ink);
 }
 
 .dm-paddle-key-field {
@@ -136,7 +136,7 @@
 
 .dm-paddle-preset-title span,
 .dm-paddle-key-field span {
-  color: var(--tungsten);
+  color: var(--ink-muted);
   font-size: 9px;
   font-weight: 800;
   text-transform: uppercase;
@@ -152,7 +152,7 @@
 
 .dm-paddle-preset-title em {
   overflow: hidden;
-  color: var(--tungsten);
+  color: var(--ink-muted);
   font-size: 10px;
   font-style: normal;
   line-height: 1.15;
@@ -166,7 +166,10 @@
   border: 1px solid rgba(255, 255, 255, 0.11);
   background: rgba(2, 5, 9, 0.86);
   color: #FFFFFF;
-  font: 800 12px/1 "JetBrains Mono", monospace;
+  font-family: var(--font-mono);
+  font-weight: 800;
+  font-size: 12px;
+  line-height: 1;
   text-align: center;
   text-transform: uppercase;
 }
@@ -203,5 +206,11 @@
   cursor: not-allowed;
   border-color: rgba(255, 255, 255, 0.09);
   background: rgba(255, 255, 255, 0.04);
-  color: var(--tungsten);
+  color: var(--ink-muted);
+}
+
+/* Hides the button-mapping workspace while it stays mounted for fast
+   re-entry. Moved from the retired workspace.css. */
+.dm-view-hidden {
+  display: none !important;
 }
diff --git a/web/src/styles/button-mapping/editor.css b/web/src/styles/button-mapping/editor.css
index 0175127..fae3def 100644
--- a/web/src/styles/button-mapping/editor.css
+++ b/web/src/styles/button-mapping/editor.css
@@ -22,7 +22,7 @@
 }
 
 .dm-mapping-tray-labels span {
-  color: var(--tungsten);
+  color: var(--ink-muted);
   font-size: 10px;
   font-weight: 800;
   letter-spacing: 0.06em;
@@ -41,8 +41,8 @@
 
 .dm-mapping-tray-labels em {
   overflow: hidden;
-  color: var(--actuation);
-  font-family: "JetBrains Mono", monospace;
+  color: var(--accent-text);
+  font-family: var(--font-mono);
   font-size: 11px;
   font-style: normal;
   font-weight: 700;
@@ -65,7 +65,7 @@
 }
 
 .dm-mapping-tray-field span {
-  color: var(--tungsten);
+  color: var(--ink-muted);
   font-size: 10px;
   font-weight: 800;
   letter-spacing: 0.06em;
@@ -83,7 +83,10 @@
   border: 0;
   box-shadow: inset 0 0 0 1px rgba(226, 232, 240, 0.12);
   outline: none;
-  font: 700 12px/1 "JetBrains Mono", monospace;
+  font-family: var(--font-mono);
+  font-weight: 700;
+  font-size: 12px;
+  line-height: 1;
   letter-spacing: 0.01em;
 }
 
@@ -116,7 +119,10 @@
   color: #FFFFFF;
   background: rgba(10, 10, 12, 0.72);
   box-shadow: inset 0 0 0 1px rgba(226, 232, 240, 0.12);
-  font: 700 12px/1 "JetBrains Mono", monospace;
+  font-family: var(--font-mono);
+  font-weight: 700;
+  font-size: 12px;
+  line-height: 1;
   letter-spacing: 0.01em;
   text-align: left;
   transition: box-shadow 160ms ease-out, background 160ms ease-out;
@@ -149,12 +155,12 @@
 
 .dm-target-combo-trigger > svg {
   flex: 0 0 auto;
-  color: var(--tungsten);
+  color: var(--ink-muted);
   transition: transform 180ms ease-out, color 160ms ease-out;
 }
 
 .dm-target-combo-trigger.open > svg {
-  color: var(--actuation);
+  color: var(--accent-text);
   transform: rotate(180deg);
 }
 
@@ -181,12 +187,12 @@
   gap: 8px;
   padding: 8px 10px;
   border-bottom: 1px solid rgba(226, 232, 240, 0.08);
-  color: var(--tungsten);
+  color: var(--ink-muted);
 }
 
 .dm-target-combo-searchbar > svg {
   flex: 0 0 auto;
-  color: var(--tungsten);
+  color: var(--ink-muted);
 }
 
 .dm-target-combo-searchbar input {
@@ -203,7 +209,7 @@
 }
 
 .dm-target-combo-searchbar input::placeholder {
-  color: var(--tungsten);
+  color: var(--ink-muted);
 }
 
 .dm-target-combo-list {
@@ -218,9 +224,9 @@
   position: sticky;
   top: 0;
   padding: 8px 12px 4px;
-  color: var(--actuation);
+  color: var(--accent-text);
   background: rgba(10, 10, 12, 0.97);
-  font-family: "JetBrains Mono", monospace;
+  font-family: var(--font-mono);
   font-size: 10px;
   font-weight: 800;
   letter-spacing: 0.08em;
@@ -233,7 +239,7 @@
   width: 100%;
   padding: 7px 14px;
   border: 0;
-  color: var(--haptic);
+  color: var(--ink);
   background: transparent;
   font: 600 12px/1.2 Inter, sans-serif;
   letter-spacing: 0;
@@ -249,20 +255,20 @@
 }
 
 .dm-target-combo-option.active {
-  color: var(--actuation);
+  color: var(--accent-text);
   background: rgba(0, 112, 204, 0.18);
-  box-shadow: inset 2px 0 0 var(--actuation);
+  box-shadow: inset 2px 0 0 var(--accent-bright);
 }
 
 .dm-target-combo-empty {
   padding: 16px;
-  color: var(--tungsten);
+  color: var(--ink-muted);
   font-size: 12px;
   text-align: center;
 }
 
 .dm-target-combo-empty strong {
-  color: var(--haptic);
+  color: var(--ink);
 }
 
 .dm-mapping-tray-actions {
@@ -274,8 +280,8 @@
 
 .dm-mapping-tray-message {
   margin: 0 8px 0 0;
-  color: var(--tungsten);
-  font-family: "JetBrains Mono", monospace;
+  color: var(--ink-muted);
+  font-family: var(--font-mono);
   font-size: 11px;
   line-height: 1.25;
   max-width: 240px;
@@ -287,7 +293,7 @@
   min-width: 96px;
   padding: 0 18px;
   border: 0;
-  color: var(--haptic);
+  color: var(--ink);
   background: transparent;
   box-shadow: inset 0 0 0 1px rgba(226, 232, 240, 0.16);
   font: 700 12px/1 Inter, sans-serif;
@@ -303,7 +309,7 @@
 
 .dm-mapping-action.primary {
   color: #FFFFFF;
-  background: var(--actuation);
+  background: var(--accent);
   box-shadow: inset 0 0 0 1px rgba(0, 112, 204, 0.85), 0 0 18px rgba(0, 112, 204, 0.35);
 }
 
diff --git a/web/src/styles/button-mapping/layout/controller-art.css b/web/src/styles/button-mapping/layout/controller-art.css
index bbce11c..5532ca6 100644
--- a/web/src/styles/button-mapping/layout/controller-art.css
+++ b/web/src/styles/button-mapping/layout/controller-art.css
@@ -126,7 +126,7 @@
 }
 
 .dm-controller-focus-card span {
-  color: var(--tungsten);
+  color: var(--ink-muted);
   font-size: 10px;
   font-weight: 800;
   line-height: 1;
@@ -145,7 +145,7 @@
 }
 
 .dm-controller-focus-card .dm-controller-focus-hint {
-  color: var(--tungsten);
+  color: var(--ink-muted);
   font-size: 11px;
   font-weight: 600;
   letter-spacing: 0;
@@ -178,10 +178,10 @@
   place-items: center;
   width: 32px;
   height: 32px;
-  color: var(--actuation);
+  color: var(--accent-text);
   background: rgba(0, 112, 204, 0.14);
   box-shadow: inset 0 0 0 1px rgba(0, 112, 204, 0.4);
-  font-family: var(--mono);
+  font-family: "JetBrains Mono", ui-monospace, monospace;
   font-size: 11px;
   font-weight: 800;
   letter-spacing: 0.04em;
@@ -205,7 +205,7 @@
 
 .dm-callout-cluster-title {
   display: block;
-  color: var(--tungsten);
+  color: var(--ink-muted);
   font-size: 10px;
   font-weight: 800;
   line-height: 1;
@@ -226,7 +226,7 @@
 .dm-steam-binding-row {
   min-width: 0;
   border: 0;
-  color: var(--haptic);
+  color: var(--ink);
   background: rgba(10, 10, 12, 0.5);
   box-shadow:
     inset 0 0 0 1px rgba(226, 232, 240, 0.055),
@@ -324,7 +324,7 @@
 .dm-steam-binding-row code,
 .dm-map-quick-grid span,
 .dm-steam-binding-empty span {
-  color: var(--tungsten);
+  color: var(--ink-muted);
   font-size: 10px;
   font-weight: 800;
   letter-spacing: 0;
diff --git a/web/src/styles/button-mapping/layout/inspector.css b/web/src/styles/button-mapping/layout/inspector.css
index aa0e1e1..5af6754 100644
--- a/web/src/styles/button-mapping/layout/inspector.css
+++ b/web/src/styles/button-mapping/layout/inspector.css
@@ -89,7 +89,7 @@
 }
 
 .dm-steam-binding-row em {
-  color: var(--haptic);
+  color: var(--ink);
   font-size: 12px;
   font-style: normal;
   font-weight: 700;
@@ -134,7 +134,7 @@
 
 .dm-map-editor-summary span,
 .dm-map-field span {
-  color: var(--tungsten);
+  color: var(--ink-muted);
   font-size: 10px;
   font-weight: 800;
   line-height: 1;
@@ -159,7 +159,7 @@
   border-radius: 6px;
   color: #FFFFFF;
   background: rgba(18, 18, 20, 0.92);
-  font: 800 12px/1 var(--mono);
+  font: 800 12px/1 "JetBrains Mono", ui-monospace, monospace;
   outline: none;
 }
 
@@ -190,8 +190,8 @@
 
 .dm-map-editor-message {
   margin: 0;
-  color: var(--tungsten);
-  font-family: var(--mono);
+  color: var(--ink-muted);
+  font-family: "JetBrains Mono", ui-monospace, monospace;
   font-size: 11px;
   line-height: 1.45;
   overflow-wrap: anywhere;
diff --git a/web/src/styles/button-mapping/layout/panels.css b/web/src/styles/button-mapping/layout/panels.css
index 566a424..f94f0b0 100644
--- a/web/src/styles/button-mapping/layout/panels.css
+++ b/web/src/styles/button-mapping/layout/panels.css
@@ -17,7 +17,7 @@
 }
 
 .dm-page-status {
-  color: var(--actuation);
+  color: var(--accent-text);
   font-size: 11px;
   font-weight: 800;
 }
@@ -42,7 +42,7 @@
 .dm-map-placeholder span,
 .dm-button-bind-row span {
   display: block;
-  color: var(--tungsten);
+  color: var(--ink-muted);
   font-size: 10px;
   font-weight: 800;
   line-height: 1;
@@ -67,7 +67,7 @@
   display: block;
   margin-top: 4px;
   overflow: hidden;
-  color: var(--tungsten);
+  color: var(--ink-muted);
   font-size: 11px;
   line-height: 1.25;
   text-overflow: ellipsis;
diff --git a/web/src/styles/button-mapping/mirror.css b/web/src/styles/button-mapping/mirror.css
index 50f6974..51cf8da 100644
--- a/web/src/styles/button-mapping/mirror.css
+++ b/web/src/styles/button-mapping/mirror.css
@@ -34,7 +34,7 @@
 }
 
 .dm-steam-layout-title {
-  color: var(--haptic);
+  color: var(--ink);
   font-size: 14px;
   font-weight: 800;
   letter-spacing: 0.04em;
@@ -45,7 +45,7 @@
 .dm-steam-empty-note {
   max-width: 52ch;
   margin: -4px auto 4px;
-  color: var(--tungsten);
+  color: var(--ink-muted);
   font-size: 12px;
   line-height: 1.4;
   text-align: center;
@@ -95,7 +95,7 @@
 }
 
 .dm-steam-group-title {
-  color: var(--tungsten);
+  color: var(--ink-muted);
   font-size: 12px;
   font-weight: 900;
   letter-spacing: 0.08em;
@@ -111,7 +111,7 @@
   min-height: 26px;
   padding: 3px 5px;
   border: 0;
-  color: var(--haptic);
+  color: var(--ink);
   background: transparent;
   font: inherit;
   letter-spacing: 0;
@@ -128,7 +128,7 @@
   outline: none;
   color: #FFFFFF;
   background: rgba(226, 232, 240, 0.08);
-  box-shadow: inset 3px 0 0 var(--actuation);
+  box-shadow: inset 3px 0 0 var(--accent-bright);
 }
 
 .dm-steam-row strong {
@@ -149,7 +149,7 @@
 }
 
 .dm-steam-static-row {
-  color: var(--haptic);
+  color: var(--ink);
 }
 
 .dm-steam-input-icon {
@@ -159,7 +159,7 @@
   min-width: 20px;
   height: 20px;
   color: #FFFFFF;
-  font-family: "JetBrains Mono", monospace;
+  font-family: var(--font-mono);
   font-size: 10px;
   font-weight: 900;
 }
diff --git a/web/src/styles/button-mapping/stage.css b/web/src/styles/button-mapping/stage.css
deleted file mode 100644
index 7782048..0000000
--- a/web/src/styles/button-mapping/stage.css
+++ /dev/null
@@ -1,311 +0,0 @@
-.dm-mapping-stage {
-  position: relative;
-  align-self: center;
-  flex: 0 0 auto;
-  width: 100%;
-  max-width: 1400px;
-  aspect-ratio: 2 / 1;
-  contain: layout paint;
-  isolation: isolate;
-}
-
-.dm-mapping-stage::before {
-  content: "";
-  position: absolute;
-  inset: 6% 8%;
-  background:
-    radial-gradient(ellipse at 50% 56%, rgba(0, 112, 204, 0.18), rgba(0, 112, 204, 0.02) 50%, transparent 70%);
-  filter: blur(36px);
-  opacity: 0.85;
-  z-index: 0;
-  pointer-events: none;
-}
-
-/* The SVG fills the stage and draws leader lines. */
-.dm-mapping-lines {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-  z-index: 1;
-  overflow: visible;
-}
-
-.dm-mapping-lines line {
-  stroke: rgba(226, 232, 240, 0.22);
-  stroke-width: 0.16;
-  stroke-linecap: round;
-  vector-effect: non-scaling-stroke;
-  transition: stroke 180ms ease-out, stroke-width 180ms ease-out, filter 220ms ease-out;
-}
-
-.dm-mapping-lines line.focused {
-  stroke: rgba(0, 112, 204, 0.85);
-  stroke-width: 0.32;
-  filter: drop-shadow(0 0 4px rgba(0, 112, 204, 0.55));
-}
-
-.dm-mapping-lines line.active {
-  stroke: rgba(0, 112, 204, 1);
-  stroke-width: 0.4;
-  filter: drop-shadow(0 0 6px rgba(0, 112, 204, 0.85));
-}
-
-/* === Centered controller artwork (the centerpiece) ================ */
-.dm-mapping-figure {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  /* 54% of stage width — anchor coords in mappingChipLayout assume this. */
-  width: 54%;
-  aspect-ratio: 1.5;
-  transform: translate(-50%, -50%);
-  z-index: 2;
-  pointer-events: none;
-}
-
-.dm-mapping-figure .dm-controller-glow {
-  position: absolute;
-  inset: 4% 2% 0%;
-  background: radial-gradient(ellipse at 50% 50%, rgba(0, 112, 204, 0.28), transparent 60%);
-  filter: blur(44px);
-  opacity: 0.85;
-  pointer-events: none;
-  z-index: 0;
-}
-
-.dm-mapping-figure .dm-controller-base,
-.dm-mapping-figure .dm-controller-focus {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
-  pointer-events: none;
-}
-
-.dm-mapping-figure .dm-controller-base {
-  z-index: 1;
-  opacity: 0.5;
-  filter: drop-shadow(0 18px 38px rgba(0, 0, 0, 0.55));
-}
-
-.dm-mapping-figure .dm-controller-focus {
-  z-index: 2;
-  opacity: 0;
-  filter:
-    drop-shadow(0 0 6px rgba(0, 112, 204, 0.65))
-    drop-shadow(0 0 22px rgba(0, 112, 204, 0.45));
-  transition: opacity 220ms ease-out;
-}
-
-.dm-mapping-figure .dm-controller-focus.visible {
-  opacity: 1;
-}
-
-
-/* === Pill chips at the stage edges ================================= */
-/* The icon is a 38px disc; --chip-half-icon centers it on chip-x/y. */
-.dm-mapping-chip {
-  --chip-icon: 38px;
-  --chip-half-icon: 19px;
-  position: absolute;
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  padding: 0;
-  border: 0;
-  color: var(--haptic);
-  background: transparent;
-  z-index: 3;
-  transition: transform 180ms ease-out, filter 180ms ease-out;
-}
-
-/* Left/right chips: icon center sits at chip-x, text flows toward the
-   page edge (away from the controller). */
-.dm-mapping-chip.left {
-  right: calc(100% - var(--chip-x) - var(--chip-half-icon));
-  top: var(--chip-y);
-  flex-direction: row-reverse;
-  text-align: right;
-  transform: translateY(-50%);
-}
-
-.dm-mapping-chip.right {
-  left: calc(var(--chip-x) - var(--chip-half-icon));
-  top: var(--chip-y);
-  flex-direction: row;
-  text-align: left;
-  transform: translateY(-50%);
-}
-
-/* Top/bottom chips: icon center sits at chip-y, text flows toward the
-   nearest page edge. */
-.dm-mapping-chip.top {
-  left: var(--chip-x);
-  bottom: calc(100% - var(--chip-y) - var(--chip-half-icon));
-  flex-direction: column-reverse;
-  text-align: center;
-  transform: translateX(-50%);
-  gap: 4px;
-}
-
-.dm-mapping-chip.bottom {
-  left: var(--chip-x);
-  top: calc(var(--chip-y) - var(--chip-half-icon));
-  flex-direction: column;
-  text-align: center;
-  transform: translateX(-50%);
-  gap: 4px;
-}
-
-.dm-mapping-chip-icon {
-  position: relative;
-  display: grid;
-  place-items: center;
-  flex: 0 0 auto;
-  width: 38px;
-  height: 38px;
-  border-radius: 999px;
-  background:
-    radial-gradient(circle at 50% 35%, rgba(40, 40, 48, 0.92), rgba(14, 14, 18, 0.92)),
-    rgba(10, 10, 12, 0.92);
-  box-shadow:
-    inset 0 0 0 1px rgba(226, 232, 240, 0.16),
-    0 6px 18px rgba(0, 0, 0, 0.5);
-  transition:
-    background 180ms ease-out,
-    box-shadow 220ms ease-out,
-    transform 180ms ease-out;
-}
-
-.dm-mapping-chip-icon img {
-  width: 22px;
-  height: 22px;
-  object-fit: contain;
-  filter: brightness(1.05) drop-shadow(0 0 4px rgba(0, 112, 204, 0.28));
-  opacity: 0.92;
-  transition: filter 180ms ease-out, opacity 180ms ease-out;
-}
-
-.dm-mapping-chip-glyph {
-  color: #FFFFFF;
-  font-family: "JetBrains Mono", monospace;
-  font-size: 11px;
-  font-weight: 800;
-  letter-spacing: 0.04em;
-}
-
-.dm-mapping-chip-text {
-  display: grid;
-  align-content: center;
-  gap: 2px;
-  min-width: 0;
-  /* Reserve enough room for typical binding labels ("Right Bumper",
-     "Left Trigger") without truncation; cap so a stray long label wraps
-     instead of stretching the rail into the controller. */
-  width: clamp(86px, 9vw, 132px);
-  padding: 2px 4px;
-}
-
-.dm-mapping-chip.left .dm-mapping-chip-text {
-  text-align: right;
-}
-
-.dm-mapping-chip.right .dm-mapping-chip-text {
-  text-align: left;
-}
-
-.dm-mapping-chip.top .dm-mapping-chip-text,
-.dm-mapping-chip.bottom .dm-mapping-chip-text {
-  /* 6 trackpad chips share the top row; keep text narrow but wide enough
-     for "Unassigned" to sit on a single line. */
-  width: clamp(64px, 6.4vw, 92px);
-  text-align: center;
-}
-
-/* Top/bottom chips always render binding on a single line — vertical room is
-   scarce above and below the controller and a wrap would push neighbouring
-   chips into the figure. */
-.dm-mapping-chip.top .dm-mapping-chip-binding,
-.dm-mapping-chip.bottom .dm-mapping-chip-binding {
-  -webkit-line-clamp: 1;
-  white-space: nowrap;
-  word-break: normal;
-  hyphens: none;
-}
-
-.dm-mapping-chip-binding {
-  /* Allow 2-line wrap before clipping with ellipsis. */
-  display: -webkit-box;
-  overflow: hidden;
-  color: #FFFFFF;
-  font-size: 12px;
-  font-weight: 700;
-  line-height: 1.2;
-  letter-spacing: 0.01em;
-  word-break: break-word;
-  hyphens: auto;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  text-overflow: ellipsis;
-}
-
-.dm-mapping-chip:hover,
-.dm-mapping-chip:focus-visible {
-  outline: none;
-}
-
-.dm-mapping-chip:hover .dm-mapping-chip-icon,
-.dm-mapping-chip:focus-visible .dm-mapping-chip-icon {
-  background:
-    radial-gradient(circle at 50% 35%, rgba(0, 112, 204, 0.34), rgba(8, 30, 56, 0.92)),
-    rgba(10, 10, 12, 0.92);
-  box-shadow:
-    inset 0 0 0 1px rgba(0, 112, 204, 0.72),
-    0 0 18px rgba(0, 112, 204, 0.35),
-    0 8px 22px rgba(0, 0, 0, 0.5);
-}
-
-.dm-mapping-chip:hover .dm-mapping-chip-icon img,
-.dm-mapping-chip:focus-visible .dm-mapping-chip-icon img {
-  opacity: 1;
-  filter: brightness(1.18) drop-shadow(0 0 8px rgba(0, 112, 204, 0.65));
-}
-
-.dm-mapping-chip.focused .dm-mapping-chip-icon {
-  background:
-    radial-gradient(circle at 50% 35%, rgba(0, 112, 204, 0.34), rgba(8, 30, 56, 0.92)),
-    rgba(10, 10, 12, 0.92);
-  box-shadow:
-    inset 0 0 0 1px rgba(0, 112, 204, 0.72),
-    0 0 22px rgba(0, 112, 204, 0.35);
-}
-
-.dm-mapping-chip.active .dm-mapping-chip-icon {
-  background:
-    radial-gradient(circle at 50% 35%, rgba(0, 112, 204, 0.52), rgba(0, 60, 124, 0.92)),
-    rgba(10, 10, 12, 0.96);
-  box-shadow:
-    inset 0 0 0 1px rgba(0, 112, 204, 1),
-    0 0 24px rgba(0, 112, 204, 0.55),
-    0 10px 28px rgba(0, 0, 0, 0.55);
-}
-
-.dm-mapping-chip.active .dm-mapping-chip-icon img {
-  opacity: 1;
-  filter: brightness(1.25) drop-shadow(0 0 10px rgba(0, 112, 204, 0.85));
-}
-
-.dm-mapping-chip.active .dm-mapping-chip-binding {
-  color: var(--actuation);
-}
-
-.dm-mapping-chip.edge .dm-mapping-chip-icon {
-  box-shadow:
-    inset 0 0 0 1px rgba(0, 112, 204, 0.38),
-    0 6px 18px rgba(0, 0, 0, 0.5);
-}
-
-/* === Tray (bottom inline editor) — no card, just controls ========= */
diff --git a/web/src/styles/controllers.css b/web/src/styles/controllers.css
index 3a033a0..07704f4 100644
--- a/web/src/styles/controllers.css
+++ b/web/src/styles/controllers.css
@@ -1,351 +1,627 @@
-.dm-controllers-page {
-  display: grid;
-  grid-template-columns: minmax(260px, 330px) minmax(0, 1160px);
-  justify-content: center;
-  gap: clamp(16px, 2vw, 26px);
-  flex: 1 1 0;
-  width: min(1500px, 100%);
-  min-height: 0;
-  margin: 0 auto;
+/* Advanced — Controller details + Edge onboard slots.
+   Layout truth: status-advanced-v2-psblue mockup. Calm, flat, hairlines;
+   live meters use --accent-bright. Live readouts are for checking, not for
+   everyday tuning. */
+
+.ctl-view {
+  font-size: 12px;
+  line-height: 1.45;
+  color: var(--ink);
 }
 
-.dm-controllers-workbench {
-  display: grid;
-  gap: 12px;
-  min-width: 0;
-  align-content: start;
+.ctl-head {
+  display: flex;
+  align-items: baseline;
+  flex-wrap: wrap;
+  gap: 4px 10px;
 }
 
-.dm-controller-overview,
-.dm-input-path-panel,
-.dm-power-diagnostics-panel,
-.dm-live-input-panel,
-.dm-calibration-readout,
-.dm-controller-empty-state {
-  display: grid;
-  gap: 14px;
-  min-width: 0;
-  padding: 14px;
-  border: 1px solid rgba(113, 113, 122, 0.24);
-  border-radius: 6px;
-  background:
-    linear-gradient(180deg, rgba(226, 232, 240, 0.034), rgba(226, 232, 240, 0.012)),
-    rgba(14, 15, 18, 0.82);
-  box-shadow: inset 0 1px 0 rgba(226, 232, 240, 0.052);
+.ctl-title {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--ink);
 }
 
-.dm-controller-empty-state {
-  align-content: center;
-  min-height: 360px;
-  justify-items: center;
-  text-align: center;
+.ctl-sub {
+  font-size: 11px;
+  color: var(--ink-muted);
 }
 
-.dm-controller-empty-state strong {
-  color: #FFFFFF;
-  font-family: "Space Grotesk", "Inter Tight", Inter, sans-serif;
-  font-size: 22px;
-  font-weight: 760;
+/* Groups row — intrinsic widths, wraps naturally (same rhythm as Status). */
+.ctl-groups {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: 16px 22px;
+  margin-top: 14px;
 }
 
-.dm-controller-empty-state span {
-  width: min(440px, 100%);
-  color: var(--tungsten);
-  font-size: 13px;
-  font-weight: 650;
-  line-height: 1.45;
+.ctl-group {
+  flex: 1 1 280px;
+  min-width: 260px;
+  max-width: 420px;
+  display: grid;
+  gap: 6px;
+  align-content: start;
 }
 
-.dm-controller-overview {
-  grid-template-columns: minmax(210px, 0.8fr) minmax(0, 1.6fr);
-  align-items: start;
+.ctl-group.narrow {
+  flex: 1 1 240px;
+  min-width: 230px;
+  max-width: 360px;
 }
 
-.dm-controller-overview-copy,
-.dm-live-panel-head > div,
-.dm-stick-head,
-.dm-trigger-meter > div:first-child {
-  display: grid;
-  gap: 4px;
-  min-width: 0;
+.ctl-group-controllers {
+  flex: 1 1 100%;
+  max-width: none;
 }
 
-.dm-controller-overview-copy span,
-.dm-live-panel-head span,
-.dm-stick-head span,
-.dm-trigger-meter span,
-.dm-calibration-grid dt,
-.dm-controller-metric-grid dt,
-.dm-stick-module dt {
-  color: var(--tungsten);
-  font-size: 10px;
-  font-weight: 800;
-  line-height: 1.15;
-  text-transform: uppercase;
+.ctl-group-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
 }
 
-.dm-controller-overview-copy strong,
-.dm-live-panel-head strong,
-.dm-trigger-meter strong {
-  color: #FFFFFF;
-  font-family: "Space Grotesk", "Inter Tight", Inter, sans-serif;
-  font-size: 19px;
-  font-weight: 760;
-  line-height: 1.05;
+.ctl-sublabel {
+  margin-top: 10px;
 }
 
-.dm-controller-overview-copy small {
-  color: var(--tungsten);
-  font-size: 12px;
-  font-weight: 700;
+.ctl-controller-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
 }
 
-.dm-controller-metric-grid,
-.dm-calibration-grid {
+/* Bounded fields only where content needs one. */
+.ctl-surf {
+  padding: 12px 14px;
+  background: var(--surface);
+  border-radius: var(--radius-m);
+}
+
+.ctl-empty {
   display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 10px 14px;
-  margin: 0;
-  min-width: 0;
+  gap: 4px;
 }
 
-.dm-controller-metric-grid > div,
-.dm-calibration-grid > div {
-  min-width: 0;
+.ctl-empty strong {
+  font-weight: 600;
 }
 
-.dm-controller-metric-grid > div.wide {
-  grid-column: 1 / -1;
+.ctl-empty span {
+  font-size: 11px;
+  color: var(--ink-muted);
 }
 
-.dm-controller-metric-grid dd,
-.dm-calibration-grid dd,
-.dm-stick-module dd {
-  margin: 0;
-  color: #FFFFFF;
-  font-size: 12px;
-  font-weight: 650;
-  line-height: 1.35;
-  overflow-wrap: anywhere;
+.ctl-mut {
+  color: var(--ink-muted);
 }
 
-.dm-controller-metric-grid dd.mono {
-  color: var(--haptic);
-  font-family: "JetBrains Mono", ui-monospace, monospace;
+.ctl-mono {
+  font-family: var(--font-mono);
   font-size: 11px;
-  font-weight: 550;
+  overflow-wrap: anywhere;
+}
+
+/* Hairline rows (srow pattern from the mockup). */
+.ctl-rows {
+  display: grid;
 }
 
-.dm-live-panel-head {
+.ctl-row {
   display: flex;
-  align-items: center;
   justify-content: space-between;
+  align-items: baseline;
   gap: 12px;
-  min-width: 0;
+  padding: 6px 0;
+  font-size: 11px;
+  border-bottom: 1px solid var(--hairline);
 }
 
-.dm-live-panel-head code,
-.dm-stick-head code,
-.dm-button-state code {
-  color: var(--haptic);
-  font-family: "JetBrains Mono", ui-monospace, monospace;
-  font-size: 11px;
-  font-weight: 750;
+.ctl-row:last-child {
+  border-bottom: 0;
 }
 
-.dm-input-path-actions {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(70px, 1fr)) minmax(8px, 0.4fr) repeat(2, minmax(76px, 0.9fr));
-  gap: 8px;
-  align-items: center;
-  min-width: 0;
+.ctl-row > span:last-child {
+  text-align: right;
 }
 
-.dm-input-path-actions button {
-  min-height: 32px;
-  padding: 0 10px;
-  border: 1px solid rgba(113, 113, 122, 0.34);
-  border-radius: 5px;
-  color: rgba(226, 232, 240, 0.82);
-  background: rgba(10, 10, 12, 0.42);
-  font-size: 12px;
-  font-weight: 760;
+/* Live meters — label/value row plus a 4px accent-bright bar. */
+.ctl-meter-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  gap: 12px;
+  font-size: 11px;
 }
 
-.dm-input-path-actions button.active,
-.dm-input-path-actions button.primary {
-  border-color: rgba(0, 112, 204, 0.82);
-  color: #FFFFFF;
-  background: rgba(0, 112, 204, 0.2);
+.ctl-meter-row + .ctl-meter,
+.ctl-meter + .ctl-meter-row,
+.ctl-meter-row + .ctl-meter-row {
+  margin-top: 3px;
 }
 
-.dm-input-path-actions button:disabled {
-  cursor: not-allowed;
-  opacity: 0.48;
+.ctl-meter + .ctl-meter-row {
+  margin-top: 8px;
 }
 
-.dm-power-suggestion-list {
-  display: grid;
-  gap: 8px;
-  margin: 0;
+.ctl-meter {
+  height: 4px;
+  border-radius: 2px;
+  background: var(--surface-raised);
+  overflow: hidden;
 }
 
-.dm-power-suggestion-list p {
-  margin: 0;
-  padding: 8px 10px;
-  border: 1px solid rgba(113, 113, 122, 0.2);
-  border-radius: 5px;
-  color: rgba(226, 232, 240, 0.82);
-  background: rgba(10, 10, 12, 0.28);
-  font-size: 12px;
-  font-weight: 650;
-  line-height: 1.35;
+.ctl-meter span {
+  display: block;
+  width: var(--trigger-fill, 0%);
+  height: 100%;
+  border-radius: inherit;
+  background: var(--accent-bright);
 }
 
-.dm-live-stick-grid {
+/* Stick plots — flat field, hairline crosshair, accent-bright dot. */
+.ctl-stick-grid {
   display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
   gap: 12px;
-  min-width: 0;
+  margin-top: 10px;
 }
 
-.dm-stick-module {
+.ctl-stick {
   display: grid;
-  gap: 10px;
+  gap: 8px;
   min-width: 0;
-  padding: 12px;
-  border: 1px solid rgba(113, 113, 122, 0.22);
-  border-radius: 6px;
-  background: rgba(10, 10, 12, 0.32);
+  padding: 12px 14px;
+  background: var(--surface);
+  border-radius: var(--radius-m);
 }
 
-.dm-stick-head,
-.dm-trigger-meter > div:first-child {
-  grid-template-columns: 1fr auto;
-  align-items: center;
-}
-
-.dm-stick-plot {
+.ctl-stick-plot {
   position: relative;
-  width: min(240px, 100%);
+  width: min(150px, 100%);
   aspect-ratio: 1;
   margin: 0 auto;
-  border: 1px solid rgba(113, 113, 122, 0.3);
+  border: 1px solid var(--hairline-strong);
   border-radius: 50%;
   background:
-    linear-gradient(rgba(113, 113, 122, 0.22), rgba(113, 113, 122, 0.22)) 50% 0 / 1px 100% no-repeat,
-    linear-gradient(90deg, rgba(113, 113, 122, 0.22), rgba(113, 113, 122, 0.22)) 0 50% / 100% 1px no-repeat,
-    radial-gradient(circle at center, rgba(0, 112, 204, 0.16), transparent 58%),
-    rgba(5, 5, 7, 0.48);
+    linear-gradient(var(--hairline), var(--hairline)) 50% 0 / 1px 100% no-repeat,
+    linear-gradient(90deg, var(--hairline), var(--hairline)) 0 50% / 100% 1px no-repeat;
 }
 
-.dm-stick-ring {
+.ctl-stick-ring {
   position: absolute;
-  inset: calc(50% - var(--stick-mag) / 2);
-  border: 1px solid rgba(27, 177, 124, 0.46);
+  inset: calc(50% - var(--stick-mag, 8%) / 2);
+  border: 1px solid var(--accent-outline);
   border-radius: 50%;
-  opacity: 0.66;
 }
 
-.dm-stick-dot {
+.ctl-stick-dot {
   position: absolute;
-  left: var(--stick-x);
-  top: var(--stick-y);
-  width: 13px;
-  height: 13px;
-  border: 2px solid #FFFFFF;
+  left: var(--stick-x, 50%);
+  top: var(--stick-y, 50%);
+  width: 11px;
+  height: 11px;
   border-radius: 50%;
-  background: var(--actuation);
-  box-shadow: 0 0 16px rgba(0, 112, 204, 0.42);
+  background: var(--accent-bright);
   transform: translate(-50%, -50%);
 }
 
-.dm-stick-module dl {
+.ctl-deadzone-row {
   display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
+  grid-template-columns: auto 1fr auto;
+  align-items: center;
   gap: 8px;
-  margin: 0;
+  font-size: 11px;
+  color: var(--ink-muted);
+}
+
+.ctl-deadzone-row input[type='range'] {
+  width: 100%;
+  min-width: 0;
+  accent-color: var(--accent-bright);
+}
+
+.ctl-deadzone-row .ctl-mono {
+  color: var(--ink);
 }
 
-.dm-stick-tuning-row {
+/* Live button states — flat chips; pressed lights the accent. */
+.ctl-button-grid {
   display: grid;
-  grid-template-columns: minmax(68px, auto) minmax(120px, 1fr) 44px;
+  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
+  gap: 6px;
+  margin-top: 10px;
+}
+
+.ctl-button-state {
+  display: flex;
   align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  min-width: 0;
+  padding: 5px 8px;
+  font-size: 11px;
+  border: 1px solid var(--hairline);
+  border-radius: var(--radius-s);
+  background: var(--surface);
+}
+
+.ctl-button-state.pressed {
+  border-color: var(--accent-outline);
+  background: var(--accent-tint);
+}
+
+.ctl-button-state span:first-child {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ctl-button-state .ctl-mono {
+  color: var(--ink-muted);
+}
+
+.ctl-button-state.pressed .ctl-mono {
+  color: var(--accent-text);
+}
+
+/* Buttons — quiet by default, accent for the primary action. */
+.ctl-actions {
+  display: flex;
+  flex-wrap: wrap;
   gap: 8px;
   margin-top: 10px;
-  color: var(--muted);
-  font-size: 0.78rem;
 }
 
-.dm-stick-tuning-row code {
-  color: var(--text);
-  text-align: right;
+.ctl-button {
+  min-height: 28px;
+  padding: 4px 12px;
+  font: inherit;
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--ink);
+  background: var(--surface-raised);
+  border: 0;
+  border-radius: var(--radius-s);
+  cursor: pointer;
+  transition: background var(--speed) var(--ease);
 }
 
-.dm-trigger-meter-grid {
+.ctl-button.active {
+  color: var(--accent-text);
+  background: var(--accent-tint);
+  outline: 1px solid var(--accent-outline);
+}
+
+.ctl-button.primary {
+  color: #ffffff;
+  background: var(--accent);
+}
+
+.ctl-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.48;
+}
+
+.ctl-button:focus-visible {
+  outline: 2px solid var(--accent-bright);
+  outline-offset: 1px;
+}
+
+.ctl-note {
+  margin: 0;
+  font-size: 11px;
+  line-height: 1.45;
+  color: var(--ink-muted);
+}
+
+.ctl-note.error {
+  color: var(--danger);
+}
+
+.ctl-suggestions {
   display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 6px;
+  margin-top: 8px;
+}
+
+/* Support group */
+.ctl-support {
+  display: grid;
+  gap: 6px;
+  justify-items: start;
+  font-size: 11px;
+}
+
+/* Edge onboard slots */
+.edge-slot-list {
+  display: grid;
+}
+
+.edge-slot-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
   gap: 12px;
+  padding: 10px 0;
+  border-bottom: 1px solid var(--hairline);
 }
 
-.dm-trigger-meter {
+.edge-slot-row:last-child {
+  border-bottom: 0;
+}
+
+.edge-slot-row.disabled {
+  opacity: 0.6;
+}
+
+.edge-slot-copy {
   display: grid;
-  gap: 8px;
+  gap: 2px;
   min-width: 0;
-  padding: 12px;
-  border: 1px solid rgba(113, 113, 122, 0.22);
-  border-radius: 6px;
-  background: rgba(10, 10, 12, 0.32);
 }
 
-.dm-trigger-bar {
-  position: relative;
-  height: 12px;
-  overflow: hidden;
-  border-radius: 999px;
-  background: rgba(113, 113, 122, 0.22);
+.edge-slot-copy strong {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--ink);
 }
 
-.dm-trigger-bar span {
-  display: block;
-  width: var(--trigger-fill);
-  height: 100%;
-  border-radius: inherit;
-  background: linear-gradient(90deg, var(--actuation), #1BB17C);
+.edge-slot-copy small {
+  font-size: 11px;
+  color: var(--ink-muted);
 }
 
-.dm-button-grid {
+/* Controller card (rendered in the Controller details chooser).
+   Moved from the retired games.css; HUD-era alias tokens translated to the
+   calm-console tokens. */
+.dm-controller-card {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
+  justify-items: center;
   gap: 8px;
+  min-height: 0;
+  padding: 12px 12px 14px;
+  border: 1px solid var(--hairline-strong);
+  border-radius: var(--radius-m);
+  color: var(--ink);
+  background: var(--surface);
+  cursor: pointer;
+  text-align: left;
+  transition:
+    border-color var(--speed) var(--ease),
+    background-color var(--speed) var(--ease),
+    box-shadow var(--speed) var(--ease);
+}
+
+.dm-controller-card:hover,
+.dm-controller-card.active {
+  border-color: var(--accent-outline);
+  background-color: var(--accent-tint);
+}
+
+.dm-controller-card:focus-visible,
+.dm-controller-select-zone:focus-visible,
+.dm-controller-rename-button:focus-visible,
+.dm-controller-expand-button:focus-visible,
+.dm-controller-rename-actions button:focus-visible {
+  outline: 2px solid var(--accent-bright);
+  outline-offset: 2px;
+}
+
+.dm-controller-card.disconnected {
+  opacity: 0.62;
+}
+
+.dm-controller-select-zone {
+  display: grid;
+  justify-items: center;
+  gap: 12px;
+  width: 100%;
   min-width: 0;
+  padding: 0;
+  border: 0;
+  color: inherit;
+  background: transparent;
+  text-align: center;
 }
 
-.dm-button-state {
+.dm-controller-card-top {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 8px;
+  width: 100%;
   min-width: 0;
-  min-height: 34px;
-  padding: 8px 9px;
-  border: 1px solid rgba(113, 113, 122, 0.22);
-  border-radius: 5px;
-  background: rgba(10, 10, 12, 0.34);
 }
 
-.dm-button-state.pressed {
-  border-color: rgba(27, 177, 124, 0.64);
-  background: rgba(27, 177, 124, 0.14);
+.dm-controller-card-top code {
+  color: var(--ink);
+  font-family: var(--font-mono);
+  font-size: 11px;
+  font-weight: 800;
+}
+
+.dm-battery-pill.compact {
+  font-size: 11px;
+}
+
+.dm-controller-glyph {
+  flex: 0 0 auto;
+  color: var(--ink);
+  background: currentColor;
+  mask: url("/dualsense-controller.svg") center / contain no-repeat;
+  -webkit-mask: url("/dualsense-controller.svg") center / contain no-repeat;
 }
 
-.dm-button-state span {
+.dm-controller-glyph.controller-card {
+  width: min(140px, 78%);
+  height: 80px;
+  margin: 2px 0 0;
+  opacity: 0.95;
+}
+
+.dm-controller-copy {
+  display: grid;
+  justify-items: center;
+  gap: 5px;
   min-width: 0;
-  overflow: hidden;
-  color: #FFFFFF;
+  text-align: center;
+}
+
+.dm-controller-copy strong {
+  overflow-wrap: break-word;
+  line-height: 1.18;
+  font-size: 15px;
+}
+
+.dm-controller-copy small {
+  overflow-wrap: break-word;
+  line-height: 1.3;
+  color: var(--ink-muted);
+}
+
+.dm-controller-copy .dm-controller-id {
+  margin-top: 2px;
+  font-family: var(--font-mono);
+  font-size: 10px;
+  letter-spacing: 0.02em;
+  opacity: 0.78;
+}
+
+.dm-controller-capabilities {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 5px;
+  margin-top: 7px;
+}
+
+.dm-controller-capabilities em {
+  padding: 3px 6px;
+  border-radius: 4px;
+  color: var(--ink);
+  background: var(--surface-raised);
+  font-size: 10px;
+  font-style: normal;
+  font-weight: 750;
+  line-height: 1;
+}
+
+.dm-controller-capabilities.expanded {
+  justify-content: flex-start;
+  margin-top: 4px;
+}
+
+.dm-controller-rename-button,
+.dm-controller-expand-button,
+.dm-controller-rename-actions button {
+  min-height: 26px;
+  padding: 0 9px;
+  border: 1px solid var(--hairline-strong);
+  border-radius: var(--radius-s);
+  color: var(--ink);
+  background: var(--surface-raised);
+  font-size: 11px;
+  font-weight: 800;
+  cursor: pointer;
+}
+
+.dm-controller-rename-button:hover,
+.dm-controller-expand-button:hover,
+.dm-controller-rename-actions button:hover {
+  border-color: var(--accent-outline);
+  background: var(--accent-tint);
+}
+
+.dm-controller-card-actions {
+  display: inline-flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 6px;
+}
+
+.dm-controller-details {
+  width: 100%;
+  margin-top: 6px;
+  padding: 12px;
+  border-top: 1px solid var(--hairline);
+  background: var(--bg-rail);
+  border-radius: 0 0 var(--radius-s) var(--radius-s);
+  text-align: left;
+}
+
+.dm-controller-details-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px 14px;
+  margin: 0;
+}
+
+.dm-controller-details-grid > div {
+  min-width: 0;
+}
+
+.dm-controller-details-grid > div.wide {
+  grid-column: 1 / -1;
+}
+
+.dm-controller-details-grid dt {
+  margin: 0 0 2px;
+  color: var(--ink-muted);
+  font-size: 10px;
+  font-weight: 800;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.dm-controller-details-grid dd {
+  margin: 0;
   font-size: 12px;
-  font-weight: 760;
-  line-height: 1.15;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  font-weight: 600;
+  line-height: 1.35;
+  overflow-wrap: break-word;
+}
+
+.dm-controller-details-grid dd.mono {
+  color: var(--ink);
+  font-family: var(--font-mono);
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0.02em;
+  overflow-wrap: anywhere;
+}
+
+.dm-controller-rename-input {
+  width: min(240px, 100%);
+  height: 34px;
+  border: 1px solid var(--accent-outline);
+  border-radius: var(--radius-s);
+  color: var(--ink);
+  background: var(--surface-raised);
+  font-size: 13px;
+  font-weight: 800;
+  outline: none;
+  padding: 0 10px;
+  text-align: center;
+}
+
+.dm-controller-rename-wrap {
+  display: grid;
+  justify-items: center;
+  gap: 7px;
+  width: 100%;
+}
+
+.dm-controller-rename-actions {
+  display: flex;
+  justify-content: center;
+  gap: 6px;
+}
+
+@media (max-width: 720px) {
+  .dm-controller-card {
+    min-height: 220px;
+  }
 }
diff --git a/web/src/styles/dialogs.css b/web/src/styles/dialogs.css
index 3db70d7..18ed5d8 100644
--- a/web/src/styles/dialogs.css
+++ b/web/src/styles/dialogs.css
@@ -87,7 +87,7 @@
   height: 30px;
   border: 0;
   border-radius: 4px;
-  color: var(--haptic);
+  color: var(--ink);
   background: rgba(10, 10, 12, 0.78);
   box-shadow: inset 0 0 0 1px rgba(113, 113, 122, 0.22);
   font-family: "JetBrains Mono", monospace;
@@ -123,7 +123,7 @@
 }
 
 .ops-state span {
-  color: var(--tungsten);
+  color: var(--ink-muted);
   font-size: 13px;
 }
 
diff --git a/web/src/styles/feedback.css b/web/src/styles/feedback.css
index 657edcc..9d9aba9 100644
--- a/web/src/styles/feedback.css
+++ b/web/src/styles/feedback.css
@@ -6,8 +6,8 @@
   width: min(1380px, 100%);
   margin: 0 auto 10px;
   padding: 10px 12px;
-  border-left: 2px solid var(--actuation);
-  color: var(--haptic);
+  border-left: 2px solid var(--accent);
+  color: var(--ink);
   background: rgba(18, 18, 20, 0.92);
   box-shadow:
     inset 0 1px 0 rgba(226, 232, 240, 0.055),
@@ -21,7 +21,7 @@
 }
 
 .dm-support-copy span {
-  color: var(--actuation);
+  color: var(--accent);
   font-size: 10px;
   font-weight: 850;
   letter-spacing: 0.12em;
@@ -39,7 +39,7 @@
 .dm-support-copy p,
 .dm-support-message {
   margin: 0;
-  color: var(--tungsten);
+  color: var(--ink-muted);
   font-size: 12px;
   font-weight: 600;
   line-height: 1.35;
@@ -99,17 +99,17 @@
 }
 
 .dm-toast.success {
-  --toast-accent: #22C55E;
-  --toast-bg: rgba(34, 197, 94, 0.18);
+  --toast-accent: var(--ok);
+  --toast-bg: var(--ok-tint);
 }
 
 .dm-toast.info {
-  --toast-accent: var(--actuation);
+  --toast-accent: var(--accent);
   --toast-bg: rgba(0, 112, 204, 0.18);
 }
 
 .dm-toast.error {
-  --toast-accent: var(--overdrive);
+  --toast-accent: var(--danger);
   --toast-bg: rgba(240, 62, 62, 0.2);
 }
 
@@ -128,3 +128,60 @@
   line-height: 1.35;
   overflow-wrap: anywhere;
 }
+
+/* Inline notice banners (partial-data + update notices in the main column).
+   Moved from the retired games-catalog.css. */
+.dm-warning {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  max-width: 1380px;
+  margin: 0 auto 10px;
+  padding: 8px 12px;
+  border: 0;
+  border-left: 2px solid var(--danger);
+  color: #FECACA;
+  background: rgba(240, 62, 62, 0.08);
+  font-size: 12px;
+}
+
+.dm-warning button {
+  border: 1px solid rgba(254, 202, 202, 0.34);
+  border-radius: 4px;
+  color: #FECACA;
+  background: transparent;
+  font-size: 11px;
+}
+
+.dm-warning.update {
+  border-left-color: var(--accent);
+  color: #D8ECFF;
+  background: var(--accent-tint);
+}
+
+.dm-warning-actions {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  gap: 8px;
+}
+
+.dm-warning a {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  min-height: 24px;
+  padding: 0 8px;
+  border: 1px solid rgba(216, 236, 255, 0.32);
+  border-radius: 4px;
+  color: #D8ECFF;
+  font-size: 11px;
+  font-weight: 750;
+  text-decoration: none;
+}
+
+.dm-warning.update button {
+  border-color: rgba(216, 236, 255, 0.32);
+  color: #D8ECFF;
+}
diff --git a/web/src/styles/games-catalog.css b/web/src/styles/games-catalog.css
deleted file mode 100644
index f0f4155..0000000
--- a/web/src/styles/games-catalog.css
+++ /dev/null
@@ -1,301 +0,0 @@
-.dm-scope-strip button {
-  display: inline-grid;
-  grid-template-columns: 30px minmax(0, max-content) auto;
-  align-items: center;
-  gap: 10px;
-  min-height: 0;
-  width: max-content;
-  max-width: 100%;
-  padding: 8px 12px;
-}
-
-.dm-scope-strip {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 6px;
-}
-
-.dm-scope-chip {
-  display: inline-flex;
-  align-items: baseline;
-  flex-wrap: wrap;
-  gap: 4px 12px;
-  min-width: 0;
-}
-
-.dm-scope-chip .dm-scope-chip-label {
-  display: inline;
-  margin: 0;
-  color: var(--tungsten);
-  font-size: 11px;
-  font-weight: 800;
-  letter-spacing: 0.04em;
-  line-height: 1;
-  text-transform: uppercase;
-  white-space: nowrap;
-}
-
-strong.dm-scope-chip-value {
-  display: inline;
-  margin: 0;
-  overflow: visible;
-  color: var(--actuation);
-  font-family: "Space Grotesk", "Inter Tight", Inter, sans-serif;
-  font-size: 15px;
-  font-weight: 700;
-  line-height: 1;
-  letter-spacing: 0.01em;
-  text-overflow: clip;
-  white-space: nowrap;
-}
-
-small.dm-scope-chip-detail {
-  display: inline;
-  margin: 0;
-  overflow: visible;
-  color: var(--tungsten);
-  font-size: 11px;
-  font-weight: 600;
-  line-height: 1.2;
-  letter-spacing: 0.01em;
-  text-overflow: clip;
-  text-transform: none;
-  white-space: normal;
-}
-
-.dm-game-card {
-  position: relative;
-  display: grid;
-  grid-template-columns: 220px minmax(0, 1fr);
-  align-items: center;
-  gap: 16px;
-  min-height: 180px;
-  overflow: hidden;
-  padding: 14px 16px 14px 14px;
-}
-
-.dm-game-card::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  opacity: 0.34;
-  background-image: var(--game-hero);
-  background-size: cover;
-  background-position: center;
-  filter: saturate(1.08);
-}
-
-.dm-game-card::after {
-  content: "";
-  position: absolute;
-  inset: 0;
-  background:
-    linear-gradient(180deg, rgba(10, 10, 12, 0.16), rgba(10, 10, 12, 0.72) 58%, rgba(10, 10, 12, 0.92)),
-    linear-gradient(90deg, rgba(10, 10, 12, 0.86), rgba(10, 10, 12, 0.36));
-}
-
-.dm-game-card > * {
-  position: relative;
-  z-index: 1;
-}
-
-.dm-game-grid > button.running {
-  border-color: rgba(34, 197, 94, 0.38);
-}
-
-.dm-game-grid > button.custom .dm-game-card-media code {
-  color: var(--haptic);
-}
-
-.dm-game-card-add {
-  grid-template-columns: 110px minmax(0, 1fr) !important;
-  align-items: center;
-  border-style: dashed !important;
-  border-color: rgba(0, 112, 204, 0.45) !important;
-  background:
-    linear-gradient(180deg, rgba(0, 112, 204, 0.08), rgba(0, 112, 204, 0.02)),
-    rgba(18, 18, 20, 0.5) !important;
-}
-
-.dm-game-card-add::before,
-.dm-game-card-add::after {
-  display: none;
-}
-
-.dm-game-card-add:hover {
-  border-color: rgba(0, 112, 204, 0.78) !important;
-  background: rgba(0, 112, 204, 0.16) !important;
-}
-
-.dm-add-game-icon {
-  display: grid;
-  place-items: center;
-  width: 96px;
-  height: 96px;
-  border-radius: 50%;
-  color: var(--actuation);
-  background: rgba(0, 112, 204, 0.12);
-  font-family: "Space Grotesk", "Inter Tight", Inter, sans-serif;
-  font-size: 48px;
-  font-weight: 300;
-  line-height: 1;
-}
-
-.dm-game-card-add .dm-game-copy small {
-  color: var(--tungsten);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.01em;
-  line-height: 1.4;
-  white-space: normal;
-  text-overflow: clip;
-  overflow: visible;
-  text-transform: none;
-}
-
-.dm-game-card-media {
-  position: relative;
-  display: grid;
-  align-content: end;
-  gap: 8px;
-  min-width: 0;
-}
-
-.dm-game-card-media img,
-.dm-game-art-fallback {
-  width: 220px;
-  height: 150px;
-  border-radius: 6px;
-  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.34);
-  grid-column: 1;
-  grid-row: 1;
-}
-
-.dm-game-card-media img {
-  position: relative;
-  z-index: 1;
-  object-fit: cover;
-  opacity: 0.92;
-}
-
-.dm-game-art-fallback {
-  display: grid;
-  place-items: center;
-  overflow: hidden;
-  padding: 8px;
-  color: #FFFFFF;
-  background:
-    radial-gradient(circle at 32% 28%, rgba(0, 112, 204, 0.22), transparent 72%),
-    rgba(18, 18, 20, 0.62);
-}
-
-.dm-game-art-fallback svg {
-  max-width: 100%;
-  max-height: 100%;
-  width: auto;
-  height: 100%;
-}
-
-.dm-game-copy {
-  display: grid;
-  gap: 9px;
-  min-width: 0;
-}
-
-.dm-game-card-media code {
-  justify-self: start;
-  color: var(--actuation);
-  font-family: "JetBrains Mono", monospace;
-  font-size: 10px;
-  font-weight: 800;
-}
-
-.dm-game-grid > button.running code {
-  color: var(--ready);
-}
-
-.dm-game-meta {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-  min-width: 0;
-}
-
-.dm-game-meta em {
-  padding: 4px 7px;
-  border-radius: 4px;
-  color: var(--haptic);
-  background: rgba(226, 232, 240, 0.075);
-  font-size: 10px;
-  font-style: normal;
-  font-weight: 750;
-  line-height: 1;
-}
-
-.dm-empty-choice {
-  display: grid;
-  align-content: center;
-  gap: 6px;
-  min-height: 90px;
-  padding: 16px;
-}
-
-.dm-empty-choice.wide {
-  min-height: 150px;
-}
-
-.dm-warning {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  max-width: 1380px;
-  margin: 0 auto 10px;
-  padding: 8px 12px;
-  border: 0;
-  border-left: 2px solid var(--overdrive);
-  color: #FECACA;
-  background: rgba(240, 62, 62, 0.08);
-  font-size: 12px;
-}
-
-.dm-warning button {
-  border: 1px solid rgba(254, 202, 202, 0.34);
-  border-radius: 4px;
-  color: #FECACA;
-  background: transparent;
-  font-size: 11px;
-}
-
-.dm-warning.update {
-  border-left-color: var(--actuation);
-  color: #D8ECFF;
-  background: rgba(0, 112, 204, 0.1);
-}
-
-.dm-warning-actions {
-  display: inline-flex;
-  flex: 0 0 auto;
-  align-items: center;
-  gap: 8px;
-}
-
-.dm-warning a {
-  display: inline-flex;
-  align-items: center;
-  gap: 5px;
-  min-height: 24px;
-  padding: 0 8px;
-  border: 1px solid rgba(216, 236, 255, 0.32);
-  border-radius: 4px;
-  color: #D8ECFF;
-  font-size: 11px;
-  font-weight: 750;
-  text-decoration: none;
-}
-
-.dm-warning.update button {
-  border-color: rgba(216, 236, 255, 0.32);
-  color: #D8ECFF;
-}
diff --git a/web/src/styles/games.css b/web/src/styles/games.css
deleted file mode 100644
index 51d954e..0000000
--- a/web/src/styles/games.css
+++ /dev/null
@@ -1,524 +0,0 @@
-.dm-games-page {
-  display: grid;
-  grid-template-columns: minmax(0, 1220px);
-  justify-content: center;
-  gap: clamp(16px, 2vw, 26px);
-  flex: 1 1 0;
-  width: min(1240px, 100%);
-  min-height: 0;
-  margin: 18px auto 0;
-}
-
-.dm-games-column {
-  display: grid;
-  align-content: start;
-  gap: 12px;
-  min-width: 0;
-}
-
-.dm-games-column.wide {
-  min-width: 0;
-}
-
-.dm-games-head {
-  display: grid;
-  gap: 5px;
-  min-width: 0;
-}
-
-.dm-games-head span,
-.dm-controller-choice small,
-.dm-game-copy small,
-.dm-empty-choice span {
-  color: var(--tungsten);
-  font-size: 11px;
-  font-weight: 800;
-  line-height: 1.2;
-  text-transform: uppercase;
-}
-
-.dm-games-head h2 {
-  margin: 0;
-  color: #FFFFFF;
-  font-family: "Space Grotesk", "Inter Tight", Inter, sans-serif;
-  font-size: clamp(24px, 2.4vw, 34px);
-  font-weight: 700;
-  line-height: 1;
-}
-
-.dm-controller-choice-list,
-.dm-profile-target-strip,
-.dm-scope-strip,
-.dm-game-grid {
-  display: grid;
-  gap: 10px;
-  min-width: 0;
-}
-
-.dm-profile-target-strip {
-  grid-template-columns: minmax(220px, 1fr) repeat(auto-fit, minmax(96px, max-content));
-  align-items: center;
-  padding: 12px;
-  border: 1px solid rgba(113, 113, 122, 0.24);
-  border-radius: 6px;
-  background: rgba(18, 18, 20, 0.58);
-  box-shadow: inset 0 1px 0 rgba(226, 232, 240, 0.045);
-}
-
-.dm-profile-target-strip div {
-  display: grid;
-  gap: 3px;
-  min-width: 0;
-}
-
-.dm-profile-target-strip span,
-.dm-profile-target-strip small {
-  color: var(--tungsten);
-  font-size: 10px;
-  font-weight: 800;
-  line-height: 1.15;
-  text-transform: uppercase;
-}
-
-.dm-profile-target-strip strong {
-  overflow: hidden;
-  color: #FFFFFF;
-  font-size: 14px;
-  font-weight: 760;
-  line-height: 1.2;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.dm-profile-target-strip small {
-  font-size: 11px;
-  font-weight: 650;
-  text-transform: none;
-}
-
-.dm-profile-target-strip button {
-  min-height: 30px;
-  padding: 0 11px;
-  border: 1px solid rgba(113, 113, 122, 0.34);
-  border-radius: 5px;
-  color: rgba(226, 232, 240, 0.82);
-  background: rgba(10, 10, 12, 0.42);
-  font-size: 11px;
-  font-weight: 800;
-}
-
-.dm-profile-target-strip button:hover,
-.dm-profile-target-strip button.active,
-.dm-profile-target-strip button:focus-visible {
-  border-color: rgba(0, 112, 204, 0.72);
-  color: #FFFFFF;
-  background: rgba(0, 112, 204, 0.16);
-  outline: none;
-}
-
-.dm-game-grid {
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-}
-
-@media (max-width: 1100px) {
-  .dm-game-grid {
-    grid-template-columns: minmax(0, 1fr);
-  }
-}
-
-.dm-controller-card,
-.dm-scope-strip button,
-.dm-game-grid > button,
-.dm-empty-choice {
-  border: 1px solid rgba(113, 113, 122, 0.22);
-  border-radius: 6px;
-  color: var(--haptic);
-  background:
-    linear-gradient(180deg, rgba(226, 232, 240, 0.035), rgba(226, 232, 240, 0.012)),
-    rgba(18, 18, 20, 0.74);
-  box-shadow: inset 0 1px 0 rgba(226, 232, 240, 0.055);
-  cursor: pointer;
-  text-align: left;
-  transition:
-    border-color 150ms ease-out,
-    background-color 150ms ease-out,
-    box-shadow 150ms ease-out,
-    transform 150ms ease-out;
-}
-
-.dm-controller-card {
-  display: grid;
-  justify-items: center;
-  gap: 8px;
-  min-height: 0;
-  padding: 12px 12px 14px;
-}
-
-.dm-edge-slots {
-  display: grid;
-  gap: 10px;
-  padding: 12px;
-  border: 1px solid rgba(113, 113, 122, 0.26);
-  border-radius: 6px;
-  background:
-    linear-gradient(180deg, rgba(226, 232, 240, 0.035), rgba(226, 232, 240, 0.012)),
-    rgba(14, 15, 18, 0.82);
-  box-shadow: inset 0 1px 0 rgba(226, 232, 240, 0.05);
-}
-
-.dm-edge-slots-head,
-.dm-edge-slot-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 10px;
-  min-width: 0;
-}
-
-.dm-edge-slots-head > div,
-.dm-edge-slot-row > div,
-.dm-edge-slot-copy {
-  display: grid;
-  gap: 3px;
-  min-width: 0;
-}
-
-.dm-edge-slots-head span,
-.dm-edge-slot-copy span,
-.dm-edge-slot-copy small {
-  color: var(--tungsten);
-  font-size: 10px;
-  font-weight: 800;
-  line-height: 1.15;
-  text-transform: uppercase;
-}
-
-.dm-edge-slots-head strong,
-.dm-edge-slot-copy strong {
-  min-width: 0;
-  overflow: hidden;
-  color: #FFFFFF;
-  font-size: 13px;
-  font-weight: 800;
-  line-height: 1.15;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.dm-edge-slots-note {
-  margin: 0;
-  color: #A1A1AA;
-  font-size: 11px;
-  font-weight: 650;
-  line-height: 1.35;
-}
-
-.dm-edge-slots-note.error {
-  color: #FF6B6B;
-}
-
-.dm-edge-slot-list {
-  display: grid;
-  gap: 6px;
-  min-width: 0;
-}
-
-.dm-edge-slot-row {
-  min-height: 48px;
-  padding: 8px 0;
-  border-top: 1px solid rgba(113, 113, 122, 0.22);
-}
-
-.dm-edge-slot-row .dscc-tooltip.block {
-  flex: 1 1 auto;
-  width: auto;
-  min-width: 0;
-}
-
-.dm-edge-slot-row:first-child {
-  border-top: 0;
-}
-
-.dm-edge-slot-row.disabled {
-  opacity: 0.62;
-}
-
-.dm-controller-select-zone {
-  display: grid;
-  justify-items: center;
-  gap: 12px;
-  width: 100%;
-  min-width: 0;
-  padding: 0;
-  border: 0;
-  color: inherit;
-  background: transparent;
-  text-align: center;
-}
-
-.dm-controller-card-top {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  min-width: 0;
-}
-
-.dm-controller-card-top code {
-  color: #FFFFFF;
-  font-family: "JetBrains Mono", monospace;
-  font-size: 11px;
-  font-weight: 800;
-}
-
-.dm-battery-pill.compact {
-  font-size: 11px;
-}
-
-.dm-controller-glyph.controller-card {
-  width: min(140px, 78%);
-  height: 80px;
-  margin: 2px 0 0;
-  opacity: 0.95;
-}
-
-.dm-controller-copy {
-  display: grid;
-  justify-items: center;
-  gap: 5px;
-  min-width: 0;
-  text-align: center;
-}
-
-.dm-controller-capabilities {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  gap: 5px;
-  margin-top: 7px;
-}
-
-.dm-controller-capabilities em {
-  padding: 3px 6px;
-  border-radius: 4px;
-  color: var(--haptic);
-  background: rgba(226, 232, 240, 0.08);
-  font-size: 10px;
-  font-style: normal;
-  font-weight: 750;
-  line-height: 1;
-}
-
-.dm-controller-rename-button,
-.dm-controller-expand-button,
-.dm-controller-rename-actions button {
-  min-height: 26px;
-  padding: 0 9px;
-  border: 1px solid rgba(113, 113, 122, 0.34);
-  border-radius: 5px;
-  color: var(--haptic);
-  background: rgba(10, 10, 12, 0.42);
-  font-size: 11px;
-  font-weight: 800;
-  cursor: pointer;
-}
-
-.dm-controller-rename-button:hover,
-.dm-controller-expand-button:hover,
-.dm-controller-rename-actions button:hover {
-  border-color: rgba(0, 112, 204, 0.62);
-  background: rgba(0, 112, 204, 0.14);
-}
-
-.dm-controller-card-actions {
-  display: inline-flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  gap: 6px;
-}
-
-.dm-controller-details {
-  width: 100%;
-  margin-top: 6px;
-  padding: 12px;
-  border-top: 1px solid rgba(113, 113, 122, 0.18);
-  background: rgba(10, 10, 12, 0.32);
-  border-radius: 0 0 6px 6px;
-  text-align: left;
-}
-
-.dm-controller-details-grid {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 10px 14px;
-  margin: 0;
-}
-
-.dm-controller-details-grid > div {
-  min-width: 0;
-}
-
-.dm-controller-details-grid > div.wide {
-  grid-column: 1 / -1;
-}
-
-.dm-controller-details-grid dt {
-  margin: 0 0 2px;
-  color: var(--tungsten);
-  font-size: 10px;
-  font-weight: 800;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-}
-
-.dm-controller-details-grid dd {
-  margin: 0;
-  color: #FFFFFF;
-  font-size: 12px;
-  font-weight: 600;
-  line-height: 1.35;
-  overflow-wrap: break-word;
-}
-
-.dm-controller-details-grid dd.mono {
-  color: var(--haptic);
-  font-family: "JetBrains Mono", "Space Mono", ui-monospace, monospace;
-  font-size: 11px;
-  font-weight: 500;
-  letter-spacing: 0.02em;
-  overflow-wrap: anywhere;
-}
-
-.dm-controller-capabilities.expanded {
-  justify-content: flex-start;
-  margin-top: 4px;
-}
-
-.dm-controller-rename-input {
-  width: min(240px, 100%);
-  height: 34px;
-  border: 1px solid rgba(0, 112, 204, 0.58);
-  border-radius: 6px;
-  color: #FFFFFF;
-  background: rgba(10, 10, 12, 0.82);
-  font-size: 13px;
-  font-weight: 800;
-  outline: none;
-  padding: 0 10px;
-  text-align: center;
-}
-
-.dm-controller-rename-wrap {
-  display: grid;
-  justify-items: center;
-  gap: 7px;
-  width: 100%;
-}
-
-.dm-controller-rename-actions {
-  display: flex;
-  justify-content: center;
-  gap: 6px;
-}
-
-.dm-controller-card:hover,
-.dm-controller-card.active,
-.dm-scope-strip button:hover,
-.dm-scope-strip button.active,
-.dm-game-grid > button:hover,
-.dm-game-grid > button.active {
-  border-color: rgba(0, 112, 204, 0.68);
-  background-color: rgba(0, 112, 204, 0.1);
-  box-shadow:
-    inset 0 1px 0 rgba(226, 232, 240, 0.07),
-    inset 0 0 0 1px rgba(0, 112, 204, 0.18),
-    0 14px 34px rgba(0, 0, 0, 0.26);
-}
-
-.dm-controller-card:focus-visible,
-.dm-controller-select-zone:focus-visible,
-.dm-controller-rename-button:focus-visible,
-.dm-controller-expand-button:focus-visible,
-.dm-controller-rename-actions button:focus-visible,
-.dm-scope-strip button:focus-visible,
-.dm-game-grid > button:focus-visible,
-.dm-input-path-actions button:focus-visible,
-.dm-mapping-action:focus-visible {
-  outline: 2px solid rgba(0, 112, 204, 0.72);
-  outline-offset: 2px;
-}
-
-.dm-controller-card.disconnected {
-  opacity: 0.62;
-}
-
-.dm-controller-glyph.small {
-  width: 38px;
-  height: 38px;
-}
-
-.dm-controller-choice-list strong,
-.dm-scope-strip strong,
-.dm-game-copy strong,
-.dm-empty-choice strong {
-  display: block;
-  overflow: hidden;
-  color: #FFFFFF;
-  font-size: 14px;
-  font-weight: 800;
-  line-height: 1.18;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.dm-controller-choice-list small,
-.dm-scope-strip small,
-.dm-game-copy small {
-  display: block;
-  margin-top: 4px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.dm-controller-copy strong {
-  overflow: visible;
-  overflow-wrap: break-word;
-  word-break: normal;
-  white-space: normal;
-  text-overflow: clip;
-  line-height: 1.18;
-  font-size: 15px;
-  letter-spacing: 0;
-  hyphens: none;
-}
-
-.dm-controller-copy small {
-  overflow-wrap: break-word;
-  word-break: normal;
-  white-space: normal;
-  text-overflow: clip;
-  line-height: 1.3;
-}
-
-.dm-controller-copy .dm-controller-id {
-  margin-top: 2px;
-  font-family: "JetBrains Mono", monospace;
-  font-size: 10px;
-  letter-spacing: 0.02em;
-  opacity: 0.78;
-}
-
-.dm-profile-controller-summary {
-  display: grid;
-  justify-items: center;
-  gap: 12px;
-  padding: 14px;
-  border: 1px solid rgba(113, 113, 122, 0.26);
-  border-radius: 6px;
-  background:
-    linear-gradient(180deg, rgba(226, 232, 240, 0.035), rgba(226, 232, 240, 0.012)),
-    rgba(14, 15, 18, 0.82);
-  box-shadow: inset 0 1px 0 rgba(226, 232, 240, 0.05);
-  text-align: center;
-}
diff --git a/web/src/styles/haptics.css b/web/src/styles/haptics.css
index cb34bb4..cfb96f3 100644
--- a/web/src/styles/haptics.css
+++ b/web/src/styles/haptics.css
@@ -1,4 +1,3 @@
 @import "./haptics/routing.css";
 @import "./haptics/curves.css";
 @import "./haptics/controls.css";
-@import "./haptics/profile-console.css";
diff --git a/web/src/styles/haptics/controls.css b/web/src/styles/haptics/controls.css
index 784c8e9..aa5b8c8 100644
--- a/web/src/styles/haptics/controls.css
+++ b/web/src/styles/haptics/controls.css
@@ -7,30 +7,27 @@
   padding-top: 4px;
 }
 
-.dm-parameter-strip label,
-.dm-profile-line label {
+.dm-parameter-strip label {
   display: grid;
   gap: 7px;
   min-width: 0;
 }
 
-.dm-parameter-strip select,
-.dm-profile-line select {
+.dm-parameter-strip select {
   width: 100%;
   min-width: 0;
   height: 34px;
   border: 0;
   border-radius: 5px;
-  color: var(--haptic);
+  color: var(--ink);
   background: rgba(10, 10, 12, 0.78);
   box-shadow: inset 0 0 0 1px rgba(113, 113, 122, 0.2);
   font-size: 12px;
   outline: none;
 }
 
-.dm-parameter-strip select:focus,
-.dm-profile-line select:focus {
-  box-shadow: inset 0 0 0 1px var(--actuation), 0 0 0 2px rgba(0, 112, 204, 0.16);
+.dm-parameter-strip select:focus {
+  box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 2px rgba(0, 112, 204, 0.16);
 }
 
 .dm-led-controls {
@@ -57,7 +54,7 @@
 
 .dm-led-row code {
   width: 32px;
-  color: var(--haptic);
+  color: var(--ink);
   font-size: 10px;
   text-align: right;
 }
@@ -84,9 +81,9 @@
   position: absolute;
   inset: 4px;
   border-radius: 999px;
-  background: var(--lb-color, var(--actuation));
+  background: var(--lb-color, var(--accent));
   opacity: var(--lb-alpha, 1);
-  box-shadow: 0 0 16px color-mix(in srgb, var(--lb-color, var(--actuation)) 70%, transparent);
+  box-shadow: 0 0 16px color-mix(in srgb, var(--lb-color, var(--accent)) 70%, transparent);
 }
 
 .dm-mini-range {
@@ -115,7 +112,7 @@
   width: 10px;
   height: 10px;
   border-radius: 999px;
-  background: var(--tungsten);
+  background: var(--ink-muted);
   transition:
     transform 150ms ease-out,
     background 150ms ease-out;
@@ -139,7 +136,7 @@
 }
 
 .dm-effects-count code {
-  color: var(--actuation);
+  color: var(--accent);
   font-size: 12px;
   font-weight: 700;
 }
@@ -175,7 +172,7 @@
 }
 
 .dm-body-mode-title span {
-  color: var(--tungsten);
+  color: var(--ink-muted);
   font-size: 10px;
   font-weight: 800;
   line-height: 1;
@@ -185,7 +182,7 @@
 .dm-body-mode-title code {
   overflow: hidden;
   max-width: 52%;
-  color: var(--actuation);
+  color: var(--accent);
   font-size: 11px;
   font-weight: 800;
   text-align: right;
@@ -226,7 +223,7 @@
 }
 
 .dm-body-mode-option span {
-  color: var(--tungsten);
+  color: var(--ink-muted);
   font-size: 10px;
   font-weight: 800;
   line-height: 1;
@@ -238,7 +235,7 @@
 .dm-body-mode-option.active {
   border-color: rgba(0, 112, 204, 0.92);
   background: rgba(0, 112, 204, 0.13);
-  box-shadow: inset 3px 0 0 var(--actuation);
+  box-shadow: inset 3px 0 0 var(--accent);
 }
 
 .dm-channel-list {
@@ -329,7 +326,7 @@
 
 .dm-effect-advanced-grid label > span,
 .dm-channel-signal-strip strong {
-  color: var(--tungsten);
+  color: var(--ink-muted);
   font-size: 9px;
   font-weight: 800;
   line-height: 1;
@@ -343,7 +340,7 @@
 .dm-advanced-note {
   grid-column: 1 / -1;
   margin: 0;
-  color: var(--ash);
+  color: var(--ink-muted);
   font-size: 11px;
   font-weight: 650;
   line-height: 1.35;
@@ -415,7 +412,7 @@
 }
 
 .dm-fader-value:focus {
-  border-color: var(--actuation);
+  border-color: var(--accent);
   box-shadow: 0 0 0 2px rgba(0, 112, 204, 0.14);
 }
 
@@ -433,7 +430,7 @@
 }
 
 .dm-route-select-wrap span {
-  color: var(--tungsten);
+  color: var(--ink-muted);
   font-size: 9px;
   font-weight: 800;
   line-height: 1;
@@ -446,7 +443,7 @@
   height: 30px;
   border: 1px solid rgba(113, 113, 122, 0.42);
   border-radius: 6px;
-  color: var(--haptic);
+  color: var(--ink);
   background:
     linear-gradient(180deg, rgba(226, 232, 240, 0.05), rgba(226, 232, 240, 0.015)),
     rgba(10, 10, 12, 0.92);
@@ -457,6 +454,42 @@
 }
 
 .dm-route-select:focus {
-  border-color: var(--actuation);
+  border-color: var(--accent);
   box-shadow: 0 0 0 2px rgba(0, 112, 204, 0.14);
 }
+
+/* RGB output console container (LightbarControls). Moved from the retired
+   haptics/profile-console.css; the canvas-grid context in tuning.css strips
+   the padding and divider and hides the title. */
+.dm-rgb-console {
+  display: grid;
+  gap: 9px;
+  padding-top: 12px;
+  box-shadow: inset 0 1px 0 var(--hairline-strong);
+}
+
+.dm-console-title {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 12px;
+  min-width: 0;
+}
+
+.dm-console-title span {
+  color: var(--ink-muted);
+  font-size: 10px;
+  font-weight: 800;
+  line-height: 1;
+  text-transform: uppercase;
+}
+
+.dm-console-title strong {
+  overflow: hidden;
+  color: var(--ink);
+  font-size: 13px;
+  font-weight: 700;
+  line-height: 1;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
diff --git a/web/src/styles/haptics/curves.css b/web/src/styles/haptics/curves.css
index b30cb9b..d446f0f 100644
--- a/web/src/styles/haptics/curves.css
+++ b/web/src/styles/haptics/curves.css
@@ -26,7 +26,7 @@
 }
 
 .dm-module-title span {
-  color: var(--actuation);
+  color: var(--accent);
   font-family: "JetBrains Mono", monospace;
   font-size: 12px;
   font-weight: 700;
@@ -41,7 +41,7 @@
 }
 
 .dm-module-title code {
-  color: var(--haptic);
+  color: var(--ink);
   font-size: 18px;
   font-weight: 700;
 }
@@ -55,7 +55,7 @@
   touch-action: none;
   background:
     radial-gradient(circle at 50% 25%, rgba(0, 112, 204, 0.09), transparent 48%),
-    var(--carbon);
+    var(--bg-rail);
 }
 
 .dm-curve-frame:active {
@@ -71,6 +71,7 @@
 
 .dm-trigger-curve .curve-grid,
 .dm-trigger-curve .curve-linear,
+.dm-trigger-curve .curve-saved-ghost,
 .dm-trigger-curve .curve-force,
 .dm-trigger-curve .curve-range-edge,
 .dm-trigger-curve .curve-live,
@@ -100,9 +101,19 @@
   stroke-width: 0.85;
 }
 
+/* Saved-profile ghost (Task 7): dashed echo of the saved curve while the
+   working draft drifts; sits behind the live force curve. */
+.dm-trigger-curve .curve-saved-ghost {
+  stroke: rgba(214, 214, 220, 0.55);
+  stroke-dasharray: 5 4;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 1.4;
+}
+
 .dm-trigger-curve .curve-force {
   filter: url(#dm-blue-glow);
-  stroke: var(--actuation);
+  stroke: var(--accent);
   stroke-linecap: round;
   stroke-linejoin: round;
   stroke-width: 2.2;
@@ -116,7 +127,7 @@
 }
 
 .dm-trigger-curve .curve-live-dot {
-  fill: var(--actuation);
+  fill: var(--accent);
   stroke: rgba(226, 232, 240, 0.86);
   stroke-width: 0.85;
   vector-effect: non-scaling-stroke;
@@ -174,7 +185,7 @@
 
 .dm-curve-control-handle.active {
   background:
-    radial-gradient(circle at 36% 30%, #ffffff 0 16%, #b8edff 40%, var(--actuation) 100%);
+    radial-gradient(circle at 36% 30%, #ffffff 0 16%, #b8edff 40%, var(--accent) 100%);
   cursor: grabbing;
   transform: translate(-50%, -50%) scale(1.16);
 }
@@ -226,7 +237,7 @@
 }
 
 .dm-slider-row span {
-  color: var(--tungsten);
+  color: var(--ink-muted);
   font-size: 11px;
   font-weight: 700;
   text-transform: uppercase;
@@ -235,7 +246,7 @@
 .dm-slider-row code,
 .dm-fader-value {
   width: 48px;
-  color: var(--haptic);
+  color: var(--ink);
   font-size: 12px;
   text-align: right;
 }
@@ -249,7 +260,7 @@
 }
 
 .dm-curve-point-row > span {
-  color: var(--tungsten);
+  color: var(--ink-muted);
   font-size: 11px;
   font-weight: 700;
   text-transform: uppercase;
@@ -265,7 +276,7 @@
 }
 
 .dm-curve-point-actions code {
-  color: var(--haptic);
+  color: var(--ink);
   font-size: 12px;
   text-align: center;
 }
@@ -274,9 +285,9 @@
   align-items: center;
   aspect-ratio: 1;
   background: rgba(15, 23, 42, 0.72);
-  border: 1px solid var(--border-strong);
+  border: 1px solid var(--hairline-strong);
   border-radius: 4px;
-  color: var(--text);
+  color: var(--ink);
   cursor: pointer;
   display: inline-grid;
   height: 26px;
@@ -302,7 +313,7 @@
   height: 22px;
   margin: 0;
   padding: 0;
-  accent-color: var(--actuation);
+  accent-color: var(--accent);
   background: transparent;
   cursor: pointer;
 }
@@ -312,7 +323,7 @@
   height: 4px;
   border-radius: 999px;
   background:
-    linear-gradient(90deg, var(--actuation) 0 var(--value, 0%), rgba(78, 83, 95, 0.82) var(--value, 0%) 100%);
+    linear-gradient(90deg, var(--accent) 0 var(--value, 0%), rgba(78, 83, 95, 0.82) var(--value, 0%) 100%);
   box-shadow:
     inset 0 0 0 1px rgba(255, 255, 255, 0.06),
     0 1px 0 rgba(255, 255, 255, 0.04);
@@ -332,7 +343,7 @@
 .dm-mini-range::-moz-range-progress {
   height: 4px;
   border-radius: 999px;
-  background: var(--actuation);
+  background: var(--accent);
 }
 
 .dm-range::-webkit-slider-thumb,
diff --git a/web/src/styles/haptics/profile-console.css b/web/src/styles/haptics/profile-console.css
deleted file mode 100644
index 0f8cebc..0000000
--- a/web/src/styles/haptics/profile-console.css
+++ /dev/null
@@ -1,144 +0,0 @@
-.dm-rgb-console {
-  display: grid;
-  gap: 9px;
-  padding-top: 12px;
-  box-shadow: inset 0 1px 0 rgba(113, 113, 122, 0.18);
-}
-
-.dm-console-title {
-  display: flex;
-  align-items: baseline;
-  justify-content: space-between;
-  gap: 12px;
-  min-width: 0;
-}
-
-.dm-console-title span {
-  color: var(--tungsten);
-  font-size: 10px;
-  font-weight: 800;
-  line-height: 1;
-  text-transform: uppercase;
-}
-
-.dm-console-title strong {
-  overflow: hidden;
-  color: var(--haptic);
-  font-family: "Space Grotesk", "Inter Tight", Inter, sans-serif;
-  font-size: 13px;
-  font-weight: 700;
-  line-height: 1;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.dm-profile-console {
-  display: grid;
-  gap: 10px;
-  padding-top: 12px;
-  box-shadow: inset 0 1px 0 rgba(113, 113, 122, 0.18);
-}
-
-.dm-profile-line {
-  display: grid;
-  grid-template-columns: minmax(210px, 260px) minmax(0, 1fr);
-  align-items: end;
-  gap: 10px;
-}
-
-.dm-action-row {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 8px;
-  min-width: 0;
-}
-
-.dm-action-row > span {
-  flex: 1 1 auto;
-  min-width: 0;
-  overflow: hidden;
-  color: var(--actuation);
-  font-size: 12px;
-  font-weight: 700;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.dm-action-row > .dscc-tooltip {
-  flex: 0 0 auto;
-}
-
-.dm-action-row .dm-mini-button,
-.dm-action-row .dm-apply-button {
-  flex: 0 0 70px;
-  width: 70px;
-}
-
-.dm-action-row .dm-mini-button.wide {
-  flex-basis: 94px;
-  width: 94px;
-}
-
-.dm-mini-button {
-  width: 76px;
-  min-height: 30px;
-  padding-inline: 10px;
-  font-size: 12px;
-}
-
-.dm-mini-button.primary {
-  border-color: rgba(0, 112, 204, 0.92);
-  background: var(--actuation);
-  color: #FFFFFF;
-}
-
-.dm-apply-button {
-  width: 76px;
-  min-height: 30px;
-  padding-inline: 10px;
-  border: 1px solid rgba(113, 113, 122, 0.78);
-  color: rgba(226, 232, 240, 0.76);
-  background: rgba(10, 10, 12, 0.52);
-  font-size: 13px;
-  font-weight: 800;
-}
-
-.dm-apply-button.dirty {
-  border-color: var(--actuation);
-  color: #FFFFFF;
-  background: var(--actuation);
-  box-shadow: 0 0 20px rgba(0, 112, 204, 0.22);
-}
-
-.dm-apply-button.applied {
-  border-color: var(--ready);
-  background: var(--ready);
-  color: #06110A;
-}
-
-.dm-profile-rename {
-  display: grid;
-  grid-template-columns: minmax(210px, 260px) minmax(0, 1fr);
-  align-items: end;
-  gap: 10px;
-}
-
-.dm-profile-rename label {
-  display: grid;
-  gap: 6px;
-  min-width: 0;
-}
-
-.dm-profile-rename span {
-  color: var(--tungsten);
-  font-size: 10px;
-  font-weight: 800;
-  line-height: 1;
-  text-transform: uppercase;
-}
-
-.dm-profile-rename input {
-  min-width: 0;
-}
diff --git a/web/src/styles/haptics/routing.css b/web/src/styles/haptics/routing.css
index 97d1900..1561d48 100644
--- a/web/src/styles/haptics/routing.css
+++ b/web/src/styles/haptics/routing.css
@@ -5,17 +5,6 @@
   padding: clamp(14px, 1.55vw, 22px);
 }
 
-.dm-routing {
-  display: grid;
-  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
-  gap: 12px;
-  padding: clamp(16px, 1.6vw, 22px);
-}
-
-.dm-routing.dm-global-feel {
-  grid-template-rows: auto minmax(0, 1fr) auto auto;
-}
-
 .dm-global-feel-panel {
   display: grid;
   align-content: start;
@@ -41,7 +30,7 @@
 .dm-global-feel-heading code {
   overflow: hidden;
   max-width: 50%;
-  color: var(--actuation);
+  color: var(--accent);
   font-size: 11px;
   font-weight: 800;
   text-align: right;
@@ -57,7 +46,7 @@
 }
 
 .dm-global-feel-panel article > span {
-  color: var(--tungsten);
+  color: var(--ink-muted);
   font-size: 12px;
   line-height: 1.35;
 }
@@ -87,7 +76,7 @@
 }
 
 .dm-global-feel-controls label > span {
-  color: var(--tungsten);
+  color: var(--ink-muted);
   font-size: 10px;
   font-weight: 800;
   line-height: 1;
@@ -131,7 +120,7 @@
 }
 
 .dm-pattern-option span {
-  color: var(--tungsten);
+  color: var(--ink-muted);
   font-size: 10px;
   font-weight: 800;
   line-height: 1;
@@ -142,7 +131,7 @@
 .dm-pattern-option.active {
   border-color: rgba(0, 112, 204, 0.92);
   background: rgba(0, 112, 204, 0.13);
-  box-shadow: inset 3px 0 0 var(--actuation);
+  box-shadow: inset 3px 0 0 var(--accent);
 }
 
 .dm-section-head {
@@ -159,10 +148,9 @@
 
 .dm-section-head span,
 .dm-parameter-strip label > span,
-.dm-led-row > span,
-.dm-profile-line label > span {
+.dm-led-row > span {
   display: block;
-  color: var(--tungsten);
+  color: var(--ink-muted);
   font-size: 10px;
   font-weight: 800;
   line-height: 1;
@@ -192,8 +180,6 @@
 
 .dm-test-button,
 .dm-mini-button,
-.dm-action-button,
-.dm-apply-button,
 .solid-action {
   display: inline-flex;
   align-items: center;
@@ -210,8 +196,7 @@
 }
 
 .dm-test-button,
-.dm-mini-button,
-.dm-action-button {
+.dm-mini-button {
   border: 1px solid rgba(113, 113, 122, 0.78);
   color: #FFFFFF;
   background: transparent;
@@ -221,19 +206,22 @@
 
 .dm-test-button:hover,
 .dm-mini-button:hover,
-.dm-action-button:hover,
 .dm-test-button.active {
   border-color: #FFFFFF;
   background: rgba(226, 232, 240, 0.055);
 }
 
-.dm-action-button.primary {
-  border-color: rgba(0, 112, 204, 0.92);
-  background: var(--actuation);
-  color: #FFFFFF;
+/* Compact sizing + primary variant (Save/Create in the profile menu).
+   Moved from the retired haptics/profile-console.css. */
+.dm-mini-button {
+  width: 76px;
+  min-height: 30px;
+  padding-inline: 10px;
+  font-size: 12px;
 }
 
-.dm-action-button:disabled {
-  cursor: not-allowed;
-  opacity: 0.52;
+.dm-mini-button.primary {
+  border-color: var(--accent);
+  background: var(--accent);
+  color: #FFFFFF;
 }
diff --git a/web/src/styles/responsive.css b/web/src/styles/responsive.css
index a6662da..8ff416d 100644
--- a/web/src/styles/responsive.css
+++ b/web/src/styles/responsive.css
@@ -1,104 +1,12 @@
-@media (max-width: 1180px) {
-  body {
-    overflow: auto;
-  }
-
-  .ops-shell {
-    display: block;
-    height: auto;
-    min-height: 100vh;
-    overflow: visible;
-  }
+/* Narrow-viewport adjustments for the tuning instruments. The document
+   scroll model lives in shell-v2.css and needs no overrides here. */
 
-  .dm-hud,
-  .dm-tuning-ribbon,
-  .dm-games-page,
-  .dm-controllers-page,
-  .dm-controller-overview,
-  .dm-deck,
-  .dm-button-map-layout,
-  .dm-parameter-strip,
-  .dm-profile-line,
-  .dm-profile-rename {
+@media (max-width: 1180px) {
+  .dm-parameter-strip {
     grid-template-columns: 1fr;
     height: auto;
   }
 
-  .dm-hud {
-    align-items: stretch;
-  }
-
-  .dm-tuning-ribbon {
-    position: static;
-    top: auto;
-  }
-
-  .dm-steam-identity {
-    grid-template-columns: 1fr;
-    gap: 4px;
-  }
-
-  button.dm-ribbon-picker-trigger.dm-game-identity-cell {
-    grid-template-columns: 104px minmax(0, 1fr);
-    min-height: 64px;
-  }
-
-  .dm-system-cluster {
-    justify-content: flex-start;
-    flex-wrap: wrap;
-  }
-
-  .dm-system-readout {
-    justify-content: flex-start;
-    text-align: left;
-  }
-
-  .dm-view-nav {
-    justify-self: stretch;
-    overflow-x: auto;
-  }
-
-  .dm-deck,
-  .dm-games-page,
-  .dm-controllers-page,
-  .dm-button-map-page {
-    min-height: 0;
-  }
-
-  .dm-controller-stage {
-    grid-template-columns: 1fr;
-  }
-
-  .dm-map-callouts,
-  .dm-map-callouts.left,
-  .dm-map-callouts.right {
-    grid-template-columns: 1fr;
-    text-align: left;
-  }
-
-  .dm-map-callouts.left .dm-callout-head,
-  .dm-map-callouts.right .dm-callout-head {
-    flex-direction: row;
-  }
-
-  .dm-callout-cluster {
-    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
-    gap: 10px;
-  }
-
-  .dm-callout-cluster-title {
-    grid-column: 1 / -1;
-  }
-
-  .dm-controller-canvas {
-    max-width: 720px;
-    margin: 0 auto;
-  }
-
-  .dm-map-source-grid {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-
   .dm-physics {
     grid-template-rows: auto auto auto;
   }
@@ -123,13 +31,6 @@
 }
 
 @media (max-width: 900px) {
-  .dm-live-stick-grid,
-  .dm-trigger-meter-grid,
-  .dm-controller-metric-grid,
-  .dm-calibration-grid {
-    grid-template-columns: 1fr;
-  }
-
   .dm-curve-stack {
     grid-template-columns: 1fr;
   }
@@ -148,38 +49,10 @@
 }
 
 @media (max-width: 720px) {
-  .ops-shell {
-    padding: 14px;
-  }
-
-  .dm-physics,
-  .dm-routing,
-  .dm-button-map-panel {
+  .dm-physics {
     padding: 14px;
   }
 
-  .dm-view-nav {
-    display: grid;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-    gap: 3px;
-  }
-
-  .dm-view-nav button {
-    width: 100%;
-    padding: 0 8px;
-    font-size: 11px;
-  }
-
-  .dm-app-tagline {
-    max-width: 100%;
-    white-space: normal;
-    overflow-wrap: anywhere;
-  }
-
-  .dm-slider-bank {
-    grid-template-columns: 1fr;
-  }
-
   .dm-curve-module {
     grid-template-rows: auto 170px auto;
   }
@@ -191,23 +64,7 @@
   .dm-slider-bank,
   .dm-channel-strip,
   .dm-led-row,
-  .dm-tuning-ribbon,
-  .dm-steam-identity,
-  .dm-system-toggles,
   .dm-support-panel,
-  .dm-action-row,
-  .dm-scope-strip button,
-  .dm-game-grid > button,
-  .dm-live-panel-head,
-  .dm-stick-head,
-  .dm-trigger-meter > div:first-child,
-  .dm-map-context-grid,
-  .dm-map-placeholder,
-  .dm-button-bind-list,
-  .dm-map-source-grid,
-  .dm-map-quick-grid > div,
-  .dm-steam-binding-row,
-  .dm-input-path-actions,
   .dm-global-feel-controls,
   .dm-pattern-grid,
   .dm-vibration-mode-grid,
@@ -217,43 +74,7 @@
     grid-template-columns: 1fr;
   }
 
-  button.dm-ribbon-picker-trigger.dm-game-identity-cell {
-    grid-template-columns: 86px minmax(0, 1fr);
-  }
-
-  .dm-steam-identity .dm-ribbon-game-media {
-    width: 86px;
-    height: 46px;
-  }
-
-  .dm-controller-stage {
-    min-height: 0;
-  }
-
-  .dm-controller-canvas {
-    min-width: 0;
-  }
-
-  .dm-map-source-row strong,
-  .dm-steam-binding-row em {
-    text-align: left;
-  }
-
   .dm-channel-strip {
     align-items: stretch;
   }
-
-  .dm-action-row {
-    display: grid;
-  }
-
-  .dm-controller-card {
-    min-height: 220px;
-  }
-
-  .dm-game-card-media img,
-  .dm-game-art-fallback {
-    width: 100%;
-    height: 148px;
-  }
 }
diff --git a/web/src/styles/ribbon.css b/web/src/styles/ribbon.css
deleted file mode 100644
index 8de39a0..0000000
--- a/web/src/styles/ribbon.css
+++ /dev/null
@@ -1,428 +0,0 @@
-.dm-tuning-ribbon {
-  position: sticky;
-  top: 74px;
-  z-index: 24;
-  display: grid;
-  grid-template-columns: minmax(650px, 1.4fr) minmax(360px, 0.72fr);
-  align-items: stretch;
-  gap: 10px;
-  flex: 0 0 62px;
-  width: min(1500px, 100%);
-  height: 62px;
-  margin: 0 auto 18px;
-}
-
-.dm-steam-identity,
-.dm-system-toggles {
-  min-width: 0;
-  background: rgba(18, 18, 20, 0.54);
-  box-shadow:
-    inset 0 1px 0 rgba(226, 232, 240, 0.045),
-    inset 0 0 0 1px rgba(113, 113, 122, 0.11);
-}
-
-.dm-steam-identity {
-  display: grid;
-  grid-template-columns: minmax(210px, 0.82fr) minmax(380px, 1.45fr) minmax(220px, 0.88fr);
-  align-items: center;
-  gap: 8px;
-  overflow: hidden;
-}
-
-.dm-steam-identity > span.dm-controller-glyph {
-  width: 58px;
-  height: 42px;
-  margin: 0 auto;
-  color: var(--haptic);
-  opacity: 0.82;
-}
-
-.dm-steam-identity > div {
-  min-width: 0;
-  padding-right: 12px;
-}
-
-.dm-steam-identity span,
-.dm-switch-line span,
-.dm-location-line span {
-  display: block;
-  color: var(--tungsten);
-  font-size: 10px;
-  font-weight: 800;
-  line-height: 1;
-  text-transform: uppercase;
-}
-
-.dm-steam-identity strong,
-.dm-switch-line strong {
-  display: block;
-  overflow: hidden;
-  color: #FFFFFF;
-  font-size: 13px;
-  font-weight: 700;
-  line-height: 1.2;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.dm-steam-identity p,
-.dm-switch-line small,
-.dm-location-line small {
-  display: block;
-  margin: 2px 0 0;
-  overflow: hidden;
-  color: var(--tungsten);
-  font-size: 11px;
-  line-height: 1.2;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.dm-active-profile-cell {
-  position: relative;
-  align-self: stretch;
-  display: grid;
-  align-content: center;
-  padding: 6px 12px 6px 12px;
-  border-left: 1px solid rgba(113, 113, 122, 0.18);
-}
-
-.dm-active-profile-cell strong {
-  color: var(--actuation);
-  font-size: 15px;
-  font-weight: 700;
-  letter-spacing: 0.01em;
-}
-
-.dm-active-profile-cell span {
-  color: var(--tungsten);
-  opacity: 1;
-}
-
-.dm-ribbon-picker-host {
-  position: relative;
-  display: grid;
-  align-self: stretch;
-  min-width: 0;
-}
-
-button.dm-ribbon-picker-trigger {
-  position: relative;
-  display: grid;
-  align-content: center;
-  width: 100%;
-  appearance: none;
-  border: 0;
-  background: transparent;
-  font: inherit;
-  text-align: inherit;
-  color: inherit;
-  cursor: pointer;
-  padding: 6px 28px 6px 12px;
-  border-radius: 6px;
-  transition: background 140ms ease-out, box-shadow 140ms ease-out;
-}
-
-button.dm-ribbon-picker-trigger.dm-game-identity-cell {
-  grid-template-columns: 94px minmax(0, 1fr);
-  align-items: center;
-  align-content: stretch;
-  gap: 12px;
-  overflow: hidden;
-  padding-left: 8px;
-}
-
-button.dm-ribbon-picker-trigger.dm-active-profile-cell {
-  padding-left: 12px;
-}
-
-button.dm-ribbon-picker-trigger:hover:not(:disabled),
-button.dm-ribbon-picker-trigger:focus-visible {
-  background: rgba(0, 112, 204, 0.08);
-  outline: none;
-  box-shadow: inset 0 0 0 1px rgba(0, 112, 204, 0.35);
-}
-
-button.dm-ribbon-picker-trigger.open {
-  background: rgba(0, 112, 204, 0.12);
-  box-shadow: inset 0 0 0 1px rgba(0, 112, 204, 0.55);
-}
-
-button.dm-ribbon-picker-trigger:disabled {
-  cursor: default;
-  padding-right: 12px;
-}
-
-button.dm-ribbon-picker-trigger:disabled .dm-ribbon-picker-caret {
-  display: none;
-}
-
-.dm-ribbon-picker-caret {
-  position: absolute;
-  right: 10px;
-  top: 50%;
-  transform: translateY(-50%);
-  color: var(--haptic);
-  font-size: 11px;
-  font-weight: 800;
-  opacity: 0.7;
-  pointer-events: none;
-  transition: transform 140ms ease-out, opacity 140ms ease-out;
-}
-
-button.dm-ribbon-picker-trigger.open .dm-ribbon-picker-caret {
-  transform: translateY(-50%) rotate(180deg);
-  opacity: 1;
-}
-
-.dm-steam-identity .dm-ribbon-game-backdrop {
-  position: absolute;
-  inset: 0;
-  z-index: 0;
-  display: block;
-  overflow: hidden;
-  opacity: 0.24;
-  color: inherit;
-  font-size: inherit;
-  font-weight: inherit;
-  line-height: normal;
-  text-transform: none;
-  pointer-events: none;
-}
-
-.dm-steam-identity .dm-ribbon-game-backdrop::after {
-  content: "";
-  position: absolute;
-  inset: 0;
-  background:
-    linear-gradient(90deg, rgba(18, 18, 20, 0.18), rgba(18, 18, 20, 0.76) 42%, rgba(18, 18, 20, 0.94)),
-    linear-gradient(180deg, rgba(18, 18, 20, 0.12), rgba(18, 18, 20, 0.78));
-}
-
-.dm-steam-identity .dm-ribbon-game-backdrop img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  filter: saturate(1.08) contrast(1.05);
-}
-
-.dm-steam-identity .dm-ribbon-game-media {
-  position: relative;
-  z-index: 1;
-  display: grid;
-  place-items: center;
-  width: 94px;
-  height: 48px;
-  overflow: hidden;
-  border-radius: 4px;
-  background: rgba(7, 7, 8, 0.52);
-  box-shadow:
-    inset 0 0 0 1px rgba(226, 232, 240, 0.12),
-    0 8px 20px rgba(0, 0, 0, 0.24);
-  color: inherit;
-  font-size: inherit;
-  font-weight: inherit;
-  line-height: normal;
-  text-transform: none;
-}
-
-.dm-steam-identity .dm-ribbon-game-media img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.dm-steam-identity .dm-ribbon-game-copy {
-  position: relative;
-  z-index: 1;
-  display: grid;
-  align-content: center;
-  min-width: 0;
-}
-
-.dm-ribbon-game-copy span,
-.dm-ribbon-game-copy strong,
-.dm-ribbon-game-copy p {
-  min-width: 0;
-}
-
-.dm-ribbon-picker-menu {
-  position: fixed;
-  z-index: 7500;
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  min-width: 240px;
-  max-width: 360px;
-  max-height: min(420px, 70vh);
-  overflow-y: auto;
-  padding: 6px;
-  border: 1px solid rgba(0, 112, 204, 0.34);
-  border-radius: 8px;
-  background:
-    linear-gradient(180deg, rgba(26, 28, 34, 0.98), rgba(14, 14, 18, 0.99));
-  box-shadow:
-    0 24px 64px rgba(0, 0, 0, 0.62),
-    inset 0 1px 0 rgba(226, 232, 240, 0.06);
-}
-
-.dm-ribbon-picker-menu.profile {
-  min-width: 260px;
-}
-
-.dm-ribbon-picker-divider {
-  height: 1px;
-  margin: 4px 6px;
-  background: rgba(113, 113, 122, 0.22);
-}
-
-button.dm-ribbon-picker-item {
-  display: grid;
-  grid-template-columns: 34px minmax(0, 1fr);
-  align-items: center;
-  gap: 10px;
-  padding: 7px 9px;
-  border: 0;
-  border-radius: 5px;
-  color: var(--haptic);
-  background: transparent;
-  font: inherit;
-  text-align: left;
-  cursor: pointer;
-  transition: background 120ms ease-out, color 120ms ease-out;
-}
-
-button.dm-ribbon-picker-item:hover,
-button.dm-ribbon-picker-item:focus-visible {
-  outline: none;
-  color: #FFFFFF;
-  background: rgba(0, 112, 204, 0.18);
-}
-
-button.dm-ribbon-picker-item.active {
-  color: #FFFFFF;
-  background: rgba(0, 112, 204, 0.28);
-  box-shadow: inset 0 0 0 1px rgba(0, 112, 204, 0.55);
-}
-
-button.dm-ribbon-picker-item:disabled {
-  cursor: not-allowed;
-  opacity: 0.52;
-}
-
-.dm-ribbon-picker-thumb {
-  display: grid;
-  place-items: center;
-  width: 34px;
-  height: 34px;
-  overflow: hidden;
-  border-radius: 6px;
-  color: #FFFFFF;
-  background: transparent;
-  font-family: "JetBrains Mono", monospace;
-  font-size: 12px;
-  font-weight: 800;
-}
-
-.dm-ribbon-picker-thumb img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  border-radius: 6px;
-}
-
-.dm-ribbon-picker-thumb.art {
-  background: transparent;
-}
-
-.dm-ribbon-picker-copy {
-  display: grid;
-  gap: 2px;
-  min-width: 0;
-}
-
-.dm-ribbon-picker-copy strong {
-  display: block;
-  margin: 0;
-  overflow: hidden;
-  color: inherit;
-  font-size: 13px;
-  font-weight: 700;
-  line-height: 1.18;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.dm-ribbon-picker-copy small {
-  display: block;
-  margin: 0;
-  color: var(--tungsten);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.01em;
-  line-height: 1.3;
-  text-transform: none;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.dm-system-toggles {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 8px;
-  padding: 7px 8px;
-}
-
-.dm-switch-line {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) max-content;
-  align-items: center;
-  gap: 10px;
-  min-width: 0;
-}
-
-.dm-glyph-switch > div {
-  display: grid;
-  align-content: center;
-  gap: 3px;
-  min-width: 0;
-}
-
-.dm-glyph-switch span,
-.dm-glyph-switch strong,
-.dm-glyph-switch small {
-  line-height: 1.15;
-}
-
-.dm-glyph-switch small {
-  margin-top: 0;
-}
-
-.dm-location-line,
-.dm-location-line label {
-  display: grid;
-  min-width: 0;
-}
-
-.dm-location-line label {
-  gap: 5px;
-}
-
-.dm-location-line select {
-  width: 100%;
-  min-width: 0;
-  height: 26px;
-  border: 0;
-  border-radius: 5px;
-  color: #FFFFFF;
-  background: rgba(10, 10, 12, 0.78);
-  box-shadow: inset 0 0 0 1px rgba(113, 113, 122, 0.24);
-  font-size: 12px;
-  font-weight: 700;
-  outline: none;
-}
-
-.dm-location-line select:focus {
-  box-shadow: inset 0 0 0 1px var(--actuation), 0 0 0 2px rgba(0, 112, 204, 0.16);
-}
diff --git a/web/src/styles/shell-v2.css b/web/src/styles/shell-v2.css
new file mode 100644
index 0000000..42526eb
--- /dev/null
+++ b/web/src/styles/shell-v2.css
@@ -0,0 +1,277 @@
+/* Shell v2 — slim sidebar + document-flow main column (calm console, flat fills). */
+
+/* The document itself scrolls; the sidebar stays sticky beside it. base.css
+   and responsive.css defer to these rules for the scroll model. */
+html,
+body,
+#app {
+  height: auto;
+  min-height: 100%;
+}
+
+body {
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+html {
+  /* Reserve the vertical scrollbar's track so its appearance never reflows
+     content (keeps the visual smoke overflow check stable on classic
+     scrollbar platforms). */
+  scrollbar-gutter: stable;
+}
+
+.app-shell {
+  display: flex;
+  min-height: 100vh;
+  background: var(--bg);
+}
+
+.sidebar {
+  width: 168px;
+  flex: 0 0 auto;
+  background: var(--bg-rail);
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 14px 10px;
+  position: sticky;
+  top: 0;
+  height: 100vh;
+  z-index: var(--z-sticky);
+}
+
+.sidebar-brand {
+  font-weight: 600;
+  padding: 6px 10px;
+}
+
+/* The brand mark is the DualSense controller glyph (a currentColor mask over
+   /dualsense-controller.svg, shared with the controller cards). The artwork
+   sits in a central band of the square SVG canvas, so the mask is zoomed
+   past the box to render the controller itself at ~24px tall. */
+.dm-controller-glyph.sidebar-brand-glyph {
+  display: block;
+  width: 36px;
+  height: 24px;
+  mask-size: 40px 40px;
+  -webkit-mask-size: 40px 40px;
+}
+
+.sidebar-item,
+.sidebar-group {
+  text-align: left;
+  font: inherit;
+  color: var(--ink-muted);
+  background: none;
+  border: 0;
+  padding: 7px 10px;
+  border-radius: var(--radius-s);
+  cursor: pointer;
+  transition: background var(--speed) var(--ease), color var(--speed) var(--ease);
+}
+
+.sidebar-item:hover {
+  color: var(--ink);
+  background: color-mix(in srgb, var(--surface-raised) 60%, transparent);
+}
+
+.sidebar-item.active {
+  color: var(--ink);
+  background: var(--surface-raised);
+}
+
+.sidebar-item:focus-visible,
+.sidebar-group:focus-visible {
+  outline: 2px solid var(--accent-bright);
+  outline-offset: 1px;
+}
+
+.sidebar-group {
+  font-size: 0.78rem;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+  margin-top: 12px;
+}
+
+.sidebar-sub {
+  padding-left: 20px;
+  font-size: 0.92em;
+}
+
+.sidebar-spacer {
+  flex: 1;
+}
+
+.sidebar-footer {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.sidebar-footer .sidebar-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.app-main {
+  flex: 1;
+  min-width: 0;
+  /* Clip latent horizontal overflow from wide instrument panels so a stray
+     wide row never scrolls the whole document sideways. */
+  overflow-x: hidden;
+  padding: 18px clamp(18px, 2.2vw, 34px) 22px;
+}
+
+/* Utility row above the views — cross-view context (target controller, web UI
+   bind address, glyph override, system readout). */
+.app-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  gap: 10px 16px;
+  padding: 10px 12px;
+  margin-bottom: 16px;
+  background: var(--surface);
+  border: 1px solid var(--hairline);
+  border-radius: var(--radius-m);
+}
+
+/* Each field is exactly two rows — label, then control — so every toolbar
+   item shares one label line and one control line. The optional caption
+   (e.g. the bind address) sits inline beside the control instead of below
+   it, keeping the row's baseline tidy. */
+.app-toolbar-field {
+  display: grid;
+  grid-template-columns: auto minmax(0, auto);
+  align-items: center;
+  column-gap: 8px;
+  row-gap: 3px;
+  min-width: 0;
+}
+
+.app-toolbar-field > span {
+  grid-column: 1 / -1;
+}
+
+.app-toolbar-field > span {
+  font-size: 0.72rem;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+  color: var(--ink-muted);
+}
+
+.app-toolbar-field select {
+  max-width: 220px;
+  padding: 5px 8px;
+  color: var(--ink);
+  background: var(--surface-raised);
+  border: 1px solid var(--hairline-strong);
+  border-radius: var(--radius-s);
+}
+
+.app-toolbar-field small,
+.app-toolbar-readout small {
+  color: var(--ink-muted);
+  font-size: 0.72rem;
+}
+
+.app-toolbar-readout {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  min-width: 0;
+}
+
+/* Value + detail share one line, height-matched to the toolbar selects so the
+   readout label sits on the same line as the field labels. */
+.app-toolbar-readout > p {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  min-height: 30px;
+  margin: 0;
+}
+
+.app-toolbar-readout > span {
+  font-size: 0.72rem;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+  color: var(--ink-muted);
+}
+
+.app-toolbar-toggle {
+  padding: 6px 10px;
+  color: var(--ink-muted);
+  background: var(--surface-raised);
+  border: 1px solid var(--hairline-strong);
+  border-radius: var(--radius-s);
+  transition: color var(--speed) var(--ease), border-color var(--speed) var(--ease);
+}
+
+.app-toolbar-toggle.active {
+  color: var(--accent-text);
+  border-color: var(--accent-outline);
+  background: var(--accent-tint);
+}
+
+.app-toolbar-spacer {
+  flex: 1;
+}
+
+.dm-battery-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  min-width: 0;
+  color: var(--ink-muted);
+}
+
+.dm-battery {
+  width: 28px;
+  height: 14px;
+  flex: 0 0 auto;
+  color: var(--ink-muted);
+}
+
+.dm-battery rect:first-child,
+.dm-battery path {
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.5;
+}
+
+.dm-battery-fill {
+  fill: var(--ink);
+}
+
+/* Prevent scroll bleed behind fixed overlays; the main document scrolls under
+   v2 shell, so fixed panels must contain their scroll momentum. */
+.dm-onboarding {
+  overscroll-behavior: contain;
+}
+
+@media (max-width: 760px) {
+  .app-shell {
+    flex-direction: column;
+  }
+
+  .sidebar {
+    width: 100%;
+    height: auto;
+    position: sticky;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+  }
+
+  .sidebar-spacer {
+    display: none;
+  }
+
+  .sidebar-footer {
+    flex-direction: row;
+  }
+}
diff --git a/web/src/styles/shell.css b/web/src/styles/shell.css
deleted file mode 100644
index 4a99705..0000000
--- a/web/src/styles/shell.css
+++ /dev/null
@@ -1,235 +0,0 @@
-.ops-shell {
-  position: relative;
-  isolation: isolate;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  min-height: 100vh;
-  height: 100vh;
-  padding: 18px clamp(18px, 2.2vw, 34px) 22px;
-  overflow-x: hidden;
-  overflow-y: auto;
-  /* Reserve the vertical scrollbar's track so its appearance never reflows
-     content. On platforms with classic (16px) scrollbars this prevents the
-     transient horizontal overflow that intermittently tripped the visual
-     smoke test; on overlay-scrollbar platforms it is a no-op. */
-  scrollbar-gutter: stable;
-  color: var(--haptic);
-  background:
-    radial-gradient(circle at 50% -18%, rgba(0, 112, 204, 0.14), transparent 36%),
-    radial-gradient(circle at 82% 18%, rgba(226, 232, 240, 0.045), transparent 25%),
-    linear-gradient(180deg, #0C0C0F 0%, var(--obsidian) 42%, #070708 100%);
-}
-
-.ops-shell::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  z-index: -1;
-  pointer-events: none;
-  opacity: 0.18;
-  background-image:
-    linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
-    linear-gradient(90deg, rgba(255, 255, 255, 0.014) 1px, transparent 1px);
-  background-size: 44px 44px;
-  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.92), rgba(0, 0, 0, 0.18));
-}
-
-.dm-hud {
-  position: sticky;
-  top: 0;
-  z-index: 30;
-  display: grid;
-  grid-template-columns: minmax(220px, 1fr) auto minmax(220px, 1fr);
-  align-items: center;
-  gap: clamp(14px, 2vw, 26px);
-  flex: 0 0 64px;
-  height: 64px;
-  background: linear-gradient(180deg, rgba(12, 12, 15, 0.96), rgba(12, 12, 15, 0.82));
-  backdrop-filter: blur(12px);
-}
-
-.dm-hardware-state,
-.dm-system-readout {
-  display: flex;
-  align-items: center;
-  gap: 14px;
-  min-width: 0;
-}
-
-.dm-hardware-state > div {
-  min-width: 0;
-}
-
-.dm-hardware-state h1 {
-  margin: 0;
-  overflow: hidden;
-  color: #FFFFFF;
-  font-family: "Space Grotesk", "Inter Tight", Inter, sans-serif;
-  font-size: 20px;
-  font-weight: 700;
-  line-height: 1;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.dm-app-tagline {
-  display: inline-block;
-  color: var(--tungsten);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-}
-
-.dm-hardware-state p,
-.dm-system-readout small,
-.dm-system-readout span {
-  margin: 0;
-  overflow: hidden;
-  color: var(--tungsten);
-  font-size: 12px;
-  line-height: 1.25;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.dm-hardware-state p {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  min-width: 0;
-}
-
-.dm-controller-glyph {
-  width: 42px;
-  height: 42px;
-  flex: 0 0 auto;
-  color: var(--haptic);
-  opacity: 0.82;
-  background: currentColor;
-  mask: url("/dualsense-controller.svg") center / contain no-repeat;
-  -webkit-mask: url("/dualsense-controller.svg") center / contain no-repeat;
-}
-
-.dm-battery-pill {
-  display: inline-flex;
-  align-items: center;
-  gap: 5px;
-  min-width: 0;
-  color: var(--tungsten);
-}
-
-.dm-battery {
-  width: 28px;
-  height: 14px;
-  flex: 0 0 auto;
-  color: var(--tungsten);
-}
-
-.dm-battery rect:first-child,
-.dm-battery path {
-  fill: none;
-  stroke: currentColor;
-  stroke-width: 1.5;
-}
-
-.dm-battery-fill {
-  fill: var(--haptic);
-}
-
-.dm-system-cluster {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 8px;
-  width: 100%;
-  min-width: 0;
-}
-
-.dm-system-readout {
-  justify-content: flex-end;
-  text-align: right;
-}
-
-.dm-view-nav {
-  display: inline-flex;
-  align-items: center;
-  justify-self: center;
-  gap: 4px;
-  max-width: 100%;
-  padding: 4px;
-  overflow: hidden;
-  background: rgba(18, 18, 20, 0.72);
-  box-shadow:
-    inset 0 1px 0 rgba(226, 232, 240, 0.06),
-    inset 0 0 0 1px rgba(226, 232, 240, 0.06);
-}
-
-.dm-view-nav .dscc-tooltip {
-  flex: 0 1 auto;
-  min-width: 0;
-}
-
-.dm-view-nav .dscc-tooltip button {
-  width: 100%;
-}
-
-.dm-view-nav button {
-  height: 34px;
-  min-width: 0;
-  padding: 0 14px;
-  border: 0;
-  border-radius: 5px;
-  color: var(--tungsten);
-  background: transparent;
-  font-size: 12px;
-  font-weight: 800;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  transition: color 0.15s ease-out, background-color 0.15s ease-out, box-shadow 0.15s ease-out;
-}
-
-.dm-view-nav button:hover,
-.dm-view-nav button.active {
-  color: #FFFFFF;
-  background: rgba(0, 112, 204, 0.16);
-  box-shadow: inset 0 0 0 1px rgba(0, 112, 204, 0.34);
-}
-
-.dm-system-readout strong {
-  color: var(--actuation);
-  font-size: 15px;
-  font-weight: 700;
-  white-space: nowrap;
-}
-
-.dm-system-readout span,
-.dm-system-readout small {
-  display: block;
-}
-
-.dm-support-trigger {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  min-height: 32px;
-  padding: 0 7px;
-  border: 1px solid rgba(113, 113, 122, 0.44);
-  border-radius: 6px;
-  color: var(--haptic);
-  background: rgba(18, 18, 20, 0.72);
-  font-size: 12px;
-  font-weight: 800;
-  white-space: nowrap;
-  transition: border-color 150ms ease-out, background-color 150ms ease-out, color 150ms ease-out;
-}
-
-.dm-support-trigger:hover,
-.dm-support-trigger.active {
-  border-color: rgba(0, 112, 204, 0.72);
-  color: #FFFFFF;
-  background: rgba(0, 112, 204, 0.14);
-}
diff --git a/web/src/styles/status.css b/web/src/styles/status.css
new file mode 100644
index 0000000..8088646
--- /dev/null
+++ b/web/src/styles/status.css
@@ -0,0 +1,239 @@
+/* Status — the glanceable page (layout truth: status-advanced-v2-psblue mockup).
+   Groups are intrinsic-width flex children that wrap; boxes only where content
+   needs a bounded field. */
+
+/* Shared 10px caps label treatment used by Status (and later canvases). */
+.lbl {
+  font-size: 10px;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+  color: var(--ink-muted);
+}
+
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.status-view {
+  font-size: 12px;
+  line-height: 1.45;
+  color: var(--ink);
+}
+
+/* Sentence of truth */
+.status-sentence {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 6px 10px;
+}
+
+.status-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.status-dot.ok { background: var(--ok); }
+.status-dot.warn { background: var(--warn); }
+.status-dot.danger { background: var(--danger); }
+
+.status-headline {
+  font-size: 15px;
+  font-weight: 600;
+}
+
+.status-clause {
+  font-size: 12px;
+  color: var(--ink-muted);
+}
+
+/* Groups row — intrinsic widths, wraps naturally, no stretched hero cards */
+.status-groups {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: 16px 22px;
+  margin-top: 16px;
+}
+
+.status-group {
+  flex: 1 1 280px;
+  min-width: 260px;
+  max-width: 420px;
+}
+
+.status-group.narrow {
+  flex: 1 1 240px;
+  min-width: 230px;
+  max-width: 360px;
+}
+
+.status-surf {
+  margin-top: 6px;
+  padding: 12px 14px;
+  background: var(--surface);
+  border-radius: var(--radius-m);
+}
+
+.status-empty {
+  font-size: 11px;
+  color: var(--ink-muted);
+}
+
+/* Controller block */
+.status-controller-card {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.status-controller-card + .status-controller-card {
+  margin-top: 10px;
+  padding-top: 10px;
+  border-top: 1px solid var(--hairline);
+}
+
+.status-controller-icon {
+  width: 46px;
+  height: 34px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  border-radius: var(--radius-m);
+  background: var(--surface-raised);
+}
+
+.status-controller-main {
+  flex: 1;
+  min-width: 0;
+}
+
+.status-controller-name {
+  font-weight: 600;
+}
+
+.status-controller-name .status-mut {
+  font-weight: 400;
+}
+
+.status-controller-line {
+  margin-top: 2px;
+  font-size: 11px;
+  color: var(--ink-muted);
+}
+
+.status-hint {
+  margin-top: 8px;
+  font-size: 11px;
+  color: var(--ink-muted);
+}
+
+.status-rename {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.status-rename input {
+  flex: 1;
+  min-width: 0;
+  font: inherit;
+  color: var(--ink);
+  background: var(--surface-raised);
+  border: 1px solid var(--hairline-strong);
+  border-radius: var(--radius-s);
+  padding: 3px 8px;
+}
+
+.status-rename input:focus-visible {
+  outline: 2px solid var(--accent-bright);
+  outline-offset: 1px;
+}
+
+.status-link {
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--accent-text);
+  background: none;
+  border: 0;
+  padding: 0;
+  cursor: pointer;
+}
+
+.status-link.mut {
+  color: var(--ink-muted);
+}
+
+.status-link:disabled {
+  opacity: 0.55;
+  cursor: default;
+}
+
+.status-link:focus-visible {
+  outline: 2px solid var(--accent-bright);
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+
+/* What's active rows */
+.status-rows {
+  margin-top: 6px;
+}
+
+.status-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  gap: 12px;
+  padding: 6px 0;
+  font-size: 11px;
+  border-bottom: 1px solid var(--hairline);
+}
+
+.status-row:last-child {
+  border-bottom: 0;
+}
+
+.status-row > span:last-child {
+  text-align: right;
+}
+
+.status-strong {
+  font-weight: 600;
+}
+
+.status-strong .status-mut {
+  font-weight: 400;
+}
+
+/* Needs attention */
+.status-finding {
+  font-size: 11px;
+}
+
+.status-finding + .status-finding {
+  margin-top: 8px;
+}
+
+.status-finding-detail {
+  margin-top: 4px;
+  font-size: 10px;
+  color: var(--ink-muted);
+}
+
+.status-ok { color: var(--ok); }
+.status-warn { color: var(--warn); }
+.status-mut { color: var(--ink-muted); }
diff --git a/web/src/styles/tokens.css b/web/src/styles/tokens.css
index e69f7de..ab5ceb3 100644
--- a/web/src/styles/tokens.css
+++ b/web/src/styles/tokens.css
@@ -1,16 +1,58 @@
 :root {
-  --obsidian: #0A0A0C;
-  --carbon: #121214;
-  --actuation: #0070CC;
-  --haptic: #E2E8F0;
-  --tungsten: #71717A;
-  --overdrive: #F03E3E;
-  --ready: #22C55E;
-  --matte: rgba(226, 232, 240, 0.045);
-  --line: rgba(113, 113, 122, 0.28);
-  color: var(--haptic);
-  background: var(--obsidian);
+  /* neutrals — calm console */
+  --bg: #141417;
+  --bg-rail: #18181c;        /* sidebar, header bars */
+  --surface: #1d1d22;        /* panels that need a bounded field */
+  --surface-raised: #26262c; /* active nav item, chips, inputs */
+  --hairline: #232329;
+  --hairline-strong: #2e2e36;
+  --ink: #d6d6dc;
+  --ink-muted: #8b8b96;      /* secondary text only; not body-sized prose */
+
+  /* accent — PlayStation blue */
+  --accent: #0070cc;          /* primary buttons */
+  --accent-bright: #1f8fff;   /* slider fills, live lines, meters */
+  --accent-text: #5db2ff;     /* accent-colored text on dark (>=4.5:1) */
+  --accent-tint: #12273d;     /* edited/unsaved backgrounds */
+  --accent-outline: #1d4f80;  /* edited outlines */
+
+  /* semantic */
+  --ok: #4ade80;
+  --ok-tint: #143620;
+  --warn: #facc15;
+  --danger: #f03e3e;
+
+  /* shape & rhythm */
+  --radius-s: 6px;
+  --radius-m: 8px;
+  --radius-l: 10px;
+  --speed: 180ms;
+  --ease: cubic-bezier(0.22, 1, 0.36, 1); /* ease-out-quint-ish */
+
+  /* layout contract (spec §6) */
+  --curve-min: 280px;
+  --curve-max: 460px;
+  --slider-cap: 220px;
+  --saved-rail-w: 260px;
+
+  /* z-scale: dropdown < sticky < backdrop < dialog < toast < tooltip */
+  --z-dropdown: 10;
+  --z-sticky: 20;
+  --z-backdrop: 30;
+  --z-dialog: 40;
+  --z-toast: 50;
+  --z-tooltip: 60;
+
+  /* typography */
+  --font-mono: "JetBrains Mono", ui-monospace, monospace; /* literal values only: ports, IPs, raw readouts */
+
+  color: var(--ink);
+  background: var(--bg);
   font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   font-synthesis: none;
   text-rendering: optimizeLegibility;
 }
+
+@media (prefers-reduced-motion: reduce) {
+  :root { --speed: 0ms; }
+}
diff --git a/web/src/styles/tuning.css b/web/src/styles/tuning.css
new file mode 100644
index 0000000..4f07025
--- /dev/null
+++ b/web/src/styles/tuning.css
@@ -0,0 +1,1044 @@
+/* Tuning canvas — header band, game dropdown, profile menu (Task 5).
+   Visual register: calm, flat, hairlines, PS-blue accent. */
+
+.tuning-header {
+  position: relative;
+  min-height: 80px;
+  background-color: var(--bg-rail);
+  background-position: center 30%;
+  background-size: cover;
+  border-bottom: 1px solid var(--hairline);
+}
+
+.tuning-header-scrim {
+  position: absolute;
+  inset: 0;
+  background:
+    linear-gradient(90deg, rgba(20, 20, 23, 0.92) 0%, rgba(20, 20, 23, 0.55) 45%, rgba(20, 20, 23, 0.25) 100%),
+    linear-gradient(0deg, var(--bg) 0%, rgba(20, 20, 23, 0) 60%);
+}
+
+.tuning-header-content {
+  position: relative;
+  min-height: 80px;
+  padding: 12px 16px 10px;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 8px 12px;
+  flex-wrap: wrap;
+}
+
+.tuning-header-identity {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+}
+
+.tuning-header-thumb {
+  flex: 0 0 auto;
+  width: 32px;
+  height: 48px;
+  border-radius: 4px;
+  overflow: hidden;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
+}
+
+.tuning-header-thumb img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.tuning-header-titles {
+  min-width: 0;
+}
+
+.tuning-header-title-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+  min-width: 0;
+}
+
+.tuning-header-game {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  background: none;
+  border: 0;
+  padding: 2px 0;
+  color: var(--ink);
+  cursor: pointer;
+  font: inherit;
+  min-width: 0;
+  max-width: 100%;
+}
+
+.tuning-header-game strong {
+  font-size: 15px;
+  font-weight: 700;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.tuning-caret {
+  color: var(--ink-muted);
+  font-size: 11px;
+  flex: 0 0 auto;
+}
+
+.tuning-header-game:hover .tuning-caret,
+.tuning-header-profile:hover .tuning-caret {
+  color: var(--ink);
+}
+
+.tuning-telemetry-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  border-radius: 999px;
+  padding: 3px 10px;
+  font-size: 9px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+.tuning-telemetry-chip.fresh {
+  background: var(--ok-tint);
+  color: var(--ok);
+}
+
+.tuning-telemetry-chip.quiet {
+  background: rgba(250, 204, 21, 0.12);
+  color: var(--warn);
+}
+
+.tuning-telemetry-chip.setup {
+  background: var(--accent-tint);
+  color: var(--accent-text);
+}
+
+.tuning-telemetry-chip.none {
+  background: var(--surface-raised);
+  color: var(--ink-muted);
+}
+
+/* The chip is the door back into the setup guide (Task 8). */
+.tuning-telemetry-chip.clickable {
+  border: 0;
+  font-family: inherit;
+  cursor: pointer;
+  transition: filter var(--speed) var(--ease);
+}
+
+.tuning-telemetry-chip.clickable:hover,
+.tuning-telemetry-chip.clickable:focus-visible {
+  filter: brightness(1.3);
+}
+
+.tuning-chip-suffix {
+  color: var(--ink-muted);
+  font-weight: 500;
+  text-transform: none;
+  letter-spacing: normal;
+}
+
+.tuning-header-profile-row {
+  margin-top: 2px;
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+  min-width: 0;
+}
+
+.tuning-header-profile {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 5px;
+  background: none;
+  border: 0;
+  padding: 0;
+  color: var(--ink-muted);
+  cursor: pointer;
+  font-size: 11px;
+  font-family: inherit;
+  min-width: 0;
+}
+
+.tuning-header-profile:disabled {
+  cursor: default;
+  opacity: 0.6;
+}
+
+.tuning-header-profile strong {
+  color: var(--ink);
+  font-weight: 600;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.tuning-unsaved-note {
+  font-size: 10px;
+  color: var(--accent-text);
+  white-space: nowrap;
+}
+
+.tuning-header-controller {
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+  font-size: 11px;
+  color: var(--ink-muted);
+  white-space: nowrap;
+  flex: 0 0 auto;
+}
+
+.tuning-controller-dot {
+  color: var(--ok);
+  font-size: 9px;
+}
+
+/* --- inline profile name editor (save-as / rename) ------------------------ */
+
+.tuning-profile-editor {
+  display: flex;
+  align-items: flex-end;
+  gap: 8px;
+  padding: 10px 16px;
+  background: var(--surface);
+  border-bottom: 1px solid var(--hairline);
+}
+
+.tuning-profile-editor label {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+  flex: 0 1 280px;
+}
+
+.tuning-profile-editor label span {
+  font-size: 10px;
+  letter-spacing: 0.02em;
+  color: var(--ink-muted);
+}
+
+.tuning-profile-editor input {
+  background: var(--surface-raised);
+  border: 1px solid var(--hairline-strong);
+  border-radius: var(--radius-s);
+  color: var(--ink);
+  font: inherit;
+  font-size: 12px;
+  padding: 6px 8px;
+}
+
+/* --- dropdown menus -------------------------------------------------------- */
+
+.tuning-menu {
+  position: fixed;
+  z-index: var(--z-dropdown);
+  width: 252px;
+  max-height: min(60vh, 420px);
+  overflow-y: auto;
+  background: var(--surface-raised);
+  border: 1px solid var(--hairline-strong);
+  border-radius: var(--radius-l);
+  padding: 6px;
+  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
+}
+
+.tuning-menu-label {
+  font-size: 9px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--ink-muted);
+  padding: 6px 8px 4px;
+}
+
+.tuning-menu-divider {
+  border-top: 1px solid var(--hairline-strong);
+  margin: 6px 4px;
+}
+
+.tuning-menu-item {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 8px;
+  width: 100%;
+  text-align: left;
+  background: none;
+  border: 0;
+  border-radius: var(--radius-s);
+  padding: 6px 8px;
+  color: var(--ink);
+  font-family: inherit;
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.tuning-menu-item:hover,
+.tuning-menu-item:focus-visible {
+  background: var(--surface);
+  outline: none;
+}
+
+.tuning-menu-item:focus-visible {
+  box-shadow: inset 0 0 0 1px var(--accent-outline);
+}
+
+.tuning-menu-item:disabled {
+  color: var(--ink-muted);
+  cursor: default;
+  opacity: 0.55;
+}
+
+.tuning-menu-item.current {
+  background: var(--accent-tint);
+  color: var(--accent-text);
+}
+
+.tuning-menu-item.accent {
+  color: var(--accent-text);
+}
+
+.tuning-menu-item-text {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.tuning-menu-item-meta {
+  flex: 0 0 auto;
+  font-size: 9px;
+  color: var(--ink-muted);
+}
+
+.tuning-menu-item.current .tuning-menu-item-meta {
+  color: var(--accent-text);
+}
+
+.tuning-running-dot {
+  color: var(--ok);
+  margin-right: 6px;
+  font-size: 10px;
+}
+
+/* --- tuning canvas: semantic columns (Task 6; layout truth tuning-canvas-v9) -
+
+   Columns group by what is being tuned (Brake / Throttle / Road feel /
+   Lights). No wasted space: extra width grows the trigger-curve instruments
+   only; small columns cap at 320px and slider tracks at --slider-cap. Task 7
+   wraps .canvas-grid in a .work-and-rail flex container. */
+
+.canvas-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 18px 22px;
+  padding: 14px 16px 18px;
+  flex: 1;
+  min-width: 0;
+}
+
+.col-trigger {
+  flex: 1 1 300px;
+  min-width: var(--curve-min);
+  max-width: var(--curve-max);
+}
+
+.col-small {
+  flex: 1 1 220px;
+  min-width: 210px;
+  max-width: 320px;
+}
+
+@media (max-width: 760px) {
+  .col-trigger,
+  .col-small {
+    max-width: none;
+    flex-basis: 100%;
+  }
+}
+
+.canvas-col-body {
+  margin-top: 6px;
+  display: grid;
+  gap: 12px;
+  align-content: start;
+}
+
+.canvas-hint {
+  margin: 10px 0 0;
+  font-size: 10px;
+  color: var(--ink-muted);
+}
+
+/* Pre-canvas panel chrome neutralized inside columns — the column label carries
+   the identity, the panels become bare instruments. */
+.canvas-grid .dm-physics {
+  display: block;
+  padding: 0;
+  background: none;
+  box-shadow: none;
+}
+
+.canvas-grid .dm-curve-stack {
+  display: block;
+}
+
+.canvas-grid .dm-curve-module {
+  grid-template-rows: auto auto auto;
+}
+
+.canvas-grid .dm-curve-frame {
+  height: 170px;
+}
+
+.canvas-grid .dm-slider-bank {
+  margin-top: 8px;
+  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
+}
+
+.canvas-grid .dm-channel-list {
+  overflow: visible;
+  padding: 0;
+}
+
+/* Channel strips reflow to three rows inside the narrow semantic columns:
+   toggle | name on top, then the fader (slider + value field), then the
+   route. The fader's value field needs ~154px beside the slider, which the
+   210–320px small columns cannot grant next to a route select, so each
+   control row gets the full strip width and nothing overlaps. */
+.canvas-grid .dm-channel-strip {
+  grid-template-columns: 42px minmax(0, 1fr);
+  row-gap: 6px;
+}
+
+.canvas-grid .dm-channel-strip > .strip-name {
+  grid-column: 2 / -1;
+}
+
+.canvas-grid .dm-channel-strip > .strip-fader {
+  grid-column: 1 / -1;
+  grid-row: 2;
+}
+
+.canvas-grid .dm-channel-strip > .strip-route {
+  grid-column: 1 / -1;
+  grid-row: 3;
+  max-width: calc(var(--slider-cap) + 68px); /* match the fader's cap */
+}
+
+/* Sliders never stretch: cap the track, keep the value field beside it. */
+.canvas-grid .dm-range {
+  max-width: var(--slider-cap);
+}
+
+.canvas-grid .dm-fader {
+  max-width: calc(var(--slider-cap) + 68px); /* track cap + value field + gap */
+}
+
+.dm-effects-embedded-head {
+  display: flex;
+  justify-content: flex-end;
+}
+
+/* Lights column: the RGB console rows wrap instead of demanding the wide
+   six-track grid, and the console title yields to the column label. */
+.canvas-grid .dm-rgb-console {
+  padding-top: 0;
+  box-shadow: none;
+}
+
+.canvas-grid .dm-console-title {
+  display: none;
+}
+
+.canvas-grid .dm-led-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+}
+
+.canvas-grid .dm-led-row > span {
+  flex: 0 0 auto;
+}
+
+.canvas-grid .dm-led-row .dm-mini-range {
+  flex: 1 1 96px;
+  max-width: var(--slider-cap);
+}
+
+/* --- saved rail (Task 7; layout truth tuning-canvas-v9) ---------------------
+
+   THE RULE: the rail is furniture. Fixed --saved-rail-w, sticky, docked right
+   of .canvas-grid, never part of the column wrap. Below 900px it hides and a
+   bottom-docked bar takes over (rendered only while changes are unsaved). */
+
+.work-and-rail {
+  display: flex;
+  align-items: flex-start;
+}
+
+.saved-rail {
+  flex: 0 0 var(--saved-rail-w);
+  position: sticky;
+  top: 14px;
+  margin: 14px 16px 18px 0;
+  padding: 12px 14px;
+  background: var(--surface);
+  border: 1px solid var(--hairline);
+  border-radius: var(--radius-m);
+}
+
+.saved-rail-title {
+  font-size: 9px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--ink-muted);
+}
+
+.saved-rail-rows {
+  margin-top: 6px;
+  max-height: min(48vh, 420px);
+  overflow-y: auto;
+}
+
+.saved-row {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 4px 0;
+  border-bottom: 1px solid var(--hairline);
+  font-size: 11px;
+}
+
+.saved-row:last-child {
+  border-bottom: 0;
+}
+
+.saved-row-label {
+  color: var(--ink);
+  min-width: 0;
+}
+
+.saved-row-value {
+  flex: 0 1 auto;
+  text-align: right;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.saved-row-saved,
+.saved-row-was {
+  color: var(--ink-muted);
+}
+
+.saved-row-now {
+  color: var(--accent-text);
+  font-weight: 600;
+}
+
+.saved-rail-foot {
+  margin-top: 12px;
+  padding-top: 10px;
+  border-top: 1px solid var(--hairline-strong);
+}
+
+.saved-preview-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.saved-preview-button {
+  background: var(--accent-tint);
+  color: var(--accent-text);
+  border: 0;
+  border-radius: var(--radius-s);
+  padding: 5px 12px;
+  font-family: inherit;
+  font-size: 11px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.saved-preview-button.active {
+  box-shadow: inset 0 0 0 1px var(--accent-outline);
+}
+
+.saved-preview-button:disabled {
+  opacity: 0.55;
+  cursor: default;
+}
+
+.saved-preview-note {
+  font-size: 9px;
+  color: var(--ink-muted);
+  white-space: nowrap;
+}
+
+.saved-rail-actions {
+  display: flex;
+  gap: 8px;
+  margin-top: 8px;
+}
+
+.saved-save-button {
+  flex: 1;
+  background: var(--accent);
+  color: #fff;
+  border: 0;
+  border-radius: var(--radius-s);
+  padding: 5px 0;
+  font-family: inherit;
+  font-size: 11px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.saved-discard-button {
+  flex: 0 0 auto;
+  background: var(--surface-raised);
+  color: var(--ink-muted);
+  border: 0;
+  border-radius: var(--radius-s);
+  padding: 5px 12px;
+  font-family: inherit;
+  font-size: 11px;
+  cursor: pointer;
+}
+
+.saved-save-button:disabled,
+.saved-discard-button:disabled {
+  opacity: 0.55;
+  cursor: default;
+}
+
+/* <900px: the rail becomes a bottom-docked bar with the same Save/Discard,
+   expanding to the full saved list on tap. Hidden entirely while clean
+   (the bar only renders when dirty). */
+.saved-mobile-bar {
+  display: none;
+  position: fixed;
+  right: 12px;
+  bottom: 12px;
+  z-index: var(--z-sticky);
+  /* 100% (the fixed-position containing block) rather than 100vw: the
+     viewport unit includes the document scrollbar and overhangs the edge. */
+  width: min(420px, calc(100% - 24px));
+  background: var(--surface);
+  border: 1px solid var(--accent-outline);
+  border-radius: var(--radius-m);
+  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
+}
+
+.saved-mobile-rows {
+  padding: 8px 12px 0;
+  max-height: min(46vh, 360px);
+  overflow-y: auto;
+}
+
+.saved-mobile-rows .saved-preview-row {
+  padding: 8px 0;
+}
+
+.saved-mobile-summary {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 8px 12px;
+}
+
+.saved-mobile-toggle {
+  background: none;
+  border: 0;
+  padding: 0;
+  font-family: inherit;
+  font-size: 11px;
+  color: var(--ink-muted);
+  cursor: pointer;
+  min-width: 0;
+  text-align: left;
+}
+
+.saved-mobile-toggle strong {
+  color: var(--accent-text);
+  font-weight: 600;
+}
+
+.saved-mobile-actions {
+  display: flex;
+  gap: 8px;
+  flex: 0 0 auto;
+}
+
+.saved-mobile-actions .saved-save-button {
+  flex: 0 0 auto;
+  padding: 4px 10px;
+}
+
+.saved-mobile-actions .saved-discard-button {
+  padding: 4px 10px;
+}
+
+@media (max-width: 900px) {
+  .saved-rail {
+    display: none;
+  }
+
+  .saved-mobile-bar {
+    display: block;
+  }
+}
+
+/* Content parked below the grid until Tasks 8-10 re-home it. */
+.canvas-below {
+  display: grid;
+  gap: 14px;
+  padding: 0 16px 18px;
+}
+
+.canvas-parked {
+  display: grid;
+  gap: 12px;
+  padding: 14px;
+  background: var(--surface);
+  border: 1px solid var(--hairline);
+  border-radius: var(--radius-m);
+}
+
+/* The parked trigger-controls panel sits directly in .canvas-below; give it
+   the same bounded field the .canvas-parked wrappers provide (the HUD-era
+   panel background it used to lean on is gone). */
+.canvas-below > .dm-physics {
+  background: var(--surface);
+  border: 1px solid var(--hairline);
+  border-radius: var(--radius-m);
+}
+
+/* --- per-game setup guide (Task 8; layout truth game-setup.html) ------------
+
+   A canvas state, not a pop-up: replaces the tuning grid (rail included)
+   until the game's requirements verify. Numbered steps because setup IS a
+   sequence; the LISTENING box flips green passively when packets arrive. */
+
+.setup-guide {
+  padding: 16px;
+  max-width: 980px;
+}
+
+.setup-guide-head h2 {
+  margin: 0;
+  font-size: 15px;
+  font-weight: 700;
+  color: var(--ink);
+}
+
+.setup-guide-sub {
+  margin: 3px 0 0;
+  font-size: 11px;
+  color: var(--ink-muted);
+}
+
+.setup-guide-grid {
+  display: flex;
+  gap: 26px;
+  margin-top: 16px;
+  flex-wrap: wrap;
+}
+
+.setup-steps {
+  flex: 1 1 380px;
+  min-width: 280px;
+  max-width: 560px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.setup-step {
+  display: flex;
+  gap: 10px;
+  align-items: flex-start;
+}
+
+.setup-stepnum {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: var(--surface-raised);
+  color: var(--ink-muted);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 10px;
+  font-weight: 600;
+  flex-shrink: 0;
+}
+
+.setup-stepnum.done {
+  background: var(--ok-tint);
+  color: var(--ok);
+}
+
+.setup-stepnum.now {
+  background: var(--accent);
+  color: #fff;
+}
+
+.setup-step-body {
+  flex: 1;
+  min-width: 0;
+  padding-bottom: 14px;
+  border-left: 1px solid var(--hairline);
+  margin-left: -15px;
+  padding-left: 24px;
+}
+
+.setup-step:last-child .setup-step-body {
+  border-left-color: transparent;
+  padding-bottom: 0;
+}
+
+.setup-step-title {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--ink);
+}
+
+.setup-step-title.settled {
+  color: var(--ink-muted);
+}
+
+.setup-step-detail {
+  margin-top: 3px;
+  font-size: 11px;
+  color: var(--ink-muted);
+}
+
+.setup-step-detail b {
+  color: var(--ink);
+}
+
+.setup-copy-card {
+  margin-top: 8px;
+  padding: 9px 12px;
+  display: inline-block;
+  background: var(--surface);
+  border: 1px solid var(--hairline);
+  border-radius: var(--radius-m);
+}
+
+.setup-copy-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 11px;
+  color: var(--ink);
+}
+
+.setup-copy-row + .setup-copy-row {
+  margin-top: 5px;
+}
+
+.setup-copy-label {
+  min-width: 72px;
+  color: var(--ink-muted);
+}
+
+.setup-kbd {
+  background: var(--surface-raised);
+  border: 1px solid var(--hairline-strong);
+  border-radius: 4px;
+  padding: 1px 6px;
+  font-family: ui-monospace, 'JetBrains Mono', monospace;
+  font-size: 10px;
+  color: var(--ink);
+  user-select: all;
+}
+
+.setup-copy-button {
+  background: none;
+  border: 0;
+  padding: 0;
+  font-family: inherit;
+  font-size: 10px;
+  color: var(--accent-text);
+  cursor: pointer;
+}
+
+.setup-copy-button:hover,
+.setup-copy-button:focus-visible {
+  text-decoration: underline;
+}
+
+.setup-copy-fallback {
+  margin-top: 6px;
+  font-size: 10px;
+  color: var(--warn);
+}
+
+/* LISTENING box: bound to live telemetry; flips to --ok on its own. */
+.setup-listening {
+  flex: 0 1 280px;
+  min-width: 250px;
+  align-self: flex-start;
+  padding: 12px 14px;
+  background: var(--surface);
+  border: 1px solid var(--hairline);
+  border-radius: var(--radius-m);
+  transition: border-color var(--speed) var(--ease);
+}
+
+.setup-listening.ok {
+  border-color: var(--ok);
+}
+
+.setup-lbl {
+  font-size: 10px;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+  color: var(--ink-muted);
+}
+
+.setup-listening-line {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 8px;
+  font-size: 11px;
+  color: var(--ink);
+}
+
+.setup-listening-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--accent-bright);
+  flex: 0 0 auto;
+}
+
+.setup-listening.ok .setup-listening-dot {
+  background: var(--ok);
+}
+
+.setup-listening-note {
+  margin: 6px 0 0;
+  font-size: 10px;
+  color: var(--ink-muted);
+}
+
+.setup-listening.ok .setup-listening-note {
+  color: var(--ok);
+}
+
+.setup-stuck {
+  margin-top: 10px;
+  padding-top: 8px;
+  border-top: 1px solid var(--hairline);
+}
+
+.setup-stuck summary {
+  font-size: 10px;
+  color: var(--accent-text);
+  cursor: pointer;
+}
+
+.setup-stuck ul {
+  margin: 8px 0 0;
+  padding-left: 16px;
+  font-size: 10px;
+  color: var(--ink-muted);
+  display: grid;
+  gap: 4px;
+}
+
+.setup-adapter-hint {
+  margin: 8px 0 0;
+  font-size: 10px;
+  color: var(--ink-muted);
+}
+
+/* Zero-setup variant: reassurance + pre-tune offer. */
+.setup-zero-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  margin-bottom: 8px;
+  border-radius: 999px;
+  padding: 3px 10px;
+  background: var(--ok-tint);
+  color: var(--ok);
+  font-size: 9px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+.setup-pretune {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+  margin-top: 14px;
+  padding: 10px 14px;
+  background: var(--surface);
+  border: 1px solid var(--hairline);
+  border-radius: var(--radius-m);
+}
+
+.setup-pretune p {
+  margin: 0;
+  font-size: 11px;
+  color: var(--ink-muted);
+}
+
+.setup-pretune-button {
+  background: var(--accent);
+  color: #fff;
+  border: 0;
+  border-radius: var(--radius-s);
+  padding: 6px 14px;
+  font-family: inherit;
+  font-size: 11px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.setup-pretune-button:hover,
+.setup-pretune-button:focus-visible {
+  filter: brightness(1.15);
+}
+
+@media (max-width: 480px) {
+  .tuning-header-content {
+    padding: 10px 12px 8px;
+  }
+
+  .tuning-header-controller {
+    order: -1;
+    width: 100%;
+    justify-content: flex-end;
+  }
+
+  .tuning-header-game strong {
+    font-size: 14px;
+    max-width: 60vw;
+  }
+}
diff --git a/web/src/styles/workspace.css b/web/src/styles/workspace.css
deleted file mode 100644
index 6babacd..0000000
--- a/web/src/styles/workspace.css
+++ /dev/null
@@ -1,27 +0,0 @@
-.dm-deck {
-  display: grid;
-  grid-template-columns: minmax(0, 5.7fr) minmax(0, 6.3fr);
-  gap: clamp(14px, 1.5vw, 22px);
-  flex: 1 1 0;
-  width: min(1500px, 100%);
-  height: auto;
-  margin: 0 auto;
-  min-height: 0;
-}
-
-.dm-view-hidden {
-  display: none !important;
-}
-
-.dm-physics,
-.dm-routing,
-.dm-button-map-panel {
-  min-width: 0;
-  min-height: 0;
-  background:
-    linear-gradient(180deg, rgba(226, 232, 240, 0.035), rgba(226, 232, 240, 0.012)),
-    rgba(18, 18, 20, 0.82);
-  box-shadow:
-    inset 0 1px 0 rgba(226, 232, 240, 0.06),
-    inset 0 0 0 1px rgba(226, 232, 240, 0.035);
-}