diff --git a/.github/labeler.yml b/.github/labeler.yml
index 1914176c..c5e25ddc 100644
--- a/.github/labeler.yml
+++ b/.github/labeler.yml
@@ -1,12 +1,12 @@
 "area: ui":
   - changed-files:
-      - any-glob-to-any-file: ['src/app/**', 'src/**/*.css', 'index.html']
+      - any-glob-to-any-file: ['src/app/**', 'src/features/**/*.tsx', 'src/shared/**', 'src/styles/**', 'index.html']
 "area: devices":
   - changed-files:
-      - any-glob-to-any-file: ['src/device/**', 'src/*hid*', 'src/*device*', 'src/logitech-*']
+      - any-glob-to-any-file: ['src/device/**', 'src/features/devices/**', 'src/features/buttons/**', 'src/features/bridge/**']
 "area: translations":
   - changed-files:
-      - any-glob-to-any-file: ['src/i18n*.ts']
+      - any-glob-to-any-file: ['src/i18n/**']
 "area: artwork":
   - changed-files:
       - any-glob-to-any-file: ['public/devices/**/*.{png,jpg,jpeg,webp,svg,avif}']
diff --git a/AGENTS.md b/AGENTS.md
index a38a6be5..d16f18b2 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -4,38 +4,90 @@ Guidance for human contributors and AI agents working in this repository.
 
 ## Design
 
-Read [`DESIGN.md`](./DESIGN.md) before touching any UI. The project follows
-Material Design 3 (M3): colored filled icon glyphs, floating rounded surfaces,
-elevation instead of borders, and theme-token-only colors. All the specific
-conventions — sidebar layout, device cards, artwork handling, and the icon
-accent palette — are defined there.
+Read [`DESIGN.md`](./DESIGN.md) before touching any UI. It is the source of truth for how
+OpenMouse looks: a calm, dark, instrument-like control panel where the device is the hero and
+settings read as numbers.
 
-Key rules that must never be broken:
+Rules that must never be broken:
 
-- Use design tokens from `src/control.css`; never hardcode colors in TSX.
+- Colours come from the tokens in `src/styles/tokens.css`. No hex, `rgb()` literals or theme-name
+  checks in TSX or area CSS; alpha mixes use the `-rgb` triples (`rgb(var(--accent-rgb) / 0.12)`).
+- Every theme (12 of them, Emerald default) is a full token set. A change must look right in
+  Emerald, Light and NieR, and mirror correctly in Arabic (RTL).
+- Sentence case everywhere. No uppercase micro labels, no category overlines, no em dashes in copy.
+- Real data only: every value comes from the device or the browser; anything unknown is left out
+  or shown as "–". Never ship placeholder numbers.
 - Device artwork is always `object-fit: contain`, never cropped.
-- Connected-device cards are square (1:1), not 9:16.
-- Never invert or work around a styling bug with `overflow: hidden`; pin the
-  element box instead (see `DESIGN.md` "Commandments").
+- Never hide a layout bug with `overflow: hidden`; pin the element box instead.
+- Never remove a setting, control, link or string as a side effect of a UI change. Restyle, don't
+  delete. If something has to go, say so in the PR.
+
+## Strings and translations
+
+- Every user-facing string is a key in `src/i18n/index.ts` (English, the source of truth) and is
+  rendered with `t(locale, key)` or `tp(locale, key, vars)`.
+- `src/i18n/tr-coverage.test.ts` fails on static English text in JSX under `src/app`,
+  `src/features` and `src/shared`. Units and brand names go through code: `{"DPI"}`.
+- Add the key to every file in `src/i18n/locales/` in the same change. `src/i18n/i18n.test.ts`
+  checks that every locale has every key.
+- Locales load lazily; switch through `ensureLocale()` so a switch never flashes English.
 
 ## Commands
 
 ```bash
-npm run dev                                  # start dev server
+npm run dev                                  # dev server
 npm run build                                # tsc --noEmit && vite build
-npm test                                     # node --test
-npx tsc --noEmit                             # typecheck only
-npm run check                                # full local check (dev readiness)
+npm test                                     # node --test (src, test, build)
+npm run size                                 # bundle budget, after a build
+npm run check                                # build + tests
+node scripts/sync-supported-devices.mjs      # refresh the supported-devices mirror
 ```
 
-Run `npm run build` (or `npx tsc --noEmit`) after any change before finishing.
+Run `npm run build`, `npm test` and `npm run size` before finishing; CI runs all three plus
+`npm audit`. If the size check fails, find what grew; raise `BUDGET_BYTES` in
+`build/check-bundle-size.ts` only with a note that says what was added and the measured size.
+
+Previews: `?preview=list` opens the device shelf with fixtures, `?preview=<fixture>` opens one
+device (keys in `src/device/preview/preview-modes.ts`, e.g. `egg-op1-v2`, `steelseries-gen2`).
+The app needs a window of at least 900 × 600.
+
+## Repo layout
+
+Organized by feature; tests sit next to the code they cover.
+
+| Path | What lives there |
+| --- | --- |
+| `src/main.tsx` | Entry: browser guards, service worker, mounts `App` |
+| `src/app/` | Shell: `App.tsx`, `AppSidebar.tsx`, pending bar, toasts, help panel |
+| `src/features/devices/` | Devices home, device page (`OverviewPage.tsx`, `DeviceHero.tsx`), setting `cards/` |
+| `src/features/buttons/` | Button mapping, setup codes, Logitech button commands |
+| `src/features/profiles/` | Onboard profiles and profile sharing |
+| `src/features/superstrike/` | Superstrike hit test and presets |
+| `src/features/bridge/` | OpenMouse Bridge client, status store, sidebar status card, update checks |
+| `src/features/games/` | Games page and per-game profiles (profiles need Bridge) |
+| `src/features/hardware-test/` | Hardware test page, report, supported-devices mirror and cross-check |
+| `src/features/capture/` | Report capture dialog and export formats |
+| `src/features/news/` | News banner and "What's new" |
+| `src/features/settings/` | Interface settings page and stored preferences |
+| `src/device/` | Device controller (`controller.ts`), snapshot types, per-vendor glue, pending changes, `preview/` fixtures |
+| `src/shared/` | UI primitives (`ui.tsx`: `SwitchRow`, `Segmented`, `OptionMenu`, `StepperSlider`, `RateSlider`, `BatteryIcon`), `CardSlot`, icons, colour picker, formatting helpers |
+| `src/i18n/` | `index.ts` (English + API), `locales/<code>.ts` |
+| `src/platform/` | Service worker, offline banner, Trusted Types, XSS guard, browser support, sounds |
+| `src/styles/` | `tokens.css`, base, controls, shell, page styles, `instrument.css`, `areas/` per tab |
+| `src/types/` | Global declarations (Vite, WebHID) |
+| `test/` | Tests for `functions/`, security headers and the PWA build |
+| `functions/` | Cloudflare Pages Functions (`/api/*`, security middleware) |
+| `build/` | Vite plugins and the bundle-size check |
+
+Where new code goes: a new screen or capability gets its own folder under `src/features/`; a new
+setting card for a device goes in `src/features/devices/cards/`; anything two features share goes
+in `src/shared/`. Don't add files to the top of `src/`.
+
+## Devices and protocols
 
-## Repo orientation
+Wire protocols and HID drivers live in the external `@openmouse/protocol` and
+`@openmouse/keyboard-protocol` packages; don't add driver code here. This repo maps a driver's
+capabilities onto the UI (`src/device/controller.ts`, `src/device/traits.ts`) and renders them.
 
-- `src/control.css` — all theme tokens and UI styles (single stylesheet).
-- `src/app/` — UI: `AppSidebar.tsx` (nav rail), `InterfaceSettings.tsx`
-  (settings page), `OverviewPage.tsx` (connect + device list pages).
-- `src/device/` — controller, types (`ControlSnapshot`), and protocol glue.
-- `src/i18n.ts` — all user-facing strings, organized by key.
-- Actual wire protocol/drivers live in the external `@openmouse/protocol`
-  library; do not expect to add HID driver code here.
\ No newline at end of file
+`src/features/hardware-test/supported-devices-data.ts` is generated from the website's table
+(`openmouse-landing-page/src/data/supported-mice.ts`). Don't edit it by hand; run the sync script.
diff --git a/DESIGN.md b/DESIGN.md
index 923b4fdb..f52cf2e9 100644
--- a/DESIGN.md
+++ b/DESIGN.md
@@ -1,97 +1,127 @@
-# OpenMouse — Design Style Guide
-
-This project follows **Material Design 3 (M3)** conventions. Read this guide
-before touching any UI. It is the single source of truth for visual style.
-
-All design tokens live in `src/control.css` (CSS custom properties on the
-`.control-shell` / `:root` theme blocks). **Never hardcode colors in
-components** — use the theme tokens. Art/SVG/glyph fills may only use
-`currentColor` or `color-mix()` against tokens; never hardcode hue values
-except for the per-icon accent palette defined below.
-
-## Core principles
-
-- **Filled, colored glyphs**: navigation and inline icons are Material
-  Symbol-style filled paths (`fill="currentColor"`) rendered at 20–24px.
-  Thin stroke-only icons are out of style for navigation.
-- **Floating rounded surfaces**: elevated panels are inset from the page,
-  rounded (`border-radius: 16px`), with layered `box-shadow` depth — not flat,
-  border-only rectangles.
-- **Elevation over borders**: distinguish surfaces with elevation (gradients,
-  shadows, `--surface-*` tokens) before reaching for borders. When a divider
-  is needed it must be clearly visible (use `--line-strong`, never
-  `--border-rule`/`--line` — those are too faint).
-- **State layers**: hovers are subtle overlays (`--hover`, `--surface-hover`)
-  — a change of background/color, never a sudden border or outline.
-- **Theme-awareness**: every style must hold up in **all themes** (dark,
-  light, ocean, Nier, catppuccin). Check contrast between adjacent surfaces in
-  both dark and light before committing.
-- **Bold labels**: navigation labels use high weight (`font-weight: 600–700`)
-  and high-contrast text tokens so they read as interactive targets.
-
-## Layout
-
-### Sidebar (`.app-sidebar`)
-
-The left rail is the app's navigation drawer:
-
-- Floating rounded panel: inset from the shell edge (`margin: 0.55rem 0
-  0.55rem 0.55rem`), `border-radius: 16px`, full outline in `--edge`,
-  gradient background `linear-gradient(180deg, var(--surface-strong),
-  var(--surface-dialog))`, and layered drop shadows for lift.
-- Nav items (`.app-sidebar-nav-item`): 42px tall, rounded 8px, flex row of
-  `[icon] [label] [>]`.
-  - `>` chevron (`.app-sidebar-nav-arrow`) sits at the right via
-    `margin-left: auto`; it nudges right on hover.
-  - Adjacent items are separated by a Material divider
-    (`border-top: 1px solid var(--line-strong)`).
-- Per-item icon accent palette (set via inline `style={{ color }}` on the
-  icon svg — the label itself keeps theme text tokens):
-  - Home / Connect: green `#5dde89`
-  - Dashboard (mouse config): blue `#67d8ff` — **use the mouse glyph**
-    (`M13 1.07V9h7c0-4.08-3.05-7.44-7-7.93zM4 15c0 4.42 3.58 8 8 8s8-3.58
-    8-8v-4H4v4zm7-13.93C7.05 1.56 4 4.92 4 9h7V1.07z`)
-  - Docs: amber `#e8b267`
-  - Supported: violet `#a78bfa`
-  - What's New: gold `#fbbf24`
-  - Help & Feedback: blurple `#5865f2` — **brand mark** (`DiscordIcon`), sized
-    by height (`16px`) rather than the square 21px nav box, since the glyph is
-    wider than it is tall
-  - Settings: slate `#94a3b8`
-- Section order: top nav = Home, Dashboard, Docs. Bottom nav = What's New,
-  Help & Feedback, Settings. Supported devices lives **inside the Settings
-  page**, not the sidebar.
-- **Help & Feedback is the one featured nav row**
-  (`.app-sidebar-nav-item-featured`): taller (`min-height: 52px`) with a second
-  line (`.app-sidebar-nav-sub`) under the label, because the community Discord
-  is where support and feedback now live. It links straight out to
-  `DISCORD_URL` rather than opening an in-app dialog, and collapses back to a
-  plain 42px icon row with the rest when the sidebar is collapsed.
-
-### Device cards
-
-- Connected-device cards and the add-device cards are **square (1:1)**, equal
-  size, on a centered grid.
-- Card background is `--surface-strong` so cards separate clearly from the
-  page background in every theme.
-- No border at rest — border + subtle shadow appear only on hover.
-- Device artwork:
-  - Rendered through `.device-tile-image` as `position: absolute; inset: 0;
-    object-fit: contain;` (+ `transform: scale(1.1)`), never cropped.
-  - The card clips with `overflow: hidden`.
-- The mouse add card and keyboard add card are identical size and shape. The
-  keyboard add card in the device list must not carry the flex `max-width`
-  that the empty-state add grid uses (`max-width: none` override).
-- State: per-card "Connecting…" text from local state, not global labels.
-- Cog/gear buttons are borderless icons (no square outline), `overflow:
-  visible` on the icon svg so strokes are never clipped.
-
-## Commandments
-
-1. Never crop a product rendering; always `object-fit: contain`.
-2. Never reintroduce the old 9:16 card aspect ratio for the connected list.
-3. Never use `overflow: hidden` to "fix" artwork — pin the image box with
-   absolute positioning instead.
-4. Never use `--line` / `--border-rule` for dividers you want visible.
-5. Never introduce a new UI concept (page, card, dialog) without reading this
-   file and matching the M3 conventions above.
\ No newline at end of file
+# OpenMouse design
+
+The single source of truth for how OpenMouse looks. Read it before touching any UI.
+Values live in code: `src/styles/tokens.css`. When this file and the code disagree, the code
+wins; fix this file.
+
+Reading: a hardware control panel for people who tune their mouse by the number. Calm, dark,
+precise, instrument-like. Dial ENERGY 1 / RHYTHM 2 / MOTION 1.
+
+## Principles
+
+- **The device is the hero.** Product renders sit on a lit stage (a dark well with one soft
+  accent light behind the mouse). Everything else is quiet chrome.
+- **Numbers first.** Settings read as figures: label above, value, unit after, meta under. All
+  numbers are tabular.
+- **Colour means something.** The accent (from the user's theme) marks the active place, the
+  primary action, focus, slider fills and the active stage. `--ok` / `--bad` / `--warn` mark real
+  states only. Everything else is ink.
+- **Real data only.** Every value comes from the device or this browser. A value the device does
+  not report is left out or shown as "–". Empty states say why and what fills them.
+- **One idea per block.** Short titles, sentence case, no category overlines, no uppercase micro
+  labels, no decorative dots, stripes or glows.
+
+## Structure
+
+| Layer | Recipe |
+|---|---|
+| Ground | `--ground`: page ink plus one soft accent light from the top right. Painted once on the shell. |
+| Chrome | Sidebar on `--ink-0` with a hairline edge. |
+| Panel | `.om-panel` (or the legacy `.setting-card`): `--sheen` over `--surface-1`, `--lit` edge, `--r-md`. Featured panel: `.om-panel.is-lit` (one or two per page). |
+| Row | Inside a panel: hairline `--line-1` separators. Don't nest panels. |
+| Well | Inset areas (segmented controls, inputs, render stages): `--well` + `--inset-shadow`. |
+| Raised | Buttons, the selected segment key, switch thumb: `--btn` / `--key`. |
+| Floating | Menus, dialogs, toasts, the pending bar, help: opaque `--solid-2` + `--shadow-float`. |
+
+## App layout
+
+- **Sidebar** (`AppSidebar.tsx`, 248px, collapsible to a 68px icon rail, remembered):
+  brand + build; Devices, Hardware test, Games (without Bridge it lists the supported games under a download-Bridge panel); "Your devices" switcher
+  (thumbnail, name, battery icon + percent or "Not connected"); footer: Docs ↗, What's new,
+  Help & feedback (Discord), Settings; Bridge status line, which opens a small card with Bridge's
+  status, update notice and download link (`features/bridge/BridgeStatus.tsx`).
+- **Main column**: news strip on top, then the scrolling page (`.om-content` > `.om-page`, max
+  1160px). The pending-changes bar floats at the bottom of the main column. A help button floats
+  bottom right and opens a small panel of common questions with instant answers, plus links to
+  the site FAQ and Discord (`app/HelpPanel.tsx`).
+- **Devices home** (`features/devices/DevicesHome.tsx`): a swipeable shelf of device blocks, each
+  one surface (render on a stage, name, connection badge, live stats with icons, Configure/Open,
+  and a ⋯ menu to remove the device) ending in an Add device block with the supported mice
+  crossfading. Drag, swipe, arrow buttons, dots and arrow keys all move it. The shelf sits in the
+  middle of the page and centres when it doesn't fill the width. No devices: the same shelf with
+  only the Add device block, larger, in the middle of the page; its button becomes the primary
+  action.
+- **Device page** (`features/devices/DeviceHero.tsx`): hero (render stage, breadcrumb, name, connection line, stats
+  with icons) with the section tabs bolted under it as one unit. Overview: Current setup figures +
+  DPI stage chips, Battery over time chart (recorded samples), Firmware.
+- **Setting cards** flow in a masonry column layout (`CardSlot`, `styles/instrument.css`) so there
+  are no holes; every card heading carries a glyph, and feature switches are tiles
+  (`SwitchRow` in `shared/ui.tsx`).
+- **Settings** (`features/settings/InterfaceSettings.tsx`): grouped panels of setting rows (title + description start, control end): Appearance
+  (theme gallery, each tile painted in its own theme; animations), Language (picker with native
+  names), Behaviour, Profile key, Driver previews (dev builds), About.
+
+## Tokens
+
+Use tokens only; no hex in components or area CSS. Alpha mixes use the `-rgb` triples:
+`rgb(var(--accent-rgb) / 0.12)`.
+
+| Token | Use |
+|---|---|
+| `--ink-0`, `--ink-1`, `--ground` | Chrome, page |
+| `--surface-1..4` | Panel, hover/selected, pressed/strong, rare |
+| `--solid-1`, `--solid-2` | Opaque surfaces (menus, dialogs, sticky heads) |
+| `--well`, `--glint` | Inset areas, hover wash |
+| `--line-1..3` | Hairlines: divider, input edge, emphasis |
+| `--text-1..4` | Values/titles, body, labels/meta, disabled/placeholder only |
+| `--accent`, `--accent-rgb`, `--on-accent`, `--accent-soft`, `--accent-line` | Active place, primary action, focus, fills |
+| `--ok`, `--bad`, `--warn`, `--info` | Real states only |
+| `--stage-light` | The light behind a device render |
+
+Themes: all 12 (Emerald default, Matt, Violet, Ice, Ember, Mono, Miku, Catppuccin Mocha /
+Macchiato / Frappé, NieR: Automata, Light) are full token sets in `tokens.css`, selected by
+`data-interface-theme` on the shell (and mirrored on `<html>`). Derived tokens are declared on every
+themed element, so any element carrying `data-interface-theme` paints itself in that theme.
+No component may fork on a theme name.
+
+## Type
+
+- DM Sans for everything; JetBrains Mono only for raw identifiers, hex and HID logs.
+- Scale: page title 22, panel title 15, body 13, meta 12, small 11. Figures 28–30 at 650.
+- Sentence case everywhere. No uppercase tracked labels. Weights 400–650.
+
+## Shape and space
+
+- Radii: 3 (chips), 6 (controls, rows), 10 (panels, wells), 14 (hero, device blocks, dialogs).
+- Spacing on a 4px grid. Panel padding 16–18px; gaps between panels 16px; rows ≥ 40px.
+- Device renders: always `object-fit: contain`, absolutely positioned inside their stage, never
+  cropped.
+
+## Controls
+
+`.om-btn` (default raised), `.is-primary` (one per view), `.is-ghost`, `.is-danger`, `.is-sm`,
+`.is-lg`, `.is-icon`; `.om-icon-btn`; `.om-badge` (`.is-ok/.is-bad/.is-warn/.is-accent`);
+`.segmented` and `.rate-slider-buttons` (well + raised key); `SwitchButton`; `OptionMenu`;
+`StepperSlider`; range inputs with an accent fill. Focus is the accent gap ring (`--focus`), never
+removed.
+
+## Icons
+
+lucide-react at stroke 1.8, `currentColor`, `--text-3` at rest, accent when active. Icons sit next
+to text that says the same thing (battery icon + percent, connection icon + "Wireless"). The battery
+is the custom `BatteryIcon` (fill tracks the level; low and charging change its colour).
+
+## Motion
+
+120–260ms washes and fades. The device page body fades in; panels and bars rise 8px once. No
+loops except the add-device crossfade, which stops with reduced motion. The Animations preference
+and `prefers-reduced-motion` both stop motion.
+
+## Checklist before shipping a page
+
+- [ ] Tokens only; no new radii, shadows or hex.
+- [ ] Sentence case, no overlines, no em dashes in copy.
+- [ ] One primary button per view.
+- [ ] Every number tabular; every value real or "–".
+- [ ] Works in Emerald, Light and NieR; RTL (Arabic) mirrors correctly.
+- [ ] Keyboard: every control reachable, visible focus, Escape closes dialogs.
diff --git a/README.md b/README.md
index b7412982..052910fb 100644
--- a/README.md
+++ b/README.md
@@ -103,10 +103,29 @@ device inventory changes are written to the browser console with the
 downloadable diagnostics from a connected device's **Advanced** panel; HID
 report payloads are not written to the console.
 
-The control panel is organized by responsibility: `control.ts` coordinates the
-application, while the template, events, DOM helpers, persisted preferences,
-battery history, device selection, and rendering live in focused modules under
-`src/`.
+The control panel is organized by feature. Tests sit next to the code they cover.
+
+| Folder | What lives there |
+| --- | --- |
+| `src/main.tsx` | Entry point: guards, service worker, mounts the app |
+| `src/app/` | The shell: `App`, sidebar, pending-changes bar, toasts, AI overlay |
+| `src/features/devices/` | Device home, device page, hero, stats, and the setting `cards/` |
+| `src/features/buttons/` | Button mapping, setup codes, Logitech button commands |
+| `src/features/profiles/` | Onboard profiles and profile sharing |
+| `src/features/superstrike/` | Superstrike hit test and presets |
+| `src/features/bridge/` | OpenMouse Bridge client, status line, update checks |
+| `src/features/games/` | Games page and per-game profiles (Bridge only) |
+| `src/features/hardware-test/` | Hardware test page, report builder, supported-devices cross-check |
+| `src/features/capture/` | Report capture dialog and export formats |
+| `src/features/news/` | News banner and "What's new" |
+| `src/features/settings/` | Interface settings and stored preferences |
+| `src/device/` | Device controller, per-vendor glue, pending changes, preview fixtures |
+| `src/shared/` | UI primitives, icons, colour picker, formatting helpers |
+| `src/i18n/` | Strings: `index.ts` is English and the API, `locales/` has one file per language |
+| `src/platform/` | Service worker, offline banner, Trusted Types, browser support, sounds |
+| `src/styles/` | Design tokens, base styles, and one stylesheet per area |
+| `src/types/` | Global type declarations (Vite, WebHID) |
+| `test/` | Tests for the Cloudflare functions, security headers and the PWA build |
 
 Packet codecs and WebHID drivers live in the standalone
 [`@openmouse/protocol`](https://github.com/OpenMouse-Project/mouse-protocol)
diff --git a/build/check-bundle-size.ts b/build/check-bundle-size.ts
index 135241ee..ff234cf3 100644
--- a/build/check-bundle-size.ts
+++ b/build/check-bundle-size.ts
@@ -2,241 +2,8 @@ import { readdirSync, statSync } from "node:fs";
 import { join } from "node:path";
 
 const BUDGET_BYTES: Record<string, number> = {
-  // Raised from 103 kB for the interface themes: NieR: Automata and Liquid
-  // Glass each ship their own token block, and the liquid-glass material
-  // layer (SVG displacement filters plus their component rules) added the
-  // largest share. Liquid Glass was removed in the theme sync (main CSS is
-  // ~104 kB again). The measured bundle is 153.7 kB; 175 kB adds headroom for
-  // the Developer Hall of Fame page (~15 kB of animated card and hero
-  // styles that load only on /donate.html). Raised to 180 kB in the
-  // same pass as the 175 kB target, then to 195 kB for the Minecraft Hall of
-  // Fame overhaul: the blocky token block (plank textures, bevels, item-frame
-  // avatars), the animated day/night scene (sun/moon/star/cloud/bonfire
-  // keyframes) and the credits-style quote widget push the measured CSS
-  // aggregate to 183.7 kB.
-  // Raised to 210 kB after the protocol 0.26.0 device batch left the measured
-  // CSS aggregate at 194.2 kB — 843 bytes under the old 195 kB — so the next
-  // card or theme change would have tripped the check for no reviewable reason.
-  // Raised to 225 kB for the Logitech Superstrike Buttons tab: the button map
-  // card (callouts, command list, scrollbar), the HITS presets/test/share dialogs
-  // and the Bunny Hop card add ~15 kB of scoped styles; the measured CSS is
-  // 210.6 kB, which was 631 bytes over the old 210 kB budget.
-  ".css": 225_000,
-  // Raised from 510 kB for Bridge discovery, profile editing, automatic
-  // reconnection, and recent device support, which have since grown further
-  // with the supported-device page and MX Master remap controls. Preview
-  // fixtures retain their separate allowance below; the measured aggregate
-  // is 573.4 kB with them, plus the ~11 kB Hall of Fame chunk. Raised again
-  // from 590 kB for the Razer button-mapping card and its codec: the measured
-  // aggregate is 588.2 kB, which left under 2 kB of headroom. Raised again to
-  // 610 kB for the Pulsar XS-1 feature-report driver and 4K receiver support
-  // (mouse-protocol 3c3a445): the X3 family codec plus the 4K DPI/polling work
-  // adds ~1.3 kB to the measured aggregate. Raised to 632 kB for the Attack
-  // Shark GearHub (0x25a7) protocol routed to 0x1d57 VID devices (+1.6 kB).
-  // Raised to 700 kB for four new drivers landing together: Keychron M6,
-  // Keychron Nape Pro (layer/keymap/orientation controls), Glorious Model O
-  // 2/I 2 lighting, and SteelSeries Rival 3 Gen 1. Measured aggregate is
-  // 689.0 kB, which leaves about 11 kB of headroom. Raised to 730 kB for the
-  // device artwork pass: ~20 new product models mapped to transparent top-view
-  // renders in device-images.ts (PID keys plus name fallbacks) add ~22 kB of
-  // mapping code to the measured aggregate (720.5 kB). Raised to 765 kB for
-  // the SteelSeries/device-support and Cloudflare R2 artwork-serve work merged
-  // on dev: those land with the measured aggregate already at ~750 kB. The
-  // donate page rebuild (Hall of Fame -> Support) does not drive this; its
-  // rebuilt donate chunk is lighter than the old Minecraft-themed hof chunk it
-  // replaced. 765 kB leaves ~15 kB of headroom over the measured aggregate.
-  // Raised to 790 kB for the MCHOSE A7 V2 mouse and MagDock driver support:
-  // the measured aggregate is 779.1 kB, leaving ~11 kB of headroom.
-  // Raised to 800 kB for the ATK ZERO driver (AtkCards.tsx, device/atk.ts)
-  // and the mouse-reported lift-off range plumbing: the measured aggregate is
-  // 790.6 kB, leaving ~9 kB of headroom.
-  // Raised to 895 kB for the Portuguese (pt) localization: the full
-  // en+pt UI dictionary adds ~85 kB of strings to the measured aggregate
-  // (883.2 kB, on top of the 800 kB budget's own ~790.8 kB baseline). The pt
-  // table ships as its own lazy chunk (i18n-pt-*.js, loaded only when a
-  // non-English locale is selected), so the initial load is unaffected — the
-  // aggregate counts it because the check sums every emitted chunk.
-  // Raised to 1,065 kB for Spanish, French, German, and Simplified Chinese:
-  // each ships as its own lazy chunk (i18n-es/fr/de/zh-*.js) at ~40-55 kB,
-  // loaded only when that locale is selected — none of them touch the
-  // initial (English) bundle. Measured aggregate is 1,061.8 kB.
-  // Raised to 1,165 kB for Japanese and Korean, same lazy-chunk pattern.
-  // Measured aggregate is 1,160.9 kB.
-  // Raised to 1,185 kB for Attack Shark R2 support (GearHub-V5 driver,
-  // traits.ts entry, device artwork name-fallback): the measured aggregate
-  // is 1,171.4 kB, leaving ~14 kB of headroom.
-  // Raised to 1,250 kB for the Russian (ru) interface locale: the new
-  // translation strings push the measured aggregate to 1,232.4 kB.
-  // Raised to 1,290 kB for the control-app support/UI work that landed
-  // together: the OpenMouse AI chat overlay (AiOverlay.tsx with its topic
-  // flow and Discord fallback), the Discord-embed FeedbackDialog, the
-  // What's New Desktop-app dialog, the desktop-style AppSidebar /
-  // OverviewPage shell, and the ai.* + wn.* keys added across all nine
-  // locale tables. Those add ~21 kB of strings and UI to the measured
-  // aggregate (1,271.9 kB), leaving ~18 kB of headroom.
-  // Raised to 1,300 kB for swapping hand-rolled icons for lucide-react,
-  // tree-shaken per icon: the profile-row icons in icons.tsx
-  // (enable/disable, link/unlink, rename, running/activate, refresh, trash),
-  // the AppSidebar nav icons (home, mouse config, docs, what's new,
-  // feedback, settings, chevron), the AiOverlay launcher/close/header
-  // icons, and the OverviewPage icons (workspace tabs, device-tile stats,
-  // back/share/plus controls, and the add-device mouse/keyboard glyphs,
-  // which replace their old hand-drawn illustrations). The measured
-  // aggregate is 1,290.4 kB, leaving ~10 kB of headroom.
-  // Raised to 1,310 kB for the crowd-sourced device artwork system:
-  // ArtworkUploadDialog.tsx (drag-drop upload UI with verification
-  // states), artwork-verification.ts (canvas-based heuristic analysis),
-  // artwork-storage.ts (R2 API fetch + localStorage cache), Cloudflare
-  // Functions for R2 list/upload endpoints, and artwork.* i18n keys
-  // across all nine locale tables. Measured aggregate is ~1,305.5 kB.
-  // That system was fully removed later (unmoderated anonymous uploads
-  // were abused to overwrite device art); the budget stays, and the
-  // aggregate only shrank.
-  // Raised to 1,345 kB for the in-app Mouse Test page: MouseTestPage.tsx
-  // (live polling-rate sampler, rolling chart canvas, DPI/battery device
-  // card, button tester), its Activity nav icon, and the test.* i18n keys
-  // across all nine locale tables. Measured aggregate is ~1,329.5 kB.
-  // Raised to 1,370 kB for the HyperX and Incott drivers: both register in
-  // registry.ts/vendors.ts, and the Incott one brings a full vendor codec
-  // plus applyPulsarValue/traits/device-images wiring. Measured aggregate
-  // is 1,351.0 kB, leaving ~19 kB of headroom.
-  // Raised to 1,410 kB for the @openmouse/protocol lockfile bump that picks
-  // up the VXE R1 Pro Max driver on the protocol side: bridge-hid.ts pulls
-  // in every registered vendor's HID filters via SUPPORTED_HID_FILTERS, so a
-  // new protocol-side driver grows this bundle even before any app code
-  // references it directly. Measured aggregate is 1,386.8 kB, leaving ~23 kB
-  // of headroom for the VXE app-side integration PR.
-  // Raised to 1,465 kB for the Vietnamese (vi) interface locale landing on
-  // top of that: same lazy-chunk pattern as the other non-English tables
-  // (i18n-vi-*.js, loaded only when selected), adding ~47 kB.
-  // Raised to 1,500 kB for the MCHOSE A5 Pro Max Gen 1 driver: it registers
-  // in controller.ts/traits.ts and pulls in its own protocol-side codec via
-  // bridge-hid's SUPPORTED_HID_FILTERS, same growth pattern as prior drivers.
-  // Measured aggregate is 1,482.3 kB, leaving ~18 kB of headroom.
-  // Raised to 1,530 kB for Incott's receiver-LED and rapid-fire card: a new
-  // AdvancedCards section plus its availability/control wiring. Measured
-  // aggregate is 1,508.0 kB, leaving ~22 kB of headroom.
-  // Raised to 1,570 kB for the @openmouse/protocol lockfile bump to ec90f61:
-  // attackshark X11 polling/DPI/battery, MCHOSE A7 V3 settings writes +
-  // product-string naming, and Windows read-restriction fixes all route
-  // through bridge-hid's SUPPORTED_HID_FILTERS, so this grows the bundle
-  // even before the A7 V3 traits work (PR #267) references the new codec
-  // directly. Measured aggregate is 1,545.7 kB, leaving ~24 kB of headroom.
-  // Raised to 1,600 kB for the strict artwork-submission flow: the expanded
-  // artreq.* dictionary (new rejection reasons, background/photo guidance, the
-  // failure lockout and Discord-ticket strings) ships in all ten locale
-  // tables, and ArtworkRequestDialog.tsx gained the per-IP failure-lockout
-  // logic. Measured aggregate is 1,578.2 kB, leaving ~22 kB of headroom.
-  // Raised to 1,650 kB for the Bridge game-profile feature landing across
-  // three commits: BridgeCard.tsx (Home connection/games card),
-  // GameProfilePanel.tsx (per-game target-device/DPI/auto-apply editor),
-  // games-catalog.ts (CDN games.json fetch for cover art), bridge-status-
-  // store.ts (shared status poll), and useBridgeProfileApplier.ts (in-tab
-  // fallback apply + prior-settings restore for brands Bridge has no native
-  // driver for), plus the bridge.* i18n keys across all ten locale tables.
-  // Measured aggregate is 1,614.2 kB, leaving ~36 kB of headroom.
-  // Raised to 1,700 kB for the Games-page request flow shipping on top
-  // ("Let people request a game or app from the Games page"): the
-  // request-form dialog, game availability filtering, and submit wiring
-  // push the measured aggregate to 1,673.2 kB, already past the 1,650 kB
-  // budget. The read-only DPI stage editor (DpiCard disabled stage
-  // controls, DeviceCapabilities stage-write flags, and the RAZER preview
-  // fixture stage table) then adds ~1.7 kB more. Measured aggregate is
-  // 1,674.9 kB, leaving ~25 kB of headroom.
-  // Raised to 1,780 kB for the in-app Hardware Test certification suite:
-  // HardwareTestPage.tsx (verification runner with live polling-rate
-  // sampling, terminal, device card, and the share flow), the report model
-  // (automatic checks, verdict, Discord embed), hardware-brand-checks.ts
-  // (brand-depth checks), the supported-devices crosscheck, and the
-  // 238-row mirrored supported-devices table (src/supported-devices-data.ts,
-  // generated from the landing page's supported-mice.ts via
-  // scripts/sync-supported-devices.mjs), plus the hw.* and
-  // nav.hardwareTest strings in all ten locale tables. Measured aggregate
-  // is 1,748.7 kB, leaving ~31 kB of headroom.
-  // Raised to 1,845 kB for the Arabic (ar) interface locale: i18n-ar.ts is a
-  // full native translation of all ~1,050 keys and ships as its own lazy
-  // chunk (i18n-ar-*.js, ~69 kB, loaded only when Arabic is selected) — the
-  // initial (English) bundle is untouched. This is the same lazy-chunk pattern
-  // as the pt/es/fr/de/zh/ja/ko/ru/vi locales above, and the aggregate counts
-  // it only because the check sums every emitted chunk. Measured aggregate is
-  // 1,817.7 kB, leaving ~27 kB of headroom.
-  // The in-app Mouse Test page (MouseTestPage.tsx + MouseTestMouse.tsx, the
-  // test.* keys, and its chart/button-tester CSS) and the strict artwork-
-  // submission flow (ArtworkRequestDialog.tsx, /api/artwork + images.js, the
-  // artreq.* dictionary) were both removed; artwork requests now open the
-  // documented GitHub issue form instead. The budget stays — like the earlier
-  // crowd-sourced removal, the aggregate only shrank.
-  // Raised to 1,880 kB for a batch of feature PRs merged together: the unified
-  // mouse-option widgets (OptionMenu, StepperSlider, and the M3 controls in
-  // #288), the EGG 4K v2 sensor-glass-mode / polling-divider card (#352), the
-  // WLmouse Beast X 4K driver wiring (#287, which also pulls its protocol codec
-  // in through SUPPORTED_HID_FILTERS), and the Razer Bluetooth-mode notice
-  // (#357). Measured aggregate is 1,850.7 kB, leaving ~29 kB of headroom.
-  // Raised to 2,085 kB for protocol 0.22.0 and the four device PRs that land
-  // with it: the Noir Gear M2-NEX integration (#402, local profile slots and
-  // the macro editor), the Keychron G3 Air / Launcher 8k-1k panel wiring
-  // (#408, #426), and the Rapoo VT9 Pro client (#422). Their protocol codecs
-  // (Keychron Launcher mouse catalog, Rapoo register codec, K-snake macro
-  // store) are pulled in through SUPPORTED_HID_FILTERS and the controllers,
-  // and the shared UI gained the macro-card and profile-overview CSS. Measured
-  // aggregate is 1,995.2 kB, leaving ~90 kB of headroom.
-  // Raised to 2,150 kB for the protocol 0.26.0 device batch: AJAZZ AJ179 PRO
-  // (#169), Redragon M690 PRO (#163, wired into the panel by #617), Lamzu Paro
-  // Aurora (#172), plus the X11-on-Bridge (#174), PRO X Wireless format 4
-  // (#175) and Logitech onboard-profile (#166/#589) work. Their protocol codecs
-  // arrive through bridge-hid's SUPPORTED_HID_FILTERS as well as the
-  // controllers. The measured aggregate is 2,084.2 kB, which left only 801
-  // bytes of headroom under the old 2,085 kB.
-  // Raised to 2.2 MB for the Superstrike Buttons tab (button map, HITS presets,
-  // speed test, setup codes, bounce check) merged with protocol 0.28.0: the
-  // measured aggregate is 2,150.4 kB, 350 bytes over the old 2.15 MB budget.
-  // Raised to 2,350 kB for protocol 0.31.0 and the work that landed on 0.29-0.31:
-  // the Starlight X (Finalmouse) panel, the Wallhack M-001 scanning, DPI curve
-  // and macro cards, and the ATK per-model capability cards. The measured
-  // aggregate is 2,288.4 kB, 88 kB over the old 2.2 MB budget, leaving ~60 kB
-  // of headroom.
-  // Raised to 2,450 kB for keyboard protocol 1.0.0 and its control panel:
-  // Wuque codecs/client wiring, shared workspace cards, per-key trigger UI,
-  // and keyboard strings in all ten locale chunks. The measured aggregate
-  // is 2,419.9 kB, leaving ~30 kB of headroom.
-  // Raised to 2,470 kB for the @openmouse/protocol 0.38.0 bump: the AJAZZ
-  // NJ07/NJ08 key-map codec, the 49-entry vendor button-action catalog, and
-  // the marker/default client handling arrive through bridge-hid's
-  // SUPPORTED_HID_FILTERS. The measured aggregate is 2,454.4 kB, 4.4 kB over
-  // the old 2,450 kB budget, leaving ~15 kB of headroom.
-  // Raised to 2,472 kB for the @openmouse/protocol 0.40.0 bump: the G-Wolves
-  // XVI-new driver (profile-addressed sensor commands plus clicks-only
-  // remap), 16 more cataloged G-Wolves PIDs and their picker filters, and
-  // the Bridge empty-enumeration diagnostic. The measured aggregate is
-  // 2,470.9 kB, 0.9 kB over the old 2,470 kB budget, leaving ~1 kB of
-  // headroom — the next driver will need a real diet or a bigger bump.
-  // Raised to 2,474 kB for the @openmouse/protocol 0.40.1 bump: XVI-new
-  // button-slot fix plus the real DPI stage table and per-stage/active
-  // setters. The measured aggregate is 2,472.0 kB, under a kilobyte over
-  // the old 2,472 kB budget.
-  // Raised to 2,478 kB for the @openmouse/protocol 0.42.1 bump: LunaFury
-  // onboard, remapping, and power controls, Wallhack debounce, Attack Shark
-  // X11 SE battery, Superlight 2 Lightspeed polling above 1000 Hz, and the
-  // DeathAdder V3 polling commit. The measured aggregate is 2,476.0 kB,
-  // 2.0 kB over the old 2,474 kB budget, leaving ~2.0 kB of headroom.
-  // Raised to 2,630 kB for Turkish, including legacy driver labels, dynamic
-  // messages and dialog copy. The two Turkish dictionaries remain lazy
-  // chunks. The measured aggregate is about 2,620 kB, including render-boundary
-  // localization; no additional CSS framework or runtime dependency is added.
-  // Raised to 2,640 kB for the Endgame Gear OP1-8K control panel: the section
-  // the missing family tag had kept dark adds the sensor-controls, handedness
-  // and lift-off cards plus two strings across twelve locales, taking the
-  // measured aggregate from 2,629.5 kB to 2,632.2 kB — over the old budget by
-  // 2.2 kB, which itself had only 545 bytes of headroom, so any new localized
-  // string would have tripped it.
-  // Raised to 2,720 kB for the @openmouse/protocol 0.43.0 bump: eleven
-  // SteelSeries drivers arrive through the shared registry (the Aerox 3
-  // Wireless Gen 2, Rival 3 Gen 2, and Rival 3 Wireless Gen 2 preset families
-  // plus the Rival 100/110/300/5/600, Sensei 310/Raw/Rival Pro, and Prime Mini
-  // codecs). The per-stage X/Y column adds ~750 bytes of JS and ~460 bytes of
-  // CSS of its own. The measured aggregate is 2,715.0 kB, 75.0 kB over the old
-  // 2,640 kB budget, leaving ~5.0 kB of headroom.
-  ".js": 2_720_000,
+  ".css": 165_000,
+  ".js": 2_800_000,
 };
 
 const ASSETS = join("dist", "assets");
diff --git a/build/dev-feedback-plugin.ts b/build/dev-feedback-plugin.ts
index 8f2e2285..1bd9e18c 100644
--- a/build/dev-feedback-plugin.ts
+++ b/build/dev-feedback-plugin.ts
@@ -1,30 +1,9 @@
-// Dev-only relay for `/api/feedback`.
-//
-// The production endpoint is a Cloudflare Pages Function
-// (`functions/api/feedback.js`) that relays the POST body to the Discord
-// webhook, so the bare vite dev server 404s the exact request the Feedback
-// dialog and the hardware-test "Share report" button issue.
-//
-// This middleware serves the same JSON contract in local development and is
-// honest about delivery:
-//
-//   - If `DISCORD_FEEDBACK_WEBHOOK` is present (put it in the gitignored
-//     `.env.local`, e.g. `DISCORD_FEEDBACK_WEBHOOK=https://discord.com/api/
-//     webhooks/<id>/<token>`), the payload is forwarded to Discord exactly like
-//     the production function and `{ ok: true }` is only returned when Discord
-//     accepts it.
-//   - Without a configured webhook the request is refused with 503 and an
-//     actionable message — it never pretends a report was delivered.
-//
-// The embeds are always printed to the terminal so they can be inspected, with
-// or without a webhook.
 import type { Plugin } from "vite";
 import { loadEnv } from "vite";
 import type { IncomingMessage, ServerResponse } from "node:http";
 
 export interface FeedbackValidation {
   valid: boolean;
-  /** Status to answer with when invalid; 200 on the success path. */
   status: number;
   body: string;
   embeds: unknown[] | null;
@@ -36,12 +15,6 @@ export interface DiscordForwardResult {
   status: number;
 }
 
-/**
- * Boot-time hint printed by the dev server so the state of the relay is
- * visible before anyone clicks Share: configured and delivering, or about to
- * refuse every share with 503 until `DISCORD_FEEDBACK_WEBHOOK` exists in
- * `.env.local` (and the server is restarted, since the env is read at boot).
- */
 export function feedbackRelayHint(webhook: string | undefined): string {
   if (!webhook || !webhook.startsWith("https://discord")) {
     return "[dev-feedback] relay up, but DISCORD_FEEDBACK_WEBHOOK is not set in .env.local — Share report will answer 503 until it is; add it and restart the dev server";
@@ -51,11 +24,6 @@ export function feedbackRelayHint(webhook: string | undefined): string {
 
 const MAX_DEV_BODY_BYTES = 1024 * 1024;
 
-/**
- * Validates a single `/api/feedback` request exactly like the production relay
- * contract: POST only, a JSON body carrying an `embeds` array. Pure so it can
- * be unit-tested; delivery is a separate step (`sendToDiscord`).
- */
 export function validateFeedbackRequest(method: string | undefined, rawBody: string): FeedbackValidation {
   if (method !== "POST") {
     return { valid: false, status: 405, body: JSON.stringify({ message: "Method not allowed." }), embeds: null, rawBody };
@@ -76,11 +44,6 @@ export function validateFeedbackRequest(method: string | undefined, rawBody: str
   return { valid: true, status: 200, body: JSON.stringify({ ok: true }), embeds, rawBody };
 }
 
-/**
- * Forwards a validated payload to the Discord webhook, mirroring the
- * production relay. Returns 502 for network failures; any other non-2xx
- * status is the one Discord answered with.
- */
 export async function sendToDiscord(
   webhook: string,
   rawBody: string,
@@ -105,14 +68,11 @@ function endJson(res: ServerResponse, status: number, body: string): void {
   res.end(body);
 }
 
-/** Vite plugin that serves a local `/api/feedback` in dev. */
 export function devFeedback(): Plugin {
   return {
     name: "openmouse:dev-feedback",
     apply: "serve",
     configureServer(server) {
-      // Optional local webhook so dev shares can really land in the channel:
-      // loadEnv reads .env / .env.local etc. (both are gitignored).
       const env = loadEnv(server.config.mode, server.config.root, "");
       const webhook = env.DISCORD_FEEDBACK_WEBHOOK;
       server.config.logger.info(feedbackRelayHint(webhook));
diff --git a/build/pwa-vite-plugin.ts b/build/pwa-vite-plugin.ts
index c4f3737c..654207b2 100644
--- a/build/pwa-vite-plugin.ts
+++ b/build/pwa-vite-plugin.ts
@@ -21,7 +21,6 @@ export const PRECACHE_PAGES = ["index.html"];
 
 export const ROOT_PAGE = "index.html";
 
-/** The root page is served from "/", every other page from its own filename. */
 export function pageUrl(file: string): string {
   return file === ROOT_PAGE ? "/" : `/${file}`;
 }
diff --git a/build/sites-vite-plugin.ts b/build/sites-vite-plugin.ts
index 96e14a2d..93c18598 100644
--- a/build/sites-vite-plugin.ts
+++ b/build/sites-vite-plugin.ts
@@ -2,7 +2,6 @@ import { mkdir, writeFile } from "node:fs/promises";
 import { resolve } from "node:path";
 import type { Plugin } from "vite";
 
-/** Adds the Cloudflare Worker entry point required by the Sites host. */
 export function sites(): Plugin {
   let root = process.cwd();
   let outputDirectory = "dist";
diff --git a/docs/UI_REDESIGN.md b/docs/UI_REDESIGN.md
new file mode 100644
index 00000000..e7b9b5c0
--- /dev/null
+++ b/docs/UI_REDESIGN.md
@@ -0,0 +1,248 @@
+# OpenMouse UI redesign plan
+
+Status: **implemented on branch `ui-redesign`.** `DESIGN.md` is now the live contract; this file
+keeps the original audit and plan for reference. Changes from the plan after owner feedback:
+
+- Navigation stays a **left sidebar** (collapsible to an icon rail, remembered), not a top bar.
+  It also carries a "Your devices" switcher with battery icons.
+- Devices home is a **swipeable shelf of device blocks** (drag, swipe, arrows, dots, arrow keys),
+  ending in an Add device block; first run shows a hero with the connect action.
+- The device page uses a **hero header with the section tabs bolted under it** instead of a left
+  device column, so settings get the full width.
+- Icons with every live value: connection, battery (custom fill icon), polling, DPI, profile.
+- "OpenMouse AI" became **Quick help**, a plain FAQ panel opened from the sidebar.
+- Language moved into Appearance; support links moved to Settings > About.
+- The dead launch countdown was removed.
+
+- Mock: `../ui-research/openmouse-redesign/mock.html` (serve the folder, open `mock.html`; bottom-left bar switches screens and themes). Renders in `../ui-research/openmouse-redesign/shots/`.
+- Current-app captures for comparison: `../ui-research/openmouse-current/`.
+- Reference: `../ui-research/` (invade.lol captures, `invade-ui/` design system clone at `261eba8`).
+
+Decisions already made by the owner:
+
+| Question | Answer |
+|---|---|
+| antislop | During (rules apply while planning and building) |
+| Themes | Keep all 12, each rebuilt as a full token override |
+| Shell | Top bar first; later changed by the owner to keep the left sidebar |
+| Accent | The user's selected theme supplies the accent; no new brand colour |
+
+Reading this as: a hardware control panel for mouse enthusiasts who tune numbers, in a calm dark instrument style, dial ENERGY 1 / RHYTHM 2 / MOTION 1.
+
+---
+
+## 1. Every screen in OpenMouse today
+
+The app is a single page with state-based navigation (`App.tsx` `resolvedPage`), no URL routes. Everything below was traced from source.
+
+### 1.1 Gates (render instead of the app)
+
+| Screen | Source | Trigger |
+|---|---|---|
+| Launch countdown | `LaunchCountdown.tsx`, `launch.ts`, `launch.css` | Prod build before 2026-09-04 17:00 UTC. That date has passed, so this is dead code. |
+| Unsupported notice, 4 variants | `UnsupportedNotice.tsx`, `platform/browser-support.ts` | Handheld, no WebHID and no Bridge, insecure context, old browser |
+| Window too small | `main.tsx` + `useViewportTooSmall.ts` | Viewport under 900 × 600 |
+| Offline banner | `offline-banner.ts/.css` | Mounted outside React; PWA offline |
+
+### 1.2 Pages
+
+| Page | Source | Notes |
+|---|---|---|
+| **Home: empty** | `OverviewPage.tsx` `OverviewEmpty` | "Connect your device" hero, animated aurora, one square add card |
+| **Home: device list** | `DeviceListView` | Square 1:1 tiles of authorized devices, connected one moved to the middle, add tile last |
+| **Device page** (mouse) | `OverviewPage` + `Workspace` | Pill tab bar + Back. Tabs filtered per device by `availableWorkspaceTabs()` |
+| ↳ Overview | `OverviewContent` | Giant centred render, status pill (DPI, battery, Hz, profile), Firmware card, optional power cards, M2-NEX profile overview |
+| ↳ Performance | `performance` array | DPI, Polling, Sensor, Ninjutso, Egg filter/polling/CPI, Processing, Power mode, Wallhack scanning/curves, ATK sensor; side column with the render |
+| ↳ Buttons | same section | Superstrike (HITS), ButtonMap, Magnetic buttons, Lightforce, TMR, Debounce, SPDT, Razer/Egg/MX/ATK/LunaFury mappings, Ksnake scroll |
+| ↳ Macro | `macro` array | Ksnake macros, Wallhack macros |
+| ↳ Lighting | `lighting` array | LightingCard (zones, ColorPicker), DPI indicator lighting |
+| ↳ Profiles | `Profiles.tsx`, `KeychronNapeLayers`, Teevolution card, ATK/onboard/Pulsar Pro cards | Rendered as the last tab in its own nav slot |
+| ↳ Advanced | `advanced` array + `Diagnostics` + Logitech details + MX Master cards | Signal, sleep, low power, dongle LED, receivers, Finalmouse, Incott; dev-testing note; Diagnostics with capture |
+| ↳ Empty tab | `workspace-tab-empty` | "This device has no X settings" |
+| **Device page** (keyboard) | `KeyboardPanel`, `KochiKeyboardPanel`, `KeyboardWorkspaceCards` | Same frame; Kochi only gets Overview |
+| **Hardware test** | `HardwareTestPage.tsx` | Render column, stage runner with verdict, device facts column, long footer paragraph |
+| **Games** (Bridge only) | `GamesPage.tsx`, `GameProfilePanel.tsx` | Game tile grid; per-game profile reuses `Workspace` with `gameProfile` |
+| **Settings** | `InterfaceSettings.tsx` | Profile key, theme (12), language (12), sound, animations, instant flash, advanced editors, experimental, dev previews, support links, reset |
+| Docs, Help & Feedback | `AppSidebar.tsx` | External links (docs.openmouse.app, Discord) |
+
+### 1.3 Overlays
+
+`WhatsNewDialog`, `CaptureDialog`, `ShareProfileDialog`, `SetupCodeDialog`, `BounceCheckDialog`, `HitsTestDialog`, `SaveHitsPresetDialog`, `DeleteHitsPresetDialog`, `GameRequestDialog`, the dialogs inside `Profiles.tsx`, `ColorPicker`, `OptionMenu`, `ToastHost`, `PendingBar`, `NewsBanner`, `HelpPanel`.
+
+### 1.4 Not in scope
+
+- `src/styles/admin.css` has no consumer in `src/` (only `functions/api/admin/unban.js` exists). Leave it.
+- `dist/check.html` and `dist/supported.html` are stale build output with no source entry.
+- The marketing site and openmouse.app/supported live in other repos.
+
+### 1.5 Size of the job
+
+51 card components, ~6,100 lines of CSS across 6 files, 1,326 top-level selectors, 86 `box-shadow`, 44 `font-mono`, 15 `uppercase`, 45 hex literals in TSX (mostly the nav icon palette and stage colours). DOM coupling from logic is minimal: only `#workspace-tab-*` focus and `.battery-fill`. No test asserts class names. That makes a full restyle safe to do without touching `device/controller.ts`.
+
+---
+
+## 2. What we take from the reference, and what we don't
+
+### Take (ideas)
+
+| invade.lol idea | OpenMouse use |
+|---|---|
+| Slim top bar, one content column (~1200px), footer | App shell for every page |
+| Profile card on the left with section nav under it | **Device card**: render, name, connection, actions; section nav under it; "Other devices" list below (the "Played with" idea) |
+| Ranked/Performance panel: big figures, label above, unit after, meta under | **Current setup** panel: DPI, polling, battery, profile, plus the DPI stage strip |
+| Activity/LP chart: one line, soft fade, hairline guides | **Battery over time** from `features/devices/battery-history.ts` (real samples, 5-min checkpoints, 30-day window) |
+| Match rows: one row per game, result tint, expand inline | Hardware-test stages, game list, diagnostics entries |
+| Champion table: name pinned, figures right-aligned, tabular | Button mapping, DPI stages, device facts, a supported-devices table if we add one |
+| Segmented control as an inset well with a raised key | Polling rate, DPI mode, language, every enum setting |
+| Translucent sheets lit from the top, one soft light on the ground | Surface system for all 12 themes |
+| "Last answer stays until the next arrives" | Device reads: keep the old value dimmed while a read is in flight, no skeleton flashes |
+| Empty states that say why and what happens next ("Checked every 30 seconds") | Every empty state (no device, no history, tab unavailable, Bridge absent) |
+| ⌘K search | Settings search over the cards the connected device actually has (only if built; see 5.2) |
+
+### Do not copy
+
+- Invade's violet, its token values, Archivo, rank/tier colours, PerfDial glow, LoL components, copy or icons.
+- `invade-ui` is **PolyForm Noncommercial**: no vendoring of CSS, components or fonts. OpenMouse is AGPL and takes donations. We reimplement the ideas in our own tokens. The mock's token file is our own sketch; re-derive values during implementation rather than diffing against `invade-ui/src/styles/tokens.css`.
+- The reference's coloured 3px result edge. We mark pass/fail with icon + word + a faint tint instead (no decorative stripes).
+
+---
+
+## 3. What changes, aspect by aspect
+
+| Aspect | Today | New |
+|---|---|---|
+| Navigation | Floating rounded left rail, rainbow icon per item, collapses on device pages | 52px top bar: brand + build, Devices, Hardware test, Games (Bridge only), Docs ↗; right side: Bridge state, search, What's new, Help, Settings |
+| Device page frame | Back button + centred pill tabs with glowing active pill; giant centred render | 300px left column (device card + section nav, sticky) and a main column of panels |
+| Home | Square tiles centred on a page, aurora animation | Device rows (render 64px, name, connection, polling, battery, state) + an OpenMouse Bridge panel with real status |
+| Cards | 51 bespoke chromes; mono uppercase micro labels ("STAGES IN USE", "POLLING RATE") | One `Panel` (title, meta, end slot); rows split by hairlines; sentence-case labels |
+| Settings rows | Mixed per card | One `SettingRow`: label + description left, control right, 44px min |
+| Controls | Several button styles, filled green toggles and pills | Button (default, ghost, one primary per view), Segmented, Switch, Select, Slider, NumberField, Badge |
+| Colour | Per-item icon hues, green glows, green Back button | Neutral chrome; accent only for primary action, active place, focus, slider fill, active stage. `ok/bad/warn` only for real states |
+| Type | DM Sans + JetBrains Mono | DM Sans only, tabular figures everywhere; mono only for raw hex IDs and HID logs in Diagnostics. Scale: page 20, panel 14, body 13, meta 12 |
+| Radii | 16px floating panels, pills | 3 / 5 / 8 / 12 only; no pills |
+| Shadows | 86 shadows, glows | Lit top edge on sheets; real shadow only on menus, dialogs, the pending bar |
+| Unsaved changes | `PendingBar` at the bottom of the shell | Sticky bar at the bottom of the main column: "N unsaved changes", the diff in words, Discard, **Save to mouse** |
+| Motion | Aurora, glows, scroll smoothing | 120–180ms washes; values swap in place; existing "Animations" preference and `prefers-reduced-motion` both honoured |
+| Help bot | Floating "OpenMouse AI" bubble with a bot icon that plays canned answers | It is a scripted FAQ, so it must not be called AI. Rename to "Quick help" and move it into the Help menu, or drop it (owner decides) |
+| Launch countdown | Live code, date passed | Delete with `launch.ts`/`launch.css` instead of restyling |
+| Docs | `DESIGN.md` mandates M3, rainbow icons, 16px floating surfaces, square cards | Replace `DESIGN.md` and the design rules in `AGENTS.md` before code lands |
+
+---
+
+## 4. Page by page
+
+Widths: content 1200px; device page = 300px side + 24px gap + main. Below 1100px the device column becomes a horizontal header (small render, name, actions) with section nav as a row of tabs. The 900 × 600 gate stays.
+
+### 4.1 Shell (`App.tsx`, new `TopBar.tsx`, `Footer.tsx`; delete `AppSidebar.tsx`)
+
+- Top bar on `--ink-0` with a 1px hairline. Active item = filled `--surface-2`, no underline glow.
+- News banner becomes a 34px strip under the bar, same column width, dismiss on the right (existing `features/news/news.ts` logic).
+- Footer: brand, Supported devices, GitHub, Discord, X, Donate, AGPL + not-affiliated line. Moves the support links out of Settings.
+- Live region and toasts stay where they are in the tree.
+
+### 4.2 Devices (home)
+
+- Page head: "Devices", meta "N authorized in this browser", primary **Connect a device** (the only primary on the page).
+- Rows: 64px render (contain, never cropped), name + brand · connection, polling, battery, state badge ("Connected" / "Plug in to open"), chevron. Whole row opens the device; gear button removed (it did the same thing).
+- Empty: no aurora. Text: what OpenMouse needs (Chromium or Bridge, the device plugged in) and the Connect button.
+- Bridge panel (lit sheet): what Bridge does, real status from `features/bridge/bridge-status-store.ts`, latest release from `features/bridge/updates.ts`, Download link.
+
+### 4.3 Device page
+
+**Left column**
+- Device card (`--r-lg`): render in an inset well with a soft accent light behind it; name 20px; "Connected · Brand"; connection detail; actions: Share profile, Setup code, overflow (Disconnect, Copy profile key, Diagnostics).
+- Section nav: Overview, Performance, Buttons, Macros, Lighting, Profiles, Advanced, filtered by the existing `availableWorkspaceTabs()`. Arrow-key behaviour from today's tablist is kept.
+- Other devices (overview only): other authorized devices as 44px rows.
+
+**Overview**
+- Current setup (lit sheet): DPI, polling, battery, onboard profile as figures; DPI stage strip with the active stage marked. Every value from `status`; missing values show "–".
+- Battery over time: chart from `features/devices/battery-history.ts` with the time-left estimate it already computes; empty state explains the 10-minute minimum.
+- Firmware: installed / latest / connection rows + Check for update (`firmware-updates.ts`).
+- Device-specific overview blocks (M2-NEX profiles, power overview) slot in as panels.
+
+**Performance**: Sensitivity panel (stage rows: enable, index, number field, slider, "Active"), Polling rate (segmented well, current value as a figure), Sensor/LOD, then vendor panels. One column; the render no longer repeats here because it sits in the left card.
+
+**Buttons**: ButtonMap gets the main column with the mouse diagram; mapping tables become two-column rows (button name | select). HITS keeps its dial-like controls but inside a standard panel; its presets become a Select + Save/Delete in the panel header.
+
+**Macros / Lighting / Profiles**: standard panels. Lighting zone list on the left of the panel, ColorPicker on the right. Profiles as rows (slot, name, active badge, actions) with Share/Import in the header.
+
+**Advanced**: settings rows grouped into panels (Wireless, Power, Receiver, Vendor). The dev-testing note becomes one quiet line at the top. Diagnostics becomes a panel with an inline expandable log (mono allowed here) and Capture.
+
+**Unsaved changes bar**: described in section 3.
+
+### 4.4 Keyboard page
+
+Same frame. Device card shows the keyboard render; sections from `availableKeyboardWorkspaceTabs()`.
+
+### 4.5 Hardware test
+
+- Page head: "Hardware test", one-line meta, actions: Start test (primary), Download log.
+- Left: device card (shared component). Right: stage list, one 44px row per stage: state icon + label + detail + right-aligned result; running stage shows its progress bar and live Hz. Verdict summary panel on top when finished: Passed / Failed / Stopped, counts, duration.
+- Device facts panel (key/value rows) below the stages instead of a third column.
+- The 3-line footer paragraph shrinks to one sentence with the Discord link.
+
+### 4.6 Games (Bridge only)
+
+- Page head with Bridge state. Grid of game tiles (art 16:9, name, "Auto-apply" badge when set) plus a "Request a game" tile that opens `GameRequestDialog`.
+- Game profile: the device page frame with the game's art in place of the render and only settings sections (as `gameProfile` already filters).
+
+### 4.7 Settings
+
+- Two columns: anchor list on the left (Appearance, Language, Behaviour, Profile key, Developer previews when enabled), panels on the right.
+- Theme picker: 12 swatches that each render a tiny preview in that theme's own tokens (sheet, text, accent), not just a dot.
+- Language: Select with native names (12 options is too many for a segmented control).
+- Behaviour: sound, animations, instant flash, advanced editors, experimental as SettingRows with switches.
+- Reset as a ghost button at the bottom. Support links move to the footer.
+
+### 4.8 Gates and notices
+
+One `Notice` layout for Unsupported (4 variants) and Window too small: brand mark, headline, one paragraph, one action where an action exists (Download Bridge, Open over HTTPS). Offline banner reuses the news strip style.
+
+### 4.9 Dialogs, menus, toasts
+
+- `Dialog` primitive: opaque `--solid-2`, `--r-lg`, menu shadow, title + close, footer actions with one primary, Escape and focus trap. All 11 dialogs move onto it.
+- Menus/popovers (`OptionMenu`, ColorPicker): `--solid-2`, `--r-sm`.
+- Toasts: bottom-right, solid, icon + text, no glow.
+
+---
+
+## 5. Implementation
+
+### 5.1 Structure
+
+- `src/styles/tokens.css`: shape/type/motion + **12 theme blocks**, each defining the full colour set (`--ink-0/1`, `--surface-*`, `--solid-*`, `--line-*`, `--text-1..4`, `--accent`, `--accent-rgb`, `--on-accent`, `--ok/--bad/--warn`, lighting and shadow recipes). Default stays whatever `DEFAULT_INTERFACE_PREFERENCES.theme` says (currently **Emerald**; the decision text said Matt, so confirm).
+- `src/styles/base.css`, `primitives.css`, `shell.css`, then one file per area (`device.css`, `performance.css`, `buttons.css`, `lighting.css`, `profiles.css`, `advanced.css`, `hardware-test.css`, `games.css`, `settings.css`, `dialogs.css`). Replaces `control.css`, `control-devices.css`, `control-profiles.css`, `profile-card.css`.
+- Primitives in `src/app/ui/`: `Panel`, `SettingRow`, `Figure`, `KeyValue`, `Button`, `Badge`, `EmptyState`, `Dialog`, `DeviceCard`, `SectionNav`. Existing `ui.tsx` controls (`Segmented`, `SwitchButton`, `OptionMenu`, `StepperSlider`, `RateSlider`, `Collapsible`, `BatteryIcon`) keep their props and get restyled, so the 51 cards mostly change only their outer chrome.
+- Icons: keep `lucide-react` for now, one stroke width, `currentColor`, no per-icon hues. Swap the set later if the owner wants a different look.
+- All new strings through `t()`; add keys to all 12 locales (the `i18n-tr-coverage` test fails otherwise). Logical CSS properties throughout for Arabic RTL.
+
+### 5.2 Order
+
+| # | Step | Done when |
+|---|---|---|
+| 0 | Rewrite `DESIGN.md`, update `AGENTS.md` rules, delete launch gate | Docs merged |
+| 1 | Tokens for all 12 themes + base + primitives | Primitive gallery renders in 12 themes, AA contrast measured for `--text-1..3` on `--ink-1` and `--surface-1` per theme |
+| 2 | Shell: TopBar, news strip, footer, layout; remove sidebar | Every existing page reachable; Games appears only with Bridge |
+| 3 | Devices home + empty + Bridge panel + notices | Preview `list` and a no-device run render clean |
+| 4 | Device page frame: DeviceCard, SectionNav, Overview, pending bar | `?preview=razer` overview matches the mock |
+| 5 | Section areas in parallel (one worker each): Performance; Buttons/HITS/Magnetic/ButtonMap; Macros + Lighting + Profiles; Advanced + Diagnostics + Firmware + keyboard | Every preview key × every tab renders without overflow |
+| 6 | Hardware test, Games, Settings | Click-through recorded |
+| 7 | Dialogs, menus, toasts on the shared primitives | Each dialog opens, closes with Escape, traps focus |
+| 8 | Optional: URL routes (`/`, `/device/:i/:section`, `/test`, `/games`, `/settings`) with an allowlisted parser like `device/preview/preview-modes.ts` | Back button works; PWA precache test still passes |
+| 9 | Optional: settings search (Ctrl K) indexing only cards from `cardAvailability()` | Results jump to and focus the card; not rendered until built |
+
+### 5.3 Verification
+
+- Harness: the 36 `?preview=` fixtures already cover most vendors. A Node Playwright script shoots every preview key × every available tab at 1920 × 1080 and 1100 × 800 in Emerald, Light and NieR, plus Arabic once, and logs page overflow and console errors.
+- `npm run check` (tsc + vite build + node tests) and `npm run size` (CSS budget should drop well below 225 kB).
+- antislop Delivery Gate report with the click-through before anything is called done.
+
+---
+
+## 6. Open questions
+
+1. Default theme: code default is **Emerald**; the decision text said Matt. Which one?
+2. "OpenMouse AI": rename to Quick help in the Help menu, or remove?
+3. Add an in-app **Supported devices** table page (data is already in `features/hardware-test/supported-devices-data.ts`), or keep linking to openmouse.app/supported?
+4. URL routing (step 8) now, or later?
+5. Keep the per-mouse DPI stage colours (M2-NEX `--stage-color-*`, these mirror the mouse's LED colours) as the only multi-hue element?
diff --git a/functions/_lib/admin.js b/functions/_lib/admin.js
index 3e4db455..7eb8a315 100644
--- a/functions/_lib/admin.js
+++ b/functions/_lib/admin.js
@@ -22,7 +22,6 @@ export function tokenFrom(request) {
   return request.headers.get("x-admin-token") ?? "";
 }
 
-/** True only when ADMIN_TOKEN is configured and the request presents it. */
 export function isAdminRequest(request, env) {
   const expected = env.ADMIN_TOKEN;
   if (!expected) return false;
diff --git a/functions/_lib/discord-card.js b/functions/_lib/discord-card.js
index 48d5c4f7..f94588b1 100644
--- a/functions/_lib/discord-card.js
+++ b/functions/_lib/discord-card.js
@@ -1,11 +1,3 @@
-// Renders the README's "OpenMouse on Discord" card as an SVG, with live member
-// and online counts when Discord answers.
-//
-// Counts come from Discord's public invite lookup (no bot or token needed):
-// `approximate_member_count` and `approximate_presence_count`. When the lookup
-// fails, the card falls back to the static tagline so the README never shows a
-// broken image. Layout and colors mirror `.github/assets/discord-card.svg`.
-
 export const DISCORD_INVITE_CODE = "yxC9jzMdw6";
 
 const INVITE_API = `https://discord.com/api/v10/invites/${DISCORD_INVITE_CODE}?with_counts=true`;
diff --git a/functions/_lib/security-headers.js b/functions/_lib/security-headers.js
index 67cc4496..2e9a6af1 100644
--- a/functions/_lib/security-headers.js
+++ b/functions/_lib/security-headers.js
@@ -3,7 +3,7 @@
 // `public/_headers` declares the exact same set for the static assets Pages
 // serves directly; this module applies it to the Pages Functions responses
 // (the IP-ban screen, blocked/rate-limited replies, and all /api/* payloads),
-// which `_headers` does not cover. `src/security-headers.test.ts` keeps the two
+// which `_headers` does not cover. `test/security-headers.test.ts` keeps the two
 // copies in lockstep so they cannot drift.
 //
 // `upgrade-insecure-requests` is deliberately absent. It would rewrite the
diff --git a/index.html b/index.html
index 94b621e8..9445cabb 100644
--- a/index.html
+++ b/index.html
@@ -27,6 +27,6 @@
   </head>
   <body>
     <div id="control-app"></div>
-    <script type="module" src="/src/control.tsx"></script>
+    <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>
diff --git a/package.json b/package.json
index 14969cfb..f3a43fc8 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,7 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc --noEmit && vite build",
-    "test": "node --test \"src/**/*.test.ts\" \"build/**/*.test.ts\"",
+    "test": "node --test \"src/**/*.test.ts\" \"test/**/*.test.ts\" \"build/**/*.test.ts\"",
     "size": "node build/check-bundle-size.ts",
     "check": "npm run build && npm test",
     "preview": "vite preview"
diff --git a/public/news.json b/public/news.json
index 0947b060..e5edd02b 100644
--- a/public/news.json
+++ b/public/news.json
@@ -2,5 +2,5 @@
   "id": "2026-09-openmouse-bridge",
   "level": "info",
   "message": "OpenMouse Bridge is here: Razer mice work on Windows again, plus game profiles, low-battery alerts and Firefox support. Read the announcement.",
-  "url": "https://openmouse.app/blog-openmouse-bridge"
+  "url": "https://openmouse.app/blog/openmouse-bridge"
 }
diff --git a/public/sounds/click.wav b/public/sounds/click.wav
deleted file mode 100644
index 23e25b55..00000000
Binary files a/public/sounds/click.wav and /dev/null differ
diff --git a/public/theme-init.js b/public/theme-init.js
index 81bc65e1..4dda34b1 100644
--- a/public/theme-init.js
+++ b/public/theme-init.js
@@ -11,6 +11,5 @@
     document.documentElement.dataset.colorScheme = dark ? "dark" : "light";
     document.documentElement.style.colorScheme = dark ? "dark" : "light";
   } catch {
-    /* storage disabled — fall back to the stylesheet default */
   }
 })();
diff --git a/scripts/generate-firmware-manifest.mjs b/scripts/generate-firmware-manifest.mjs
index 99acfd74..aaa73d07 100644
--- a/scripts/generate-firmware-manifest.mjs
+++ b/scripts/generate-firmware-manifest.mjs
@@ -89,7 +89,6 @@ function entryId(depotName, version, key) {
   return `${depotName}@${version}${key && key !== "dfu_binary" ? `:${key}` : ""}`;
 }
 
-/** Plain-text English changelog from the depot, if shipped. */
 function depotReleaseNotes(files) {
   const raw = files.get('release_notes/dfu_release_notes.html');
   if (!raw) return null;
diff --git a/scripts/sync-supported-devices.mjs b/scripts/sync-supported-devices.mjs
index 940e4443..3bfb84b1 100644
--- a/scripts/sync-supported-devices.mjs
+++ b/scripts/sync-supported-devices.mjs
@@ -1,4 +1,4 @@
-// Mirrors the supported-devices table into src/supported-devices-data.ts.
+// Mirrors the supported-devices table into src/features/hardware-test/supported-devices-data.ts.
 //
 // The source of truth is the landing page's `supported-mice.ts` (the table the
 // openmouse.app/supported page renders; itself re-checked against the
@@ -19,7 +19,7 @@ import { fileURLToPath, pathToFileURL } from "node:url";
 
 const here = dirname(fileURLToPath(import.meta.url));
 const root = join(here, "..");
-const source = join(root, "..", "openmouse-landing-page", "src", "supported-mice.ts");
+const source = join(root, "..", "openmouse-landing-page", "src", "data", "supported-mice.ts");
 
 const { MICE } = await import(pathToFileURL(source).href);
 
@@ -31,7 +31,7 @@ const rows = MICE.map((entry) => {
 const out = `// Supported-devices table, mirrored from the landing page.
 //
 // AUTO-GENERATED — do not edit by hand. Source of truth:
-//   openmouse-landing-page/src/supported-mice.ts
+//   openmouse-landing-page/src/data/supported-mice.ts
 // (the table behind openmouse.app/supported, re-checked against the
 // @openmouse/protocol driver registry every time the landing page builds).
 //
@@ -61,5 +61,5 @@ ${rows.join("\n")}
 ];
 `;
 
-writeFileSync(join(root, "src", "supported-devices-data.ts"), out);
-console.log(`Wrote src/supported-devices-data.ts with ${MICE.length} entries from ${source}`);
\ No newline at end of file
+writeFileSync(join(root, "src", "features", "hardware-test", "supported-devices-data.ts"), out);
+console.log(`Wrote src/features/hardware-test/supported-devices-data.ts with ${MICE.length} entries from ${source}`);
\ No newline at end of file
diff --git a/src/app/AiOverlay.tsx b/src/app/AiOverlay.tsx
deleted file mode 100644
index f1d112d4..00000000
--- a/src/app/AiOverlay.tsx
+++ /dev/null
@@ -1,148 +0,0 @@
-import { displayText } from "../i18n";
-import { Bot, BotMessageSquare, X } from "lucide-react";
-import { useEffect, useRef, useState, type ReactNode } from "react";
-import { t } from "../i18n";
-import type { InterfaceLocale } from "../interface-preferences";
-import { DISCORD_URL } from "./social-links";
-
-type TopicId = "connect" | "dpi" | "browser" | "saving" | "other";
-
-const TOPIC_ORDER: TopicId[] = ["connect", "dpi", "browser", "saving", "other"];
-
-interface Message {
-  from: "bot" | "user";
-  text: string;
-}
-
-export function AiOverlay({ locale = "en" }: { locale?: InterfaceLocale }): ReactNode {
-  const [open, setOpen] = useState(false);
-  const [messages, setMessages] = useState<Message[]>([]);
-  const [typed, setTyped] = useState(true);
-  const [greeted, setGreeted] = useState(false);
-  const scrollRef = useRef<HTMLDivElement>(null);
-  const timerRef = useRef<number | null>(null);
-
-  useEffect(() => {
-    return () => {
-      if (timerRef.current !== null) window.clearTimeout(timerRef.current);
-    };
-  }, []);
-
-  useEffect(() => {
-    if (!open) return;
-    if (!greeted) {
-      setGreeted(true);
-      scheduleAnswer(t(locale, "ai.greeting"), 700);
-    }
-  }, [open, greeted, locale]);
-
-  useEffect(() => {
-    const node = scrollRef.current;
-    if (node) node.scrollTop = node.scrollHeight;
-  }, [messages, typed, open]);
-
-  function scheduleAnswer(answer: string, delay: number): void {
-    setTyped(false);
-    if (timerRef.current !== null) window.clearTimeout(timerRef.current);
-    timerRef.current = window.setTimeout(() => {
-      timerRef.current = null;
-      setMessages((current) => [...current, { from: "bot", text: answer }]);
-      setTyped(true);
-    }, delay);
-  }
-
-  const topicLabel = (id: TopicId): string => {
-    switch (id) {
-      case "connect": return t(locale, "ai.topic1");
-      case "dpi": return t(locale, "ai.topic2");
-      case "browser": return t(locale, "ai.topic3");
-      case "saving": return t(locale, "ai.topic4");
-      case "other": return t(locale, "ai.other");
-    }
-  };
-
-  const topicAnswer = (id: TopicId): string => {
-    switch (id) {
-      case "connect": return t(locale, "ai.topic1Ans");
-      case "dpi": return t(locale, "ai.topic2Ans");
-      case "browser": return t(locale, "ai.topic3Ans");
-      case "saving": return t(locale, "ai.topic4Ans");
-      case "other": return t(locale, "ai.otherAns");
-    }
-  };
-
-  function pick(id: TopicId): void {
-    if (!typed) return;
-    setMessages((current) => [...current, { from: "user", text: topicLabel(id) }]);
-    const answer = topicAnswer(id);
-    scheduleAnswer(answer, 450 + Math.min(answer.length * 6, 2200));
-  }
-
-  return (
-    <>
-      <button
-        type="button"
-        className={`ai-launcher${open ? " is-open" : ""}`}
-        title={t(locale, "ai.title")}
-        aria-label={t(locale, "ai.title")}
-        aria-expanded={open}
-        onClick={() => setOpen((value) => !value)}
-      >
-        {open ? (
-          <X size={20} strokeWidth={2} aria-hidden="true" />
-        ) : (
-          <BotMessageSquare size={20} strokeWidth={1.9} aria-hidden="true" />
-        )}
-      </button>
-
-      {open ? (
-        <div className="ai-overlay" role="dialog" aria-label={t(locale, "ai.title")}>
-          <header className="ai-head">
-            <div className="ai-head-brand">
-              <span className="ai-head-mark">
-                <Bot size={18} strokeWidth={1.9} aria-hidden="true" />
-              </span>
-              <div>
-                <strong>{t(locale, "ai.title")}</strong>
-                <span>{t(locale, "ai.subtitle")}</span>
-              </div>
-            </div>
-            <button type="button" onClick={() => setOpen(false)} aria-label={t(locale, "common.close")}>×</button>
-          </header>
-
-          <div className="ai-scroll" ref={scrollRef}>
-            {messages.map((message, index) => (
-              <div key={index} className={`ai-message is-${message.from}`}>
-                {displayText(locale, message.text)}
-              </div>
-            ))}
-            {!typed ? (
-              <div className="ai-message is-bot ai-typing" aria-hidden="true">
-                <span className="ai-typing-dot" />
-                <span className="ai-typing-dot" />
-                <span className="ai-typing-dot" />
-              </div>
-            ) : null}
-          </div>
-
-          <div className="ai-options">
-            {TOPIC_ORDER.map((id) => (
-              <button key={id} type="button" disabled={!typed} onClick={() => pick(id)}>
-                {displayText(locale, topicLabel(id))}
-              </button>
-            ))}
-          </div>
-
-          <footer className="ai-foot">
-            <a href={DISCORD_URL} target="_blank" rel="noreferrer">
-              <svg viewBox="0 0 126.644 96" aria-hidden="true">
-                <path fill="currentColor" d="M81.15,0c-1.2376,2.1973-2.3489,4.4704-3.3591,6.794-9.5975-1.4396-19.3718-1.4396-28.9945,0-.985-2.3236-2.1216-4.5967-3.3591-6.794-9.0166,1.5407-17.8059,4.2431-26.1405,8.0568C2.779,32.5304-1.6914,56.3725.5312,79.8863c9.6732,7.1476,20.5083,12.603,32.0505,16.0884,2.6014-3.4854,4.8998-7.1981,6.8698-11.0623-3.738-1.3891-7.3497-3.1318-10.8098-5.1523.9092-.6567,1.7932-1.3386,2.6519-1.9953,20.281,9.547,43.7696,9.547,64.0758,0,.8587.7072,1.7427,1.3891,2.6519,1.9953-3.4601,2.0457-7.0718,3.7632-10.835,5.1776,1.97,3.8642,4.2683,7.5769,6.8698,11.0623,11.5419-3.4854,22.3769-8.9156,32.0509-16.0631,2.626-27.2771-4.496-50.9172-18.817-71.8548C98.9811,4.2684,90.1918,1.5659,81.1752.0505l-.0252-.0505ZM42.2802,65.4144c-6.2383,0-11.4159-5.6575-11.4159-12.6535s4.9755-12.6788,11.3907-12.6788,11.5169,5.708,11.4159,12.6788c-.101,6.9708-5.026,12.6535-11.3907,12.6535ZM84.3576,65.4144c-6.2637,0-11.3907-5.6575-11.3907-12.6535s4.9755-12.6788,11.3907-12.6788,11.4917,5.708,11.3906,12.6788c-.101,6.9708-5.026,12.6535-11.3906,12.6535Z" />
-              </svg>
-              {t(locale, "ai.joinDiscord")}
-            </a>
-          </footer>
-        </div>
-      ) : null}
-    </>
-  );
-}
\ No newline at end of file
diff --git a/src/app/App.tsx b/src/app/App.tsx
index bb3ec894..abfacc4d 100644
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@@ -1,25 +1,35 @@
-import { displayText } from "../i18n";
+import { displayText } from "../i18n/index";
 import { useEffect, useRef, useState, type ReactNode } from "react";
 import * as control from "../device/controller";
-import { ensureDisplayLocale } from "../i18n";
-import { interfaceThemeSlug } from "../interface-preferences";
+import { ensureDisplayLocale } from "../i18n/index";
+import { interfaceThemeSlug } from "../features/settings/interface-preferences";
 import { AppSidebar, type DesktopPage } from "./AppSidebar";
-import { OverviewPage } from "./OverviewPage";
-import { CaptureDialog } from "./CaptureDialog";
-import { GamesPage, useBridgeActive } from "./GamesPage";
-import { HardwareTestPage } from "./HardwareTestPage";
-import { InterfaceSettings } from "./InterfaceSettings";
-import { NewsBanner } from "./NewsBanner";
+import { OverviewPage } from "../features/devices/OverviewPage";
+import { CaptureDialog } from "../features/capture/CaptureDialog";
+import { GamesPage } from "../features/games/GamesPage";
+import { HardwareTestPage } from "../features/hardware-test/HardwareTestPage";
+import { InterfaceSettings } from "../features/settings/InterfaceSettings";
+import { NewsBanner } from "../features/news/NewsBanner";
 import { PendingBar } from "./PendingBar";
-import { ShareProfileDialog } from "./ShareProfileDialog";
-import { WhatsNewDialog } from "./WhatsNewDialog";
-import { AiOverlay } from "./AiOverlay";
+import { HelpPanel } from "./HelpPanel";
+import { ShareProfileDialog } from "../features/profiles/ShareProfileDialog";
+import { WhatsNewDialog } from "../features/news/WhatsNewDialog";
 import { ToastHost } from "./Toasts";
-import { useBridgeBatteryReporter } from "./useBridgeBatteryReporter";
-import { useBridgeProfileApplier } from "./useBridgeProfileApplier";
+import { useBridgeBatteryReporter } from "../features/bridge/useBridgeBatteryReporter";
+import { useBridgeProfileApplier } from "../features/bridge/useBridgeProfileApplier";
 import { useControl } from "./useControl";
-import { setSoundsEnabled } from "../sound-manager";
-import { UiLocaleContext } from "./ui-locale";
+import { setSoundsEnabled } from "../platform/sound-manager";
+import { UiLocaleContext } from "../shared/ui-locale";
+
+const SIDEBAR_KEY = "openmouse-sidebar-collapsed-v1";
+
+function initialSidebarCollapsed(): boolean {
+  try {
+    return localStorage.getItem(SIDEBAR_KEY) === "1";
+  } catch {
+    return false;
+  }
+}
 
 export function App(): ReactNode {
   const snapshot = useControl();
@@ -30,12 +40,10 @@ export function App(): ReactNode {
   const [shareProfileOpen, setShareProfileOpen] = useState(false);
   const [whatsNewOpen, setWhatsNewOpen] = useState(false);
   const [page, setPage] = useState<DesktopPage>("home");
-  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
+  const [sidebarCollapsed, setSidebarCollapsed] = useState(initialSidebarCollapsed);
   const { preferences, status } = snapshot;
   const locale = preferences.locale;
-  const bridgeActive = useBridgeActive();
-  // Games only exists while Bridge does — if it goes away, fall back to Home.
-  const showingGames = page === "games" && bridgeActive;
+  const showingGames = page === "games";
 
   const showingSettings = page === "settings" || snapshot.interfaceSettingsOpen;
 
@@ -43,9 +51,9 @@ export function App(): ReactNode {
     ? "settings"
     : page === "hardware-test"
       ? "hardware-test"
-        : showingGames
-          ? "games"
-          : (status !== null || snapshot.keyboard !== null) && snapshot.deviceView === "device"
+      : showingGames
+        ? "games"
+        : (status !== null || snapshot.keyboard !== null) && snapshot.deviceView === "device"
           ? "dashboard"
           : "home";
 
@@ -69,13 +77,11 @@ export function App(): ReactNode {
       if (document.documentElement.lang !== nextLang) {
         document.documentElement.lang = nextLang;
       }
-      // Arabic reads right-to-left; every other locale is left-to-right.
       const nextDir = locale === "ar" ? "rtl" : "ltr";
       if (document.documentElement.dir !== nextDir) {
         document.documentElement.dir = nextDir;
       }
     } catch {
-      /* non-DOM environment (tests) */
     }
     // A stored non-English locale resolves its table after first paint;
     // re-render once it arrives instead of sticking on fallback strings.
@@ -85,19 +91,32 @@ export function App(): ReactNode {
     });
   }, [locale]);
 
+  useEffect(() => {
+    try {
+      document.documentElement.dataset.interfaceTheme = interfaceThemeSlug(preferences.theme);
+    } catch {
+    }
+  }, [preferences.theme]);
 
   useEffect(() => {
     panel.current?.scrollTo({ top: 0, behavior: preferences.reducedMotion ? "auto" : "smooth" });
   }, [page, snapshot.workspaceTab, preferences.reducedMotion]);
 
-  useEffect(() => {
-    setSidebarCollapsed(resolvedPage === "dashboard" || resolvedPage === "hardware-test");
-  }, [resolvedPage]);
-
   useEffect(() => {
     setSoundsEnabled(preferences.enabledSounds);
   }, [preferences.enabledSounds]);
 
+  const toggleSidebar = (): void => {
+    setSidebarCollapsed((current) => {
+      const next = !current;
+      try {
+        localStorage.setItem(SIDEBAR_KEY, next ? "1" : "0");
+      } catch {
+      }
+      return next;
+    });
+  };
+
   function navigate(next: DesktopPage): void {
     if (next === "settings") {
       control.openInterfaceSettings();
@@ -120,12 +139,19 @@ export function App(): ReactNode {
     }
   }
 
+  const openDevice = (index: number): void => {
+    control.closeInterfaceSettings();
+    setPage("home");
+    void control.openDeviceOverview(index);
+  };
+
+
   return (
     <UiLocaleContext.Provider value={locale}>
     <div
       className={[
         "control-shell",
-        "full-desktop-shell",
+        "om-shell",
         status || snapshot.keyboard ? "" : "is-empty",
         sidebarCollapsed ? "sidebar-collapsed" : "",
         preferences.reducedMotion ? "reduce-interface-motion" : "",
@@ -133,11 +159,19 @@ export function App(): ReactNode {
       ].filter(Boolean).join(" ")}
       data-interface-theme={interfaceThemeSlug(preferences.theme)}
     >
-      <NewsBanner locale={locale} />
-      <AppSidebar snapshot={snapshot} page={resolvedPage} collapsed={sidebarCollapsed} onToggleCollapsed={() => setSidebarCollapsed(!sidebarCollapsed)} onNavigate={navigate} onOpenWhatsNew={() => setWhatsNewOpen(true)} />
+      <AppSidebar
+        snapshot={snapshot}
+        page={resolvedPage}
+        collapsed={sidebarCollapsed}
+        onToggleCollapsed={toggleSidebar}
+        onNavigate={navigate}
+        onOpenWhatsNew={() => setWhatsNewOpen(true)}
+        onOpenDevice={openDevice}
+      />
 
-      <main className="full-desktop-main">
-        <div className="full-desktop-content" ref={panel}>
+      <main className="om-main full-desktop-main">
+        <NewsBanner locale={locale} />
+        <div className="om-content full-desktop-content" ref={panel}>
           {showingSettings ? (
             <InterfaceSettings snapshot={snapshot} />
           ) : page === "hardware-test" ? (
@@ -161,7 +195,7 @@ export function App(): ReactNode {
       <CaptureDialog open={captureOpen} onClose={() => setCaptureOpen(false)} locale={locale} />
       <WhatsNewDialog open={whatsNewOpen} onClose={() => setWhatsNewOpen(false)} locale={locale} />
       <ShareProfileDialog open={shareProfileOpen} onClose={() => setShareProfileOpen(false)} snapshot={snapshot} />
-      <AiOverlay locale={locale} />
+      <HelpPanel locale={locale} />
       <ToastHost toasts={snapshot.toasts} locale={locale} />
     </div>
     </UiLocaleContext.Provider>
diff --git a/src/app/AppSidebar.tsx b/src/app/AppSidebar.tsx
index e345a24f..186b1d57 100644
--- a/src/app/AppSidebar.tsx
+++ b/src/app/AppSidebar.tsx
@@ -1,21 +1,120 @@
-import { displayText } from "../i18n";
-import { ChevronLeft, ChevronRight, FileText, FlaskConical, Gamepad2, House, Mouse, Settings as SettingsIcon, Star, type LucideIcon } from "lucide-react";
+import { DISCORD_URL, DiscordIcon } from "../shared/social-links";
+import { displayText, t } from "../i18n/index";
+import {
+  Activity,
+  BookOpen,
+  ChevronLeft,
+  ChevronRight,
+  Gamepad2,
+  LayoutGrid,
+  Megaphone,
+  Settings as SettingsIcon,
+  type LucideIcon,
+} from "lucide-react";
 import { type ReactNode } from "react";
 import type { ControlSnapshot } from "../device/types";
-import { t } from "../i18n";
-import { useBridgeActive } from "./GamesPage";
-import { DISCORD_URL, DiscordIcon } from "./social-links";
+import { deviceImage } from "../shared/device-images";
+import { BridgeStatusButton } from "../features/bridge/BridgeStatus";
+import { BatteryIcon } from "../shared/ui";
 
 export const OPENMOUSE_URL = "https://openmouse.app/";
 
 export type DesktopPage = "home" | "dashboard" | "hardware-test" | "games" | "settings";
 
-function NavIcon({ icon: Icon, color }: { icon: LucideIcon; color: string }): ReactNode {
-  return <Icon className="app-sidebar-nav-icon" strokeWidth={2} stroke={color} aria-hidden="true" />;
+function NavItem({
+  icon: Icon,
+  label,
+  active = false,
+  external = false,
+  href,
+  onClick,
+  collapsed,
+}: {
+  icon: LucideIcon;
+  label: string;
+  active?: boolean;
+  external?: boolean;
+  href?: string;
+  onClick?: () => void;
+  collapsed: boolean;
+}): ReactNode {
+  const body = (
+    <>
+      <Icon className="om-nav-icon" strokeWidth={1.8} aria-hidden="true" />
+      <span className="om-nav-label">{label}</span>
+      {external ? <span className="om-nav-ext" aria-hidden="true">↗</span> : null}
+    </>
+  );
+  const className = `om-nav-item${active ? " is-active" : ""}`;
+  const title = collapsed ? label : undefined;
+  if (href) {
+    return (
+      <a className={className} title={title} href={href} target={external ? "_blank" : undefined} rel={external ? "noreferrer" : undefined}>
+        {body}
+      </a>
+    );
+  }
+  return (
+    <button className={className} title={title} aria-current={active ? "page" : undefined} type="button" onClick={onClick}>
+      {body}
+    </button>
+  );
 }
 
-function NavArrow(): ReactNode {
-  return <ChevronRight className="app-sidebar-nav-arrow" size={18} strokeWidth={2.2} aria-hidden="true" />;
+function SidebarDeviceRow({
+  snapshot,
+  index,
+  collapsed,
+  open,
+}: {
+  snapshot: ControlSnapshot;
+  index: number;
+  collapsed: boolean;
+  open: (index: number) => void;
+}): ReactNode {
+  const locale = snapshot.preferences.locale;
+  const device = snapshot.devices.find((entry) => entry.index === index);
+  if (!device) return null;
+  const live = device.selected && (snapshot.deviceStatus !== null || snapshot.keyboard !== null);
+  const status = live ? snapshot.deviceStatus : null;
+  const image = deviceImage({ vendorId: device.vendorId, productId: device.productId } as HIDDevice, device.name);
+  return (
+    <li>
+      <button
+        type="button"
+        className={`om-side-device${live ? " is-active" : ""}`}
+        title={collapsed ? device.name : undefined}
+        onClick={() => open(device.index)}
+      >
+        <span className="om-side-device-art" aria-hidden="true">
+          <img
+            src={image}
+            alt=""
+            loading="lazy"
+            draggable={false}
+            onError={(event) => {
+              event.currentTarget.onerror = null;
+              event.currentTarget.src = deviceImage(null);
+            }}
+          />
+          {live ? <span className="om-side-device-live" /> : null}
+        </span>
+        <span className="om-side-device-text">
+          <span className="om-side-device-name">{device.name}</span>
+          <span className="om-side-device-sub">
+            {status?.batteryPercent != null ? (
+              <>
+                <BatteryIcon percent={status.batteryPercent} state={status.batteryState} />
+                <span>{status.batteryPercent}%</span>
+              </>
+            ) : (
+              <span>{live ? t(locale, "side.connected") : t(locale, "home.notConnected")}</span>
+            )}
+          </span>
+        </span>
+      </button>
+    </li>
+  );
 }
 
 export function AppSidebar({
@@ -25,6 +124,7 @@ export function AppSidebar({
   onToggleCollapsed,
   onNavigate,
   onOpenWhatsNew,
+  onOpenDevice,
 }: {
   snapshot: ControlSnapshot;
   page: DesktopPage;
@@ -32,134 +132,102 @@ export function AppSidebar({
   onToggleCollapsed: () => void;
   onNavigate: (page: DesktopPage) => void;
   onOpenWhatsNew: () => void;
+  onOpenDevice: (index: number) => void;
 }): ReactNode {
   const locale = snapshot.preferences.locale;
-  const bridgeActive = useBridgeActive();
+  const devices = snapshot.devices;
+
   return (
-    <aside className={`app-sidebar${collapsed ? " app-sidebar-collapsed" : ""}`}>
-      {page === "dashboard" || page === "hardware-test" ? (
+    <aside className={`om-sidebar${collapsed ? " is-collapsed" : ""}`}>
+      <div className="om-sidebar-head">
+        <a className="om-brand" href={OPENMOUSE_URL} target="_blank" rel="noreferrer" title={displayText(locale, "openmouse.app")}>
+          <img className="om-brand-mark" src="/logo.png" alt="" width={14} height={21} />
+          <span className="om-brand-text">
+            <span className="om-brand-name">OpenMouse</span>
+            <span className="om-brand-build">{displayText(locale, snapshot.buildLabel)}</span>
+          </span>
+        </a>
         <button
           type="button"
-          className="app-sidebar-collapse-toggle"
-          title={displayText(locale, collapsed ? t(locale, "nav.expand") : t(locale, "nav.collapse"))}
+          className="om-icon-btn om-sidebar-toggle"
+          aria-label={t(locale, collapsed ? "nav.expand" : "nav.collapse")}
+          title={t(locale, collapsed ? "nav.expand" : "nav.collapse")}
+          aria-expanded={!collapsed}
           onClick={onToggleCollapsed}
         >
-          {collapsed ? (
-            <ChevronRight size={16} strokeWidth={2.4} aria-hidden="true" />
-          ) : (
-            <ChevronLeft size={16} strokeWidth={2.4} aria-hidden="true" />
-          )}
+          {collapsed ? <ChevronRight strokeWidth={2} aria-hidden="true" /> : <ChevronLeft strokeWidth={2} aria-hidden="true" />}
         </button>
+      </div>
+
+      <nav className="om-nav" aria-label={t(locale, "nav.main")}>
+        <NavItem
+          icon={LayoutGrid}
+          label={t(locale, "nav.devices")}
+          active={page === "home" || page === "dashboard"}
+          onClick={() => onNavigate("home")}
+          collapsed={collapsed}
+        />
+        <NavItem
+          icon={Activity}
+          label={t(locale, "nav.hardwareTest")}
+          active={page === "hardware-test"}
+          onClick={() => onNavigate("hardware-test")}
+          collapsed={collapsed}
+        />
+        <NavItem
+          icon={Gamepad2}
+          label={t(locale, "nav.games")}
+          active={page === "games"}
+          onClick={() => onNavigate("games")}
+          collapsed={collapsed}
+        />
+      </nav>
+
+      {devices.length > 0 ? (
+        <section className="om-side-devices" aria-labelledby="om-side-devices-title">
+          <h2 id="om-side-devices-title" className="om-side-heading">{t(locale, "nav.yourDevices")}</h2>
+          <ul>
+            {devices.map((device) => (
+              <SidebarDeviceRow
+                key={device.index}
+                snapshot={snapshot}
+                index={device.index}
+                collapsed={collapsed}
+                open={onOpenDevice}
+              />
+            ))}
+          </ul>
+        </section>
       ) : null}
-      <div className="app-sidebar-top">
-        <a
-          className="app-sidebar-brand"
-          href={OPENMOUSE_URL}
-          target="_blank"
-          rel="noreferrer"
-          title={displayText(locale, "OpenMouse")}
-          aria-label={displayText(locale, "OpenMouse")}
-        >
-          <img className="brand-mark" src="/logo.png" alt={displayText(locale, "")} width={16} height={24} />
-          <span className="app-sidebar-brand-text">OpenMouse</span>
-          <span className="app-sidebar-brand-version" title={displayText(locale, snapshot.buildLabel)}>
-            {displayText(locale, snapshot.buildLabel)}
-          </span>
-        </a>
 
-        <nav className="app-sidebar-nav">
-          <button
-            className={`app-sidebar-nav-item${page === "home" ? " active" : ""}`}
-            type="button"
-            title={t(locale, "nav.home")}
-            onClick={() => onNavigate("home")}
-          >
-            <NavIcon icon={House} color="#5dde89" />
-            <span className="app-sidebar-nav-label">{t(locale, "nav.home")}</span>
-            <NavArrow />
-          </button>
-          <button
-            className={`app-sidebar-nav-item${page === "dashboard" ? " active" : ""}`}
-            type="button"
-            title={t(locale, "nav.dashboard")}
-            onClick={() => onNavigate("dashboard")}
-          >
-            <NavIcon icon={Mouse} color="#67d8ff" />
-            <span className="app-sidebar-nav-label">{t(locale, "nav.dashboard")}</span>
-            <NavArrow />
-          </button>
-          <button
-            className={`app-sidebar-nav-item${page === "hardware-test" ? " active" : ""}`}
-            type="button"
-            title={t(locale, "nav.hardwareTest")}
-            onClick={() => onNavigate("hardware-test")}
-          >
-            <NavIcon icon={FlaskConical} color="#2dd4bf" />
-            <span className="app-sidebar-nav-label">{t(locale, "nav.hardwareTest")}</span>
-            <NavArrow />
-          </button>
-          {bridgeActive ? (
-            <button
-              className={`app-sidebar-nav-item${page === "games" ? " active" : ""}`}
-              type="button"
-              title={t(locale, "nav.games")}
-              onClick={() => onNavigate("games")}
-            >
-              <NavIcon icon={Gamepad2} color="#a78bfa" />
-              <span className="app-sidebar-nav-label">{t(locale, "nav.games")}</span>
-              <NavArrow />
-            </button>
-          ) : null}
+      <div className="om-sidebar-foot">
+        <nav className="om-nav" aria-label={t(locale, "nav.more")}>
+          <NavItem icon={BookOpen} label={t(locale, "nav.docs")} href="https://docs.openmouse.app" external collapsed={collapsed} />
+          <NavItem icon={Megaphone} label={t(locale, "nav.whatsNew")} onClick={onOpenWhatsNew} collapsed={collapsed} />
           <a
-            className="app-sidebar-nav-item"
-            href="https://docs.openmouse.app"
+            className="om-nav-item om-nav-discord"
+            href={DISCORD_URL}
             target="_blank"
             rel="noreferrer"
-            title={t(locale, "nav.docs")}
+            title={collapsed ? t(locale, "nav.help") : undefined}
           >
-            <NavIcon icon={FileText} color="#e8b267" />
-            <span className="app-sidebar-nav-label">{t(locale, "nav.docs")}</span>
-            <NavArrow />
+            <DiscordIcon className="om-nav-icon om-nav-icon-discord" />
+            <span className="om-nav-text">
+              <span className="om-nav-label">{t(locale, "nav.help")}</span>
+              <span className="om-nav-sub">{t(locale, "nav.helpSubtitle")}</span>
+            </span>
+            <span className="om-nav-ext" aria-hidden="true">↗</span>
           </a>
+          <NavItem
+            icon={SettingsIcon}
+            label={t(locale, "nav.settings")}
+            active={page === "settings"}
+            onClick={() => onNavigate("settings")}
+            collapsed={collapsed}
+          />
         </nav>
-      </div>
-
-      <div className="app-sidebar-bottom">
-        <button
-          className="app-sidebar-nav-item"
-          type="button"
-          title={t(locale, "nav.whatsNew")}
-          onClick={onOpenWhatsNew}
-        >
-          <NavIcon icon={Star} color="#fbbf24" />
-          <span className="app-sidebar-nav-label">{t(locale, "nav.whatsNew")}</span>
-          <NavArrow />
-        </button>
-        <a
-          className="app-sidebar-nav-item app-sidebar-nav-item-featured"
-          href={DISCORD_URL}
-          target="_blank"
-          rel="noreferrer"
-          title={t(locale, "nav.help")}
-        >
-          <DiscordIcon className="app-sidebar-nav-icon-discord" style={{ color: "#5865f2" }} />
-          <span className="app-sidebar-nav-text">
-            <span className="app-sidebar-nav-label">{t(locale, "nav.help")}</span>
-            <span className="app-sidebar-nav-sub">{t(locale, "nav.helpSubtitle")}</span>
-          </span>
-          <NavArrow />
-        </a>
-        <button
-          className={`app-sidebar-nav-item${page === "settings" ? " active" : ""}`}
-          type="button"
-          title={t(locale, "nav.settings")}
-          onClick={() => onNavigate("settings")}
-        >
-          <NavIcon icon={SettingsIcon} color="#94a3b8" />
-          <span className="app-sidebar-nav-label">{t(locale, "nav.settings")}</span>
-          <NavArrow />
-        </button>
+        <BridgeStatusButton locale={locale} collapsed={collapsed} />
       </div>
     </aside>
   );
-}
\ No newline at end of file
+}
diff --git a/src/app/GamesPage.tsx b/src/app/GamesPage.tsx
deleted file mode 100644
index 236fddc8..00000000
--- a/src/app/GamesPage.tsx
+++ /dev/null
@@ -1,139 +0,0 @@
-import { displayText } from "../i18n";
-// The Games page — only reachable while OpenMouse Bridge is actually
-// reachable, i.e. `navigator.hid` is currently Bridge's WebHID shim, not the
-// browser's own implementation (see bridge-hid.ts). Lists the games Bridge
-// knows how to detect, which it syncs from the same `games.json` Desktop
-// ships (github.com/OpenMouse-Project/Desktop), so this list always matches
-// what Desktop's own Games page would show. Picking one opens its profile.
-import { useEffect, useState, type ReactNode } from "react";
-import { Gamepad2, Plus } from "lucide-react";
-import { bridgeGames, bridgeProfiles, type BridgeGame, type BridgeStatus } from "../bridge";
-import { isBridgeHidActive, subscribeBridgeHidActive } from "../bridge-hid";
-import { subscribeBridgeStatus } from "../bridge-status-store";
-import type { ControlSnapshot } from "../device/types";
-import { fetchGamesCatalog, gameArtwork } from "../games-catalog";
-import { t } from "../i18n";
-import { GameProfilePanel } from "./GameProfilePanel";
-import { GameRequestDialog } from "./GameRequestDialog";
-
-export function useBridgeActive(): boolean {
-  const [active, setActive] = useState(isBridgeHidActive());
-  useEffect(() => subscribeBridgeHidActive(setActive), []);
-  return active;
-}
-
-function useBridgeGames(active: boolean): BridgeGame[] {
-  const [games, setGames] = useState<BridgeGame[]>([]);
-  useEffect(() => {
-    if (!active) return;
-    // The games list only changes with a commit to Desktop's repo, not
-    // anything a session does — one fetch per connection is plenty.
-    const controller = new AbortController();
-    void bridgeGames(controller.signal).then(setGames).catch(() => undefined);
-    return () => controller.abort();
-  }, [active]);
-  return games;
-}
-
-function useArtworkByName(): Map<string, string> {
-  const [artwork, setArtwork] = useState<Map<string, string>>(new Map());
-  useEffect(() => {
-    const controller = new AbortController();
-    void fetchGamesCatalog(controller.signal)
-      .then((catalog) => {
-        const next = new Map<string, string>();
-        for (const entry of catalog) {
-          const url = gameArtwork(entry);
-          if (url) next.set(entry.name.toLowerCase(), url);
-        }
-        setArtwork(next);
-      })
-      .catch(() => undefined);
-    return () => controller.abort();
-  }, []);
-  return artwork;
-}
-
-export function GamesPage({ snapshot }: { snapshot: ControlSnapshot }): ReactNode {
-  const locale = snapshot.preferences.locale;
-  const active = useBridgeActive();
-  const games = useBridgeGames(active);
-  const artwork = useArtworkByName();
-  const [status, setStatus] = useState<BridgeStatus | null>(null);
-  const [profiled, setProfiled] = useState<Set<string>>(new Set());
-  const [selectedGame, setSelectedGame] = useState<BridgeGame | null>(null);
-  const [requestOpen, setRequestOpen] = useState(false);
-
-  useEffect(() => subscribeBridgeStatus(setStatus), []);
-
-  // Refetched every time the grid comes back into view, so a profile just
-  // turned on/off in GameProfilePanel shows up in its badge immediately.
-  useEffect(() => {
-    if (!active || selectedGame) return;
-    const controller = new AbortController();
-    void bridgeProfiles(controller.signal)
-      .then((profiles) => setProfiled(new Set(profiles
-        .filter((profile) => profile.enabled !== false)
-        .map((profile) => profile.application.name.toLowerCase()))))
-      .catch(() => undefined);
-    return () => controller.abort();
-  }, [active, selectedGame]);
-
-  if (selectedGame) {
-    return <GameProfilePanel snapshot={snapshot} game={selectedGame} onBack={() => setSelectedGame(null)} />;
-  }
-
-  return (
-    <div className="games-page">
-      <div className="games-header">
-        <h1 className="games-title">{t(locale, "nav.games")}</h1>
-        <p className="games-subtitle">{t(locale, "games.subtitle")}</p>
-        <span className="games-bridge-status">
-          <span className="games-bridge-dot" aria-hidden="true" />
-          {t(locale, "bridge.title")} · {t(locale, "bridge.connected")}
-          {displayText(locale, status?.version ? ` · v${status.version}` : "")}
-        </span>
-      </div>
-
-      <ul className="games-grid">
-        {games.map((game) => {
-          const art = artwork.get(game.name.toLowerCase());
-          return (
-            <li key={game.name}>
-              <button type="button" className="games-tile" onClick={() => setSelectedGame(game)}>
-                <span className="games-tile-art">
-                  {art ? (
-                    <img src={art} alt={displayText(locale, "")} loading="lazy" />
-                  ) : (
-                    <Gamepad2 size={28} strokeWidth={1.6} aria-hidden="true" />
-                  )}
-                  {profiled.has(game.name.toLowerCase()) ? (
-                    <span className="games-tile-badge">{t(locale, "games.autoApply")}</span>
-                  ) : null}
-                </span>
-                <span className="games-tile-name">{game.name}</span>
-              </button>
-            </li>
-          );
-        })}
-        <li>
-          <button type="button" className="games-tile games-tile-request" onClick={() => setRequestOpen(true)}>
-            <span className="games-tile-art">
-              <Plus size={28} strokeWidth={2} aria-hidden="true" />
-              <span className="games-tile-request-copy">{t(locale, "gamereq.tileHint")}</span>
-            </span>
-            <span className="games-tile-name">{t(locale, "gamereq.tile")}</span>
-          </button>
-        </li>
-      </ul>
-
-      <GameRequestDialog
-        open={requestOpen}
-        onClose={() => setRequestOpen(false)}
-        locale={locale}
-        bridgeActive={active}
-        knownGames={games}
-      />
-    </div>
-  );
-}
diff --git a/src/app/HelpPanel.tsx b/src/app/HelpPanel.tsx
new file mode 100644
index 00000000..50d6c5c0
--- /dev/null
+++ b/src/app/HelpPanel.tsx
@@ -0,0 +1,102 @@
+import { ChevronDown, CircleHelp, ExternalLink, X } from "lucide-react";
+import { useEffect, useId, useRef, useState, type ReactNode } from "react";
+import { t, type I18nKey } from "../i18n/index";
+import type { InterfaceLocale } from "../features/settings/interface-preferences";
+import { DISCORD_URL, DiscordIcon } from "../shared/social-links";
+
+const TOPICS: { question: I18nKey; answer: I18nKey }[] = [
+  { question: "ai.topic1", answer: "ai.topic1Ans" },
+  { question: "ai.topic2", answer: "ai.topic2Ans" },
+  { question: "ai.topic3", answer: "ai.topic3Ans" },
+  { question: "ai.topic4", answer: "ai.topic4Ans" },
+];
+
+const FAQ_URL = "https://openmouse.app/faq";
+
+export function HelpPanel({ locale = "en" }: { locale?: InterfaceLocale }): ReactNode {
+  const [open, setOpen] = useState(false);
+  const [expanded, setExpanded] = useState<number | null>(null);
+  const panel = useRef<HTMLDivElement>(null);
+  const launcher = useRef<HTMLButtonElement>(null);
+  const id = useId();
+
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (event: KeyboardEvent): void => {
+      if (event.key === "Escape") {
+        setOpen(false);
+        launcher.current?.focus();
+      }
+    };
+    const onPointer = (event: PointerEvent): void => {
+      const target = event.target as Node;
+      if (!panel.current?.contains(target) && !launcher.current?.contains(target)) setOpen(false);
+    };
+    document.addEventListener("keydown", onKey);
+    document.addEventListener("pointerdown", onPointer);
+    return () => {
+      document.removeEventListener("keydown", onKey);
+      document.removeEventListener("pointerdown", onPointer);
+    };
+  }, [open]);
+
+  return (
+    <>
+      <button
+        ref={launcher}
+        type="button"
+        className={`om-help-launcher${open ? " is-open" : ""}`}
+        title={t(locale, "nav.help")}
+        aria-label={t(locale, "nav.help")}
+        aria-expanded={open}
+        aria-controls={open ? id : undefined}
+        onClick={() => setOpen((value) => !value)}
+      >
+        {open ? <X strokeWidth={2} aria-hidden="true" /> : <CircleHelp strokeWidth={1.9} aria-hidden="true" />}
+      </button>
+
+      {open ? (
+        <div ref={panel} id={id} className="om-help" role="dialog" aria-labelledby={`${id}-title`}>
+          <header className="om-help-head">
+            <strong id={`${id}-title`}>{t(locale, "nav.help")}</strong>
+            <span>{t(locale, "ai.subtitle")}</span>
+          </header>
+
+          <ul className="om-help-list">
+            {TOPICS.map((topic, index) => {
+              const isOpen = expanded === index;
+              return (
+                <li key={topic.question} className={isOpen ? "is-open" : undefined}>
+                  <button
+                    type="button"
+                    aria-expanded={isOpen}
+                    aria-controls={`${id}-a${index}`}
+                    onClick={() => setExpanded(isOpen ? null : index)}
+                  >
+                    <span>{t(locale, topic.question)}</span>
+                    <ChevronDown strokeWidth={2} aria-hidden="true" />
+                  </button>
+                  <p id={`${id}-a${index}`} hidden={!isOpen}>{t(locale, topic.answer)}</p>
+                </li>
+              );
+            })}
+          </ul>
+
+          <footer className="om-help-foot">
+            <span>{t(locale, "ai.other")}</span>
+            <div className="om-help-links">
+              <a className="om-btn" href={FAQ_URL} target="_blank" rel="noreferrer">
+                {t(locale, "help.faq")}
+                <ExternalLink strokeWidth={2} aria-hidden="true" />
+              </a>
+              <a className="om-btn om-help-discord" href={DISCORD_URL} target="_blank" rel="noreferrer">
+                <DiscordIcon />
+                {t(locale, "ai.joinDiscord")}
+              </a>
+            </div>
+          </footer>
+        </div>
+      ) : null}
+    </>
+  );
+}
diff --git a/src/app/InterfaceSettings.tsx b/src/app/InterfaceSettings.tsx
deleted file mode 100644
index 3541a70d..00000000
--- a/src/app/InterfaceSettings.tsx
+++ /dev/null
@@ -1,286 +0,0 @@
-import { displayText } from "../i18n";
-import { useState, type ReactNode } from "react";
-import * as control from "../device/controller";
-import type { ControlSnapshot } from "../device/types";
-import { LOCALE_NAME_KEYS, t } from "../i18n";
-import { interfaceThemeSlug, type InterfaceTheme } from "../interface-preferences";
-import { DiscordIcon, DISCORD_URL, GitHubIcon, GITHUB_URL, TwitterIcon, TWITTER_URL } from "./social-links";
-import { Segmented } from "./ui";
-
-const THEME_ORDER: readonly InterfaceTheme[] = [
-  "Matt",
-  "Emerald",
-  "Violet",
-  "Ice",
-  "Ember",
-  "Mono",
-  "Miku",
-  "Catppuccin Mocha",
-  "Catppuccin Macchiato",
-  "Catppuccin Frappé",
-  "NieR: Automata",
-  "Light",
-];
-
-function ToggleSwitch({
-  id,
-  checked,
-  onChange,
-}: {
-  id: string;
-  checked: boolean;
-  onChange: (next: boolean) => void;
-}): ReactNode {
-  return (
-    <label className="switch">
-      <input
-        id={id}
-        type="checkbox"
-        checked={checked}
-        onChange={(event) => onChange(event.currentTarget.checked)}
-      />
-      <span className="switch-track" />
-    </label>
-  );
-}
-
-export function ProfileKeyFields({ snapshot }: { snapshot: ControlSnapshot }): ReactNode {
-  const [importText, setImportText] = useState("");
-  const [copied, setCopied] = useState(false);
-  const locale = snapshot.preferences.locale;
-  const key = snapshot.hasActiveDevice ? control.exportProfileKey() : null;
-
-  return (
-    <div className="profile-key-fields">
-      <label className="profile-key-field">
-        <span>{t(locale, "set.yourKey")}</span>
-        <textarea
-          readOnly
-          rows={3}
-          value={key ?? t(locale, "set.noKey")}
-          onFocus={(event) => event.currentTarget.select()}
-        />
-      </label>
-      <button
-        type="button"
-        className="connect-button"
-        disabled={!key}
-        onClick={() => {
-          if (!key) return;
-          void navigator.clipboard.writeText(key).then(() => {
-            setCopied(true);
-            setTimeout(() => setCopied(false), 1500);
-          });
-        }}
-      >
-        {displayText(locale, copied ? t(locale, "set.copied") : t(locale, "set.copyKey"))}
-      </button>
-      <label className="profile-key-field">
-        <span>{t(locale, "set.importKey")}</span>
-        <textarea
-          rows={3}
-          placeholder={t(locale, "set.importPlaceholder")}
-          value={importText}
-          onChange={(event) => setImportText(event.currentTarget.value)}
-        />
-      </label>
-      <button
-        type="button"
-        className="connect-button"
-        disabled={!importText.trim() || !snapshot.hasActiveDevice}
-        onClick={() => {
-          control.importProfileKey(importText);
-          setImportText("");
-        }}
-      >
-        {t(locale, "set.import")}
-      </button>
-      <small className="setting-description">
-        {t(locale, "set.importNote")}
-      </small>
-    </div>
-  );
-}
-
-export function InterfaceSettings({ snapshot }: { snapshot: ControlSnapshot }): ReactNode {
-  const preferences = snapshot.preferences;
-  const locale = preferences.locale;
-  const set = <K extends keyof typeof preferences>(key: K) => (value: (typeof preferences)[K]): void =>
-    control.setPreference(key, value);
-
-  const switchRow = (
-    id: string,
-    title: string,
-    description: string,
-    checked: boolean,
-    onChange: (next: boolean) => void,
-  ): ReactNode => (
-    <div className="setting-row">
-      <div className="setting-label">
-        <span className="setting-title">{displayText(locale, title)}</span>
-        <span className="setting-description">{displayText(locale, description)}</span>
-      </div>
-      <ToggleSwitch id={id} checked={checked} onChange={onChange} />
-    </div>
-  );
-
-  return (
-    <section
-      id="interface-settings-page"
-      className={`page${snapshot.interfaceSettingsOpen ? " is-open" : ""}`}
-      aria-labelledby="interface-settings-title"
-    >
-      <h1 id="interface-settings-title" className="page-title">
-        {t(locale, "set.title")}
-      </h1>
-
-      <div className="setting-row setting-row-block">
-        <div className="setting-label">
-          <span className="setting-title">{t(locale, "set.profileKey")}</span>
-          <span className="setting-description">{t(locale, "set.profileKeyBody")}</span>
-        </div>
-        <ProfileKeyFields snapshot={snapshot} />
-      </div>
-
-      <div className="setting-row setting-row-block">
-        <div className="setting-label">
-          <span className="setting-title">{t(locale, "set.accentTheme")}</span>
-          <span className="setting-description">{t(locale, "set.accentBody")}</span>
-        </div>
-        <fieldset id="interface-theme" className="theme-preset-picker" aria-label={t(locale, "set.accentTheme")}>
-          {THEME_ORDER.map((name) => (
-            <button
-              key={name}
-              type="button"
-              className={`theme-preset-swatch${preferences.theme === name ? " active" : ""}`}
-              data-theme-preview={interfaceThemeSlug(name)}
-              aria-pressed={preferences.theme === name}
-              onClick={() => control.setInterfaceTheme(name)}
-            >
-              <span className="theme-preset-acc" aria-hidden="true" />
-              <span className="theme-preset-label">{displayText(locale, name)}</span>
-            </button>
-          ))}
-        </fieldset>
-      </div>
-
-      <div className="setting-row">
-        <div className="setting-label">
-          <span className="setting-title">{t(locale, "set.languageTitle")}</span>
-          <span className="setting-description">{t(locale, "set.languageBody")}</span>
-        </div>
-        <Segmented
-          id="interface-locale"
-          ariaLabel={t(locale, "set.languageTitle")}
-          value={preferences.locale}
-          onChange={set("locale")}
-          options={LOCALE_NAME_KEYS.map(([value, nameKey]) => ({ value, label: t(locale, nameKey) }))}
-        />
-      </div>
-
-      {switchRow(
-        "interface-sounds",
-        t(locale, "set.soundTitle"),
-        t(locale, "set.soundDescription"),
-        preferences.enabledSounds,
-        set("enabledSounds"),
-      )}
-
-      {switchRow(
-        "interface-reduced-motion",
-        t(locale, "set.animations"),
-        t(locale, "set.animationsBody"),
-        !preferences.reducedMotion,
-        (next) => set("reducedMotion")(!next),
-      )}
-
-      {switchRow(
-        "interface-instant-flash",
-        t(locale, "set.instantFlash"),
-        t(locale, "set.instantFlashBody"),
-        preferences.instantFlash,
-        set("instantFlash"),
-      )}
-
-      {switchRow(
-        "interface-expand-sections",
-        t(locale, "set.advancedEditors"),
-        t(locale, "set.advancedEditorsBody"),
-        preferences.expandSections,
-        set("expandSections"),
-      )}
-
-      {switchRow(
-        "interface-show-experimental",
-        t(locale, "set.experimentalTitle"),
-        t(locale, "set.experimentalBody"),
-        preferences.showExperimental,
-        set("showExperimental"),
-      )}
-
-      {snapshot.previewEnabled && snapshot.previewEntries.length > 0 ? (
-        <div className="setting-row setting-row-block">
-          <div className="setting-label">
-            <span className="setting-title" id="preview-launcher-title">
-              {t(locale, "set.previewsTitle")}
-            </span>
-            <span className="setting-description">{t(locale, "set.previewsBody")}</span>
-          </div>
-          <div id="preview-launcher-list" className="preview-launcher-list">
-            {snapshot.previewEntries.map(([key, label]) => (
-              <a
-                key={key}
-                className={`preview-launcher-link${snapshot.previewMode === key ? " is-active" : ""}`}
-                href={`?preview=${key}`}
-              >
-                {displayText(locale, label)}
-                <small>{displayText(locale, key)}</small>
-              </a>
-            ))}
-          </div>
-        </div>
-      ) : null}
-
-      <div className="setting-row setting-row-block">
-        <div className="setting-label">
-          <span className="setting-title">{t(locale, "set.supportTitle")}</span>
-          <span className="setting-description">{t(locale, "set.supportBody")}</span>
-        </div>
-        <div className="settings-support">
-          <a className="app-donate" href="https://openmouse.app/supported" target="_blank" rel="noreferrer">
-            <span className="app-donate-icon">
-              <svg viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
-            </span>
-            <span className="app-donate-text">{t(locale, "nav.supported")}</span>
-            <span className="app-donate-heart">
-              <svg viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="m9 6 6 6-6 6" transform="rotate(180 12 12)"/></svg>
-            </span>
-          </a>
-          <a className="app-donate" href="https://openmouse.app/donate.html" target="_blank" rel="noreferrer">
-            <span className="app-donate-icon">
-              <svg viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M17.5 6H16V5.5A1.5 1.5 0 0 0 14.5 4h-9A1.5 1.5 0 0 0 4 5.5V11c0 3.31 2.69 6 6 6h2c3.31 0 6-2.69 6-6v-.5h1a2.5 2.5 0 0 0 0-5h-1.5zm0 3.5h-1V7h1a1 1 0 0 1 0 2zM7.5 13.5V7h9v4.5c0 2.48-2.02 4.5-4.5 4.5h-2c-2.48 0-4.5-2.02-4.5-4.5zM6 19a1 1 0 0 1 1-1h10a1 1 0 0 1 0 2H7a1 1 0 0 1-1-1z"/></svg>
-            </span>
-            <span className="app-donate-text">{t(locale, "nav.supportProject")}</span>
-            <span className="app-donate-heart">
-              <svg viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
-            </span>
-          </a>
-          <span className="app-footer-socials">
-            <a href={DISCORD_URL} target="_blank" rel="noreferrer" title={displayText(locale, "OpenMouse on Discord")} aria-label={displayText(locale, "OpenMouse on Discord")}><DiscordIcon /></a>
-            <a href={TWITTER_URL} target="_blank" rel="noreferrer" title={displayText(locale, "OpenMouse on X")} aria-label={displayText(locale, "OpenMouse on X")}><TwitterIcon /></a>
-            <a href={GITHUB_URL} target="_blank" rel="noreferrer" title={displayText(locale, "OpenMouse on GitHub")} aria-label={displayText(locale, "OpenMouse on GitHub")}><GitHubIcon /></a>
-          </span>
-        </div>
-      </div>
-
-      <button
-        id="reset-interface-settings"
-        className="rescan-button rescan-button-standalone"
-        type="button"
-        onClick={control.resetInterfacePreferences}
-      >
-        {t(locale, "set.reset")}
-      </button>
-    </section>
-  );
-}
diff --git a/src/app/LaunchCountdown.tsx b/src/app/LaunchCountdown.tsx
deleted file mode 100644
index cc956112..00000000
--- a/src/app/LaunchCountdown.tsx
+++ /dev/null
@@ -1,144 +0,0 @@
-import { displayText } from "../i18n";
-import { useUiLocale } from "./ui-locale";
-import { useEffect, useMemo, useState, type ReactNode } from "react";
-import {
-  isBeforeLaunch,
-  millisecondsUntilLaunch,
-} from "../launch";
-import {
-  DISCORD_URL,
-  DiscordIcon,
-  formatCount,
-  GITHUB_URL,
-  GitHubIcon,
-  StarIcon,
-  TWITTER_URL,
-  TwitterIcon,
-  useGitHubStars,
-} from "./social-links";
-
-function LaunchSocials(): ReactNode {
-  const __uiLocale = useUiLocale();
-  const stars = useGitHubStars();
-
-  return (
-    <footer className="launch-socials">
-      <a href={DISCORD_URL} target="_blank" rel="noreferrer" title={displayText(__uiLocale, "Discord")} aria-label={displayText(__uiLocale, "OpenMouse on Discord")}>
-        <DiscordIcon />
-      </a>
-      <a href={TWITTER_URL} target="_blank" rel="noreferrer" title={displayText(__uiLocale, "Twitter")} aria-label={displayText(__uiLocale, "OpenMouse on Twitter")}>
-        <TwitterIcon />
-      </a>
-      <a
-        className="launch-social-stars"
-        href={GITHUB_URL}
-        target="_blank"
-        rel="noreferrer"
-        title={displayText(__uiLocale, "GitHub")}
-        aria-label={displayText(__uiLocale, "OpenMouse on GitHub")}
-      >
-        <GitHubIcon />
-        {stars !== null && (
-          <span className="launch-star-count">
-            <StarIcon />
-            {displayText(__uiLocale, formatCount(stars))}
-          </span>
-        )}
-      </a>
-    </footer>
-  );
-}
-
-interface Remaining {
-  days: number;
-  hours: number;
-  minutes: number;
-  seconds: number;
-}
-
-function split(ms: number): Remaining {
-  const total = Math.floor(Math.max(0, ms) / 1000);
-  return {
-    days: Math.floor(total / 86400),
-    hours: Math.floor((total % 86400) / 3600),
-    minutes: Math.floor((total % 3600) / 60),
-    seconds: total % 60,
-  };
-}
-
-const pad = (n: number): string => String(n).padStart(2, "0");
-
-function Digit({ value, label }: { value: number; label: string }): ReactNode {
-  const __uiLocale = useUiLocale();
-  return (
-    <div className="launch-digit" aria-label={displayText(__uiLocale, `${value} ${label}`)}>
-      <span className="launch-digit-value" aria-hidden="true">{displayText(__uiLocale, pad(value))}</span>
-      <span className="launch-digit-label">{displayText(__uiLocale, label)}</span>
-    </div>
-  );
-}
-
-function LaunchStage({ children }: { children: ReactNode }): ReactNode {
-  const __uiLocale = useUiLocale();
-  return (
-    <>
-      <div className="launch-stage">
-        <div className="launch-brand">
-          <img src="/logo.png" alt={displayText(__uiLocale, "")} width={28} height={41} />
-          OpenMouse
-        </div>
-        {children}
-      </div>
-      <LaunchSocials />
-    </>
-  );
-}
-
-export function LaunchCountdown(): ReactNode {
-  const __uiLocale = useUiLocale();
-  const [now, setNow] = useState<number>(() => Date.now());
-  const [celebrating, setCelebrating] = useState(false);
-
-  useEffect(() => {
-    const id = window.setInterval(() => {
-      const current = Date.now();
-      setNow(current);
-      if (!isBeforeLaunch(current)) setCelebrating(true);
-    }, 1000);
-    return () => window.clearInterval(id);
-  }, []);
-
-  const remaining = useMemo(() => split(millisecondsUntilLaunch(now)), [now]);
-
-  if (celebrating) {
-    return (
-      <LaunchStage>
-        <section className="launch-hero is-go" aria-live="polite">
-          <h1 className="launch-title">{displayText(__uiLocale, "Early Access is live.")}</h1>
-          <p className="launch-lead"> {displayText(__uiLocale, "OpenMouse Beta 1.0 is now available. Configure your mouse and get started.")} </p>
-          <a className="launch-cta" href="/">{displayText(__uiLocale, "Enter the app")}</a>
-        </section>
-      </LaunchStage>
-    );
-  }
-
-  return (
-    <LaunchStage>
-      <section className="launch-hero" aria-live="polite">
-        <h1 className="launch-title">{displayText(__uiLocale, "Early Access launches soon.")}</h1>
-
-        <div className="launch-timer" role="timer" aria-label={displayText(__uiLocale, "Time until launch")}>
-          <Digit value={remaining.days} label={displayText(__uiLocale, "Days")} />
-          <span className="launch-colon" aria-hidden="true">:</span>
-          <Digit value={remaining.hours} label={displayText(__uiLocale, "Hours")} />
-          <span className="launch-colon" aria-hidden="true">:</span>
-          <Digit value={remaining.minutes} label={displayText(__uiLocale, "Minutes")} />
-          <span className="launch-colon" aria-hidden="true">:</span>
-          <Digit value={remaining.seconds} label={displayText(__uiLocale, "Seconds")} />
-        </div>
-
-        <p className="launch-lead"> {displayText(__uiLocale, "A free, open source mouse configurator — no vendor software.")} </p>
-      </section>
-    </LaunchStage>
-  );
-}
diff --git a/src/app/PendingBar.tsx b/src/app/PendingBar.tsx
index bcfd6059..bedb0e1d 100644
--- a/src/app/PendingBar.tsx
+++ b/src/app/PendingBar.tsx
@@ -1,8 +1,9 @@
-import { displayText } from "../i18n";
+import { displayText } from "../i18n/index";
+import { PenLine } from "lucide-react";
 import type { ReactNode } from "react";
 import * as control from "../device/controller";
 import type { ControlSnapshot } from "../device/types";
-import { t } from "../i18n";
+import { t } from "../i18n/index";
 
 export function PendingBar({ snapshot }: { snapshot: ControlSnapshot }): ReactNode {
   const { pending } = snapshot;
@@ -20,10 +21,7 @@ export function PendingBar({ snapshot }: { snapshot: ControlSnapshot }): ReactNo
       aria-label={t(locale, "pend.region")}
     >
       <span className="apply-bar-label">
-        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
-          <path d="M12 3 2.5 20h19L12 3Z" />
-          <path d="M12 9.5v4M12 16.8v.2" />
-        </svg>
+        <PenLine strokeWidth={1.8} aria-hidden="true" />
         {displayText(locale, label)}
         {pending.labels.length > 0 ? <em className="apply-bar-summary">{displayText(locale, pending.labels.join(" · "))}</em> : null}
       </span>
diff --git a/src/app/Toasts.tsx b/src/app/Toasts.tsx
index 56a5c924..893de4c1 100644
--- a/src/app/Toasts.tsx
+++ b/src/app/Toasts.tsx
@@ -1,10 +1,10 @@
-import { displayText } from "../i18n";
+import { displayText } from "../i18n/index";
 import { useEffect, useRef, type ReactNode } from "react";
 import * as control from "../device/controller";
 import type { Toast } from "../device/types";
-import type { InterfaceLocale } from "../interface-preferences";
-import { t } from "../i18n";
-import { playToastSound } from "../sound-manager";
+import type { InterfaceLocale } from "../features/settings/interface-preferences";
+import { t } from "../i18n/index";
+import { playToastSound } from "../platform/sound-manager";
 
 const TOAST_ICON: Record<Toast["kind"], ReactNode> = {
   success: <path d="M20 6 9 17l-5-5" />,
diff --git a/src/app/UnsupportedNotice.tsx b/src/app/UnsupportedNotice.tsx
index 54d20c1b..1c4a1955 100644
--- a/src/app/UnsupportedNotice.tsx
+++ b/src/app/UnsupportedNotice.tsx
@@ -1,12 +1,13 @@
-import { displayText } from "../i18n";
-import { useUiLocale } from "./ui-locale";
+import { displayText } from "../i18n/index";
+import { useUiLocale } from "../shared/ui-locale";
 import type { ReactNode } from "react";
-import type { UnsupportedNotice as Notice } from "../browser-support";
+import type { UnsupportedNotice as Notice } from "../platform/browser-support";
 
 export function UnsupportedNotice({ notice }: { notice: Notice }): ReactNode {
   const __uiLocale = useUiLocale();
   return (
     <section className="small-screen-blocker">
+      <img className="standalone-brand" src="/logo.png" alt="" width={28} height={42} />
       <h1>{displayText(__uiLocale, notice.headline)}</h1>
       <p>{displayText(__uiLocale, notice.detail)}</p>
     </section>
diff --git a/src/app/cards/teevolution/profile-card.css b/src/app/cards/teevolution/profile-card.css
deleted file mode 100644
index 1a7080db..00000000
--- a/src/app/cards/teevolution/profile-card.css
+++ /dev/null
@@ -1,14 +0,0 @@
-/* Same panel slot as #logitech-onboard: full-width, not a 2-col setting-card. */
-#teevolution-onboard { order: 5; }
-
-#teevolution-profile-list {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr);
-  gap: .3rem;
-  padding-bottom: .5rem;
-}
-
-#teevolution-profile-list > * {
-  min-width: 0;
-  box-sizing: border-box;
-}
diff --git a/src/app/page-locale.tsx b/src/app/page-locale.tsx
deleted file mode 100644
index 5078d317..00000000
--- a/src/app/page-locale.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-import { useEffect, useState, type ReactNode } from "react";
-import {
-  detectLocale,
-  loadInterfacePreferences,
-  saveInterfacePreferences,
-  type InterfaceLocale,
-} from "../interface-preferences";
-import { ensureLocale, LOCALE_NAME_KEYS, t } from "../i18n";
-
-/** BCP-47 tag for the <html lang> attribute; only locales whose region
-    matters for correct rendering need an entry here (others fall through
-    to the bare code). */
-const HTML_LANG: Partial<Record<InterfaceLocale, string>> = {
-  pt: "pt-BR",
-  zh: "zh-Hans",
-};
-
-/** Standalone-page locale state. Reads the shared interface preference (so a
-    choice made in the control app carries over), falls back to the browser
-    language on first run, and persists back to the same key. */
-export function usePageLocale(): [InterfaceLocale, (next: InterfaceLocale) => void] {
-  const [locale, setLocaleState] = useState<InterfaceLocale>(() => {
-    try {
-      return loadInterfacePreferences(window.localStorage).locale;
-    } catch {
-      return detectLocale();
-    }
-  });
-  const setLocale = (next: InterfaceLocale): void => {
-    // Resolve the table before committing so the switch never flashes
-    // English fallback strings.
-    const apply = (): void => {
-      setLocaleState(next);
-      try {
-        const prefs = loadInterfacePreferences(window.localStorage);
-        saveInterfacePreferences(window.localStorage, { ...prefs, locale: next });
-      } catch {
-        /* storage unavailable (private mode) — in-memory choice still applies */
-      }
-    };
-    if (next === "en") apply();
-    else void ensureLocale(next).then(apply);
-  };
-  // A stored non-English locale resolves after first paint; bump a tick to
-  // swap the fallback strings once the table arrives.
-  const [, setTick] = useState(0);
-  useEffect(() => {
-    try {
-      document.documentElement.lang = HTML_LANG[locale] ?? locale;
-    } catch {
-      /* non-DOM environment (tests) */
-    }
-    if (locale !== "en") void ensureLocale(locale).then(() => setTick((n) => n + 1));
-  }, [locale]);
-  return [locale, setLocale];
-}
-
-/** Language dropdown for standalone pages (landing, supported, donate, …).
-    A <select> scales to any number of locales without layout rework —
-    self-styled with the "page-locale-select" class so it inherits the
-    site's own tokens; see landing.css. */
-export function PageLocaleToggle({
-  locale,
-  onChange,
-}: {
-  locale: InterfaceLocale;
-  onChange: (next: InterfaceLocale) => void;
-}): ReactNode {
-  return (
-    <select
-      className="page-locale-select"
-      aria-label={t(locale, "page.locale")}
-      value={locale}
-      onChange={(event) => onChange(event.currentTarget.value as InterfaceLocale)}
-    >
-      {LOCALE_NAME_KEYS.map(([option, nameKey]) => (
-        <option key={option} value={option}>{t(locale, nameKey)}</option>
-      ))}
-    </select>
-  );
-}
diff --git a/src/click-sound.ts b/src/click-sound.ts
deleted file mode 100644
index b5a12a1c..00000000
--- a/src/click-sound.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { setSoundsEnabled } from "./sound-manager";
-
-export function initClickSound(): void {
-  setSoundsEnabled(true);
-}
-
-export function removeClickSound(): void {
-  setSoundsEnabled(false);
-}
\ No newline at end of file
diff --git a/src/control-devices.css b/src/control-devices.css
deleted file mode 100644
index a0a41ad3..00000000
--- a/src/control-devices.css
+++ /dev/null
@@ -1,196 +0,0 @@
-#pulsar-advanced { margin-top: .65rem; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: .65rem; padding-bottom: .4rem; }
-
-#pulsar-advanced > .setting-card { min-height: 0; padding: .8rem; }
-#pulsar-advanced input[type="number"], #pulsar-advanced select, #debounce-settings select { width: 100%; box-sizing: border-box; margin-top: .2rem; padding: .48rem .55rem; border: 1px solid var(--line-strong); border-radius: 6px; outline: none; background: var(--surface-input); color: var(--text-input); font: inherit; color-scheme: dark; }
-#pulsar-advanced input[type="number"]:focus, #pulsar-advanced select:focus, #debounce-settings select:focus { border-color: var(--faint); box-shadow: 0 0 0 2px rgb(255 255 255 / 4%); }
-#pulsar-advanced input:disabled, #pulsar-advanced select:disabled, #debounce-settings select:disabled { cursor: not-allowed; opacity: .45; }
-#pulsar-advanced input[type="checkbox"] { width: .85rem; height: .85rem; margin: 0; accent-color: var(--ui-accent); }
-#pulsar-advanced .sleep-time-picker { display: flex; align-items: start; gap: .35rem; margin-top: .35rem; }
-#pulsar-advanced .sleep-time-picker label { display: grid; gap: .2rem; min-width: 0; flex: 1 1 0; color: var(--faint); font-size: .58rem; text-align: center; }
-#pulsar-advanced .sleep-time-picker input[type="number"] { width: 100%; margin-top: 0; padding: .48rem .35rem; text-align: center; font-variant-numeric: tabular-nums; appearance: textfield; -moz-appearance: textfield; }
-#pulsar-advanced .sleep-time-picker input[type="number"]::-webkit-outer-spin-button,
-#pulsar-advanced .sleep-time-picker input[type="number"]::-webkit-inner-spin-button { margin: 0; appearance: none; }
-#pulsar-advanced .sleep-time-sep { flex: 0 0 auto; padding-top: .48rem; color: var(--muted); font-size: .9rem; line-height: 1.2; }
-
-#teevolution-dpi-lighting select { width: 100%; box-sizing: border-box; margin-top: .2rem; padding: .48rem .55rem; border: 1px solid var(--line-strong); border-radius: 6px; outline: none; background: var(--surface-input); color: var(--text-input); font: inherit; color-scheme: dark; }
-#teevolution-dpi-lighting select:focus { border-color: var(--faint); box-shadow: 0 0 0 2px rgb(255 255 255 / 4%); }
-#teevolution-dpi-lighting select:disabled, #teevolution-dpi-lighting input:disabled { cursor: not-allowed; opacity: .45; }
-
-#pulsar-advanced.egg-advanced-layout { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: .55rem !important; }
-#pulsar-advanced.egg-advanced-layout > .setting-card { min-height: 0 !important; padding: .72rem !important; }
-#egg-polling-settings, #egg-cpi-settings, #egg-button-settings { grid-column: 1 / -1; }
-#egg-cpi-stage-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; margin-top: .55rem; }
-#egg-button-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5rem; }
-#egg-cpi-stage-list > div, #egg-button-list > div { min-width: 0; padding: .55rem; border: 1px solid var(--border); border-radius: 6px; }
-#egg-cpi-stage-list strong, #egg-button-list strong { font-size: .7rem; }
-#egg-cpi-settings .field-label { max-width: 160px; }
-.egg-tile-pair { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; }
-.egg-tile-label.stacked { display: block; margin-top: .35rem; }
-.egg-tile-label { color: var(--faint); font-size: .58rem; }
-.egg-tile-field { width: 100%; box-sizing: border-box; margin-top: .15rem; padding: .35rem; border: 1px solid var(--line-strong); border-radius: 5px; background: var(--surface-input); color: var(--text-input); }
-.egg-split-toggle { display: flex; align-items: center; gap: .35rem; margin: .4rem 0; color: var(--text-soft); font-size: .62rem; }
-
-#logitech-device-details { flex: 0 0 auto; margin-top: .65rem; }
-#logitech-device-details .setting-card { min-height: 0; }
-#logitech-detail-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .55rem; }
-:is(#logitech-analog-button-settings, #magnetic-button-settings) { flex: 0 0 auto; margin-top: .65rem; }
-:is(#logitech-analog-button-settings, #magnetic-button-settings, #logitech-button-map, #bunny-hop-card) .superstrike-tuning-card { min-height: 0; padding: 1rem; border-color: color-mix(in srgb, var(--ui-accent) 20%, var(--border)); background: linear-gradient(135deg, color-mix(in srgb, var(--ui-accent) 5%, var(--surface-menu)), var(--surface-panel-strong) 62%); }
-:is(#logitech-analog-button-settings, #magnetic-button-settings, #logitech-button-map, #bunny-hop-card) .superstrike-tuning-heading { margin-bottom: .2rem; }
-:is(#logitech-analog-button-settings, #magnetic-button-settings) .superstrike-tuning-description { max-width: 540px; margin: .1rem 0 0; color: var(--text-soft); line-height: 1.45; }
-:is(#logitech-analog-button-settings, #magnetic-button-settings) .superstrike-tabs { display: inline-flex; gap: .2rem; margin-top: .7rem; padding: .2rem; border: 1px solid var(--border); border-radius: 7px; background: var(--well); }
-:is(#logitech-analog-button-settings, #magnetic-button-settings) .superstrike-tabs button { padding: .32rem .52rem; border: 0; border-radius: 5px; background: transparent; color: var(--muted); font-size: .58rem; font-weight: 700; }
-:is(#logitech-analog-button-settings, #magnetic-button-settings) .superstrike-tabs button[aria-selected="true"] { background: var(--ui-accent-soft); color: var(--ui-accent); }
-:is(#logitech-analog-button-settings, #magnetic-button-settings) .superstrike-tuning-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; margin-top: 1rem; }
-:is(#logitech-analog-button-settings, #magnetic-button-settings) fieldset.superstrike-both-panel { display: none; margin-top: 1rem; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; }
-:is(#logitech-analog-button-settings, #magnetic-button-settings) fieldset.superstrike-both-panel legend { display: none; }
-:is(#logitech-analog-button-settings, #magnetic-button-settings) fieldset.superstrike-both-panel::before { display: block; margin: 0 0 .55rem; color: var(--text-strong); font-size: .68rem; font-weight: 700; content: "●  Both primary buttons"; }
-:is(#logitech-analog-button-settings, #magnetic-button-settings) .superstrike-tuning-panels[data-superstrike-mode="both"] .superstrike-independent-panel { display: none; }
-:is(#logitech-analog-button-settings, #magnetic-button-settings) .superstrike-tuning-panels[data-superstrike-mode="both"] .superstrike-both-panel { display: block; }
-:is(#logitech-analog-button-settings, #magnetic-button-settings) .superstrike-both-panel > p { margin: 0 0 .65rem; color: var(--muted); font-size: .61rem; line-height: 1.4; }
-:is(#logitech-analog-button-settings, #magnetic-button-settings) .superstrike-button-card { min-width: 0; margin: 0; padding: .78rem; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-superstrike); }
-:is(#logitech-analog-button-settings, #magnetic-button-settings) .superstrike-button-card legend { display: flex; align-items: center; gap: .38rem; padding: 0 .1rem; color: var(--text-strong); font-size: .68rem; font-weight: 700; }
-:is(#logitech-analog-button-settings, #magnetic-button-settings) .superstrike-button-dot { width: .42rem; height: .42rem; border-radius: 50%; background: var(--ui-accent); box-shadow: 0 0 0 3px var(--ui-accent-soft); }
-:is(#logitech-analog-button-settings, #magnetic-button-settings) .superstrike-control-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(10rem, 1.15fr); align-items: center; gap: .9rem; padding: .58rem 0; border-bottom: 1px solid var(--line); }
-:is(#logitech-analog-button-settings, #magnetic-button-settings) .superstrike-control-row:first-of-type { margin-top: .22rem; }
-:is(#logitech-analog-button-settings, #magnetic-button-settings) .superstrike-control-row label { min-width: 0; color: var(--text-strong); font-size: .65rem; font-weight: 600; }
-:is(#logitech-analog-button-settings, #magnetic-button-settings) .superstrike-control-row label small { display: block; margin-top: .12rem; color: var(--faint); font-size: .52rem; font-weight: 500; }
-:is(#logitech-analog-button-settings, #magnetic-button-settings) .superstrike-control-row label small span::before { content: " · "; }
-:is(#logitech-analog-button-settings, #magnetic-button-settings) .superstrike-steps input { display: none; }
-:is(#logitech-analog-button-settings, #magnetic-button-settings) .superstrike-steps > div { display: grid; grid-template-columns: repeat(auto-fit, minmax(1.45rem, 1fr)); gap: .22rem; }
-:is(#logitech-analog-button-settings, #magnetic-button-settings) .superstrike-steps button { min-width: 0; padding: .34rem .12rem; border: 1px solid var(--border); border-radius: 5px; background: var(--input); color: var(--text-soft); font: 650 .59rem var(--font-mono); }
-:is(#logitech-analog-button-settings, #magnetic-button-settings) .superstrike-steps button:hover { border-color: var(--ghost); color: var(--text-hover); }
-:is(#logitech-analog-button-settings, #magnetic-button-settings) .superstrike-steps button:disabled { opacity: .4; cursor: not-allowed; }
-:is(#logitech-analog-button-settings, #magnetic-button-settings) .superstrike-rapid-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; min-width: 0; }
-:is(#logitech-analog-button-settings, #magnetic-button-settings) .superstrike-rapid-controls .superstrike-switch { flex: 0 0 auto; }
-:is(#logitech-analog-button-settings, #magnetic-button-settings) .superstrike-rapid-controls .superstrike-switch > div { grid-template-columns: repeat(2, 2.7rem); }
-:is(#logitech-analog-button-settings, #magnetic-button-settings) .superstrike-rapid-controls > .superstrike-steps:not(.superstrike-switch) { flex: 1 1 8rem; min-width: 0; }
-:is(#logitech-analog-button-settings, #magnetic-button-settings) .superstrike-steps button[aria-pressed="true"] { border-color: var(--ui-accent); background: var(--ui-accent); color: var(--ui-accent-ink); }
-:is(#logitech-analog-button-settings, #magnetic-button-settings) .superstrike-apply-button { width: 100%; margin-top: .7rem; padding: .48rem .62rem; border: 1px solid color-mix(in srgb, var(--ui-accent) 62%, var(--border)); border-radius: 6px; background: var(--ui-accent-soft); color: var(--ui-accent); font-size: .62rem; font-weight: 750; transition: border-color .18s ease, background .18s ease, transform .18s ease; }
-:is(#logitech-analog-button-settings, #magnetic-button-settings) .superstrike-apply-button:hover { border-color: var(--ui-accent); background: var(--ui-accent); color: var(--ui-accent-ink); transform: translateY(-1px); }
-:is(#logitech-analog-button-settings, #magnetic-button-settings) .superstrike-apply-button:disabled,
-:is(#logitech-analog-button-settings, #magnetic-button-settings) .superstrike-control-row input:disabled { cursor: wait; opacity: .5; }
-
-#device-debug-details { flex: 0 0 auto; margin-top: .65rem; }
-.device-debug-card { min-height: 0 !important; }
-.device-debug-overview { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: .5rem; }
-.device-debug-overview > div { min-width: 0; padding: .55rem; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-menu); }
-.device-debug-overview small { display: block; margin-bottom: .24rem; color: var(--faint); font-size: .52rem; letter-spacing: .08em; }
-.device-debug-overview span { display: block; color: var(--text-strong); font: 600 .67rem/1.45 var(--font-mono); overflow-wrap: anywhere; }
-.device-debug-actions { display: flex; align-items: center; gap: .55rem; margin-top: .7rem; }
-.device-debug-actions button { padding: .42rem .62rem; border: 1px solid var(--ui-accent); border-radius: 6px; background: var(--ui-accent); color: var(--ui-accent-ink); font-size: .62rem; font-weight: 700; }
-.device-debug-actions button:disabled { cursor: default; opacity: .45; }
-.device-debug-actions span { color: var(--text-soft); font-size: .62rem; }
-.device-debug-raw { margin-top: .7rem; border: 1px solid var(--line); border-radius: 7px; background: var(--well); }
-.device-debug-raw summary { padding: .55rem .65rem; cursor: pointer; color: var(--dim); font-size: .65rem; font-weight: 650; }
-.device-debug-raw .device-debug-snapshot { border: 0; border-top: 1px solid var(--line); border-radius: 0; }
-.device-debug-snapshot { max-height: 26rem; margin: 0; padding: .8rem; overflow: auto; border: 1px solid var(--line); border-radius: 7px; background: var(--well); color: var(--text-strong); font: .64rem/1.55 var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere; user-select: text; }
-
-.testing-note { display: flex; align-items: flex-start; gap: .75rem; margin-top: .55rem; padding: .65rem .8rem; border: 1px solid color-mix(in srgb, var(--warning) 34%, var(--surface-panel)); border-radius: 8px; background: color-mix(in srgb, var(--warning) 8%, var(--surface-panel)); color: color-mix(in srgb, var(--warning) 62%, var(--text-soft)); font-size: .65rem; line-height: 1.45; }
-.testing-note strong { flex: 0 0 auto; color: color-mix(in srgb, var(--warning) 78%, var(--text-hover)); font-family: var(--font-mono); font-size: .57rem; letter-spacing: .08em; text-transform: uppercase; }
-.testing-note span { max-width: 780px; }
-
-@media (max-width: 1100px) {
-  #egg-cpi-stage-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
-  #egg-button-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
-}
-
-#logitech-analog-button-settings .superstrike-presets { display: grid; grid-template-columns: repeat(auto-fit, minmax(5.6rem, 1fr)); align-items: stretch; gap: .5rem; margin: .2rem 0 1rem; padding: .75rem; border: 1px solid var(--border); border-radius: 10px; background: var(--well); }
-#logitech-analog-button-settings .superstrike-presets select { grid-column: 1 / -1; width: 100%; padding: .55rem .7rem; border: 1px solid var(--border); border-radius: 8px; background: var(--input); color: var(--text); font: 650 .72rem var(--font-mono); }
-#logitech-analog-button-settings .superstrike-presets .icon-button { display: flex; align-items: center; justify-content: center; min-height: 2.1rem; padding: .45rem .7rem; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-raised); color: var(--text); font-size: .68rem; font-weight: 650; white-space: nowrap; }
-#logitech-analog-button-settings .superstrike-presets .icon-button:hover:not(:disabled) { border-color: var(--ui-accent); color: var(--ui-accent); }
-#logitech-analog-button-settings .superstrike-presets .icon-button:disabled { opacity: .45; cursor: not-allowed; }
-#logitech-analog-button-settings .superstrike-presets-note { grid-column: 1 / -1; color: var(--faint); font-size: .64rem; }
-:is(#logitech-analog-button-settings, #magnetic-button-settings) .superstrike-press-meters { display: grid; gap: .35rem; margin: .2rem 0 .8rem; }
-:is(#logitech-analog-button-settings, #magnetic-button-settings) .superstrike-press-meter { display: grid; grid-template-columns: 2.6rem 1fr; align-items: center; gap: .6rem; font: 650 .62rem var(--font-mono); color: var(--text-soft); }
-:is(#logitech-analog-button-settings, #magnetic-button-settings) .superstrike-press-meter > div { display: grid; grid-template-columns: repeat(10, 1fr); gap: .2rem; }
-:is(#logitech-analog-button-settings, #magnetic-button-settings) .superstrike-press-meter i { height: .55rem; border-radius: 2px; background: var(--input); border: 1px solid var(--border); }
-:is(#logitech-analog-button-settings, #magnetic-button-settings) .superstrike-press-meter i[data-on="true"] { background: var(--accent, #2f8cff); border-color: transparent; }
-:is(#logitech-analog-button-settings, #magnetic-button-settings) .superstrike-press-meter i[data-actuation="true"] { border-color: var(--warning); border-width: 2px; }
-:is(#logitech-analog-button-settings, #magnetic-button-settings) .superstrike-press-meter i[data-actuation="true"][data-on="true"] { background: var(--warning); }
-
-:is(#logitech-analog-button-settings, #magnetic-button-settings) .magnetic-note { margin: .6rem 0 0; color: var(--muted); font-size: .58rem; line-height: 1.4; }
-#magnetic-button-settings .magnetic-calibration { margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--line-strong); }
-#magnetic-button-settings .magnetic-calibration-head { display: flex; align-items: center; justify-content: space-between; gap: .9rem; }
-#magnetic-button-settings .magnetic-calibration-head strong { color: var(--text-strong); font-size: .68rem; }
-#magnetic-button-settings .magnetic-calibration-head p { margin: .15rem 0 0; color: var(--muted); font-size: .58rem; line-height: 1.4; }
-#magnetic-button-settings .magnetic-calibration-head .superstrike-apply-button { width: auto; margin: 0; white-space: nowrap; }
-#magnetic-button-settings .magnetic-calibration-progress { margin-top: .7rem; padding: .7rem; border-radius: 8px; background: var(--well); }
-#magnetic-button-settings .magnetic-calibration-progress p { margin: 0 0 .5rem; color: var(--text-soft); font-size: .62rem; white-space: pre-line; }
-#magnetic-button-settings .magnetic-calibration-progress[data-phase="done"] p { color: var(--ui-accent); }
-#magnetic-button-settings .magnetic-calibration-progress[data-phase="failed"] p { color: var(--warning); }
-#logitech-button-map .button-map-body { display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: .8rem; align-items: start; margin-top:  0; }
-#logitech-button-map .button-map-commands { display: grid; gap: .35rem; align-content: start; }
-#logitech-button-map .button-map-list { display: grid; gap: .35rem; flex: 1; min-height: 0; overflow-y: auto; align-content: start; padding-right: .25rem; }
-#logitech-button-map .button-map-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
-#logitech-button-map .button-map-status { display: flex; align-items: center; gap: .55rem; color: var(--faint); font: 600 .66rem var(--font-mono); }
-#logitech-button-map .button-map-status strong { color: var(--text-soft); font-weight: 650; }
-#logitech-button-map .button-map-status span { display: inline-flex; align-items: center; gap: .3rem; }
-#logitech-button-map .button-map-status span + span::before { content: none; }
-#logitech-button-map .button-map-list { overscroll-behavior: contain; }
-#logitech-button-map .button-map-list::-webkit-scrollbar { width: 8px; }
-#logitech-button-map .button-map-list::-webkit-scrollbar-track { background: transparent; }
-#logitech-button-map .button-map-list::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
-#logitech-button-map .button-map-list::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 8px; background: var(--border-hover); background-clip: padding-box; }
-#logitech-button-map .button-map-list::-webkit-scrollbar-thumb:hover { background: var(--ghost); background-clip: padding-box; }
-@supports not selector(::-webkit-scrollbar) {
-  #logitech-button-map .button-map-list { scrollbar-width: thin; scrollbar-color: var(--border-hover) transparent; }
-}
-#logitech-button-map .button-map-search { width: 100%; box-sizing: border-box; padding: .4rem .55rem; border: 1px solid var(--border); border-radius: 7px; background: var(--input); color: var(--text); font: 650 .66rem var(--font-mono); }
-#logitech-button-map .button-map-help { color: var(--faint); font-size: .62rem; line-height: 1.4; }
-#logitech-button-map .button-map-section { display: grid; gap: .15rem; margin-top: .4rem; }
-#logitech-button-map .button-map-section h3 { margin: 0 0 .15rem; color: var(--faint); font: 650 .56rem var(--font-mono); letter-spacing: .09em; text-transform: uppercase; }
-#logitech-button-map .button-map-command { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; width: 100%; padding: .34rem .5rem; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-raised); color: var(--text-soft); font: 600 .66rem var(--font-ui, inherit); text-align: left; cursor: pointer; }
-#logitech-button-map .button-map-command small { color: var(--faint); font: 600 .56rem var(--font-mono); white-space: nowrap; }
-#logitech-button-map .button-map-command:hover:not(:disabled) { border-color: var(--ghost); color: var(--text); }
-#logitech-button-map .button-map-command[aria-pressed="true"] { border-color: var(--ui-accent); color: var(--ui-accent); }
-#logitech-button-map .button-map-command:disabled { opacity: .45; cursor: not-allowed; }
-#logitech-button-map .button-map-stage { display: grid; gap: .5rem; justify-items: center; min-width: 0; }
-#logitech-button-map .button-map-canvas { --map-h: clamp(14rem, 46vh, 30rem); position: relative; width: 100%; max-width: 44rem; height: var(--map-h); }
-#logitech-button-map .button-map-art { position: absolute; top: 0; left: 50%; height: 100%; width: calc(var(--map-h) * var(--aspect)); transform: translateX(-50%); object-fit: contain; pointer-events: none; }
-#logitech-button-map .button-map-spot { --dotx: calc(50% + (var(--sx) - 0.5) * var(--map-h) * var(--aspect)); --label-w: 9rem; position: absolute; inset: 0; pointer-events: none; }
-#logitech-button-map .button-map-dot { position: absolute; left: var(--dotx); top: calc(var(--sy) * 100%); width: .95rem; height: .95rem; transform: translate(-50%, -50%); border: 2px solid var(--text); border-radius: 50%; background: var(--surface-raised); cursor: pointer; pointer-events: auto; padding: 0; }
-#logitech-button-map .button-map-spot.is-selected .button-map-dot { background: var(--ui-accent); border-color: var(--ui-accent); }
-#logitech-button-map .button-map-label { position: absolute; display: grid; gap: 0; width: var(--label-w); padding: .08rem .3rem; border: 0; background: none; color: var(--text); font-size: .68rem; line-height: 1.25; cursor: pointer; pointer-events: auto; }
-#logitech-button-map .button-map-label strong { font-weight: 650; }
-#logitech-button-map .button-map-label span { color: var(--faint); font: 600 .6rem var(--font-mono); overflow-wrap: anywhere; }
-#logitech-button-map .button-map-spot.is-selected .button-map-label span { color: var(--ui-accent); }
-#logitech-button-map .button-map-spot.is-locked .button-map-label span::after { content: " · locked"; }
-#logitech-button-map .button-map-line { position: absolute; background: var(--line-strong); }
-#logitech-button-map .button-map-spot.is-left .button-map-label { left: 0; top: calc(var(--sy) * 100%); transform: translateY(-50%); text-align: right; }
-#logitech-button-map .button-map-spot.is-left .button-map-line { left: var(--label-w); top: calc(var(--sy) * 100%); height: 1px; width: calc(var(--dotx) - var(--label-w)); }
-#logitech-button-map .button-map-spot.is-right .button-map-label { right: 0; top: calc(var(--sy) * 100%); transform: translateY(-50%); text-align: left; }
-#logitech-button-map .button-map-spot.is-right .button-map-line { left: var(--dotx); top: calc(var(--sy) * 100%); height: 1px; width: calc(100% - var(--dotx) - var(--label-w)); }
-#logitech-button-map .button-map-spot.is-top .button-map-label { left: var(--dotx); top: 0; transform: translateX(-50%); text-align: center; }
-#logitech-button-map .button-map-spot.is-top .button-map-line { left: var(--dotx); top: 2.9rem; width: 1px; height: calc(var(--sy) * 100% - 2.9rem); }
-#logitech-button-map .button-map-layers { display: inline-flex; gap: .2rem; padding: .2rem; border: 1px solid var(--border); border-radius: 8px; }
-#logitech-button-map .button-map-layers button { padding: .3rem .8rem; border: 0; border-radius: 6px; background: none; color: var(--text-soft); font: 650 .62rem var(--font-mono); text-transform: uppercase; letter-spacing: .06em; cursor: pointer; }
-#logitech-button-map .button-map-layers button[aria-selected="true"] { background: var(--surface-raised); color: var(--text); }
-/* The wrapper is the query container, so the card itself can be restyled when it gets narrow. */
-#logitech-button-map { container-type: inline-size; }
-#logitech-button-map .button-map-card { display: flex; flex-direction: column; height: calc(100vh - 6.5rem); min-height: 28rem; }
-#logitech-button-map .button-map-body { flex: 1; min-height: 0; grid-template-rows: minmax(0, 1fr); align-items: center; }
-#logitech-button-map .button-map-commands { align-self: stretch; display: flex; flex-direction: column; min-height: 0; }
-@container (max-width: 40rem) {
-  #logitech-button-map .button-map-body { grid-template-columns: minmax(0, 1fr); }
-  #logitech-button-map .button-map-stage { order: -1; }
-  #logitech-button-map .button-map-card { height: auto; }
-  #logitech-button-map .button-map-body { grid-template-rows: none; }
-  #logitech-button-map .button-map-list { flex: none; max-height: 14rem; }
-}
-
-/* The search box stays at the top of the command list while it scrolls. */
-#logitech-button-map .button-map-record { padding: .45rem .55rem; border: 1px dashed color-mix(in srgb, var(--ui-accent) 62%, var(--border)); border-radius: 7px; background: transparent; color: var(--ui-accent); font: 700 .62rem var(--font-mono); text-align: left; }
-#logitech-button-map .button-map-record:hover:not(:disabled) { background: var(--ui-accent-soft); }
-#logitech-button-map .button-map-record[aria-pressed="true"] { border-style: solid; background: var(--ui-accent); color: var(--ui-accent-ink); }
-#logitech-button-map .button-map-record:disabled { opacity: .4; cursor: not-allowed; }
-#logitech-button-map .button-map-reset { display: flex; gap: .35rem; padding: 0; border: 0; background: none; box-shadow: none; }
-#logitech-button-map .button-map-reset button { flex: 1 1 0; padding: .4rem .5rem; border: 1px solid var(--border); border-radius: 7px; background: var(--input); color: var(--text-soft); font: 650 .62rem var(--font-mono); }
-#logitech-button-map .button-map-reset button:hover:not(:disabled) { border-color: var(--ghost); color: var(--text-hover); }
-#logitech-button-map .button-map-reset button:disabled { opacity: .4; cursor: not-allowed; }
-#logitech-button-map .button-map-share { padding: .4rem .8rem; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-raised); color: var(--text); font-size: .66rem; font-weight: 650; white-space: nowrap; }
-#logitech-button-map .button-map-share:hover { border-color: var(--ui-accent); color: var(--ui-accent); }
-#logitech-button-map .button-map-host { height: auto; min-height: 0; gap: .8rem; display: grid; align-content: start; }
-#logitech-button-map .button-map-hints { display: grid; gap: .15rem; margin: 0 0 .5rem; padding: 0; list-style: none; color: var(--warning); font-size: .64rem; text-align: center; }
-
-:lang(tr) :is(#logitech-analog-button-settings, #magnetic-button-settings) fieldset.superstrike-both-panel::before { content: "●  Her iki ana düğme"; }
-:lang(tr) #logitech-button-map .button-map-spot.is-locked .button-map-label span::after { content: " · kilitli"; }
diff --git a/src/control-profiles.css b/src/control-profiles.css
deleted file mode 100644
index ac130d9e..00000000
--- a/src/control-profiles.css
+++ /dev/null
@@ -1,309 +0,0 @@
-/*
- * Logitech onboard-profile UI: the profile rail, the DPI slot editor, the
- * report-rate sliders and the lift-off menu.
- *
- * Kept apart from control.css because it is all specific to one driver's
- * profile model, and because upstream restructured the shared stylesheets
- * while this was being written.
- */
-/* HID++ capture dialog. Native dialog buttons default to the light UA style,
-   which is unreadable against the dark panel, so they are themed explicitly. */
-#capture-dialog { color-scheme:dark }
-#capture-dialog::backdrop { background:rgb(0 0 0 / 62%) }
-#capture-dialog button { padding:.4rem .62rem;border:1px solid var(--border);border-radius:6px;background:var(--surface-dialog);color:var(--text-strong);font-size:.62rem;font-weight:600;cursor:pointer }
-#capture-dialog button:hover { border-color:var(--border-hover);background:var(--surface-dialog-hover) }
-#capture-dialog button:focus-visible { outline:2px solid var(--ui-accent);outline-offset:1px }
-#capture-dialog button.is-primary { border-color:var(--ui-accent);background:var(--ui-accent);color:var(--ui-accent-ink) }
-#capture-dialog textarea:focus-visible { outline:2px solid var(--ui-accent);outline-offset:1px }
-
-/* Marks settings stored in the selected onboard profile rather than globally,
-   so it is clear which values follow the profile and which apply to the mouse
-   as a whole. Global settings carry no badge. */
-.setting-scope { display:inline-block;margin-left:.5rem;padding:.14rem .42rem;border:1px solid var(--border);border-radius:999px;background:var(--surface-raised);color:var(--text-soft);font-family:'JetBrains Mono',monospace;font-size:.58rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;vertical-align:middle;white-space:nowrap }
-.setting-heading h2 .setting-scope { position:relative;top:-.1em }
-
-/* Divides the slot picker from the table it sizes. */
-.dpi-slot-rule { height:1px;margin:0 0 .55rem;background:var(--border-rule) }
-
-/* Lift-off picker. A native select cannot be themed or animated, so it is a
-   button plus a listbox that shares the inputs' shape and colours. */
-.lod-select { position:relative;min-width:0 }
-.lod-select-value { display:flex;width:100%;box-sizing:border-box;align-items:center;justify-content:space-between;gap:.25rem;padding:.34rem .4rem;border:1px solid var(--border);border-radius:7px;background:var(--surface-raised);color:var(--text-input);font-size:.66rem;cursor:pointer;transition:border-color .16s ease,background .16s ease }
-.lod-select-value:hover:not(:disabled) { border-color:var(--ghost) }
-.lod-select-value:disabled { opacity:.55;cursor:not-allowed }
-.lod-select-value span { overflow:hidden;text-overflow:ellipsis;white-space:nowrap }
-.lod-select-value i { width:.32rem;height:.32rem;flex:0 0 auto;border-right:1.2px solid var(--muted);border-bottom:1.2px solid var(--muted);transform:translateY(-1px) rotate(45deg);transition:transform .18s ease }
-.lod-select.is-open .lod-select-value { border-color:var(--ui-accent) }
-.lod-select.is-open .lod-select-value i { transform:translateY(1px) rotate(-135deg) }
-.lod-select-menu { position:absolute;z-index:30;top:calc(100% + .25rem);right:0;left:0;margin:0;padding:.2rem;border:1px solid var(--border);border-radius:8px;background:var(--surface-menu);box-shadow:0 10px 22px rgb(0 0 0 / 45%);list-style:none;opacity:0;transform:translateY(-.25rem) scale(.97);transform-origin:top center;pointer-events:none;transition:opacity .16s ease,transform .16s ease }
-.lod-select.is-open .lod-select-menu { opacity:1;transform:none;pointer-events:auto }
-.lod-select-menu li { padding:.32rem .42rem;border-radius:5px;color:var(--dim);font-size:.64rem;cursor:pointer;transition:background .12s ease,color .12s ease }
-.lod-select-menu li:hover { background:var(--surface-hover-soft);color:var(--text-hover) }
-.lod-select-menu li[aria-selected="true"] { color:var(--ui-accent) }
-@media (prefers-reduced-motion:reduce) {
-  .lod-select-value, .lod-select-value i, .lod-select-menu, .lod-select-menu li, .dpi-view-toggle button { transition:none }
-}
-/* Report rate as a slider with one stop per supported rate. */
-.rate-slider { display:grid;gap:.1rem }
-.rate-slider + .rate-slider { margin-top:.65rem }
-.rate-slider-head { display:flex;align-items:baseline;justify-content:space-between;gap:.5rem;color:var(--text-soft);font-size:.62rem }
-.rate-slider-head output { color:var(--text-input);font-family:'JetBrains Mono',monospace;font-size:.68rem }
-.rate-slider-buttons { display:flex;gap:.4rem }
-.rate-slider-buttons button { flex:1 1 0;min-width:2.5rem;padding:.6rem .3rem;border:1px solid var(--border);border-radius:8px;background:var(--surface-control);color:var(--text-soft);font:600 .74rem/1 var(--font-sans);white-space:nowrap;cursor:pointer;transition:background .15s,color .15s,border-color .15s }
-.rate-slider-buttons button:hover:not(:disabled) { border-color:var(--line-strong);background:var(--surface-hover-soft);color:var(--text-hover) }
-.rate-slider-buttons button.is-on { border-color:var(--ui-accent);background:var(--ui-accent);color:var(--ui-accent-ink) }
-.rate-slider-buttons button.is-on:hover:not(:disabled) { border-color:var(--ui-accent);background:var(--ui-accent);color:var(--ui-accent-ink) }
-.rate-slider-buttons button:disabled { opacity:.5;cursor:not-allowed }
-
-/* The compact layout pins the settings grid to a 176px row. Five slot rows are
-   far taller than that, so the grid falls back to sizing by content while the
-   slot editor is showing. */
-.control-shell .settings-grid.has-dpi-slots { grid-template-rows:minmax(176px,auto) }
-.control-shell .settings-grid.has-dpi-slots .dpi-card { grid-row:auto }
-
-.profile-button-editor { margin-top:1rem;padding-top:1rem;border-top:1px solid var(--border-rule) }
-.profile-button-heading { display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:.8rem }
-.profile-button-heading p { margin:0 0 .3rem;color:var(--faint);font-family:var(--font-mono);font-size:.55rem;letter-spacing:.09em }
-.profile-button-heading h2 { margin:0;color:var(--text-hover);font-size:1rem;font-weight:550 }
-.profile-button-heading small { display:block;margin-top:.25rem;color:var(--text-soft);font-size:.64rem }
-.assignment-layer-tabs { display:flex;padding:.2rem;border:1px solid var(--border);border-radius:8px;background:var(--surface-control) }
-.assignment-layer-tabs button { min-width:5rem;padding:.38rem .55rem;border:0;border-radius:5px;background:transparent;color:var(--muted);font-size:.62rem;cursor:pointer }
-.assignment-layer-tabs button[aria-selected="true"] { background:var(--surface-raised);color:var(--ui-accent);box-shadow:0 1px 5px rgb(0 0 0 / 25%) }
-.assignment-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.45rem }
-.assignment-card { display:grid;grid-template-columns:2rem minmax(5rem,.55fr) minmax(9rem,1fr);align-items:center;gap:.55rem;min-width:0;padding:.55rem .6rem;border:1px solid var(--border);border-radius:8px;background:var(--surface-raised) }
-.assignment-card.is-wide { grid-column:1 / -1 }
-.assignment-button-number { display:grid;width:1.8rem;height:1.8rem;place-items:center;border:1px solid var(--border);border-radius:6px;background:var(--surface-control);color:var(--ui-accent);font-family:var(--font-mono);font-size:.55rem }
-.assignment-button-name { overflow:hidden;color:var(--text-hover);font-size:.65rem;text-overflow:ellipsis;white-space:nowrap }
-.assignment-select-wrap { position:relative;min-width:0 }
-.assignment-select-wrap .option-menu-trigger { font-size:.64rem; }
-@media (max-width:900px) { .assignment-grid { grid-template-columns:1fr } }
-@media (max-width:560px) { .profile-button-heading { align-items:stretch;flex-direction:column }.assignment-card { grid-template-columns:2rem 1fr }.assignment-select-wrap { grid-column:1 / -1 } }
-.shortcut-dialog-backdrop { position:fixed;z-index:100;inset:0;display:grid;place-items:center;padding:1rem;background:rgb(0 0 0 / 68%);backdrop-filter:blur(4px) }
-.shortcut-dialog { width:min(25rem,100%);box-sizing:border-box;padding:1.2rem;border:1px solid var(--border-hover);border-radius:11px;background:var(--surface-menu);box-shadow:0 20px 60px rgb(0 0 0 / 60%);outline:0 }
-.shortcut-dialog:focus-visible { border-color:var(--ui-accent) }
-.shortcut-dialog-kicker { color:var(--ui-accent);font-family:var(--font-mono);font-size:.54rem;letter-spacing:.1em }
-.shortcut-dialog h3 { margin:.35rem 0 .3rem;color:var(--text-hover);font-size:1.05rem;font-weight:550 }
-.shortcut-dialog p { margin:0;color:var(--text-soft);font-size:.68rem;line-height:1.5 }
-.shortcut-record-button { display:flex;align-items:center;justify-content:center;gap:.45rem;width:100%;margin-top:1rem;padding:.55rem;border:1px solid var(--border-hover);border-radius:7px;background:var(--surface-control);color:var(--text-hover);font-size:.67rem;font-weight:650;cursor:pointer }
-.shortcut-record-button i { width:.55rem;height:.55rem;border-radius:50%;background:var(--destructive);box-shadow:0 0 0 3px color-mix(in srgb,var(--destructive) 12%,transparent) }
-.shortcut-record-button.is-recording { border-color:var(--destructive);color:color-mix(in srgb,var(--destructive) 68%,var(--text-hover)) }
-.shortcut-record-button.is-recording i { border-radius:2px;animation:shortcut-pulse 1s ease-in-out infinite }
-@keyframes shortcut-pulse { 50% { opacity:.45 } }
-.shortcut-capture { display:grid;min-height:3.25rem;margin:1rem 0 .45rem;place-items:center;border:1px dashed var(--border-hover);border-radius:8px;background:var(--surface-control);color:var(--muted);font-family:var(--font-mono);font-size:.78rem }
-.shortcut-capture.has-value { border-style:solid;border-color:var(--ui-accent);color:var(--text-hover);box-shadow:inset 0 0 18px color-mix(in srgb,var(--ui-accent) 8%,transparent) }
-.shortcut-capture ol { display:flex;width:100%;box-sizing:border-box;align-items:center;gap:.4rem;overflow-x:auto;margin:0;padding:.7rem;list-style:none }
-.shortcut-capture li { display:flex;flex:0 0 auto;align-items:center;gap:.35rem }
-.shortcut-capture li + li::before { color:var(--ghost);content:"→" }
-.shortcut-capture kbd { padding:.35rem .48rem;border:1px solid var(--border-hover);border-radius:5px;background:var(--surface-raised);color:var(--text-hover);font:600 .63rem var(--font-mono);box-shadow:0 2px 0 var(--border) }
-.shortcut-capture li small { color:var(--ghost);font-size:.48rem }
-.shortcut-error { display:block;color:var(--destructive);font-size:.62rem }
-.shortcut-macro-note { display:block;margin-top:.45rem;color:var(--text-soft);font-size:.62rem;line-height:1.4 }
-.shortcut-dialog-actions { display:flex;justify-content:flex-end;gap:.45rem;margin-top:1rem }
-.shortcut-dialog-actions button { padding:.45rem .7rem;border:1px solid var(--border);border-radius:6px;background:var(--surface-control);color:var(--muted);font-size:.63rem;cursor:pointer }
-.shortcut-dialog-actions button.is-primary { border-color:var(--ui-accent);background:var(--ui-accent);color:var(--ui-accent-ink);font-weight:650 }
-.shortcut-dialog-actions button:disabled { opacity:.4;cursor:default }
-
-/* `.segmented` and friends set display, which outranks the user-agent
-   `[hidden] { display: none }` rule — so hiding those rows by setting the
-   hidden property silently did nothing. Make the attribute win everywhere. */
-[hidden] { display: none !important; }
-
-/* Profiles as a disclosure directly under the device overview: collapsed it
-   names the profile being edited, expanded it lists them all. Height is
-   animated with a 0fr/1fr grid row, which unlike max-height needs no guessed
-   pixel value and so cannot cut long lists off. */
-/* The panel is a flex column, so without a fixed basis this section shrinks to
-   its min-height — which `overflow:hidden` makes zero — and collapses to just
-   its borders. Every other section in the panel sets the same. */
-.profile-disclosure { flex:0 0 auto;margin-top:.65rem;overflow:hidden;border:1px solid var(--border-rule);border-radius:12px;background:var(--surface-panel) }
-.profile-summary { display:flex;align-items:stretch;gap:.35rem;padding:.15rem .55rem .15rem .15rem }
-.profile-summary-main { display:flex;flex:1 1 auto;align-items:center;justify-content:space-between;gap:.75rem;min-width:0;padding:.6rem .55rem;border:0;border-radius:10px;background:none;color:inherit;text-align:left;cursor:pointer;transition:background .16s ease }
-.profile-summary-main:hover { background:var(--surface-hover-strong) }
-.profile-summary-text { display:grid;min-width:0;gap:.1rem }
-.profile-summary-label { color:var(--text-soft);font-family:'JetBrains Mono',monospace;font-size:.56rem;font-weight:600;letter-spacing:.09em }
-.profile-summary-text strong { overflow:hidden;color:var(--text-input);font-size:.78rem;font-weight:600;text-overflow:ellipsis;white-space:nowrap }
-.profile-summary-text small { overflow:hidden;color:var(--faint);font-size:.62rem;text-overflow:ellipsis;white-space:nowrap }
-.profile-summary-chevron { width:.4rem;height:.4rem;flex:0 0 auto;border-right:1.4px solid var(--muted);border-bottom:1.4px solid var(--muted);transform:translateY(-2px) rotate(45deg);transition:transform .2s ease }
-.profile-disclosure.is-open .profile-summary-chevron { transform:translateY(1px) rotate(-135deg) }
-/* Height is animated as a measured max-height rather than a 0fr/1fr grid row:
-   an fr track resolves against free space, and with an overflow-hidden child
-   contributing zero min-content there is none, so the row stayed collapsed.
-   The pixel value is measured from the content, so a long list cannot clip. */
-.profile-disclosure-body { max-height:0;overflow:hidden;transition:max-height .22s ease }
-.profile-disclosure-inner > div, .profile-disclosure-inner > small { margin:0 .7rem }
-.profile-disclosure-inner > small { display:block;padding-bottom:.7rem }
-
-/* An auto column sizes to the widest row, which let rows run past the panel
-   instead of shrinking into it. A capped 1fr track forces them to fit and lets
-   the text ellipsis do its job. */
-#onboard-profile-list, #nape-layer-list { display:grid;grid-template-columns:minmax(0,1fr);gap:.3rem;padding-bottom:.5rem }
-#onboard-profile-list > *, #nape-layer-list > * { min-width:0;box-sizing:border-box }
-#onboard-status { color:var(--text-soft);font-size:.62rem;line-height:1.5 }
-.profile-row-text { display:flex;flex-direction:column;min-width:0;overflow:hidden }
-.profile-row-text strong, .profile-row-text small { display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap }
-.profile-row-text strong { color:var(--text-strong);font-size:.72rem }
-.profile-row-text small { color:var(--text-soft);font-size:.62rem }
-
-/* One row per profile in the rail: name/detail on the left, square icon
-   actions on the right. Theme tokens only, so the chrome holds up in every
-   theme. */
-.profile-row { display:flex;gap:.55rem;align-items:center;padding:.45rem .6rem;border:1px solid var(--border);border-radius:10px;background:var(--surface-control) }
-.profile-row.is-open { border-color:var(--line-strong);background:var(--surface-raised) }
-.profile-row.is-disabled { opacity:.55 }
-.profile-row-open { display:flex;gap:.55rem;align-items:center;flex:1;min-width:0;padding:0;border:0;background:none;color:inherit;text-align:left;cursor:pointer }
-.profile-row-open:disabled { cursor:not-allowed }
-.profile-row-rule { display:flex;align-items:center;gap:.5rem;margin:.15rem 0 .05rem }
-.profile-row-rule::before,.profile-row-rule::after { content:"";height:1px;flex:1;background:var(--border) }
-.profile-row-rule small { color:var(--text-soft);font-size:.6rem;letter-spacing:.04em }
-.profile-rule { height:1px;margin:.15rem 0 .05rem;background:var(--border) }
-.profile-list-hint { display:block;margin:0 0 .2rem;color:var(--text-soft);font-size:.6rem }
-.icon-button.is-active { border-color:var(--line-strong);background:var(--surface-hover-soft);color:var(--ui-accent) }
-
-/* Square icon buttons, matching the segmented controls' border and hover. */
-.icon-button { display:inline-flex;align-items:center;justify-content:center;align-self:center;padding:.34rem;border:1px solid var(--border);border-radius:7px;background:var(--surface-raised);color:var(--text-soft);cursor:pointer;transition:border-color .16s ease,color .16s ease,background .16s ease }
-.icon-button.profile-setup-button { padding:.34rem .75rem;color:var(--ui-accent);font-size:.68rem;font-weight:600;white-space:nowrap }
-.icon-button:hover:not(:disabled) { border-color:var(--ghost);background:var(--surface-hover-soft);color:var(--text-input) }
-.icon-button:disabled { opacity:.45;cursor:not-allowed }
-.icon-button.profile-delete-button { border-color:color-mix(in srgb,var(--destructive) 46%,var(--surface-panel));background:color-mix(in srgb,var(--destructive) 14%,var(--surface-panel));color:color-mix(in srgb,var(--destructive) 76%,var(--text-hover)) }
-.icon-button.profile-delete-button:hover:not(:disabled) { border-color:color-mix(in srgb,var(--destructive) 74%,var(--surface-panel));background:color-mix(in srgb,var(--destructive) 26%,var(--surface-panel));color:var(--text-hover) }
-
-/* Bunny hop: a switch, a number and its unit on one line, sharing the shape of
-   the DPI slot fields above them. */
-.bunny-hop-controls { display:flex;align-items:center;gap:.45rem;margin-top:.1rem }
-.bunny-hop-controls input[type="number"] { width:5rem;box-sizing:border-box;padding:.36rem .4rem;border:1px solid var(--border);border-radius:7px;background:var(--surface-raised);color:var(--text-input);font-size:.66rem }
-.bunny-hop-controls input[type="number"]:hover:not(:disabled) { border-color:var(--ghost) }
-.bunny-hop-controls input[type="number"]:disabled { opacity:.5;cursor:not-allowed }
-.bunny-hop-controls > span { color:var(--faint);font-size:.62rem }
-#bunny-hop-row { margin-top:.9rem;padding-top:.85rem;border-top:1px solid var(--border-rule) }
-#bunny-hop-row .setting-heading { margin-bottom:.45rem }
-
-@media (prefers-reduced-motion:reduce) {
-  .profile-disclosure-body, .profile-summary-chevron, .profile-summary-main, .icon-button { transition:none }
-}
-
-/* Lift-off picker. A native select cannot be themed or animated, so it is a
-   button plus a listbox that shares the inputs' shape and colours. */
-.lod-select { position:relative;min-width:0 }
-.lod-select-value { display:flex;width:100%;box-sizing:border-box;align-items:center;justify-content:space-between;gap:.25rem;padding:.34rem .4rem;border:1px solid var(--border);border-radius:7px;background:var(--surface-raised);color:var(--text-input);font-size:.66rem;cursor:pointer;transition:border-color .16s ease,background .16s ease }
-.lod-select-value:hover:not(:disabled) { border-color:var(--ghost) }
-.lod-select-value:disabled { opacity:.55;cursor:not-allowed }
-.lod-select-value span { overflow:hidden;text-overflow:ellipsis;white-space:nowrap }
-.lod-select-value i { width:.32rem;height:.32rem;flex:0 0 auto;border-right:1.2px solid var(--muted);border-bottom:1.2px solid var(--muted);transform:translateY(-1px) rotate(45deg);transition:transform .18s ease }
-.lod-select.is-open .lod-select-value { border-color:var(--ui-accent) }
-.lod-select.is-open .lod-select-value i { transform:translateY(1px) rotate(-135deg) }
-.lod-select-menu { position:absolute;z-index:30;top:calc(100% + .25rem);right:0;left:0;margin:0;padding:.2rem;border:1px solid var(--border);border-radius:8px;background:var(--surface-menu);box-shadow:0 10px 22px rgb(0 0 0 / 45%);list-style:none;opacity:0;transform:translateY(-.25rem) scale(.97);transform-origin:top center;pointer-events:none;transition:opacity .16s ease,transform .16s ease }
-.lod-select.is-open .lod-select-menu { opacity:1;transform:none;pointer-events:auto }
-.lod-select-menu li { padding:.32rem .42rem;border-radius:5px;color:var(--dim);font-size:.64rem;cursor:pointer;transition:background .12s ease,color .12s ease }
-.lod-select-menu li:hover { background:var(--surface-hover-soft);color:var(--text-hover) }
-.lod-select-menu li[aria-selected="true"] { color:var(--ui-accent) }
-@media (prefers-reduced-motion:reduce) {
-  .lod-select-value, .lod-select-value i, .lod-select-menu, .lod-select-menu li, .dpi-view-toggle button { transition:none }
-}
-/* Report rate as a slider with one stop per supported rate. */
-.rate-slider { display:grid;gap:.1rem }
-.rate-slider + .rate-slider { margin-top:.65rem }
-.rate-slider-head { display:flex;align-items:baseline;justify-content:space-between;gap:.5rem;color:var(--text-soft);font-size:.62rem }
-.rate-slider-head output { color:var(--text-input);font-family:'JetBrains Mono',monospace;font-size:.68rem }
-.rate-slider-buttons { display:flex;gap:.4rem }
-.rate-slider-buttons button { flex:1 1 0;min-width:2.5rem;padding:.6rem .3rem;border:1px solid var(--border);border-radius:8px;background:var(--surface-control);color:var(--text-soft);font:600 .74rem/1 var(--font-sans);white-space:nowrap;cursor:pointer;transition:background .15s,color .15s,border-color .15s }
-.rate-slider-buttons button:hover:not(:disabled) { border-color:var(--line-strong);background:var(--surface-hover-soft);color:var(--text-hover) }
-.rate-slider-buttons button.is-on { border-color:var(--ui-accent);background:var(--ui-accent);color:var(--ui-accent-ink) }
-.rate-slider-buttons button.is-on:hover:not(:disabled) { border-color:var(--ui-accent);background:var(--ui-accent);color:var(--ui-accent-ink) }
-.rate-slider-buttons button:disabled { opacity:.5;cursor:not-allowed }
-
-/* The compact layout pins the settings grid to a 176px row. Five slot rows are
-   far taller than that, so the grid falls back to sizing by content while the
-   slot editor is showing. */
-.control-shell .settings-grid.has-dpi-slots { grid-template-rows:minmax(176px,auto) }
-.control-shell .settings-grid.has-dpi-slots .dpi-card { grid-row:auto }
-
-/* Unified DPI stage editor: tick a row to include it in the cycle, edit its
-   value or drag the slider, and click the number to make it active. Unticked
-   rows dim but keep their value locally, so re-enabling restores it. */
-/* Stage/Single mode switch. A compact pill sitting on the right of the DPI
-   card's heading text; the active segment inverts like the shared
-   `.segmented` controls do. */
-.dpi-card .dpi-heading-label { display:flex;align-items:center;gap:.8rem;min-width:0 }
-.dpi-view-toggle { display:inline-flex;align-items:center;gap:2px;padding:3px;border:1px solid var(--border);border-radius:999px;background:var(--surface-control) }
-.dpi-view-toggle button { padding:.45rem .95rem;border:0;border-radius:999px;background:transparent;color:var(--text-soft);font:600 .75rem/1 var(--font-sans);white-space:nowrap;cursor:pointer;transition:background .15s ease,color .15s ease }
-.dpi-view-toggle button:hover { color:var(--text-hover) }
-.dpi-view-toggle button.is-on { background:var(--text);color:var(--ink) }
-.dpi-view-toggle button:focus-visible { outline:2px solid var(--ui-accent);outline-offset:1px }
-#dpi-stage-editor { margin-top:.65rem }
-.dpi-editor-list { display:grid;gap:.35rem }
-.dpi-editor-bar { display:flex;align-items:baseline;justify-content:space-between;gap:.5rem;padding:0 0 .15rem }
-.dpi-editor-bar-label { color:var(--text-soft);font:650 .62rem/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap }
-.dpi-editor-bar-count { color:var(--text-soft);font:600 .6rem/1 var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:.04em;white-space:nowrap }
-.dpi-editor-row { display:grid;grid-template-columns:1.4rem 1.7rem 5.2rem minmax(0,1fr);gap:.5rem;align-items:center }
-.dpi-editor-check { position:relative;display:grid;place-items:center;width:1.4rem;height:1.4rem;margin:0;cursor:pointer }
-.dpi-editor-check > input[type="checkbox"].dpi-editor-tick { position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer }
-.dpi-editor-box { display:grid;place-items:center;width:1.12rem;height:1.12rem;border:1.5px solid var(--edge);border-radius:6px;background:var(--surface-control);color:transparent;transition:border-color .15s ease,background .15s ease,color .15s ease }
-.dpi-editor-check:hover .dpi-editor-box { border-color:var(--ui-accent);background:var(--ui-accent-soft) }
-.dpi-editor-check > input:checked + .dpi-editor-box { border-color:var(--ui-accent);background:var(--ui-accent);color:var(--ui-accent-ink) }
-.dpi-editor-check > input:focus-visible + .dpi-editor-box { outline:2px solid var(--ui-accent);outline-offset:2px }
-.dpi-editor-check:has(> input:disabled) { cursor:not-allowed;opacity:.45 }
-.dpi-editor-check:has(> input:disabled) .dpi-editor-box { border-color:var(--border);background:var(--surface-control) }
-.dpi-editor-check:has(> input:disabled:checked) { opacity:.82 }
-.dpi-editor-check:has(> input:disabled:checked) .dpi-editor-box { border-color:color-mix(in srgb,var(--ui-accent) 70%,var(--border));background:color-mix(in srgb,var(--ui-accent) 28%,var(--surface-control));color:var(--ui-accent) }
-.dpi-editor-check > input:disabled { cursor:not-allowed }
-.dpi-editor-row.is-off { opacity:.55 }
-.dpi-editor-row > button.dpi-editor-index { padding:.4rem 0;border:1px solid var(--border);border-radius:6px;background:var(--surface-raised);color:var(--text-input);font:650 .72rem/1 var(--font-mono);font-variant-numeric:tabular-nums;text-align:center;cursor:pointer }
-.dpi-editor-row.is-active > button.dpi-editor-index { border-color:var(--ui-accent);background:color-mix(in srgb, var(--ui-accent) 16%, var(--surface-raised));color:var(--ui-accent) }
-.dpi-editor-row > button.dpi-editor-index:hover:not(:disabled) { border-color:var(--ghost);color:var(--text-hover) }
-.dpi-editor-row > button.dpi-editor-index:focus-visible { outline:2px solid var(--ui-accent);outline-offset:1px }
-.dpi-editor-row > input[type="number"].dpi-editor-value { width:100%;min-width:0;box-sizing:border-box;padding:.42rem .4rem;border:1px solid var(--border);border-radius:7px;background:var(--surface-input);color:var(--text-input);font:600 .74rem/1.3 var(--font-mono);font-variant-numeric:tabular-nums;text-align:center }
-.dpi-editor-row > input.dpi-editor-value:hover:not(:disabled) { border-color:var(--ghost) }
-.dpi-editor-row > input.dpi-editor-value:focus-visible { outline:2px solid var(--ui-accent);outline-offset:1px }
-.dpi-editor-row > input[type="range"].dpi-editor-slider { width:100%;min-width:0;height:1.2rem;margin:0;accent-color:var(--ui-accent);cursor:pointer }
-/* Per-stage colour ramp for the M2-NEX editor. Kept as theme tokens so the
-   cards stay legible in light and dark themes (the raw marker hues are too
-   bright against the light surface). */
-.dpi-editor.has-m2nex-stage-colors { --m2nex-stage-1:var(--stage-color-1);--m2nex-stage-2:var(--stage-color-2);--m2nex-stage-3:var(--stage-color-3);--m2nex-stage-4:var(--stage-color-4);--m2nex-stage-5:var(--stage-color-5);--m2nex-stage-6:var(--stage-color-6) }
-.dpi-editor.has-m2nex-stage-colors .m2nex-stage-1 { --dpi-stage-color:var(--m2nex-stage-1) }
-.dpi-editor.has-m2nex-stage-colors .m2nex-stage-2 { --dpi-stage-color:var(--m2nex-stage-2) }
-.dpi-editor.has-m2nex-stage-colors .m2nex-stage-3 { --dpi-stage-color:var(--m2nex-stage-3) }
-.dpi-editor.has-m2nex-stage-colors .m2nex-stage-4 { --dpi-stage-color:var(--m2nex-stage-4) }
-.dpi-editor.has-m2nex-stage-colors .m2nex-stage-5 { --dpi-stage-color:var(--m2nex-stage-5) }
-.dpi-editor.has-m2nex-stage-colors .m2nex-stage-6 { --dpi-stage-color:var(--m2nex-stage-6) }
-.dpi-editor.has-m2nex-stage-colors .dpi-editor-row { grid-template-columns:1.4rem 2.35rem 5.2rem minmax(0,1fr) }
-.dpi-editor.has-stage-axes .dpi-editor-row { grid-template-columns:1.4rem 1.7rem 5.2rem 5.2rem minmax(0,1fr) }
-.dpi-editor-axes-head { display:grid;grid-template-columns:1.4rem 1.7rem 5.2rem 5.2rem minmax(0,1fr);gap:.5rem;padding:0 0 .05rem }
-.dpi-editor-axes-head > span { color:var(--text-soft);font:600 .6rem/1 var(--font-mono);letter-spacing:.08em;text-align:center }
-.dpi-editor-axes-head > span:first-child { grid-column:3 }
-.dpi-editor-axes-head > span:last-child { grid-column:4 }
-.dpi-editor.has-m2nex-stage-colors .dpi-editor-row > button.dpi-editor-index { display:inline-flex;align-items:center;justify-content:center;gap:.28rem;border-color:color-mix(in srgb, var(--dpi-stage-color) 58%, var(--border));box-shadow:inset 0 -2px 0 var(--dpi-stage-color) }
-.dpi-editor.has-m2nex-stage-colors .dpi-editor-row > button.dpi-editor-index:hover:not(:disabled) { border-color:var(--dpi-stage-color);color:var(--dpi-stage-color) }
-.dpi-editor.has-m2nex-stage-colors .dpi-editor-row.is-active > button.dpi-editor-index { border-color:var(--dpi-stage-color);background:color-mix(in srgb, var(--dpi-stage-color) 15%, var(--surface-raised));color:var(--dpi-stage-color);box-shadow:inset 0 -2px 0 var(--dpi-stage-color),0 0 0 1px color-mix(in srgb, var(--dpi-stage-color) 28%, transparent) }
-.dpi-editor.has-m2nex-stage-colors .dpi-editor-row > input[type="number"].dpi-editor-value { border-color:color-mix(in srgb, var(--dpi-stage-color) 42%, var(--border));color:var(--dpi-stage-color) }
-.dpi-editor.has-m2nex-stage-colors .dpi-editor-row > input[type="range"].dpi-editor-slider { accent-color:var(--dpi-stage-color) }
-.dpi-editor-stage-swatch { width:.42rem;height:.42rem;flex:0 0 auto;border-radius:999px;background:var(--dpi-stage-color);box-shadow:0 0 0 1px color-mix(in srgb, var(--dpi-stage-color) 65%, white) }
-.dpi-editor-row.is-off > input.dpi-editor-slider::-webkit-slider-runnable-track { background:linear-gradient(90deg,var(--ghost) var(--fill,50%),color-mix(in srgb,var(--ghost) 25%,var(--surface-strong)) var(--fill,50%)) }
-.dpi-editor-row.is-off > input.dpi-editor-slider::-webkit-slider-thumb { background:var(--ghost) }
-.dpi-editor-row.is-off > input.dpi-editor-slider::-moz-range-progress { background:var(--ghost) }
-.dpi-editor-row.is-off > input.dpi-editor-slider::-moz-range-thumb { background:var(--ghost) }
-.dpi-editor-lod { width:7rem;justify-self:end }
-.slot-lod-list { display:grid;gap:.35rem }
-.slot-lod-row { display:flex;align-items:center;justify-content:space-between;gap:.5rem }
-.slot-lod-index { color:var(--text-soft);font:650 .62rem/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase }
-.dpi-editor-row .lod-select-value { padding:.42rem .5rem;border-radius:7px;color:var(--text-input);font:600 .74rem/1.3 var(--font-mono);font-variant-numeric:tabular-nums }
-.dpi-editor-row .lod-select-menu li { padding:.42rem .52rem;font:550 .74rem/1.4 var(--font-sans);color:var(--text-soft) }
-.dpi-editor-row .lod-select-menu li:hover { color:var(--text-hover) }
-.dpi-editor-lod-none { justify-self:end;color:var(--text-soft);font:600 .74rem/1.3 var(--font-mono) }
-.dpi-editor .setting-note { margin-top:.6rem;color:var(--text-soft);font:500 .7rem/1.55 var(--font-sans);letter-spacing:.01em }
-.dpi-editor input:disabled, .dpi-editor button:disabled { cursor:not-allowed }
-
-/* `.segmented` and friends set display, which outranks the user-agent
-   `[hidden] { display: none }` rule — so hiding those rows by setting the
-   hidden property silently did nothing. Make the attribute win everywhere. */
-[hidden] { display: none !important; }
-
-/* Driver previews in interface settings. Development only — the section is
-   hidden and its fixtures are never fetched in a production build. */
-.preview-launcher { margin-top:.9rem }
-.preview-launcher-list { display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:.4rem;margin-top:.7rem }
-.preview-launcher-link { display:grid;gap:.1rem;padding:.5rem .6rem;border:1px solid var(--border-rule);border-radius:9px;background:var(--surface-menu);color:var(--text-strong);font-size:.7rem;text-decoration:none;transition:border-color .16s ease,background .16s ease }
-.preview-launcher-link:hover { border-color:var(--border-hover);background:var(--surface-hover-soft);color:var(--text-hover) }
-.preview-launcher-link small { color:var(--ghost);font-family:'JetBrains Mono',monospace;font-size:.55rem }
-.preview-launcher-link.is-active { border-color:var(--ui-accent);color:var(--ui-accent) }
-.preview-launcher-link.is-active small { color:var(--ui-accent) }
-#bunny-hop-card #bunny-hop-row { margin: 0; padding: 0; border: 0; }
diff --git a/src/control.css b/src/control.css
deleted file mode 100644
index dc1f1dac..00000000
--- a/src/control.css
+++ /dev/null
@@ -1,5394 +0,0 @@
-@import "./control-devices.css";
-@import "./control-profiles.css";
-
-/* Any author-level `display` beats the browser's own `[hidden]` rule, so a
-   `hidden` property set from script silently does nothing on anything laid out
-   with grid or flex. Several controls are hidden that way. */
-[hidden] { display: none !important; }
-
-:root {
-  --ink: #08090a;
-  --sidebar: #0b0c0e;
-  --well: #0d0f11;
-  --card: #111315;
-  --raised: #151719;
-  --input: #151719;
-  --control: #151719;
-  --hover: #1a1d20;
-
-  --line: #292d32;
-  --line-soft: #25292e;
-  --line-strong: #343940;
-  --edge: #343940;
-
-  --text: #f2f3f5;
-  --bright: #f2f3f5;
-  --dim: #9a9fa8;
-  --muted: #686e77;
-  --faint: #6c727b;
-  --ghost: #5b6069;
-
-  --surface-bg: #08090a;
-  --surface-bg-tint: rgb(8 9 10 / 96%);
-  --surface-tabs: rgb(11 12 14 / 96%);
-  --surface-sidebar: #0b0c0e;
-  --surface-panel: #111315;
-  --surface-panel-soft: #0e1012;
-  --surface-panel-strong: #111315;
-  --surface-menu: #151719;
-  --surface-control: #151719;
-  --surface-input: #17191c;
-  --surface-raised: #151719;
-  --surface-strong: #202327;
-  --surface-hover: #1a1d20;
-  --surface-hover-soft: #1e2126;
-  --surface-hover-strong: #16181b;
-  --surface-hover-alt: #151719;
-  --surface-dialog: #1a1d20;
-  --surface-dialog-hover: #202327;
-  --surface-superstrike: rgb(10 10 12 / 55%);
-  --border: #292d32;
-  --border-rule: #25292e;
-  --border-soft: #292d32;
-  --border-hover: #343940;
-  --text-input: #f2f3f5;
-  --text-strong: #cccfd4;
-  --text-soft: #9a9fa8;
-  --text-faint: #6c727b;
-  --text-hover: #ffffff;
-
-  --success: #5dde89;
-  --warning: #e8b267;
-  --destructive: #e2686f;
-  --info: #67d8ff;
-
-  --font-sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-  --font-mono: "JetBrains Mono", ui-monospace, monospace;
-
-  color: var(--text);
-  background: var(--ink);
-  font-family: var(--font-sans);
-  font-synthesis: none;
-  /* Per-stage DPI ramp used by the M2-NEX editor (has-m2nex-stage-colors). */
-  --stage-color-1: #ff5a5a;
-  --stage-color-2: #4ade80;
-  --stage-color-3: #60a5fa;
-  --stage-color-4: #facc15;
-  --stage-color-5: #22d3ee;
-  --stage-color-6: #e879f9;
-}
-
-* { box-sizing: border-box; }
-body { margin: 0; min-width: 320px; background: var(--ink); }
-button, input { font: inherit; }
-button, a { color: inherit; }
-a { text-decoration: none; }
-button { cursor: pointer; }
-button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
-
-.control-shell { --accent: var(--ui-accent); --ui-accent: #5dde89; --ui-accent-ink: #07160e; --ui-accent-soft: rgb(93 222 137 / 16%); }
-.control-shell[data-interface-theme="violet"] { --ui-accent: #a78bfa; --ui-accent-ink: #130b25; --ui-accent-soft: rgb(167 139 250 / 17%); }
-.control-shell[data-interface-theme="ice"] { --ui-accent: #67d8ff; --ui-accent-ink: #06161d; --ui-accent-soft: rgb(103 216 255 / 16%); }
-.control-shell[data-interface-theme="ember"] { --ui-accent: #ff9b62; --ui-accent-ink: #211006; --ui-accent-soft: rgb(255 155 98 / 17%); }
-.control-shell[data-interface-theme="mono"] { --ui-accent: #f1f1f3; --ui-accent-ink: #09090b; --ui-accent-soft: rgb(241 241 243 / 13%); }
-/* Matt — the desktop app's signature warm-orange accent on the normal shell. */
-.control-shell[data-interface-theme="matt"] { --ui-accent: #f5975c; --ui-accent-ink: #1a0e06; --ui-accent-soft: rgb(245 151 92 / 16%); }
-/* Light — flips the whole shell: light surfaces, dark text, warm accent.
-   Mirrors the desktop [data-theme="light"] palette so both apps share it. */
-.control-shell[data-interface-theme="light"] {
-  color-scheme: light;
-
-  --ui-accent: #d46a32;
-  --ui-accent-ink: #fff5ee;
-  --ui-accent-soft: rgb(212 106 50 / 14%);
-
-  --ink: #f7f7f4;
-  --sidebar: #efefea;
-  --well: #f0f0eb;
-  --card: #ffffff;
-  --raised: #fbfbf8;
-  --input: #ffffff;
-  --control: #ffffff;
-  --hover: #eaeae5;
-
-  --line: #dcdcd6;
-  --line-soft: #e4e4de;
-  --line-strong: #c8c8c1;
-  --edge: #b9b9b2;
-
-  --text: #141414;
-  --bright: #1c1c1c;
-  --dim: #4a4a47;
-  --muted: #737370;
-  --faint: #888885;
-  --ghost: #a3a39e;
-
-  --success: #2e9e5b;
-  --warning: #a8701f;
-  --destructive: #c63f33;
-  --info: #2e6ea8;
-
-  --surface-bg: #f7f7f4;
-  --surface-bg-tint: rgb(247 247 244 / 96%);
-  --surface-tabs: rgb(255 255 255 / 88%);
-  --surface-sidebar: #efefea;
-  --surface-panel: #f2f2ee;
-  --surface-panel-soft: #f0f0eb;
-  --surface-panel-strong: #ffffff;
-  --surface-menu: #ffffff;
-  --surface-control: #ffffff;
-  --surface-input: #ffffff;
-  --surface-raised: #fbfbf8;
-  --surface-strong: #f5f5f1;
-  --surface-hover: #eaeae5;
-  --surface-hover-soft: #e9e9e4;
-  --surface-hover-strong: #e4e4df;
-  --surface-hover-alt: #eaeae5;
-  --surface-dialog: #ffffff;
-  --surface-dialog-hover: #eaeae5;
-  --surface-superstrike: rgb(255 255 255 / 60%);
-  --border: #dcdcd6;
-  --border-rule: #e4e4de;
-  --border-soft: #e6e6e0;
-  --border-hover: #b9b9b2;
-  --text-input: #141414;
-  --text-strong: #2a2a27;
-  --text-soft: #6e6e6a;
-  --text-faint: #888885;
-  --text-hover: #000000;
-
-  --tone-dim: #888885;
-  --tone-ghost: #a3a39e;
-  --tone-text: #141414;
-  --tone-sub: #4a4a47;
-  --tone-deep: #efefea;
-  --tone-base: #f7f7f4;
-  --tone-mantle: #efefea;
-  --tone-s0: #fbfbf8;
-  --tone-s1: #f5f5f1;
-  --stage-color-1: #d92d20;
-  --stage-color-2: #1a9e4b;
-  --stage-color-3: #2270c9;
-  --stage-color-4: #b7791f;
-  --stage-color-5: #0e8f9e;
-  --stage-color-6: #b23bbf;
-}
-/* Light-theme battery icons: the base types hard-code near-white shades that
-   would vanish on light surfaces. */
-.control-shell[data-interface-theme="light"] .battery-icon { color: var(--tone-text); }
-.control-shell[data-interface-theme="light"] .battery-icon.is-charging { color: var(--success); }
-.control-shell[data-interface-theme="light"] .battery-icon.is-low,
-.control-shell[data-interface-theme="light"] .battery-icon.is-dead { color: var(--destructive); }
-.control-shell[data-interface-theme="light"] .battery-icon.is-unknown { color: var(--tone-dim); }
-/* Hatsune Miku — dark teal synth palette. The accent, surface, border and text
-   tokens below are the same ones every theme inherits, so every component
-   responds to the theme instead of being recolored case by case. */
-.control-shell[data-interface-theme="miku"] {
-  --ui-accent: #39c5bb;
-  --ui-accent-ink: #041412;
-  --ui-accent-soft: rgb(57 197 187 / 16%);
-  --miku-deep-teal: #159a96;
-  --miku-soft-cyan: #7de8e1;
-  --miku-pink: #ff6b9d;
-  --miku-soft-pink: #ff9fbc;
-
-  --ink: #0b1618;
-  --sidebar: #0c191b;
-  --well: #0f1c1f;
-  --card: #101e21;
-  --raised: #14272a;
-  --input: #15272a;
-  --control: #14272a;
-  --hover: #1c2f32;
-
-  --line: #244044;
-  --line-soft: #204042;
-  --line-strong: #2b4a4e;
-  --edge: #2d4c50;
-
-  --text: #f4ffff;
-  --bright: #eafafa;
-  --dim: #b8ccd0;
-  --muted: #91aaaa;
-  --faint: #7a9498;
-  --ghost: #668488;
-
-  --surface-bg: #0b1618;
-  --surface-bg-tint: rgb(11 22 24 / 96%);
-  --surface-tabs: rgb(11 22 24 / 96%);
-  --surface-sidebar: #0c191b;
-  --surface-panel: #101e21;
-  --surface-panel-soft: #0e1a1d;
-  --surface-panel-strong: #0f1d20;
-  --surface-menu: #14272a;
-  --surface-control: #122023;
-  --surface-input: #15272a;
-  --surface-raised: #17292c;
-  --surface-strong: #1b2e31;
-  --surface-hover: #1a2d30;
-  --surface-hover-soft: #1d3033;
-  --surface-hover-strong: #16282b;
-  --surface-hover-alt: #16282b;
-  --surface-dialog: #1a2b2e;
-  --surface-dialog-hover: #203338;
-  --surface-superstrike: rgb(16 30 33 / 60%);
-  --border: #244044;
-  --border-rule: #1c3a3d;
-  --border-soft: #1e3c3f;
-  --border-hover: #3a6669;
-  --text-input: #e6f4f4;
-  --text-strong: #cfe0e2;
-  --text-soft: #8fa6aa;
-  --text-faint: #7a9498;
-  --text-hover: #ffffff;
-}
-
-/* Ambient synth glow: two faint radial washes, mostly background so the UI
-   still reads cleanly when they are ignored. */
-.control-shell[data-interface-theme="miku"] {
-  background:
-    radial-gradient(1100px 520px at 18% -8%, rgb(57 197 187 / 9%), transparent 62%),
-    radial-gradient(900px 480px at 88% 112%, rgb(255 107 157 / 5%), transparent 60%),
-    var(--surface-bg);
-}
-/* A thin turquoise-to-pink line tops the sidebar, like a synth readout. */
-.control-shell[data-interface-theme="miku"] .sidebar { border-inline-end-color: color-mix(in srgb, var(--ui-accent) 26%, var(--border)); }
-.control-shell[data-interface-theme="miku"] .sidebar::before {
-  position: absolute; top: 0; inset-inline-end: 0; inset-inline-start: 0; height: 2px;
-  background: linear-gradient(90deg, transparent, var(--ui-accent) 32%, var(--ui-accent) 68%, var(--miku-pink));
-  content: ""; opacity: .85; pointer-events: none;
-}
-/* Equalizer meter: a small animated waveform, teal with one pink bar. */
-.miku-waveform { display: none; }
-.control-shell[data-interface-theme="miku"] .miku-waveform { display: flex; align-items: flex-end; gap: 3px; height: 12px; margin: .1rem .05rem .4rem auto; }
-.control-shell[data-interface-theme="miku"] .miku-waveform i {
-  width: 2px; height: 10px; border-radius: 2px; background: var(--ui-accent);
-  transform-origin: center; animation: miku-wave 1.5s ease-in-out infinite;
-}
-.control-shell[data-interface-theme="miku"] .miku-waveform i:nth-child(2) { animation-delay: .22s; height: 6px; }
-.control-shell[data-interface-theme="miku"] .miku-waveform i:nth-child(3) { animation-delay: .44s; height: 12px; }
-.control-shell[data-interface-theme="miku"] .miku-waveform i:nth-child(4) { animation-delay: .66s; height: 8px; background: var(--miku-pink); }
-.control-shell[data-interface-theme="miku"] .miku-waveform i:nth-child(5) { animation-delay: .88s; height: 5px; background: var(--miku-soft-cyan); }
-@keyframes miku-wave { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
-/* Miku mascot: a small transparent companion that settles in the empty space
-   below the device preview and above the connection status. Decorative only —
-   it never intercepts pointer events and stays out of the way of controls. */
-.miku-mascot { display: none; }
-.control-shell[data-interface-theme="miku"] .miku-mascot {
-  display: block;
-  height: clamp(70px, 9vh, 96px);
-  width: auto;
-  align-self: flex-end;
-  margin: .1rem .2rem .2rem 0;
-  pointer-events: none;
-  user-select: none;
-  filter: drop-shadow(0 6px 14px rgb(0 0 0 / 35%));
-  animation: miku-mascot-idle 4.5s ease-in-out infinite;
-}
-@keyframes miku-mascot-idle {
-  0%, 100% { transform: translateY(0); }
-  10% { transform: translateY(-5px); }
-  20% { transform: translateY(0); }
-  68% { transform: translateY(0) translateX(0) rotate(0deg); }
-  74% { transform: translateY(-3px) translateX(3px) rotate(-2deg); }
-  82% { transform: translateY(0) translateX(0) rotate(0deg); }
-}
-/* Primary accent hover deepens to Miku teal instead of brightening. */
-.control-shell[data-interface-theme="miku"] .empty-connect-action:hover,
-.control-shell[data-interface-theme="miku"] .setting-action button:not(:disabled):hover,
-.control-shell[data-interface-theme="miku"] .device-debug-actions button:not(:disabled):hover,
-.control-shell[data-interface-theme="miku"] .segmented button.selected:hover,
-.control-shell[data-interface-theme="miku"] .dpi-header-actions button:not(:disabled):hover,
-.control-shell[data-interface-theme="miku"] .apply-bar-apply:hover:not(:disabled) { background: #159a96; border-color: #159a96; filter: none; }
-/* The pending-flash bar follows the accent in Miku rather than the mono white. */
-.control-shell[data-interface-theme="miku"] .apply-bar-apply { border-color: var(--ui-accent); background: var(--ui-accent); color: var(--ui-accent-ink); }
-/* Selected tab underline reads as soft cyan. */
-.control-shell[data-interface-theme="miku"] .workspace-tabs button[aria-selected="true"]::after { background: var(--miku-soft-cyan); }
-
-/* ============================================================
-   Catppuccin theme family — Mocha, Macchiato and Frappé: three
-   dark, cozy developer palettes. Each variant block below only
-   supplies its raw palette; the shared block after them maps that
-   palette onto the semantic + component tokens the rest of the UI
-   reads, so nothing is recolored case by case.
-   ============================================================ */
-.control-shell[data-interface-theme="catppuccin-mocha"] {
-  --ctp-rosewater: #f5e0e6; --ctp-flamingo: #f2cdcd; --ctp-pink: #f5c2e7;
-  --ctp-mauve: #cba6f7; --ctp-red: #f38ba8; --ctp-maroon: #eba0ac;
-  --ctp-peach: #fab387; --ctp-yellow: #f9e2af; --ctp-green: #a6e3a1;
-  --ctp-teal: #94e2d5; --ctp-sky: #89dceb; --ctp-sapphire: #74c7ec;
-  --ctp-blue: #89b4fa; --ctp-lavender: #b4befe;
-  --ctp-text: #cdd6f4; --ctp-subtext1: #bac2de; --ctp-subtext0: #a6adc8;
-  --ctp-overlay2: #9399b2; --ctp-overlay1: #7f849c; --ctp-overlay0: #6c7086;
-  --ctp-surface2: #585b70; --ctp-surface1: #45475a; --ctp-surface0: #313244;
-  --ctp-base: #1e1e2e; --ctp-mantle: #181825; --ctp-crust: #11111b;
-}
-.control-shell[data-interface-theme="catppuccin-macchiato"] {
-  --ctp-rosewater: #f4dbd6; --ctp-flamingo: #f0c6c6; --ctp-pink: #f5bde6;
-  --ctp-mauve: #c6a0f6; --ctp-red: #ed8796; --ctp-maroon: #ee99a0;
-  --ctp-peach: #f5a97f; --ctp-yellow: #eed49f; --ctp-green: #a6da95;
-  --ctp-teal: #8bd5ca; --ctp-sky: #91d7e3; --ctp-sapphire: #7dc4e4;
-  --ctp-blue: #8aadf4; --ctp-lavender: #b7bdf8;
-  --ctp-text: #cad3f5; --ctp-subtext1: #b8c0e0; --ctp-subtext0: #a5adcb;
-  --ctp-overlay2: #939ab7; --ctp-overlay1: #8087a2; --ctp-overlay0: #6e738d;
-  --ctp-surface2: #5b6078; --ctp-surface1: #494d64; --ctp-surface0: #363a4f;
-  --ctp-base: #24273a; --ctp-mantle: #1e2030; --ctp-crust: #181926;
-}
-.control-shell[data-interface-theme="catppuccin-frappe"] {
-  --ctp-rosewater: #f2d5cf; --ctp-flamingo: #eebebe; --ctp-pink: #f4b8e4;
-  --ctp-mauve: #ca9ee6; --ctp-red: #e78284; --ctp-maroon: #ea999c;
-  --ctp-peach: #ef9f76; --ctp-yellow: #e5c890; --ctp-green: #a6d189;
-  --ctp-teal: #81c8be; --ctp-sky: #99d1db; --ctp-sapphire: #85c1dc;
-  --ctp-blue: #8caaee; --ctp-lavender: #babbf1;
-  --ctp-text: #c6d0f5; --ctp-subtext1: #b5bfe2; --ctp-subtext0: #a5adce;
-  --ctp-overlay2: #949cbb; --ctp-overlay1: #838ba7; --ctp-overlay0: #737994;
-  --ctp-surface2: #626880; --ctp-surface1: #51576d; --ctp-surface0: #414559;
-  --ctp-base: #303446; --ctp-mantle: #292c3c; --ctp-crust: #232634;
-}
-
-.control-shell[data-interface-theme="nier-automata"] {
-  color: var(--foreground);
-
-  --nier-canvas: #2f2d26; --nier-sidebar: #282620; --nier-terminal: #2b2923;
-  --nier-code: #33312a; --nier-surface: #36342c; --nier-raised: #3b3930;
-  --nier-overlay: #403e35; --nier-control: #3d3b33; --nier-input: #454338;
-  --nier-selection: #45433a; --nier-border: #4f4d45; --nier-border-soft: #49473f;
-  --nier-text: #d1cdb7; --nier-placeholder: #b2b0a3; --nier-update: #b5b096;
-  --nier-muted: #a8a593; --nier-ghost: #9d9986;
-  --nier-error: #c96b57; --nier-warning: #c2b169; --nier-success: #a8b083;
-
-  --background: var(--nier-sidebar);
-  --foreground: var(--nier-text);
-  --surface: var(--nier-canvas);
-  --surface-soft: var(--nier-sidebar);
-  --surface-elevated: var(--nier-surface);
-  --surface-elevated-hover: var(--nier-raised);
-  --surface-hover: var(--nier-overlay);
-  --border: var(--nier-border);
-  --primary: var(--nier-text);
-  --primary-hover: color-mix(in srgb, var(--nier-text) 82%, #ffffff);
-  --primary-ink: var(--nier-canvas);
-  --secondary: var(--nier-update);
-  --success: var(--nier-success);
-  --warning: var(--nier-warning);
-  --destructive: var(--nier-error);
-  --info: var(--nier-update);
-  --muted: var(--nier-muted);
-  --muted-foreground: var(--nier-ghost);
-  --focus: var(--nier-text);
-
-  --ui-accent: var(--primary);
-  --ui-accent-ink: var(--primary-ink);
-  --ui-accent-soft: color-mix(in srgb, var(--primary) 16%, transparent);
-
-  --ink: var(--background);
-  --sidebar: var(--surface-soft);
-  --well: var(--surface);
-  --card: var(--surface-elevated);
-  --raised: var(--surface-elevated-hover);
-  --input: var(--nier-input);
-  --control: var(--nier-control);
-  --hover: var(--surface-hover);
-
-  --line: var(--border);
-  --line-soft: var(--nier-border-soft);
-  --line-strong: var(--nier-border);
-  --edge: var(--nier-ghost);
-
-  --text: var(--foreground);
-  --bright: var(--nier-text);
-  --dim: var(--nier-placeholder);
-  --faint: var(--nier-muted);
-  --ghost: var(--nier-ghost);
-
-  --surface-bg: var(--background);
-  --surface-bg-tint: color-mix(in srgb, var(--background) 96%, transparent);
-  --surface-tabs: color-mix(in srgb, var(--surface) 96%, transparent);
-  --surface-sidebar: var(--surface-soft);
-  --surface-panel: var(--surface);
-  --surface-panel-soft: var(--nier-terminal);
-  --surface-panel-strong: var(--surface-elevated);
-  --surface-menu: var(--nier-code);
-  --surface-control: var(--nier-control);
-  --surface-input: var(--nier-input);
-  --surface-raised: var(--surface-elevated-hover);
-  --surface-strong: var(--nier-overlay);
-  --surface-hover-soft: var(--nier-raised);
-  --surface-hover-strong: var(--nier-overlay);
-  --surface-hover-alt: var(--nier-code);
-  --surface-dialog: var(--nier-raised);
-  --surface-dialog-hover: var(--nier-overlay);
-  --surface-superstrike: color-mix(in srgb, var(--nier-raised) 58%, transparent);
-
-  --border-rule: var(--nier-border-soft);
-  --border-soft: var(--nier-border-soft);
-  --border-hover: var(--nier-border);
-
-  --text-input: var(--nier-text);
-  --text-strong: var(--nier-text);
-  --text-soft: var(--nier-muted);
-  --text-faint: var(--nier-muted);
-  --text-hover: var(--nier-text);
-
-  --tone-dim: var(--nier-ghost);
-  --tone-ghost: var(--nier-muted);
-  --tone-text: var(--nier-text);
-  --tone-sub: var(--nier-placeholder);
-  --tone-deep: var(--nier-sidebar);
-  --tone-base: var(--nier-canvas);
-  --tone-mantle: var(--nier-terminal);
-  --tone-s0: var(--nier-code);
-  --tone-s1: var(--nier-raised);
-}
-
-.control-shell[data-interface-theme="nier-automata"] :is(
-  .setting-card,
-  .profile-disclosure,
-  .egg-collapsible,
-  .egg-experimental,
-  .workspace-tab-empty,
-  .interface-setting-card,
-  .device-overview,
-  .empty-state
-) {
-  background: color-mix(in srgb, var(--nier-surface) 76%, transparent);
-}
-
-
-/* Shared semantic mapping for the whole family. The accents stay understated:
-   surfaces own ~85% of the screen, text ~10%, mauve/blue interactions ~5%. */
-.control-shell[data-interface-theme^="catppuccin-"] {
-  --background: var(--ctp-crust);
-  --foreground: var(--ctp-text);
-  --surface: var(--ctp-base);
-  --surface-soft: var(--ctp-mantle);
-  --surface-elevated: var(--ctp-surface0);
-  --surface-elevated-hover: var(--ctp-surface1);
-  --surface-hover: var(--ctp-surface2);
-  --border: var(--ctp-surface1);
-  --primary: var(--ctp-mauve);
-  --primary-hover: color-mix(in srgb, var(--ctp-mauve) 78%, var(--ctp-text));
-  --primary-ink: var(--ctp-crust);
-  --secondary: var(--ctp-blue);
-  --success: var(--ctp-green);
-  --warning: var(--ctp-yellow);
-  --destructive: var(--ctp-red);
-  --info: var(--ctp-sapphire);
-  --muted: var(--ctp-subtext0);
-  --muted-foreground: var(--ctp-overlay2);
-  --focus: var(--ctp-mauve);
-
-  --ui-accent: var(--primary);
-  --ui-accent-ink: var(--primary-ink);
-  --ui-accent-soft: color-mix(in srgb, var(--primary) 16%, transparent);
-
-  --ink: var(--background);
-  --sidebar: var(--surface-soft);
-  --well: var(--surface);
-  --card: var(--surface-elevated);
-  --raised: var(--surface-elevated-hover);
-  --input: var(--surface-elevated);
-  --control: var(--surface-elevated);
-  --hover: var(--surface-hover);
-
-  --line: var(--border);
-  --line-soft: var(--ctp-surface0);
-  --line-strong: var(--ctp-surface2);
-  --edge: var(--ctp-overlay0);
-
-  --text: var(--foreground);
-  --bright: var(--ctp-text);
-  --dim: var(--ctp-subtext1);
-  --faint: var(--ctp-overlay2);
-  --ghost: var(--ctp-overlay1);
-
-  --surface-bg: var(--background);
-  --surface-bg-tint: color-mix(in srgb, var(--background) 96%, transparent);
-  --surface-tabs: color-mix(in srgb, var(--surface) 96%, transparent);
-  --surface-sidebar: var(--surface-soft);
-  --surface-panel: var(--surface);
-  --surface-panel-soft: var(--surface-soft);
-  --surface-panel-strong: var(--surface-elevated);
-  --surface-menu: var(--surface-elevated);
-  --surface-control: var(--surface-elevated);
-  --surface-input: var(--surface-elevated);
-  --surface-raised: var(--surface-elevated-hover);
-  --surface-strong: var(--surface-elevated-hover);
-  --surface-hover-soft: var(--ctp-surface1);
-  --surface-hover-strong: var(--ctp-surface2);
-  --surface-hover-alt: var(--ctp-surface0);
-  --surface-dialog: var(--ctp-surface1);
-  --surface-dialog-hover: var(--ctp-surface2);
-  --surface-superstrike: color-mix(in srgb, var(--ctp-surface1) 58%, transparent);
-
-  --border-rule: var(--ctp-surface0);
-  --border-soft: var(--ctp-surface0);
-  --border-hover: var(--ctp-surface2);
-
-  --text-input: var(--ctp-text);
-  --text-strong: var(--ctp-subtext1);
-  --text-soft: var(--ctp-subtext0);
-  --text-faint: var(--ctp-overlay2);
-  --text-hover: var(--ctp-text);
-
-  --tone-dim: var(--ctp-overlay0);
-  --tone-ghost: var(--ctp-overlay1);
-  --tone-text: var(--ctp-text);
-  --tone-sub: var(--ctp-subtext1);
-  --tone-deep: var(--ctp-crust);
-  --tone-base: var(--ctp-base);
-  --tone-mantle: var(--ctp-mantle);
-  --tone-s0: var(--ctp-surface0);
-  --tone-s1: var(--ctp-surface1);
-}
-
-/* Component-level family touches. Everything else flows through the token
-   mapping above, so these only cover where the UI hardcodes a behaviour the
-   palette cannot express: status lights, accent hover, the pending bar, and
-   the destructive/warning notes. */
-.control-shell:is([data-interface-theme^="catppuccin-"],[data-interface-theme="nier-automata"]) .device-dot:not(.is-idle),
-.control-shell:is([data-interface-theme^="catppuccin-"],[data-interface-theme="nier-automata"]) .device-status > .status-dot:not(.is-idle),
-.control-shell:is([data-interface-theme^="catppuccin-"],[data-interface-theme="nier-automata"]) .live-status i,
-.control-shell:is([data-interface-theme^="catppuccin-"],[data-interface-theme="nier-automata"]):not(.is-empty) .sidebar-product-status .status-dot {
-  background: var(--success);
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 14%, transparent);
-}
-.control-shell:is([data-interface-theme^="catppuccin-"],[data-interface-theme="nier-automata"]) .device-dot.is-idle,
-.control-shell:is([data-interface-theme^="catppuccin-"],[data-interface-theme="nier-automata"]) .status-dot.is-idle,
-.control-shell:is([data-interface-theme^="catppuccin-"],[data-interface-theme="nier-automata"]) .sidebar-product-status .status-dot {
-  background: var(--tone-dim);
-  box-shadow: none;
-}
-.control-shell:is([data-interface-theme^="catppuccin-"],[data-interface-theme="nier-automata"]) .battery-icon { color: var(--tone-text); }
-.control-shell:is([data-interface-theme^="catppuccin-"],[data-interface-theme="nier-automata"]) .battery-icon.is-charging { color: var(--success); }
-.control-shell:is([data-interface-theme^="catppuccin-"],[data-interface-theme="nier-automata"]) .battery-icon.is-low,
-.control-shell:is([data-interface-theme^="catppuccin-"],[data-interface-theme="nier-automata"]) .battery-icon.is-dead { color: var(--destructive); }
-.control-shell:is([data-interface-theme^="catppuccin-"],[data-interface-theme="nier-automata"]) .battery-icon.is-unknown { color: var(--tone-dim); }
-.control-shell:is([data-interface-theme^="catppuccin-"],[data-interface-theme="nier-automata"]) .sidebar-battery::before { color: var(--tone-dim); }
-/* Active tab underline reads as a soft mauve instead of the mono white. */
-.control-shell:is([data-interface-theme^="catppuccin-"],[data-interface-theme="nier-automata"]) .workspace-tabs button[aria-selected="true"]::after { background: var(--primary); }
-/* Accent buttons deepen to a brighter mauve on hover. */
-.control-shell:is([data-interface-theme^="catppuccin-"],[data-interface-theme="nier-automata"]) .empty-connect-action:hover,
-.control-shell:is([data-interface-theme^="catppuccin-"],[data-interface-theme="nier-automata"]) .setting-action button:not(:disabled):hover,
-.control-shell:is([data-interface-theme^="catppuccin-"],[data-interface-theme="nier-automata"]) .device-debug-actions button:not(:disabled):hover,
-.control-shell:is([data-interface-theme^="catppuccin-"],[data-interface-theme="nier-automata"]) .segmented button.selected:hover,
-.control-shell:is([data-interface-theme^="catppuccin-"],[data-interface-theme="nier-automata"]) .dpi-header-actions button:not(:disabled):hover,
-.control-shell:is([data-interface-theme^="catppuccin-"],[data-interface-theme="nier-automata"]) .apply-bar-apply:hover:not(:disabled) {
-  background: var(--primary-hover);
-  border-color: var(--primary-hover);
-  filter: none;
-}
-.control-shell:is([data-interface-theme^="catppuccin-"],[data-interface-theme="nier-automata"]) .apply-bar-apply {
-  border-color: var(--primary);
-  background: var(--primary);
-  color: var(--primary-ink);
-}
-.control-shell:is([data-interface-theme^="catppuccin-"],[data-interface-theme="nier-automata"]) .interface-switch-row input:checked {
-  background-image: radial-gradient(circle at calc(100% - .56rem) 50%, var(--tone-deep) 0 .34rem, transparent .36rem);
-}
-/* Destructive and status notes adopt the muted Catppuccin accents. */
-.control-shell:is([data-interface-theme^="catppuccin-"],[data-interface-theme="nier-automata"]) .interface-reset {
-  border-color: color-mix(in srgb, var(--destructive) 45%, var(--tone-s0));
-  background: color-mix(in srgb, var(--destructive) 10%, var(--tone-s0));
-  color: var(--destructive);
-}
-.control-shell:is([data-interface-theme^="catppuccin-"],[data-interface-theme="nier-automata"]) .testing-note {
-  border-color: color-mix(in srgb, var(--warning) 32%, var(--tone-s0));
-  background: color-mix(in srgb, var(--warning) 7%, var(--tone-s0));
-  color: var(--tone-sub);
-}
-.control-shell:is([data-interface-theme^="catppuccin-"],[data-interface-theme="nier-automata"]) .testing-note strong,
-.control-shell:is([data-interface-theme^="catppuccin-"],[data-interface-theme="nier-automata"]) .egg-experimental summary small { color: var(--warning); }
-.control-shell:is([data-interface-theme^="catppuccin-"],[data-interface-theme="nier-automata"]) .egg-warning { color: color-mix(in srgb, var(--warning) 74%, var(--tone-ghost)); }
-.control-shell:is([data-interface-theme^="catppuccin-"],[data-interface-theme="nier-automata"]) .build-note { color: color-mix(in srgb, var(--warning) 62%, var(--tone-ghost)); }
-.control-shell:is([data-interface-theme^="catppuccin-"],[data-interface-theme="nier-automata"]) .device-overview .device-thumbnail {
-  background: radial-gradient(circle at 50% 45%, var(--tone-s1) 0, var(--tone-s0) 72%);
-}
-.control-shell:is([data-interface-theme^="catppuccin-"],[data-interface-theme="nier-automata"]) #pending-changes-bar {
-  border-color: color-mix(in srgb, var(--primary) 32%, var(--tone-s1));
-  background: color-mix(in srgb, var(--primary) 8%, var(--tone-base));
-}
-/* Profile delete stays destructive, in the theme's red rather than the stock one. */
-.control-shell:is([data-interface-theme^="catppuccin-"],[data-interface-theme="nier-automata"]) .icon-button.profile-delete-button {
-  border-color: color-mix(in srgb, var(--destructive) 45%, var(--tone-s1));
-  background: color-mix(in srgb, var(--destructive) 12%, var(--tone-s0));
-  color: var(--destructive);
-}
-.control-shell:is([data-interface-theme^="catppuccin-"],[data-interface-theme="nier-automata"]) .icon-button.profile-delete-button:hover:not(:disabled) {
-  border-color: var(--destructive);
-  background: color-mix(in srgb, var(--destructive) 30%, var(--tone-s0));
-  color: var(--tone-text);
-}
-.control-shell button:focus-visible, .control-shell select:focus-visible, .control-shell input:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
-
-.control-shell { display: grid; grid-template-columns: 260px minmax(0, 1fr); grid-template-rows: auto 1fr; min-height: 100vh; }
-.control-shell.sidebar-hidden { grid-template-columns: minmax(0, 1fr); }
-.control-shell.sidebar-hidden .sidebar { display: none; }
-
-.sidebar { position: sticky; top: 0; display: flex; height: 100vh; flex-direction: column; padding: 1.5rem; border-inline-end: 1px solid var(--line); background: var(--sidebar); }
-.control-panel { position: relative; width: min(100% - 4rem, 1180px); margin: 0 auto; padding: 1.5rem 0 2rem; overflow-y: auto; scrollbar-width: none; }
-.control-panel::-webkit-scrollbar { display: none; width: 0; height: 0; }
-.panel-top { position: sticky; top: 0; z-index: 5; background: var(--ink); }
-.panel-title { display: flex; align-items: center; gap: .9rem; }
-
-.device-label, .overline { margin: 0 0 .7rem; color: var(--text-soft); font-family: var(--font-mono); font-size: .66rem; letter-spacing: .1em; }
-.demo-wordmark { display: flex; align-items: center; gap: .5rem; margin-bottom: 4rem; font-size: 1.05rem; font-weight: 600; letter-spacing: -.025em; }
-.demo-wordmark img { width: auto; height: 1.5rem; }
-.sidebar > .build-badge { margin-top: auto; }
-.build-badge { color: var(--text-soft); font-family: var(--font-mono); font-size: .64rem; letter-spacing: .06em; white-space: nowrap; }
-.demo-wordmark .build-badge { margin-inline-start: .15rem; padding: .12rem .45rem; border: 1px solid var(--border-soft); border-radius: 1rem; background: var(--surface-raised); font-size: .56rem; }
-.brand-links { display: flex; align-items: center; gap: .7rem; margin-inline-start: auto; }
-.brand-links a { display: flex; color: var(--text-soft); transition: color .18s ease; }
-.brand-links a:hover { color: var(--ui-accent); }
-.brand-links svg { width: auto; height: .85rem; }
-.brand-links a[title="GitHub"] svg { height: 1rem; }
-.build-note { display: block; margin-top: .25rem; color: color-mix(in srgb, var(--warning) 72%, var(--text-soft)); font-family: var(--font-mono); font-size: .55rem; letter-spacing: .04em; }
-
-.device-panel { overflow: hidden; border: 1px solid var(--border); border-radius: 10px; background: var(--raised); }
-.sidebar-device-list { max-height: min(34vh, 15rem); overflow-y: auto; overscroll-behavior: contain; scrollbar-color: var(--border-hover) transparent; scrollbar-width: thin; }
-.device-row { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .7rem; width: 100%; padding: .72rem .78rem; border: 0; border-bottom: 1px solid var(--line); background: transparent; text-align: start; }
-.device-row:hover { background: var(--surface-hover); }
-.device-row.is-selected { background: var(--ui-accent-soft); }
-.device-row-copy { display: block; min-width: 0; }
-.device-row-copy strong { display: block; overflow: hidden; color: var(--bright); font-size: .82rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
-.device-row-copy small { display: block; margin-top: .2rem; overflow: hidden; color: var(--muted); font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
-.device-add { display: block; width: 100%; padding: .68rem .78rem; border: 0; background: transparent; color: var(--muted); text-align: start; font-size: .78rem; font-weight: 600; }
-.device-add::before { margin-inline-end: .5rem; color: var(--ui-accent); content: "+"; }
-.device-add:hover { background: var(--surface-hover); color: var(--text-hover); }
-.device-add:disabled { cursor: wait; opacity: .7; }
-
-.device-dot { width: .48rem; height: .48rem; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px color-mix(in srgb, var(--success) 10%, transparent); }
-.device-dot.is-idle, .status-dot.is-idle { background: var(--ghost); box-shadow: none; }
-.control-shell .device-dot:not(.is-idle),
-.control-shell .device-status > .status-dot:not(.is-idle),
-.control-shell .live-status i { background: var(--ui-accent); box-shadow: 0 0 0 3px var(--ui-accent-soft); }
-
-nav { display: grid; gap: .3rem; margin-top: 1.4rem; }
-.section-nav { display: flex; gap: .15rem; }
-.nav-item { display: grid; width: 2rem; height: 2rem; box-sizing: border-box; padding: 0; place-items: center; border: 0; border-radius: 6px; background: transparent; color: var(--muted); text-decoration: none; }
-.nav-item svg { width: 1.05rem; height: 1.05rem; }
-.nav-item.has-label { width: auto; grid-auto-flow: column; gap: .42rem; padding: 0 .6rem; place-items: center; font-size: .74rem; }
-.nav-item:hover { background: var(--surface-hover); color: var(--text-hover); }
-.nav-item.is-debug { margin-inline-start: auto; }
-.control-shell .nav-item[aria-current="true"] { background: var(--ui-accent-soft); color: var(--ui-accent); }
-
-/* Globe language picker: globe icon opens an upward popup menu.
-   Plain panel tokens (no backdrop-filter) keep it cheap and legible
-   in every theme. */
-.locale-picker { position: relative; }
-.locale-menu {
-  position: absolute;
-  bottom: calc(100% + .45rem);
-  inset-inline-start: 0;
-  z-index: 50;
-  display: grid;
-  gap: .15rem;
-  min-width: 9.5rem;
-  padding: .3rem;
-  border: 1px solid var(--border);
-  border-radius: 10px;
-  background: var(--surface-menu);
-  box-shadow: 0 14px 34px rgb(0 0 0 / .5);
-}
-.locale-menu button {
-  display: flex;
-  align-items: center;
-  gap: .5rem;
-  padding: .45rem .6rem;
-  border: 0;
-  border-radius: 7px;
-  background: transparent;
-  color: var(--dim);
-  font-size: .74rem;
-  text-align: start;
-  cursor: pointer;
-}
-.locale-menu button:hover { background: var(--surface-hover); color: var(--text-hover); }
-.locale-menu button.is-selected { color: var(--text-strong); font-weight: 650; }
-
-.support-dialog { width: min(38rem, calc(100vw - 2rem)); max-height: min(46rem, calc(100vh - 2rem)); padding: 0; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-dialog); color: var(--text-strong); box-shadow: 0 24px 80px rgb(0 0 0 / 45%); }
-.support-dialog::backdrop { background: rgb(0 0 0 / 68%); backdrop-filter: blur(3px); }
-.support-dialog-inner { display: grid; gap: 1rem; padding: 1.25rem; }
-.support-dialog header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
-.support-dialog header .overline { font-size: .72rem; letter-spacing: .12em; }
-.support-dialog h2 { margin: .15rem 0 0; color: var(--bright); font-size: 1.35rem; font-weight: 550; }
-.support-turnstile { min-height: 65px; }
-.support-dialog header button { width: 2rem; height: 2rem; padding: 0; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-control); color: var(--muted); font-size: 1.15rem; }
-.support-intro, .support-message, .support-consent, .share-profile-intro { margin: 0; color: var(--dim); font-size: .82rem; line-height: 1.6; text-wrap: pretty; }
-.support-search, .support-form input:not([type="checkbox"]), .support-form select { width: 100%; padding: .65rem .7rem; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-input); color: var(--text-input); font-size: .78rem; }
-.support-results { display: grid; max-height: 17rem; overflow: auto; border: 1px solid var(--border); border-radius: 8px; }
-.support-results article { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem; border-bottom: 1px solid var(--border-rule); }
-.support-results article:last-child { border-bottom: 0; }
-.support-results strong, .support-results small { display: block; }
-.support-results small { margin-top: .2rem; color: var(--muted); font-size: .65rem; text-transform: capitalize; }
-.support-results button { padding: .42rem .6rem; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-control); color: var(--dim); font-size: .68rem; }
-.support-results button b { color: var(--ui-accent); }
-.support-results > p { padding: 1.3rem; color: var(--muted); text-align: center; font-size: .75rem; }
-.support-primary { justify-self: end; padding: .65rem .9rem; border: 1px solid var(--ui-accent); border-radius: 7px; background: var(--ui-accent); color: var(--ui-accent-ink); font-size: .75rem; font-weight: 650; }
-.support-form { display: grid; gap: .8rem; }
-.support-form > label, .support-two label { display: grid; gap: .35rem; color: var(--dim); font-size: .7rem; }
-.support-form label > small { color: var(--faint); }
-.support-two { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
-.support-scope { margin: 0; padding: .7rem; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-control); color: var(--dim); font-size: .68rem; line-height: 1.5; }
-.support-actions { display: flex; justify-content: flex-end; gap: .5rem; }
-.support-actions > button:not(.support-primary) { padding: .65rem .9rem; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-control); color: var(--dim); font-size: .75rem; }
-.support-message { padding: .6rem .7rem; border-radius: 7px; background: var(--ui-accent-soft); color: var(--ui-accent); }
-.support-secondary { justify-self: end; padding: .55rem .75rem; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-control); color: var(--dim); font-size: .7rem; }
-.feedback-description { margin: 0; color: var(--dim); font-size: .82rem; line-height: 1.6; text-wrap: pretty; }
-.feedback-handle { display: grid; gap: .35rem; color: var(--dim); font-size: .8rem; }
-.feedback-handle input { width: 100%; box-sizing: border-box; padding: .6rem .7rem; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-input); color: var(--text-input); font-family: var(--font-sans); font-size: .85rem; }
-.feedback-handle input:focus { outline: none; border-color: var(--accent); }
-.feedback-error { margin: 0; padding: .55rem .7rem; border: 1px solid color-mix(in srgb, var(--destructive) 45%, var(--border)); border-radius: 7px; background: color-mix(in srgb, var(--destructive) 12%, var(--surface-control)); color: var(--destructive); font-size: .7rem; line-height: 1.45; }
-.feedback-actions { display: flex; justify-content: flex-end; gap: .5rem; }
-.feedback-actions > button { padding: .6rem .9rem; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-control); color: var(--dim); font-size: .75rem; }
-.feedback-actions > button.is-primary { border-color: var(--ui-accent); background: var(--ui-accent); color: var(--ui-accent-ink); font-weight: 650; }
-.feedback-actions > button.is-primary:disabled { opacity: .5; cursor: default; }
-.feedback-actions > button:not(.is-primary):hover { background: var(--hover); color: var(--bright); }
-/* Game/app request dialog (GameRequestDialog.tsx) */
-.gamereq-hint { margin: 0; color: var(--faint); font-size: .75rem; }
-.gamereq-mono { font-family: var(--font-mono); }
-.feedback-handle input.gamereq-mono { font-size: .76rem; }
-.gamereq-kind, .gamereq-os { display: inline-flex; justify-self: start; gap: .25rem; padding: .25rem; border-radius: 999px; background: var(--surface-control); }
-.gamereq-kind button, .gamereq-os button { padding: .38rem .9rem; border: 0; border-radius: 999px; background: transparent; color: var(--dim); font-size: .78rem; font-weight: 600; cursor: pointer; }
-.gamereq-kind button:hover, .gamereq-os button:hover { background: var(--hover); color: var(--bright); }
-.gamereq-kind button.is-active, .gamereq-os button.is-active { background: var(--ui-accent); color: var(--ui-accent-ink); }
-.gamereq-os button { padding: .3rem .75rem; font-size: .72rem; }
-.gamereq-exe { display: grid; gap: .6rem; }
-.gamereq-finder { display: grid; gap: .55rem; padding: .85rem; border-radius: 10px; background: var(--surface-control); }
-.gamereq-finder-title { margin: 0; color: var(--bright); font-size: .8rem; font-weight: 650; }
-.gamereq-finder .gamereq-os { background: var(--surface-input); }
-.gamereq-running { display: grid; gap: .5rem; }
-.gamereq-chip { justify-self: start; padding: .4rem .85rem; border: 0; border-radius: 999px; background: var(--ui-accent-soft); color: var(--bright); font-size: .75rem; font-weight: 650; cursor: pointer; }
-.gamereq-chip:hover { background: var(--hover); }
-.gamereq-apps { display: grid; gap: .25rem; max-height: 12rem; margin: 0; padding: 0; list-style: none; overflow-y: auto; }
-.gamereq-apps button { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .45rem .55rem; border: 0; border-radius: 8px; background: transparent; color: inherit; text-align: start; cursor: pointer; }
-.gamereq-apps button:hover { background: var(--hover); }
-.gamereq-apps img, .gamereq-apps svg { flex: 0 0 auto; width: 1.5rem; height: 1.5rem; object-fit: contain; }
-.gamereq-apps svg { padding: .15rem; box-sizing: border-box; color: var(--muted); }
-.gamereq-apps span { display: grid; min-width: 0; }
-.gamereq-apps strong { color: var(--bright); font-size: .8rem; font-weight: 650; }
-.gamereq-apps small { overflow: hidden; color: var(--faint); font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
-.gamereq-command { display: flex; align-items: flex-start; gap: .5rem; padding: .6rem .65rem; border-radius: 8px; background: var(--surface-input); }
-.gamereq-command code { flex: 1; min-width: 0; color: var(--text-input); font-size: .72rem; line-height: 1.55; overflow-wrap: anywhere; white-space: pre-wrap; }
-.gamereq-command button { display: grid; flex: 0 0 auto; place-items: center; width: 1.9rem; height: 1.9rem; padding: 0; border: 0; border-radius: 6px; background: var(--surface-control); color: var(--dim); cursor: pointer; }
-.gamereq-command button:hover { background: var(--hover); color: var(--bright); }
-.gamereq-embed { display: grid; gap: .75rem; padding: .9rem 1rem; border-inline-start: 4px solid var(--ui-accent); border-radius: 6px; background: var(--surface-control); }
-.gamereq-embed-title { margin: 0; color: var(--bright); font-size: .92rem; font-weight: 700; }
-.gamereq-embed-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem 1rem; }
-.gamereq-embed-fields > div { display: grid; gap: .2rem; min-width: 0; }
-.gamereq-embed-fields > div.is-wide { grid-column: 1 / -1; }
-.gamereq-embed-fields span { color: var(--dim); font-size: .72rem; font-weight: 700; }
-.gamereq-embed-fields strong, .gamereq-embed-fields p { margin: 0; color: var(--bright); font-size: .82rem; overflow-wrap: anywhere; }
-.gamereq-embed-fields code { justify-self: start; max-width: 100%; padding: .1rem .35rem; border-radius: 4px; background: var(--surface-input); color: var(--text-input); font-size: .74rem; overflow-wrap: anywhere; }
-.gamereq-embed-footer { display: flex; align-items: center; gap: .35rem; margin: 0; color: var(--faint); font-size: .72rem; }
-.gamereq-notice { margin: 0; padding: .55rem .7rem; border-radius: 7px; background: color-mix(in srgb, var(--warning) 14%, var(--surface-control)); color: color-mix(in srgb, var(--warning) 75%, var(--bright)); font-size: .74rem; line-height: 1.45; }
-@media (max-width: 520px) { .gamereq-embed-fields { grid-template-columns: minmax(0, 1fr); } }
-.support-diagnostics { display: grid; gap: .7rem; padding-top: .2rem; }
-.support-diagnostics h3, .support-diagnostics p { margin: 0; }
-.support-diagnostics h3 { color: var(--bright); font-size: .9rem; }
-.support-diagnostics p, .support-diagnostics label { color: var(--dim); font-size: .68rem; line-height: 1.45; }
-.support-diagnostics pre { max-height: 12rem; margin: 0; padding: .65rem; overflow: auto; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-input); color: var(--text-soft); font-size: .58rem; white-space: pre-wrap; }
-@media (max-width: 540px) { .support-two { grid-template-columns: 1fr; } }
-
-.whatsnew-body { margin: 0; color: var(--dim); font-size: .78rem; line-height: 1.55; }
-.whatsnew-download {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: .6rem;
-  padding: .7rem 1rem;
-  border: 1px solid var(--ui-accent);
-  border-radius: 8px;
-  background: var(--ui-accent);
-  color: var(--ui-accent-ink);
-  font-size: .78rem;
-  font-weight: 650;
-  text-decoration: none;
-  transition: filter .18s ease, transform .18s ease;
-}
-.whatsnew-download:hover { filter: brightness(1.06); transform: translateY(-1px); }
-.whatsnew-download svg { width: 1.1rem; height: 1.1rem; }
-.whatsnew-dialog .support-actions { justify-content: flex-start; }
-
-.panel-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; padding: 4rem 0 2rem; }
-.panel-header h1 { max-width: min(760px, 70vw); margin: 0; font-size: clamp(2.5rem, 4.5vw, 4rem); font-weight: 500; line-height: .95; letter-spacing: -.04em; overflow-wrap: anywhere; }
-.device-status { display: flex; flex: 0 0 auto; align-items: center; gap: .45rem; color: var(--text-soft); font-size: .75rem; white-space: nowrap; }
-.device-status > .status-dot { width: .45rem; height: .45rem; border-radius: 50%; background: var(--success); }
-.live-status { display: flex; align-items: center; gap: .5rem; margin: 0 0 .8rem; padding: .55rem .75rem; border: 1px solid var(--line); border-radius: 9px; background: var(--well); color: var(--dim); font-size: .72rem; }
-.live-status-share { margin-inline-start: auto; padding: .32rem .65rem; border: 1px solid var(--border-hover); border-radius: 6px; background: var(--surface-strong); color: var(--text-soft); font-size: .68rem; font-weight: 600; cursor: pointer; }
-.live-status i { width: .38rem; height: .38rem; flex: 0 0 auto; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 10%, transparent); }
-
-.sidebar-menu-toggle { display: grid; width: 1.9rem; height: 1.75rem; flex: 0 0 auto; grid-template-rows: repeat(3, 1px); align-content: center; gap: .24rem; padding: .42rem .45rem; border: 1px solid var(--border); border-radius: 6px; background: var(--input); cursor: pointer; }
-.sidebar-menu-toggle i { display: block; width: 100%; height: 1px; border-radius: 1px; background: var(--text-strong); }
-
-.empty-state { display: none; max-width: 680px; margin: auto 0; padding: clamp(2rem, 5vw, 4.5rem) 0; }
-.empty-state h2 { max-width: 640px; margin: 0; font-size: clamp(1.9rem, 3vw, 2.75rem); font-weight: 500; letter-spacing: -.03em; line-height: 1.05; }
-.empty-state > p:not(.overline) { max-width: 460px; margin: 1rem 0 0; color: var(--text-soft); font-size: .92rem; line-height: 1.55; }
-.is-empty .empty-state { display: block; }
-.control-shell.is-empty .device-data { display: none !important; }
-.empty-connect-action { width: max-content; margin-top: 1.5rem; padding: .7rem 1rem; border: 1px solid var(--ui-accent); border-radius: 7px; background: var(--ui-accent); color: var(--ui-accent-ink); font-size: .72rem; font-weight: 750; }
-.empty-connect-action::before { margin-inline-end: .45rem; content: "+"; }
-.empty-connect-action:hover { background: color-mix(in srgb, var(--ui-accent) 80%, #ffffff); border-color: color-mix(in srgb, var(--ui-accent) 80%, #ffffff); transform: translateY(-1px); }
-.empty-connect-action:disabled { cursor: wait; opacity: .6; transform: none; }
-
-.device-overview { display: grid; grid-template-columns: 1.45fr 1fr; min-height: 330px; overflow: hidden; scroll-margin-top: 1.5rem; border: 1px solid var(--border); border-radius: 14px; background: var(--card); }
-.device-overview .device-thumbnail { display: flex; overflow: hidden; align-items: center; justify-content: center; padding: .5rem; border-inline-end: 1px solid var(--line-soft); background: radial-gradient(circle at 50% 45%, var(--surface-hover-soft) 0, var(--surface-menu) 72%); }
-.device-overview .device-thumbnail[hidden] { display: none; }
-.device-overview .device-thumbnail img { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 5px 9px rgb(0 0 0 / 60%)); }
-.device-overview .summary-stat { display: flex; min-width: 0; flex-direction: column; justify-content: center; padding: 1.1rem 1.35rem; border-inline-end: 1px solid var(--line-soft); }
-.device-overview .summary-stat:last-child { border-inline-end: 0; }
-.device-overview .summary-stat > span { margin-bottom: .45rem; color: var(--text-soft); font-family: var(--font-mono); font-size: .64rem; letter-spacing: .09em; }
-.device-overview .summary-stat strong { font-size: 1.3rem; font-weight: 500; letter-spacing: -.025em; }
-.device-overview .summary-stat small { margin-top: .2rem; color: var(--faint); font-size: .68rem; }
-.battery-readout { display: flex; align-items: center; gap: .55rem; }
-/* Flex wrappers: an inline SVG would otherwise sit on the text baseline. */
-#battery-icon-slot, #sidebar-battery-icon { display: flex; align-items: center; }
-.battery-icon { width: 1.95rem; height: auto; flex: 0 0 auto; overflow: visible; }
-.battery-shell { fill: none; stroke: currentColor; stroke-width: 1.4; opacity: .42; }
-.battery-cap { fill: currentColor; opacity: .42; }
-.battery-track { fill: currentColor; opacity: .13; }
-.battery-fill { fill: currentColor; transition: width .45s cubic-bezier(.4, 0, .2, 1); }
-.battery-bolt { fill: currentColor; }
-.battery-dead { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
-/* Fixed colours: battery state must not read differently per accent theme. */
-.control-shell .battery-icon { color: #f2f3f5; }
-.control-shell .battery-icon.is-charging { color: #5dde89; }
-.control-shell .battery-icon.is-low, .control-shell .battery-icon.is-dead { color: #e2686f; }
-.control-shell .battery-icon.is-unknown { color: #686e77; }
-.dongle-led-button { align-self: flex-start; margin-top: .45rem; padding: .28rem .5rem; border: 1px solid var(--edge); border-radius: 5px; background: var(--control); color: var(--text-strong); font-size: .61rem; font-weight: 600; }
-
-.settings-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 1rem; margin-top: 1rem; scroll-margin-top: 1.5rem; }
-.setting-card { padding: 1.5rem; border: 1px solid var(--line-soft); border-radius: 12px; background: var(--card); }
-.setting-card button:disabled { cursor: default; opacity: 1; }
-.dpi-card { grid-row: span 2; }
-.dpi-card.has-lift-off { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 1.1rem; }
-.dpi-card.has-lift-off > .dpi-card-lift { padding-inline-start: 1.1rem; border-inline-start: 1px solid var(--line-soft); }
-@media (max-width: 980px) {
-  .dpi-card.has-lift-off { grid-template-columns: minmax(0, 1fr); }
-  .dpi-card.has-lift-off > .dpi-card-lift { padding-inline-start: 0; padding-top: .9rem; border-inline-start: 0; border-top: 1px solid var(--line-soft); }
-}
-.setting-heading { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 2rem; }
-.setting-heading.compact { margin-bottom: .55rem; }
-.setting-heading.tight { margin-bottom: .35rem; }
-.setting-heading h2 { margin: 0; font-size: 1.15rem; font-weight: 500; letter-spacing: -.015em; }
-.setting-heading p { margin: 0 0 .6rem; color: var(--text-soft); font-family: var(--font-mono); font-size: .64rem; letter-spacing: .09em; }
-.setting-heading output { padding: .38rem .55rem; border: 1px solid var(--border); border-radius: 6px; color: var(--text-strong); font-family: var(--font-mono); font-size: .68rem; }
-/* Polling readout: same voice as the card title, not mono. */
-#polling-value { font-family: inherit; font-size: 1.15rem; font-weight: 500; letter-spacing: -.015em; }
-/* The explainer lives under the title now, not under the slider. */
-#polling-card .setting-heading .setting-note { margin-top: .3rem; }
-#host-lod-row .setting-heading .setting-note { margin-top: .3rem; }
-/* Overline and title share one baseline row instead of stacking. */
-#polling-card .title-row, #host-lod-row .title-row { display: flex; align-items: baseline; gap: .55rem; flex-wrap: wrap; }
-#polling-card .title-row p, #host-lod-row .title-row p { margin: 0; }
-#polling-card .title-row h2, #host-lod-row .title-row h2 { font-size: 1.15rem; }
-.setting-note { display: block; margin-top: 1rem; color: var(--text-soft); font-size: .72rem; line-height: 1.5; }
-.setting-note-stable { min-height: 3em; }
-.setting-note-warning { color: var(--warning); }
-.setting-action { display: flex; align-items: center; justify-content: space-between; gap: .7rem; margin-top: .7rem; color: var(--text-soft); font-size: .7rem; font-weight: 500; }
-.setting-action #dpi-pending { color: var(--text-strong); font-weight: 650; }
-.setting-action button { padding: .4rem .65rem; border: 1px solid var(--text); border-radius: 6px; background: var(--text); color: var(--ink); font-size: .65rem; font-weight: 700; }
-.setting-action button:disabled { cursor: default; opacity: .45; }
-
-.segmented { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; }
-.segmented.two { grid-template-columns: repeat(2, 1fr); }
-.segmented.three { grid-template-columns: repeat(3, 1fr); }
-.segmented button { padding: .6rem .4rem; border: 1px solid var(--border); border-radius: 7px; background: var(--input); color: var(--muted); font-size: .72rem; }
-.segmented button:hover { border-color: var(--ghost); color: var(--text-hover); }
-.segmented button.selected { border-color: var(--text); background: var(--text); color: var(--ink); }
-.control-shell .segmented button.selected,
-.control-shell .setting-action button:not(:disabled),
-.control-shell .dpi-header-actions button:not(:disabled) { border-color: var(--ui-accent); background: var(--ui-accent); color: var(--ui-accent-ink); }
-.dpi-presets { grid-template-columns: repeat(3, 1fr); }
-.dpi-presets button { padding-inline: .25rem; }
-.rate-options { grid-template-columns: repeat(4, 1fr); }
-.lighting-modes { grid-template-columns: repeat(auto-fill, minmax(5.75rem, 1fr)); }
-.lighting-modes button { padding-inline: .35rem; }
-.lighting-color-row { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1rem; }
-.lighting-color-field { display: flex; flex-direction: column; gap: .4rem; color: var(--faint); font-family: var(--font-mono); font-size: .58rem; letter-spacing: .07em; text-transform: uppercase; }
-.lighting-color-field input[type="color"] { width: 5rem; height: 2rem; box-sizing: border-box; padding: .18rem; border: 1px solid var(--border); border-radius: 7px; background: var(--input); cursor: pointer; }
-.lighting-color-field input[type="color"]:disabled { cursor: default; opacity: .45; }
-.lighting-color-picker { display: grid; gap: .55rem; width: 13.75rem; }
-.lighting-color-panel { position: relative; overflow: hidden; border: 1px solid var(--border); border-radius: 9px; cursor: crosshair; touch-action: none; }
-.lighting-color-panel canvas { display: block; width: 100%; aspect-ratio: 22 / 15; }
-.lighting-sv-thumb { position: absolute; width: .95rem; height: .95rem; border: 2px solid var(--text-hover); border-radius: 50%; box-shadow: 0 0 0 1px rgb(0 0 0 / 55%), 0 1px 5px rgb(0 0 0 / 4%); pointer-events: none; transform: translate(-50%, -50%); }
-.lighting-hue-bar { position: relative; overflow: hidden; border: 1px solid var(--border); border-radius: 999px; cursor: crosshair; touch-action: none; }
-.lighting-hue-bar canvas { display: block; width: 100%; aspect-ratio: 110 / 7; }
-.lighting-hue-thumb { position: absolute; top: 50%; width: .95rem; height: .95rem; border: 2px solid var(--text-hover); border-radius: 50%; box-shadow: 0 0 0 1px rgb(0 0 0 / 55%), 0 1px 5px rgb(0 0 0 / 4%); pointer-events: none; transform: translate(-50%, -50%); }
-.lighting-color-actions { display: flex; align-items: center; gap: .5rem; }
-.lighting-color-swatch { width: 1.6rem; height: 1.6rem; flex: 0 0 auto; border: 1px solid var(--border); border-radius: 8px; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 10%); }
-.lighting-color-hex { width: 5.75rem; box-sizing: border-box; padding: .34rem .4rem; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-raised); color: var(--text-input); font-family: var(--font-mono); font-size: .68rem; }
-.lighting-color-hex:hover { border-color: var(--ghost); }
-.lighting-color-hex:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 1px; }
-.lighting-color-picker.is-disabled { opacity: .45; pointer-events: none; }
-.lighting-speed-row { margin-top: 1rem; }
-.lighting-speed-row .segmented { grid-template-columns: repeat(4, 1fr); max-width: 15rem; }
-.lighting-zone-picker { display:grid;grid-template-columns:minmax(9rem,.35fr) minmax(18rem,1fr);align-items:end;gap:1rem;margin:0 0 1rem;padding:.8rem;border:1px solid var(--border);border-radius:9px;background:var(--surface-raised) }
-.lighting-zone-copy { display:grid;gap:.25rem }
-.lighting-zone-copy span { color:var(--faint);font-family:var(--font-mono);font-size:.55rem;letter-spacing:.09em;text-transform:uppercase }
-.lighting-zone-copy strong { color:var(--text-hover);font-size:.82rem;font-weight:550 }
-.lighting-strip { display:grid;grid-template-columns:repeat(auto-fit,minmax(2.6rem,4rem));gap:.3rem;align-items:center }
-.lighting-strip.is-lightstrip { grid-template-columns:1.15fr repeat(8,1fr) }
-.lighting-strip button { position:relative;min-width:0;height:2.2rem;padding:0;border:1px solid color-mix(in srgb,var(--zone-color) 45%,var(--border));border-radius:7px;background:color-mix(in srgb,var(--zone-color) 74%,#090b0d);color:#fff;font-family:var(--font-mono);font-size:.52rem;box-shadow:inset 0 0 14px color-mix(in srgb,var(--zone-color) 50%,transparent);cursor:pointer }
-.lighting-strip.is-lightstrip button:first-child { margin-inline-end:.2rem;background:var(--surface-control);box-shadow:none;color:var(--muted) }
-.lighting-strip button:hover,.lighting-strip button.is-selected { border-color:var(--ui-accent);outline:1px solid color-mix(in srgb,var(--ui-accent) 35%,transparent);outline-offset:1px }
-.lighting-strip button.is-selected::after { position:absolute;inset-inline-end:25%;bottom:-.48rem;inset-inline-start:25%;height:2px;border-radius:2px;background:var(--ui-accent);content:"" }
-@media (max-width:760px) { .lighting-zone-picker { grid-template-columns:1fr }.lighting-strip { overflow-x:auto }.lighting-strip.is-lightstrip { grid-template-columns:3.5rem repeat(8,minmax(2.2rem,1fr)) } }
-
-.dpi-header-actions { display: flex; align-items: center; gap: .45rem; }
-.dpi-header-actions button { padding: .38rem .6rem; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--surface-input); color: var(--dim); font-size: .62rem; font-weight: 700; white-space: nowrap; }
-.dpi-header-actions button:disabled { cursor: default; opacity: .45; }
-.dpi-header-actions input { width: 4.7rem; box-sizing: border-box; padding: .38rem .48rem; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--card); color: var(--bright); font: 600 .62rem var(--font-mono); text-align: center; }
-.dpi-header-actions input[readonly] { border-color: transparent; background: transparent; cursor: pointer; }
-.dpi-header-actions input[readonly]:hover { border-color: var(--line-strong); background: var(--card); }
-.dpi-header-actions input:not([readonly]) { border-color: var(--ui-accent); background: var(--surface-input); }
-.dpi-card .setting-action { margin-top: .55rem; }
-[data-pending-key].is-staged { border-color: var(--ui-accent) !important; box-shadow: 0 0 0 1px var(--ui-accent-soft); }
-
-#logitech-axis-controls { margin-top: .6rem; padding-top: .6rem; border-top: 1px solid var(--line); }
-.axis-grid { display: grid; grid-template-columns: 1fr 1fr auto; align-items: end; gap: .45rem; }
-.axis-grid label { color: var(--faint); font-size: .6rem; }
-.axis-grid input { width: 100%; box-sizing: border-box; margin-top: .2rem; padding: .42rem; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--surface-input); color: var(--text-input); }
-.axis-apply { padding: .45rem .6rem; border: 1px solid var(--border-hover); border-radius: 6px; background: var(--surface-strong); color: var(--bright); font-size: .62rem; }
-#gaming-surface-row { margin-bottom: .85rem; }
-.lod-mode { margin-bottom: .5rem; }
-/* Sliders rather than number fields, so a landing above the lift-off is not
-   expressible. The device stores an inverted pair without complaint. */
-.lod-sliders { display: grid; gap: .55rem; }
-.lod-sliders label { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: .1rem .5rem; color: var(--faint); font-size: .62rem; }
-.lod-sliders output { color: var(--bright); font-family: var(--font-mono); font-size: .72rem; }
-.lod-sliders input[type="range"] { grid-column: 1 / -1; width: 100%; margin: .1rem 0 0; accent-color: var(--ui-accent); }
-.lod-sliders input[type="range"]:disabled { opacity: .45; }
-
-.switch-button { position: relative; width: 2.5rem; height: 1.4rem; flex: 0 0 auto; padding: 0; border: 1px solid var(--edge); border-radius: 999px; background: var(--surface-strong); cursor: pointer; transition: background .18s ease, border-color .18s ease, box-shadow .15s ease, opacity .15s ease; }
-.switch-button:hover:not(:disabled) { border-color: var(--border-hover); box-shadow: 0 0 0 4px var(--ui-accent-soft); }
-.switch-button.is-on { background: var(--ui-accent); border-color: var(--ui-accent); }
-.switch-button.is-on:hover:not(:disabled) { filter: brightness(1.08); }
-.switch-button:disabled { opacity: .45; cursor: not-allowed; }
-.switch-thumb { position: absolute; top: 50%; left: .2rem; display: grid; width: .92rem; height: .92rem; translate: 0 -50%; place-items: center; border-radius: 50%; background: var(--muted); color: transparent; transition: left .18s ease, background .18s ease, color .18s ease; }
-.switch-button.is-on .switch-thumb { left: calc(100% - .92rem - .2rem); background: var(--ui-accent-ink); color: var(--ui-accent); }
-.switch-button.is-na { width: auto; min-width: 2.5rem; height: 1.4rem; padding: 0 .55rem; }
-.switch-na { color: var(--faint); font-size: .6rem; font-weight: 650; }
-.switch-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .2rem 0; color: var(--dim); font-size: .75rem; }
-.field-label { display: block; color: var(--faint); font-size: .72rem; }
-.field-label.spaced { margin-top: .35rem; }
-.angle-tuning-readonly { display: flex; align-items: center; justify-content: space-between; }
-.angle-tuning-readonly output { color: var(--text-input); font-family: var(--font-mono); }
-.angle-tuning-control { margin-top: .55rem; padding-top: .55rem; border-top: 1px solid var(--line); }
-.angle-tuning-head { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; color: var(--dim); font-size: .7rem; }
-.angle-tuning-head output { min-width: 2.8rem; color: var(--text-input); font: 650 .72rem var(--font-mono); text-align: end; }
-/* Read-only label/value row for status facts (TMR release state, fixed
-   pipeline latency). Same tokens as the neighboring row styles. */
-.stat-row { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; color: var(--dim); font-size: .7rem; }
-.stat-row output { color: var(--text-input); font: 650 .72rem var(--font-mono); text-align: end; }
-/* Info-only cards must not stretch to the tallest grid sibling. */
-#finalmouse-perfect-polling { align-self: start; }
-#signal-settings { align-self: start; }
-#finalmouse-settings { align-self: start; }
-/* TMR-DS sides are two repeated control stacks: separate them with the
-   shared visible divider instead of letting them blur together. */
-.tmr-side + .tmr-side { margin-top: .8rem; border-top: 1px solid var(--line-strong); padding-top: .8rem; }
-/* Profile roster: one line per profile, switch + rename grouped at the end. */
-.profile-row-actions { display: flex; align-items: center; gap: .5rem; }
-.profile-rename { display: flex; gap: .5rem; margin-top: .4rem; }
-.profile-rename input { flex: 1; min-width: 0; padding: .5rem .6rem; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-input); color: var(--text-input); font-size: .78rem; }
-.angle-tuning-inputs { display: grid; grid-template-columns: 1.65rem minmax(7rem, 1fr) 1.65rem; align-items: center; gap: .5rem; margin-top: .35rem; }
-.angle-tuning-inputs button { width: 1.65rem; height: 1.65rem; padding: 0; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-strong); color: var(--text-input); font-size: .9rem; line-height: 1; cursor: pointer; }
-.angle-tuning-inputs button:hover:not(:disabled) { border-color: var(--ui-accent); color: var(--ui-accent); }
-.angle-tuning-inputs button:disabled { opacity: .35; }
-.angle-tuning-inputs input[type="range"] { width: 100%; margin: 0; accent-color: var(--ui-accent); cursor: pointer; }
-.angle-tuning-scale { display: flex; justify-content: space-between; margin: .12rem 2.15rem 0; color: var(--ghost); font: .48rem var(--font-mono); }
-.angle-tuning-scale i { font-style: normal; }
-.setting-separator { border-top: 1px solid var(--line-strong); margin-top: .55rem; }
-.teevolution-dpi-light-controls { margin-top: .55rem; }
-
-/* ═══════════════════════════════════════════════════════════════════════
-   Unified mouse-option widgets (M3): OptionMenu dropdown + StepperSlider.
-   These replace the native <select> elements and the hand-rolled
-   .angle-tuning-control clones. Colors come from theme tokens only.
-   ═══════════════════════════════════════════════════════════════════════ */
-.option-menu { position: relative; }
-.option-menu-trigger {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: .6rem;
-  width: 100%;
-  box-sizing: border-box;
-  padding: .52rem .6rem;
-  border: 1px solid var(--border);
-  border-radius: 7px;
-  background: var(--surface-control);
-  color: var(--text-input);
-  font-size: .75rem;
-  cursor: pointer;
-}
-.option-menu-trigger svg { flex: 0 0 auto; color: var(--faint); transition: transform .16s ease; }
-.option-menu.is-open .option-menu-trigger svg { transform: rotate(180deg); }
-.option-menu-trigger:hover:not(:disabled) { border-color: var(--border-hover); background: var(--surface-hover-soft); color: var(--text-hover); }
-.option-menu-trigger:disabled { cursor: default; opacity: .45; }
-.option-menu-list {
-  position: absolute;
-  top: calc(100% + .3rem);
-  right: 0;
-  left: 0;
-  z-index: 40;
-  max-height: 13rem;
-  margin: 0;
-  padding: .3rem;
-  overflow-y: auto;
-  list-style: none;
-  border: 1px solid var(--border);
-  border-radius: 9px;
-  background: var(--surface-menu);
-  box-shadow: 0 14px 34px rgb(0 0 0 / .5);
-  scrollbar-width: thin;
-}
-.option-menu-list [role="option"] {
-  padding: .45rem .6rem;
-  border-radius: 6px;
-  color: var(--dim);
-  font-size: .74rem;
-  cursor: pointer;
-}
-.option-menu-list [role="option"]:hover,
-.option-menu-list [role="option"]:focus-visible { background: var(--surface-hover); color: var(--text-hover); outline: none; }
-.option-menu-list [role="option"].is-selected { background: var(--ui-accent-soft); color: var(--text-hover); font-weight: 650; }
-.option-menu-list [role="option"][aria-disabled="true"] { opacity: .45; cursor: default; }
-
-.stepper-slider { margin-top: .55rem; padding-top: .55rem; border-top: 1px solid var(--line-strong); }
-.stepper-slider-toggle { margin-bottom: .3rem; }
-.stepper-slider-head { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; color: var(--dim); font-size: .7rem; }
-.stepper-slider-head output { min-width: 2.8rem; color: var(--text-input); font: 650 .72rem var(--font-mono); text-align: right; }
-.stepper-slider-title { display: inline-flex; align-items: center; gap: .45rem; }
-.stepper-slider-badge { padding: .12rem .45rem; border: 1px solid var(--edge); border-radius: 999px; background: var(--surface-strong); color: var(--faint); font: 650 .58rem var(--font-sans); font-style: normal; }
-.stepper-slider-inputs { display: grid; grid-template-columns: 1.65rem minmax(7rem, 1fr) 1.65rem; align-items: center; gap: .5rem; margin-top: .35rem; }
-.stepper-slider-inputs button {
-  display: grid;
-  width: 1.65rem;
-  height: 1.65rem;
-  padding: 0;
-  place-items: center;
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  background: var(--surface-strong);
-  color: var(--text-input);
-  cursor: pointer;
-}
-.stepper-slider-inputs button:hover:not(:disabled) { border-color: var(--ui-accent); background: var(--ui-accent-soft); color: var(--ui-accent); }
-.stepper-slider-inputs button:disabled { opacity: .35; }
-.stepper-slider-inputs input[type="range"] { width: 100%; margin: 0; }
-
-/* Shared M3 range treatment: 5px rounded track with accent fill, 14px
-   thumb with halo, ghost when off. Covers StepperSlider, the DPI editor
-   rows and the glass-rail sliders (lift-off scale, lighting speed). */
-.dpi-editor-row > input[type="range"].dpi-editor-slider,
-.stepper-slider-inputs input[type="range"],
-.glass-slider-rail input[type="range"] { -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer; }
-.dpi-editor-row > input[type="range"].dpi-editor-slider { width: 100%; min-width: 0; height: 1.4rem; margin: 0; }
-.dpi-editor-slider::-webkit-slider-runnable-track,
-.stepper-slider-inputs input[type="range"]::-webkit-slider-runnable-track,
-.glass-slider-rail input[type="range"]::-webkit-slider-runnable-track { height: 5px; border-radius: 999px; background: linear-gradient(90deg, var(--ui-accent) var(--fill, 50%), color-mix(in srgb, var(--ui-accent) 22%, var(--surface-strong)) var(--fill, 50%)); }
-.dpi-editor-slider::-webkit-slider-thumb,
-.stepper-slider-inputs input[type="range"]::-webkit-slider-thumb,
-.glass-slider-rail input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: .9rem; height: .9rem; margin-top: calc((5px - .9rem) / 2); border: 0; border-radius: 50%; background: var(--ui-accent); transition: box-shadow .15s ease; }
-.dpi-editor-slider:hover::-webkit-slider-thumb,
-.stepper-slider-inputs input[type="range"]:hover::-webkit-slider-thumb,
-.glass-slider-rail input[type="range"]:hover::-webkit-slider-thumb { box-shadow: 0 0 0 6px var(--ui-accent-soft); }
-.dpi-editor-slider:focus-visible,
-.stepper-slider-inputs input[type="range"]:focus-visible,
-.glass-slider-rail input[type="range"]:focus-visible { outline: none; }
-.dpi-editor-slider:focus-visible::-webkit-slider-thumb,
-.stepper-slider-inputs input[type="range"]:focus-visible::-webkit-slider-thumb,
-.glass-slider-rail input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 6px var(--ui-accent-soft), 0 0 0 8px color-mix(in srgb, var(--ui-accent) 30%, transparent); }
-.dpi-editor-slider::-moz-range-track,
-.stepper-slider-inputs input[type="range"]::-moz-range-track,
-.glass-slider-rail input[type="range"]::-moz-range-track { height: 5px; border-radius: 999px; background: color-mix(in srgb, var(--ui-accent) 22%, var(--surface-strong)); }
-.dpi-editor-slider::-moz-range-progress,
-.stepper-slider-inputs input[type="range"]::-moz-range-progress,
-.glass-slider-rail input[type="range"]::-moz-range-progress { height: 5px; border-radius: 999px; background: var(--ui-accent); }
-.dpi-editor-slider::-moz-range-thumb,
-.stepper-slider-inputs input[type="range"]::-moz-range-thumb,
-.glass-slider-rail input[type="range"]::-moz-range-thumb { width: .9rem; height: .9rem; border: 0; border-radius: 50%; background: var(--ui-accent); }
-.dpi-editor-slider:hover::-moz-range-thumb,
-.stepper-slider-inputs input[type="range"]:hover::-moz-range-thumb,
-.glass-slider-rail input[type="range"]:hover::-moz-range-thumb { box-shadow: 0 0 0 6px var(--ui-accent-soft); }
-.dpi-editor-slider:disabled,
-.stepper-slider-inputs input[type="range"]:disabled,
-.glass-slider-rail input[type="range"]:disabled { opacity: .45; cursor: not-allowed; }
-.dpi-editor-slider:disabled::-webkit-slider-thumb,
-.stepper-slider-inputs input[type="range"]:disabled::-webkit-slider-thumb,
-.glass-slider-rail input[type="range"]:disabled::-webkit-slider-thumb { background: var(--ghost); }
-.dpi-editor-slider:disabled::-moz-range-thumb,
-.stepper-slider-inputs input[type="range"]:disabled::-moz-range-thumb,
-.glass-slider-rail input[type="range"]:disabled::-moz-range-thumb { background: var(--ghost); }
-.stepper-slider-scale { display: flex; justify-content: space-between; margin: .12rem 2.15rem 0; color: var(--ghost); font: .48rem var(--font-mono); }
-.stepper-slider-scale i { font-style: normal; }
-
-.egg-collapsible, .egg-experimental { overflow: hidden; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--card); }
-.egg-collapsible summary, .egg-experimental summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer; color: var(--text-strong); font-weight: 650; list-style: none; }
-.egg-collapsible summary { padding: .72rem .85rem; font-size: .74rem; }
-.egg-experimental summary { padding: .8rem .9rem; font-size: .76rem; }
-.egg-collapsible summary::-webkit-details-marker, .egg-experimental summary::-webkit-details-marker { display: none; }
-.egg-collapsible summary span small { display: block; margin-bottom: .12rem; color: var(--faint); font-family: var(--font-mono); font-size: .5rem; letter-spacing: .09em; }
-.egg-experimental summary small { display: block; margin-bottom: .18rem; color: color-mix(in srgb, var(--warning) 82%, var(--text-soft)); font-family: var(--font-mono); font-size: .52rem; letter-spacing: .09em; }
-.egg-collapsible summary i, .egg-experimental summary i { border-inline-end: 1px solid var(--text-soft); border-bottom: 1px solid var(--text-soft); transform: rotate(45deg); transition: transform .18s ease; }
-.egg-collapsible summary i { width: .42rem; height: .42rem; }
-.egg-experimental summary i { width: .45rem; height: .45rem; }
-.egg-collapsible[open] summary i, .egg-experimental[open] summary i { transform: rotate(225deg); }
-/* An open OptionMenu must escape the collapsible's rounded-corner clipping;
-   the inner card keeps its own background so nothing leaks visually. */
-.egg-collapsible:has(.option-menu.is-open), .egg-experimental:has(.option-menu.is-open) { overflow: visible; }
-.egg-collapsible-body { padding: .6rem; border-top: 1px solid var(--line); }
-.egg-experimental-body { padding: 0 .65rem .65rem; border-top: 1px solid var(--line); }
-.egg-collapsible-body > .setting-card { min-height: 0 !important; padding: .7rem !important; }
-.egg-experimental .egg-form-card { min-height: 0; margin-top: .65rem; padding: .8rem; }
-.egg-experimental .egg-form-card label { display: block; max-width: 220px; color: var(--faint); font-size: .62rem; }
-.egg-warning { margin: -.15rem 0 .65rem; color: color-mix(in srgb, var(--warning) 58%, var(--text-faint)); font-size: .63rem; line-height: 1.45; }
-.egg-experimental #egg-polling-result { display: block; margin-top: .4rem; }
-.egg-action-button, #egg-cpi-stage-list [data-apply-cpi] { margin-top: .5rem; padding: .42rem .62rem; border: 1px solid var(--border-hover); border-radius: 6px; background: var(--surface-strong); color: var(--bright); font-size: .62rem; font-weight: 650; transition: border-color .18s ease, background .18s ease, transform .18s ease; }
-.egg-action-button:hover, #egg-cpi-stage-list [data-apply-cpi]:hover { border-color: var(--faint); background: var(--line); transform: translateY(-1px); }
-
-.control-panel.showing-settings > :not(#interface-settings-page):not(.panel-top) { display: none !important; }
-.control-panel.showing-settings .panel-top > :not(.panel-header),
-.control-panel.showing-settings .panel-header > :not(.panel-title),
-.control-panel.showing-settings .panel-title > :not(#sidebar-menu-toggle) { display: none; }
-.interface-settings-page { display: none; flex: 0 0 auto; padding: .5rem 0 2rem; }
-.interface-settings-page.is-open { display: block; }
-.interface-settings-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1rem 0 1.2rem; border-bottom: 1px solid var(--line); }
-.interface-settings-header h2 { margin: .25rem 0 0; font-size: 2rem; font-weight: 500; letter-spacing: -.035em; }
-.interface-settings-back { padding: .48rem .7rem; border: 1px solid var(--border); border-radius: 7px; background: var(--input); color: var(--text-input); font-size: .68rem; font-weight: 650; }
-.interface-settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; margin-top: .75rem; }
-.interface-setting-card { min-height: 120px; padding: 1rem; border: 1px solid var(--border); border-radius: 10px; background: var(--card); }
-.interface-setting-card > span { color: var(--faint); font-family: var(--font-mono); font-size: .55rem; letter-spacing: .09em; }
-.interface-setting-card h3 { margin: .35rem 0 .3rem; font-size: 1rem; font-weight: 550; }
-.interface-setting-card p { margin: 0 0 .8rem; color: var(--muted); font-size: .68rem; line-height: 1.45; }
-.interface-setting-card select { width: 100%; padding: .52rem; border: 1px solid var(--border); border-radius: 7px; background: var(--input); color: var(--text-input); color-scheme: dark; }
-.profile-key-field { display: flex; flex-direction: column; gap: .3rem; margin: 0 0 .6rem; font-size: .62rem; color: var(--muted); }
-.profile-key-field textarea { width: 100%; padding: .52rem; border: 1px solid var(--border); border-radius: 7px; background: var(--input); color: var(--text-input); font-family: var(--font-mono); font-size: .62rem; line-height: 1.4; resize: vertical; color-scheme: dark; }
-.profile-key-action { padding: .5rem .8rem; margin: 0 0 .6rem; border: 1px solid var(--border-hover); border-radius: 7px; background: var(--surface-strong); color: var(--text-soft); font-size: .64rem; font-weight: 650; cursor: pointer; }
-.profile-key-action:disabled { cursor: not-allowed; opacity: .5; }
-.profile-key-card { grid-column: 1 / -1; }
-.openmouse-bridge-card { grid-column: 1 / -1; min-height: 0; }
-.openmouse-bridge-coming-soon { margin-top: .2rem; padding: .58rem .9rem; border: 1px solid var(--border-hover); border-radius: 7px; background: var(--surface-strong); color: var(--text-soft); font-size: .66rem; font-weight: 700; cursor: not-allowed; opacity: .72; }
-.interface-theme-card { grid-column: 1 / -1; }
-.theme-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: .45rem; margin: 0; padding: 0; border: 0; }
-.theme-tile { position: relative; overflow: hidden; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; }
-.theme-tile input { position: absolute; opacity: 0; }
-.theme-tile-proof { display: grid; height: 2.6rem; padding: .34rem; gap: .24rem; align-content: start; background: var(--tile-canvas); }
-.theme-tile-proof b { display: block; height: .4rem; border-radius: 2px; background: var(--tile-surface); }
-.theme-tile-proof b:nth-child(2) { width: 62%; }
-.theme-tile-proof b:last-child { width: 38%; background: var(--tile-accent); }
-.theme-tile > span { display: block; padding: .32rem .4rem; border-top: 1px solid var(--border); background: var(--surface-control); color: var(--text-soft); font-size: .6rem; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.theme-tile:hover { border-color: var(--border-hover); }
-.theme-tile:hover > span { color: var(--text-hover); }
-.theme-tile:has(input:checked) { border-color: var(--ui-accent); }
-.theme-tile:has(input:checked) > span { background: var(--ui-accent-soft); color: var(--text-hover); }
-.theme-tile:has(input:focus-visible) { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
-.interface-switch-row { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-top: .7rem; color: var(--text-strong); font-size: .72rem; }
-.interface-switch-row input {
-  appearance: none;
-  width: 2.25rem;
-  height: 1.25rem;
-  flex: 0 0 auto;
-  margin: 0;
-  border: 1px solid var(--border-hover);
-  border-radius: 999px;
-  outline: none;
-  background-color: var(--surface-strong);
-  background-image: radial-gradient(circle at .56rem 50%, var(--text-soft) 0 .34rem, transparent .36rem);
-  cursor: pointer;
-  transition: border-color .18s ease, background-color .18s ease, background-position .18s ease, box-shadow .18s ease;
-}
-.interface-switch-row input:checked { border-color: var(--ui-accent); background-color: var(--ui-accent); background-image: radial-gradient(circle at calc(100% - .56rem) 50%, var(--ui-accent-ink) 0 .34rem, transparent .36rem); }
-.interface-switch-row input:focus-visible { box-shadow: 0 0 0 3px var(--ui-accent-soft); }
-.interface-reset { margin-top: .75rem; padding: .55rem .75rem; border: 1px solid color-mix(in srgb, var(--destructive) 40%, var(--surface-panel)); border-radius: 7px; background: color-mix(in srgb, var(--destructive) 12%, var(--surface-panel)); color: color-mix(in srgb, var(--destructive) 70%, var(--text-hover)); font-size: .68rem; font-weight: 650; }
-
-.reduce-interface-motion *, .reduce-interface-motion *::before, .reduce-interface-motion *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
-
-.small-screen-blocker { display: flex; min-height: 100vh; align-items: flex-start; justify-content: center; flex-direction: column; padding: clamp(2rem, 8vw, 7rem); }
-.small-screen-blocker h1 { max-width: 500px; margin: 0; font-size: clamp(2.5rem, 7vw, 4rem); font-weight: 500; line-height: .92; letter-spacing: -.04em; }
-.small-screen-blocker p { max-width: 440px; margin: 1.2rem 0 0; color: var(--text-soft); line-height: 1.6; }
-
-.apply-bar {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  margin: 1.25rem auto 0;
-  width: min(100% - 2rem, 1180px);
-  padding: 0.7rem 0.9rem;
-  border: 1px solid color-mix(in srgb, var(--ui-accent) 32%, var(--line));
-  border-radius: 10px;
-  background: color-mix(in srgb, var(--ui-accent) 6%, var(--card));
-  box-shadow: 0 12px 30px -22px rgb(0 0 0 / 0.5);
-}
-.apply-bar-label {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.45rem;
-  min-width: 0;
-  color: var(--bright);
-  font-size: 0.8rem;
-  font-weight: 650;
-  line-height: 1.3;
-}
-.apply-bar-label svg {
-  flex: 0 0 auto;
-  width: 15px;
-  height: 15px;
-  color: var(--ui-accent);
-}
-.apply-bar-summary {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  color: var(--faint);
-  font-size: 0.68rem;
-  font-style: normal;
-  font-weight: 500;
-}
-.apply-bar-actions {
-  display: flex;
-  flex: 0 0 auto;
-  align-items: center;
-  gap: 0.5rem;
-  margin-inline-start: auto;
-}
-.apply-bar-actions button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0.5rem 0.95rem;
-  border-radius: 8px;
-  font: inherit;
-  font-size: 0.72rem;
-  font-weight: 700;
-  cursor: pointer;
-  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
-}
-.apply-bar-actions button:disabled {
-  cursor: default;
-  opacity: 0.55;
-}
-.apply-bar-revert {
-  border: 1px solid var(--edge);
-  background: var(--control);
-  color: var(--dim);
-}
-.apply-bar-revert:hover:not(:disabled) {
-  border-color: var(--border-hover);
-  background: var(--hover);
-  color: var(--text-hover);
-}
-.apply-bar-apply {
-  border: 1px solid var(--ui-accent);
-  background: var(--ui-accent);
-  color: var(--ui-accent-ink);
-}
-.apply-bar-apply:hover:not(:disabled) {
-  background: color-mix(in srgb, var(--ui-accent) 80%, #ffffff);
-  border-color: color-mix(in srgb, var(--ui-accent) 80%, #ffffff);
-}
-.control-shell.reduce-interface-motion .apply-bar { transition: none; }
-
-.news-banner {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.35rem 0.85rem;
-  border-bottom: 1px solid var(--line);
-  background: var(--card);
-  color: var(--bright);
-  font-size: 0.72rem;
-  font-weight: 600;
-  line-height: 1.3;
-}
-
-/* Every notice reads as a full-size strip: bigger text, room to wrap, and an
-   obvious link. The page previously shrank notices to a single truncated line,
-   which is why people scrolled past them. Info notices are tinted green. */
-.news-banner-info,
-.news-banner-warning,
-.news-banner-critical {
-  align-items: flex-start;
-  gap: 0.65rem;
-  padding: 0.7rem 1rem;
-  font-size: 0.86rem;
-  line-height: 1.45;
-}
-.news-banner-info {
-  border-bottom-color: color-mix(in srgb, var(--success) 55%, var(--line));
-  background: color-mix(in srgb, var(--success) 20%, var(--card));
-}
-.news-banner-warning {
-  border-bottom-color: color-mix(in srgb, var(--warning) 55%, var(--line));
-  background: color-mix(in srgb, var(--warning) 20%, var(--card));
-}
-.news-banner-critical {
-  border-bottom-color: color-mix(in srgb, var(--destructive) 60%, var(--line));
-  background: color-mix(in srgb, var(--destructive) 22%, var(--card));
-}
-.news-banner-icon {
-  flex: 0 0 auto;
-  margin-top: 0.1rem;
-  color: var(--warning);
-}
-.news-banner-critical .news-banner-icon { color: var(--destructive); }
-.news-banner-info .news-banner-icon { color: var(--success); }
-.news-banner-info .news-banner-icon,
-.news-banner-warning .news-banner-icon,
-.news-banner-critical .news-banner-icon {
-  width: 18px;
-  height: 18px;
-}
-.news-banner-link {
-  min-width: 0;
-  color: inherit;
-}
-.news-banner-info .news-banner-link,
-.news-banner-warning .news-banner-link,
-.news-banner-critical .news-banner-link {
-  text-decoration: underline;
-  text-underline-offset: 2px;
-  text-decoration-thickness: 1.5px;
-}
-.news-banner a.news-banner-link:hover { text-decoration: underline; }
-.news-banner-dismiss {
-  flex: 0 0 auto;
-  margin-inline-start: auto;
-  padding: 0.1rem 0.4rem;
-  border: 0;
-  border-radius: 6px;
-  background: transparent;
-  color: inherit;
-  font-size: 0.95rem;
-  line-height: 1;
-  cursor: pointer;
-  opacity: 0.7;
-}
-.news-banner-dismiss:hover { opacity: 1; background: color-mix(in srgb, currentColor 12%, transparent); }
-
-@keyframes pending-bar-pulse { 0%, 100% { box-shadow: 0 0 0 3px var(--ui-accent-soft); } 50% { box-shadow: 0 0 0 6px transparent; } }
-
-@media (min-width: 900px) {
-  .control-shell { height: 100vh; overflow: hidden; }
-  .control-shell .control-panel { display: flex; flex-direction: column; width: min(100% - 3rem, 1180px); min-height: 0; padding: .65rem 0; }
-  .control-shell .panel-header { padding: .8rem 0 .65rem; }
-  .control-shell .panel-header h1 { font-size: clamp(2rem, 3.2vw, 2.8rem); }
-  .control-shell .device-overview { flex: 0 0 auto; min-height: 104px; grid-template-columns: repeat(3, 1fr); }
-  .control-shell .device-overview .summary-stat { padding: .65rem .9rem; }
-  .control-shell .device-overview .summary-stat strong { font-size: 1.1rem; }
-  .control-shell .device-overview .summary-stat small { margin-top: .1rem; }
-  .control-shell .device-overview .summary-stat > span, .control-shell .setting-heading p { margin-bottom: .3rem; }
-  /* Cards grow past the shared row height when a driver adds a third preset
-     row, e.g. a mouse sitting on a custom DPI gets a seventh preset button. */
-  .control-shell .settings-grid { flex: 0 0 auto; grid-template-columns: 1.2fr .9fr .9fr; grid-template-rows: minmax(176px, auto); gap: .65rem; margin-top: .65rem; }
-  .control-shell .setting-card { min-height: 176px; padding: .85rem; }
-.control-shell .dpi-card { grid-row: auto; }
-
-/* Performance tab: sticky device showcase on the left, stacked control cards
-   on the right. The sidebar mirrors the overview's device-showcase chrome so
-   the two read as the same device. */
-.performance-layout {
-  display: grid;
-  grid-template-columns: 340px minmax(0, 1fr);
-  gap: 1rem;
-  align-items: start;
-  width: 100%;
-  margin-top: 0;
-}
-.performance-main {
-  display: grid;
-  gap: 1rem;
-  align-content: start;
-  min-width: 0;
-}
-/* Button map on the left, HITS card on the right; everything else spans the row.
-   The HITS card has a legacy order for another layout, so it is reset here. */
-.performance-main > #logitech-button-map { order: -2; }
-.performance-main > #logitech-analog-button-settings { order: -1; }
-.performance-main > * { grid-column: 1 / -1; }
-/* The HITS card's wrapper carries a top margin from its old layout; cards here line up. */
-.performance-main > #logitech-analog-button-settings { margin-top: 0; }
-.performance-main > #bunny-hop-card { order: -1; }
-@media (min-width: 1200px) {
-  .performance-main:has(> #logitech-button-map):has(> #logitech-analog-button-settings) {
-    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
-    /* The map is taller than the right column; its extra height goes below Bunny Hop, not between the cards. */
-    grid-template-rows: auto 1fr;
-    align-items: start;
-  }
-  .performance-main > #logitech-button-map { grid-column: 1; grid-row: 1 / span 2; }
-  .performance-main > #logitech-analog-button-settings { grid-column: 2; }
-  .performance-main > #bunny-hop-card { grid-column: 2; }
-}
-.performance-layout.has-no-sidebar { grid-template-columns: minmax(0, 1fr); }
-.performance-sidebar {
-  position: sticky;
-  top: .75rem;
-  min-width: 0;
-}
-/* Performance controls group into one card; Material-style dividers
-   separate each feature section instead of individual floating cards.
-   Scoped under `.control-shell` so these overrides beat the generic
-   `.control-shell .setting-card` card chrome below. */
-.performance-controls {
-  display: block;
-  min-width: 0;
-  padding: 0;
-  border: 1px solid var(--border);
-  border-radius: 14px;
-  background: var(--surface-panel);
-  box-shadow: 0 8px 24px -12px rgb(0 0 0 / 0.5), 0 2px 6px -2px rgb(0 0 0 / 0.35);
-}
-.control-shell .performance-controls .setting-card {
-  border: 0;
-  border-radius: 0;
-  background: transparent;
-  box-shadow: none;
-}
-/* Straight full-bleed divider, a touch thick, with an inset groove below so
-   it reads with depth instead of a thin flat hairline. */
-.control-shell .performance-controls .setting-card + .setting-card {
-  border-top: 2px solid var(--line-strong);
-  box-shadow: inset 0 2px 2px -2px rgb(0 0 0 / 0.45);
-}
-/* Inside the merged card, staging is shown as an inset accent ring around
-   the affected section instead of the old per-card accent border. */
-.control-shell .performance-controls [data-pending-key].is-staged {
-  box-shadow: inset 0 0 0 1px var(--ui-accent);
-}
-.showcase-sidebar {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 0;
-  border: 0;
-  border-radius: 0;
-  background: transparent;
-  box-shadow: none;
-  text-align: center;
-}
-/* Fully blended artwork — no box, no tile, no gradient rectangle. The image
-   floats on the page with only a subtle accent glow behind it. */
-.showcase-sidebar-visual {
-  width: 100%;
-  padding: .5rem 0;
-}
-.showcase-sidebar-image {
-  display: block;
-  width: 100%;
-  max-height: 640px;
-  object-fit: contain;
-  filter: drop-shadow(0 0 20px color-mix(in srgb, var(--ui-accent) 18%, transparent));
-}
-.button-map-showcase-art {
-  position: relative;
-  display: inline-block;
-  max-width: 100%;
-  line-height: 0;
-}
-.button-map-showcase-art .button-map-showcase-image {
-  width: auto;
-  max-width: 100%;
-  height: auto;
-}
-.button-map-markers {
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
-}
-.button-map-marker {
-  position: absolute;
-  z-index: 1;
-  display: grid;
-  width: 1.55rem;
-  height: 1.55rem;
-  place-items: center;
-  border: 1px solid var(--ui-accent);
-  border-radius: 50%;
-  background: color-mix(in srgb, var(--ui-accent) 88%, var(--surface-strong));
-  box-shadow: 0 0 0 .16rem color-mix(in srgb, var(--ui-accent) 22%, transparent), 0 3px 10px rgb(0 0 0 / 35%);
-  color: var(--ui-accent-ink);
-  font: 700 .61rem var(--font-mono);
-  letter-spacing: .02em;
-  line-height: 1;
-  transform: translate(-50%, -50%);
-}
-.button-map-underside-callout {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  margin-top: .18rem;
-  line-height: 1;
-}
-.button-map-underside-callout::before {
-  width: 1px;
-  height: .72rem;
-  border-radius: 2px;
-  background: #727985;
-  content: "";
-}
-.button-map-underside-badge {
-  display: inline-flex;
-  align-items: center;
-  gap: .42rem;
-  padding: .2rem .58rem .2rem .22rem;
-  border: 1px solid #41464f;
-  border-radius: 999px;
-  background: #24272d;
-  box-shadow: 0 2px 8px rgb(0 0 0 / 32%);
-  color: #e0e3e8;
-  font: 650 .59rem var(--font-mono);
-  letter-spacing: .04em;
-  text-transform: uppercase;
-}
-.button-map-underside-badge small {
-  margin-left: .2rem;
-  color: #9ba2ac;
-  font: inherit;
-  font-size: .51rem;
-  letter-spacing: .06em;
-}
-.button-map-underside-number {
-  display: grid;
-  width: 1.42rem;
-  height: 1.42rem;
-  place-items: center;
-  border: 1px solid #fff;
-  border-radius: 50%;
-  background: #f2f3f5;
-  color: #202329;
-  font: 700 .57rem var(--font-mono);
-  letter-spacing: .02em;
-}
-.showcase-sidebar-info { width: 100%; min-width: 0; margin-top: 1rem; }
-.showcase-sidebar-name {
-  margin: 0;
-  overflow: hidden;
-  font-size: 1.1rem;
-  font-weight: 600;
-  color: var(--bright);
-  letter-spacing: -.01em;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.showcase-sidebar-brand {
-  margin: .2rem 0 .85rem;
-  font-size: .78rem;
-  color: var(--faint);
-}
-.showcase-sidebar-status {
-  display: inline-flex;
-  align-items: center;
-  gap: .45rem;
-  padding: .42rem .85rem;
-  border: 1px solid var(--border);
-  border-radius: 999px;
-  background: color-mix(in srgb, var(--ui-accent) 8%, var(--surface-panel-strong));
-  font-size: .76rem;
-  font-weight: 600;
-  color: var(--success);
-}
-.showcase-sidebar-status .battery-icon { width: 1.5rem; }
-@media (max-width: 980px) {
-  .performance-layout { grid-template-columns: minmax(0, 1fr); }
-  .performance-sidebar { position: static; }
-  .showcase-sidebar-image { max-height: 400px; }
-}
-  .control-shell .setting-heading { margin-bottom: .75rem; }
-  .control-shell .setting-heading h2 { font-size: 1rem; }
-  .control-shell .segmented { gap: .3rem; }
-  .control-shell .segmented button { padding: .45rem .25rem; }
-  .control-shell .setting-note, .control-shell .dpi-card .setting-note { margin-top: .55rem; font-size: .68rem; }
-  .control-shell .live-status { margin-bottom: .55rem; padding: .42rem .65rem; font-size: .7rem; }
-  .control-shell .settings-grid.has-logitech-axis-controls { grid-template-rows: minmax(330px, auto); }
-  .control-shell.is-empty .empty-state { display: grid; flex: 1 1 auto; min-height: 0; max-width: none; align-content: center; justify-items: center; margin: 0; padding: 2rem; text-align: center; }
-  .control-shell.is-empty .empty-state > p:not(.overline) { margin-top: 1rem; }
-}
-
-/* NOTE: no global prefers-reduced-motion override here on purpose. The
-   site setting (.reduce-interface-motion above) is the single source of
-   truth and it is initialized from the OS preference, so an explicit
-   "Enable animations" choice is never overridden by the OS. */
-
-/* Monochrome workspace — selected from the concept-18 exploration. */
-body { height: 100vh; overflow: hidden; }
-
-.control-shell {
-  grid-template-columns: 370px minmax(0, 1fr);
-  height: 100vh;
-  min-height: 0;
-  overflow: hidden;
-  background: var(--surface-bg);
-}
-
-.sidebar {
-  position: relative;
-  z-index: 20;
-  height: 100vh;
-  min-height: 0;
-  padding: 1.1rem 1.15rem 1rem;
-  border-color: var(--border);
-  background: var(--surface-sidebar);
-}
-
-.demo-wordmark {
-  flex: 0 0 auto;
-  margin-bottom: 1rem;
-  padding-bottom: 1rem;
-  border-bottom: 1px solid var(--border-soft);
-  font-size: 1.15rem;
-}
-
-.sidebar-product {
-  display: flex;
-  min-height: 0;
-  flex: 1 1 auto;
-  flex-direction: column;
-  align-items: stretch;
-  padding: .15rem .35rem .8rem;
-}
-
-.sidebar-product-heading { display: grid; gap: .32rem; }
-.sidebar-product-heading > span {
-  color: var(--text-soft);
-  font-family: var(--font-mono);
-  font-size: .6rem;
-  letter-spacing: .11em;
-}
-.sidebar-product-heading strong {
-  color: var(--text-hover);
-  font-size: .88rem;
-  font-weight: 550;
-  letter-spacing: -.01em;
-  line-height: 1.25;
-}
-.sidebar-product .device-thumbnail {
-  display: flex;
-  min-height: 0;
-  flex: 1 1 auto;
-  align-items: center;
-  justify-content: center;
-  padding: .7rem .4rem;
-}
-.sidebar-product .device-thumbnail img {
-  width: 100%;
-  height: 100%;
-  max-height: 52vh;
-  object-fit: contain;
-  filter: drop-shadow(0 22px 32px rgb(0 0 0 / 45%));
-}
-.sidebar-product-status {
-  display: flex;
-  margin-top: auto;
-  align-items: center;
-  justify-content: center;
-  gap: .5rem;
-  color: var(--text-strong);
-  font-size: .7rem;
-}
-.sidebar-product-status .status-dot { width: .45rem; height: .45rem; border-radius: 50%; background: var(--ghost); }
-.sidebar-battery { display: flex; align-items: center; gap: .35rem; }
-.sidebar-battery::before { color: var(--ghost); content: "·"; }
-.sidebar-battery .battery-icon { width: 1.45rem; }
-#sidebar-battery-value { min-width: 2.4em; color: var(--text-strong); text-align: start; font-variant-numeric: tabular-nums; }
-.control-shell:not(.is-empty) .sidebar-product-status .status-dot { background: var(--ui-accent); box-shadow: 0 0 0 3px var(--ui-accent-soft); }
-
-.device-label { margin: auto .35rem .5rem; padding-top: .4rem; }
-.device-panel { flex: 0 0 auto; border-color: var(--border-soft); border-radius: 7px; background: var(--surface-panel-strong); }
-.device-row { padding: .58rem .68rem; border-bottom-color: var(--border-soft); }
-.device-row-copy strong { font-size: .74rem; }
-.device-row-copy small { font-size: .6rem; }
-.device-add { padding: .58rem .68rem; font-size: .68rem; }
-.sidebar nav { margin-top: .55rem; }
-.nav-item { width: 1.8rem; height: 1.8rem; border-radius: 5px; }
-.nav-item.has-label { width: auto; padding: 0 .5rem; font-size: .68rem; }
-.nav-item svg { width: .95rem; height: .95rem; }
-.sidebar > .build-badge { margin-top: .6rem !important; font-size: .52rem; }
-
-.control-shell .control-panel {
-  display: flex;
-  width: 100%;
-  max-width: none;
-  min-height: 0;
-  flex-direction: column;
-  gap: .72rem;
-  margin: 0;
-  padding: .9rem .95rem 6.2rem;
-  overflow-y: auto;
-  scrollbar-color: var(--border-hover) transparent;
-  scrollbar-width: thin;
-}
-.control-panel::-webkit-scrollbar { display: block; width: 8px; }
-.control-panel::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 8px; background: var(--border-hover); background-clip: padding-box; }
-
-.panel-top { position: static; z-index: auto; order: 0; background: transparent; }
-.control-shell .panel-header { display: none; }
-.panel-header h1 { font-size: clamp(2rem, 3.4vw, 3.25rem); }
-.live-status {
-  min-height: 2.1rem;
-  margin: 0;
-  padding: .44rem .65rem;
-  border-color: var(--border-soft);
-  border-radius: 7px;
-  background: var(--surface-panel-soft);
-  color: var(--text-soft);
-  font-size: .63rem;
-}
-
-.control-shell .device-overview {
-  order: 2;
-  min-height: 94px;
-  /* NOTE: flex-basis must stay auto, not a fixed px. The CONNECTION card
-     grows a fourth line (Receiver LED toggle) on Pulsar hardware, and a
-     fixed basis + overflow:hidden clips it mid-button. min-height keeps
-     the compact look; the row grows only when a card needs it — same
-     pattern as .settings-grid below. */
-  flex: 0 0 auto;
-  grid-template-columns: repeat(3, 1fr);
-  border-color: var(--border);
-  border-radius: 8px;
-  background: var(--surface-panel);
-}
-.control-shell .device-overview .summary-stat {
-  padding: .75rem 1.15rem;
-  border-color: var(--line-soft);
-}
-.control-shell .device-overview .summary-stat > span { margin-bottom: .38rem; font-size: .6rem; }
-.control-shell .device-overview .summary-stat strong { font-size: 1.18rem; }
-.control-shell .device-overview .summary-stat small { font-size: .59rem; }
-
-.workspace-tabs {
-  position: sticky;
-  top: -.9rem;
-  z-index: 10;
-  order: 1;
-  display: flex;
-  flex: 0 0 auto;
-  gap: 0;
-  margin: 0;
-  padding: .3rem;
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  background: var(--surface-tabs);
-  backdrop-filter: blur(12px);
-}
-.workspace-tabs button {
-  position: relative;
-  min-width: 7rem;
-  padding: .68rem 1rem;
-  border: 0;
-  border-radius: 5px;
-  background: transparent;
-  color: var(--text-soft);
-  font-size: .7rem;
-  font-weight: 550;
-}
-.workspace-tabs button:hover { background: var(--surface-hover-alt); color: var(--text-hover); }
-.workspace-tabs button[aria-selected="true"] { color: var(--text-hover); }
-.workspace-tabs button[aria-selected="true"]::after {
-  position: absolute;
-  inset-inline-end: .9rem;
-  bottom: .12rem;
-  inset-inline-start: .9rem;
-  height: 1px;
-  background: var(--text-hover);
-  content: "";
-}
-
-.workspace-tab-hidden { display: none !important; }
-.workspace-tab-empty {
-  order: 3;
-  padding: 3rem 1.25rem;
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  background: var(--surface-panel);
-  text-align: center;
-}
-.workspace-tab-empty p { margin: 0; color: var(--text-hover); font-size: .86rem; }
-.workspace-tab-empty small { display: block; margin-top: .45rem; color: var(--text-soft); font-size: .68rem; }
-
-#performance-settings { order: 3; }
-#macro-settings { order: 4; }
-#lighting-settings { order: 5; }
-#logitech-onboard, #nape-layers { order: 6; }
-/* The MX Master feature cards are the primary Advanced-tab content; without an
-   order they fall to 0 and render above the sticky tab nav (order 1), pushing
-   it into the middle of the page. Place them just before Device details. */
-#logitech-mx-master-settings { order: 6; }
-#logitech-device-details { order: 7; }
-#logitech-analog-button-settings { order: 8; }
-#pulsar-advanced { order: 9; }
-.testing-note { order: 10; }
-#device-debug-details { order: 11; }
-#interface-settings-page { order: 12; }
-
-.control-shell .settings-grid {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr);
-  grid-template-rows: none;
-  gap: .72rem;
-  margin-top: 0;
-}
-.control-shell .setting-card {
-  min-height: 0;
-  padding: 1.15rem 1.25rem;
-  border-color: var(--border);
-  border-radius: 14px;
-  background: var(--surface-panel);
-  box-shadow: 0 8px 24px -12px rgb(0 0 0 / 0.5), 0 2px 6px -2px rgb(0 0 0 / 0.35);
-}
-.control-shell .dpi-card { grid-row: auto; }
-.control-shell .setting-heading { margin-bottom: 1rem; }
-.control-shell .setting-heading h2 { font-size: 1rem; }
-.control-shell .setting-heading p { margin-bottom: .4rem; font-size: .68rem; }
-.dpi-header-actions input {
-  width: 12.5rem;
-  min-width: 0;
-  padding: 0;
-  color: var(--text-hover);
-  font: 500 2.2rem/1 var(--font-sans);
-  letter-spacing: -.04em;
-  text-align: end;
-}
-.dpi-header-actions button { border-radius: 5px; background: transparent; }
-.segmented { gap: 0; }
-.segmented button {
-  border-radius: 0;
-  background: var(--surface-control);
-}
-.segmented button:hover:not(:disabled) {
-  border-color: var(--line-strong);
-  background: var(--surface-hover-soft);
-  color: var(--text-hover);
-}
-.segmented button.selected:hover:not(:disabled) {
-  border-color: var(--ui-accent);
-  background: var(--ui-accent);
-  color: var(--ui-accent-ink);
-}
-.segmented button:first-child { border-radius: 6px 0 0 6px; }
-.segmented button:last-child { border-radius: 0 6px 6px 0; }
-.control-shell .segmented button.selected,
-.control-shell .setting-action button:not(:disabled),
-.control-shell .dpi-header-actions button:not(:disabled) {
-  border-color: var(--ui-accent);
-  background: var(--ui-accent);
-  color: var(--ui-accent-ink);
-}
-.setting-note { margin-top: .65rem; }
-
-/* The generic remap component keeps the OpenMouse data contract, but gets a
-   more deliberate control surface than a stack of unstyled native labels. */
-#button-mapping-settings,
-#ksnake-macro-settings,
-#ksnake-scroll-settings {
-  width: 100%;
-  max-width: 960px;
-  min-width: 0;
-  margin-inline: auto;
-  box-sizing: border-box;
-}
-#button-mapping-settings .field-note,
-#ksnake-macro-settings .field-note {
-  max-width: 72ch;
-  overflow-wrap: anywhere;
-  line-height: 1.5;
-}
-#ksnake-macro-settings {
-  padding: clamp(1.1rem, 2.3vw, 1.8rem);
-}
-.m2nex-profile-overview {
-  display: flex;
-  align-items: center;
-  gap: .55rem;
-  width: min(100% - 2rem, 960px);
-  margin: .25rem auto .1rem;
-  padding: .45rem .65rem;
-  box-sizing: border-box;
-  border: 1px solid var(--border);
-  border-radius: 10px;
-  background: var(--surface-panel);
-  box-shadow: 0 6px 18px -16px rgb(0 0 0 / 55%);
-}
-.m2nex-profile-overview-title {
-  display: inline-flex;
-  align-items: baseline;
-  flex: 0 0 auto;
-  gap: .4rem;
-  white-space: nowrap;
-}
-.m2nex-profile-overview-title span {
-  color: var(--text-soft);
-  font: .58rem var(--font-mono);
-  letter-spacing: .1em;
-}
-.m2nex-profile-overview-title strong {
-  color: var(--text-hover);
-  font-size: .74rem;
-  font-weight: 700;
-}
-.m2nex-profile-overview-state {
-  flex: 0 0 auto;
-  padding: .2rem .38rem;
-  border: 1px solid var(--border);
-  border-radius: 999px;
-  color: var(--dim);
-  font: .56rem var(--font-mono);
-  white-space: nowrap;
-}
-.m2nex-profile-overview-state.is-dirty {
-  border-color: color-mix(in srgb, var(--ui-accent) 62%, var(--border));
-  color: var(--ui-accent);
-}
-.m2nex-profile-overview-picker {
-  display: flex;
-  align-items: center;
-  flex: 0 1 12rem;
-  min-width: 0;
-  gap: .4rem;
-  color: var(--text-soft);
-  font-size: .64rem;
-}
-.m2nex-profile-overview-picker-label {
-  flex: 0 0 auto;
-  color: var(--dim);
-  font: .58rem var(--font-mono);
-}
-.m2nex-profile-overview-picker select {
-  width: 100%;
-  min-width: 8rem;
-  min-height: 1.85rem;
-  padding: .32rem 1.65rem .32rem .55rem;
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  background: var(--input);
-  color: var(--text-input);
-  color-scheme: dark;
-  font: .69rem var(--font-sans);
-}
-.m2nex-profile-overview-picker select:hover:not(:disabled) { border-color: var(--border-hover); }
-.m2nex-profile-overview-actions {
-  display: flex;
-  align-items: center;
-  flex: 0 0 auto;
-  margin-inline-start: auto;
-  gap: .45rem;
-  flex-wrap: wrap;
-}
-.m2nex-profile-overview-actions button {
-  min-height: 1.85rem;
-  padding: .32rem .55rem;
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  background: var(--surface-control);
-  color: var(--text-soft);
-  font-size: .65rem;
-  font-weight: 650;
-}
-.m2nex-profile-overview-actions button:hover:not(:disabled) {
-  border-color: var(--border-hover);
-  color: var(--text-hover);
-}
-.m2nex-profile-overview-actions .m2nex-profile-overview-apply {
-  border-color: var(--ui-accent);
-  background: var(--ui-accent);
-  color: var(--ui-accent-ink);
-}
-.m2nex-profile-overview-actions .m2nex-profile-overview-apply:hover:not(:disabled) {
-  border-color: color-mix(in srgb, var(--ui-accent) 82%, #ffffff);
-  background: color-mix(in srgb, var(--ui-accent) 82%, #ffffff);
-}
-.m2nex-profile-import-input {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-  white-space: nowrap;
-  border: 0;
-}
-.button-map-footer { display:flex;justify-content:flex-end;margin-top:.7rem;padding-top:.65rem;border-top:1px solid var(--border-rule) }
-.button-map-reset { padding:.42rem .65rem;border:1px solid var(--border);border-radius:6px;background:var(--surface-control);color:var(--text-soft);font-size:.62rem;font-weight:600;cursor:pointer }
-.button-map-reset:hover:not(:disabled) { border-color:var(--border-hover);color:var(--text-hover);background:var(--surface-hover-soft) }
-.button-map-reset:disabled { opacity:.5;cursor:not-allowed }
-@media (max-width: 760px) {
-  .m2nex-profile-overview {
-    width: calc(100% - 1rem);
-    flex-wrap: wrap;
-    gap: .4rem .5rem;
-    padding: .5rem .55rem;
-  }
-  .m2nex-profile-overview-title {
-    margin-inline-end: auto;
-  }
-  .m2nex-profile-overview-picker {
-    flex: 1 1 10rem;
-  }
-  .m2nex-profile-overview-actions {
-    margin-inline-start: 0;
-  }
-}
-.ksnake-macro-heading {
-  align-items: center;
-  gap: 1.5rem;
-  margin-bottom: 1rem;
-}
-.ksnake-macro-heading > div { min-width: 0; }
-.ksnake-macro-heading h2 { font-size: clamp(1.15rem, 2vw, 1.45rem); }
-.ksnake-macro-lead {
-  max-width: 52ch;
-  margin: .45rem 0 0;
-  color: var(--text-soft);
-  font-size: .78rem;
-  line-height: 1.45;
-}
-.ksnake-macro-save {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: .45rem;
-  min-height: 2.55rem;
-  padding: .62rem .95rem;
-  border: 1px solid var(--ui-accent);
-  border-radius: 8px;
-  background: var(--ui-accent);
-  color: var(--ui-accent-ink);
-  font-size: .78rem;
-  font-weight: 750;
-  white-space: nowrap;
-}
-.ksnake-macro-save:hover:not(:disabled) {
-  background: color-mix(in srgb, var(--ui-accent) 82%, #ffffff);
-  border-color: color-mix(in srgb, var(--ui-accent) 82%, #ffffff);
-  transform: translateY(-1px);
-}
-.ksnake-macro-save:active:not(:disabled) { transform: translateY(1px); }
-.ksnake-macro-save:focus-visible,
-.ksnake-macro-clear:focus-visible,
-.ksnake-macro-delete:focus-visible {
-  outline: 2px solid var(--ui-accent);
-  outline-offset: 2px;
-}
-.ksnake-macro-notice {
-  margin: 0 0 1rem;
-  padding: .65rem .8rem;
-  border-inline-start: 3px solid var(--ui-accent);
-  background: color-mix(in srgb, var(--ui-accent) 7%, var(--surface-raised));
-  color: var(--text-soft);
-  font-size: .72rem;
-  line-height: 1.45;
-}
-.ksnake-macro-slot-picker {
-  display: grid;
-  grid-template-columns: auto minmax(12rem, 20rem);
-  align-items: center;
-  gap: .8rem;
-  margin: 0;
-  color: var(--text-hover);
-  font-size: .76rem;
-  font-weight: 650;
-}
-.ksnake-macro-slot-picker span { color: var(--text-soft); }
-.ksnake-macro-slot-picker select {
-  width: 100%;
-  min-height: 2.55rem;
-  box-sizing: border-box;
-  padding: .58rem .7rem;
-  border: 1px solid var(--border-hover);
-  border-radius: 8px;
-  background: var(--input);
-  color: var(--text-input);
-  color-scheme: dark;
-  font-size: .78rem;
-  font-weight: 650;
-}
-.ksnake-macro-slot-picker select:hover:not(:disabled) { border-color: var(--ui-accent); }
-.ksnake-macro-recorder {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 1rem;
-  margin-top: 1rem;
-  padding: .9rem 1rem;
-  border: 1px solid var(--border);
-  border-radius: 10px;
-  background: color-mix(in srgb, var(--surface-control) 72%, transparent);
-}
-.ksnake-macro-recorder.is-recording {
-  border-color: color-mix(in srgb, var(--ui-accent) 58%, var(--border));
-  background: color-mix(in srgb, var(--ui-accent) 7%, var(--surface-control));
-}
-.ksnake-macro-recorder-status {
-  display: flex;
-  align-items: center;
-  gap: .7rem;
-  min-width: 0;
-}
-.ksnake-macro-recorder-status > div {
-  display: grid;
-  gap: .2rem;
-  min-width: 0;
-}
-.ksnake-macro-recorder-status strong {
-  color: var(--text-hover);
-  font-size: .78rem;
-  font-weight: 750;
-}
-.ksnake-macro-recorder-status span:not(.ksnake-macro-recorder-dot) {
-  color: var(--text-soft);
-  font-size: .7rem;
-  line-height: 1.4;
-}
-.ksnake-macro-recorder-dot {
-  flex: 0 0 .62rem;
-  width: .62rem;
-  height: .62rem;
-  border-radius: 50%;
-  background: var(--text-faint);
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--text-faint) 12%, transparent);
-}
-.ksnake-macro-recorder.is-recording .ksnake-macro-recorder-dot {
-  background: var(--destructive);
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--destructive) 15%, transparent);
-  animation: ksnake-macro-recording-pulse 1.2s ease-in-out infinite;
-}
-.ksnake-macro-recorder-tools {
-  display: flex;
-  align-items: flex-end;
-  flex: 0 0 auto;
-  gap: .65rem;
-}
-.ksnake-macro-timing-picker {
-  display: grid;
-  gap: .2rem;
-  color: var(--text-soft);
-  font-size: .62rem;
-  font-weight: 650;
-}
-.ksnake-macro-timing-picker select {
-  min-height: 2.35rem;
-  padding: .5rem 1.8rem .5rem .65rem;
-  border: 1px solid var(--border-hover);
-  border-radius: 7px;
-  background: var(--input);
-  color: var(--text-input);
-  color-scheme: dark;
-  font-size: .7rem;
-  font-weight: 650;
-}
-.ksnake-macro-timing-picker select:hover:not(:disabled) { border-color: var(--ui-accent); }
-.ksnake-macro-fixed-delay-picker {
-  display: grid;
-  gap: .2rem;
-  color: var(--text-soft);
-  font-size: .62rem;
-  font-weight: 650;
-}
-.ksnake-macro-fixed-delay-control {
-  display: flex;
-  align-items: center;
-  gap: .3rem;
-}
-.ksnake-macro-fixed-delay-control input {
-  width: 4.4rem;
-  min-height: 2.35rem;
-  box-sizing: border-box;
-  padding: .5rem .55rem;
-  border: 1px solid var(--border-hover);
-  border-radius: 7px;
-  background: var(--input);
-  color: var(--text-input);
-  color-scheme: dark;
-  font: 650 .7rem var(--font-mono);
-}
-.ksnake-macro-fixed-delay-control input:hover:not(:disabled),
-.ksnake-macro-fixed-delay-control input:focus-visible { border-color: var(--ui-accent); }
-.ksnake-macro-fixed-delay-control input:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
-.ksnake-macro-fixed-delay-control small {
-  color: var(--text-soft);
-  font: .64rem var(--font-mono);
-}
-.ksnake-macro-recorder-actions {
-  display: flex;
-  flex: 0 0 auto;
-  gap: .45rem;
-}
-.ksnake-macro-record,
-.ksnake-macro-stop,
-.ksnake-macro-cancel,
-.ksnake-macro-manual-add {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: .4rem;
-  min-height: 2.35rem;
-  padding: .55rem .8rem;
-  border: 1px solid var(--border-hover);
-  border-radius: 7px;
-  background: var(--surface-control);
-  color: var(--text-hover);
-  font-size: .72rem;
-  font-weight: 700;
-  white-space: nowrap;
-}
-.ksnake-macro-record,
-.ksnake-macro-stop {
-  border-color: var(--ui-accent);
-  background: var(--ui-accent);
-  color: var(--ui-accent-ink);
-}
-.ksnake-macro-record:hover:not(:disabled),
-.ksnake-macro-stop:hover:not(:disabled) {
-  border-color: color-mix(in srgb, var(--ui-accent) 82%, #ffffff);
-  background: color-mix(in srgb, var(--ui-accent) 82%, #ffffff);
-}
-.ksnake-macro-cancel:hover:not(:disabled) {
-  border-color: var(--border-hover);
-  background: var(--surface-hover-soft);
-}
-.ksnake-macro-manual-add:hover:not(:disabled) {
-  border-color: var(--ui-accent);
-  background: var(--surface-hover-soft);
-  color: var(--text-hover);
-  transform: translateY(-1px);
-}
-.ksnake-macro-record:focus-visible,
-.ksnake-macro-stop:focus-visible,
-.ksnake-macro-cancel:focus-visible,
-.ksnake-macro-manual-add:focus-visible {
-  outline: 2px solid var(--ui-accent);
-  outline-offset: 2px;
-}
-.ksnake-macro-recording-list {
-  margin-top: 1rem;
-  overflow: hidden;
-  border: 1px solid var(--line-soft);
-  border-radius: 10px;
-  background: var(--surface-input);
-}
-.ksnake-macro-recording-list-heading {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: .8rem;
-  padding: .65rem .8rem;
-  border-bottom: 1px solid var(--line-soft);
-  color: var(--text-soft);
-  font: 650 .64rem var(--font-mono);
-  letter-spacing: .07em;
-  text-transform: uppercase;
-}
-.ksnake-macro-recording-list-heading span:last-child { color: var(--ui-accent); }
-.ksnake-macro-recording-empty {
-  margin: 0;
-  padding: 1rem .8rem;
-  color: var(--text-soft);
-  font-size: .74rem;
-}
-.ksnake-macro-recording-list ol {
-  display: grid;
-  max-height: 18rem;
-  margin: 0;
-  padding: .35rem;
-  overflow: auto;
-  list-style: none;
-}
-.ksnake-macro-recording-list li {
-  display: grid;
-  grid-template-columns: 2rem minmax(0, 1fr) auto;
-  align-items: center;
-  gap: .6rem;
-  min-width: 0;
-  padding: .55rem .45rem;
-  border-bottom: 1px solid var(--line-soft);
-}
-.ksnake-macro-recording-list li:last-child { border-bottom: 0; }
-.ksnake-macro-recording-step-number {
-  color: var(--text-soft);
-  font: 650 .66rem var(--font-mono);
-  text-align: center;
-}
-.ksnake-macro-recording-list li strong {
-  min-width: 0;
-  overflow: hidden;
-  color: var(--text-hover);
-  font-size: .74rem;
-  font-weight: 650;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.ksnake-macro-recording-list li small {
-  color: var(--text-soft);
-  font: .64rem var(--font-mono);
-  white-space: nowrap;
-}
-@keyframes ksnake-macro-recording-pulse {
-  0%, 100% { opacity: 1; transform: scale(1); }
-  50% { opacity: .48; transform: scale(.8); }
-}
-.reduce-interface-motion .ksnake-macro-recorder-dot { animation: none; }
-.button-map-list {
-  display: grid;
-  gap: .45rem;
-  margin-top: .15rem;
-}
-.button-map-row {
-  display: grid;
-  grid-template-columns: minmax(9rem, .9fr) auto minmax(13rem, 1.1fr);
-  align-items: center;
-  gap: .75rem;
-  min-width: 0;
-  padding: .55rem .65rem;
-  border: 1px solid var(--line-soft);
-  border-radius: 9px;
-  background: color-mix(in srgb, var(--surface-control) 74%, transparent);
-  color: var(--text-soft);
-  font-size: .72rem;
-  transition: border-color .15s ease, background .15s ease;
-}
-.button-map-row:hover {
-  border-color: var(--border-hover);
-  background: var(--surface-hover-soft);
-}
-.button-map-row:focus-within {
-  border-color: var(--ui-accent);
-  box-shadow: 0 0 0 2px var(--ui-accent-soft);
-}
-.button-map-control {
-  display: flex;
-  align-items: center;
-  gap: .65rem;
-  min-width: 0;
-}
-.button-map-index {
-  display: grid;
-  flex: 0 0 1.7rem;
-  width: 1.7rem;
-  height: 1.7rem;
-  place-items: center;
-  border: 1px solid var(--border);
-  border-radius: 5px;
-  color: var(--dim);
-  font: .6rem var(--font-mono);
-  letter-spacing: .03em;
-}
-.button-map-name {
-  min-width: 0;
-  overflow: hidden;
-  color: var(--text-hover);
-  font-weight: 550;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.button-map-connector {
-  color: var(--dim);
-  font: .58rem var(--font-mono);
-  letter-spacing: .1em;
-  text-transform: uppercase;
-}
-.button-map-select-wrap {
-  position: relative;
-  min-width: 0;
-}
-.button-map-select-wrap::after {
-  position: absolute;
-  top: 50%;
-  right: .75rem;
-  width: .38rem;
-  height: .38rem;
-  border-right: 1px solid var(--text-soft);
-  border-bottom: 1px solid var(--text-soft);
-  content: "";
-  pointer-events: none;
-  transform: translateY(-65%) rotate(45deg);
-}
-.button-map-select-wrap select {
-  width: 100%;
-  min-width: 0;
-  padding: .55rem 2rem .55rem .7rem;
-  border: 1px solid var(--border);
-  border-radius: 7px;
-  background: var(--input);
-  color: var(--text-input);
-  color-scheme: dark;
-  font-size: .72rem;
-  cursor: pointer;
-  appearance: none;
-}
-.button-map-select-wrap select:hover:not(:disabled) {
-  border-color: var(--border-hover);
-}
-.button-map-select-wrap select:disabled {
-  background: var(--surface-strong);
-  color: var(--text-soft);
-  cursor: not-allowed;
-  opacity: .72;
-}
-.button-map-select-wrap:has(select:disabled)::after { opacity: .45; }
-@media (max-width: 620px) {
-  .button-map-row {
-    grid-template-columns: minmax(0, 1fr);
-    gap: .4rem;
-  }
-  .button-map-connector { display: none; }
-}
-
-#pulsar-advanced {
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: .72rem;
-  margin-top: 0;
-}
-#pulsar-advanced > .setting-card { border-color: var(--border); border-radius: 14px; background: var(--surface-panel); box-shadow: 0 8px 24px -12px rgb(0 0 0 / 0.5), 0 2px 6px -2px rgb(0 0 0 / 0.35); }
-.profile-disclosure, .egg-collapsible, .egg-experimental { border-color: var(--border); border-radius: 14px; background: var(--surface-panel); box-shadow: 0 8px 24px -12px rgb(0 0 0 / 0.5), 0 2px 6px -2px rgb(0 0 0 / 0.35); }
-
-.interface-settings-page { padding-top: 0; }
-.interface-settings-header { padding-top: .4rem; }
-.interface-setting-card { border-color: var(--border); border-radius: 8px; background: var(--surface-panel); }
-
-.control-shell.sidebar-hidden { grid-template-columns: minmax(0, 1fr); }
-
-@media (max-width: 1120px) {
-  .control-shell:not(.full-desktop-shell) { grid-template-columns: 300px minmax(0, 1fr); }
-  .workspace-tabs { overflow-x: auto; }
-  .workspace-tabs button { min-width: 6.1rem; padding-inline: .7rem; }
-  .sidebar-product .device-thumbnail img { max-height: 42vh; }
-}
-.easy-switch-slots { display: flex; flex-wrap: wrap; gap: .35rem; }
-.easy-switch-slots > * { min-width: 2.1rem; padding: .28rem .5rem; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--card); color: var(--dim); font-size: .68rem; text-align: center; }
-.easy-switch-slots span { opacity: .5; cursor: default; }
-.easy-switch-slots button { cursor: pointer; }
-.easy-switch-slots .is-current { border-color: color-mix(in srgb, var(--ui-accent) 58%, transparent); background: var(--ui-accent-soft); color: color-mix(in srgb, var(--ui-accent) 68%, #ffffff); }
-.easy-switch-confirm { margin-top: .55rem; padding: .55rem .65rem; border: 1px solid color-mix(in srgb, var(--warning) 34%, var(--surface-panel)); border-radius: 7px; background: color-mix(in srgb, var(--warning) 8%, var(--surface-panel)); }
-.easy-switch-confirm p { margin: 0 0 .5rem; color: color-mix(in srgb, var(--warning) 66%, var(--text-soft)); font-size: .66rem; line-height: 1.45; }
-.easy-switch-confirm-actions { display: flex; gap: .4rem; }
-.easy-switch-confirm-actions button { padding: .32rem .6rem; border: 1px solid color-mix(in srgb, var(--warning) 55%, var(--surface-panel)); border-radius: 6px; background: color-mix(in srgb, var(--warning) 16%, var(--surface-panel)); color: color-mix(in srgb, var(--warning) 78%, var(--text-hover)); font-size: .64rem; }
-
-
-.toast-stack {
-  position: fixed;
-  top: 1rem;
-  inset-inline-end: 1rem;
-  z-index: 200;
-  display: flex;
-  width: min(24rem, calc(100vw - 2rem));
-  flex-direction: column;
-  overflow: hidden;
-  border: 1px solid var(--border-rule);
-  border-radius: 10px;
-  background: var(--surface-panel);
-  box-shadow: 0 12px 34px rgb(0 0 0 / .38);
-}
-.toast {
-  --toast-accent: var(--text-faint);
-  display: grid;
-  grid-template-columns: auto 1fr auto;
-  align-items: start;
-  gap: .7rem;
-  padding: .85rem .9rem;
-  border-top: 1px solid var(--border-rule);
-  color: var(--text-strong);
-  animation: toast-in .22s cubic-bezier(.2, .8, .3, 1);
-}
-.toast:first-child { border-top: 0; }
-.toast.is-leaving {
-  overflow: hidden;
-  animation: toast-out .18s cubic-bezier(.4, 0, 1, 1) forwards;
-}
-.toast-success { --toast-accent: var(--success); }
-.toast-error { --toast-accent: var(--destructive); }
-.toast-warning { --toast-accent: var(--warning); }
-.toast-info { --toast-accent: var(--info); }
-.toast-prominent {
-  background: color-mix(in srgb, var(--destructive) 9%, var(--surface-panel));
-  box-shadow: inset 3px 0 0 var(--toast-accent);
-}
-.toast-icon {
-  width: 1.05rem;
-  height: 1.05rem;
-  margin-top: .15rem;
-  color: var(--toast-accent);
-}
-.toast-copy { min-width: 0; }
-.toast-copy strong {
-  display: block;
-  color: var(--text-hover);
-  font-size: .9rem;
-  font-weight: 600;
-  line-height: 1.4;
-}
-.toast-copy span {
-  display: block;
-  margin-top: .15rem;
-  color: var(--text-soft);
-  font-size: .8rem;
-  line-height: 1.5;
-  overflow-wrap: anywhere;
-}
-.toast-action {
-  display: inline-flex;
-  align-items: center;
-  gap: .4rem;
-  margin-top: .65rem;
-  padding: .42rem .65rem;
-  border: 1px solid color-mix(in srgb, var(--toast-accent) 52%, var(--border-rule));
-  border-radius: 6px;
-  background: color-mix(in srgb, var(--toast-accent) 18%, var(--surface-panel));
-  color: var(--text-hover);
-  font-size: .75rem;
-  font-weight: 650;
-  line-height: 1;
-  text-decoration: none;
-}
-.toast-action svg { width: .9rem; height: .9rem; }
-.toast-action:hover { background: color-mix(in srgb, var(--toast-accent) 28%, var(--surface-panel)); }
-.toast-action:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
-.toast-dismiss {
-  display: grid;
-  width: 1.5rem;
-  height: 1.5rem;
-  padding: .3rem;
-  place-items: center;
-  border: 0;
-  border-radius: 6px;
-  background: transparent;
-  color: var(--text-faint);
-  cursor: pointer;
-}
-.toast-dismiss svg { width: 100%; height: 100%; }
-.toast-dismiss:hover { background: var(--surface-hover); color: var(--text-hover); }
-.toast-dismiss:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
-
-@keyframes toast-in {
-  from { opacity: 0; transform: translateY(-.45rem); }
-  to { opacity: 1; transform: none; }
-}
-@keyframes toast-out {
-  from { max-height: 5rem; opacity: 1; }
-  to { max-height: 0; padding-block: 0; opacity: 0; transform: translateY(-.2rem); }
-}
-.reduce-interface-motion .toast { animation: none; }
-.reduce-interface-motion .toast.is-leaving { animation-duration: .01s; }
-
-.button-remap-list { display: flex; flex-direction: column; gap: .3rem; }
-.button-remap-row { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .3rem .45rem; border: 1px solid transparent; border-radius: 6px; color: var(--faint); font-size: .72rem; }
-.button-remap-row .option-menu { flex: 0 1 11rem; min-width: 0; }
-/* A control the firmware will not let anything point at reads as a fact about
-   the mouse, not a disabled input the user should try to enable. */
-.button-remap-row output { color: var(--dim); font-size: .7rem; }
-.button-remap-diverted { margin-top: .6rem; padding: .55rem .65rem; border: 1px solid color-mix(in srgb, var(--warning) 34%, var(--surface-panel)); border-radius: 7px; background: color-mix(in srgb, var(--warning) 8%, var(--surface-panel)); }
-.button-remap-diverted p { margin: 0 0 .5rem; color: color-mix(in srgb, var(--warning) 66%, var(--text-soft)); font-size: .66rem; line-height: 1.45; }
-.button-remap-diverted button { padding: .32rem .6rem; border: 1px solid color-mix(in srgb, var(--warning) 55%, var(--surface-panel)); border-radius: 6px; background: color-mix(in srgb, var(--warning) 16%, var(--surface-panel)); color: color-mix(in srgb, var(--warning) 78%, var(--text-hover)); font-size: .64rem; }
-.ksnake-macro-steps { display: flex; flex-direction: column; gap: .55rem; margin-top: 1rem; }
-.ksnake-macro-step { display: grid; grid-template-columns: 2rem minmax(8rem, 1.05fr) minmax(7rem, .9fr) 5.5rem 6rem minmax(9rem, 1.2fr) 2.25rem; align-items: end; gap: .55rem; padding: .7rem; border: 1px solid var(--line-soft); border-radius: 10px; background: var(--surface-input); }
-.ksnake-macro-step-number { align-self: center; color: var(--text-soft); font: 650 .7rem var(--font-mono); text-align: center; }
-.ksnake-macro-step-field,
-.ksnake-macro-number { display: grid; gap: .28rem; min-width: 0; color: var(--muted); font-size: .62rem; }
-.ksnake-macro-step select, .ksnake-macro-number input { width: 100%; box-sizing: border-box; min-width: 0; min-height: 2.3rem; padding: .55rem .55rem; border: 1px solid var(--border); border-radius: 7px; background: var(--input); color: var(--text-input); font-size: .76rem; }
-.ksnake-macro-step select:hover:not(:disabled), .ksnake-macro-number input:hover:not(:disabled) { border-color: var(--border-hover); }
-.ksnake-macro-step small { align-self: end; min-width: 0; overflow: hidden; padding-bottom: .62rem; color: var(--text-soft); font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
-.ksnake-macro-preview::before { content: "Preview · "; color: var(--dim); }
-.ksnake-macro-delete { display: grid; width: 2.25rem; height: 2.3rem; padding: 0; place-items: center; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-control); color: var(--muted); }
-.ksnake-macro-delete:hover:not(:disabled) { border-color: var(--ui-accent); color: var(--ui-accent); }
-.ksnake-macro-empty { display: grid; justify-items: start; gap: .3rem; padding: 1.2rem 1.1rem; border: 1px dashed var(--border-hover); border-radius: 10px; background: color-mix(in srgb, var(--surface-raised) 74%, transparent); }
-.ksnake-macro-empty strong { color: var(--text-hover); font-size: .9rem; }
-.ksnake-macro-empty span { color: var(--text-soft); font-size: .76rem; }
-.ksnake-macro-empty-action { margin-top: .45rem; }
-.ksnake-macro-actions { display: flex; justify-content: flex-start; gap: .6rem; margin-top: 1rem; }
-.ksnake-macro-actions .ksnake-macro-save { min-width: 9.5rem; }
-.ksnake-macro-clear { min-height: 2.55rem; padding: .6rem .9rem; border: 1px solid var(--border-hover); border-radius: 8px; background: var(--surface-control); color: var(--text-soft); font-size: .76rem; font-weight: 650; }
-.ksnake-macro-clear:hover:not(:disabled) { border-color: var(--ui-accent); color: var(--text-hover); }
-.ksnake-macro-help { margin-top: 1rem; border-top: 1px solid var(--line-soft); padding-top: .75rem; color: var(--text-soft); }
-.ksnake-macro-help summary { width: max-content; color: var(--text-soft); cursor: pointer; font-size: .7rem; font-weight: 650; }
-.ksnake-macro-help summary:hover { color: var(--text-hover); }
-.ksnake-macro-help p { max-width: 72ch; margin: .55rem 0 0; font-size: .68rem; line-height: 1.5; }
-@media (max-width: 760px) {
-  .ksnake-macro-heading { align-items: flex-start; flex-direction: column; gap: .8rem; }
-  .ksnake-macro-add { width: 100%; }
-  .ksnake-macro-slot-picker { grid-template-columns: 1fr; gap: .4rem; }
-  .ksnake-macro-recorder { align-items: stretch; flex-direction: column; }
-  .ksnake-macro-recorder-tools { align-items: stretch; flex-direction: column; }
-  .ksnake-macro-timing-picker select { width: 100%; }
-  .ksnake-macro-fixed-delay-control input { width: 100%; }
-  .ksnake-macro-record,
-  .ksnake-macro-stop,
-  .ksnake-macro-cancel,
-  .ksnake-macro-manual-add { flex: 1; }
-  .ksnake-macro-recorder-actions { width: 100%; }
-  .ksnake-macro-step { grid-template-columns: 2rem minmax(0, 1fr) minmax(0, 1fr) 2.25rem; align-items: end; }
-  .ksnake-macro-step-field:nth-of-type(1) { grid-column: 2; }
-  .ksnake-macro-step-field:nth-of-type(2) { grid-column: 3; }
-  .ksnake-macro-step-number { grid-row: 1; }
-  .ksnake-macro-code-field { grid-column: 2; grid-row: 2; }
-  .ksnake-macro-delay-field { grid-column: 3; grid-row: 2; }
-  .ksnake-macro-step small { grid-column: 2 / 4; grid-row: 3; padding-bottom: 0; }
-  .ksnake-macro-delete { grid-column: 4; grid-row: 1; }
-}
-
-/* ═══════════════════════════════════════════════════════════════════════
-   Desktop shell — ported from Desktop/src/App.css
-   Icon rail (AppSidebar), pill tab bar, device showcase, info sections,
-   overview empty state, and the page container.
-   ═══════════════════════════════════════════════════════════════════════ */
-
-.control-shell {
-  grid-template-columns: 256px minmax(0, 1fr);
-}
-.control-shell.sidebar-hidden .app-sidebar { display: none; }
-.control-shell.sidebar-hidden { grid-template-columns: minmax(0, 1fr); }
-
-/* app-sidebar brand + nav are the first .app-sidebar rules in this file,
-   but keep rail-specific overrides here so later grid rules cannot win. */
-.app-sidebar {
-  position: relative;
-  z-index: 20;
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-  padding: 0.75rem 0.5rem;
-  margin: 0.55rem 0 0.55rem 0.55rem;
-  background: linear-gradient(180deg, var(--surface-strong), var(--surface-dialog));
-  border: 1px solid var(--edge);
-  border-radius: 16px;
-  box-shadow:
-    5px 8px 22px -12px rgb(0 0 0 / 0.65),
-    1px 2px 6px -2px rgb(0 0 0 / 0.45),
-    inset 0 1px 0 rgb(255 255 255 / 0.05);
-}
-.app-sidebar-top {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  gap: 1.1rem;
-  flex: 1;
-  min-height: 0;
-}
-.app-sidebar-brand {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  height: 40px;
-  padding: 0 0.5rem;
-  border: none;
-  border-radius: 8px;
-  background: transparent;
-  cursor: pointer;
-  transition: background 0.15s ease, opacity 0.15s ease;
-}
-.app-sidebar-brand-text {
-  flex-shrink: 0;
-  font-size: 0.92rem;
-  font-weight: 700;
-  letter-spacing: -0.02em;
-  color: var(--text);
-  white-space: nowrap;
-}
-.app-sidebar-brand-version {
-  flex-shrink: 0;
-  margin-inline-start: auto;
-  white-space: nowrap;
-  color: var(--faint);
-  font-size: 0.78rem;
-  font-weight: 600;
-  letter-spacing: -0.015em;
-}
-.app-sidebar-brand:hover { background: var(--hover); }
-.app-sidebar-brand .brand-mark {
-  height: 1.5rem;
-  width: auto;
-  opacity: 0.85;
-  transition: opacity 0.15s ease;
-}
-.app-sidebar-brand:hover .brand-mark,
-.app-sidebar-brand.active .brand-mark { opacity: 1; }
-.app-sidebar-nav {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  gap: 0.3rem;
-}
-.app-sidebar-nav-sep {
-  display: block;
-  height: 1px;
-  margin: 0.35rem 0.4rem;
-  background: var(--line);
-}
-.app-sidebar-nav-item {
-  display: flex;
-  align-items: center;
-  gap: 0.7rem;
-  width: 100%;
-  height: 42px;
-  padding: 0 0.7rem;
-  border: none;
-  border-radius: 8px;
-  background: transparent;
-  color: var(--dim);
-  white-space: nowrap;
-  transition: background 0.15s ease, color 0.15s ease;
-}
-.app-sidebar-nav-item + .app-sidebar-nav-item {
-  border-top: 1px solid var(--line-strong);
-  border-start-start-radius: 0;
-  border-start-end-radius: 0;
-}
-.app-sidebar-nav-item > .app-sidebar-nav-icon {
-  flex-shrink: 0;
-  width: 21px;
-  height: 21px;
-  filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.4));
-}
-/* Brand marks (Discord) are wider than tall, so they take the same optical
-   width from their aspect ratio instead of being squashed into the square
-   box the lucide nav glyphs use. */
-.app-sidebar-nav-item > .app-sidebar-nav-icon-discord {
-  flex-shrink: 0;
-  width: auto;
-  height: 16px;
-  filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.4));
-}
-.app-sidebar-nav-arrow {
-  flex-shrink: 0;
-  width: 0.85rem;
-  height: 0.85rem;
-  margin-inline-start: auto;
-  color: var(--ghost);
-  opacity: 0.9;
-  transition: color 0.15s ease, transform 0.15s ease;
-}
-.app-sidebar-nav-item:hover .app-sidebar-nav-arrow { color: var(--bright); transform: translateX(2px); }
-.app-sidebar-nav-item:hover { background: var(--hover); color: var(--bright); }
-.app-sidebar-nav-item.active { background: var(--raised); color: var(--text); }
-.app-sidebar-nav-item:disabled { opacity: 0.5; cursor: default; }
-.app-sidebar-nav-item:disabled:hover { background: transparent; color: var(--muted); }
-.app-sidebar-nav-label {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  font-size: 0.95rem;
-  font-weight: 650;
-  letter-spacing: -0.01em;
-}
-.app-sidebar-nav-text {
-  display: grid;
-  gap: 0.1rem;
-  min-width: 0;
-}
-.app-sidebar-nav-sub {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  color: var(--faint);
-  font-size: 0.72rem;
-  font-weight: 550;
-  letter-spacing: -0.005em;
-}
-/* The support entry is the one featured row: a second line so the sidebar
-   reads as a way to get help, not just another external link. */
-.app-sidebar-nav-item-featured {
-  height: auto;
-  min-height: 52px;
-  padding-block: 0.4rem;
-}
-.app-sidebar-bottom {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  gap: 0.3rem;
-  padding-top: 0.9rem;
-  border-top: 1px solid var(--line);
-}
-.app-sidebar-bottom .connect-nav.active { color: var(--ui-accent); }
-
-/* ═══════════════════════════════════════════════════════════════════════
-   Sidebar rail collapse — on the dashboard the sidebar shrinks to a
-   pure-icon rail with a floating chevron on its edge; clicking it pops
-   the full sidebar out (and back). Labels, brand text and per-item chevrons
-   hide, leaving only the colored glyphs centered in the rail. */
-.app-sidebar-collapse-toggle {
-  position: absolute;
-  top: 50%;
-  inset-inline-end: -0.875rem;
-  transform: translateY(-50%);
-  z-index: 30;
-  display: grid;
-  place-items: center;
-  width: 1.75rem;
-  height: 1.75rem;
-  padding: 0;
-  border: 1px solid var(--edge);
-  border-radius: 50%;
-  background: var(--surface-dialog);
-  color: var(--dim);
-  box-shadow:
-    0 2px 8px rgb(0 0 0 / 0.45),
-    inset 0 1px 0 rgb(255 255 255 / 0.05);
-  cursor: pointer;
-  transition: color 0.15s ease, background 0.15s ease, transform 0.15s ease;
-}
-.app-sidebar-collapse-toggle:hover {
-  background: var(--surface-strong);
-  color: var(--bright);
-  transform: translateY(-50%) translateX(2px);
-}
-.control-shell.sidebar-collapsed { grid-template-columns: 4.5rem minmax(0, 1fr); }
-.control-shell.sidebar-collapsed .app-sidebar {
-  width: 3.5rem;
-  padding: 0.75rem 0.25rem;
-}
-.control-shell.sidebar-collapsed .app-sidebar-top { gap: 1.1rem; }
-.control-shell.sidebar-collapsed .app-sidebar-brand {
-  justify-content: center;
-  padding: 0;
-}
-.control-shell.sidebar-collapsed .app-sidebar-brand-text,
-.control-shell.sidebar-collapsed .app-sidebar-brand-version,
-.control-shell.sidebar-collapsed .app-sidebar-nav-label,
-.control-shell.sidebar-collapsed .app-sidebar-nav-sub,
-.control-shell.sidebar-collapsed .app-sidebar-nav-arrow,
-.control-shell.sidebar-collapsed .app-sidebar-nav-sep { display: none; }
-.control-shell.sidebar-collapsed .app-sidebar-nav-item {
-  justify-content: center;
-  gap: 0;
-  padding: 0;
-  height: 42px;
-  min-height: 42px;
-}
-
-/* Page container */
-.control-panel .page-overview {
-  width: 100%;
-  max-width: none;
-  margin: 0;
-}
-
-/* Settings fills the desktop panel like the dashboard instead of squeezing
-   into the shared narrow `.page` column. */
-.full-desktop-content #interface-settings-page {
-  width: 100%;
-  max-width: none;
-  margin: 0;
-}
-
-/* Device feature tab bar — pill row, Desktop style */
-.device-tabs-bar {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-wrap: wrap;
-  gap: 0.4rem;
-  padding: 0.2rem 0 0.9rem;
-  position: relative;
-}
-.device-tab-pill {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5rem;
-  border: 1px solid var(--ui-accent);
-  background: var(--ui-accent);
-  color: var(--ui-accent-ink);
-  padding: 0.48rem 1.05rem;
-  border-radius: 999px;
-  font-size: 0.9rem;
-  font-weight: 650;
-  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
-}
-.device-tab-pill svg,
-.device-tab-back svg {
-  width: 16px;
-  height: 16px;
-  stroke-width: 2.2;
-}
-.device-tab-pill:hover {
-  color: var(--ui-accent-ink);
-  border-color: var(--ui-accent);
-  background: color-mix(in srgb, var(--ui-accent) 80%, #ffffff);
-}
-.device-tab-pill.active {
-  color: var(--ui-accent-ink);
-  border-color: var(--ui-accent);
-  background: var(--ui-accent);
-  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ui-accent-ink) 30%, transparent);
-}
-/* Section tabs (overview/performance/lighting/buttons/advanced) read as white
-   "paper" pills so the accent-filled Back and Profiles CTAs stand out. The
-   fill follows the theme: white across the dark shells (via --bright/--ink),
-   card white on the light shell. */
-.device-tab-pill:not(.device-tab-profiles-nav) {
-  --nav-pill-bg: var(--bright);
-  --nav-pill-ink: var(--ink);
-  background: var(--nav-pill-bg);
-  border-color: var(--nav-pill-bg);
-  color: var(--nav-pill-ink);
-}
-.control-shell[data-interface-theme="light"] .device-tab-pill:not(.device-tab-profiles-nav) {
-  --nav-pill-bg: var(--card);
-  --nav-pill-ink: var(--text);
-}
-.device-tab-pill:not(.device-tab-profiles-nav):hover {
-  background: color-mix(in srgb, var(--nav-pill-bg) 85%, var(--ui-accent));
-  border-color: var(--nav-pill-bg);
-  color: var(--nav-pill-ink);
-}
-.device-tab-pill:not(.device-tab-profiles-nav).active {
-  background: var(--nav-pill-bg);
-  border-color: var(--ui-accent);
-  color: var(--nav-pill-ink);
-  box-shadow: 0 0 0 1.5px var(--ui-accent), 0 8px 22px -6px color-mix(in srgb, var(--ui-accent) 60%, transparent);
-}
-
-/* Device Showcase (large, centered) */
-.device-showcase {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 100%;
-  box-sizing: border-box;
-  padding: 1rem 0 2rem;
-  text-align: center;
-}
-.device-showcase-name {
-  margin: 0;
-  font-size: 1.5rem;
-  font-weight: 600;
-  color: var(--bright);
-  letter-spacing: -0.01em;
-}
-.device-showcase-brand {
-  margin: 0.25rem 0 1.25rem;
-  font-size: 0.9rem;
-  color: var(--faint);
-}
-.device-diagram {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 1rem;
-  width: 100%;
-  margin: 0 auto 1.25rem;
-}
-.device-diagram-canvas {
-  position: relative;
-  flex: 0 0 auto;
-}
-.device-diagram-art {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  pointer-events: none;
-}
-.device-diagram-art .device-showcase-image {
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
-  filter: drop-shadow(0 22px 32px rgb(0 0 0 / 45%));
-}
-.device-showcase-status-pill {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-wrap: wrap;
-  gap: 0.3rem;
-  width: max-content;
-  max-width: calc(100% - 1rem);
-  margin: -0.35rem auto 0;
-  padding: 0.34rem 0.62rem;
-  border: 1px solid var(--border-soft);
-  border-radius: 999px;
-  background: var(--surface-strong);
-  box-shadow: 0 4px 12px rgb(0 0 0 / 18%), inset 0 1px 0 rgb(255 255 255 / 4%);
-  color: var(--faint);
-  font-size: 0.62rem;
-  line-height: 1;
-}
-.device-showcase-status-primary,
-.device-showcase-status-item {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.3rem;
-  white-space: nowrap;
-}
-.device-showcase-status-primary {
-  color: var(--success);
-  font-weight: 700;
-}
-.device-showcase-status-muted { color: var(--faint); }
-.device-showcase-status-separator { color: var(--text-faint); }
-.device-showcase-status-label {
-  color: var(--text-soft);
-  font-size: 0.53rem;
-  font-weight: 650;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-}
-.device-showcase-status-value {
-  color: var(--bright);
-  font-family: var(--font-mono);
-  font-size: 0.66rem;
-  font-variant-numeric: tabular-nums;
-  font-weight: 650;
-}
-.device-showcase-status-pill .device-showcase-dot { width: 5px; height: 5px; }
-.device-showcase-status-pill .battery-icon { width: 0.95rem; }
-.device-showcase-status-detail {
-  color: var(--faint);
-  font-weight: 400;
-}
-.device-showcase-dot {
-  width: 7px;
-  height: 7px;
-  border-radius: 50%;
-  background: var(--success);
-}
-
-/* Device-display travel between workspace tabs. Each tab panel mounts fresh,
-   so the device artwork glides in from the other layout's side with a blur-in
-   and a themed accent-glow sweep — entering the left performance sidebar it
-   arrives from the right (as if returning from the centered overview), and
-   entering the overview it arrives from the left (as if returning from the
-   sidebar). Pure CSS entrance animation: runs in every browser and webview
-   with no API or framework involvement; disabled only by the shared
-   reduce-motion rule. */
-@keyframes device-display-into-left {
-  0%   { transform: translate(26vw, 3vh) scale(1.1); opacity: 0; }
-  18%  { opacity: 1; }
-  100% { transform: translate(0, 0) scale(1); opacity: 1; }
-}
-@keyframes device-display-back-home {
-  0%   { transform: translate(-26vw, -3vh) scale(1.1); opacity: 0; }
-  18%  { opacity: 1; }
-  100% { transform: translate(0, 0) scale(1); opacity: 1; }
-}
-@keyframes device-glow-sidebar {
-  0%   { filter: blur(10px) drop-shadow(0 0 20px color-mix(in srgb, var(--ui-accent) 18%, transparent)); }
-  45%  { filter: blur(0) drop-shadow(0 0 30px color-mix(in srgb, var(--ui-accent) 55%, transparent)); }
-  100% { filter: blur(0) drop-shadow(0 0 20px color-mix(in srgb, var(--ui-accent) 18%, transparent)); }
-}
-@keyframes device-glow-showcase {
-  0%   { filter: blur(10px) drop-shadow(0 22px 32px rgb(0 0 0 / 45%)) drop-shadow(0 0 0 color-mix(in srgb, var(--ui-accent) 0%, transparent)); }
-  45%  { filter: blur(0) drop-shadow(0 22px 32px rgb(0 0 0 / 45%)) drop-shadow(0 0 26px color-mix(in srgb, var(--ui-accent) 55%, transparent)); }
-  100% { filter: blur(0) drop-shadow(0 22px 32px rgb(0 0 0 / 45%)) drop-shadow(0 0 20px color-mix(in srgb, var(--ui-accent) 18%, transparent)); }
-}
-.control-shell .showcase-sidebar-image {
-  animation:
-    device-display-into-left .7s cubic-bezier(.22, .61, .36, 1) both,
-    device-glow-sidebar .7s ease both;
-}
-.control-shell .button-map-showcase-art {
-  animation:
-    device-display-into-left .7s cubic-bezier(.22, .61, .36, 1) both,
-    device-glow-sidebar .7s ease both;
-}
-.control-shell .button-map-showcase-art .button-map-showcase-image {
-  animation: none;
-}
-.control-shell .device-showcase-image {
-  animation:
-    device-display-back-home .7s cubic-bezier(.22, .61, .36, 1) both,
-    device-glow-showcase .7s ease both;
-}
-/* The freshly mounted panel content settles in with a quiet rise while the
-   artwork's longer sweep plays on top — reads as one continuous glide. */
-@keyframes workspace-panel-enter {
-  from { opacity: .001; transform: translateY(10px); }
-  to   { opacity: 1; transform: none; }
-}
-.control-shell [data-workspace-host] {
-  animation: workspace-panel-enter .38s ease both;
-}
-
-/* Artwork request trigger button (missing-art devices; opens the GitHub issue form) */
-.artwork-upload-trigger {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.4rem;
-  margin-top: 0.75rem;
-  padding: 0.5rem 1rem;
-  background: color-mix(in srgb, var(--ui-accent) 12%, var(--surface-panel-strong));
-  border: 1px solid var(--border);
-  border-radius: 999px;
-  color: var(--bright);
-  font-size: 0.8rem;
-  font-weight: 600;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  font-family: var(--font-sans);
-}
-.artwork-upload-trigger:hover {
-  background: color-mix(in srgb, var(--ui-accent) 20%, var(--surface-panel-strong));
-  border-color: var(--ui-accent);
-}
-.artwork-upload-trigger:focus-visible {
-  outline: 2px solid var(--ui-accent);
-  outline-offset: 1px;
-}
-
-/* ── Welcome screen (empty / no device) ─────────────────────────────── */
-.welcome-screen {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex: 1;
-  min-height: 100%;
-  padding: 2rem;
-}
-.welcome-screen.is-compact {
-  min-height: 0;
-  flex: none;
-  padding: 3rem 2rem 0.5rem;
-}
-.games-page {
-  width: 100%;
-  max-width: 1100px;
-  margin: 0 auto;
-  padding: 1.5rem clamp(1rem, 2.5vw, 2rem) 2rem;
-  display: flex;
-  flex-direction: column;
-  gap: 1.25rem;
-}
-.games-header {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 0.25rem;
-}
-.games-title {
-  margin: 0;
-  font-size: 1.35rem;
-  font-weight: 750;
-  letter-spacing: -0.02em;
-  color: var(--text);
-}
-.games-subtitle {
-  margin: 0;
-  font-size: 0.85rem;
-  color: var(--dim);
-}
-.games-bridge-status {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.45rem;
-  margin-top: 0.5rem;
-  padding: 0.25rem 0.65rem;
-  border-radius: 999px;
-  font-size: 0.75rem;
-  color: var(--muted);
-  background: var(--surface-panel);
-  box-shadow: 0 0 0 1px var(--line);
-}
-.games-bridge-dot {
-  width: 7px;
-  height: 7px;
-  border-radius: 50%;
-  background: #5dde89;
-  box-shadow: 0 0 0 3px color-mix(in srgb, #5dde89 25%, transparent);
-}
-.games-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
-  gap: 1rem;
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-.games-tile {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  padding: 0;
-  border: none;
-  background: none;
-  color: inherit;
-  font-family: inherit;
-  text-align: start;
-  cursor: pointer;
-}
-.games-tile-art {
-  position: relative;
-  aspect-ratio: 2 / 3;
-  border-radius: 12px;
-  overflow: hidden;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--muted);
-  background: linear-gradient(160deg, var(--ui-accent-soft), var(--surface-panel));
-  box-shadow: 0 0 0 1px var(--line);
-  transition: transform 140ms ease, box-shadow 140ms ease;
-}
-.games-tile-art img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-.games-tile:hover .games-tile-art,
-.games-tile:focus-visible .games-tile-art {
-  transform: translateY(-2px);
-  box-shadow: 0 0 0 2px var(--ui-accent);
-}
-.games-tile:focus-visible { outline: none; }
-.games-tile-badge {
-  position: absolute;
-  top: 0.5rem;
-  inset-inline-end: 0.5rem;
-  padding: 0.15rem 0.5rem;
-  border-radius: 999px;
-  font-size: 0.68rem;
-  font-weight: 700;
-  color: var(--ui-accent-ink);
-  background: var(--ui-accent);
-}
-.games-tile-name {
-  font-size: 0.85rem;
-  font-weight: 600;
-  color: var(--bright);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.games-tile-request .games-tile-art {
-  flex-direction: column;
-  gap: 0.6rem;
-  padding: 1rem;
-  background: var(--surface-panel);
-  box-shadow: 0 0 0 1px var(--line-strong);
-  color: var(--ui-accent);
-}
-.games-tile-request-copy {
-  color: var(--dim);
-  font-size: 0.75rem;
-  line-height: 1.45;
-  text-align: center;
-}
-.games-tile-request:hover .games-tile-art { background: var(--hover); }
-.reduce-interface-motion .games-tile-art { transition: none; }
-.game-profile-page {
-  width: 100%;
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 1.5rem 0;
-}
-.game-profile-back {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.4rem;
-  font-size: 0.85rem;
-  font-weight: 600;
-  color: var(--bright);
-  background: var(--surface-panel);
-  box-shadow: 0 0 0 1px var(--line);
-  border-radius: 999px;
-  padding: 0.4rem 0.9rem;
-  margin-bottom: 1.25rem;
-  cursor: pointer;
-}
-.game-profile-back:hover {
-  background: var(--hover);
-}
-.game-profile-layout {
-  display: grid;
-  grid-template-columns: 260px 1fr;
-  gap: 1.5rem;
-  align-items: start;
-}
-.game-profile-side {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-.game-profile-art {
-  aspect-ratio: 2 / 3;
-  border-radius: 14px;
-  overflow: hidden;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--muted);
-  box-shadow: 0 0 0 1px var(--line);
-}
-.game-profile-art img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-.game-profile-name-card {
-  display: flex;
-  flex-direction: column;
-  gap: 0.15rem;
-  padding: 0.9rem 1rem;
-  border-radius: 14px;
-  background: var(--surface-panel);
-  box-shadow: 0 0 0 1px var(--line);
-}
-.game-profile-name-label {
-  font-size: 0.68rem;
-  font-weight: 700;
-  letter-spacing: 0.06em;
-  color: var(--muted);
-}
-.game-profile-name {
-  font-size: 1.05rem;
-  font-weight: 650;
-  color: var(--bright);
-}
-.game-profile-clear {
-  align-self: flex-start;
-  margin-top: 0.6rem;
-  font-size: 0.8rem;
-  font-weight: 600;
-  color: var(--muted);
-  background: var(--surface-control);
-  box-shadow: 0 0 0 1px var(--line);
-  border-radius: 999px;
-  padding: 0.35rem 0.8rem;
-  cursor: pointer;
-}
-.game-profile-clear:hover:not(:disabled) {
-  color: var(--bright);
-  background: var(--hover);
-}
-.game-profile-clear:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-.game-profile-settings {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-.game-profile-section {
-  padding: 0.9rem 1rem;
-  border-radius: 14px;
-  background: var(--surface-panel);
-  box-shadow: 0 0 0 1px var(--line);
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-.game-profile-section-label {
-  font-size: 0.68rem;
-  font-weight: 700;
-  letter-spacing: 0.06em;
-  color: var(--muted);
-}
-.game-profile-section-title {
-  font-size: 0.95rem;
-  font-weight: 650;
-  color: var(--bright);
-  margin-top: -0.3rem;
-}
-.game-profile-empty {
-  color: var(--muted);
-  font-size: 0.85rem;
-}
-.game-profile-changed {
-  color: var(--muted);
-  font-size: 0.8rem;
-}
-.game-profile-workspace {
-  margin-top: 1.5rem;
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-}
-.game-profile-workspace-head {
-  display: flex;
-  flex-direction: column;
-  gap: 0.2rem;
-}
-.game-profile-workspace-head .game-profile-section-title {
-  margin-top: 0;
-}
-.game-profile-tabs {
-  justify-content: flex-start;
-  padding: 0;
-}
-/* The device page reserves its first column for the mouse showcase, which
-   the game profile does not render. */
-.game-profile-workspace .performance-layout {
-  grid-template-columns: minmax(0, 1fr);
-}
-.game-profile-devices {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  display: flex;
-  flex-direction: column;
-}
-.game-profile-device-row {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  padding: 0.6rem 0;
-}
-.game-profile-device-row + .game-profile-device-row {
-  border-top: 1px solid var(--line);
-}
-.game-profile-device-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 30px;
-  height: 30px;
-  border-radius: 8px;
-  background: var(--surface-control);
-  box-shadow: 0 0 0 1px var(--line);
-  color: var(--muted);
-  font-size: 0.85rem;
-  flex-shrink: 0;
-}
-.game-profile-device-text {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  min-width: 0;
-}
-.game-profile-device-name {
-  font-weight: 650;
-  color: var(--bright);
-  font-size: 0.92rem;
-}
-.game-profile-device-brand {
-  color: var(--muted);
-  font-size: 0.78rem;
-}
-.game-profile-select {
-  font-size: 0.82rem;
-  font-weight: 600;
-  color: var(--bright);
-  background: var(--surface-control);
-  box-shadow: 0 0 0 1px var(--line);
-  border-radius: 999px;
-  padding: 0.4rem 0.9rem;
-  cursor: pointer;
-  flex-shrink: 0;
-}
-.game-profile-select.is-selected {
-  background: var(--bright);
-  color: var(--surface-bg);
-  box-shadow: none;
-}
-.game-profile-dpi-grid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 0.6rem;
-}
-.game-profile-dpi-preset {
-  padding: 0.65rem 0;
-  border-radius: 10px;
-  background: var(--surface-control);
-  box-shadow: 0 0 0 1px var(--line);
-  color: var(--bright);
-  font-weight: 600;
-  font-size: 0.92rem;
-  cursor: pointer;
-}
-.game-profile-dpi-preset:hover {
-  background: var(--hover);
-}
-.game-profile-dpi-preset.is-selected {
-  box-shadow: 0 0 0 2px var(--ui-accent);
-  color: var(--ui-accent);
-}
-.game-profile-dpi-custom-label {
-  margin-top: 0.4rem;
-}
-.game-profile-dpi-custom {
-  width: 100%;
-  padding: 0.6rem 0.8rem;
-  border-radius: 10px;
-  background: var(--surface-input);
-  box-shadow: 0 0 0 1px var(--line);
-  color: var(--bright);
-  font-size: 0.92rem;
-}
-.game-profile-auto-apply {
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  gap: 1rem;
-}
-.game-profile-auto-apply-text {
-  display: flex;
-  flex-direction: column;
-  gap: 0.2rem;
-}
-.game-profile-auto-apply-title {
-  font-weight: 650;
-  color: var(--bright);
-  font-size: 0.95rem;
-}
-.game-profile-auto-apply-body {
-  color: var(--muted);
-  font-size: 0.82rem;
-  max-width: 34ch;
-}
-.game-profile-toggle {
-  position: relative;
-  width: 40px;
-  height: 22px;
-  padding: 0;
-  border: 0;
-  border-radius: 999px;
-  background: var(--surface-control);
-  box-shadow: 0 0 0 1px var(--line);
-  flex-shrink: 0;
-  cursor: pointer;
-}
-.game-profile-toggle:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-.game-profile-toggle-thumb {
-  position: absolute;
-  top: 2px;
-  inset-inline-start: 2px;
-  width: 18px;
-  height: 18px;
-  border-radius: 50%;
-  background: var(--muted);
-  transition: transform 0.15s ease, background 0.15s ease;
-}
-.game-profile-toggle.is-on {
-  background: var(--ui-accent-soft);
-}
-.game-profile-toggle.is-on .game-profile-toggle-thumb {
-  background: var(--ui-accent);
-  transform: translateX(18px);
-}
-.welcome-with-devices {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  gap: 1.5rem;
-  min-height: calc(100vh - 3rem);
-}
-.detected-devices {
-  width: 100%;
-  max-width: 1000px;
-  margin: 0 auto;
-  /*padding: 0 0 2rem;*/
-  /* So does with this padding */
-}
-.welcome-with-devices .device-grid {
-  grid-template-columns: repeat(auto-fit, minmax(340px, 420px));
-}
-.welcome-with-devices .device-grid .device-tile {
-  aspect-ratio: 1 / 1;
-  background: var(--surface-strong);
-  border-color: transparent;
-  box-shadow: none;
-  overflow: hidden;
-}
-.welcome-with-devices .device-grid .device-tile.is-connected,
-.welcome-with-devices .device-grid .device-tile.is-connected::before {
-  border-color: transparent;
-  box-shadow: none;
-}
-.welcome-with-devices .device-grid .device-tile:hover {
-  border-color: var(--line-strong);
-  box-shadow: 0 14px 34px -26px rgb(0 0 0 / 0.55);
-}
-.welcome-with-devices .device-grid .device-tile.is-keyboard {
-  aspect-ratio: 1 / 1;
-  gap: 0.28rem;
-  padding: 0.85rem 0.9rem 0.9rem;
-}
-.welcome-with-devices .device-grid .device-tile.add-device-tile {
-  flex: none;
-  max-width: none;
-}
-.welcome-with-devices .device-grid .device-tile .device-tile-visual {
-  position: relative;
-}
-.welcome-with-devices .device-grid .device-tile-image {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
-  filter: none;
-  transform: scale(1.1);
-}
-/* M2-NEX's supplied render is a tall portrait asset. Normalize its visual
-   weight against the square-ish renders in the adjacent device chooser tile. */
-.welcome-with-devices .device-grid .device-tile-image-is-portrait {
-  transform: scale(.75);
-}
-.detected-devices-head {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 1rem;
-  margin-bottom: 1rem;
-}
-.detected-devices-title {
-  margin: 0;
-  font-size: 0.72rem;
-  letter-spacing: 0.18em;
-  color: var(--muted);
-}
-.welcome-hero {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  text-align: center;
-  max-width: 1000px;
-}
-/* Soft aurora glow behind the content */
-.welcome-aurora {
-  position: fixed;
-  inset: 0;
-  z-index: -1;
-  pointer-events: none;
-  overflow: hidden;
-}
-.welcome-aurora i {
-  position: absolute;
-  border-radius: 50%;
-  filter: blur(80px);
-  opacity: 0.33;
-  animation: welcome-aurora 14s ease-in-out infinite;
-}
-.welcome-aurora i:nth-child(1) {
-  width: 420px;
-  height: 420px;
-  inset-inline-start: 12%;
-  top: 8%;
-  background: color-mix(in srgb, var(--ui-accent, #5dde89) 34%, transparent);
-}
-.welcome-aurora i:nth-child(2) {
-  width: 380px;
-  height: 380px;
-  inset-inline-end: 8%;
-  bottom: 4%;
-  background: color-mix(in srgb, var(--ui-accent, #5dde89) 22%, transparent);
-  animation-delay: -5s;
-}
-.welcome-aurora i:nth-child(3) {
-  width: 300px;
-  height: 300px;
-  inset-inline-start: 42%;
-  bottom: -10%;
-  background: color-mix(in srgb, var(--bright) 14%, transparent);
-  animation-delay: -9s;
-}
-@keyframes welcome-aurora {
-  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
-  50% { transform: translate3d(3%, -4%, 0) scale(1.12); }
-}
-.control-shell.reduce-interface-motion .welcome-aurora i {
-  animation: none;
-}
-.welcome-title {
-  margin: 0 0 0.75rem;
-  font-size: 2.1rem;
-  font-weight: 650;
-  letter-spacing: -0.025em;
-  color: var(--bright);
-}
-.welcome-body {
-  margin: 0 0 1.5rem;
-  max-width: 44ch;
-  color: var(--faint);
-  font-size: 0.94rem;
-  line-height: 1.6;
-}
-.add-device-grid {
-  display: grid;
-  grid-template-columns: minmax(340px, 420px);
-  justify-content: center;
-  gap: 1rem;
-  width: 100%;
-  margin-top: 0.5rem;
-}
-.device-tile.add-device-tile {
-  aspect-ratio: 1 / 1;
-  cursor: default;
-}
-.device-tile.add-device-tile:hover {
-  transform: none;
-}
-.add-device-mouse-showcase {
-  position: relative;
-  width: 78%;
-  height: 78%;
-}
-.add-device-mouse-showcase-frame {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
-  opacity: 0;
-  filter: drop-shadow(0 10px 18px rgb(0 0 0 / 0.35));
-  transition: opacity 0.9s ease;
-}
-.add-device-mouse-showcase-frame.is-active {
-  opacity: 1;
-}
-@media (prefers-reduced-motion: reduce) {
-  .add-device-mouse-showcase-frame {
-    transition: none;
-  }
-}
-.add-device-button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.45rem;
-  width: 100%;
-  padding: 0.62rem 0.8rem;
-  border: none;
-  border-radius: 9px;
-  background: var(--ui-accent);
-  color: #0c120e;
-  font-size: 0.85rem;
-  font-weight: 650;
-  letter-spacing: 0.01em;
-  cursor: pointer;
-  transition: filter 0.15s ease, transform 0.15s ease;
-}
-.add-device-button svg {
-  flex-shrink: 0;
-  width: 15px;
-  height: 15px;
-}
-.add-device-button:hover:not(:disabled) {
-  filter: brightness(1.08);
-  transform: translateY(-1px);
-}
-.add-device-button:disabled {
-  opacity: 0.65;
-  cursor: default;
-}
-
-/* Interface settings rendered as a page (settings tab), not an overlay */
-.control-panel.showing-settings .interface-settings-page { display: block; }
-
-/* App-sidebar rail can never exceed the viewport */
-.control-shell .app-sidebar-nav-item .spin {
-  animation: pending-bar-pulse 1s linear infinite;
-}
-
-/* Version badge (Deskop titlebar port) */
-.version-badge {
-  display: inline-flex;
-  align-items: center;
-  padding: 0.1rem 0.5rem;
-  border: 1px solid var(--line);
-  border-radius: 999px;
-  background: var(--control);
-  color: var(--bright);
-  font-size: 0.62rem;
-  font-weight: 500;
-  letter-spacing: 0.02em;
-  white-space: nowrap;
-}
-
-/* ═══════════════════════════════════════════════════════════════════════
-   Desktop shell #2 — full-desktop-main/content, page, tab back button,
-   device-list view, and bottom nav labels.
-   ═══════════════════════════════════════════════════════════════════════ */
-
-/* .control-shell is a two-column grid: 56px rail + content. The sidebar is
-   grid child #1; full-desktop-main takes child #2 and holds the scroller. */
-.control-shell > .news-banner { grid-column: 1 / -1; grid-row: 1; }
-.control-shell > .app-sidebar { grid-column: 1; grid-row: 2; }
-.control-shell > .full-desktop-main {
-  grid-column: 2;
-  grid-row: 2;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-  min-height: 0;
-}
-.control-shell > .full-desktop-main > .full-desktop-content {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  min-height: 0;
-  overflow-y: auto;
-  padding: 1rem 2rem 2rem;
-  scrollbar-width: none;
-}
-.full-desktop-content::-webkit-scrollbar { display: none; width: 0; height: 0; }
-
-/* Dashboard tab rail sits at the very top of the scroll container, with the
-   same 0.55rem headroom as the app-sidebar's top margin. Offset the shared
-   1rem inset here so it stays, and give the rail its own dedicated padding. */
-.full-desktop-shell .full-desktop-content > .page-overview {
-  margin-top: -1rem;
-}
-.full-desktop-shell .device-tabs-bar {
-  padding-top: 0.55rem;
-}
-
-.control-shell > .full-desktop-main > .apply-bar {
-  margin-top: 1.25rem;
-  margin-bottom: 1rem;
-}
-
-.settings-support {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 1rem;
-  flex-wrap: wrap;
-}
-
-/* Bottom social footer inside full-desktop-main (discord / x / github). */
-.app-footer {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 1rem;
-  padding: .6rem 1rem .75rem;
-  border-top: 1px solid var(--line);
-}
-.app-footer a {
-  color: var(--muted);
-  text-decoration: none;
-}
-.app-footer-socials {
-  display: inline-flex;
-  align-items: center;
-  gap: .15rem;
-}
-.app-footer-socials a {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 1.8rem;
-  height: 1.8rem;
-  border-radius: 6px;
-  transition: color .18s ease, background .18s ease;
-}
-.app-footer-socials a:hover { color: var(--ui-accent); background: var(--ui-accent-soft); }
-.app-footer-socials svg { width: 1.05rem; height: 1.05rem; }
-.app-donate {
-  display: inline-flex;
-  align-items: center;
-  gap: .5rem;
-  padding: .4rem 1rem .4rem .8rem;
-  border: 1px solid var(--ui-accent);
-  border-radius: 9px;
-  background: var(--ui-accent);
-  color: var(--ui-accent-ink);
-  box-shadow: 0 1px 0 rgb(255 255 255 / 14%) inset, 0 2px 6px rgb(0 0 0 / 24%);
-  font-size: .78rem;
-  font-weight: 750;
-  letter-spacing: .02em;
-  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
-}
-.app-donate:hover {
-  transform: translateY(-1px);
-  filter: brightness(1.06);
-  box-shadow: 0 1px 0 rgb(255 255 255 / 14%) inset, 0 4px 10px rgb(0 0 0 / 30%);
-}
-.app-donate:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
-.app-donate .app-donate-text { margin-inline: .05rem; }
-.app-donate-icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-.app-donate-icon svg { width: 1.3rem; height: 1.3rem; }
-.app-donate-heart {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  color: inherit;
-}
-.app-donate-heart svg { width: 1.15rem; height: 1.15rem; }
-.full-desktop-content button:focus-visible,
-.full-desktop-content select:focus-visible,
-.full-desktop-content input:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
-
-/* Hidden aria-live region for the read status (was the old header line). */
-.app-live-region {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-  white-space: nowrap;
-}
-
-/* Page container — settings/landing stay narrow, overview is full width. */
-.page {
-  max-width: 720px;
-  margin: 0 auto;
-}
-.page-overview {
-  max-width: none;
-  margin: 0;
-  min-height: 100%;
-}
-.page-title {
-  font-size: 1rem;
-  font-weight: 600;
-  margin: 0 0 1.25rem;
-  color: var(--dim);
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-}
-
-
-/* Tab bar back button (Desktop style, sits at the far left). */
-.device-tab-back {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.4rem;
-  border: 1px solid var(--ui-accent);
-  background: var(--ui-accent);
-  color: var(--ui-accent-ink);
-  padding: 0.48rem 0.85rem;
-  border-radius: 999px;
-  font-size: 0.88rem;
-  font-weight: 650;
-  position: absolute;
-  inset-inline-start: 0;
-  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
-  top: 50%;
-  transform: translateY(-50%);
-}
-.device-tab-back:hover {
-  color: var(--ui-accent-ink);
-  border-color: var(--ui-accent);
-  background: color-mix(in srgb, var(--ui-accent) 80%, #ffffff);
-}
-/* The Profiles section lives off the pill row, pinned to the bar's right edge
-   where the old share button sat. It keeps the shared pill chrome but reads
-   as the primary Call-To-Action in accent so the tab still stands out. */
-.device-tab-profiles-nav {
-  position: absolute;
-  inset-inline-end: 0;
-  top: 50%;
-  transform: translateY(-50%);
-}
-.device-tab-profiles-nav:hover:not(:disabled) {
-  filter: none;
-}
-
-/* Device grid (landing view) — Logitech-G-HUB style tiles */
-.device-grid {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(210px, 280px));
-  justify-content: center;
-  gap: 1rem;
-}
-.device-tile {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  gap: 0.28rem;
-  padding: 0.85rem 0.9rem 0.9rem;
-  border: 1px solid var(--line);
-  border-radius: 14px;
-  background: var(--card);
-  box-shadow: 0 14px 34px -26px rgb(0 0 0 / 0.55);
-  aspect-ratio: 9 / 16;
-  cursor: pointer;
-  transition: border-color 0.15s ease, transform 0.15s ease;
-}
-.device-tile:hover {
-  border-color: var(--line-strong);
-  transform: translateY(-2px);
-}
-.device-tile:focus-visible {
-  outline: 2px solid var(--ui-accent);
-  outline-offset: 2px;
-}
-.device-tile.is-connected {
-  border-color: var(--ui-accent);
-}
-.device-tile.is-connected::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  border-radius: inherit;
-  box-shadow: inset 0 0 0 1px var(--ui-accent);
-  pointer-events: none;
-}
-.device-tile-name {
-  font-size: 1.05rem;
-  font-weight: 650;
-  letter-spacing: -0.01em;
-  line-height: 1.25;
-  color: var(--bright);
-  min-height: 1.25em;
-  display: -webkit-box;
-  line-clamp: 2;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-.device-tile-transport {
-  display: inline-flex;
-  align-self: flex-start;
-  align-items: center;
-  font-size: 0.68rem;
-  font-weight: 700;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-  color: var(--ui-accent);
-  background: color-mix(in srgb, var(--ui-accent) 16%, transparent);
-  border-radius: 999px;
-  padding: 0.1rem 0.5rem;
-}
-.device-tile-stats {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  gap: 0.5rem;
-}
-.device-tile-stat {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.35rem;
-  min-width: 0;
-  color: var(--bright);
-  font-size: 0.74rem;
-  font-weight: 600;
-  line-height: 1;
-}
-.device-tile-stat-icon {
-  flex-shrink: 0;
-  width: 20px;
-  height: 20px;
-}
-.device-tile-stat .battery-icon {
-  width: 1.7rem;
-}
-.device-tile-stat:first-child .device-tile-stat-icon {
-  transform: translateY(-0.12em);
-}
-.device-tile-stat-text {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  opacity: 0.9;
-}
-.device-tile-visual {
-  flex: 1;
-  display: grid;
-  place-items: center;
-  min-height: 0;
-}
-.device-tile-image {
-  display: block;
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
-  filter: drop-shadow(0 12px 22px rgb(0 0 0 / 0.35));
-}
-.device-tile.is-keyboard {
-  aspect-ratio: 4 / 3;
-  gap: 0.35rem;
-  padding: 0.7rem 0.85rem;
-}
-.device-tile.is-keyboard .device-tile-name {
-  min-height: auto;
-}
-.device-tile.is-keyboard .device-tile-stats {
-  flex-wrap: wrap;
-}
-.device-tile.is-keyboard .device-tile-image {
-  width: 100%;
-  height: 100%;
-}
-.device-tile-gear {
-  align-self: flex-end;
-  display: grid;
-  place-items: center;
-  width: 32px;
-  height: 32px;
-  border: 0;
-  border-radius: 8px;
-  background: transparent;
-  color: var(--dim);
-  cursor: pointer;
-  transition: color 0.15s ease, background 0.15s ease;
-}
-.device-tile-gear svg {
-  width: 24px;
-  height: 24px;
-  overflow: visible;
-}
-.device-tile-gear:hover:not(:disabled) {
-  color: var(--bright);
-  background: var(--hover);
-}
-.connect-button {
-  display: inline-flex;
-  align-items: center;
-  flex-shrink: 0;
-  border: 1px solid var(--line-strong);
-  background: var(--raised);
-  color: var(--text);
-  padding: 0.45rem 0.9rem;
-  border-radius: 8px;
-  font-size: 0.82rem;
-  font-weight: 600;
-}
-.connect-button:hover { background: var(--hover); }
-.connect-button:disabled { opacity: 0.6; cursor: default; }
-
-.rescan-button {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.4rem;
-  border: 1px solid var(--line);
-  background: var(--control);
-  color: var(--dim);
-  padding: 0.4rem 0.6rem;
-  border-radius: 8px;
-  font-size: 0.8rem;
-}
-.rescan-button:hover { background: var(--hover); color: var(--bright); }
-.rescan-button:disabled { opacity: 0.6; cursor: default; }
-.rescan-button-standalone { margin-top: 1.25rem; }
-
-/* Existing settings-grid pages: remove the leftover old-shell side padding
-   and let tabs fill the page like the desktop app. */
-.settings-grid { width: 100%; max-width: none; }
-
-/* Tab pills carry an optional leading icon */
-.device-tab-pill svg { flex-shrink: 0; }
-
-/* ── Desktop settings page (setting rows / theme presets / switch) ───── */
-
-.setting-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 1.5rem;
-  border: 1px solid var(--line);
-  border-radius: 10px;
-  padding: 1.1rem 1.25rem;
-  background: var(--card);
-  margin-bottom: 0.75rem;
-}
-.setting-row-block {
-  flex-direction: column;
-  align-items: stretch;
-}
-.setting-label {
-  display: flex;
-  flex-direction: column;
-  gap: 0.2rem;
-}
-.setting-title {
-  font-weight: 600;
-  font-size: 0.9rem;
-  color: var(--bright);
-}
-.setting-description {
-  font-size: 0.8rem;
-  color: var(--faint);
-  line-height: 1.4;
-}
-.setting-eyebrow {
-  font-size: 0.68rem;
-  color: var(--faint);
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-}
-.settings-divider {
-  margin: 1.5rem 0;
-  border: none;
-  border-top: 1px solid var(--line);
-}
-
-.theme-preset-picker {
-  display: flex;
-  width: 100%;
-  flex-wrap: wrap;
-  gap: 0.5rem;
-  margin: 0;
-  padding: 0;
-  border: 0;
-  min-width: 0;
-}
-.theme-preset-swatch {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.45rem;
-  padding: 0.45rem 0.8rem;
-  border: 1px solid var(--line);
-  border-radius: 8px;
-  background: var(--control);
-  color: var(--bright);
-  font-size: 0.82rem;
-  font-weight: 600;
-  transition: border-color 0.15s ease, background 0.15s ease;
-}
-.theme-preset-swatch:hover:not(:disabled) { background: var(--hover); }
-.theme-preset-swatch.active {
-  border-color: var(--accent);
-  background: color-mix(in srgb, var(--accent) 14%, var(--control));
-}
-.theme-preset-acc {
-  width: 14px;
-  height: 14px;
-  border-radius: 50%;
-  border: 1px solid var(--line-strong);
-  background: #f5975c;
-  flex-shrink: 0;
-}
-.theme-preset-swatch[data-theme-preview="emerald"] .theme-preset-acc { background: #58c97c; }
-.theme-preset-swatch[data-theme-preview="violet"] .theme-preset-acc { background: #a98bff; }
-.theme-preset-swatch[data-theme-preview="ice"] .theme-preset-acc { background: #54b6f5; }
-.theme-preset-swatch[data-theme-preview="mono"] .theme-preset-acc { background: #d0d0d3; }
-.theme-preset-swatch[data-theme-preview="ember"] .theme-preset-acc { background: #ff9b62; }
-.theme-preset-swatch[data-theme-preview="miku"] .theme-preset-acc { background: #39c5bb; }
-.theme-preset-swatch[data-theme-preview="catppuccin-mocha"] .theme-preset-acc { background: #cba6f7; }
-.theme-preset-swatch[data-theme-preview="catppuccin-macchiato"] .theme-preset-acc { background: #c6a0f6; }
-.theme-preset-swatch[data-theme-preview="catppuccin-frappe"] .theme-preset-acc { background: #ca9ee6; }
-.theme-preset-swatch[data-theme-preview="nier-automata"] .theme-preset-acc { background: #d1cdb7; }
-.theme-preset-swatch[data-theme-preview="light"] .theme-preset-acc { background: #fbfbf8; }
-.theme-preset-label { white-space: nowrap; }
-
-.switch {
-  position: relative;
-  display: inline-block;
-  width: 36px;
-  height: 20px;
-  flex-shrink: 0;
-}
-.switch input {
-  opacity: 0;
-  width: 0;
-  height: 0;
-}
-.switch-track {
-  position: absolute;
-  inset: 0;
-  background: var(--control);
-  border: 1px solid var(--line);
-  border-radius: 999px;
-}
-.switch-track::before {
-  content: "";
-  position: absolute;
-  width: 14px;
-  height: 14px;
-  inset-inline-start: 2px;
-  top: 2px;
-  border-radius: 50%;
-  background: var(--muted);
-}
-.switch input:checked + .switch-track {
-  background: var(--text);
-  border-color: var(--text);
-}
-.switch input:checked + .switch-track::before {
-  background: var(--ink);
-  transform: translateX(16px);
-}
-
-/* Theme editor (custom CSS), ported from Desktop SettingsPage */
-.theme-custom { margin-top: 0.9rem; }
-.theme-custom-status {
-  font-size: 0.68rem;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-  padding: 0.1rem 0.45rem;
-  border-radius: 999px;
-  border: 1px solid var(--line);
-  margin-inline-start: 0.5rem;
-  color: var(--dim);
-}
-.theme-custom-editor { margin-top: 0.75rem; display: flex; flex-direction: column; gap: 0.6rem; }
-.theme-css-input {
-  width: 100%;
-  resize: vertical;
-  font-family: var(--font-mono);
-  font-size: 0.8rem;
-  line-height: 1.5;
-  color: var(--text);
-  background: var(--control);
-  border: 1px solid var(--line);
-  border-radius: 8px;
-  padding: 0.7rem 0.8rem;
-  tab-size: 2;
-}
-.theme-css-input:focus { outline: none; border-color: var(--accent); }
-.theme-custom-actions {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 1rem;
-}
-.theme-custom-actions > div { display: flex; align-items: center; gap: 0.5rem; }
-.settings-version {
-  font-size: 0.75rem;
-  color: var(--faint);
-  text-align: center;
-  border-radius: 8px;
-  padding: 0.4rem 0.6rem;
-  background: var(--control);
-}
-
-/* Profile key — ported into the Desktop setting-row block */
-.profile-key-fields {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 0.6rem;
-}
-.profile-key-fields .profile-key-field {
-  display: flex;
-  flex-direction: column;
-  gap: 0.3rem;
-  width: 100%;
-  font-size: 0.68rem;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  color: var(--faint);
-}
-.profile-key-fields textarea,
-.profile-key-fields input[type="text"] {
-  width: 100%;
-  box-sizing: border-box;
-  padding: 0.6rem 0.7rem;
-  border: 1px solid var(--line);
-  border-radius: 8px;
-  background: var(--control);
-  color: var(--text);
-  font-family: var(--font-mono);
-  font-size: 0.8rem;
-  line-height: 1.5;
-  resize: vertical;
-}
-.profile-key-fields textarea:focus,
-.profile-key-fields input[type="text"]:focus { outline: none; border-color: var(--accent); }
-.import-hits-actions { display: flex; gap: 0.5rem; }
-.delete-hits-confirm { border-color: color-mix(in srgb, var(--destructive) 55%, var(--border)); color: var(--destructive); }
-
-/* OpenMouse AI chat overlay + launcher button. */
-.ai-launcher {
-  position: absolute;
-  inset-inline-end: 1.25rem;
-  bottom: 1.5rem;
-  z-index: 60;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 3rem;
-  height: 3rem;
-  border: 1px solid var(--line-strong);
-  border-radius: 50%;
-  background: var(--ui-accent);
-  color: var(--ui-accent-ink);
-  box-shadow: 0 4px 14px rgb(0 0 0 / 40%);
-  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
-}
-.ai-launcher:hover {
-  transform: translateY(-2px);
-  filter: brightness(1.05);
-  box-shadow: 0 6px 18px rgb(0 0 0 / 45%);
-}
-.ai-launcher:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
-.ai-launcher svg { width: 1.5rem; height: 1.5rem; }
-.ai-launcher.is-open:hover { transform: none; }
-
-.ai-overlay {
-  position: absolute;
-  inset-inline-end: 1.25rem;
-  bottom: 5.25rem;
-  z-index: 60;
-  display: flex;
-  flex-direction: column;
-  width: min(27rem, calc(100vw - 2.5rem));
-  height: min(38rem, calc(100vh - 10rem));
-  border: 1px solid var(--line-strong);
-  border-radius: 14px;
-  background: var(--card);
-  box-shadow: 0 12px 40px rgb(0 0 0 / 45%);
-  overflow: hidden;
-}
-.ai-head {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: .75rem;
-  padding: .8rem 1rem;
-  background: var(--raised);
-  border-bottom: 1px solid var(--line);
-}
-.ai-head-brand {
-  display: flex;
-  align-items: center;
-  gap: .65rem;
-  min-width: 0;
-}
-.ai-head-mark {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 2rem;
-  height: 2rem;
-  border-radius: 50%;
-  background: var(--ui-accent-soft);
-  color: var(--ui-accent);
-  flex: none;
-}
-.ai-head-mark svg { width: 1.2rem; height: 1.2rem; }
-.ai-head-brand strong {
-  display: block;
-  font-size: .85rem;
-  line-height: 1.2;
-}
-.ai-head-brand div span {
-  display: block;
-  font-size: .68rem;
-  color: var(--faint);
-  line-height: 1.3;
-}
-.ai-head > button {
-  border: none;
-  background: none;
-  color: var(--muted);
-  font-size: 1.15rem;
-  line-height: 1;
-  padding: .2rem .4rem;
-  border-radius: 6px;
-}
-.ai-head > button:hover { color: var(--text); background: var(--hover); }
-
-.ai-scroll {
-  flex: 1;
-  min-height: 0;
-  overflow-y: auto;
-  display: flex;
-  flex-direction: column;
-  gap: .55rem;
-  padding: .9rem;
-}
-.ai-scroll::-webkit-scrollbar { width: 8px; }
-.ai-scroll::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 4px; }
-.ai-scroll::-webkit-scrollbar-track { background: transparent; }
-
-.ai-message {
-  max-width: 86%;
-  padding: .55rem .7rem;
-  border-radius: 12px;
-  font-size: .8rem;
-  line-height: 1.45;
-  white-space: pre-wrap;
-}
-.ai-message.is-bot {
-  align-self: flex-start;
-  background: var(--control);
-  border: 1px solid var(--line);
-  border-end-start-radius: 4px;
-}
-.ai-message.is-user {
-  align-self: flex-end;
-  background: var(--ui-accent);
-  color: var(--ui-accent-ink);
-  border-end-end-radius: 4px;
-}
-.ai-typing {
-  display: inline-flex;
-  align-items: center;
-  gap: .3rem;
-  padding: .62rem .7rem;
-}
-.ai-typing-dot {
-  width: .38rem;
-  height: .38rem;
-  border-radius: 50%;
-  background: var(--dim);
-  opacity: .35;
-  animation: ai-typing-blink 1.1s ease-in-out infinite;
-}
-.ai-typing-dot:nth-child(2) { animation-delay: .18s; }
-.ai-typing-dot:nth-child(3) { animation-delay: .36s; }
-@keyframes ai-typing-blink {
-  0%, 60%, 100% { opacity: .35; transform: translateY(0); }
-  30% { opacity: 1; transform: translateY(-2px); }
-}
-.control-shell.reduce-interface-motion .ai-typing-dot { animation: none; opacity: .6; }
-
-.ai-options {
-  display: flex;
-  flex-direction: column;
-  gap: .4rem;
-  padding: .6rem .9rem .75rem;
-  border-top: 1px solid var(--line);
-  background: var(--surface-bg-tint);
-}
-.ai-options button {
-  text-align: start;
-  padding: .55rem .75rem;
-  border: 1px solid var(--line);
-  border-radius: 10px;
-  background: var(--card);
-  color: var(--text);
-  font-size: .78rem;
-  line-height: 1.3;
-  transition: border-color .15s ease, background .15s ease, color .15s ease;
-}
-.ai-options button:hover { border-color: var(--ui-accent); background: var(--ui-accent-soft); color: var(--ui-accent); }
-.ai-options button:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 1px; }
-.ai-options button:disabled { cursor: default; opacity: .55; pointer-events: none; }
-
-.ai-foot {
-  padding: .55rem .9rem .7rem;
-  border-top: 1px solid var(--line);
-  background: var(--raised);
-}
-.ai-foot a {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: .45rem;
-  padding: .5rem;
-  border-radius: 9px;
-  background: var(--ui-accent-soft);
-  color: var(--ui-accent);
-  font-size: .78rem;
-  font-weight: 650;
-}
-.ai-foot a:hover { filter: brightness(1.1); }
-.ai-foot a svg { width: 1rem; height: .78rem; }
-
-/* ── Test page shell (shared by the hardware test page) ─────────────────── */
-.mouse-test-page {
-  width: 100%;
-  max-width: none;
-  margin: 0;
-  padding: 1.5rem clamp(1rem, 2.5vw, 2rem) 2rem;
-  display: flex;
-  flex-direction: column;
-  gap: 1.25rem;
-}
-.mouse-test-header {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-}
-.mouse-test-title {
-  margin: 0;
-  font-size: 1.35rem;
-  font-weight: 750;
-  letter-spacing: -0.02em;
-  color: var(--text);
-}
-.mouse-test-subtitle {
-  margin: 0;
-  font-size: 0.85rem;
-  color: var(--dim);
-}
-/* ── Hardware test page ─────────────────────────────────────────────────── */
-.hardware-test-layout {
-  display: grid;
-  grid-template-columns: minmax(min-content, 380px) minmax(0, 1fr);
-  gap: 1rem;
-  align-items: start;
-}
-.hardware-test-device {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-  min-width: 0;
-}
-/* When a device is shown, the showcase column is capped to the same height
-   as the run/status cards so the artwork ends exactly where they end. */
-.hardware-test-device.has-device {
-  height: clamp(460px, 62vh, 680px);
-}
-.hardware-test-device.has-device .showcase-sidebar {
-  height: 100%;
-}
-.hardware-test-device.has-device .showcase-sidebar-visual {
-  flex: 1;
-  min-height: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0.5rem 0;
-}
-/* The artwork scales down (ratio kept, never cropped) to fit the space the
-   name/brand/status rows leave inside the card height. */
-.hardware-test-device.has-device .showcase-sidebar-image {
-  width: auto;
-  height: auto;
-  max-width: 100%;
-  max-height: 100%;
-}
-.hardware-test-device.has-device .showcase-sidebar-info {
-  flex: none;
-  margin-top: 0.5rem;
-}
-.hardware-test-device.has-device .showcase-sidebar-status {
-  flex: none;
-  margin-bottom: 1rem;
-}
-.hardware-test-no-device {
-  padding: 1.25rem;
-  text-align: center;
-}
-.hardware-test-no-device-title {
-  margin: 0.25rem 0 0;
-  font-size: 0.95rem;
-  font-weight: 700;
-  color: var(--text);
-}
-.hardware-test-no-device-detail {
-  margin: 0.3rem 0 0;
-  font-size: 0.8rem;
-  color: var(--muted);
-  line-height: 1.45;
-}
-.hardware-test-no-device .hardware-test-btn-connect {
-  margin-top: 0.9rem;
-  display: block;
-  width: 100%;
-  background: var(--ui-accent);
-  color: var(--ui-accent-ink);
-  border: 0;
-}
-.hardware-test-no-device .hardware-test-btn-connect:hover:not(:disabled) {
-  filter: brightness(1.12);
-}
-
-/* ── Hardware test run panel (app-like stages, not a terminal) ──────────── */
-/* The run area is itself split in two: the animated test stages on one side
-   and a live device-status column (VID/PID, battery, DPI, …) on the other. */
-.hardware-test-panel-wrap {
-  display: grid;
-  grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr);
-  gap: 1rem;
-  align-items: start;
-  min-width: 0;
-}
-.hardware-test-status {
-  display: flex;
-  flex-direction: column;
-  height: clamp(460px, 62vh, 680px);
-  border-radius: 14px;
-  background: var(--surface-panel);
-  border: 1px solid var(--border);
-  box-shadow: 0 8px 24px -12px rgb(0 0 0 / 0.5), 0 2px 6px -2px rgb(0 0 0 / 0.35);
-  overflow: hidden;
-  min-width: 0;
-}
-.hardware-test-status-head {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.55rem;
-  padding: 0.6rem 0.9rem;
-  background: var(--surface-strong);
-  border-bottom: 1px solid var(--line-strong);
-  flex: none;
-}
-.hardware-test-status-title {
-  font-size: 0.68rem;
-  font-weight: 700;
-  letter-spacing: 0.14em;
-  color: var(--muted);
-  text-transform: uppercase;
-}
-.hardware-test-status .mouse-test-device-rows {
-  padding: 0.9rem 0.9rem 1.1rem;
-  overflow-y: auto;
-  flex: 1;
-}
-/* Privacy note pinned to the bottom of the live device-status card: bold
-   italic, readable but quieter than the data rows above it. */
-.hardware-test-status-note {
-  flex: none;
-  padding: 0.8rem 0.9rem;
-  border-top: 1px solid var(--line-strong);
-  font-size: 0.78rem;
-  font-weight: 650;
-  font-style: italic;
-  line-height: 1.55;
-  color: var(--muted);
-  margin: 0;
-}
-.mouse-test-device-rows {
-  display: flex;
-  flex-direction: column;
-  gap: 0.45rem;
-}
-.mouse-test-device-row {
-  display: flex;
-  justify-content: space-between;
-  gap: 0.75rem;
-  align-items: baseline;
-  font-size: 0.82rem;
-}
-.mouse-test-device-key {
-  color: var(--dim);
-  white-space: nowrap;
-}
-.mouse-test-device-val {
-  color: var(--text);
-  font-weight: 600;
-  text-align: end;
-  min-width: 0;
-}
-.mouse-test-device-val-wrap {
-  white-space: normal;
-  word-break: break-word;
-}
-.mouse-test-dpi-stages {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.3rem;
-  justify-content: flex-end;
-}
-.mouse-test-dpi-chip {
-  font-size: 0.72rem;
-  font-weight: 650;
-  padding: 0.15rem 0.45rem;
-  border-radius: 999px;
-  border: 1px solid var(--line-strong);
-  background: var(--surface-control);
-  color: var(--dim);
-  white-space: nowrap;
-  font-variant-numeric: tabular-nums;
-}
-.mouse-test-dpi-chip.active {
-  color: var(--info);
-  border-width: 2px;
-}
-.hardware-test-panel {
-  display: flex;
-  flex-direction: column;
-  height: clamp(460px, 62vh, 680px);
-  border-radius: 14px;
-  background: var(--surface-panel);
-  border: 1px solid var(--border);
-  box-shadow: 0 8px 24px -12px rgb(0 0 0 / 0.5), 0 2px 6px -2px rgb(0 0 0 / 0.35);
-  overflow: hidden;
-}
-.hardware-test-panel-head {
-  display: flex;
-  align-items: center;
-  gap: 0.55rem;
-  padding: 0.6rem 0.9rem;
-  background: var(--surface-strong);
-  border-bottom: 1px solid var(--line-strong);
-  flex: none;
-}
-.hardware-test-head-glyph {
-  width: 1.15rem;
-  height: 1.15rem;
-  color: var(--success);
-  flex: none;
-}
-.hardware-test-panel-title {
-  font-size: 0.68rem;
-  font-weight: 700;
-  letter-spacing: 0.14em;
-  color: var(--muted);
-  text-transform: uppercase;
-}
-.hardware-test-state-pill {
-  margin-inline-start: auto;
-  display: inline-flex;
-  align-items: center;
-  gap: 0.4rem;
-  padding: 0.25rem 0.65rem;
-  border-radius: 999px;
-  font-size: 0.68rem;
-  font-weight: 700;
-  letter-spacing: 0.03em;
-  color: var(--dim);
-  background: var(--surface-control);
-  white-space: nowrap;
-}
-.hardware-test-state-pill i {
-  width: 0.5rem;
-  height: 0.5rem;
-  border-radius: 999px;
-  background: currentColor;
-}
-.hardware-test-state-pill.running {
-  color: var(--ui-accent);
-  animation: hardware-test-run-pulse 1.2s ease-in-out infinite;
-}
-.hardware-test-state-pill.done { color: var(--success); }
-.hardware-test-state-pill.failed { color: var(--destructive); }
-.hardware-test-state-pill.stopped { color: var(--warning); }
-
-.hardware-test-stages {
-  flex: 1;
-  overflow-y: auto;
-  padding: 0.75rem 0.9rem;
-  display: flex;
-  flex-direction: column;
-  gap: 0.4rem;
-  scrollbar-width: thin;
-  scrollbar-color: var(--line-strong) transparent;
-}
-.hardware-test-ready {
-  margin: auto;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 0.9rem;
-  padding: 2rem 1.5rem;
-  text-align: center;
-}
-.hardware-test-ready-glyph {
-  width: 3rem;
-  height: 3rem;
-  color: var(--ui-accent);
-  filter: drop-shadow(0 6px 14px color-mix(in srgb, var(--ui-accent) 35%, transparent));
-}
-.hardware-test-ready p {
-  margin: 0;
-  max-width: 26rem;
-  font-size: 0.82rem;
-  line-height: 1.55;
-  color: var(--muted);
-}
-.hardware-test-stage {
-  display: flex;
-  align-items: flex-start;
-  gap: 0.65rem;
-  padding: 0.55rem 0.7rem;
-  border-radius: 12px;
-  background: var(--surface-strong);
-  border: 1px solid var(--line);
-  animation: hardware-test-stage-in 0.28s ease both;
-}
-.hardware-test-stage-icon {
-  flex: none;
-  width: 1.15rem;
-  height: 1.15rem;
-  margin-top: 1px;
-  display: grid;
-  place-items: center;
-  color: var(--muted);
-}
-.hardware-test-stage-icon svg {
-  width: 100%;
-  height: 100%;
-}
-.hardware-test-stage.pass .hardware-test-stage-icon { color: var(--success); }
-.hardware-test-stage.fail .hardware-test-stage-icon { color: var(--destructive); }
-.hardware-test-stage.skip .hardware-test-stage-icon { color: var(--dim); }
-.hardware-test-stage-spin {
-  width: 1rem;
-  height: 1rem;
-  border-radius: 999px;
-  border: 2px solid var(--line-strong);
-  border-top-color: var(--ui-accent);
-  animation: hardware-test-spin 0.8s linear infinite;
-}
-.hardware-test-stage-skip {
-  display: block;
-  width: 0.95rem;
-  height: 2px;
-  border-radius: 2px;
-  background: currentColor;
-}
-.hardware-test-stage-main {
-  min-width: 0;
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 0.2rem;
-}
-.hardware-test-stage-label {
-  font-size: 0.82rem;
-  font-weight: 650;
-  color: var(--text);
-  line-height: 1.35;
-}
-.hardware-test-stage-detail {
-  font-size: 0.74rem;
-  color: var(--muted);
-  line-height: 1.45;
-  overflow-wrap: anywhere;
-}
-.hardware-test-stage-hint {
-  font-size: 0.74rem;
-  color: var(--info);
-  line-height: 1.45;
-}
-.hardware-test-progress {
-  margin-top: 0.45rem;
-  height: 0.42rem;
-  border-radius: 999px;
-  background: var(--surface-input);
-  overflow: hidden;
-}
-.hardware-test-progress i {
-  display: block;
-  height: 100%;
-  border-radius: 999px;
-  background: linear-gradient(90deg, var(--ui-accent), var(--info));
-  transition: width 0.12s linear;
-}
-.hardware-test-progress-wave {
-  position: relative;
-}
-.hardware-test-progress-wave::after {
-  content: "";
-  position: absolute;
-  inset: 0;
-  width: 40%;
-  border-radius: 999px;
-  background: linear-gradient(90deg, transparent, var(--ui-accent-soft), transparent);
-  animation: hardware-test-scan 1.3s ease-in-out infinite;
-}
-.hardware-test-live {
-  flex: none;
-  align-self: center;
-  min-width: 7rem;
-  text-align: end;
-  font-size: 0.85rem;
-  font-weight: 750;
-  font-variant-numeric: tabular-nums;
-  color: var(--ui-accent);
-}
-.hardware-test-live.empty {
-  color: var(--dim);
-}
-
-.hardware-test-banner {
-  display: flex;
-  align-items: center;
-  gap: 0.7rem;
-  padding: 0.7rem 0.9rem;
-  margin: 0 0.75rem 0.75rem;
-  border-radius: 14px;
-  background: var(--surface-strong);
-  border: 1px solid var(--line-strong);
-  animation: hardware-test-banner-in 0.35s ease both;
-}
-.hardware-test-banner-glyph {
-  width: 1.5rem;
-  height: 1.5rem;
-  flex: none;
-}
-.hardware-test-banner.pass .hardware-test-banner-glyph { color: var(--success); }
-.hardware-test-banner.fail .hardware-test-banner-glyph { color: var(--destructive); }
-.hardware-test-banner.incomplete .hardware-test-banner-glyph { color: var(--warning); }
-.hardware-test-banner-text {
-  display: flex;
-  flex-direction: column;
-  gap: 0.1rem;
-  min-width: 0;
-}
-.hardware-test-banner-text strong {
-  font-size: 0.85rem;
-  font-weight: 750;
-}
-.hardware-test-banner.pass .hardware-test-banner-text strong { color: var(--success); }
-.hardware-test-banner.fail .hardware-test-banner-text strong { color: var(--destructive); }
-.hardware-test-banner.incomplete .hardware-test-banner-text strong { color: var(--warning); }
-.hardware-test-banner-text span {
-  font-size: 0.72rem;
-  font-variant-numeric: tabular-nums;
-  color: var(--muted);
-}
-.hardware-test-banner-counts {
-  margin-inline-start: auto;
-  display: flex;
-  align-items: center;
-  gap: 0.55rem;
-  flex: none;
-  font-size: 0.72rem;
-  font-weight: 700;
-  font-variant-numeric: tabular-nums;
-}
-.hardware-test-banner-counts .ok { color: var(--success); }
-.hardware-test-banner-counts .fail { color: var(--destructive); }
-.hardware-test-banner-counts .skip { color: var(--dim); }
-
-@keyframes hardware-test-spin {
-  to { transform: rotate(360deg); }
-}
-@keyframes hardware-test-stage-in {
-  from { opacity: 0; transform: translateY(6px); }
-  to { opacity: 1; transform: translateY(0); }
-}
-@keyframes hardware-test-banner-in {
-  from { opacity: 0; transform: translateY(10px) scale(0.98); }
-  to { opacity: 1; transform: none; }
-}
-@keyframes hardware-test-run-pulse {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.4; }
-}
-@keyframes hardware-test-scan {
-  0% { transform: translateX(-110%); }
-  100% { transform: translateX(360%); }
-}
-
-.hardware-test-panel-bar {
-  display: flex;
-  align-items: center;
-  gap: 0.6rem;
-  padding: 0.75rem 0.9rem;
-  border-top: 1px solid var(--line-strong);
-  flex: none;
-}
-.hardware-test-btn {
-  border: 0;
-  font-size: 0.85rem;
-  font-weight: 700;
-  padding: 0.55rem 1.35rem;
-  border-radius: 11px;
-  cursor: pointer;
-  transition: filter 0.15s ease, background 0.15s ease, opacity 0.15s ease;
-}
-.hardware-test-btn:disabled {
-  opacity: 0.45;
-  cursor: default;
-}
-.hardware-test-btn-start {
-  background: var(--ui-accent);
-  color: var(--ui-accent-ink);
-}
-.hardware-test-btn-start:hover:not(:disabled) {
-  filter: brightness(1.12);
-}
-.hardware-test-btn-connect {
-  background: var(--surface-control);
-  border: 1px solid var(--line-strong);
-  color: var(--text);
-}
-.hardware-test-btn-connect:hover:not(:disabled) {
-  background: var(--surface-strong);
-}
-.hardware-test-btn-end {
-  background: var(--destructive);
-  color: #fff;
-}
-.hardware-test-btn-end:hover {
-  filter: brightness(1.12);
-}
-.hardware-test-btn-share {
-  margin-inline-start: auto;
-  background: var(--surface-control);
-  border: 1px solid var(--line-strong);
-  color: var(--text);
-}
-.hardware-test-btn-share:hover:not(:disabled) {
-  background: var(--surface-strong);
-}
-
-/* Page footer note — explains what the page does and points to Discord with
-   the downloadable log when a test looks wrong. Open, sentence-like prose that
-   uses the empty space below the panels: centered, bold-italic, readable. */
-.hardware-test-footer {
-  margin-top: 5rem;
-}
-.hardware-test-footer-note {
-  margin: 0 auto;
-  max-width: 80ch;
-  text-align: center;
-  font-size: 1rem;
-  font-weight: 650;
-  font-style: italic;
-  line-height: 1.9;
-  letter-spacing: 0.004em;
-  color: var(--text-soft);
-}
-.hardware-test-footer-link {
-  color: var(--ui-accent);
-  font-weight: 750;
-  font-style: normal;
-  text-decoration: none;
-  border-bottom: 1px solid color-mix(in srgb, var(--ui-accent) 55%, transparent);
-  white-space: nowrap;
-  transition: color 0.15s ease, border-bottom-color 0.15s ease;
-}
-.hardware-test-footer-link:hover {
-  color: var(--ui-accent);
-  border-bottom-color: var(--ui-accent);
-}
-
-@media (max-width: 960px) {
-  .hardware-test-layout {
-    grid-template-columns: 1fr;
-  }
-  .hardware-test-device.has-device {
-    height: auto;
-  }
-  .hardware-test-device.has-device .showcase-sidebar {
-    height: auto;
-  }
-  .hardware-test-device.has-device .showcase-sidebar-visual {
-    flex: none;
-    display: block;
-    padding: 0.5rem 0;
-  }
-  .hardware-test-device.has-device .showcase-sidebar-image {
-    width: 100%;
-    height: auto;
-    max-width: 100%;
-    max-height: 400px;
-  }
-  .hardware-test-device.has-device .showcase-sidebar-status {
-    margin-bottom: 0;
-  }
-  .hardware-test-panel-wrap {
-    grid-template-columns: 1fr;
-  }
-  .hardware-test-panel {
-    height: clamp(420px, 58vh, 600px);
-  }
-  .hardware-test-status {
-    height: clamp(340px, 50vh, 520px);
-  }
-}
-
-/* Right-to-left (Arabic). The stylesheet uses CSS logical properties for
-   direction-sensitive spacing, borders and offsets, so most of the layout
-   mirrors on its own once <html dir="rtl"> is set. The rules below cover the
-   cases that cannot be expressed logically — transform-based direction — and
-   the directional chevron icons. */
-[dir="rtl"] .game-profile-toggle.is-on .game-profile-toggle-thumb { transform: translateX(-18px); }
-[dir="rtl"] .switch input:checked + .switch-track::before { transform: translateX(-16px); }
-[dir="rtl"] .app-sidebar-nav-arrow { transform: scaleX(-1); }
-[dir="rtl"] .app-sidebar-nav-item:hover .app-sidebar-nav-arrow { transform: scaleX(-1) translateX(2px); }
-[dir="rtl"] .app-sidebar-collapse-toggle:hover { transform: translateY(-50%) translateX(-2px); }
-[dir="rtl"] .egg-collapsible summary i,
-[dir="rtl"] .egg-experimental summary i { transform: rotate(-45deg); }
-
-/* HITS speed test */
-.hits-test-dialog { width: min(52rem, 94vw); }
-.hits-test-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 1rem; align-items: stretch; }
-.hits-test-side { display: grid; gap: .8rem; align-content: start; min-width: 0; }
-.hits-test-actuation { display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
-.hits-test-actuation > div { display: inline-flex; align-items: center; gap: .5rem; }
-.hits-test-actuation button { width: 1.8rem; height: 1.8rem; border: 1px solid var(--border); border-radius: 6px; background: var(--input); color: var(--text); }
-.hits-test-actuation button:disabled { opacity: .4; cursor: not-allowed; }
-.hits-test-rounds { display: grid; gap: .25rem; margin: 0; padding-left: 1.1rem; color: var(--text-soft); font-size: .7rem; }
-.hits-test-area { min-height: 16rem; padding: 1rem; border: 2px solid var(--ui-accent); border-radius: 12px; background: var(--surface-raised); color: var(--text-strong); font-size: 1.3rem; font-weight: 750; text-align: center; user-select: none; cursor: pointer; }
-.hits-test-area.is-wait { border-color: var(--warning); background: color-mix(in srgb, var(--warning) 22%, var(--surface-raised)); }
-.hits-test-area.is-go { border-color: var(--ui-accent); background: var(--ui-accent); color: var(--ui-accent-ink); }
-.hits-test-result { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .6rem 1.2rem; align-items: center; width: 100%; text-align: left; font-size: .72rem; font-weight: 500; color: var(--text-soft); }
-.hits-test-result > small:last-child { grid-column: 1 / -1; text-align: center; }
-.hits-test-result-numbers { display: grid; gap: .15rem; }
-.hits-test-result-numbers strong { color: var(--text-strong); font-size: 2rem; line-height: 1.1; }
-.hits-test-result-numbers b { color: var(--text-strong); font-size: 1.15rem; }
-.hits-test-result-numbers em { color: var(--warning); font-size: .68rem; font-style: normal; }
-.hits-test-ladder { display: grid; gap: .2rem; }
-.hits-test-ladder > span { display: grid; grid-template-columns: 1.4rem 4.2rem; gap: .5rem; padding: .1rem .35rem; border-radius: 5px; font-family: var(--font-mono); font-size: .62rem; }
-.hits-test-ladder i { font-style: normal; font-weight: 700; color: var(--text-strong); }
-.hits-test-ladder u { text-decoration: none; text-align: right; }
-.hits-test-ladder > span[data-mark] { background: var(--ui-accent-soft); color: var(--text-strong); }
-.hits-test-ladder > span[data-mark="hits"] i { color: var(--ui-accent); }
-.hits-test-ladder > span[data-mark="conventional"] i { color: var(--warning); }
-@media (max-width: 720px) { .hits-test-body { grid-template-columns: minmax(0, 1fr); } }
-.rate-slider-hours { display: block; margin-top: .35rem; color: var(--faint); font-size: .62rem; }
-
-/* Firmware section (Overview tab): one device block per connected device,
-   expandable changelog + version history. Tokens only, no hardcoded colors.
-   The bottom margin clears the floating AI launcher (3rem tall at 1.5rem
-   from the viewport bottom) so the section's own actions never slide under
-   it at max scroll. */
-#firmware-update-settings { padding-bottom: 5.5rem; }
-/* Whole-section collapse: one flex row (chevron, title, actions) with a
-   custom disclosure marker so the native one can't strand itself on its own
-   line. Buttons inside stop their clicks from reaching the summary. */
-.fw-collapse > summary { list-style: none; cursor: pointer; }
-.fw-collapse > summary::-webkit-details-marker { display: none; }
-.fw-collapse > summary::marker { content: ""; }
-.fw-summary-row { display: flex; align-items: center; gap: .6rem; }
-.fw-summary-row::before { content: "\25b8"; color: var(--text-strong); font-size: .8rem; }
-.fw-collapse[open] > summary .fw-summary-row::before { content: "\25be"; }
-.fw-summary-row .fw-title { margin: 0; }
-.fw-summary-row .fw-head-actions { margin-left: auto; }
-.fw-collapse > summary:hover .fw-summary-row::before { color: var(--ui-accent); }
-.fw-device + .fw-device { border-top: 1px solid var(--line-strong); margin-top: .9rem; padding-top: .9rem; }
-#firmware-update-settings .setting-card { padding-bottom: 2.25rem; }
-.fw-device summary.fw-transition { margin: .1rem 0 .3rem; font-family: var(--font-mono); font-size: .72rem; color: var(--text-strong); cursor: pointer; }
-.fw-details { margin-top: .45rem; }
-.fw-details summary { cursor: pointer; color: var(--text-soft); font-size: .72rem; font-weight: 600; }
-.fw-details summary::marker { color: var(--text-strong); font-size: .85rem; }
-.fw-details summary:hover { color: var(--text-strong); }
-.fw-details summary:hover::marker { color: var(--ui-accent); }
-.fw-details p { margin: .35rem 0 0; color: var(--text-soft); font-size: .74rem; line-height: 1.5; }
-.fw-history { margin: .35rem 0 0; padding-left: 1.1rem; color: var(--text-soft); font-size: .72rem; }
-.fw-history li + li { margin-top: .15rem; }
-.fw-meta { margin-top: .8rem; color: var(--faint); font-size: .68rem; }
-/* Firmware section title reads as a quiet eyebrow; actions live in the
-   header cluster (never bottom-right, where the AI launcher floats). */
-.fw-title { text-transform: uppercase; }
-.fw-head-actions { display: inline-flex; align-items: center; gap: .5rem; }
-.fw-head-actions button { padding: .38rem .65rem; border: 1px solid var(--text); border-radius: 6px; background: var(--text); color: var(--ink); font-size: .65rem; font-weight: 700; }
-.fw-head-actions button:disabled { cursor: default; opacity: .45; }
-/* Green "update available" badge: reuses the setting-heading output
-   chrome, retinted with the theme-aware success token. */
-.setting-heading output.fw-badge-available {
-  border-color: color-mix(in srgb, var(--success) 55%, transparent);
-  color: var(--success);
-}
-
-/* ---- Keyboard (Wuque Studio) workspace ----------------------------------
-   A keyboard is not a mouse, so it gets pixels rather than a product
-   rendering: a compact 6x21 matrix, then the trigger sliders. */
-.keyboard-panel {
-  display: grid;
-  gap: 1rem;
-  grid-template-columns: minmax(0, 1fr);
-}
-@media (min-width: 1100px) {
-  .keyboard-panel { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); align-items: start; }
-  .keyboard-identity-card { grid-row: span 2; }
-}
-.keyboard-identity {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
-  gap: 0.55rem 1rem;
-  margin: 0.7rem 0 0;
-}
-.keyboard-identity > div { display: grid; gap: 0.1rem; min-width: 0; }
-.keyboard-identity dt {
-  color: var(--dim);
-  font-size: 0.66rem;
-  font-weight: 600;
-  letter-spacing: 0.05em;
-  text-transform: uppercase;
-}
-.keyboard-identity dd {
-  margin: 0;
-  color: var(--text-strong);
-  font-size: 0.82rem;
-  font-weight: 600;
-  overflow-wrap: anywhere;
-}
-.keyboard-matrix { display: grid; gap: 6px; margin-top: 0.7rem; }
-.keyboard-matrix-row { display: flex; gap: 6px; }
-.keyboard-key {
-  display: grid;
-  flex: 1 1 0;
-  place-items: center;
-  min-width: 0;
-  min-height: 2.5rem;
-  padding: 0.2rem 0.1rem;
-  overflow: hidden;
-  border: 1px solid var(--line-strong);
-  border-radius: 7px;
-  background: var(--surface-strong);
-  color: var(--text-strong);
-  font-size: 0.68rem;
-  font-weight: 600;
-  line-height: 1.1;
-  white-space: nowrap;
-  cursor: pointer;
-  text-overflow: ellipsis;
-  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
-}
-.keyboard-key:hover:not(:disabled) { background: var(--hover); }
-.keyboard-key:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 1px; }
-.keyboard-key.is-empty { visibility: hidden; }
-.keyboard-key.is-selected {
-  background: var(--ui-accent);
-  border-color: var(--ui-accent);
-  color: var(--ui-accent-ink);
-}
-.keyboard-key.is-long { font-size: 0.6rem; line-height: 1; white-space: normal; overflow-wrap: anywhere; }
-.keyboard-selection-actions { display: flex; gap: 0.5rem; margin-top: 0.8rem; }
-.keyboard-selection-actions button {
-  border: 0;
-  padding: 0.4rem 0.8rem;
-  background: var(--hover);
-  color: var(--text-strong);
-  font-size: 0.72rem;
-  font-weight: 600;
-  cursor: pointer;
-}
-.keyboard-selection-actions button:disabled { cursor: default; opacity: 0.45; }
-.keyboard-trigger-controls { display: grid; gap: 0.9rem; margin-top: 1rem; }
-.keyboard-empty { margin: 0.9rem 0 0; color: var(--dim); font-size: 0.76rem; }
-
-
-/* Keyboard settings share the mouse workspace surfaces and control tokens. */
-.keyboard-panel { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); align-items: start; }
-.keyboard-panel [hidden] { display: none !important; }
-.keyboard-identity-card { grid-row: auto; }
-.keyboard-status { grid-column: 1 / -1; color: var(--text-strong); padding: .7rem 1rem; background: var(--surface-strong); border-radius: 12px; font-size: .8rem; overflow-wrap: anywhere; }
-#keyboard-trigger-card, .keyboard-workspace-card:has(.keyboard-matrix), .keyboard-workspace-card:has(.keyboard-macro-events) { grid-column: 1 / -1; }
-.keyboard-fields { display: grid; gap: 1rem; border: 0; padding: 0; margin: 1rem 0; min-width: 0; }
-.keyboard-field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: .9rem; }
-.keyboard-field { display: grid; gap: .4rem; min-width: 0; color: var(--text-strong); font-size: .8rem; }
-.keyboard-field input, .keyboard-field select { width: 100%; min-width: 0; box-sizing: border-box; border: 1px solid var(--line-strong); border-radius: 8px; padding: .6rem .7rem; color: var(--text-strong); background: var(--surface-strong); font: inherit; }
-.keyboard-inline-form { display: flex; align-items: end; gap: .8rem; }
-.keyboard-inline-form .keyboard-field { flex: 1; }
-.keyboard-workspace-card > button, .keyboard-workspace-card form button:not(.switch-button), .keyboard-fields > button, .keyboard-save-confirm button { padding: .55rem .85rem; background: var(--hover); color: var(--text-strong); border: 0; border-radius: 8px; font: inherit; font-size: .78rem; font-weight: 600; cursor: pointer; }
-.keyboard-workspace-card button:disabled { opacity: .45; cursor: default; }
-.keyboard-workspace-card button:focus-visible, .keyboard-field :is(input, select):focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
-.keyboard-color-field { display: grid; gap: .5rem; font-size: .8rem; }
-.keyboard-matrix { overflow-x: auto; padding: .2rem; }
-.keyboard-matrix-row { min-width: 650px; }
-.keyboard-key { overflow: visible; white-space: normal; overflow-wrap: anywhere; }
-.keyboard-save-confirm { margin-top: 1rem; padding: 1rem; border-radius: 12px; background: var(--surface-strong); }
-.keyboard-save-confirm button + button { margin-left: .5rem; }
-.keyboard-macro-events { max-height: 450px; overflow-y: auto; display: grid; gap: .7rem; }
-.keyboard-macro-event { display: grid; grid-template-columns: 1.5rem minmax(70px, .6fr) minmax(130px, 2fr) minmax(100px, 1fr) auto; gap: .7rem; align-items: end; padding: .5rem; border-radius: 10px; background: var(--surface-strong); }
-.keyboard-sensor-readout { display: flex; gap: 1rem; align-items: center; }
-.keyboard-sensor-readout output { font-variant-numeric: tabular-nums; font-size: 1.4rem; }
-@media (max-width: 680px) { .keyboard-macro-event { grid-template-columns: 1fr 1fr; } }
-
-.keyboard-layout-details { margin-top: 1rem; color: var(--text-strong); font-size: .8rem; }
-.keyboard-layout-details table { width: 100%; text-align: left; border-collapse: collapse; }
-.keyboard-layout-details :is(th, td) { padding: .5rem; border-bottom: 1px solid var(--line-strong); }
-
-/* Per-key performance: a centered key deck and three compact tuning surfaces. */
-.keyboard-panel { color: var(--text); }
-#keyboard-trigger-card { padding: clamp(1rem, 2vw, 1.6rem); border: 0; border-radius: 20px; background: var(--surface-panel); box-shadow: 0 4px 20px color-mix(in srgb, var(--text-strong) 5%, transparent); }
-#keyboard-trigger-card .setting-heading { margin-bottom: 1.1rem; }
-#keyboard-trigger-card .title-row h2 { font-size: 1.1rem; }
-.keyboard-key-deck { padding: clamp(.8rem, 2vw, 1.5rem); border-radius: 16px; background: linear-gradient(160deg, var(--surface-strong), var(--surface-dialog)); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-strong) 6%, transparent), 0 3px 12px color-mix(in srgb, var(--text-strong) 4%, transparent); }
-.keyboard-key-deck .keyboard-matrix { max-width: 940px; margin: 0 auto; padding: .35rem .2rem .6rem; gap: 7px; }
-.keyboard-key-deck .keyboard-matrix-row { display: grid; gap: 7px; }
-.keyboard-key-deck .keyboard-key { min-height: 44px; border: 0; border-radius: 8px; background: var(--surface-panel); box-shadow: 0 3px 0 color-mix(in srgb, var(--text-strong) 12%, var(--surface-panel)), inset 0 1px 0 color-mix(in srgb, var(--text-strong) 7%, transparent); font-size: .72rem; transition: background .15s, color .15s, transform .15s; }
-.keyboard-key-deck .keyboard-key:hover:not(:disabled) { background: var(--hover); transform: translateY(-1px); }
-.keyboard-key-deck .keyboard-key.is-selected { color: var(--ui-accent-ink); background: var(--ui-accent); box-shadow: 0 3px 0 color-mix(in srgb, var(--ui-accent) 65%, var(--surface-panel)), 0 0 14px var(--ui-accent-soft); }
-.keyboard-key-deck .keyboard-key.is-long { font-size: .62rem; }
-.keyboard-selection-actions { align-items: center; flex-wrap: wrap; margin-top: 1rem; }
-.keyboard-selection-count { margin-right: auto; color: var(--text-strong); background: var(--ui-accent-soft); border-radius: 999px; padding: .4rem .75rem; font-size: .75rem; font-weight: 650; }
-.keyboard-selection-actions button { border-radius: 999px; padding: .5rem .85rem; background: var(--surface-panel); }
-.keyboard-selection-actions button:hover:not(:disabled) { background: var(--hover); }
-.keyboard-trigger-editor { margin-top: 1.6rem; }
-.keyboard-editor-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
-.keyboard-editor-heading h3 { margin: 0; color: var(--text-strong); font-size: .95rem; }
-.keyboard-editor-heading p { margin: .35rem 0 0; color: var(--dim); font-size: .74rem; }
-.keyboard-selected-chips { display: flex; gap: .35rem; flex-wrap: wrap; }
-.keyboard-selected-chips span { padding: .4rem .65rem; min-width: 2rem; text-align: center; border-radius: 7px; background: var(--ui-accent-soft); color: var(--text-strong); font-size: .72rem; font-weight: 650; }
-.keyboard-trigger-controls { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 0; }
-.keyboard-tuning-group { min-width: 0; padding: 1.1rem; border-radius: 16px; background: var(--surface-strong); box-shadow: 0 2px 8px color-mix(in srgb, var(--text-strong) 4%, transparent); }
-.keyboard-tuning-group h4 { margin: 0; font-size: .88rem; color: var(--text-strong); }
-.keyboard-tuning-group > p { margin: .45rem 0 1.15rem; min-height: 2.4em; color: var(--dim); font-size: .73rem; line-height: 1.5; }
-.keyboard-tuning-group .stepper-slider { margin-top: 1.1rem; padding-top: 1rem; }
-.keyboard-tuning-group .stepper-slider-head { flex-wrap: wrap; gap: .4rem; font-size: .74rem; }
-.keyboard-tuning-group .stepper-slider-head output { margin-left: auto; font-size: .82rem; }
-.keyboard-tuning-group .stepper-slider-scale { font-size: .6rem; margin-top: .5rem; }
-@media (max-width: 1000px) { .keyboard-trigger-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); } .keyboard-tuning-group:first-child { grid-column: 1 / -1; } }
-@media (max-width: 640px) { .keyboard-trigger-controls { grid-template-columns: minmax(0, 1fr); } .keyboard-tuning-group { padding: 1rem; } .keyboard-tuning-group > p { min-height: 0; } .keyboard-selection-count { flex-basis: 100%; } }
-#keyboard-polling-card { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; border: 0; border-radius: 16px; background: var(--surface-panel); box-shadow: 0 3px 12px color-mix(in srgb, var(--text-strong) 5%, transparent); }
-#keyboard-polling-card .setting-heading { flex: 1; margin: 0; }
-#keyboard-polling-card .rate-slider { flex: 1; max-width: 560px; min-width: 280px; }
-#keyboard-polling-card .rate-slider-head { justify-content: flex-end; }
-#keyboard-polling-card .rate-slider-head > span { display: none; }
-@media (max-width: 640px) { #keyboard-polling-card { flex-direction: column; align-items: stretch; gap: .8rem; } #keyboard-polling-card .rate-slider { min-width: 0; max-width: none; } }
-
-:lang(tr) .ksnake-macro-preview::before { content: "Önizleme · "; }
diff --git a/src/control.tsx b/src/control.tsx
deleted file mode 100644
index 73d7a507..00000000
--- a/src/control.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-import type { ReactNode } from "react";
-import { createRoot } from "react-dom/client";
-import "./control.css";
-import "./launch.css";
-import { App } from "./app/App";
-import { LaunchCountdown } from "./app/LaunchCountdown";
-import { UnsupportedNotice } from "./app/UnsupportedNotice";
-import { installBridgeHid } from "./bridge-hid";
-import { unsupportedNotice } from "./browser-support";
-import { start } from "./device/controller";
-import { isBeforeLaunch } from "./launch";
-import { mountOfflineBanner } from "./offline-banner";
-import { registerServiceWorker } from "./register-sw";
-import { startSelfXssGuard } from "./self-xss-guard";
-import { MIN_HEIGHT, MIN_WIDTH, useViewportTooSmall } from "./app/useViewportTooSmall";
-import { ensureDisplayLocale } from "./i18n";
-import { initialUiLocale } from "./app/ui-locale";
-
-const controlApp = document.querySelector<HTMLDivElement>("#control-app");
-
-if (!controlApp) {
-  throw new Error("OpenMouse could not find the control application root.");
-}
-
-function isChromium(): boolean {
-  const brands = (navigator as Navigator & {
-    userAgentData?: { brands?: { brand: string }[] };
-  }).userAgentData?.brands;
-  if (brands) return brands.some((entry) => /chromium/i.test(entry.brand));
-  return /Chrom(e|ium)\/|Edg\//.test(navigator.userAgent);
-}
-
-registerServiceWorker();
-mountOfflineBanner();
-if (import.meta.env.PROD) startSelfXssGuard();
-
-function LaunchHero(): ReactNode {
-  return (
-    <div className="launch-shell">
-      <LaunchCountdown />
-    </div>
-  );
-}
-
-function Root(): ReactNode {
-  const tooSmall = useViewportTooSmall();
-  if (tooSmall) {
-    return (
-      <UnsupportedNotice
-        notice={{
-          headline: "Make the window bigger.",
-          detail: `OpenMouse lays its device controls out side by side and needs at least ${MIN_WIDTH} × ${MIN_HEIGHT} pixels. Resize the window, or move to a larger display.`,
-        }}
-      />
-    );
-  }
-  return <App />;
-}
-
-const root = createRoot(controlApp);
-if (import.meta.env.PROD && isBeforeLaunch()) {
-  void ensureDisplayLocale(initialUiLocale()).then(() => root.render(<LaunchHero />));
-} else {
-  // Prefer Bridge when it is installed: native HID can reach protected mouse
-  // collections that Chrome 153+ correctly withholds from WebHID. If Bridge is
-  // absent, installation falls back to the browser's own WebHID implementation.
-  void installBridgeHid({ force: true }).then(async (hasHid) => {
-    await ensureDisplayLocale(initialUiLocale());
-    const notice = unsupportedNotice({
-      hasWebHid: hasHid,
-      handheld: window.matchMedia("(pointer: coarse) and (hover: none)").matches,
-      secureContext: window.isSecureContext,
-      chromium: isChromium(),
-    });
-    if (notice) {
-      root.render(<UnsupportedNotice notice={notice} />);
-      return;
-    }
-    start();
-    root.render(<Root />);
-  });
-}
diff --git a/src/device/controller.ts b/src/device/controller.ts
index 6c152dab..bb82e689 100644
--- a/src/device/controller.ts
+++ b/src/device/controller.ts
@@ -1,9 +1,9 @@
 import { emptyKeyboardWorkspace } from "./keyboard-workspace.ts";
 import type { KeyboardCommand } from "./keyboard-workspace.ts";
-import { cachedBatterySamples, estimateBatteryTime, estimateFromRatedLife, ratedBattery, recordBatterySample, type BatteryMode } from "../battery-history";
-import { bridgeEmptyResultMessage, isBridgeHidActive } from "../bridge-hid";
-import { applyBridgeNativeSettings } from "../bridge";
-import { pollingRateText } from "../ui/polling-rate";
+import { cachedBatterySamples, estimateBatteryTime, estimateFromRatedLife, ratedBattery, recordBatterySample, type BatteryMode } from "../features/devices/battery-history";
+import { bridgeEmptyResultMessage, isBridgeHidActive } from "../features/bridge/bridge-hid";
+import { applyBridgeNativeSettings } from "../features/bridge/bridge";
+import { pollingRateText } from "../shared/polling-rate";
 import {
   clientSupportScore,
   createKeyboardClient,
@@ -17,11 +17,11 @@ import {
   pickLogicalDevice,
   type PulsarClient,
   type SupportedClient,
-} from "../device-clients";
-import { closestDpiOption } from "../dpi-presets";
+} from "./device-clients";
+import { closestDpiOption } from "./dpi-presets";
 import { lunafurySettingLabel, lunafurySettingPriority } from "./lunafury-labels.ts";
 import { lunaFuryLightningPriority, stageLunaFuryProfile } from "./lunafury-profile.ts";
-import { formatHex, hidTraffic, isMark, markHidActivity, startHidCapture, type HidTrafficEntry } from "../hid-diagnostics";
+import { formatHex, hidTraffic, isMark, markHidActivity, startHidCapture, type HidTrafficEntry } from "./hid-diagnostics";
 import {
   clearPendingChanges,
   dropPendingChange,
@@ -35,15 +35,15 @@ import {
   stashPendingChanges,
   withPendingChanges,
   type PendingChange,
-} from "../pending-changes";
+} from "./pending-changes";
 import {
   draftProfileSnapshot,
   editableProfileFields,
   matchingProfileFields,
   type GameProfileSnapshot,
 } from "./game-profile-snapshot";
-import { deviceImage } from "../ui/device-images";
-import { batteryNeedsCharging } from "../ui/battery-icon";
+import { deviceImage } from "../shared/device-images";
+import { batteryNeedsCharging } from "../shared/battery-icon";
 import {
   isVxeR1SePlusReceiver,
   receiverPairingSucceeded,
@@ -56,8 +56,8 @@ import {
   type InterfaceLocale,
   type InterfacePreferences,
   type InterfaceTheme,
-} from "../interface-preferences";
-import { displayText, displayTemplate, batteryStateText, connectionText, ensureDisplayLocale, layerLabel, t, tp, type I18nKey } from "../i18n";
+} from "../features/settings/interface-preferences";
+import { displayText, displayTemplate, batteryStateText, connectionText, ensureDisplayLocale, layerLabel, t, tp, type I18nKey } from "../i18n/index";
 import {
   EGG_BUTTON_NAMES,
   EggOp1HidClient,
@@ -106,7 +106,7 @@ import {
   type LogitechButtonBinding,
   type LogitechMacroStep,
 } from "@openmouse/protocol/drivers/logitech/onboard-profiles";
-import { setCaptureContext } from "../capture-context";
+import { setCaptureContext } from "../features/capture/capture-context";
 import {
   decodeProfileKey, encodeProfileKey, profileKeyMatchesDevice, type ProfileKeyPayload,
 } from "./profile-key";
@@ -203,7 +203,7 @@ import { RapooHidClient } from "@openmouse/protocol/drivers/rapoo/hid";
 import { CoolerMasterHidClient } from "@openmouse/protocol/drivers/coolermaster/hid";
 import { AjazzHidClient } from "@openmouse/protocol/drivers/ajazz/hid";
 import { RedragonM690ProHidClient } from "@openmouse/protocol/drivers/redragon/m690-pro-hid";
-import { parsePreviewMode, previewsEnabled, type PreviewMode } from "../preview-modes";
+import { parsePreviewMode, previewsEnabled, type FixturePreviewMode, type PreviewMode } from "./preview/preview-modes";
 import { sleepLabel } from "./options";
 import { traitsFor } from "./traits";
 import type { SlxStatus } from "./finalmouse-slx.ts";
@@ -696,7 +696,7 @@ function toastForError(title: string, error: unknown): void {
       {
         action: {
           label: "See workaround & status",
-          href: "https://openmouse.app/blog-razer-windows-chrome-153",
+          href: "https://openmouse.app/blog/razer-windows-chrome-153",
         },
         prominent: true,
         persistent: true,
@@ -2899,6 +2899,19 @@ export async function selectAuthorizedDevice(index: number): Promise<void> {
 
 /** Open the given device's dashboard from the picker, connecting it first when needed. */
 export async function openDeviceOverview(index: number): Promise<void> {
+  if (isAnyPreview) {
+    const key = previewMode === "list" ? previewShelfKeys[index] : undefined;
+    if (key) {
+      window.location.search = `?preview=${key}`;
+      return;
+    }
+    if (latestDeviceStatus !== null || activeKeyboard !== null) {
+      deviceListView = "device";
+      activeWorkspaceTab = "overview";
+      emit();
+    }
+    return;
+  }
   await waitForControllerIdle();
   const groups = await authorizedDeviceGroups();
   if (!groups) return;
@@ -2921,6 +2934,47 @@ export async function openDeviceOverview(index: number): Promise<void> {
   }
 }
 
+export async function removeAuthorizedDevice(index: number): Promise<void> {
+  if (isAnyPreview) {
+    if (previewMode !== "list") return;
+    const name = sidebarDevices[index]?.name ?? "";
+    previewShelfKeys = previewShelfKeys.filter((_, at) => at !== index);
+    sidebarDevices = sidebarDevices.filter((_, at) => at !== index).map((entry, at) => ({ ...entry, index: at }));
+    pushToast("info", st("ctl.deviceForgotten"), name);
+    emit();
+    return;
+  }
+  await waitForControllerIdle();
+  const groups = await authorizedDeviceGroups();
+  const group = groups?.[index];
+  if (!group) return;
+  const name = sidebarDevices[index]?.name ?? group[0]?.productName ?? "";
+  const isOpen = group.some((device) => device === activeDevice || eggWeOwnsDevice(eggWeClient(), device))
+    || (activeKeyboard !== null && group.some((device) => device === activeDevice));
+  if (isOpen) {
+    const client = active;
+    showDisconnectedState();
+    await client?.close().catch(() => undefined);
+    deviceListView = "list";
+  }
+  let forgotten = 0;
+  for (const device of group) {
+    const forget = (device as HIDDevice & { forget?: () => Promise<void> }).forget;
+    if (typeof forget !== "function") continue;
+    try {
+      await forget.call(device);
+      forgotten += 1;
+    } catch {
+    }
+  }
+  if (forgotten === 0) {
+    pushToast("info", st("ctl.deviceForgetUnsupported"), name);
+  } else {
+    pushToast("info", st("ctl.deviceForgotten"), name);
+  }
+  await refreshSidebar();
+}
+
 /** Return from an opened device dashboard to the device picker. */
 export function showDeviceList(): void {
   deviceListView = "list";
@@ -6582,7 +6636,7 @@ async function refreshStatus(): Promise<void> {
 
 async function loadPreviewEntries(): Promise<void> {
   if (!previewModeEnabled || previewEntries.length > 0) return;
-  const { PREVIEW_FIXTURES } = await import("../preview-fixtures");
+  const { PREVIEW_FIXTURES } = await import("./preview/preview-fixtures");
   previewEntries = [
     ["slots", "Logitech G502 X PLUS"],
     ["superstrike", "Logitech PRO X 2 Superstrike"],
@@ -6591,7 +6645,6 @@ async function loadPreviewEntries(): Promise<void> {
   emit();
 }
 
-/** A stand-in that keeps magnetic settings in memory, so the preview behaves like a connected mouse. */
 function magneticPreviewClient(initial: MouseStatus): SupportedClient {
   const status = structuredClone(initial);
   const buttons = (): MagneticButtonStatus[] => status.magneticButtons!.buttons;
@@ -6738,11 +6791,6 @@ function previewClient(): LogitechHidppClient {
   });
 }
 
-/**
- * A stand-in that keeps the five DPI presets in memory, so the preview behaves
- * like a connected Gen 2 mouse: the axes column writes through to it and the
- * status that comes back shows the result.
- */
 function steelseriesStagePreviewClient(initial: MouseStatus): SupportedClient {
   const status = structuredClone(initial);
   const stages = (): number[] => status.dpiStages ?? [];
@@ -6932,17 +6980,30 @@ function showG703PreviewProfiles(): void {
   active = previewClient();
 }
 
+const PREVIEW_SHELF: readonly FixturePreviewMode[] = ["razer", "pulsar-pro", "g703", "egg-op1", "nape-pro"];
+let previewShelfKeys: readonly FixturePreviewMode[] = [];
+
+function previewShelfEntry(index: number, name: string, selected: boolean): SidebarDevice {
+  return { index, name, detail: "", selected, vendorId: 0, productId: 0, kind: "mouse", transport: "webhid" };
+}
+
 async function showFixturePreview(name: PreviewMode): Promise<void> {
-  const { PREVIEW_FIXTURES } = await import("../preview-fixtures");
+  const { PREVIEW_FIXTURES } = await import("./preview/preview-fixtures");
   await loadPreviewEntries();
   const fixture = name === "list" || name === "slots" || name === "superstrike"
     ? undefined
     : PREVIEW_FIXTURES[name];
   if (!fixture) {
     previewListMessage = name === "list" ? "Pick a driver preview." : `Unknown preview "${name}".`;
+    if (name === "list") {
+      previewShelfKeys = PREVIEW_SHELF.filter((key) => PREVIEW_FIXTURES[key]);
+      sidebarDevices = previewShelfKeys.map((key, index) => previewShelfEntry(index, PREVIEW_FIXTURES[key]!.status.name, false));
+      emit();
+    }
     setReadStatus(previewListMessage);
     return;
   }
+  sidebarDevices = [previewShelfEntry(0, fixture.status.name, true)];
   dpiOptions = [100, 200, 400, 800, 1600, 3200, 6400, 12800, 25600, 32000];
   if (name === "g703") showG703PreviewProfiles();
   if (name === "steelseries-gen2") active = steelseriesStagePreviewClient(fixture.status);
diff --git a/src/device-clients.test.ts b/src/device/device-clients.test.ts
similarity index 97%
rename from src/device-clients.test.ts
rename to src/device/device-clients.test.ts
index ffc2fc6f..462d219a 100644
--- a/src/device-clients.test.ts
+++ b/src/device/device-clients.test.ts
@@ -4,7 +4,6 @@ import test from "node:test";
 import { describeHidDevice } from "./hid-diagnostics.ts";
 import { createSupportedClient, listLogicalDevices, logicalDeviceGroups } from "./device-clients.ts";
 
-/** A WebHID-style device whose collections pass the Pulsar control shape. */
 function supportedWebHidDevice(options: {
   vendorId?: number;
   productId?: number;
diff --git a/src/device-clients.ts b/src/device/device-clients.ts
similarity index 92%
rename from src/device-clients.ts
rename to src/device/device-clients.ts
index 62fe78f8..6a1fbcdc 100644
--- a/src/device-clients.ts
+++ b/src/device/device-clients.ts
@@ -27,9 +27,9 @@ import {
   type SupportedClient,
 } from "@openmouse/protocol/drivers/registry";
 import { RAZER_PRODUCTS } from "@openmouse/protocol/razer-devices";
-import { KochiKeyboardClient } from "./device/kochi-keyboard.ts";
-import type { KeyboardClient } from "./device/keyboard-client.ts";
-import { WuqueKeyboardClient } from "./device/wuque-keyboard.ts";
+import { KochiKeyboardClient } from "./kochi-keyboard.ts";
+import type { KeyboardClient } from "./keyboard-client.ts";
+import { WuqueKeyboardClient } from "./wuque-keyboard.ts";
 export { describeHidDevice } from "./hid-diagnostics.ts";
 export { deviceBrand, type PulsarClient, type SupportedClient };
 
@@ -48,14 +48,12 @@ function bridgeRazerClient(device: HIDDevice): SupportedClient | null {
 }
 
 
-/** The mouse client for a device, including Bridge-exposed Razer boards. */
 export function createSupportedClient(device: HIDDevice): SupportedClient | null {
   return registryCreateSupportedClient(device) ?? bridgeRazerClient(device);
 }
 
 export type { KeyboardClient };
 
-/** True when the client drives a keyboard rather than a mouse. */
 export function isKeyboardClient(client: SupportedClient | KeyboardClient): client is KeyboardClient {
   return client instanceof WuqueKeyboardClient || client instanceof KochiKeyboardClient;
 }
@@ -79,7 +77,6 @@ export function clientSupportScore(device: HIDDevice): number {
   return registryClientSupportScore(device);
 }
 
-/** Supported devices for the sidebar; multi-path drivers collapse via their module. */
 export function logicalDeviceGroups(devices: HIDDevice[] = []): HIDDevice[][] {
   const merged = collapseBoltPeers(
     eggWeMergeLogicalDevices(
diff --git a/src/dpi-presets.test.ts b/src/device/dpi-presets.test.ts
similarity index 83%
rename from src/dpi-presets.test.ts
rename to src/device/dpi-presets.test.ts
index 5f620261..5d23ab0c 100644
--- a/src/dpi-presets.test.ts
+++ b/src/device/dpi-presets.test.ts
@@ -3,7 +3,6 @@ import test from "node:test";
 
 import { closestDpiOption, dpiPresetValues } from "./dpi-presets.ts";
 
-/** A mouse advertising a fine grid that contains every round number. */
 const FINE_GRID = Array.from({ length: 600 }, (_, step) => 50 + step * 50);
 /** The G402's real grid, captured from hardware: 252 to 4032 in steps of 84. */
 const G402_GRID = Array.from({ length: 46 }, (_, step) => 252 + step * 84);
@@ -13,7 +12,6 @@ test("a mouse that lists the round numbers keeps them exactly", () => {
 });
 
 test("presets beyond a mouse's range are dropped, not snapped to its maximum", () => {
-  // Maximum 4000, so 6400 and 8000 have no believable stand-in.
   const upTo4000 = Array.from({ length: 80 }, (_, step) => 50 + step * 50);
   assert.deepEqual(dpiPresetValues(upTo4000), [400, 800, 1600, 3200]);
 });
@@ -25,16 +23,12 @@ test("a sparse advertised list still yields only values the mouse holds", () =>
 
 test("the G402's 84-step grid produces a usable preset row", () => {
   const presets = dpiPresetValues(G402_GRID);
-  // Without snapping this row collapsed to a single button.
   assert.equal(presets.length, 4);
   assert.deepEqual(presets, [420, 840, 1596, 3192]);
-  // Every offered value must be one the mouse actually advertises.
   for (const preset of presets) assert.equal(G402_GRID.includes(preset), true);
 });
 
 test("a coarse list with no near matches offers nothing rather than guessing", () => {
-  // 1000 is 25% away from 800 and 2000 is 25% away from 1600, so neither is a
-  // believable stand-in. The row then shows only the mouse's current DPI.
   assert.deepEqual(dpiPresetValues([1000, 2000]), []);
 });
 
diff --git a/src/dpi-presets.ts b/src/device/dpi-presets.ts
similarity index 90%
rename from src/dpi-presets.ts
rename to src/device/dpi-presets.ts
index 8f679762..99dbe3a8 100644
--- a/src/dpi-presets.ts
+++ b/src/device/dpi-presets.ts
@@ -1,4 +1,3 @@
-/** Round numbers the DPI row offers when a mouse can reach them. */
 export const COMMON_DPI_PRESETS = [400, 800, 1600, 3200, 6400, 8000] as const;
 
 /**
@@ -7,7 +6,6 @@ export const COMMON_DPI_PRESETS = [400, 800, 1600, 3200, 6400, 8000] as const;
  */
 const DPI_SNAP_TOLERANCE = 0.1;
 
-/** Closest DPI the mouse can actually reach, or null when it advertises none. */
 export function closestDpiOption(options: readonly number[], target: number): number | null {
   let closest: number | null = null;
   for (const option of options) {
diff --git a/src/device/finalmouse-slx.ts b/src/device/finalmouse-slx.ts
index ac1f829c..db1adb56 100644
--- a/src/device/finalmouse-slx.ts
+++ b/src/device/finalmouse-slx.ts
@@ -16,7 +16,6 @@ import type { MouseStatus } from "@openmouse/protocol/drivers/mouse-types";
 export const SLX_CLICK_MECHANICAL = 0;
 export const SLX_CLICK_ANALOG = 1;
 
-/** Release point: 0 normal (default), 1 early, 2 late. */
 export const SLX_RELEASE_NORMAL = 0;
 export const SLX_RELEASE_EARLY = 1;
 export const SLX_RELEASE_LATE = 2;
@@ -31,7 +30,6 @@ export const SLX_TMR = {
   rtRecommendedUm: 220,
 } as const;
 
-/** Extra status fields an SLX-capable driver fills in. */
 export interface SlxStatusFields {
   finalmouseIsSlx?: boolean | null;
   finalmouseClickModeL?: number | null;
@@ -58,12 +56,10 @@ function fields(status: MouseStatus | null | undefined): SlxStatusFields {
   return (status ?? {}) as SlxStatusFields;
 }
 
-/** True when the connected driver reported a Starlight X dongle. */
 export function isSlxStatus(status: MouseStatus | null | undefined): boolean {
   return fields(status).finalmouseIsSlx === true;
 }
 
-/** TMR click-mode / actuation / MSP snapshot, or null when not reported. */
 export function slxTmr(status: MouseStatus | null | undefined): {
   modeL: number;
   modeR: number;
@@ -92,7 +88,6 @@ export function slxTmr(status: MouseStatus | null | undefined): {
   };
 }
 
-/** Profile roster snapshot, or null when the driver did not report one. */
 export function slxProfiles(status: MouseStatus | null | undefined): {
   count: number;
   active: number;
@@ -109,7 +104,6 @@ export function slxProfiles(status: MouseStatus | null | undefined): {
   };
 }
 
-/** Driver methods an SLX-capable client exposes. All are optional at runtime. */
 export interface SlxClient {
   setClickMode?(modeL: number, modeR: number, relL?: number, relR?: number): Promise<unknown>;
   setTmrActuation?(actuationMmL: number, actuationMmR: number, rtUmL?: number, rtUmR?: number): Promise<unknown>;
@@ -135,7 +129,6 @@ export function tmrStepsToMm(steps: number): number {
   return Math.min(0.4, Math.max(0.01, Math.round(steps) / 100));
 }
 
-/** Millimetres to steps, clamped to the 1-40 device range. */
 export function tmrMmToSteps(mm: number): number {
   return Math.min(SLX_TMR.actuationMaxSteps, Math.max(SLX_TMR.actuationMinSteps, Math.round(mm * 100)));
 }
diff --git a/src/device/firmware-updates.ts b/src/device/firmware-updates.ts
index 021781c8..4af51243 100644
--- a/src/device/firmware-updates.ts
+++ b/src/device/firmware-updates.ts
@@ -29,7 +29,6 @@ export interface FirmwareManifestEntry {
   brand?: string;
   /** Any substring match against MouseStatus.name (case-insensitive). */
   nameMatch?: string[];
-  /** Optional exact match against MouseStatus.modelId. */
   modelId?: string;
   /**
    * HID interface identities this package fits ("046d_xxxx", lowercase).
@@ -38,9 +37,7 @@ export interface FirmwareManifestEntry {
    * brand/nameMatch whenever the connected device exposes its VID/PID.
    */
   interfaceIds?: string[];
-  /** Source depot name on the update CDN. */
   depot?: string;
-  /** Full download URL of the source depot (plain HTTPS, no auth). */
   depotUrl?: string;
   /** Logical binary key inside the depot (e.g. "dfu_binary"). */
   firmwareKey?: string;
@@ -48,9 +45,7 @@ export interface FirmwareManifestEntry {
   binaryHash?: string;
   /** Previously seen versions, newest first — written by the generator. */
   history?: Array<{ version: string; date: string | null }>;
-  /** Flashing constraints, e.g. "BLOCKER_CONNECT_USB". */
   startBlockers?: string[];
-  /** Advisory warnings, e.g. receiver/device pairing notes. */
   startWarnings?: string[];
   /**
    * Optional HID++ 0x0003 entity prefix (e.g. "MPM"). When set, the entry
@@ -59,11 +54,8 @@ export interface FirmwareManifestEntry {
    * bootloader entity from being compared against the mouse's latest.
    */
   firmwareName?: string;
-  /** Latest known firmware, e.g. "27.1.2". Compared numerically. */
   latestVersion: string;
-  /** True = G Hub would show REQUIRED instead of AVAILABLE. */
   required?: boolean;
-  /** Where the update button goes until in-app DFU exists. */
   downloadUrl?: string;
   releaseNotes?: string;
 }
@@ -71,7 +63,6 @@ export interface FirmwareManifestEntry {
 export interface FirmwareManifest {
   manifestVersion: number;
   updatedAt: string;
-  /** Human-readable provenance, e.g. "weekly mirror of vendor feeds". */
   source: string;
   devices: FirmwareManifestEntry[];
 }
@@ -104,10 +95,8 @@ const FALLBACK_URL = "/firmware-manifest.json";
 const MANIFEST_CACHE_KEY = "openmouse.firmware-manifest-cache.v3";
 const DISMISSED_KEY = "openmouse.firmware-dismissed";
 
-/** Background cadence — manual checks bypass this. */
 export const FIRMWARE_CHECK_INTERVAL_MS = 24 * 60 * 60 * 1000;
 
-/** First `1.2.3`-shaped token in a driver string like "Mouse v27.1.2". */
 export function extractVersionToken(raw: string): string | null {
   const match = raw.match(/\d+(?:\.\d+)+/);
   if (match) return match[0];
@@ -122,7 +111,6 @@ function splitNumeric(version: string): number[] {
     .map((n) => (Number.isFinite(n) ? n : 0));
 }
 
-/** Numeric dot-separated compare. Returns -1 / 0 / 1. */
 export function compareVersions(a: string, b: string): number {
   const pa = splitNumeric(a);
   const pb = splitNumeric(b);
@@ -151,7 +139,6 @@ function interfaceMatches(entry: FirmwareManifestEntry, device: FirmwareDeviceRe
 }
 
 function deviceMatches(entry: FirmwareManifestEntry, device: FirmwareDeviceRef): boolean {
-  // Interface identity is exact — a generated entry pins its device.
   if ((entry.interfaceIds?.length ?? 0) > 0) return interfaceMatches(entry, device);
   if (entry.brand && entry.brand.toLowerCase() !== device.brand.toLowerCase()) return false;
   if (entry.modelId && device.modelId && entry.modelId === device.modelId) return true;
@@ -159,8 +146,6 @@ function deviceMatches(entry: FirmwareManifestEntry, device: FirmwareDeviceRef):
   if ((entry.nameMatch ?? []).some((needle) => needle.length > 0 && name.includes(needle.toLowerCase()))) {
     return true;
   }
-  // Brand-only entry with no other matchers acts as a fallback for that
-  // brand. An entry with no usable matcher at all never matches.
   if (!entry.brand) return false;
   return (entry.nameMatch ?? []).length === 0 && !entry.modelId;
 }
@@ -296,7 +281,6 @@ function writeCache(manifest: FirmwareManifest): number {
   try {
     localStorage.setItem(MANIFEST_CACHE_KEY, JSON.stringify({ fetchedAt, manifest }));
   } catch {
-    // Storage full / blocked — the check still worked, just not cached.
   }
   return fetchedAt;
 }
diff --git a/src/device/game-profile-snapshot.ts b/src/device/game-profile-snapshot.ts
index f559bdb2..189a9d39 100644
--- a/src/device/game-profile-snapshot.ts
+++ b/src/device/game-profile-snapshot.ts
@@ -101,14 +101,12 @@ function same(left: unknown, right: unknown): boolean {
   return JSON.stringify(left) === JSON.stringify(right);
 }
 
-/** Top-level MouseStatus fields whose value differs between the two. */
 export function changedFields(before: MouseStatus, after: MouseStatus): string[] {
   const keys = new Set([...Object.keys(before), ...Object.keys(after)]);
   return [...keys].filter((key) =>
     !same((before as unknown as Record<string, unknown>)[key], (after as unknown as Record<string, unknown>)[key]));
 }
 
-/** The game-profile fields `after` changed relative to `before`, with `after`'s values. */
 export function snapshotDiff(before: MouseStatus, after: MouseStatus): GameProfileSnapshot {
   const diff: Record<string, unknown> = {};
   for (const field of GAME_PROFILE_FIELDS) {
@@ -120,7 +118,6 @@ export function snapshotDiff(before: MouseStatus, after: MouseStatus): GameProfi
   return diff as GameProfileSnapshot;
 }
 
-/** `status`'s current values for exactly the fields `snapshot` sets. */
 export function pickSnapshot(status: MouseStatus, snapshot: GameProfileSnapshot): GameProfileSnapshot {
   const picked: Record<string, unknown> = {};
   for (const field of Object.keys(snapshot)) {
@@ -149,7 +146,6 @@ export function snapshotKey(snapshot: GameProfileSnapshot): string {
   return JSON.stringify(Object.fromEntries(Object.entries(canonical).sort(([left], [right]) => left.localeCompare(right))));
 }
 
-/** Drops anything a stored snapshot carries that this build cannot apply. */
 export function sanitizeSnapshot(raw: unknown): GameProfileSnapshot {
   if (typeof raw !== "object" || raw === null || Array.isArray(raw)) return {};
   const clean: Record<string, unknown> = {};
@@ -162,7 +158,6 @@ export function sanitizeSnapshot(raw: unknown): GameProfileSnapshot {
   return clean as GameProfileSnapshot;
 }
 
-/** Track nested LunaFury controls separately while retaining the old field policy. */
 export function editableProfileFields(before: MouseStatus, after: MouseStatus): string[] | null {
   const fields = changedFields(before, after);
   if (!fields.every(isGameProfileField)) return null;
diff --git a/src/hid-diagnostics.ts b/src/device/hid-diagnostics.ts
similarity index 100%
rename from src/hid-diagnostics.ts
rename to src/device/hid-diagnostics.ts
diff --git a/src/device/hid-filters.ts b/src/device/hid-filters.ts
index 1f3e2e60..c0fff0a3 100644
--- a/src/device/hid-filters.ts
+++ b/src/device/hid-filters.ts
@@ -9,5 +9,4 @@ import { WUQUE_HID_FILTERS, KOCHI_HID_FILTERS } from "@openmouse/keyboard-protoc
  */
 export const BASILISK_V3_PRO_BLUETOOTH = { vendorId: 0x068e, productId: 0x00ac };
 
-/** Everything the app asks the browser (or Bridge) for. */
 export const HID_FILTERS: HIDDeviceFilter[] = [...SUPPORTED_HID_FILTERS, ...WUQUE_HID_FILTERS, ...KOCHI_HID_FILTERS, BASILISK_V3_PRO_BLUETOOTH];
diff --git a/src/device/keyboard-client.ts b/src/device/keyboard-client.ts
index a7febbbf..cc5ea4aa 100644
--- a/src/device/keyboard-client.ts
+++ b/src/device/keyboard-client.ts
@@ -1,7 +1,6 @@
 import type { KeyboardCommand, KeyboardWorkspace } from "./keyboard-workspace.ts";
 import type { KeyboardIdentityView, KeyboardPollingView, KeyboardTriggerKey, KeyboardTriggerPatch, KeyboardTriggerSettings } from "./types.ts";
 
-/** App keyboard contract: drivers expose only the settings they implement. */
 export interface KeyboardClient {
   readonly device: HIDDevice;
   readonly family: "wuque" | "kochi";
diff --git a/src/device/keyboard-workspace.ts b/src/device/keyboard-workspace.ts
index 8ff225cf..6f17fa35 100644
--- a/src/device/keyboard-workspace.ts
+++ b/src/device/keyboard-workspace.ts
@@ -16,7 +16,6 @@ export interface KeyboardWorkspace {
   higher: WuqueHigherKey | null;
   adc: WuqueAxisReading | null;
 }
-/** A blank keyboard workspace, before any board data is read. */
 export const emptyKeyboardWorkspace = (): KeyboardWorkspace => ({ global: null, lighting: null, custom: [], shell: null, layer: null, styles: [], defaults: [], macro: null, higher: null, adc: null });
 export type KeyboardCommand =
   | { kind: 'refresh' }
diff --git a/src/device/kochi-keyboard.test.ts b/src/device/kochi-keyboard.test.ts
index 9a77fa84..f23ed046 100644
--- a/src/device/kochi-keyboard.test.ts
+++ b/src/device/kochi-keyboard.test.ts
@@ -1,10 +1,9 @@
 import assert from "node:assert/strict";
 import test from "node:test";
 import { KochiKeyboardClient } from "./kochi-keyboard.ts";
-import { createKeyboardClient, createSupportedClient, listLogicalDevices } from "../device-clients.ts";
+import { createKeyboardClient, createSupportedClient, listLogicalDevices } from "./device-clients.ts";
 import { HID_FILTERS } from "./hid-filters.ts";
 
-/** A KOCHI68 fixture carrying a single collection at the given usage. */
 function device(usagePage = 0xffa0, usage = 1): HIDDevice {
   return { vendorId: 0x1ca2, productId: 0x0901, productName: "KOCHI68 Keyboard", opened: false,
     collections: [{ usagePage, usage, inputReports: [], outputReports: [], featureReports: [], children: [] }],
@@ -22,7 +21,6 @@ test("HB68 is discovered as a keyboard and only its command collection is offere
 });
 
 test("HB68 rejects unrelated workspace commands and invalid modes before USB access", async () => {
-  // This fixture has no USB methods: a command reaching hardware would fail.
   const client = new KochiKeyboardClient(device());
   await assert.rejects(client.command({ kind: "sleep", value: 30 }), /Windows\/Mac mode only/);
   await assert.rejects(client.command({ kind: "save", scope: "all" }), /Windows\/Mac mode only/);
diff --git a/src/device/kochi-keyboard.ts b/src/device/kochi-keyboard.ts
index 79a0614e..05f4b4a8 100644
--- a/src/device/kochi-keyboard.ts
+++ b/src/device/kochi-keyboard.ts
@@ -3,7 +3,6 @@ import type { KeyboardCommand, KeyboardWorkspace } from "./keyboard-workspace.ts
 import type { KeyboardClient } from "./keyboard-client.ts";
 import type { KeyboardIdentityView } from "./types.ts";
 
-/** HB68 system-mode controls only. Other commands fail before reaching USB. */
 export class KochiKeyboardClient implements KeyboardClient {
   readonly family = "kochi";
   readonly brand = "Kochi";
@@ -11,16 +10,11 @@ export class KochiKeyboardClient implements KeyboardClient {
   readonly device: HIDDevice;
   private readonly client: KochiHidClient;
 
-  /** Build the adapter over the shared HB68 HID client. */
   constructor(device: HIDDevice) { this.device = device; this.client = new KochiHidClient(device); }
-  /** True when the device exposes the HB68 command collection. */
   static isSupported(device: HIDDevice): boolean { return KochiHidClient.isSupported(device); }
-  /** Open the HID session; commands require it. */
   open(): Promise<void> { return this.client.open(); }
-  /** Close the HID session and reject any pending exchange. */
   close(): Promise<void> { return this.client.close(); }
 
-  /** Read the board identity shown in the keyboard header. */
   async readIdentity(): Promise<KeyboardIdentityView> {
     const status = await this.client.readStatus();
     return {
@@ -29,7 +23,6 @@ export class KochiKeyboardClient implements KeyboardClient {
     };
   }
 
-  /** Run a workspace command; only refresh and system mode are supported. */
   async command(command: KeyboardCommand): Promise<Partial<KeyboardWorkspace>> {
     if (command.kind === "refresh") return { systemMode: await this.client.readSystemMode() };
     if (command.kind !== "system") throw new Error("HB68 support currently covers Windows/Mac mode only.");
diff --git a/src/device/lunafury-labels.test.ts b/src/device/lunafury-labels.test.ts
index 753857db..ee499f67 100644
--- a/src/device/lunafury-labels.test.ts
+++ b/src/device/lunafury-labels.test.ts
@@ -1,6 +1,6 @@
 import assert from "node:assert/strict";
 import test from "node:test";
-import { ensureLocale } from "../i18n.ts";
+import { ensureLocale } from "../i18n/index.ts";
 import { lunafurySettingLabel, lunafurySettingPriority, lunafuryTrackingVisible } from "./lunafury-labels.ts";
 
 test("LunaFury Chinese names match the vendor's command mappings", async () => {
diff --git a/src/device/lunafury-labels.ts b/src/device/lunafury-labels.ts
index 3c75820f..a56c32d8 100644
--- a/src/device/lunafury-labels.ts
+++ b/src/device/lunafury-labels.ts
@@ -1,6 +1,6 @@
 import type { MouseStatus } from "@openmouse/protocol/drivers/mouse-types";
-import { t, type I18nKey } from "../i18n.ts";
-import type { InterfaceLocale } from "../interface-preferences.ts";
+import { t, type I18nKey } from "../i18n/index.ts";
+import type { InterfaceLocale } from "../features/settings/interface-preferences.ts";
 
 // Names verified against LunaFury's language.js and patternModule.vue.
 // Its Competitive Mode calls setHyperMode (0x0b), while Tracking Mode
diff --git a/src/device/lunafury-profile.test.ts b/src/device/lunafury-profile.test.ts
index 461fa01b..3fa937e2 100644
--- a/src/device/lunafury-profile.test.ts
+++ b/src/device/lunafury-profile.test.ts
@@ -1,7 +1,7 @@
 import assert from "node:assert/strict";
 import test from "node:test";
 import type { LunaFurySettings } from "@openmouse/protocol/lamzu";
-import { clearPendingChanges, pendingChangeBatches, stagePendingChange } from "../pending-changes.ts";
+import { clearPendingChanges, pendingChangeBatches, stagePendingChange } from "./pending-changes.ts";
 import { pickSnapshot } from "./game-profile-snapshot.ts";
 import type { MouseStatus } from "@openmouse/protocol/drivers/mouse-types";
 import { lunaFuryLightningPriority, sanitizeLunaFurySettings, stageLunaFuryProfile, type LunaFuryProfileActions } from "./lunafury-profile.ts";
diff --git a/src/device/lunafury-profile.ts b/src/device/lunafury-profile.ts
index a0658ef7..d803016e 100644
--- a/src/device/lunafury-profile.ts
+++ b/src/device/lunafury-profile.ts
@@ -13,7 +13,6 @@ function integer(value: unknown, min: number, max: number): value is number {
   return typeof value === "number" && Number.isInteger(value) && value >= min && value <= max;
 }
 
-/** Imported profiles must not introduce unknown commands or invalid values. */
 export function sanitizeLunaFurySettings(raw: unknown): LunaFurySettings {
   if (!raw || typeof raw !== "object" || Array.isArray(raw)) return {};
   const value = raw as Record<string, unknown>;
@@ -43,7 +42,6 @@ export function diffLunaFurySettings(before: LunaFurySettings | undefined, after
   return sanitizeLunaFurySettings(diff);
 }
 
-/** Capture only the available controls this profile will actually write. */
 export function pickLunaFurySettings(current: LunaFurySettings | undefined, target: unknown): LunaFurySettings {
   const picked: Record<string, unknown> = {};
   for (const field of Object.keys(sanitizeLunaFurySettings(target))) {
@@ -63,7 +61,6 @@ export function lunaFuryLightningPriority(mode: LunaFuryLightningMode): number {
   return mode === 0 ? -10 : 10;
 }
 
-/** Use the ordinary staged setters for both applying and restoring profiles. */
 export function stageLunaFuryProfile(raw: unknown, current: LunaFurySettings | undefined, actions: LunaFuryProfileActions): void {
   if (!current) return;
   const target = sanitizeLunaFurySettings(raw);
diff --git a/src/device/m2nex-profiles.ts b/src/device/m2nex-profiles.ts
index 0a2e466c..d52f31b3 100644
--- a/src/device/m2nex-profiles.ts
+++ b/src/device/m2nex-profiles.ts
@@ -7,14 +7,12 @@ export const M2NEX_PROFILE_STORAGE_KEY = "openmouse.m2-nex.profiles.v1";
 /** S1's official configurator exposes six local profile slots. */
 export const NOIR_S1_PROFILE_COUNT = 6;
 export const NOIR_S1_PROFILE_STORAGE_KEY = "openmouse.noir-s1.profiles.v1";
-/** E1 keeps its six configurator slots separate from M2-NEX local data. */
 export const NOIR_E1_PROFILE_COUNT = 6;
 export const NOIR_E1_PROFILE_STORAGE_KEY = "openmouse.noir-e1.profiles.v1";
 
 export interface M2NexProfile {
   id: number;
   name: string;
-  /** The complete DPI stage table, not only the currently active value. */
   dpiStages: number[];
   activeDpiStage: number;
   pollingRateHz: number;
diff --git a/src/device/options.test.ts b/src/device/options.test.ts
index 71360954..38c40253 100644
--- a/src/device/options.test.ts
+++ b/src/device/options.test.ts
@@ -25,7 +25,6 @@ test("CPI snaps to the step of the range the value sits in", () => {
   assert.equal(snapCpiToDevice(10_010, v2), 10_000);
   assert.equal(snapCpiToDevice(10_030, v2), 10_050);
   assert.equal(snapCpiToDevice(10_060, v2), 10_050);
-  // Off-range values clamp before they snap.
   assert.equal(snapCpiToDevice(0, v2), 10);
   assert.equal(snapCpiToDevice(30_040, v2), 30_000);
 });
diff --git a/src/device/options.ts b/src/device/options.ts
index fe624c52..434c6c3e 100644
--- a/src/device/options.ts
+++ b/src/device/options.ts
@@ -1,5 +1,5 @@
-import { t, tp, type I18nKey } from "../i18n.ts";
-import type { InterfaceLocale } from "../interface-preferences.ts";
+import { t, tp, type I18nKey } from "../i18n/index.ts";
+import type { InterfaceLocale } from "../features/settings/interface-preferences.ts";
 export function sleepLabel(seconds: number, locale: InterfaceLocale = "en"): string {
   const unit = (n: number, one: I18nKey, many: I18nKey): string =>
     n === 1 ? t(locale, one) : tp(locale, many, { n });
@@ -53,7 +53,6 @@ export function valuesWithCurrent(offered: number[], current: number | null | un
   return [...offered, current].sort((left, right) => left - right);
 }
 
-/** The CPI range an Egg mouse reports, with a step for each end of it. */
 export interface CpiLimits {
   min: number;
   max: number;
diff --git a/src/pending-changes.test.ts b/src/device/pending-changes.test.ts
similarity index 100%
rename from src/pending-changes.test.ts
rename to src/device/pending-changes.test.ts
diff --git a/src/pending-changes.ts b/src/device/pending-changes.ts
similarity index 88%
rename from src/pending-changes.ts
rename to src/device/pending-changes.ts
index d7e71d82..e8109b39 100644
--- a/src/pending-changes.ts
+++ b/src/device/pending-changes.ts
@@ -9,11 +9,8 @@ export interface PendingChange {
   // Without this, two changes to one byte cost two writes and the second is
   // built from a device read the first has already invalidated.
   group?: string;
-  // Short summary shown in the unsaved-changes bar, e.g. "DPI 1,600".
   label: string;
-  // Diagnostics command text recorded when the change is flashed.
   command: string;
-  // Live-status copy shown while this change is being written.
   progress: string;
   // Lower priorities flash first when one setting must establish storage used by another.
   priority?: number;
@@ -22,7 +19,6 @@ export interface PendingChange {
   // profile value, say); such a change renders itself and cannot be compared
   // against the device status.
   preview?(status: MouseStatus): void;
-  // Writes the staged value to the device.
   apply(): Promise<void>;
 }
 
@@ -112,18 +108,12 @@ export function withPendingChanges(status: MouseStatus): MouseStatus {
   return preview;
 }
 
-/**
- * Takes every staged change out of the store, in staging order, so a
- * different set can be staged in their place and the originals put back
- * later with `restorePendingChanges`.
- */
 export function stashPendingChanges(): PendingChange[] {
   const stashed = [...changes.values()];
   clearPendingChanges();
   return stashed;
 }
 
-/** Replaces whatever is staged with `stashed`, in its original order. */
 export function restorePendingChanges(stashed: PendingChange[]): void {
   changes.clear();
   for (const change of stashed) changes.set(change.key, change);
diff --git a/src/preview-fixtures.test.ts b/src/device/preview/preview-fixtures.test.ts
similarity index 94%
rename from src/preview-fixtures.test.ts
rename to src/device/preview/preview-fixtures.test.ts
index 136caaee..331e4b99 100644
--- a/src/preview-fixtures.test.ts
+++ b/src/device/preview/preview-fixtures.test.ts
@@ -2,9 +2,9 @@ import assert from "node:assert/strict";
 import test from "node:test";
 import { PREVIEW_FIXTURES } from "./preview-fixtures.ts";
 import type { FixturePreviewMode } from "./preview-modes.ts";
-import { familyOf, traitsFor } from "./device/traits.ts";
-import { cardAvailability } from "./app/cards/availability.ts";
-import type { ControlSnapshot } from "./device/types.ts";
+import { familyOf, traitsFor } from "../traits.ts";
+import { cardAvailability } from "../../features/devices/cards/availability.ts";
+import type { ControlSnapshot } from "../types.ts";
 
 function snapshotFor(key: FixturePreviewMode): ControlSnapshot {
   const status = PREVIEW_FIXTURES[key].status;
@@ -22,7 +22,6 @@ test("atk-f1 fixture matches the F1 Ultimate 2.0 driver shape", () => {
   assert.equal(status.pollingRateHz, 1000);
   assert.deepEqual(status.supportedPollingRates, [125, 250, 500, 1000, 2000, 4000, 8000]);
   assert.equal(status.dpi, 1600);
-  // F1-only fields that gate the modernized widgets.
   assert.equal(status.atkSensorMode, 1);
   assert.equal(status.debounceMs, 1);
   assert.equal(status.angleTuning, 0);
@@ -82,9 +81,7 @@ test("the EGG fixtures light up every advanced card they have controls for", ()
     assert.equal(has.eggCpi, true, key);
     assert.equal(has.eggButtons, true, key);
     assert.equal(has.eggHanded, true, key);
-    // Only the v2 mouse has the v2 sensor block.
     assert.equal(has.eggV2Sensor, key === "egg-op1-v2", key);
-    // Signal and sleep are not part of this driver.
     assert.equal(has.signal, false, key);
     assert.equal(has.sleep, false, key);
   }
diff --git a/src/preview-fixtures.ts b/src/device/preview/preview-fixtures.ts
similarity index 98%
rename from src/preview-fixtures.ts
rename to src/device/preview/preview-fixtures.ts
index 0f2f4321..b0d74d87 100644
--- a/src/preview-fixtures.ts
+++ b/src/device/preview/preview-fixtures.ts
@@ -15,7 +15,6 @@ export { PREVIEW_KEYS };
  * when a driver changes what it reports its fixture should change with it.
  */
 export interface PreviewFixture {
-  /** Shown in the picker and the live-status line. */
   label: string;
   status: MouseStatus;
 }
@@ -345,8 +344,6 @@ const ATTACKSHARK: MouseStatus = {
 };
 
 const M3K: MouseStatus = {
-  // The Zaunkoenig driver is being prepared in mouse-protocol. This assertion
-  // can disappear when the website refreshes to that package revision.
   brand: "Zaunkoenig" as MouseStatus["brand"],
   name: "Zaunkoenig M3K",
   ui: {
@@ -415,13 +412,10 @@ const ATK_F1: MouseStatus = {
   motionSync: true,
   angleSnapping: false,
   rippleControl: false,
-  // Reported by the angle register (centered); gates the Sensor rotation row.
   angleTuning: 0,
   debounceMs: 1,
   sleepTimeout: 1800,
   atkSensorMode: 1,
-  // Live hardware was reverted to OFF (0) after validation; 100 keeps the
-  // anti-mistouch slider in its enabled state for widget review.
   atkAntiMistouchMs: 100,
   // Write-only on hardware (mirrors last write); 2 = Battery Gradient, the live baseline.
   atkDongleLight: 2,
@@ -491,7 +485,6 @@ const RAZER: MouseStatus = {
   firmware: ["1.01.00"],
 };
 
-/** Wireless Viper V2 Pro: Focus Pro 30K, stock receiver (1 kHz), asymmetric LOD. */
 const RAZER_VIPER_V2: MouseStatus = {
   brand: "Razer",
   name: "Viper V2 Pro",
diff --git a/src/preview-modes.test.ts b/src/device/preview/preview-modes.test.ts
similarity index 100%
rename from src/preview-modes.test.ts
rename to src/device/preview/preview-modes.test.ts
diff --git a/src/preview-modes.ts b/src/device/preview/preview-modes.ts
similarity index 95%
rename from src/preview-modes.ts
rename to src/device/preview/preview-modes.ts
index a46dfc94..fe185d70 100644
--- a/src/preview-modes.ts
+++ b/src/device/preview/preview-modes.ts
@@ -48,8 +48,6 @@ export const PREVIEW_KEYS = [
 export type PreviewMode = typeof PREVIEW_KEYS[number];
 export type FixturePreviewMode = Exclude<PreviewMode, "list" | "slots" | "superstrike">;
 
-/** Preview fixtures are available locally and on the deployed insiders app,
-    but never on a stable production build. */
 export function previewsEnabled(buildChannel: string, viteDev: boolean): boolean {
   return viteDev || buildChannel === "insiders";
 }
diff --git a/src/device/profile-key.ts b/src/device/profile-key.ts
index 10b7a636..d8f48fce 100644
--- a/src/device/profile-key.ts
+++ b/src/device/profile-key.ts
@@ -25,7 +25,6 @@ export interface ProfileKeyLighting {
 
 export interface ProfileKeyPayload {
   v: typeof KEY_VERSION;
-  /** Identifies the exact model this key was captured from. */
   brand: MouseStatus["brand"];
   name: string;
   dpi?: number;
diff --git a/src/device/traits.ts b/src/device/traits.ts
index 8713f605..15052eea 100644
--- a/src/device/traits.ts
+++ b/src/device/traits.ts
@@ -95,9 +95,6 @@ const BY_FAMILY: Readonly<Record<string, Partial<DriverTraits>>> = {
   // The G-Wolves XVI generation (HTX Mini 8K) publishes its own sleep list
   // and reads its before-press debounce; no signal-strength command exists.
   "gwolves-xvi": { advancedSection: true, sleep: true, debounce: true },
-  // HyperX publishes DPI, polling rate and lift-off in the settings grid only;
-  // no signal, sleep or debounce card exists, and the processing card is
-  // deliberately hidden, so no advanced-section flags are needed.
   hyperx: {},
   "cooler master": { advancedSection: true, debounce: true },
   "coolermaster-mm711": { advancedSection: true, debounce: true },
diff --git a/src/device/types.ts b/src/device/types.ts
index 3fab777d..778ad4ac 100644
--- a/src/device/types.ts
+++ b/src/device/types.ts
@@ -6,8 +6,8 @@ import type { KeychronNapeLayerKeymap } from "@openmouse/protocol/keychron";
 import type { LogitechReprogrammableControl } from "@openmouse/protocol/logitech";
 import type { WallhackCurvePoint, WallhackMacroStep } from "@openmouse/protocol/wallhack";
 import type { DpiStageCapabilities, DpiStagePlan, OnboardProfile } from "@openmouse/protocol/drivers/logitech/onboard-profiles";
-import type { InterfacePreferences } from "../interface-preferences";
-import type { PreviewMode } from "../preview-modes";
+import type { InterfacePreferences } from "../features/settings/interface-preferences";
+import type { PreviewMode } from "./preview/preview-modes";
 import type { DriverTraits } from "./traits";
 import type { M2NexProfile } from "./m2nex-profiles";
 
@@ -49,11 +49,8 @@ export interface TeevolutionProfile {
 export interface DeviceCapabilities {
   canDisableSleep: boolean;
   angleTuningWritable: boolean;
-  /** Whether the connected driver can write DPI stage table values, or reports the table read-only. */
   dpiStagesWritable: boolean;
-  /** Whether the connected driver can select which DPI stage is active. */
   activeDpiStageWritable: boolean;
-  /** Whether the connected driver can write one stage's X and Y independently. */
   dpiStageAxesWritable: boolean;
   sleepOptions: number[] | null;
   debounceMaxMs: number | null;
@@ -72,8 +69,6 @@ export interface SidebarDevice {
   vendorId: number;
   productId: number;
   kind: "mouse" | "keyboard";
-  /** "bridge" when this device was opened through OpenMouse Bridge's native
-   *  HID socket rather than the browser's own WebHID (see bridge-hid.ts). */
   transport: "bridge" | "webhid";
 }
 
@@ -107,7 +102,6 @@ export interface AnalogTuning {
   actuation: number;
   rapidTrigger: number;
   haptics: number;
-  /** Rapid trigger on/off. Undefined when the mouse does not report it. */
   rapidTriggerEnabled?: boolean;
 }
 
@@ -183,13 +177,10 @@ export interface KeyboardIdentityView {
 }
 
 export interface KeyboardPollingView {
-  /** Rate the board reports it is running now, or null when it stays silent. */
   currentHz: number | null;
-  /** Rates the board advertises, ascending. */
   supportedHz: number[];
 }
 
-/** Editable per-key analog trigger values, all in millimetres. */
 export interface KeyboardTriggerSettings {
   travelMm: number;
   rtFirstTouchMm: number;
@@ -204,7 +195,6 @@ export interface KeyboardTriggerKey extends KeyboardTriggerSettings {
   row: number;
   col: number;
   keycode: number;
-  /** Vendor keycode category, when the codec recognises the code. */
   keycodeName: string | null;
 }
 
@@ -228,7 +218,6 @@ export interface KeyboardTriggerView {
   keys: readonly KeyboardTriggerKey[];
   /** Anchor key the trigger controls display, or null when nothing is selected. */
   selected: KeyboardKeyRef | null;
-  /** Every key a trigger change applies to. */
   selectedKeys: readonly KeyboardKeyRef[];
   busy: boolean;
   statusText: string | null;
@@ -287,7 +276,6 @@ export interface ControlSnapshot {
   sidebarHidden: boolean;
   interfaceSettingsOpen: boolean;
   workspaceTab: WorkspaceTab;
-  /** "list" shows the welcome/cross-device picker, "device" shows the opened dashboard. */
   deviceView: "list" | "device";
 
   dpiOptions: number[];
@@ -311,7 +299,6 @@ export interface ControlSnapshot {
   stagedBunnyHopMs: number | null;
   stagedProfileRates: { wireless: number | null; wired: number | null };
   stagedProfileName: string | null;
-  /** Control id → staged remap target, for controls with an unflashed remap. */
   stagedButtonMappings: Record<number, number>;
   /** M2-NEX/K-snake onboard macro slots, prepared locally for a full-table write. */
   ksnakeMacros: KsnakeMacroProfile[] | null;
@@ -326,21 +313,16 @@ export interface ControlSnapshot {
   wallhackMacros: (WallhackMacroStep[] | null)[] | null;
   wallhackMacrosLoading: boolean;
   wallhackMacrosError: string | null;
-  /** WALLHACK M-001 DPI-acceleration curve tables, read on demand. */
   wallhackCurves: Record<"classic" | "natural" | "jump" | "custom", WallhackCurvePoint[]> | null;
   wallhackCurvesLoading: boolean;
   wallhackCurvesError: string | null;
-  /** Local profile slots matching the M2-NEX vendor configurator. */
   m2nexProfiles: M2NexProfile[] | null;
   activeM2NexProfile: number;
-  /** True when the selected local profile differs from the device. */
   m2nexProfileDirty: boolean;
   stagedProfileButtonAssignments: StagedProfileButtonAssignment[];
-  /** Nape Pro VIA keymap for the layer currently open in the Buttons tab. */
   napeKeymap: KeychronNapeLayerKeymap | null;
   /** Unflashed Nape Pro button and wheel remaps, including other layers. */
   stagedNapeAssignments: StagedNapeAssignment[];
-  /** Nape Pro layer currently open in the Profiles tab, or null when unread. */
   editedNapeLayer: number | null;
   analogTuning: AnalogTuningState;
   magneticCalibration: MagneticCalibrationView;
@@ -353,7 +335,6 @@ export interface ControlSnapshot {
   diagnosticsOpen: boolean;
   captureAvailable: boolean;
   resetProfilesAvailable: boolean;
-  /** A Logitech mouse with no stored profiles that OpenMouse can set up itself. */
   setupProfilesAvailable: boolean;
 
   previewMode: PreviewMode | null;
diff --git a/src/device/wuque-keyboard.ts b/src/device/wuque-keyboard.ts
index b42a3ce0..60ed6558 100644
--- a/src/device/wuque-keyboard.ts
+++ b/src/device/wuque-keyboard.ts
@@ -21,7 +21,6 @@ import type {
 } from "./types.ts";
 type ReportRateKey = keyof typeof WUQUE_REPORT_RATE;
 
-/** Board rate enums mapped to the polling rates the panel shows, ascending. */
 const REPORT_RATE_HZ: Readonly<Record<ReportRateKey, number>> = {
   r8khz: 8000,
   r4khz: 4000,
@@ -81,8 +80,6 @@ function triggerKey(
     row,
     col,
     keycode,
-    // Short button label from the vendor's own keycode name table; null when
-    // the board reports a code the vendor names nowhere (e.g. 0xF20A).
     keycodeName: wuqueMatrixKeyLabel(keycode) ?? `0x${keycode.toString(16).padStart(4, "0")}`,
     performance: block,
     ...settingsFromBlock(block),
diff --git a/src/features/bridge/BridgeStatus.tsx b/src/features/bridge/BridgeStatus.tsx
new file mode 100644
index 00000000..c1ddf8b3
--- /dev/null
+++ b/src/features/bridge/BridgeStatus.tsx
@@ -0,0 +1,130 @@
+import { Download, ExternalLink, X } from "lucide-react";
+import { useEffect, useLayoutEffect, useRef, useState, type CSSProperties, type ReactNode } from "react";
+import { subscribeBridgeStatus } from "./bridge-status-store";
+import type { BridgeStatus } from "./bridge";
+import { displayText, t } from "../../i18n/index";
+import type { InterfaceLocale } from "../settings/interface-preferences";
+import { latestRelease } from "./updates";
+import { useBridgeActive } from "../games/GamesPage";
+
+export const BRIDGE_REPOSITORY = "OpenMouse-Project/OpenMouse-Bridge";
+export const BRIDGE_RELEASES_URL = `https://github.com/${BRIDGE_REPOSITORY}/releases/latest`;
+
+function useBridgeStatus(active: boolean): BridgeStatus | null {
+  const [status, setStatus] = useState<BridgeStatus | null>(null);
+  useEffect(() => (active ? subscribeBridgeStatus(setStatus) : (setStatus(null), undefined)), [active]);
+  return status;
+}
+
+function useLatestBridge(enabled: boolean): string | null | undefined {
+  const [latest, setLatest] = useState<string | null | undefined>(undefined);
+  useEffect(() => {
+    if (!enabled || latest !== undefined) return;
+    const controller = new AbortController();
+    latestRelease(BRIDGE_REPOSITORY, controller.signal)
+      .then((release) => setLatest(release?.version ?? null))
+      .catch(() => setLatest(null));
+    return () => controller.abort();
+  }, [enabled]);
+  return latest;
+}
+
+export function BridgeStatusButton({ locale, collapsed }: { locale: InterfaceLocale; collapsed: boolean }): ReactNode {
+  const active = useBridgeActive();
+  const status = useBridgeStatus(active);
+  const [open, setOpen] = useState(false);
+  const latest = useLatestBridge(open);
+  const root = useRef<HTMLDivElement>(null);
+  const trigger = useRef<HTMLButtonElement>(null);
+  const [place, setPlace] = useState<CSSProperties>({});
+
+  useLayoutEffect(() => {
+    if (!open || !trigger.current) return;
+    const measure = (): void => {
+      const rect = trigger.current!.getBoundingClientRect();
+      const rtl = getComputedStyle(trigger.current!).direction === "rtl";
+      const bottom = collapsed ? window.innerHeight - rect.bottom : window.innerHeight - rect.top + 8;
+      const edge = collapsed
+        ? (rtl ? window.innerWidth - rect.left + 12 : rect.right + 12)
+        : (rtl ? window.innerWidth - rect.right : rect.left);
+      setPlace(rtl ? { bottom, right: edge } : { bottom, left: edge });
+    };
+    measure();
+    window.addEventListener("resize", measure);
+    return () => window.removeEventListener("resize", measure);
+  }, [open, collapsed]);
+
+  useEffect(() => {
+    if (!open) return;
+    const key = (event: KeyboardEvent): void => {
+      if (event.key === "Escape") {
+        setOpen(false);
+        trigger.current?.focus();
+      }
+    };
+    const away = (event: MouseEvent): void => {
+      if (root.current && !root.current.contains(event.target as Node)) setOpen(false);
+    };
+    document.addEventListener("keydown", key);
+    document.addEventListener("mousedown", away);
+    return () => {
+      document.removeEventListener("keydown", key);
+      document.removeEventListener("mousedown", away);
+    };
+  }, [open]);
+
+  const label = t(locale, active ? "bridge.statusOn" : "bridge.statusOff");
+  const outdated = Boolean(status?.version && latest && status.version !== latest);
+
+  return (
+    <div className="om-bridge" ref={root}>
+      <button
+        ref={trigger}
+        type="button"
+        className={`om-bridge-line${active ? " is-on" : ""}${open ? " is-open" : ""}`}
+        aria-expanded={open}
+        aria-haspopup="dialog"
+        title={collapsed ? label : undefined}
+        onClick={() => setOpen((value) => !value)}
+      >
+        <span className={`om-dot${active ? " is-ok" : ""}`} aria-hidden="true" />
+        <span className="om-bridge-line-text">{label}</span>
+        {outdated ? <span className="om-bridge-line-flag">{t(locale, "bridge.update")}</span> : null}
+      </button>
+      {open ? (
+        <div className="om-bridge-pop" role="dialog" aria-labelledby="om-bridge-pop-title" style={place}>
+          <header className="om-bridge-pop-head">
+            <span className={`om-dot${active ? " is-ok" : ""}`} aria-hidden="true" />
+            <h2 id="om-bridge-pop-title">{t(locale, "bridge.title")}</h2>
+            <button type="button" className="om-icon-btn" aria-label={t(locale, "common.close")} onClick={() => setOpen(false)}>
+              <X strokeWidth={2} aria-hidden="true" />
+            </button>
+          </header>
+          <p className="om-bridge-pop-body">{t(locale, active ? "bridge.bodyOn" : "bridge.body")}</p>
+          <ul className="om-kv om-bridge-pop-facts">
+            <li>
+              <span>{t(locale, "bridge.statusLabel")}</span>
+              <span>{t(locale, active ? "bridge.running" : "bridge.notRunning")}</span>
+            </li>
+            {status?.version ? (
+              <li>
+                <span>{t(locale, "set.version")}</span>
+                <span><bdi>{displayText(locale, status.version)}</bdi></span>
+              </li>
+            ) : null}
+            <li>
+              <span>{t(locale, "bridge.latest")}</span>
+              <span><bdi>{latest === undefined ? "…" : latest ?? "–"}</bdi></span>
+            </li>
+          </ul>
+          <footer className="om-bridge-pop-foot">
+            <a className={`om-btn${active && !outdated ? "" : " is-primary"}`} href={BRIDGE_RELEASES_URL} target="_blank" rel="noreferrer">
+              {active && !outdated ? <ExternalLink strokeWidth={1.9} aria-hidden="true" /> : <Download strokeWidth={1.9} aria-hidden="true" />}
+              {t(locale, active && !outdated ? "bridge.releaseNotes" : outdated ? "bridge.update" : "bridge.download")}
+            </a>
+          </footer>
+        </div>
+      ) : null}
+    </div>
+  );
+}
diff --git a/src/bridge-hid.test.ts b/src/features/bridge/bridge-hid.test.ts
similarity index 100%
rename from src/bridge-hid.test.ts
rename to src/features/bridge/bridge-hid.test.ts
diff --git a/src/bridge-hid.ts b/src/features/bridge/bridge-hid.ts
similarity index 99%
rename from src/bridge-hid.ts
rename to src/features/bridge/bridge-hid.ts
index 444e47e6..d3452156 100644
--- a/src/bridge-hid.ts
+++ b/src/features/bridge/bridge-hid.ts
@@ -18,12 +18,11 @@
 // socket. Safari does not, and blocks it as mixed content — Safari needs
 // Bridge to serve the app itself over loopback, which is a separate change.
 
-import { HID_FILTERS } from "./device/hid-filters.ts";
-import { describeHidDevice, markHidActivity } from "./hid-diagnostics.ts";
+import { HID_FILTERS } from "../../device/hid-filters.ts";
+import { describeHidDevice, markHidActivity } from "../../device/hid-diagnostics.ts";
 
 
 const BRIDGE_SOCKET_URL = "ws://127.0.0.1:17846/v1/hid";
-/** Bridge is either running on this machine or it is not; do not sit waiting. */
 const CONNECT_TIMEOUT_MS = 1_500;
 /** Generous: a native open walks every interface of the device. */
 const REQUEST_TIMEOUT_MS = 10_000;
diff --git a/src/bridge-status-store.ts b/src/features/bridge/bridge-status-store.ts
similarity index 95%
rename from src/bridge-status-store.ts
rename to src/features/bridge/bridge-status-store.ts
index 13723182..3e77ae55 100644
--- a/src/bridge-status-store.ts
+++ b/src/features/bridge/bridge-status-store.ts
@@ -49,7 +49,6 @@ function stopPolling(): void {
   notify();
 }
 
-/** Returns an unsubscribe function. Immediately calls `listener` with the current status (or null). */
 export function subscribeBridgeStatus(listener: Listener): () => void {
   listeners.add(listener);
   listener(current);
diff --git a/src/bridge.test.ts b/src/features/bridge/bridge.test.ts
similarity index 100%
rename from src/bridge.test.ts
rename to src/features/bridge/bridge.test.ts
diff --git a/src/bridge.ts b/src/features/bridge/bridge.ts
similarity index 98%
rename from src/bridge.ts
rename to src/features/bridge/bridge.ts
index f5c0f021..f6e45b4b 100644
--- a/src/bridge.ts
+++ b/src/features/bridge/bridge.ts
@@ -1,4 +1,4 @@
-import type { GameProfileSnapshot } from "./device/game-profile-snapshot";
+import type { GameProfileSnapshot } from "../../device/game-profile-snapshot";
 
 const BRIDGE_URL = "http://127.0.0.1:17846";
 const BRIDGE_TIMEOUT_MS = 1_500;
diff --git a/src/updates.test.ts b/src/features/bridge/updates.test.ts
similarity index 100%
rename from src/updates.test.ts
rename to src/features/bridge/updates.test.ts
diff --git a/src/updates.ts b/src/features/bridge/updates.ts
similarity index 100%
rename from src/updates.ts
rename to src/features/bridge/updates.ts
diff --git a/src/app/useBridgeBatteryReporter.ts b/src/features/bridge/useBridgeBatteryReporter.ts
similarity index 92%
rename from src/app/useBridgeBatteryReporter.ts
rename to src/features/bridge/useBridgeBatteryReporter.ts
index 01a763c7..666638cd 100644
--- a/src/app/useBridgeBatteryReporter.ts
+++ b/src/features/bridge/useBridgeBatteryReporter.ts
@@ -8,9 +8,9 @@
 // GameProfilePanel's deviceId), which is the id Bridge's own reads record
 // under, so both sources update the same entry.
 import { useEffect, useRef } from "react";
-import { saveBridgeBattery, type BridgeBatteryReading } from "../bridge";
-import { subscribeBridgeHidActive } from "../bridge-hid";
-import type { ControlSnapshot } from "../device/types";
+import { saveBridgeBattery, type BridgeBatteryReading } from "./bridge";
+import { subscribeBridgeHidActive } from "./bridge-hid";
+import type { ControlSnapshot } from "../../device/types";
 
 /** Resend an unchanged reading well inside Bridge's 12-minute staleness window. */
 const REFRESH_INTERVAL_MS = 5 * 60_000;
diff --git a/src/app/useBridgeProfileApplier.ts b/src/features/bridge/useBridgeProfileApplier.ts
similarity index 91%
rename from src/app/useBridgeProfileApplier.ts
rename to src/features/bridge/useBridgeProfileApplier.ts
index 77e714c0..729fc499 100644
--- a/src/app/useBridgeProfileApplier.ts
+++ b/src/features/bridge/useBridgeProfileApplier.ts
@@ -17,19 +17,18 @@
 // back to null, this restores whatever the mouse was actually using right
 // before the profile was applied, captured field by field the moment it was.
 import { useEffect, useRef } from "react";
-import * as control from "../device/controller";
-import type { BridgeProfile } from "../bridge";
-import { subscribeBridgeStatus } from "../bridge-status-store";
+import * as control from "../../device/controller";
+import type { BridgeProfile } from "./bridge";
+import { subscribeBridgeStatus } from "./bridge-status-store";
 import {
   mergeSnapshots,
   pickSnapshot,
   sanitizeSnapshot,
   type GameProfileSnapshot,
-} from "../device/game-profile-snapshot";
-import { t } from "../i18n";
-import type { ControlSnapshot } from "../device/types";
+} from "../../device/game-profile-snapshot";
+import { t } from "../../i18n/index";
+import type { ControlSnapshot } from "../../device/types";
 
-/** Everything the profile sets: its snapshot, plus the DPI/polling fields Bridge also keeps separately. */
 export function profileTarget(profile: BridgeProfile): GameProfileSnapshot {
   const target: GameProfileSnapshot = { ...sanitizeSnapshot(profile.settings.snapshot) };
   if (profile.settings.dpi != null && target.dpi === undefined) target.dpi = profile.settings.dpi;
diff --git a/src/app/ButtonMap.tsx b/src/features/buttons/ButtonMap.tsx
similarity index 90%
rename from src/app/ButtonMap.tsx
rename to src/features/buttons/ButtonMap.tsx
index 6cb96dff..13b5f2d1 100644
--- a/src/app/ButtonMap.tsx
+++ b/src/features/buttons/ButtonMap.tsx
@@ -1,15 +1,15 @@
-import { displayText } from "../i18n";
-import { matchesCommandQuery } from "../ui/command-search";
-import { useUiLocale } from "./ui-locale";
+import { displayText } from "../../i18n/index";
+import { matchesCommandQuery } from "./command-search";
+import { useUiLocale } from "../../shared/ui-locale";
 import { useEffect, useState, type CSSProperties, type ReactNode } from "react";
-import * as control from "../device/controller";
+import * as control from "../../device/controller";
 import type { LogitechButtonAction } from "@openmouse/protocol/drivers/logitech/onboard-profiles";
-import type { ControlSnapshot } from "../device/types";
-import { buttonMapLayoutFor, type ButtonSpot } from "../logitech-button-map";
-import { COMMAND_SECTIONS, bindingFromKeyEvent, conflictHints, describeAssignment, isAssigned, shortcutText, type CommandEntry } from "../logitech-commands";
-import { connectionText } from "../i18n";
+import type { ControlSnapshot } from "../../device/types";
+import { buttonMapLayoutFor, type ButtonSpot } from "./logitech-button-map";
+import { COMMAND_SECTIONS, bindingFromKeyEvent, conflictHints, describeAssignment, isAssigned, shortcutText, type CommandEntry } from "./logitech-commands";
+import { connectionText } from "../../i18n/index";
 import { SetupCodeDialog } from "./SetupCodeDialog";
-import { BatteryIcon } from "./ui";
+import { BatteryIcon } from "../../shared/ui";
 
 type Layer = "primary" | "g-shift";
 
@@ -51,7 +51,6 @@ function onHostProfile(snapshot: ControlSnapshot): boolean {
     && (snapshot.onboardProfiles?.length ?? 0) > 0;
 }
 
-/** True when this mouse has a known button layout and a profile whose buttons can be written, or the Host profile is open on one that does. */
 export function buttonMapAvailable(snapshot: ControlSnapshot): boolean {
   return stableSnapshot(snapshot) !== null || onHostProfile(snapshot);
 }
@@ -74,20 +73,13 @@ function HostProfileNotice({ snapshot }: { snapshot: ControlSnapshot }): ReactNo
   );
 }
 
-/**
- * Button assignments as a picture: the mouse with a callout per button. Pick a
- * button, then a command; the change goes through the same staged write as the
- * Profiles tab, so instant flash and the Flash bar behave the same.
- */
 export function ButtonMap({ snapshot: live }: { snapshot: ControlSnapshot }): ReactNode {
   const __uiLocale = useUiLocale();
   const snapshot = stableSnapshot(live) ?? live;
   const [layer, setLayer] = useState<Layer>("primary");
   const [selected, setSelected] = useState<number | null>(null);
   const [query, setQuery] = useState("");
-  // What the user picked for a staged button, so the callout can say it before the flash.
   const [pending, setPending] = useState<Record<string, string>>({});
-  // While recording, the next key or shortcut pressed is assigned to the selected button.
   const [recording, setRecording] = useState(false);
   const [sharing, setSharing] = useState(false);
 
@@ -96,7 +88,6 @@ export function ButtonMap({ snapshot: live }: { snapshot: ControlSnapshot }): Re
     if (!recording || !recordable || selected === null) return;
     const onKey = (event: KeyboardEvent): void => {
       event.preventDefault();
-      // A bare Escape cancels; Ctrl+Esc and the like are still recordable.
       if (event.code === "Escape" && !event.ctrlKey && !event.shiftKey && !event.altKey && !event.metaKey) {
         setRecording(false);
         return;
@@ -177,7 +168,7 @@ export function ButtonMap({ snapshot: live }: { snapshot: ControlSnapshot }): Re
               </span>
             ) : null}
           </div>
-          <button type="button" className="icon-button button-map-share" onClick={() => setSharing(true)}>{displayText(__uiLocale, "Share setup")}</button>
+          <button type="button" className="om-btn button-map-share" onClick={() => setSharing(true)}>{displayText(__uiLocale, "Share setup")}</button>
         </div>
         <SetupCodeDialog open={sharing} snapshot={snapshot} onClose={() => setSharing(false)} />
         <div className="button-map-body">
@@ -241,8 +232,8 @@ export function ButtonMap({ snapshot: live }: { snapshot: ControlSnapshot }): Re
                     className="button-map-dot"
                     aria-label={displayText(__uiLocale, `Select ${spot.label}`)}
                     onClick={() => setSelected(spot.button)}
-                  />
-                  <button type="button" className="button-map-label" onClick={() => setSelected(spot.button)}>
+                  >{spot.button + 1}</button>
+                  <button type="button" className="button-map-label" data-button-number={spot.button + 1} onClick={() => setSelected(spot.button)}>
                     <strong>{displayText(__uiLocale, spot.label)}</strong>
                     <span>{displayText(__uiLocale, textFor(spot))}</span>
                   </button>
@@ -252,7 +243,7 @@ export function ButtonMap({ snapshot: live }: { snapshot: ControlSnapshot }): Re
             {hints.length ? <ul className="button-map-hints" role="status">{hints.map((hint) => <li key={hint}>{displayText(__uiLocale, hint)}</li>)}</ul> : null}
             <div className="button-map-layers" role="tablist" aria-label={displayText(__uiLocale, "Button layer")}>
               <button type="button" role="tab" aria-selected={layer === "primary"} onClick={() => setLayer("primary")}>{displayText(__uiLocale, "Standard")}</button>
-              <button type="button" role="tab" aria-selected={layer === "g-shift"} onClick={() => setLayer("g-shift")}>G-Shift</button>
+              <button type="button" role="tab" aria-selected={layer === "g-shift"} onClick={() => setLayer("g-shift")}>{"G-Shift"}</button>
             </div>
           </div>
         </div>
diff --git a/src/app/SetupCodeDialog.tsx b/src/features/buttons/SetupCodeDialog.tsx
similarity index 90%
rename from src/app/SetupCodeDialog.tsx
rename to src/features/buttons/SetupCodeDialog.tsx
index 2fa064ac..51d8101e 100644
--- a/src/app/SetupCodeDialog.tsx
+++ b/src/features/buttons/SetupCodeDialog.tsx
@@ -1,14 +1,13 @@
-import { displayText } from "../i18n";
+import { displayText } from "../../i18n/index";
 import { useEffect, useRef, useState, type ReactNode } from "react";
-import * as control from "../device/controller";
-import type { ControlSnapshot } from "../device/types";
-import { t } from "../i18n";
-import { bindingFromAssignment, decodeSetupCode, describeSetup, encodeSetupCode, type SetupCode } from "../setup-code";
+import * as control from "../../device/controller";
+import type { ControlSnapshot } from "../../device/types";
+import { t } from "../../i18n/index";
+import { bindingFromAssignment, decodeSetupCode, describeSetup, encodeSetupCode, type SetupCode } from "./setup-code";
 
 // The two primary clicks are never written, so a shared setup cannot take them over.
 const FIRST_WRITABLE_SLOT = 2;
 
-/** What this mouse has right now, as far as a setup code can carry it. */
 export function currentSetup(snapshot: ControlSnapshot): SetupCode {
   const setup: SetupCode = {};
   const state = snapshot.analogTuning;
@@ -36,7 +35,6 @@ export function currentSetup(snapshot: ControlSnapshot): SetupCode {
   return setup;
 }
 
-/** Stages each part of a decoded setup the same way the cards do, and says what it left out. */
 export function applySetup(setup: SetupCode, snapshot: ControlSnapshot): string[] {
   const skipped: string[] = [];
   if (setup.hits) {
@@ -64,7 +62,6 @@ export function applySetup(setup: SetupCode, snapshot: ControlSnapshot): string[
   return skipped;
 }
 
-/** Copy the whole setup as one code, or paste one to apply it. */
 export function SetupCodeDialog({
   open,
   snapshot,
@@ -104,12 +101,11 @@ export function SetupCodeDialog({
       onClick={(event) => { if (event.target === dialog.current) onClose(); }}
     >
       <div className="support-dialog-inner share-profile-dialog-inner">
-        <header>
+        <header className="om-dialog-head">
           <div>
-            <p className="overline">{displayText(locale, "Setup")}</p>
             <h2 id="setup-code-title">{displayText(locale, "Share setup")}</h2>
           </div>
-          <button type="button" onClick={onClose} aria-label={t(locale, "common.close")}>×</button>
+          <button type="button" className="om-icon-btn" onClick={onClose} aria-label={t(locale, "common.close")}>×</button>
         </header>
         <div className="profile-key-fields">
           <label className="profile-key-field">
@@ -141,7 +137,7 @@ export function SetupCodeDialog({
           <div className="import-hits-actions">
             <button
               type="button"
-              className="connect-button"
+              className="connect-button is-primary"
               disabled={!decoded || snapshot.settingInProgress}
               onClick={() => {
                 if (!decoded) return;
diff --git a/src/ui/command-search.test.ts b/src/features/buttons/command-search.test.ts
similarity index 94%
rename from src/ui/command-search.test.ts
rename to src/features/buttons/command-search.test.ts
index 8f211182..4a06a128 100644
--- a/src/ui/command-search.test.ts
+++ b/src/features/buttons/command-search.test.ts
@@ -1,6 +1,6 @@
 import assert from "node:assert/strict";
 import test from "node:test";
-import { ensureLocale } from "../i18n.ts";
+import { ensureLocale } from "../../i18n/index.ts";
 import { matchesCommandQuery } from "./command-search.ts";
 
 test("Turkish command search accepts Turkish and original English including uppercase I", async () => {
diff --git a/src/ui/command-search.ts b/src/features/buttons/command-search.ts
similarity index 70%
rename from src/ui/command-search.ts
rename to src/features/buttons/command-search.ts
index f4ab6192..05b3148d 100644
--- a/src/ui/command-search.ts
+++ b/src/features/buttons/command-search.ts
@@ -1,7 +1,6 @@
-import type { InterfaceLocale } from "../interface-preferences";
-import { displayText } from "../i18n.ts";
+import type { InterfaceLocale } from "../settings/interface-preferences";
+import { displayText } from "../../i18n/index.ts";
 
-/** Match either the original command wording or its localized display label. */
 export function matchesCommandQuery(locale: InterfaceLocale, query: string, label: string, hint = ""): boolean {
   const trimmed = query.trim();
   if (!trimmed) return true;
diff --git a/src/logitech-button-map.test.ts b/src/features/buttons/logitech-button-map.test.ts
similarity index 100%
rename from src/logitech-button-map.test.ts
rename to src/features/buttons/logitech-button-map.test.ts
diff --git a/src/logitech-button-map.ts b/src/features/buttons/logitech-button-map.ts
similarity index 88%
rename from src/logitech-button-map.ts
rename to src/features/buttons/logitech-button-map.ts
index cc062b9e..c83ba8d1 100644
--- a/src/logitech-button-map.ts
+++ b/src/features/buttons/logitech-button-map.ts
@@ -10,14 +10,12 @@ export interface ButtonSpot {
   label: string;
   x: number;
   y: number;
-  /** Which side the callout label sits on. */
   side: "left" | "right" | "top";
   /** Primary clicks are not offered for remapping, so the mouse stays usable. */
   locked: boolean;
 }
 
 export interface ButtonMapLayout {
-  /** Artwork width divided by height. */
   aspect: number;
   spots: readonly ButtonSpot[];
 }
@@ -32,13 +30,11 @@ function spots(positions: Record<"left" | "right" | "wheel" | "back" | "forward"
   ];
 }
 
-// PRO X 3 Superstrike artwork, 2500 x 2160.
 const PRO_X3: ButtonMapLayout = {
   aspect: 2500 / 2160,
   spots: spots({ left: [0.43, 0.3], right: [0.575, 0.3], wheel: [0.5, 0.272], forward: [0.3475, 0.399], back: [0.351, 0.544] }),
 };
 
-// PRO X 2 Superstrike artwork, 4886 x 2748.
 const PRO_X2: ButtonMapLayout = {
   aspect: 4886 / 2748,
   spots: spots({ left: [0.445, 0.302], right: [0.55, 0.302], wheel: [0.5015, 0.293], forward: [0.4015, 0.4], back: [0.404, 0.533] }),
@@ -49,7 +45,6 @@ const LAYOUTS: Record<string, ButtonMapLayout> = {
   PROX2SUPERSTRIKE: PRO_X2,
 };
 
-/** The picture layout for a mouse, or null when its button positions are not known. */
 export function buttonMapLayoutFor(deviceName: string): ButtonMapLayout | null {
   return LAYOUTS[deviceName.replace(/\s+/g, "").toUpperCase()] ?? null;
 }
diff --git a/src/logitech-commands.test.ts b/src/features/buttons/logitech-commands.test.ts
similarity index 98%
rename from src/logitech-commands.test.ts
rename to src/features/buttons/logitech-commands.test.ts
index 550f178e..2f139e1d 100644
--- a/src/logitech-commands.test.ts
+++ b/src/features/buttons/logitech-commands.test.ts
@@ -33,7 +33,7 @@ test("every command, written into a profile sector, reads back as that command a
     const written = [...encodeButtonAssignment(blank, 8, "primary", 4, binding)];
     // Button 4's record is the only thing that changed besides the checksum at the end.
     const changed = written.map((byte, index) => (byte !== blank[index] && index < 253 ? index : -1)).filter((index) => index >= 0);
-    if (changed.length === 0) continue; // an all-zero record, nothing to compare
+    if (changed.length === 0) continue;
     const start = changed[0] - (changed[0] % 4);
     const raw = written.slice(start, start + 4);
     const label = entry.target.kind === "action" ? entry.target.action : "Custom";
diff --git a/src/logitech-commands.ts b/src/features/buttons/logitech-commands.ts
similarity index 98%
rename from src/logitech-commands.ts
rename to src/features/buttons/logitech-commands.ts
index d489f523..3afe07a1 100644
--- a/src/logitech-commands.ts
+++ b/src/features/buttons/logitech-commands.ts
@@ -1,6 +1,5 @@
 import type { LogitechButtonAction } from "@openmouse/protocol/drivers/logitech/onboard-profiles";
 
-/** What a button can be set to: one of the three kinds the onboard profile stores. */
 export type CommandTarget =
   | { kind: "action"; action: LogitechButtonAction }
   | { kind: "keyboard"; key: number; modifiers: number }
@@ -9,7 +8,6 @@ export type CommandTarget =
 export interface CommandEntry {
   id: string;
   label: string;
-  /** The shortcut or a short note, shown beside the label. */
   hint?: string;
   target: CommandTarget;
 }
diff --git a/src/setup-code.test.ts b/src/features/buttons/setup-code.test.ts
similarity index 100%
rename from src/setup-code.test.ts
rename to src/features/buttons/setup-code.test.ts
diff --git a/src/setup-code.ts b/src/features/buttons/setup-code.ts
similarity index 91%
rename from src/setup-code.ts
rename to src/features/buttons/setup-code.ts
index 2890d3b7..d51fc552 100644
--- a/src/setup-code.ts
+++ b/src/features/buttons/setup-code.ts
@@ -1,11 +1,5 @@
-/**
- * A whole mouse setup in one short code: HITS tuning, Bunny Hop, the five button
- * assignments and the DPI stages. Every part is optional, and a part the mouse
- * lacks is left out. Like a HITS code it carries values only, with a checksum so
- * a mistyped code is refused.
- */
 import { BUNNY_HOP_LIMITS, LOGITECH_BUTTON_ACTIONS, type LogitechButtonBinding } from "@openmouse/protocol/drivers/logitech/onboard-profiles";
-import { checksum, fromBase64Url, presetFits, toBase64Url, type HitsPreset } from "./hits-presets.ts";
+import { checksum, fromBase64Url, presetFits, toBase64Url, type HitsPreset } from "../superstrike/hits-presets.ts";
 
 export interface SetupCode {
   hits?: Pick<HitsPreset, "left" | "right">;
@@ -66,7 +60,6 @@ export function encodeSetupCode(setup: SetupCode): string {
   return PREFIX + toBase64Url(bytes);
 }
 
-/** Null for anything that is not a well-formed, checksum-correct setup code with in-range values. */
 export function decodeSetupCode(text: string): SetupCode | null {
   const trimmed = text.trim();
   if (!trimmed.startsWith(PREFIX)) return null;
@@ -128,7 +121,6 @@ export function decodeSetupCode(text: string): SetupCode | null {
   return at === body.length ? setup : null;
 }
 
-/** One line per part, for showing what a code holds before it is applied. */
 export function describeSetup(setup: SetupCode): string[] {
   const lines: string[] = [];
   if (setup.hits) lines.push("HITS tuning for both buttons");
diff --git a/src/app/CaptureDialog.tsx b/src/features/capture/CaptureDialog.tsx
similarity index 70%
rename from src/app/CaptureDialog.tsx
rename to src/features/capture/CaptureDialog.tsx
index 9937bacc..d3766a5a 100644
--- a/src/app/CaptureDialog.tsx
+++ b/src/features/capture/CaptureDialog.tsx
@@ -1,4 +1,4 @@
-import { displayText } from "../i18n";
+import { displayText } from "../../i18n/index";
 import { useEffect, useRef, useState, type ReactNode } from "react";
 import {
   CAPTURE_ACTIONS,
@@ -9,10 +9,10 @@ import {
   formatProfileWriteProbeReportMarkdown,
   type SectorBytes,
   type SectorDiff,
-} from "../capture-format";
-import { captureContext } from "../capture-context";
-import { t } from "../i18n";
-import type { InterfaceLocale } from "../interface-preferences";
+} from "./capture-format";
+import { captureContext } from "./capture-context";
+import { t } from "../../i18n/index";
+import type { InterfaceLocale } from "../settings/interface-preferences";
 
 export function CaptureDialog({ open, onClose, locale = "en" }: { open: boolean; onClose: () => void; locale?: InterfaceLocale }): ReactNode {
   const dialog = useRef<HTMLDialogElement>(null);
@@ -99,45 +99,27 @@ export function CaptureDialog({ open, onClose, locale = "en" }: { open: boolean;
     <dialog
       id="capture-dialog"
       ref={dialog}
-      style={{
-        width: "min(1100px,94vw)",
-        maxWidth: "none",
-        height: "min(88vh,900px)",
-        padding: 0,
-        border: "1px solid #303036",
-        borderRadius: "12px",
-        background: "#131316",
-        color: "#d8d8dc",
-      }}
+
       onClick={(event) => {
         if (event.target === dialog.current) onClose();
       }}
       onClose={onClose}
     >
-      <div style={{
-        display: "flex",
-        flexDirection: "column",
-        height: "100%",
-        padding: "1rem 1.1rem",
-        boxSizing: "border-box",
-        gap: ".6rem",
-      }}>
-        <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: "1rem" }}>
-          <div>
-            <p style={{ margin: 0, color: "#77777c", fontSize: ".6rem", letterSpacing: ".05em" }}>{displayText(locale, "DEVELOPMENT")}</p>
-            <h2 style={{ margin: ".1rem 0 0", fontSize: "1rem", color: "#ececef" }}>{t(locale, "cap.title")}</h2>
-          </div>
-          <button id="capture-close" type="button" aria-label={t(locale, "cap.closeCapture")} onClick={onClose}>{t(locale, "common.close")}</button>
+      <div className="capture-layout">
+        <div className="om-dialog-head">
+          <h2>{t(locale, "cap.title")}</h2>
+          <button id="capture-close" className="om-btn is-ghost" type="button" aria-label={t(locale, "cap.closeCapture")} onClick={onClose}>{t(locale, "common.close")}</button>
         </div>
 
-        <small style={{ color: "#77777c", fontSize: ".64rem" }}>
-          <strong style={{ color: "#a8a8ae" }}>{displayText(locale, "Verify a format:")}</strong> {displayText(locale, "copy a read-only bundle containing the memory geometry, full directory, every profile and all CRC results. To map an individual setting, snapshot the profiles, change only that setting in G HUB or Onboard Memory Manager, compare, mark the change and copy the comparison.")} </small>
+        <div className="om-dialog-body">
+        <small className="capture-intro">
+          <strong>{displayText(locale, "Verify a format:")}</strong> {displayText(locale, "copy a read-only bundle containing the memory geometry, full directory, every profile and all CRC results. To map an individual setting, snapshot the profiles, change only that setting in G HUB or Onboard Memory Manager, compare, mark the change and copy the comparison.")} </small>
 
-        <div style={{ display: "flex", flexWrap: "wrap", gap: ".4rem", alignItems: "center" }}>
+        <div className="capture-actions">
           <button
             id="capture-verification"
             type="button"
-            className="is-primary"
+            className="om-btn is-primary"
             disabled={busy}
             onClick={() => {
               if (!context.profiles) {
@@ -167,7 +149,7 @@ export function CaptureDialog({ open, onClose, locale = "en" }: { open: boolean;
               type="button"
               disabled={busy || probe.supported !== true}
               title={displayText(locale, probe.reason)}
-              style={{ borderColor: "#7d3038", background: "#32181c", color: "#ff9ca5" }}
+              className="om-btn is-danger"
               onClick={() => {
                 if (!probe.supported || !probe.prepare || !probe.run) return;
                 setBusy(true);
@@ -196,10 +178,11 @@ export function CaptureDialog({ open, onClose, locale = "en" }: { open: boolean;
             </button>
           ) : null}
 
-          <button id="capture-snapshot" type="button" onClick={() => void takeSnapshot()}>{t(locale, "cap.snapshot")}</button>
-          <button id="capture-compare" type="button" onClick={() => void compareSnapshot()}>{t(locale, "cap.compare")}</button>
+          <button id="capture-snapshot" className="om-btn" type="button" onClick={() => void takeSnapshot()}>{t(locale, "cap.snapshot")}</button>
+          <button id="capture-compare" className="om-btn" type="button" onClick={() => void compareSnapshot()}>{t(locale, "cap.compare")}</button>
           <button
             id="capture-reset"
+            className="om-btn"
             type="button"
             onClick={() => {
               setSnapshot(null);
@@ -213,6 +196,7 @@ export function CaptureDialog({ open, onClose, locale = "en" }: { open: boolean;
           </button>
           <button
             id="capture-copy"
+            className="om-btn"
             type="button"
             onClick={() => {
               const markdown = formatCaptureMarkdown({
@@ -231,17 +215,14 @@ export function CaptureDialog({ open, onClose, locale = "en" }: { open: boolean;
           >
             {t(locale, "cap.copyComparison")}
           </button>
-          <span id="capture-status" role="status" aria-live="polite" style={{ color: "#77777c", fontSize: ".62rem" }}>
+          <span id="capture-status" role="status" aria-live="polite" >
             {displayText(locale, message)}
           </span>
         </div>
 
-        <div
-          id="capture-diff"
-          style={{ flex: 1, minHeight: 0, overflow: "auto", border: "1px solid #26262a", borderRadius: "8px", padding: ".5rem" }}
-        >
+        <div id="capture-diff">
           {changed.length === 0 ? (
-            <p style={{ color: "#77777c", fontSize: ".62rem", margin: 0 }}>
+            <p className="capture-empty">
               {displayText(locale, diffs.length > 0
                 ? "No profile bytes changed — this setting is not stored in a profile."
                 : snapshot
@@ -250,29 +231,29 @@ export function CaptureDialog({ open, onClose, locale = "en" }: { open: boolean;
             </p>
           ) : (
             changed.map((diff) => (
-              <div key={diff.sector} style={{ marginBottom: ".5rem" }}>
-                <div style={{ display: "flex", gap: ".5rem", alignItems: "baseline", flexWrap: "wrap" }}>
-                  <strong style={{ fontSize: ".66rem", color: "#e6e6ea" }}> {displayText(locale, "Sector")} {diff.sector} — {diff.changes.length} {displayText(locale, "byte(s)")} </strong>
+              <div key={diff.sector} className="capture-sector">
+                <div className="capture-sector-heading">
+                  <strong> {displayText(locale, "Sector")} {diff.sector} · {diff.changes.length} {displayText(locale, "byte(s)")} </strong>
                   {diff.unreproduced === undefined ? null : diff.unreproduced.length === 0 ? (
-                    <span style={{ color: "#6fd3a0", fontSize: ".6rem", fontWeight: 600 }}>{displayText(locale, "✓ write path verified")}</span>
+                    <span className="capture-result is-ok">{displayText(locale, "✓ write path verified")}</span>
                   ) : (
-                    <span style={{ color: "#e8798f", fontSize: ".6rem", fontWeight: 600 }}>
+                    <span className="capture-result is-bad">
                       ✗ {diff.unreproduced.length} {displayText(locale, "byte(s) not reproducible")} </span>
                   )}
                 </div>
-                <div style={{ display: "grid", gap: ".1rem", marginTop: ".2rem" }}>
+                <div className="capture-changes">
                   {diff.changes.map((change) => (
                     <div
                       key={change.offset}
-                      style={{ display: "flex", gap: ".6rem", fontSize: ".62rem", color: "#d8d8dc", alignItems: "baseline" }}
+                      className="capture-change"
                     >
-                      <code style={{ color: "#8b8b90", minWidth: "3.2rem" }}>
+                      <code>
                         0x{change.offset.toString(16).padStart(2, "0")}
                       </code>
-                      <code style={{ minWidth: "5rem" }}>
+                      <code>
                         {change.before.toString(16).padStart(2, "0")} → {change.after.toString(16).padStart(2, "0")}
                       </code>
-                      <span style={{ color: change.field === "checksum" ? "#77777c" : "#6fd3a0" }}>
+                      <span className={change.field === "checksum" ? "is-checksum" : undefined}>
                         {displayText(locale, change.field ?? "unknown")}
                       </span>
                     </div>
@@ -284,8 +265,8 @@ export function CaptureDialog({ open, onClose, locale = "en" }: { open: boolean;
         </div>
 
         <div>
-          <p style={{ margin: "0 0 .25rem", color: "#77777c", fontSize: ".62rem" }}>{t(locale, "cap.whatChanged")}</p>
-          <div id="capture-action-list" style={{ display: "flex", flexWrap: "wrap", gap: ".3rem" }}>
+          <p className="capture-actions-label">{t(locale, "cap.whatChanged")}</p>
+          <div id="capture-action-list">
             {CAPTURE_ACTIONS.map((action) => {
               const active = selectedActions.has(action.id);
               return (
@@ -293,16 +274,7 @@ export function CaptureDialog({ open, onClose, locale = "en" }: { open: boolean;
                   key={action.id}
                   type="button"
                   aria-pressed={active}
-                  style={{
-                    padding: ".22rem .5rem",
-                    border: `1px solid ${active ? action.color : "#3a3a3f"}`,
-                    borderRadius: "999px",
-                    background: active ? `${action.color}22` : "#19191c",
-                    color: active ? action.color : "#8b8b90",
-                    fontSize: ".6rem",
-                    fontWeight: 600,
-                    cursor: "pointer",
-                  }}
+                  className="om-btn is-sm"
                   onClick={() => setSelectedActions((current) => {
                     const next = new Set(current);
                     if (next.has(action.id)) next.delete(action.id);
@@ -323,17 +295,9 @@ export function CaptureDialog({ open, onClose, locale = "en" }: { open: boolean;
           placeholder={t(locale, "cap.notesPlaceholder")}
           value={notes}
           onChange={(event) => setNotes(event.currentTarget.value)}
-          style={{
-            width: "100%",
-            boxSizing: "border-box",
-            padding: ".45rem",
-            border: "1px solid #343438",
-            borderRadius: "6px",
-            background: "#171719",
-            color: "#d8d8dc",
-            fontSize: ".66rem",
-          }}
+
         />
+        </div>
       </div>
     </dialog>
   );
diff --git a/src/capture-context.ts b/src/features/capture/capture-context.ts
similarity index 100%
rename from src/capture-context.ts
rename to src/features/capture/capture-context.ts
diff --git a/src/capture-format.test.ts b/src/features/capture/capture-format.test.ts
similarity index 98%
rename from src/capture-format.test.ts
rename to src/features/capture/capture-format.test.ts
index 8b2287d6..eb2dffb8 100644
--- a/src/capture-format.test.ts
+++ b/src/features/capture/capture-format.test.ts
@@ -50,7 +50,6 @@ test("identical sectors produce no diff", () => {
   assert.deepEqual(diffSectors(bytes, bytes.slice(), () => null), []);
 });
 
-/** The real capture that confirmed the report-rate encoding: 8000 Hz -> 1000 Hz. */
 test("exports a confirmed change with its actions", () => {
   const markdown = formatCaptureMarkdown(capture({
     actions: ["polling"],
diff --git a/src/capture-format.ts b/src/features/capture/capture-format.ts
similarity index 95%
rename from src/capture-format.ts
rename to src/features/capture/capture-format.ts
index fae7c46c..24a00b23 100644
--- a/src/capture-format.ts
+++ b/src/features/capture/capture-format.ts
@@ -15,7 +15,6 @@ import type {
 export interface CaptureAction {
   id: string;
   label: string;
-  /** Distinct colour so selected changes stay readable side by side. */
   color: string;
 }
 
@@ -41,7 +40,6 @@ export interface ByteChange {
   offset: number;
   before: number;
   after: number;
-  /** Which profile field owns the byte, when the layout knows. */
   field: string | null;
 }
 
@@ -56,7 +54,6 @@ export interface SectorDiff {
   unreproduced?: number[];
 }
 
-/** Byte-level diff of a profile sector before and after a change. */
 export function diffSectors(
   before: Uint8Array,
   after: Uint8Array,
@@ -81,11 +78,9 @@ export interface SectorBytes {
 export interface CaptureExport {
   device: string | null;
   profileFormat: string | null;
-  /** What the user changed in the vendor app; several may apply at once. */
   actions: string[];
   notes: string;
   diffs: SectorDiff[];
-  /** Raw sectors, so a maintainer can paste them straight into a test fixture. */
   sectors?: SectorBytes[];
 }
 
@@ -98,7 +93,6 @@ export interface ProfileVerificationProfile {
   bytes: Uint8Array;
 }
 
-/** Everything needed to independently validate one profile-format dump. */
 export interface ProfileVerificationExport {
   device: string | null;
   profileFormat: string | null;
@@ -276,7 +270,6 @@ export function formatProfileVerificationMarkdown(capture: ProfileVerificationEx
   return sections.join("\n");
 }
 
-/** Markdown, so a capture can be pasted straight into an issue. */
 export function formatCaptureMarkdown(capture: CaptureExport): string {
   const changed = capture.diffs.filter((diff) => diff.changes.length > 0);
   const labels = capture.actions
diff --git a/src/features/devices/DeviceHero.tsx b/src/features/devices/DeviceHero.tsx
new file mode 100644
index 00000000..0fecfaea
--- /dev/null
+++ b/src/features/devices/DeviceHero.tsx
@@ -0,0 +1,257 @@
+import { displayText, t, tp, type I18nKey } from "../../i18n/index";
+import { ChevronRight, ImageUp } from "lucide-react";
+import { useMemo, useState, type KeyboardEvent, type ReactNode } from "react";
+import * as control from "../../device/controller";
+import { cachedBatterySamples, type BatterySample } from "./battery-history";
+import type { ControlSnapshot, WorkspaceTab } from "../../device/types";
+import { noirBrandLabel } from "../../device/noir.ts";
+import { deviceImage, isUnknownDevice } from "../../shared/device-images";
+import { DeviceStats } from "./DeviceStats";
+
+const ARTWORK_DISCUSSION_URL =
+  "https://github.com/OpenMouse-Project/openmouse/discussions/new?category=artwork-request";
+
+export function DeviceHero({
+  snapshot,
+  tabs,
+  activeTab,
+  tabIcon,
+}: {
+  snapshot: ControlSnapshot;
+  tabs: readonly WorkspaceTab[];
+  activeTab: WorkspaceTab;
+  tabIcon: (tab: WorkspaceTab) => ReactNode;
+}): ReactNode {
+  const locale = snapshot.preferences.locale;
+  const status = snapshot.status;
+  const keyboard = snapshot.keyboard;
+  const [imageFailed, setImageFailed] = useState(false);
+  const active = control.getActiveDevice();
+  const activeEntry = snapshot.devices.find((device) => device.selected) ?? null;
+  const name = status?.name ?? keyboard?.name ?? activeEntry?.name ?? "";
+  const brand = status ? noirBrandLabel(status) : null;
+  const image = snapshot.deviceArtwork
+    ?? (keyboard ? deviceImage({ vendorId: keyboard.vendorId, productId: keyboard.productId } as HIDDevice, keyboard.name) : null);
+  const needsArtwork = Boolean(status && active && (imageFailed || isUnknownDevice(
+    { vendorId: active.vendorId, productId: active.productId } as HIDDevice,
+    status.name,
+  )));
+  const artworkHref = `${ARTWORK_DISCUSSION_URL}${name ? `&title=${encodeURIComponent(`Artwork request: ${name}`)}` : ""}`;
+
+  const onTabKey = (event: KeyboardEvent<HTMLButtonElement>, current: WorkspaceTab): void => {
+    const index = tabs.indexOf(current);
+    const rtl = document.documentElement.dir === "rtl";
+    let next: number;
+    if (event.key === (rtl ? "ArrowLeft" : "ArrowRight")) next = (index + 1) % tabs.length;
+    else if (event.key === (rtl ? "ArrowRight" : "ArrowLeft")) next = (index - 1 + tabs.length) % tabs.length;
+    else if (event.key === "Home") next = 0;
+    else if (event.key === "End") next = tabs.length - 1;
+    else return;
+    event.preventDefault();
+    control.setWorkspaceTab(tabs[next]!);
+    document.querySelector<HTMLButtonElement>(`#workspace-tab-${tabs[next]}`)?.focus();
+  };
+
+  return (
+    <header className="om-hero">
+      <div className="om-hero-top">
+        <div className="om-hero-stage">
+          {image ? (
+            <img
+              src={image}
+              alt={name}
+              draggable={false}
+              onError={(event) => {
+                event.currentTarget.onerror = null;
+                event.currentTarget.src = deviceImage(null);
+                setImageFailed(true);
+              }}
+            />
+          ) : null}
+        </div>
+        <div className="om-hero-main">
+          <nav className="om-crumbs" aria-label={t(locale, "dev.breadcrumb")}>
+            <button type="button" onClick={() => control.showDeviceList()}>{t(locale, "nav.devices")}</button>
+            <ChevronRight strokeWidth={2} aria-hidden="true" />
+            <span aria-current="page">{name}</span>
+          </nav>
+          <h1 className="om-hero-name">{name}</h1>
+          <p className="om-hero-meta">
+            <span className="om-dot is-ok" aria-hidden="true" />
+            <span>{t(locale, "side.connected")}</span>
+            {brand ? <><span className="om-sep" aria-hidden="true">·</span><span>{displayText(locale, brand)}</span></> : null}
+            {status?.connectionDetail ? <><span className="om-sep" aria-hidden="true">·</span><span>{displayText(locale, status.connectionDetail)}</span></> : null}
+            {activeEntry?.transport === "bridge" ? <><span className="om-sep" aria-hidden="true">·</span><span>{t(locale, "bridge.title")}</span></> : null}
+          </p>
+          {status ? <DeviceStats status={status} locale={locale} transport={activeEntry?.transport} full /> : null}
+        </div>
+        {needsArtwork ? (
+          <div className="om-hero-actions">
+            <a className="om-btn is-ghost is-sm" href={artworkHref} target="_blank" rel="noopener noreferrer">
+              <ImageUp strokeWidth={1.9} aria-hidden="true" />
+              {t(locale, "artreq.request" as I18nKey)}
+            </a>
+          </div>
+        ) : null}
+      </div>
+      {tabs.length > 1 ? (
+        <nav className="om-tabs" role="tablist" aria-label={t(locale, "panel.deviceSections")}>
+          {tabs.map((tab) => (
+            <button
+              key={tab}
+              id={`workspace-tab-${tab}`}
+              type="button"
+              role="tab"
+              className={`om-tab${activeTab === tab ? " is-active" : ""}`}
+              aria-selected={activeTab === tab}
+              tabIndex={activeTab === tab ? 0 : -1}
+              onClick={() => control.setWorkspaceTab(tab)}
+              onKeyDown={(event) => onTabKey(event, tab)}
+            >
+              {tabIcon(tab)}
+              <span>{t(locale, `tab.${tab}` as I18nKey)}</span>
+            </button>
+          ))}
+        </nav>
+      ) : null}
+    </header>
+  );
+}
+
+export function CurrentSetupPanel({ snapshot }: { snapshot: ControlSnapshot }): ReactNode {
+  const status = snapshot.status;
+  if (!status) return null;
+  const locale = snapshot.preferences.locale;
+  const stages = Array.isArray(status.dpiStages) ? status.dpiStages.filter((value) => value > 0) : [];
+  const activeStage = typeof status.activeDpiStage === "number" ? status.activeDpiStage : -1;
+  const maxRate = status.supportedPollingRates?.length ? Math.max(...status.supportedPollingRates) : null;
+  const figures: Array<{ key: string; label: string; value: string; unit?: string; sub?: string }> = [];
+  if (status.dpi > 0) {
+    figures.push({
+      key: "dpi",
+      label: t(locale, "ov.sensitivity"),
+      value: status.dpi.toLocaleString(),
+      unit: "DPI",
+      sub: stages.length > 1 && activeStage >= 0 ? tp(locale, "ov.stageOf", { n: activeStage + 1, total: stages.length }) : undefined,
+    });
+  }
+  if (status.pollingRateHz > 0) {
+    figures.push({
+      key: "poll",
+      label: t(locale, "ov.pollingRate"),
+      value: status.pollingRateHz.toLocaleString(),
+      unit: "Hz",
+      sub: maxRate && maxRate > status.pollingRateHz ? tp(locale, "ov.upTo", { v: `${maxRate.toLocaleString()} Hz` }) : undefined,
+    });
+  }
+  if (status.batteryPercent !== null) {
+    figures.push({
+      key: "battery",
+      label: t(locale, "ov.batteryLabel"),
+      value: String(status.batteryPercent),
+      unit: "%",
+      sub: displayText(locale, status.batteryState),
+    });
+  }
+  if (status.activeProfile != null) {
+    figures.push({ key: "profile", label: t(locale, "ov.onboardProfile"), value: String(status.activeProfile) });
+  }
+  if (figures.length === 0) return null;
+  return (
+    <section className="om-panel is-lit om-setup" aria-labelledby="om-setup-title">
+      <header className="om-panel-head">
+        <h2 id="om-setup-title">{t(locale, "ov.setupTitle")}</h2>
+        <span className="om-meta">{t(locale, "ov.setupMeta")}</span>
+      </header>
+      <div className="om-setup-figures" style={{ "--cols": String(figures.length) }}>
+        {figures.map((figure) => (
+          <div key={figure.key} className="om-setup-figure">
+            <span className="om-label">{figure.label}</span>
+            <span className="om-fig">{figure.value}{figure.unit ? <span className="om-unit">{figure.unit}</span> : null}</span>
+            {figure.sub ? <span className="om-meta">{figure.sub}</span> : null}
+          </div>
+        ))}
+      </div>
+      {stages.length > 1 ? (
+        <div className="om-setup-stages">
+          <span className="om-label">{t(locale, "ov.stages")}</span>
+          <div className="om-setup-stage-list">
+            {stages.map((value, index) => (
+              <span key={index} className={`om-chip${index === activeStage ? " is-on" : ""}`} aria-current={index === activeStage ? "true" : undefined}>
+                {value.toLocaleString()}
+              </span>
+            ))}
+          </div>
+        </div>
+      ) : null}
+    </section>
+  );
+}
+
+const DAY_MS = 24 * 60 * 60 * 1000;
+
+function sparkPath(samples: readonly BatterySample[], width: number, height: number): { line: string; area: string; start: number; end: number } | null {
+  if (samples.length < 2) return null;
+  const start = samples[0]!.timestamp;
+  const end = samples[samples.length - 1]!.timestamp;
+  const span = Math.max(1, end - start);
+  const x = (time: number): number => ((time - start) / span) * width;
+  const y = (percent: number): number => height - (Math.max(0, Math.min(100, percent)) / 100) * height;
+  const points = samples.map((sample) => `${x(sample.timestamp).toFixed(1)},${y(sample.percent).toFixed(1)}`);
+  const line = `M${points.join(" L")}`;
+  const area = `${line} L${width},${height} L0,${height} Z`;
+  return { line, area, start, end };
+}
+
+export function BatteryHistoryPanel({ snapshot }: { snapshot: ControlSnapshot }): ReactNode {
+  const status = snapshot.status;
+  const locale = snapshot.preferences.locale;
+  const samples = useMemo(() => {
+    if (!status || status.batteryPercent === null) return [];
+    try {
+      const now = Date.now();
+      return cachedBatterySamples(window.localStorage, status.name, now).filter((sample) => sample.timestamp >= now - 7 * DAY_MS);
+    } catch {
+      return [];
+    }
+  }, [status?.name, status?.batteryPercent]);
+  if (!status || status.batteryPercent === null) return null;
+  const width = 600;
+  const height = 120;
+  const path = sparkPath(samples, width, height);
+  const estimate = control.batteryEstimateParts(status, locale);
+  const format = new Intl.DateTimeFormat(locale, { weekday: "short", hour: "numeric", minute: "2-digit" });
+  return (
+    <section className="om-panel om-battery" aria-labelledby="om-battery-title">
+      <header className="om-panel-head">
+        <h2 id="om-battery-title">{t(locale, "ov.historyTitle")}</h2>
+        <span className="om-meta">{t(locale, "ov.historyMeta")}</span>
+        {estimate ? (
+          <span className="om-end">
+            <span className="om-fig is-sm">{displayText(locale, estimate.time)}</span>
+            <span className="om-meta">{displayText(locale, estimate.label)}</span>
+          </span>
+        ) : null}
+      </header>
+      {path ? (
+        <figure className="om-battery-chart">
+          <svg viewBox={`0 0 ${width} ${height}`} preserveAspectRatio="none" role="img" aria-label={t(locale, "ov.historyTitle")}>
+            <line className="om-chart-guide" x1="0" x2={width} y1={height / 2} y2={height / 2} />
+            <line className="om-chart-guide" x1="0" x2={width} y1={height * 0.8} y2={height * 0.8} />
+            <path className="om-chart-area" d={path.area} />
+            <path className="om-chart-line" d={path.line} vectorEffect="non-scaling-stroke" />
+          </svg>
+          <figcaption className="om-battery-axis">
+            <span>{format.format(path.start)}</span>
+            <span>{format.format(path.end)}</span>
+          </figcaption>
+        </figure>
+      ) : (
+        <div className="om-empty">
+          <strong>{t(locale, "ov.historyEmpty")}</strong>
+          <p>{t(locale, "ov.historyEmptyBody")}</p>
+        </div>
+      )}
+    </section>
+  );
+}
diff --git a/src/features/devices/DeviceStats.tsx b/src/features/devices/DeviceStats.tsx
new file mode 100644
index 00000000..1552cf09
--- /dev/null
+++ b/src/features/devices/DeviceStats.tsx
@@ -0,0 +1,68 @@
+import { Bluetooth, Cable, Crosshair, Gauge, Layers, Usb, Wifi } from "lucide-react";
+import type { ReactNode } from "react";
+import type { MouseStatus } from "@openmouse/protocol/drivers/mouse-types";
+import * as control from "../../device/controller";
+import { connectionText, t } from "../../i18n/index";
+import type { InterfaceLocale } from "../settings/interface-preferences";
+import { BatteryIcon } from "../../shared/ui";
+
+export function ConnectionIcon({ type, transport }: { type: string | null | undefined; transport?: "bridge" | "webhid" }): ReactNode {
+  const value = (type ?? "").toLowerCase();
+  if (value.includes("bluetooth")) return <Bluetooth strokeWidth={1.8} aria-hidden="true" />;
+  if (value.includes("wire") && !value.includes("wireless")) return <Cable strokeWidth={1.8} aria-hidden="true" />;
+  if (value.includes("wireless") || value.includes("2.4") || value.includes("receiver")) return <Wifi strokeWidth={1.8} aria-hidden="true" />;
+  if (transport === "bridge") return <Usb strokeWidth={1.8} aria-hidden="true" />;
+  return <Usb strokeWidth={1.8} aria-hidden="true" />;
+}
+
+export function DeviceStats({
+  status,
+  locale,
+  transport,
+  full = false,
+}: {
+  status: MouseStatus;
+  locale: InterfaceLocale;
+  transport?: "bridge" | "webhid";
+  full?: boolean;
+}): ReactNode {
+  const estimate = status.batteryPercent !== null ? control.batteryEstimateParts(status, locale) : null;
+  return (
+    <div className="om-stats" aria-label={t(locale, "dev.status")}>
+      {status.connectionType ? (
+        <span className="om-stat" title={status.connectionDetail ?? undefined}>
+          <ConnectionIcon type={status.connectionType} transport={transport} />
+          <span>{connectionText(locale, status.connectionType)}</span>
+        </span>
+      ) : null}
+      {status.batteryPercent !== null ? (
+        <span className="om-stat" title={estimate ? `${estimate.time} ${estimate.label}` : undefined}>
+          <BatteryIcon percent={status.batteryPercent} state={status.batteryState} />
+          <b>{status.batteryPercent}%</b>
+          {estimate && full ? <span className="om-muted">{estimate.time}</span> : null}
+        </span>
+      ) : null}
+      {status.pollingRateHz > 0 ? (
+        <span className="om-stat">
+          <Gauge strokeWidth={1.8} aria-hidden="true" />
+          <b>{status.pollingRateHz.toLocaleString()}</b>
+          <span className="om-muted">Hz</span>
+        </span>
+      ) : null}
+      {full && status.dpi > 0 ? (
+        <span className="om-stat">
+          <Crosshair strokeWidth={1.8} aria-hidden="true" />
+          <b>{status.dpi.toLocaleString()}</b>
+          <span className="om-muted">{"DPI"}</span>
+        </span>
+      ) : null}
+      {full && status.activeProfile != null ? (
+        <span className="om-stat">
+          <Layers strokeWidth={1.8} aria-hidden="true" />
+          <span className="om-muted">{t(locale, "ov.profile")}</span>
+          <b>{status.activeProfile}</b>
+        </span>
+      ) : null}
+    </div>
+  );
+}
diff --git a/src/features/devices/DevicesHome.tsx b/src/features/devices/DevicesHome.tsx
new file mode 100644
index 00000000..3d5fe6ba
--- /dev/null
+++ b/src/features/devices/DevicesHome.tsx
@@ -0,0 +1,372 @@
+import { displayText, t, tp } from "../../i18n/index";
+import { ChevronLeft, ChevronRight, MoreHorizontal, Plus, Settings2, Trash2 } from "lucide-react";
+import { useCallback, useEffect, useLayoutEffect, useRef, useState, type KeyboardEvent, type PointerEvent, type ReactNode } from "react";
+import * as control from "../../device/controller";
+import type { ControlSnapshot, SidebarDevice } from "../../device/types";
+import { deviceImage, deviceImageFilename, showcaseDeviceImageUrls } from "../../shared/device-images";
+import { DeviceStats } from "./DeviceStats";
+
+const SHOWCASE_IMAGES = showcaseDeviceImageUrls();
+const SHOWCASE_INTERVAL_MS = 3800;
+
+function MouseArtworkShowcase({ reducedMotion }: { reducedMotion: boolean }): ReactNode {
+  const [index, setIndex] = useState(0);
+  useEffect(() => {
+    if (reducedMotion || SHOWCASE_IMAGES.length <= 1) return;
+    const id = window.setInterval(() => {
+      setIndex((current) => (current + 1) % SHOWCASE_IMAGES.length);
+    }, SHOWCASE_INTERVAL_MS);
+    return () => window.clearInterval(id);
+  }, [reducedMotion]);
+  return (
+    <div className="om-showcase" aria-hidden="true">
+      {SHOWCASE_IMAGES.map((src, i) => (
+        <img key={src} src={src} alt="" draggable={false} className={i === index ? "is-active" : ""} />
+      ))}
+    </div>
+  );
+}
+
+function useConnect(snapshot: ControlSnapshot): { busy: boolean; disabled: boolean; run: () => void } {
+  const [busy, setBusy] = useState(false);
+  return {
+    busy,
+    disabled: busy || snapshot.connectDisabled,
+    run: () => {
+      if (busy) return;
+      setBusy(true);
+      void control.connect().finally(() => setBusy(false));
+    },
+  };
+}
+
+function DeviceArt({ device }: { device: SidebarDevice }): ReactNode {
+  const src = deviceImage({ vendorId: device.vendorId, productId: device.productId } as HIDDevice, device.name);
+  const file = deviceImageFilename(device.name);
+  const portrait = file === "noir-m2-nex.png" || file === "noir-s1.png" || file === "noir-e1.png";
+  return (
+    <img
+      className={`om-device-render${portrait ? " is-portrait" : ""}`}
+      src={src}
+      alt=""
+      loading="lazy"
+      draggable={false}
+      onError={(event) => {
+        event.currentTarget.onerror = null;
+        event.currentTarget.src = deviceImage(null);
+      }}
+    />
+  );
+}
+
+function DeviceMenu({ snapshot, device }: { snapshot: ControlSnapshot; device: SidebarDevice }): ReactNode {
+  const locale = snapshot.preferences.locale;
+  const [mode, setMode] = useState<"closed" | "menu" | "confirm">("closed");
+  const [busy, setBusy] = useState(false);
+  const root = useRef<HTMLDivElement>(null);
+  const trigger = useRef<HTMLButtonElement>(null);
+
+  useEffect(() => {
+    if (mode === "closed") return;
+    const away = (event: MouseEvent): void => {
+      if (root.current && !root.current.contains(event.target as Node)) setMode("closed");
+    };
+    const key = (event: globalThis.KeyboardEvent): void => {
+      if (event.key === "Escape") {
+        setMode("closed");
+        trigger.current?.focus();
+      }
+    };
+    document.addEventListener("mousedown", away);
+    document.addEventListener("keydown", key);
+    return () => {
+      document.removeEventListener("mousedown", away);
+      document.removeEventListener("keydown", key);
+    };
+  }, [mode]);
+
+  const remove = (): void => {
+    setBusy(true);
+    void control.removeAuthorizedDevice(device.index).finally(() => {
+      setBusy(false);
+      setMode("closed");
+    });
+  };
+
+  return (
+    <div className="om-device-menu" ref={root}>
+      <button
+        ref={trigger}
+        type="button"
+        className="om-icon-btn om-device-menu-trigger"
+        aria-label={t(locale, "home.actions")}
+        aria-haspopup="menu"
+        aria-expanded={mode !== "closed"}
+        onClick={() => setMode((current) => (current === "closed" ? "menu" : "closed"))}
+      >
+        <MoreHorizontal strokeWidth={2} aria-hidden="true" />
+      </button>
+      {mode === "menu" ? (
+        <div className="om-device-menu-pop" role="menu">
+          <button type="button" role="menuitem" className="om-device-menu-item" onClick={() => void control.openDeviceOverview(device.index)}>
+            <Settings2 strokeWidth={1.8} aria-hidden="true" />
+            {t(locale, "home.configure")}
+          </button>
+          <button type="button" role="menuitem" className="om-device-menu-item is-danger" onClick={() => setMode("confirm")}>
+            <Trash2 strokeWidth={1.8} aria-hidden="true" />
+            {t(locale, "home.remove")}
+          </button>
+        </div>
+      ) : null}
+      {mode === "confirm" ? (
+        <div className="om-device-menu-pop is-confirm" role="alertdialog" aria-labelledby={`om-remove-${device.index}`}>
+          <strong id={`om-remove-${device.index}`}>{tp(locale, "home.removeTitle", { name: device.name })}</strong>
+          <p>{t(locale, "home.removeBody")}</p>
+          <div className="om-device-menu-actions">
+            <button type="button" className="om-btn is-ghost" onClick={() => setMode("closed")}>{t(locale, "common.cancel")}</button>
+            <button type="button" className="om-btn is-danger-solid" disabled={busy} onClick={remove}>
+              <Trash2 strokeWidth={1.9} aria-hidden="true" />
+              {t(locale, "home.remove")}
+            </button>
+          </div>
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+function DeviceBlock({ snapshot, device }: { snapshot: ControlSnapshot; device: SidebarDevice }): ReactNode {
+  const locale = snapshot.preferences.locale;
+  const live = device.selected && (snapshot.deviceStatus !== null || snapshot.keyboard !== null);
+  const status = live ? snapshot.deviceStatus : null;
+  const brand = status?.brand ?? null;
+  const open = (): void => void control.openDeviceOverview(device.index);
+  return (
+    <article className={`om-device-block${live ? " is-live" : ""}`}>
+      <button
+        type="button"
+        className="om-device-block-hit"
+        onClick={open}
+        aria-label={displayText(locale, `${device.name}. ${t(locale, live ? "home.configure" : "home.open")}`)}
+      />
+      <header className="om-device-block-top">
+        <span className="om-device-block-name">{device.name}</span>
+        {live ? (
+          <span className="om-badge is-ok"><span className="om-dot is-ok" />{t(locale, "side.connected")}</span>
+        ) : (
+          <span className="om-badge">{t(locale, "home.notConnected")}</span>
+        )}
+        <DeviceMenu snapshot={snapshot} device={device} />
+      </header>
+      <span className="om-device-block-meta">
+        {[brand, device.kind === "keyboard" ? t(locale, "home.keyboard") : t(locale, "home.mouse"), device.transport === "bridge" ? t(locale, "bridge.title") : null]
+          .filter(Boolean)
+          .join(" · ")}
+      </span>
+      {status ? (
+        <DeviceStats status={status} locale={locale} transport={device.transport} />
+      ) : (
+        <span className="om-stats"><span className="om-stat om-muted">{t(locale, "home.openHint")}</span></span>
+      )}
+      <span className="om-device-block-art">
+        <DeviceArt device={device} />
+      </span>
+      <span className={`om-btn${live ? " is-primary" : ""} om-device-block-action`} aria-hidden="true">
+        {t(locale, live ? "home.configure" : "home.open")}
+      </span>
+    </article>
+  );
+}
+
+function AddDeviceBlock({ snapshot }: { snapshot: ControlSnapshot }): ReactNode {
+  const locale = snapshot.preferences.locale;
+  const connect = useConnect(snapshot);
+  return (
+    <article className="om-device-block is-add">
+      <header className="om-device-block-top">
+        <span className="om-device-block-name">{t(locale, "conn.add")}</span>
+      </header>
+      <span className="om-device-block-meta">{t(locale, "empty.body")}</span>
+      <span className="om-device-block-art">
+        <MouseArtworkShowcase reducedMotion={snapshot.preferences.reducedMotion} />
+      </span>
+      <button
+        type="button"
+        className={`om-btn${snapshot.devices.length === 0 ? " is-primary" : ""} om-device-block-action`}
+        disabled={connect.disabled}
+        onClick={connect.run}
+      >
+        <Plus strokeWidth={2} aria-hidden="true" />
+        {connect.busy ? t(locale, "conn.connecting") : t(locale, "conn.add")}
+      </button>
+    </article>
+  );
+}
+
+function DeviceShelf({ snapshot }: { snapshot: ControlSnapshot }): ReactNode {
+  const locale = snapshot.preferences.locale;
+  const track = useRef<HTMLUListElement>(null);
+  const drag = useRef<{ x: number; left: number; moved: boolean } | null>(null);
+  const [state, setState] = useState({ index: 0, overflow: false, start: true, end: true });
+  const devices = snapshot.devices;
+  const count = devices.length + 1;
+  const rtl = typeof document !== "undefined" && document.documentElement.dir === "rtl";
+
+  const measure = useCallback(() => {
+    const element = track.current;
+    if (!element) return;
+    const first = element.firstElementChild as HTMLElement | null;
+    const step = first ? first.offsetWidth + 16 : element.clientWidth;
+    const left = Math.abs(element.scrollLeft);
+    const max = element.scrollWidth - element.clientWidth;
+    setState({
+      index: Math.min(count - 1, Math.round(left / Math.max(1, step))),
+      overflow: max > 4,
+      start: left <= 4,
+      end: left >= max - 4,
+    });
+  }, [count]);
+
+  useEffect(() => {
+    measure();
+    const element = track.current;
+    if (!element) return;
+    const observer = new ResizeObserver(measure);
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [measure]);
+
+  useLayoutEffect(() => {
+    const element = track.current;
+    if (!element) return;
+    const live = element.querySelector<HTMLElement>(".om-device-block.is-live");
+    if (live && element.scrollWidth > element.clientWidth) {
+      live.parentElement?.scrollIntoView({ block: "nearest", inline: "start", behavior: "auto" });
+    } else {
+      element.scrollTo({ left: 0, behavior: "auto" });
+    }
+  }, [count]);
+
+  const scrollToIndex = (index: number): void => {
+    const element = track.current;
+    const item = element?.children[index] as HTMLElement | undefined;
+    if (!element || !item) return;
+    item.scrollIntoView({ block: "nearest", inline: "start", behavior: snapshot.preferences.reducedMotion ? "auto" : "smooth" });
+  };
+
+  const step = (direction: 1 | -1): void => {
+    scrollToIndex(Math.max(0, Math.min(count - 1, state.index + direction)));
+  };
+
+  const onPointerDown = (event: PointerEvent<HTMLUListElement>): void => {
+    if (event.pointerType !== "mouse" || event.button !== 0 || !track.current) return;
+    if ((event.target as HTMLElement).closest(".om-device-menu")) return;
+    drag.current = { x: event.clientX, left: track.current.scrollLeft, moved: false };
+  };
+  const onPointerMove = (event: PointerEvent<HTMLUListElement>): void => {
+    const element = track.current;
+    const current = drag.current;
+    if (!element || !current) return;
+    const dx = event.clientX - current.x;
+    if (!current.moved && Math.abs(dx) < 6) return;
+    if (!current.moved) {
+      current.moved = true;
+      element.setPointerCapture(event.pointerId);
+      element.classList.add("is-dragging");
+    }
+    element.scrollLeft = current.left - dx;
+  };
+  const endDrag = (event: PointerEvent<HTMLUListElement>): void => {
+    const element = track.current;
+    const current = drag.current;
+    drag.current = null;
+    if (!element || !current?.moved) return;
+    element.releasePointerCapture(event.pointerId);
+    element.classList.remove("is-dragging");
+    const swallow = (click: MouseEvent): void => { click.stopPropagation(); click.preventDefault(); };
+    element.addEventListener("click", swallow, { capture: true, once: true });
+    window.setTimeout(() => element.removeEventListener("click", swallow, { capture: true }), 0);
+    measure();
+  };
+
+  const onKeyDown = (event: KeyboardEvent<HTMLUListElement>): void => {
+    if (event.key !== "ArrowRight" && event.key !== "ArrowLeft") return;
+    const items = Array.from(track.current?.querySelectorAll<HTMLElement>(".om-device-block-hit, .om-device-block.is-add .om-device-block-action") ?? []);
+    const index = items.findIndex((node) => node === document.activeElement || node.contains(document.activeElement));
+    if (index === -1) return;
+    const forward = (event.key === "ArrowRight") !== rtl;
+    const next = items[Math.max(0, Math.min(items.length - 1, index + (forward ? 1 : -1)))];
+    if (next) {
+      event.preventDefault();
+      next.focus();
+      next.scrollIntoView({ block: "nearest", inline: "nearest", behavior: snapshot.preferences.reducedMotion ? "auto" : "smooth" });
+    }
+  };
+
+  return (
+    <section className="om-shelf" aria-labelledby="om-shelf-title">
+      <div className="om-shelf-head">
+        <h2 id="om-shelf-title" className="sr-only">{t(locale, "nav.yourDevices")}</h2>
+        {state.overflow ? (
+          <div className="om-shelf-nav">
+            <button type="button" className="om-btn is-icon" aria-label={t(locale, "home.prev")} disabled={state.start} onClick={() => step(rtl ? 1 : -1)}>
+              <ChevronLeft strokeWidth={2} aria-hidden="true" />
+            </button>
+            <button type="button" className="om-btn is-icon" aria-label={t(locale, "home.next")} disabled={state.end} onClick={() => step(rtl ? -1 : 1)}>
+              <ChevronRight strokeWidth={2} aria-hidden="true" />
+            </button>
+          </div>
+        ) : null}
+      </div>
+      <ul
+        ref={track}
+        className="om-shelf-track"
+        onScroll={measure}
+        onPointerDown={onPointerDown}
+        onPointerMove={onPointerMove}
+        onPointerUp={endDrag}
+        onPointerCancel={endDrag}
+        onKeyDown={onKeyDown}
+      >
+        {devices.map((device) => (
+          <li key={device.index} className="om-shelf-item">
+            <DeviceBlock snapshot={snapshot} device={device} />
+          </li>
+        ))}
+        <li className="om-shelf-item">
+          <AddDeviceBlock snapshot={snapshot} />
+        </li>
+      </ul>
+      {state.overflow ? (
+        <div className="om-shelf-dots" role="group" aria-label={t(locale, "nav.yourDevices")}>
+          {[...devices.map((device) => device.name), t(locale, "conn.add")].map((name, index) => (
+            <button
+              key={`${name}-${index}`}
+              type="button"
+              className={index === state.index ? "is-active" : ""}
+              aria-label={name}
+              aria-current={index === state.index ? "true" : undefined}
+              onClick={() => scrollToIndex(index)}
+            />
+          ))}
+        </div>
+      ) : null}
+    </section>
+  );
+}
+
+export function DevicesHome({ snapshot }: { snapshot: ControlSnapshot }): ReactNode {
+  const locale = snapshot.preferences.locale;
+  const hasDevices = snapshot.devices.length > 0;
+  return (
+    <div className={`om-page om-home${hasDevices ? "" : " is-empty"}`}>
+      <header className="om-page-head">
+        <div>
+          <h1>{t(locale, "nav.devices")}</h1>
+          <p className="om-meta">{t(locale, hasDevices ? "home.subtitle" : "empty.title")}</p>
+        </div>
+      </header>
+      <DeviceShelf snapshot={snapshot} />
+    </div>
+  );
+}
diff --git a/src/app/Diagnostics.tsx b/src/features/devices/Diagnostics.tsx
similarity index 88%
rename from src/app/Diagnostics.tsx
rename to src/features/devices/Diagnostics.tsx
index 47004b06..e101dbb0 100644
--- a/src/app/Diagnostics.tsx
+++ b/src/features/devices/Diagnostics.tsx
@@ -1,9 +1,9 @@
-import { displayText } from "../i18n";
+import { displayText } from "../../i18n/index";
 import type { ReactNode } from "react";
-import * as control from "../device/controller";
-import type { ControlSnapshot } from "../device/types";
-import { t, tp } from "../i18n";
-import { Collapsible } from "./ui";
+import * as control from "../../device/controller";
+import type { ControlSnapshot } from "../../device/types";
+import { t, tp } from "../../i18n/index";
+import { Collapsible } from "../../shared/ui";
 
 export function LogitechDetails({ snapshot }: { snapshot: ControlSnapshot }): ReactNode {
   const status = snapshot.status;
@@ -41,7 +41,7 @@ export function LogitechDetails({ snapshot }: { snapshot: ControlSnapshot }): Re
           <div id="logitech-detail-list">
             {items.map(([label, value]) => (
               <div key={label}>
-                <small>{displayText(locale, label).toLocaleUpperCase(locale)}</small>
+                <small>{displayText(locale, label)}</small>
                 <span>{displayText(locale, value)}</span>
               </div>
             ))}
@@ -80,7 +80,7 @@ export function Diagnostics({
           <div id="device-debug-overview" className="device-debug-overview">
             {diagnostics.overview.map(([label, value]) => (
               <div key={label}>
-                <small>{displayText(locale, label).toLocaleUpperCase(locale)}</small>
+                <small>{displayText(locale, label)}</small>
                 <span>{displayText(locale, value)}</span>
               </div>
             ))}
@@ -89,13 +89,14 @@ export function Diagnostics({
             <button
               id="download-diagnostics"
               type="button"
+              className="om-btn"
               disabled={!diagnostics.downloadReady}
               onClick={control.downloadDiagnostics}
             >
               {t(locale, "diag.download")}
             </button>
             {snapshot.captureAvailable ? (
-              <button id="capture-open" type="button" onClick={onOpenCapture}>{t(locale, "diag.verifyFormat")}</button>
+              <button id="capture-open" className="om-btn" type="button" onClick={onOpenCapture}>{t(locale, "diag.verifyFormat")}</button>
             ) : null}
             <span id="diagnostic-download-status" role="status" aria-live="polite">
               {displayText(locale, diagnostics.downloadStatus)}
diff --git a/src/app/KeychronNapeLayers.tsx b/src/features/devices/KeychronNapeLayers.tsx
similarity index 95%
rename from src/app/KeychronNapeLayers.tsx
rename to src/features/devices/KeychronNapeLayers.tsx
index 37eb696b..6fc9ac1a 100644
--- a/src/app/KeychronNapeLayers.tsx
+++ b/src/features/devices/KeychronNapeLayers.tsx
@@ -1,4 +1,4 @@
-import { displayText } from "../i18n";
+import { displayText } from "../../i18n/index";
 import { useEffect, useRef, type ReactNode } from "react";
 import {
   KEYCHRON_NAPE_BUTTON_ACTIONS,
@@ -6,11 +6,11 @@ import {
   keychronLayerLabel,
   type KeychronNapeButtonAction,
 } from "@openmouse/protocol/keychron";
-import * as control from "../device/controller";
-import type { ControlSnapshot, NapeAssignmentControl, StagedNapeAssignment } from "../device/types";
-import { layerLabel, t, tp } from "../i18n";
-import type { InterfaceLocale } from "../interface-preferences";
-import { IconActivate, IconRefresh, IconRunning } from "./icons";
+import * as control from "../../device/controller";
+import type { ControlSnapshot, NapeAssignmentControl, StagedNapeAssignment } from "../../device/types";
+import { layerLabel, t, tp } from "../../i18n/index";
+import type { InterfaceLocale } from "../settings/interface-preferences";
+import { IconActivate, IconRefresh, IconRunning } from "../../shared/icons";
 
 const KEY_ROWS = [
   { col: 2, number: "1", name: "01" },
@@ -97,7 +97,6 @@ function NapeAssignments({ snapshot, layer }: { snapshot: ControlSnapshot; layer
     <div className="profile-button-editor">
       <div className="profile-button-heading">
         <div>
-          <p>{displayText(locale, "BUTTONS")}</p>
           <h2>{t(locale, "prof.assign")}</h2>
           <small>{t(locale, "key.assignBody")}</small>
         </div>
@@ -235,7 +234,7 @@ export function KeychronNapeLayers({ snapshot }: { snapshot: ControlSnapshot }):
           onClick={control.toggleProfilesExpanded}
         >
           <span className="profile-summary-text">
-            <span className="profile-summary-label">{t(locale, "prof.editing")}</span>
+            <span className="profile-summary-label">{t(locale, "prof.editingTag")}</span>
             <strong>{displayText(locale, layerLabel(locale, keychronLayerLabel(editedLayer)))}{displayText(locale, tags ? ` · ${tags}` : "")}</strong>
             <small>{t(locale, "key.layersStored")}</small>
           </span>
@@ -275,10 +274,10 @@ export function KeychronNapeLayers({ snapshot }: { snapshot: ControlSnapshot }):
                     className="profile-row-open"
                     onClick={() => control.openNapeLayer(layer)}
                   >
-                    <span className={`device-dot${running ? "" : " is-idle"}`} />
+                    <span className="profile-slot">{layer}</span>
                     <span className="profile-row-text">
                       <strong>
-                        {displayText(locale, layerLabel(locale, keychronLayerLabel(layer)))}{displayText(locale, rowTags ? ` · ${rowTags}` : "")}
+                        {displayText(locale, layerLabel(locale, keychronLayerLabel(layer)))}{rowTags ? <span className={`om-badge${running ? " is-accent" : ""}`}>{displayText(locale, rowTags)}</span> : null}
                       </strong>
                       <small>
                         {displayText(locale, running ? t(locale, "key.currentLayer") : t(locale, "key.storedLayer"))}
diff --git a/src/app/MagneticButtons.tsx b/src/features/devices/MagneticButtons.tsx
similarity index 96%
rename from src/app/MagneticButtons.tsx
rename to src/features/devices/MagneticButtons.tsx
index 1c529210..80072fbe 100644
--- a/src/app/MagneticButtons.tsx
+++ b/src/features/devices/MagneticButtons.tsx
@@ -1,10 +1,10 @@
-import { displayText } from "../i18n";
-import { useUiLocale } from "./ui-locale";
+import { displayText } from "../../i18n/index";
+import { useUiLocale } from "../../shared/ui-locale";
 import { useEffect, useState, type ReactNode } from "react";
-import * as control from "../device/controller";
-import { t } from "../i18n";
-import type { InterfaceLocale } from "../interface-preferences";
-import type { ControlSnapshot } from "../device/types";
+import * as control from "../../device/controller";
+import { t } from "../../i18n/index";
+import type { InterfaceLocale } from "../settings/interface-preferences";
+import type { ControlSnapshot } from "../../device/types";
 import type { MagneticButtonStatus, MagneticButtonsStatus } from "@openmouse/protocol/drivers/mouse-types";
 
 function Steps({
@@ -319,7 +319,6 @@ export function MagneticButtons({ snapshot }: { snapshot: ControlSnapshot }): Re
             {([0, 1] as const).map((side) => (
               <fieldset key={side} className="superstrike-button-card">
                 <legend>
-                  <span className="superstrike-button-dot" />
                   {displayText(locale, side === 0 ? t(locale, "adv.leftButton") : t(locale, "adv.rightButton"))}
                 </legend>
                 <ButtonControls group={side} magnetic={magnetic} state={magnetic.buttons[side]!} locale={locale} brand={brand} />
@@ -327,7 +326,7 @@ export function MagneticButtons({ snapshot }: { snapshot: ControlSnapshot }): Re
             ))}
           </div>
           <fieldset className="superstrike-button-card superstrike-both-panel">
-            <legend><span className="superstrike-button-dot" />{t(locale, "super.bothPrimary")}</legend>
+            <legend>{t(locale, "super.bothPrimary")}</legend>
             <p>{t(locale, "super.bothBody")}</p>
             <ButtonControls group="both" magnetic={magnetic} state={magnetic.buttons[0]!} locale={locale} brand={brand} />
           </fieldset>
diff --git a/src/app/OverviewPage.tsx b/src/features/devices/OverviewPage.tsx
similarity index 57%
rename from src/app/OverviewPage.tsx
rename to src/features/devices/OverviewPage.tsx
index 7ca15364..a2ffe46b 100644
--- a/src/app/OverviewPage.tsx
+++ b/src/features/devices/OverviewPage.tsx
@@ -1,31 +1,27 @@
-import { displayText } from "../i18n";
-import { useUiLocale } from "./ui-locale";
+import { slotCards } from "../../shared/CardSlot";
+import { displayText } from "../../i18n/index";
+import { useUiLocale } from "../../shared/ui-locale";
 import {
-  ArrowLeft,
   BarChart3,
-  Clock,
   Gauge,
-  ImageUp,
   Keyboard,
   Layers,
   Lightbulb,
   MousePointerClick,
-  Plus,
   Settings2,
-  Wifi,
   type LucideIcon,
 } from "lucide-react";
-import { useEffect, useRef, useState, type KeyboardEvent, type ReactNode } from "react";
-import * as control from "../device/controller";
-import { isNoirE1Status, isNoirKsnakeStatus, isNoirS1Status, noirBrandLabel } from "../device/noir.ts";
-import type { ControlSnapshot, WorkspaceTab } from "../device/types";
-import { t, tp, connectionText, type I18nKey } from "../i18n";
+import { useEffect, useRef, type ReactNode } from "react";
+import * as control from "../../device/controller";
+import { isNoirE1Status, isNoirKsnakeStatus, isNoirS1Status, noirBrandLabel } from "../../device/noir.ts";
+import type { ControlSnapshot, WorkspaceTab } from "../../device/types";
+import { t, tp, connectionText, type I18nKey } from "../../i18n/index";
 import { Diagnostics, LogitechDetails } from "./Diagnostics";
 import { KeychronNapeLayers } from "./KeychronNapeLayers";
-import { Profiles } from "./Profiles";
+import { Profiles } from "../profiles/Profiles";
 import { MagneticButtons } from "./MagneticButtons";
-import { Superstrike } from "./Superstrike";
-import { ButtonMap, buttonMapAvailable } from "./ButtonMap";
+import { Superstrike } from "../superstrike/Superstrike";
+import { ButtonMap, buttonMapAvailable } from "../buttons/ButtonMap";
 import { DpiCard } from "./cards/DpiCard";
 import { KeyboardPanel } from "./cards/KeyboardPanel";
 import { FirmwareCard } from "./cards/FirmwareCard";
@@ -67,11 +63,12 @@ import {
 } from "./cards/AdvancedCards";
 import { cardAvailability } from "./cards/availability";
 import { TeevolutionProfileCard } from "./cards/teevolution/ProfileCard";
-import { deviceImage, deviceImageFilename, isUnknownDevice, showcaseDeviceImageUrls } from "../ui/device-images";
-import { BatteryIcon } from "./ui";
+import { deviceImage } from "../../shared/device-images";
+import { BatteryIcon } from "../../shared/ui";
+import { BatteryHistoryPanel, CurrentSetupPanel, DeviceHero } from "./DeviceHero";
+import { DevicesHome } from "./DevicesHome";
 import { availableKeyboardWorkspaceTabs, availableWorkspaceTab, availableWorkspaceTabs } from "./workspace-tabs";
 
-/** True when the workspace tab is present in the list. */
 function on(tab: WorkspaceTab, tabs: readonly WorkspaceTab[]): boolean {
   return tabs.includes(tab);
 }
@@ -88,7 +85,7 @@ const TAB_ICON: Record<WorkspaceTab, LucideIcon> = {
 
 export function TabIcon({ tab }: { tab: WorkspaceTab }): ReactNode {
   const Icon = TAB_ICON[tab];
-  return <Icon size={13} strokeWidth={1.8} aria-hidden="true" />;
+  return <Icon size={15} strokeWidth={1.8} aria-hidden="true" />;
 }
 
 interface ButtonMarkerPosition {
@@ -138,131 +135,6 @@ function noirE1ButtonMarkerPosition(button: string): ButtonMarkerPosition | null
   return NOIR_E1_BUTTON_MARKER_POSITIONS[button.trim().toLowerCase()] ?? null;
 }
 
-// Device artwork requests go to the Artwork Request discussion category
-// (artwork requests were migrated off GitHub issues into Discussions).
-const ARTWORK_DISCUSSION_URL =
-  "https://github.com/OpenMouse-Project/openmouse/discussions/new?category=artwork-request";
-
-function DeviceShowcase({ snapshot }: {
-  snapshot: ControlSnapshot;
-}): ReactNode {
-  const status = snapshot.status;
-  if (!status) return null;
-  const locale = snapshot.preferences.locale;
-  const image = snapshot.deviceArtwork;
-  const batteryEstimate = control.batteryEstimateParts(status, locale);
-  const [imageFailed, setImageFailed] = useState(false);
-  const [artSize, setArtSize] = useState<{ w: number; h: number } | null>(null);
-
-  const activeDevice = control.getActiveDevice();
-  const needsArtwork = activeDevice && (
-    imageFailed || isUnknownDevice(
-      { vendorId: activeDevice.vendorId, productId: activeDevice.productId } as HIDDevice,
-      status.name,
-    )
-  );
-  const artworkDiscussionHref = `${ARTWORK_DISCUSSION_URL}${status.name ? `&title=${encodeURIComponent(`Artwork request: ${status.name}`)}` : ""}`;
-
-  return (
-    <div className="device-showcase">
-      <h1 className="device-showcase-name">{status.name}</h1>
-      <p className="device-showcase-brand">{displayText(locale, noirBrandLabel(status))}</p>
-      <div className="device-diagram">
-        <div
-          className="device-diagram-canvas"
-          style={{
-            aspectRatio: artSize ? `${artSize.w} / ${artSize.h}` : "1 / 1",
-            width: artSize ? `min(100%, ${Math.round((artSize.w / artSize.h) * 56)}vh)` : "min(100%, 480px)",
-          }}
-          >
-          <div className="device-diagram-art">
-            {image ? (
-              <img
-                className="device-showcase-image"
-                src={image}
-                onLoad={(event) => {
-                  if (event.currentTarget.naturalWidth > 0) {
-                    setArtSize({ w: event.currentTarget.naturalWidth, h: event.currentTarget.naturalHeight });
-                  }
-                }}
-                onError={(event) => {
-                  event.currentTarget.onerror = null;
-                  event.currentTarget.src = deviceImage(null);
-                  setImageFailed(true);
-                }}
-                alt={status.name}
-              />
-            ) : null}
-          </div>
-        </div>
-      </div>
-      <div className="device-showcase-status-pill" aria-label={displayText(locale, "Device status")}>
-        <span className="device-showcase-status-primary">
-          <span className="device-showcase-dot" aria-hidden="true" />
-          {t(locale, "side.connected")}
-        </span>
-        {status.connectionType ? (
-          <>
-            <span className="device-showcase-status-separator" aria-hidden="true">·</span>
-            <span className="device-showcase-status-muted">{displayText(locale, connectionText(locale, status.connectionType))}</span>
-          </>
-        ) : null}
-        {status.dpi > 0 ? (
-          <>
-            <span className="device-showcase-status-separator" aria-hidden="true">·</span>
-            <span className="device-showcase-status-item">
-              <span className="device-showcase-status-label">{displayText(locale, "DPI")}</span>
-              <span className="device-showcase-status-value">{displayText(locale, status.dpi.toLocaleString())}</span>
-            </span>
-          </>
-        ) : null}
-        {status.batteryPercent !== null ? (
-          <>
-            <span className="device-showcase-status-separator" aria-hidden="true">·</span>
-            <span className="device-showcase-status-item">
-              <BatteryIcon percent={status.batteryPercent} state={status.batteryState} />
-              <span className="device-showcase-status-value">{status.batteryPercent}%</span>
-              {batteryEstimate ? (
-                <span className="device-showcase-status-muted" title={displayText(locale, `${displayText(locale, batteryEstimate.time)} ${displayText(locale, batteryEstimate.label)}`)}>
-                  {displayText(locale, batteryEstimate.time)}
-                </span>
-              ) : null}
-            </span>
-          </>
-        ) : null}
-        {status.pollingRateHz > 0 ? (
-          <>
-            <span className="device-showcase-status-separator" aria-hidden="true">·</span>
-            <span className="device-showcase-status-item">
-              <span className="device-showcase-status-value">{displayText(locale, status.pollingRateHz.toLocaleString())} Hz</span>
-            </span>
-          </>
-        ) : null}
-        {status.activeProfile != null ? (
-          <>
-            <span className="device-showcase-status-separator" aria-hidden="true">·</span>
-            <span className="device-showcase-status-item">
-              <span className="device-showcase-status-label">{displayText(locale, "Profile")}</span>
-              <span className="device-showcase-status-value">{status.activeProfile}</span>
-            </span>
-          </>
-        ) : null}
-      </div>
-      {needsArtwork ? (
-        <a
-          className="artwork-upload-trigger"
-          href={artworkDiscussionHref}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <ImageUp size={14} strokeWidth={2.2} aria-hidden="true" />
-          {t(locale, "artreq.request" as I18nKey)}
-        </a>
-      ) : null}
-    </div>
-  );
-}
-
 function M2NexProfileOverview({ snapshot }: { snapshot: ControlSnapshot }): ReactNode {
   const status = snapshot.status;
   const locale = snapshot.preferences.locale;
@@ -436,99 +308,24 @@ export function DeviceShowcaseSidebar({ snapshot }: { snapshot: ControlSnapshot
   );
 }
 
-const SHOWCASE_IMAGES = showcaseDeviceImageUrls();
-const SHOWCASE_INTERVAL_MS = 3800;
-
-function MouseArtworkShowcase({ reducedMotion }: { reducedMotion: boolean }): ReactNode {
-  const __uiLocale = useUiLocale();
-  const [index, setIndex] = useState(0);
-
-  useEffect(() => {
-    if (reducedMotion || SHOWCASE_IMAGES.length <= 1) return;
-    const id = window.setInterval(() => {
-      setIndex((current) => (current + 1) % SHOWCASE_IMAGES.length);
-    }, SHOWCASE_INTERVAL_MS);
-    return () => window.clearInterval(id);
-  }, [reducedMotion]);
-
-  return (
-    <div className="add-device-mouse-showcase">
-      {SHOWCASE_IMAGES.map((src, i) => (
-        <img
-          key={src}
-          src={src}
-          alt={displayText(__uiLocale, "")}
-          draggable={false}
-          className={`add-device-mouse-showcase-frame${i === index ? " is-active" : ""}`}
-        />
-      ))}
-    </div>
-  );
-}
-
-function AddDeviceCard({ snapshot }: { snapshot: ControlSnapshot }): ReactNode {
-  const locale = snapshot.preferences.locale;
-  const [busy, setBusy] = useState(false);
-  const label = busy ? t(locale, "conn.connecting") : t(locale, "conn.addMouse");
-  const disabled = busy || snapshot.connectDisabled;
-  return (
-    <div className={`device-tile add-device-tile${busy ? " is-busy" : ""}`} aria-label={displayText(locale, label)}>
-      <span className="device-tile-name">{displayText(locale, label)}</span>
-      <div className="device-tile-visual" aria-hidden="true">
-        <MouseArtworkShowcase reducedMotion={snapshot.preferences.reducedMotion} />
-      </div>
-      <button
-        type="button"
-        className="add-device-button"
-        disabled={disabled}
-        onClick={() => {
-          if (busy) return;
-          setBusy(true);
-          void control.connect().finally(() => setBusy(false));
-        }}
-      >
-        <Plus size={16} strokeWidth={2.2} aria-hidden="true" />
-        {displayText(locale, label)}
-      </button>
-    </div>
-  );
-}
-
-function OverviewEmpty({ snapshot, compact = false }: { snapshot: ControlSnapshot; compact?: boolean }): ReactNode {
-  const locale = snapshot.preferences.locale;
-  return (
-    <div className={`welcome-screen${compact ? " is-compact" : ""}`}>
-      <div className="welcome-aurora" aria-hidden="true">
-        <i /><i /><i />
-      </div>
-      <div className="welcome-hero">
-        <h2 className="welcome-title">{t(locale, "empty.title")}</h2>
-        <p className="welcome-body">{t(locale, "empty.body")}</p>
-        {!compact ? (
-          <div className="add-device-grid">
-            <AddDeviceCard snapshot={snapshot} />
-          </div>
-        ) : null}
-      </div>
-    </div>
-  );
-}
-
 function OverviewContent({ snapshot }: {
   snapshot: ControlSnapshot;
 }): ReactNode {
   const __uiLocale = useUiLocale();
   const status = snapshot.status;
-  if (!status) return <OverviewEmpty snapshot={snapshot} />;
+  if (!status) return null;
   const has = cardAvailability(snapshot);
   const powerOverview = status.ui?.powerOverview === true;
   return (
     <>
       <M2NexProfileOverview snapshot={snapshot} />
-      <DeviceShowcase snapshot={snapshot} />
-      <section id="firmware-update-settings" className="device-data" aria-label={displayText(__uiLocale, "Firmware update")}>
-        <FirmwareCard snapshot={snapshot} />
-      </section>
+      <CurrentSetupPanel snapshot={snapshot} />
+      <div className={`om-overview-grid${status.batteryPercent === null ? " is-single" : ""}`}>
+        <BatteryHistoryPanel snapshot={snapshot} />
+        <section id="firmware-update-settings" className="device-data" aria-label={displayText(__uiLocale, "Firmware update")}>
+          <FirmwareCard snapshot={snapshot} />
+        </section>
+      </div>
       {powerOverview && (has.teevolutionDpiLighting || has.sleep) ? (
         <section id="power-overview-settings" className="settings-grid device-data" aria-label={displayText(__uiLocale, "Power settings")}>
           {has.teevolutionDpiLighting ? <DpiLightingCard snapshot={snapshot} /> : null}
@@ -644,6 +441,7 @@ export function Workspace({
     && (status.hapticIntensity != null || status.wheelMode != null || status.friendlyName != null || status.hostCount != null);
   const showDiagnostics = device && on(tab, ["advanced"]);
   const showOverview = on(tab, ["overview"]);
+  const showButtonMarkers = on(tab, ["buttons"]) && isNoirKsnakeStatus(status) && status.buttonMappings != null;
 
   const anyPanel = performance.length > 0 || macro.length > 0 || advanced.length > 0 || lighting.length > 0
     || showProfiles || showTeevolutionProfiles || showNapeLayers || showSuperstrike || showMagnetic
@@ -681,13 +479,13 @@ export function Workspace({
             "performance-layout device-data",
             slotsAvailable || stagesAvailable ? "has-dpi-slots" : "",
             // The button map has its own mouse, so the side panel's would be a second one.
-            showButtonMap ? "has-no-sidebar" : "",
+            showButtonMap || !showButtonMarkers ? "has-no-sidebar" : "",
           ].filter(Boolean).join(" ")}
           data-workspace-host
           role="tabpanel"
           aria-label={displayText(locale, "Mouse settings")}
         >
-          {device && !showButtonMap ? (
+          {device && !showButtonMap && showButtonMarkers ? (
             <aside className="performance-sidebar">
               <DeviceShowcaseSidebar snapshot={snapshot} />
             </aside>
@@ -697,8 +495,8 @@ export function Workspace({
             {showSuperstrike ? <Superstrike snapshot={snapshot} /> : null}
             {showButtonMap ? <ButtonMap snapshot={snapshot} /> : null}
             {performance.length > 0 ? (
-              <div className="performance-controls">
-                {performance}
+              <div className="performance-controls card-flow">
+                {slotCards(performance)}
               </div>
             ) : null}
           </div>
@@ -708,31 +506,31 @@ export function Workspace({
       {macro.length > 0 ? (
         <section
           id="macro-settings"
-          className="settings-grid device-data"
+          className="settings-grid card-flow device-data"
           data-workspace-host
           role="tabpanel"
           aria-labelledby="workspace-tab-macro"
           aria-label={displayText(locale, "Macro settings")}
         >
-          {macro}
+          {slotCards(macro)}
         </section>
       ) : null}
 
       {lighting.length > 0 ? (
         <section
           id="lighting-settings"
-          className="settings-grid device-data"
+          className="settings-grid card-flow device-data"
           data-workspace-host
           role="tabpanel"
           aria-label={displayText(locale, "Lighting settings")}
         >
-          {lighting}
+          {slotCards(lighting)}
         </section>
       ) : null}
 
       {showLogitechDetails ? <LogitechDetails snapshot={snapshot} /> : null}
       {showMxMaster ? (
-        <section id="logitech-mx-master-settings" className="settings-grid device-data" data-workspace-host role="tabpanel" aria-label={displayText(locale, "MX Master settings")}>
+        <section id="logitech-mx-master-settings" className="settings-grid card-flow device-data" data-workspace-host role="tabpanel" aria-label={displayText(locale, "MX Master settings")}>
           <MxMasterCards snapshot={snapshot} />
         </section>
       ) : null}
@@ -741,13 +539,12 @@ export function Workspace({
       {advanced.length > 0 ? (
         <section
           id="pulsar-advanced"
-          className={`device-data${snapshot.traits.eggControls ? " egg-advanced-layout" : ""}`}
+          className={`device-data card-flow${snapshot.traits.eggControls ? " egg-advanced-layout" : ""}`}
           data-workspace-host
           role="tabpanel"
           aria-label={displayText(locale, "Device settings")}
-          style={{ display: "grid" }}
         >
-          {advanced}
+          {slotCards(advanced)}
         </section>
       ) : null}
 
@@ -765,112 +562,6 @@ export function Workspace({
   );
 }
 
-/** The authorized-device list shown when no device is active. */
-function DeviceListView({ snapshot }: { snapshot: ControlSnapshot }): ReactNode {
-  const devices = snapshot.devices;
-  const locale = snapshot.preferences.locale;
-
-  if (devices.length === 0) {
-    return <OverviewEmpty snapshot={snapshot} />;
-  }
-
-  return (
-    <div className="welcome-with-devices">
-      <section className="detected-devices" aria-label={t(locale, "side.connectedDevices")}>
-        <ul className="device-grid">
-            {(() => {
-              const ordered = devices.slice();
-              const connectedIndex = ordered.findIndex((device) => device.selected);
-              if (connectedIndex !== -1 && ordered.length > 1) {
-                const [connected] = ordered.splice(connectedIndex, 1);
-                ordered.splice(Math.floor(ordered.length / 2), 0, connected);
-              }
-              return ordered.map((device) => {
-              const connected = device.selected
-                && (snapshot.deviceStatus !== null || snapshot.keyboard !== null);
-              const liveStatus = connected ? snapshot.deviceStatus : null;
-              const pollText = liveStatus?.pollingRateHz ? `${liveStatus.pollingRateHz} Hz` : "–";
-              const batteryText = liveStatus?.batteryPercent != null ? `${liveStatus.batteryPercent}%` : "–%";
-              const imageSrc = deviceImage({ vendorId: device.vendorId, productId: device.productId } as HIDDevice, device.name);
-              const imageFilename = deviceImageFilename(device.name);
-              const imageClass = imageFilename === "noir-m2-nex.png" || imageFilename === "noir-s1.png" || imageFilename === "noir-e1.png"
-                ? " device-tile-image-is-portrait"
-                : "";
-              return (
-                <li
-                className={`device-tile${connected ? " is-connected" : ""}${device.kind === "keyboard" ? " is-keyboard" : ""}`}
-                key={device.index}
-                role="button"
-                tabIndex={0}
-                title={displayText(locale, `Open ${device.name}`)}
-                onClick={() => void control.openDeviceOverview(device.index)}
-                onKeyDown={(event) => {
-                  if (event.key === "Enter" || event.key === " ") {
-                    event.preventDefault();
-                    void control.openDeviceOverview(device.index);
-                  }
-                }}
-              >
-                  <span className="device-tile-name">{device.name}</span>
-                  {device.transport === "bridge" ? (
-                    <span className="device-tile-transport" title={displayText(locale, "Connected through OpenMouse Bridge")}>
-                      Bridge
-                    </span>
-                  ) : null}
-                  <div className="device-tile-stats" aria-label={displayText(locale, "Device status")}>
-                    <span className="device-tile-stat">
-                      <Wifi className="device-tile-stat-icon" strokeWidth={2} aria-hidden="true" />
-                    </span>
-                    <span className="device-tile-stat">
-                      <Clock className="device-tile-stat-icon" strokeWidth={1.8} aria-hidden="true" />
-                      <span className="device-tile-stat-text">{displayText(locale, pollText)}</span>
-                    </span>
-                    <span className="device-tile-stat">
-                      <BatteryIcon
-                        percent={liveStatus?.batteryPercent != null ? liveStatus.batteryPercent : null}
-                        state={liveStatus?.batteryState ?? "Unknown"}
-                      />
-                      <span className="device-tile-stat-text">{displayText(locale, batteryText)}</span>
-                    </span>
-                  </div>
-                  <div className="device-tile-visual">
-                    <img
-                      className={`device-tile-image${imageClass}`}
-                      src={imageSrc}
-                      alt={device.name}
-                      loading="lazy"
-                      draggable={false}
-                      onError={(event) => {
-                        event.currentTarget.onerror = null;
-                        event.currentTarget.src = deviceImage(null);
-                      }}
-                    />
-                  </div>
-                  <button
-                    type="button"
-                    className="device-tile-gear"
-                    aria-label={displayText(locale, "Open device settings")}
-                    title={displayText(locale, "Open device settings")}
-                    onClick={(event) => {
-                      event.stopPropagation();
-                      void control.openDeviceOverview(device.index);
-                    }}
-                  >
-                    <Settings2 size={16} strokeWidth={1.7} aria-hidden="true" />
-                  </button>
-                </li>
-              );
-            });
-            })()}
-            <li key="add-mouse">
-              <AddDeviceCard snapshot={snapshot} />
-            </li>
-          </ul>
-        </section>
-    </div>
-  );
-}
-
 /** The device overview: status, workspace tabs and the active device's cards. */
 export function OverviewPage({
   snapshot,
@@ -884,7 +575,6 @@ export function OverviewPage({
   const status = snapshot.status;
   const panel = useRef<HTMLElement>(null);
   const { preferences } = snapshot;
-  const locale = preferences.locale;
 
   const tabs = snapshot.keyboard ? availableKeyboardWorkspaceTabs(snapshot.keyboard.family) : availableWorkspaceTabs(status !== null, cardAvailability(snapshot), {
     hideLighting: isNoirKsnakeStatus(status),
@@ -908,86 +598,32 @@ export function OverviewPage({
   }, [snapshot.workspaceTab, workspaceTab]);
 
   const showingDeviceDashboard = (status !== null || snapshot.keyboard !== null)
-    && (snapshot.deviceView === "device" || snapshot.previewMode !== null);
+    && snapshot.deviceView === "device";
 
-  // The tablist renders `profiles` in its own nav slot at the end, so arrow-key
-  // navigation has to follow that visible order rather than WORKSPACE_TAB_ORDER.
   const visibleTabs: readonly WorkspaceTab[] = tabs.includes("profiles")
     ? [...tabs.filter((tab) => tab !== "profiles"), "profiles"]
     : [...tabs];
 
-  const onTabKey = (event: KeyboardEvent<HTMLButtonElement>, current: WorkspaceTab): void => {
-    const index = visibleTabs.indexOf(current);
-    let next: number;
-    if (event.key === "ArrowRight") next = (index + 1) % visibleTabs.length;
-    else if (event.key === "ArrowLeft") next = (index - 1 + visibleTabs.length) % visibleTabs.length;
-    else if (event.key === "Home") next = 0;
-    else if (event.key === "End") next = visibleTabs.length - 1;
-    else return;
-    event.preventDefault();
-    control.setWorkspaceTab(visibleTabs[next]!);
-    const button = document.querySelector<HTMLButtonElement>(`#workspace-tab-${visibleTabs[next]}`);
-    button?.focus();
-  };
-
   return (
-    <section className="page page-overview" ref={panel}>
+    <section className={`page page-overview${showingDeviceDashboard ? " om-page om-device-page" : ""}`} ref={panel}>
       {showingDeviceDashboard ? (
         <>
-          <nav className="device-tabs-bar" role="tablist" aria-label={t(locale, "panel.deviceSections")}>
-            <button
-              type="button"
-              className="device-tab-back"
-              onClick={() => control.showDeviceList()}
-            >
-              <ArrowLeft size={13} strokeWidth={1.8} aria-hidden="true" />
-              {t(locale, "common.back")}
-            </button>
-            {status === null && snapshot.keyboard === null ? null : (
-              <>
-                {(tabs.filter((tab) => tab !== "profiles")).map((tab) => (
-                  <button
-                    key={tab}
-                    id={`workspace-tab-${tab}`}
-                    type="button"
-                    role="tab"
-                    className={`device-tab-pill${workspaceTab === tab ? " active" : ""}`}
-                    aria-selected={workspaceTab === tab}
-                    tabIndex={workspaceTab === tab ? 0 : -1}
-                    onClick={() => control.setWorkspaceTab(tab)}
-                    onKeyDown={(event) => onTabKey(event, tab)}
-                  >
-                    <TabIcon tab={tab} />
-                    {t(locale, `tab.${tab}` as I18nKey)}
-                  </button>
-                ))}
-                {tabs.includes("profiles") ? (
-                  <button
-                    type="button"
-                    role="tab"
-                    id="workspace-tab-profiles"
-                    className={`device-tab-pill device-tab-profiles-nav${workspaceTab === "profiles" ? " active" : ""}`}
-                    aria-selected={workspaceTab === "profiles"}
-                    tabIndex={workspaceTab === "profiles" ? 0 : -1}
-                    onClick={() => control.setWorkspaceTab("profiles")}
-                    onKeyDown={(event) => onTabKey(event, "profiles")}
-                  >
-                    <TabIcon tab="profiles" />
-                    {t(locale, "tab.profiles")}
-                  </button>
-                ) : null}
-              </>
+          <DeviceHero
+            snapshot={snapshot}
+            tabs={status === null && snapshot.keyboard === null ? [] : visibleTabs}
+            activeTab={workspaceTab}
+            tabIcon={(tab) => <TabIcon tab={tab} />}
+          />
+          <div className="om-device-body" role="tabpanel" aria-labelledby={`workspace-tab-${workspaceTab}`}>
+            {status === null && snapshot.keyboard !== null ? (
+              <KeyboardPanel snapshot={workspaceSnapshot} />
+            ) : (
+              <Workspace snapshot={workspaceSnapshot} onOpenCapture={onOpenCapture} onShareProfile={onShareProfile} />
             )}
-          </nav>
-
-          {status === null && snapshot.keyboard !== null ? (
-            <KeyboardPanel snapshot={workspaceSnapshot} />
-          ) : (
-            <Workspace snapshot={workspaceSnapshot} onOpenCapture={onOpenCapture} onShareProfile={onShareProfile} />
-          )}
+          </div>
         </>
       ) : (
-        <DeviceListView snapshot={snapshot} />
+        <DevicesHome snapshot={snapshot} />
       )}
     </section>
   );
diff --git a/src/battery-history.test.ts b/src/features/devices/battery-history.test.ts
similarity index 100%
rename from src/battery-history.test.ts
rename to src/features/devices/battery-history.test.ts
diff --git a/src/battery-history.ts b/src/features/devices/battery-history.ts
similarity index 96%
rename from src/battery-history.ts
rename to src/features/devices/battery-history.ts
index b8347731..9de8a27f 100644
--- a/src/battery-history.ts
+++ b/src/features/devices/battery-history.ts
@@ -37,9 +37,6 @@ function pruneSamples(stored: unknown, cutoff: number): BatterySample[] {
     && ((sample as BatterySample).mode === "charging" || (sample as BatterySample).mode === "discharging"));
 }
 
-// In-memory copy of each device's samples. Renders read from here instead of
-// parsing storage on every frame; device updates refresh it via
-// recordBatterySample below.
 const memorySamples = new Map<string, BatterySample[]>();
 
 export function saveBatterySample(
@@ -67,7 +64,6 @@ export function saveBatterySample(
     try {
       storage.setItem(STORAGE_KEY, JSON.stringify(history));
     } catch {
-      // Estimates remain optional when browser storage is unavailable or full.
     }
   }
   return retainedSamples;
diff --git a/src/app/cards/AdvancedCards.tsx b/src/features/devices/cards/AdvancedCards.tsx
similarity index 95%
rename from src/app/cards/AdvancedCards.tsx
rename to src/features/devices/cards/AdvancedCards.tsx
index 91883f0a..fe93f562 100644
--- a/src/app/cards/AdvancedCards.tsx
+++ b/src/features/devices/cards/AdvancedCards.tsx
@@ -1,5 +1,5 @@
-import { displayText } from "../../i18n";
-import { useUiLocale } from "../ui-locale";
+import { displayText } from "../../../i18n/index";
+import { useUiLocale } from "../../../shared/ui-locale";
 import { useEffect, useRef, useState, type ReactNode } from "react";
 import { Plus, Save, Trash2 } from "lucide-react";
 import {
@@ -23,8 +23,8 @@ import {
 import { teevolutionSensorModeUi } from "@openmouse/protocol/teevolution";
 import type { KsnakeMacroProfile, KsnakeMacroStep } from "@openmouse/protocol/ksnake";
 import type { WallhackMacroStep } from "@openmouse/protocol/wallhack";
-import { isPulsarProProtocol } from "../../device/traits";
-import { isNoirKsnakeStatus } from "../../device/noir.ts";
+import { isPulsarProProtocol } from "../../../device/traits";
+import { isNoirKsnakeStatus } from "../../../device/noir.ts";
 import {
   SLX_CLICK_ANALOG,
   SLX_CLICK_MECHANICAL,
@@ -36,15 +36,15 @@ import {
   slxProfiles,
   slxTmr,
   tmrStepsToMm,
-} from "../../device/finalmouse-slx.ts";
-import { lunafurySettingLabel, lunafuryTrackingVisible } from "../../device/lunafury-labels.ts";
-import * as control from "../../device/controller";
-import { PULSAR_SLEEP_OPTIONS } from "../../device/controller";
-import { selectableValues, sleepLabel, sleepParts, sleepTotalSeconds, snapCpiToDevice, valuesWithCurrent, KEYCHRON_SLEEP_MAX_HOURS, KEYCHRON_SLEEP_MAX_SECONDS, KEYCHRON_SLEEP_MIN_SECONDS, type CpiLimits } from "../../device/options";
-import type { ControlSnapshot } from "../../device/types";
-import { t, tp } from "../../i18n";
-import type { InterfaceLocale } from "../../interface-preferences";
-import { Collapsible, OptionMenu, Segmented, StepperSlider, SwitchButton, SwitchRow } from "../ui";
+} from "../../../device/finalmouse-slx.ts";
+import { lunafurySettingLabel, lunafuryTrackingVisible } from "../../../device/lunafury-labels.ts";
+import * as control from "../../../device/controller";
+import { PULSAR_SLEEP_OPTIONS } from "../../../device/controller";
+import { selectableValues, sleepLabel, sleepParts, sleepTotalSeconds, snapCpiToDevice, valuesWithCurrent, KEYCHRON_SLEEP_MAX_HOURS, KEYCHRON_SLEEP_MAX_SECONDS, KEYCHRON_SLEEP_MIN_SECONDS, type CpiLimits } from "../../../device/options";
+import type { ControlSnapshot } from "../../../device/types";
+import { t, tp } from "../../../i18n/index";
+import type { InterfaceLocale } from "../../settings/interface-preferences";
+import { Collapsible, OptionMenu, Segmented, StepperSlider, SwitchButton, SwitchRow } from "../../../shared/ui";
 
 function signalWord(locale: InterfaceLocale, strength: number): string {
   const keys = ["adv.signal0", "adv.signal1", "adv.signal2", "adv.signal3", "adv.signal4"] as const;
@@ -143,7 +143,7 @@ export function SignalCard({ snapshot }: { snapshot: ControlSnapshot }): ReactNo
   return (
     <article id="signal-settings" className="setting-card">
       <div className="setting-heading compact">
-        <div><p>{displayText(locale, "WIRELESS")}</p><h2>{t(locale, "adv.signal")}</h2></div>
+        <div><h2>{t(locale, "adv.signal")}</h2></div>
         <output id="signal-output">{displayText(locale, unavailable ? "—" : `${strength}/4`)}</output>
       </div>
       <small id="signal-detail" className="setting-note">
@@ -161,7 +161,7 @@ export function DongleLedCard({ snapshot }: { snapshot: ControlSnapshot }): Reac
   return (
     <article id="dongle-led-settings" className={`setting-card${staged ? " is-staged" : ""}`} data-pending-key="dongle-led">
       <div className="setting-heading compact">
-        <div><p>{displayText(locale, "WIRELESS")}</p><h2>{t(locale, "adv.dongleLed")}</h2></div>
+        <div><h2>{t(locale, "adv.dongleLed")}</h2></div>
         <SwitchButton
           id="dongle-led-toggle"
           label={t(locale, "adv.dongleLed")}
@@ -185,7 +185,7 @@ export function DebounceCard({ snapshot }: { snapshot: ControlSnapshot }): React
     const staged = snapshot.pending.keys.includes("debounce");
     return (
       <article id="debounce-settings" className={`setting-card${staged ? " is-staged" : ""}`}>
-        <div className="setting-heading compact"><div><p>{displayText(locale, "CLICK")}</p><h2>{t(locale, "adv.debounce")}</h2></div></div>
+        <div className="setting-heading compact"><div><h2>{t(locale, "adv.debounce")}</h2></div></div>
         <StepperSlider
           id="atk-debounce-slider"
           label={t(locale, "adv.debounceDelay")}
@@ -221,7 +221,7 @@ export function DebounceCard({ snapshot }: { snapshot: ControlSnapshot }): React
   const staged = snapshot.pending.keys.includes("debounce");
   return (
     <article id="debounce-settings" className={`setting-card${staged ? " is-staged" : ""}`}>
-      <div className="setting-heading compact"><div><p>{displayText(locale, "CLICK")}</p><h2>{t(locale, "adv.debounce")}</h2></div></div>
+      <div className="setting-heading compact"><div><h2>{t(locale, "adv.debounce")}</h2></div></div>
       <OptionMenu
         id="debounce-select"
         ariaLabel={t(locale, "adv.debounce")}
@@ -275,7 +275,7 @@ export function SleepCard({ snapshot }: { snapshot: ControlSnapshot }): ReactNod
   return (
     <article id="sleep-settings" className={`setting-card${staged ? " is-staged" : ""}`}>
       <div className="setting-heading compact">
-        <div><p>{displayText(locale, "POWER")}</p><h2>{t(locale, "adv.autoSleep")}</h2></div>
+        <div><h2>{t(locale, "adv.autoSleep")}</h2></div>
         {canDisable ? (
           <SwitchButton
             id="sleep-toggle"
@@ -314,7 +314,7 @@ export function KsnakeScrollCard({ snapshot }: { snapshot: ControlSnapshot }): R
   return (
     <article id="ksnake-scroll-settings" className={`setting-card${staged ? " is-staged" : ""}`}>
       <div className="setting-heading compact">
-        <div><p>{t(locale, "adv.scrollWheel")}</p><h2>{t(locale, "adv.scrollDirection")}</h2></div>
+        <div><h2>{t(locale, "adv.scrollDirection")}</h2></div>
       </div>
       <div className="button-map-list">
         <label className="button-map-row" htmlFor="ksnake-scroll-direction">
@@ -356,7 +356,7 @@ export function LowPowerCard({ snapshot }: { snapshot: ControlSnapshot }): React
   const staged = snapshot.pending.keys.includes("low-power");
   return (
     <article id="low-power-settings" className={`setting-card${staged ? " is-staged" : ""}`}>
-      <div className="setting-heading compact"><div><p>{displayText(locale, "POWER")}</p><h2>{t(locale, "adv.lowPower")}</h2></div></div>
+      <div className="setting-heading compact"><div><h2>{t(locale, "adv.lowPower")}</h2></div></div>
       <OptionMenu
         id="low-power-select"
         ariaLabel={t(locale, "adv.lowPower")}
@@ -421,7 +421,7 @@ export function ProcessingCard({ snapshot }: { snapshot: ControlSnapshot }): Rea
 
   return (
     <article id="processing-settings" className="setting-card">
-      <div className="setting-heading compact"><div><p>{displayText(locale, "SENSOR")}</p><h2>{t(locale, "adv.processing")}</h2></div></div>
+      <div className="setting-heading compact"><div><h2>{t(locale, "adv.processing")}</h2></div></div>
 
       {sensorUi && teevolutionProfile ? (
         <div id="teevolution-sensor-mode-row" className="field-label spaced">
@@ -649,7 +649,7 @@ export function DpiLightingCard({ snapshot }: { snapshot: ControlSnapshot }): Re
   const speedMax = hint?.speed.at(-1) ?? profile!.dpiLighting.speed.max;
   const locale = snapshot.preferences.locale;
   const lightMode = status.dpiLedMode ?? 0;
-  const powerOverview = status.ui?.powerOverview === true;
+
   const staged = snapshot.pending.keys.some((key) => key.startsWith("teevolution-dpi-light-") || key === "dpi-light-sleep");
   return (
     <article
@@ -657,7 +657,7 @@ export function DpiLightingCard({ snapshot }: { snapshot: ControlSnapshot }): Re
       className={`setting-card${staged ? " is-staged" : ""}`}
       data-pending-key="teevolution-dpi-light-mode teevolution-dpi-light-brightness teevolution-dpi-light-speed dpi-light-sleep"
     >
-      <div className="setting-heading compact"><div><p>{displayText(locale, powerOverview ? "POWER" : "LIGHTING")}</p><h2>{t(locale, "adv.dpiIndicator")}</h2></div></div>
+      <div className="setting-heading compact"><div><h2>{t(locale, "adv.dpiIndicator")}</h2></div></div>
       <div className="field-label">
         <span>{t(locale, "adv.effect")}</span>
         <OptionMenu
@@ -754,7 +754,7 @@ export function NinjutsoSensorCard({ snapshot }: { snapshot: ControlSnapshot }):
           className="setting-card"
           data-pending-key="ninjutso-system ninjutso-optical"
         >
-          <div className="setting-heading"><div><p>{displayText(locale, "NINJAFORCE · SENSOR")}</p><h2>{t(locale, "adv.sensorPerf")}</h2></div></div>
+          <div className="setting-heading"><div><h2>{t(locale, "adv.sensorPerf")}</h2></div></div>
           {status.ninjutsoSystemModes?.length ? (
             <div id="ninjutso-system-row">
               <div className="setting-heading tight"><div><h2>{t(locale, "adv.systemMode")}</h2></div></div>
@@ -801,7 +801,7 @@ export function NinjutsoClickCard({ snapshot }: { snapshot: ControlSnapshot }):
           className="setting-card"
           data-pending-key="ninjutso-hyper ninjutso-slam"
         >
-          <div className="setting-heading"><div><p>{displayText(locale, "NINJAFORCE · CLICKS")}</p><h2>{t(locale, "adv.clickBehavior")}</h2></div></div>
+          <div className="setting-heading"><div><h2>{t(locale, "adv.clickBehavior")}</h2></div></div>
           <SwitchRow
             id="ninjutso-hyper-toggle"
             label={displayText(locale, "HyperClick")}
@@ -845,7 +845,7 @@ export function IncottCard({ snapshot }: { snapshot: ControlSnapshot }): ReactNo
       data-pending-key="incott-receiver-led incott-fire-key"
     >
       <div className="setting-heading compact">
-        <div><p>INCOTT</p><h2>{t(locale, "adv.receiverRapidFire")}</h2></div>
+        <div><h2>{t(locale, "adv.receiverRapidFire")}</h2></div>
       </div>
       {/* Absent over the cable: there is no dongle to light up. */}
       {status.incottReceiverLedMode != null ? (
@@ -917,7 +917,7 @@ export function FinalmouseCard({ snapshot }: { snapshot: ControlSnapshot }): Rea
       className={`setting-card${staged ? " is-staged" : ""}`}
       data-pending-key="finalmouse-dongle-led finalmouse-tournament-scroll finalmouse-tournament-timeout"
     >
-      <div className="setting-heading compact"><div><p>FINALMOUSE</p><h2>{t(locale, "adv.dongleTournament")}</h2></div></div>
+      <div className="setting-heading compact"><div><h2>{t(locale, "adv.dongleTournament")}</h2></div></div>
       <div className="field-label">
         <span>{t(locale, "adv.dongleLed")}</span>
         <OptionMenu
@@ -1085,7 +1085,7 @@ export function TmrDsCard({ snapshot }: { snapshot: ControlSnapshot }): ReactNod
       className={`setting-card${staged ? " is-staged" : ""}`}
       data-pending-key="finalmouse-click-mode finalmouse-tmr"
     >
-      <div className="setting-heading compact"><div><p>FINALMOUSE</p><h2>{t(locale, "tmr.title")}</h2></div></div>
+      <div className="setting-heading compact"><div><h2>{t(locale, "tmr.title")}</h2></div></div>
       <Segmented
         className="two"
         ariaLabel={t(locale, "tmr.title")}
@@ -1122,7 +1122,7 @@ export function PerfectPollingCard({ snapshot }: { snapshot: ControlSnapshot }):
   return (
     <article id="finalmouse-perfect-polling" className="setting-card">
       <div className="setting-heading compact">
-        <div><p>FINALMOUSE</p><h2>{t(locale, "pp.title")}</h2></div>
+        <div><h2>{t(locale, "pp.title")}</h2></div>
         <output id="perfect-polling-output">{t(locale, "pp.enabled")}</output>
       </div>
       <div className="stat-row">
@@ -1156,7 +1156,7 @@ export function FinalmouseProfilesCard({ snapshot }: { snapshot: ControlSnapshot
       className={`setting-card${staged ? " is-staged" : ""}`}
       data-pending-key="finalmouse-profile"
     >
-      <div className="setting-heading compact"><div><p>FINALMOUSE</p><h2>{t(locale, "fprof.title")}</h2></div></div>
+      <div className="setting-heading compact"><div><h2>{t(locale, "fprof.title")}</h2></div></div>
       <div className="field-label">
         <span>{t(locale, "fprof.active")}</span>
         <OptionMenu
@@ -1232,7 +1232,7 @@ export function EggFilterCard({ snapshot }: { snapshot: ControlSnapshot }): Reac
   const locale = snapshot.preferences.locale;
   return (
     <article id="egg-filter-settings" className="setting-card">
-      <div className="setting-heading compact"><div><p>{displayText(locale, "SENSOR")}</p><h2>{t(locale, "adv.filters")}</h2></div></div>
+      <div className="setting-heading compact"><div><h2>{t(locale, "adv.filters")}</h2></div></div>
       <SwitchRow
         id="slamclick-filter-toggle"
         label={t(locale, "adv.slamclickFilter")}
@@ -1263,7 +1263,7 @@ export function EggSpdtCard({ snapshot }: { snapshot: ControlSnapshot }): ReactN
   const locale = snapshot.preferences.locale;
   return (
     <article id="egg-spdt-settings" className="setting-card">
-      <div className="setting-heading compact"><div><p>{displayText(locale, "CLICK")}</p><h2>{t(locale, "adv.gxMode")}</h2></div></div>
+      <div className="setting-heading compact"><div><h2>{t(locale, "adv.gxMode")}</h2></div></div>
       {(["left", "right"] as const).map((side, index) => {
         const label = side === "left" ? t(locale, "adv.leftButton") : t(locale, "adv.rightButton");
         return (
@@ -1301,31 +1301,35 @@ export function EggV2SensorCard({ snapshot }: { snapshot: ControlSnapshot }): Re
   const valid = Number.isInteger(tuning) && tuning >= -127 && tuning <= 127;
   return (
     <article id="egg-v2-sensor-settings" className="setting-card">
-      <div className="setting-heading compact"><div><p>{displayText(locale, "SENSOR")}</p><h2>{t(locale, "adv.eggSensor")}</h2></div></div>
-      <div className="field-label">
-        <label htmlFor="egg-angle-tuning">{t(locale, "adv.eggAngleTuning")}</label>
-        <input
-          id="egg-angle-tuning"
-          className="egg-tile-field"
-          type="number"
-          min={-127}
-          max={127}
-          step={1}
-          value={tuning}
-          disabled={snapshot.settingInProgress}
-          onChange={(event) => setTuning(Number(event.currentTarget.value))}
-        />
+      <div className="setting-heading compact"><div><h2>{t(locale, "adv.eggSensor")}</h2></div></div>
+      <div className="egg-angle-row">
+        <label htmlFor="egg-angle-tuning">
+          <span>{t(locale, "adv.eggAngleTuning")}</span>
+          <small className="setting-note">{t(locale, "adv.eggAngleTuningNote")}</small>
+        </label>
+        <div className="egg-angle-field">
+          <input
+            id="egg-angle-tuning"
+            className="egg-tile-field"
+            type="number"
+            min={-127}
+            max={127}
+            step={1}
+            value={tuning}
+            disabled={snapshot.settingInProgress}
+            onChange={(event) => setTuning(Number(event.currentTarget.value))}
+          />
+          <button
+            id="apply-egg-angle-tuning"
+            className="om-btn egg-action-button"
+            type="button"
+            disabled={!valid || snapshot.settingInProgress || tuning === stored}
+            onClick={() => control.applyEggAngleTuning(tuning)}
+          >
+            {t(locale, "common.apply")}
+          </button>
+        </div>
       </div>
-      <small className="setting-note">{t(locale, "adv.eggAngleTuningNote")}</small>
-      <button
-        id="apply-egg-angle-tuning"
-        className="egg-action-button"
-        type="button"
-        disabled={!valid || snapshot.settingInProgress || tuning === stored}
-        onClick={() => control.applyEggAngleTuning(tuning)}
-      >
-        {t(locale, "common.apply")}
-      </button>
       <SwitchRow
         id="egg-force-max-fps-toggle"
         label={t(locale, "adv.eggForceMaxFps")}
@@ -1353,7 +1357,7 @@ export function EggHandedCard({ snapshot }: { snapshot: ControlSnapshot }): Reac
   const locale = snapshot.preferences.locale;
   return (
     <article id="egg-handed-settings" className="setting-card">
-      <div className="setting-heading compact"><div><p>{displayText(locale, "CLICK")}</p><h2>{t(locale, "adv.eggHandedTitle")}</h2></div></div>
+      <div className="setting-heading compact"><div><h2>{t(locale, "adv.eggHandedTitle")}</h2></div></div>
       <SwitchRow
         id="egg-handed-toggle"
         label={t(locale, "adv.eggHanded")}
@@ -1380,7 +1384,7 @@ export function EggPollingCard({ snapshot }: { snapshot: ControlSnapshot }): Rea
       open={snapshot.preferences.expandSections}
     >
       <article className="setting-card egg-form-card">
-        <div className="setting-heading"><div><p>{displayText(locale, "POLLING")}</p><h2>{t(locale, "adv.dividerTitle")}</h2></div></div>
+        <div className="setting-heading"><div><h2>{t(locale, "adv.dividerTitle")}</h2></div></div>
         <p className="egg-warning">
           {t(locale, "adv.dividerWarning")}
         </p>
@@ -1590,7 +1594,7 @@ export function RazerButtonCard({ snapshot }: { snapshot: ControlSnapshot }): Re
         so a badge would only ever read "7".
       */}
       <div className="setting-heading compact">
-        <div><p>{displayText(locale, "BUTTONS")}</p><h2>{t(locale, "adv.mapping")}</h2></div>
+        <div><h2>{t(locale, "adv.mapping")}</h2></div>
       </div>
       <div className="button-remap-list">
         {rows.map((row) => {
@@ -1723,7 +1727,7 @@ export function PulsarProCard({ snapshot }: { snapshot: ControlSnapshot }): Reac
   const locale = snapshot.preferences.locale;
   return (
     <article id="pulsar-pro-settings" className="setting-card">
-      <div className="setting-heading compact"><div><p>PRO</p><h2>{t(locale, "adv.proAdvanced")}</h2></div></div>
+      <div className="setting-heading compact"><div><h2>{t(locale, "adv.proAdvanced")}</h2></div></div>
       <SwitchRow
         id="wheel-acceleration-toggle"
         label={t(locale, "adv.wheelAccel")}
@@ -2148,7 +2152,7 @@ export function KsnakeMacroCard({ snapshot }: { snapshot: ControlSnapshot }): Re
   if (snapshot.ksnakeMacrosLoading) {
     return (
       <article id="ksnake-macro-settings" className="setting-card">
-        <div className="setting-heading compact"><div><p>{t(locale, "macro.overline")}</p><h2>{t(locale, "macro.build")}</h2></div></div>
+        <div className="setting-heading compact"><div><h2>{t(locale, "macro.build")}</h2></div></div>
         <p className="field-note">{t(locale, "macro.loading")}</p>
       </article>
     );
@@ -2157,7 +2161,7 @@ export function KsnakeMacroCard({ snapshot }: { snapshot: ControlSnapshot }): Re
   if (snapshot.ksnakeMacrosError !== null) {
     return (
       <article id="ksnake-macro-settings" className="setting-card">
-        <div className="setting-heading compact"><div><p>{t(locale, "macro.overline")}</p><h2>{t(locale, "macro.build")}</h2></div></div>
+        <div className="setting-heading compact"><div><h2>{t(locale, "macro.build")}</h2></div></div>
         <p className="field-note">{displayText(locale, snapshot.ksnakeMacrosError)}</p>
         <div className="setting-action"><button type="button" onClick={() => control.loadKsnakeMacros()}>{t(locale, "set.retry")}</button></div>
       </article>
@@ -2169,7 +2173,6 @@ export function KsnakeMacroCard({ snapshot }: { snapshot: ControlSnapshot }): Re
     <article id="ksnake-macro-settings" className={`setting-card${staged ? " is-staged" : ""}`}>
       <div className="setting-heading ksnake-macro-heading">
         <div>
-          <p>{t(locale, "macro.overline")}</p>
           <h2>{t(locale, "macro.build")}</h2>
           <p className="ksnake-macro-lead">{t(locale, "macro.lead")}</p>
         </div>
@@ -2426,7 +2429,7 @@ export function WallhackMacroCard({ snapshot }: { snapshot: ControlSnapshot }):
   if (snapshot.wallhackMacrosLoading) {
     return (
       <article id="wallhack-macro-settings" className="setting-card">
-        <div className="setting-heading compact"><div><p>{t(locale, "macro.overline")}</p><h2>{t(locale, "macro.build")}</h2></div></div>
+        <div className="setting-heading compact"><div><h2>{t(locale, "macro.build")}</h2></div></div>
         <p className="field-note">{t(locale, "macro.whLoading")}</p>
       </article>
     );
@@ -2435,7 +2438,7 @@ export function WallhackMacroCard({ snapshot }: { snapshot: ControlSnapshot }):
   if (snapshot.wallhackMacrosError !== null) {
     return (
       <article id="wallhack-macro-settings" className="setting-card">
-        <div className="setting-heading compact"><div><p>{t(locale, "macro.overline")}</p><h2>{t(locale, "macro.build")}</h2></div></div>
+        <div className="setting-heading compact"><div><h2>{t(locale, "macro.build")}</h2></div></div>
         <p className="field-note">{displayText(locale, snapshot.wallhackMacrosError)}</p>
         <div className="setting-action"><button type="button" onClick={() => control.loadWallhackMacros()}>{t(locale, "set.retry")}</button></div>
       </article>
@@ -2468,7 +2471,6 @@ export function WallhackMacroCard({ snapshot }: { snapshot: ControlSnapshot }):
     <article id="wallhack-macro-settings" className={`setting-card${staged ? " is-staged" : ""}`} data-pending-key={`wallhack-macro-${slot + 1}`}>
       <div className="setting-heading compact">
         <div>
-          <p>{t(locale, "macro.overline")}</p>
           <h2>{t(locale, "macro.build")}</h2>
           <p className="ksnake-macro-lead">{t(locale, "macro.whLead")}</p>
         </div>
@@ -2656,7 +2658,7 @@ export function ButtonMappingCard({ snapshot }: { snapshot: ControlSnapshot }):
   const fixed = new Set((status as unknown as { fixedButtons?: readonly string[] }).fixedButtons ?? []);
   return (
     <article id="button-mapping-settings" className="setting-card">
-      <div className="setting-heading compact"><div><p>{displayText(locale, "BUTTONS")}</p><h2>{t(locale, "map.remap")}</h2></div></div>
+      <div className="setting-heading compact"><div><h2>{t(locale, "map.remap")}</h2></div></div>
       <div className="button-map-list">
         {Object.entries(status.buttonMappings).map(([button, deviceAssigned], index) => {
           const assigned = resettingButtons || pendingButtons.has(`button-${button}`)
@@ -2726,7 +2728,7 @@ export function PowerModeCard({ snapshot }: { snapshot: ControlSnapshot }): Reac
   if (!modes?.length) return null;
   return (
     <article id="power-mode-settings" className="setting-card">
-      <div className="setting-heading compact"><div><p>{displayText(locale, "SENSOR")}</p><h2>{t(locale, "pow.mode")}</h2></div></div>
+      <div className="setting-heading compact"><div><h2>{t(locale, "pow.mode")}</h2></div></div>
       <Segmented
         className={modes.length === 3 ? "three" : undefined}
         ariaLabel={t(locale, "pow.perfMode")}
diff --git a/src/app/cards/AtkCards.tsx b/src/features/devices/cards/AtkCards.tsx
similarity index 84%
rename from src/app/cards/AtkCards.tsx
rename to src/features/devices/cards/AtkCards.tsx
index 41458dc9..d92f4071 100644
--- a/src/app/cards/AtkCards.tsx
+++ b/src/features/devices/cards/AtkCards.tsx
@@ -1,9 +1,9 @@
-import { displayText } from "../../i18n";
-import { useUiLocale } from "../ui-locale";
+import { displayText, t } from "../../../i18n/index";
+import { useUiLocale } from "../../../shared/ui-locale";
 import { useEffect, useRef, useState, type ReactNode } from "react";
-import * as control from "../../device/controller";
-import type { ControlSnapshot } from "../../device/types";
-import { Segmented } from "../ui";
+import * as control from "../../../device/controller";
+import type { ControlSnapshot } from "../../../device/types";
+import { Segmented } from "../../../shared/ui";
 import { atkSensorModes, atkVisibleButtons } from "./atk-capabilities";
 
 export function AtkProfileCard({ snapshot }: { snapshot: ControlSnapshot }): ReactNode {
@@ -13,7 +13,7 @@ export function AtkProfileCard({ snapshot }: { snapshot: ControlSnapshot }): Rea
   return (
     <article id="atk-profile-status" className="setting-card">
       <div className="setting-heading compact">
-        <div><p>{displayText(__uiLocale, "ONBOARD")}</p><h2>{displayText(__uiLocale, "Configuration bank")}</h2></div>
+        <div><h2>{displayText(__uiLocale, "Configuration bank")}</h2></div>
         <output>{status.activeProfile} / {status.atkProfileCount}</output>
       </div>
       <Segmented
@@ -33,13 +33,12 @@ export function AtkProfileCard({ snapshot }: { snapshot: ControlSnapshot }): Rea
 
 export function AtkButtonCard({ snapshot }: { snapshot: ControlSnapshot }): ReactNode {
   const __uiLocale = useUiLocale();
-  // Vendor catalog: models without an underside button do not show its row.
   const mappings = atkVisibleButtons(snapshot.status?.atkButtonMappings, snapshot.status?.atkCatalogFeatures);
   if (!mappings.length) return null;
   return (
     <article id="atk-button-status" className="setting-card">
       <div className="setting-heading compact">
-        <div><p>{displayText(__uiLocale, "BUTTONS")}</p><h2>{displayText(__uiLocale, "Onboard assignments")}</h2></div>
+        <div><h2>{displayText(__uiLocale, "Onboard assignments")}</h2></div>
         <output>{mappings.length}</output>
       </div>
       <div className="button-remap-list">
@@ -83,7 +82,7 @@ export function AtkReceiverCard({ snapshot }: { snapshot: ControlSnapshot }): Re
   return (
     <article ref={cardRef} id="atk-receiver-status" className="setting-card" tabIndex={-1}>
       <div className="setting-heading compact">
-        <div><p>{displayText(__uiLocale, "WIRELESS")}</p><h2>{displayText(__uiLocale, "Receiver")}</h2></div>
+        <div><h2>{displayText(__uiLocale, "Receiver")}</h2></div>
         <output>{displayText(__uiLocale, receiver.online ? "Mouse online" : "Mouse offline")}</output>
       </div>
       <div className="button-remap-list">
@@ -96,16 +95,17 @@ export function AtkReceiverCard({ snapshot }: { snapshot: ControlSnapshot }): Re
             <small className="setting-note"> {displayText(__uiLocale, "Unplug the mouse cable and select 2.4 GHz mode. After starting, hold left click, wheel click, and right click until the indicator flashes, then release.")} </small>
             <button
               ref={startPairingRef}
+              className="om-btn is-primary"
               type="button"
               disabled={snapshot.settingInProgress}
               onClick={startPairing}
             > {displayText(__uiLocale, "Ready, start pairing")} </button>
-            <button type="button" disabled={snapshot.settingInProgress} onClick={closePreparation}>{displayText(__uiLocale, "Cancel")}</button>
+            <button type="button" className="om-btn is-ghost" disabled={snapshot.settingInProgress} onClick={closePreparation}>{displayText(__uiLocale, "Cancel")}</button>
           </div>
         ) : (
           <div className="setting-action">
             <small className="setting-note">{displayText(__uiLocale, "Pairing is verified for the VXE R1 SE+ (CID 02, MID 20).")}</small>
-            <button type="button" disabled={snapshot.settingInProgress} onClick={() => setPairingPrepared(true)}>{displayText(__uiLocale, "Pair R1 SE+")}</button>
+            <button type="button" className="om-btn" disabled={snapshot.settingInProgress} onClick={() => setPairingPrepared(true)}>{displayText(__uiLocale, "Pair R1 SE+")}</button>
           </div>
         )
       ) : (
@@ -116,7 +116,7 @@ export function AtkReceiverCard({ snapshot }: { snapshot: ControlSnapshot }): Re
 }
 
 const ATK_SENSOR_MODE_LABELS = ["Basic Mode", "ATK Shard Competitive Firmware", "ATK Shard Competitive Firmware MAX"] as const;
-const ATK_DONGLE_LIGHT_LABELS = ["Close", "Polling Rate Effect", "Battery Gradient Light Effect", "Low Battery Effect"] as const;
+const ATK_DONGLE_LIGHT_LABELS = ["adv.ledOff", "adv.ledConnectRate", "adv.ledBatteryStatus", "adv.ledBatteryWarning"] as const;
 
 /**
  * F1 Ultimate extras, grouped like the ATK HUB pages: sensor sampling rate
@@ -135,7 +135,7 @@ export function AtkSensorCard({ snapshot }: { snapshot: ControlSnapshot }): Reac
   return (
     <article id="atk-sensor-mode" className="setting-card">
       <div className="setting-heading compact">
-        <div><p>{displayText(__uiLocale, "PERFORMANCE")}</p><h2>{displayText(__uiLocale, "Sensor Sampling Rate")}</h2></div>
+        <div><h2>{displayText(__uiLocale, "Sensor Sampling Rate")}</h2></div>
       </div>
       <Segmented
         ariaLabel={displayText(__uiLocale, "Sensor sampling mode")}
@@ -163,12 +163,12 @@ export function AtkDongleCard({ snapshot }: { snapshot: ControlSnapshot }): Reac
   return (
     <article id="atk-dongle-light" className="setting-card">
       <div className="setting-heading compact">
-        <div><p>{displayText(__uiLocale, "PARAMETER")}</p><h2>{displayText(__uiLocale, "Dongle Light Effect")}</h2></div>
+        <div><h2>{t(__uiLocale, "adv.dongleLed")}</h2></div>
       </div>
-      <small className="setting-note">{displayText(__uiLocale, "Lighting Effect Mode")}</small>
+      <small className="setting-note">{t(__uiLocale, "adv.effect")}</small>
       <Segmented
         ariaLabel={displayText(__uiLocale, "Dongle LED effect")}
-        options={ATK_DONGLE_LIGHT_LABELS.map((label, value) => ({ value, label: displayText(__uiLocale, label) }))}
+        options={ATK_DONGLE_LIGHT_LABELS.map((label, value) => ({ value, label: t(__uiLocale, label) }))}
         value={dongleLight}
         disabled={snapshot.settingInProgress}
         onChange={(mode) => void control.selectAtkDongleLight(mode)}
diff --git a/src/app/cards/DpiCard.tsx b/src/features/devices/cards/DpiCard.tsx
similarity index 96%
rename from src/app/cards/DpiCard.tsx
rename to src/features/devices/cards/DpiCard.tsx
index c731eb65..8bd197f4 100644
--- a/src/app/cards/DpiCard.tsx
+++ b/src/features/devices/cards/DpiCard.tsx
@@ -1,15 +1,15 @@
-import { displayText } from "../../i18n";
+import { displayText } from "../../../i18n/index";
 import { useEffect, useRef, useState, type CSSProperties, type ReactNode } from "react";
 import { Check } from "lucide-react";
 import {
   capabilitiesForFormat,
   stageLodLevel,
 } from "@openmouse/protocol/drivers/logitech/onboard-profiles";
-import * as control from "../../device/controller";
-import type { ControlSnapshot, LiftOffLevel } from "../../device/types";
-import { isNoirE1Status, isNoirKsnakeStatus, isNoirS1Status, NOIR_DPI_STAGE_COLORS } from "../../device/noir.ts";
-import { closestDpiOption, dpiPresetValues } from "../../dpi-presets";
-import { t, tp } from "../../i18n";
+import * as control from "../../../device/controller";
+import type { ControlSnapshot, LiftOffLevel } from "../../../device/types";
+import { isNoirE1Status, isNoirKsnakeStatus, isNoirS1Status, NOIR_DPI_STAGE_COLORS } from "../../../device/noir.ts";
+import { closestDpiOption, dpiPresetValues } from "../../../device/dpi-presets";
+import { t, tp } from "../../../i18n/index";
 import { LiftOffDistance, hasLiftOff } from "./PerformanceCards";
 
 const MAX_EDITOR_ROWS = 4;
@@ -32,21 +32,11 @@ function singleFillsStageTable(snapshot: ControlSnapshot): boolean {
     && snapshot.capabilities?.dpiStagesWritable === true;
 }
 
-/**
- * One DPI editor for every device flavor. It always shows up to four rows,
- * each with a tickbox (include the stage in the DPI cycle), a typed value, and
- * a slider. Slot/stage devices instead render one row per advertised stage
- * (`maxStages`), so the row count matches what the mouse actually accepts.
- * Disabled rows keep their value locally so re-enabling restores it.
- * Logitech slots additionally carry a lift-off picker.
- */
 function DpiStageEditor({
   snapshot,
   editorView,
 }: {
   snapshot: ControlSnapshot;
-  /** Overrides the natural mode: "single" forces the single-DPI (generic)
-      editor even when the device exposes DPI stages or profile slots. */
   editorView?: "stage" | "single";
 }): ReactNode {
   const status = snapshot.status;
@@ -136,7 +126,6 @@ function DpiStageEditor({
       control.applyDpiValue(dpi);
       return;
     }
-    // Keep the last real table so the Stages view can put it back.
     const deviceStages = snapshot.deviceStatus?.dpiStages;
     if (deviceStages && !isUniform(deviceStages)) control.rememberDpiStagesBeforeSingle(deviceStages);
     (status?.dpiStages ?? []).forEach((value, stage) => {
@@ -489,11 +478,7 @@ export function SlotLiftOffPanel({ snapshot }: { snapshot: ControlSnapshot }): R
         <div>
           <div className="title-row">
             <h2>{t(locale, "perf.liftOff")}</h2>
-            <p>{displayText(locale, "SENSOR")}</p>
           </div>
-          <small id="lod-note" className="setting-note">
-            {t(locale, "perf.lodNote")}
-          </small>
         </div>
       </div>
       <div className="slot-lod-list">
@@ -539,6 +524,7 @@ export function SlotLiftOffPanel({ snapshot }: { snapshot: ControlSnapshot }): R
           );
         })}
       </div>
+      <small id="lod-note" className="setting-note">{t(locale, "perf.lodNote")}</small>
     </div>
   );
 }
@@ -584,7 +570,6 @@ export function DpiCard({ snapshot }: { snapshot: ControlSnapshot }): ReactNode
         <div className="setting-heading">
           <div className="dpi-heading-label">
             <div>
-              <p>{displayText(locale, "DPI")}</p>
               <h2>
                 {t(locale, "dpi.sensitivity")}
                 {snapshot.editedProfile !== null ? (
diff --git a/src/app/cards/FirmwareCard.tsx b/src/features/devices/cards/FirmwareCard.tsx
similarity index 87%
rename from src/app/cards/FirmwareCard.tsx
rename to src/features/devices/cards/FirmwareCard.tsx
index 40be2b1b..a86f6c2a 100644
--- a/src/app/cards/FirmwareCard.tsx
+++ b/src/features/devices/cards/FirmwareCard.tsx
@@ -1,4 +1,4 @@
-import { displayText } from "../../i18n";
+import { displayText } from "../../../i18n/index";
 import { useEffect, useState, type ReactNode } from "react";
 import {
   dismissDfuVersion,
@@ -8,10 +8,10 @@ import {
   loadFirmwareManifest,
   type DfuInfo,
   type FirmwareManifest,
-} from "../../device/firmware-updates";
-import type { ControlSnapshot } from "../../device/types";
-import * as control from "../../device/controller";
-import { t, tp } from "../../i18n";
+} from "../../../device/firmware-updates";
+import type { ControlSnapshot } from "../../../device/types";
+import * as control from "../../../device/controller";
+import { t, tp } from "../../../i18n/index";
 
 function formatDate(locale: string, iso: string | null): string {
   if (!iso) return "";
@@ -24,19 +24,10 @@ function formatDate(locale: string, iso: string | null): string {
   }
 }
 
-/**
- * G Hub-style firmware section on the Overview tab: one device block per
- * connected device (mouse, then receiver when one answered), each with its
- * state, an expandable changelog, and an expandable version history.
- * Versions come from the CDN-cached manifest (see firmware-updates.ts),
- * never from live vendor traffic. Check-only until in-app DFU exists —
- * the update button opens the vendor download URL.
- */
 export function FirmwareCard({ snapshot }: { snapshot: ControlSnapshot }): ReactNode {
   const status = snapshot.status;
   const locale = snapshot.preferences.locale;
 
-  // Hooks run on every render, so they must precede the no-device bail below.
   const [manifest, setManifest] = useState<FirmwareManifest | null>(null);
   const [manifestDate, setManifestDate] = useState<string | null>(null);
   const [checking, setChecking] = useState(false);
@@ -135,16 +126,11 @@ export function FirmwareCard({ snapshot }: { snapshot: ControlSnapshot }): React
     setDismissTick((n) => n + 1);
   }
 
-  // Row badges appear only where action is due — quiet rows stay bare.
   function rowBadge(info: DfuInfo | null): ReactNode {
     if (info?.dfuAvailable !== true) return null;
     return <output className="fw-badge-available">{t(locale, "fw.available")}</output>;
   }
 
-  // One dropdown per device holding everything beneath the row: the
-  // version transition when an update is due, then changelog and history.
-  // Auto-opened only while an update is available; quiet devices stay a
-  // single bare row.
   function deviceDetails(info: DfuInfo | null, current: string | null): ReactNode {
     if (info === null) return null;
     const notes = info.releaseNotes && info.dfuAvailable ? info.releaseNotes : null;
@@ -162,7 +148,7 @@ export function FirmwareCard({ snapshot }: { snapshot: ControlSnapshot }): React
           <ul className="fw-history">
             {past.map((entry, index) => (
               <li key={`${entry.version}-${index}`}>
-                v{displayText(locale, entry.version)}{displayText(locale, entry.date ? ` — ${formatDate(locale, entry.date)}` : null)}
+                v{displayText(locale, entry.version)}{displayText(locale, entry.date ? ` · ${formatDate(locale, entry.date)}` : null)}
               </li>
             ))}
           </ul>
@@ -185,11 +171,12 @@ export function FirmwareCard({ snapshot }: { snapshot: ControlSnapshot }): React
       <details className="fw-collapse">
       <summary>
       <div className="fw-summary-row">
-        <p className="fw-title">{t(locale, "fw.sectionLabel")}</p>
+        <h2 className="fw-title">{t(locale, "fw.sectionLabel")}</h2>
         <span className="fw-head-actions">
           <output id="firmware-update-output" className={pillBadge}>{displayText(locale, pill)}</output>
           <button
             type="button"
+            className="om-btn is-sm"
             disabled={checking}
             onClick={(event) => { stopToggle(event); void checkNow(); }}
           >
@@ -197,6 +184,7 @@ export function FirmwareCard({ snapshot }: { snapshot: ControlSnapshot }): React
           </button>
         </span>
       </div>
+      <span className="fw-current"><span>{status.name}</span><strong>{displayText(locale, status.firmware.join(" · "))}</strong></span>
       </summary>
       {error ? (
         <small className="setting-note">{t(locale, "fw.failed")}</small>
@@ -233,6 +221,7 @@ export function FirmwareCard({ snapshot }: { snapshot: ControlSnapshot }): React
             {download?.downloadUrl ? (
               <button
                 type="button"
+                className="om-btn is-primary"
                 onClick={() => window.open(download.downloadUrl, "_blank", "noopener,noreferrer")}
                 title={t(locale, "fw.comingSoon")}
               >
@@ -240,7 +229,7 @@ export function FirmwareCard({ snapshot }: { snapshot: ControlSnapshot }): React
               </button>
             ) : null}{' '}
             {available.length > 0 ? (
-              <button type="button" onClick={dismissAll}>
+              <button type="button" className="om-btn is-ghost" onClick={dismissAll}>
                 {t(locale, "fw.later")}
               </button>
             ) : null}
diff --git a/src/app/cards/KeyboardPanel.tsx b/src/features/devices/cards/KeyboardPanel.tsx
similarity index 96%
rename from src/app/cards/KeyboardPanel.tsx
rename to src/features/devices/cards/KeyboardPanel.tsx
index 4c98bc0e..a58413eb 100644
--- a/src/app/cards/KeyboardPanel.tsx
+++ b/src/features/devices/cards/KeyboardPanel.tsx
@@ -1,17 +1,16 @@
-import { displayText } from "../../i18n";
+import { displayText } from "../../../i18n/index";
 import { KochiKeyboardPanel } from "./KochiKeyboardPanel";
 import { KeyboardWorkspaceCards } from "./KeyboardWorkspaceCards";
 import type { ReactNode } from "react";
-import * as control from "../../device/controller";
-import type { ControlSnapshot, KeyboardTriggerKey } from "../../device/types";
-import { t, tp } from "../../i18n";
-import { RateSlider, StepperSlider } from "../ui";
+import * as control from "../../../device/controller";
+import type { ControlSnapshot, KeyboardTriggerKey } from "../../../device/types";
+import { t, tp } from "../../../i18n/index";
+import { RateSlider, StepperSlider } from "../../../shared/ui";
 
 const TRAVEL = { min: 0.1, max: 4, step: 0.1, scale: ["0.1", "", "4.0"] as const };
 const RAPID_TRIGGER = { min: 0.1, max: 2, step: 0.1, scale: ["0.1", "", "2.0"] as const };
 const DEAD_ZONE = { min: 0, max: 3.9, step: 0.1, scale: ["0", "", "3.9"] as const };
 
-/** Millimetre readout shared by every trigger slider. */
 function millimetres(value: number): string {
   return `${value.toFixed(3)} mm`;
 }
@@ -45,10 +44,7 @@ export function KeyboardPanel({ snapshot }: { snapshot: ControlSnapshot }): Reac
       <article id="keyboard-card" className="setting-card keyboard-identity-card" hidden={snapshot.workspaceTab !== "overview"}>
         <div className="setting-heading">
           <div>
-            <div className="title-row">
-              <h2>{keyboard.name}</h2>
-              <p>{t(locale, "kb.keyboardLabel")}</p>
-            </div>
+            <h2>{keyboard.name}</h2>
             <small className="setting-note">{t(locale, "kb.triggerNote")}</small>
           </div>
           
@@ -167,6 +163,7 @@ export function KeyboardPanel({ snapshot }: { snapshot: ControlSnapshot }): Reac
           <span className="keyboard-selection-count">{tp(locale, "kb.selectedCount", { n: trigger.selectedKeys.length })}</span>
           <button
             type="button"
+            className="om-btn is-sm"
             onClick={() => control.selectAllKeyboardKeys()}
             disabled={busy || trigger.keys.length === 0}
           >
@@ -174,6 +171,7 @@ export function KeyboardPanel({ snapshot }: { snapshot: ControlSnapshot }): Reac
           </button>
           <button
             type="button"
+            className="om-btn is-sm"
             onClick={() => control.clearKeyboardSelection()}
             disabled={busy || trigger.selectedKeys.length === 0}
           >
diff --git a/src/app/cards/KeyboardWorkspaceCards.tsx b/src/features/devices/cards/KeyboardWorkspaceCards.tsx
similarity index 84%
rename from src/app/cards/KeyboardWorkspaceCards.tsx
rename to src/features/devices/cards/KeyboardWorkspaceCards.tsx
index d75b3b8e..a6d11486 100644
--- a/src/app/cards/KeyboardWorkspaceCards.tsx
+++ b/src/features/devices/cards/KeyboardWorkspaceCards.tsx
@@ -1,15 +1,15 @@
-import { displayText } from "../../i18n";
-import { useUiLocale } from "../ui-locale";
+import { displayText } from "../../../i18n/index";
+import { useUiLocale } from "../../../shared/ui-locale";
 import { useId, useState, type ReactNode, type FormEvent } from 'react';
-import type { ControlSnapshot, KeyboardView } from '../../device/types';
-import type { KeyboardCommand } from '../../device/keyboard-workspace';
+import type { ControlSnapshot, KeyboardView } from '../../../device/types';
+import type { KeyboardCommand } from '../../../device/keyboard-workspace';
 import type { WuqueHigherKeyWrite, WuqueLightingLed, WuqueMacroEvent, WuqueRgb } from '@openmouse/keyboard-protocol/wuque';
 import { WUQUE_KEYCODE_CATEGORIES, wuqueKeycodeLabel, wuqueMatrixKeyLabel } from '@openmouse/keyboard-protocol/wuque';
-import * as control from '../../device/controller';
-import { t, type I18nKey } from '../../i18n';
-import type { InterfaceLocale } from '../../interface-preferences';
-import { Segmented, StepperSlider, SwitchRow } from '../ui';
-import { ColorPicker } from '../ColorPicker';
+import * as control from '../../../device/controller';
+import { t, type I18nKey } from '../../../i18n/index';
+import type { InterfaceLocale } from '../../settings/interface-preferences';
+import { Segmented, StepperSlider, SwitchRow } from '../../../shared/ui';
+import { ColorPicker } from '../../../shared/ColorPicker';
 
 const send = (command: KeyboardCommand) => control.applyKeyboardCommand(command);
 const hex = (c: WuqueRgb) => `#${[c.r, c.g, c.b].map(v => v.toString(16).padStart(2, '0')).join('')}`;
@@ -54,11 +54,11 @@ export function KeyboardWorkspaceCards({ snapshot }: { snapshot: ControlSnapshot
       <fieldset disabled={busy || !global} className="keyboard-fields">
         <Segmented id="keyboard-system" ariaLabel={displayText(locale, l('system'))} options={[{ value: 0, label: 'WIN' }, { value: 1, label: 'MAC' }]} value={global?.systemType ?? null} onChange={value => send({ kind: 'system', value })} />
         <form key={global?.sleepTime} onSubmit={event => send({ kind: 'sleep', value: number(form(event), 'sleep') })} className="keyboard-inline-form">
-          <NumberField name="sleep" label={displayText(locale, l('sleep'))} value={global?.sleepTime ?? 0} /><button type="submit">{displayText(locale, l('apply'))}</button>
+          <NumberField name="sleep" label={displayText(locale, l('sleep'))} value={global?.sleepTime ?? 0} /><button type="submit" className="om-btn">{displayText(locale, l('apply'))}</button>
         </form>
         <SwitchRow label={displayText(locale, l('shake'))} value={global?.shakeOptimization} onChange={value => send({ kind: 'shake', value })} />
       </fieldset>
-      <button type="button" disabled={busy} onClick={() => send({ kind: 'refresh' })}>{displayText(locale, l('refresh'))}</button>
+      <button type="button" className="om-btn" disabled={busy} onClick={() => send({ kind: 'refresh' })}>{displayText(locale, l('refresh'))}</button>
     </Card> : null}
     {tab === 'buttons' ? <>
       <RemapCard key={`${keyboard.vendorId}:${keyboard.productId}`} keyboard={keyboard} locale={locale} />
@@ -67,7 +67,7 @@ export function KeyboardWorkspaceCards({ snapshot }: { snapshot: ControlSnapshot
         <label className="keyboard-field"><span>{displayText(locale, l('keycode'))}</span><select disabled={busy} value={selected ? `${selected.row}:${selected.col}` : ''} onChange={event => { const [row, col] = event.currentTarget.value.split(':').map(Number); control.selectKeyboardKey(row, col); }}>
           <option value="" disabled>{displayText(locale, l('selectKey'))}</option>{keyboard.trigger.keys.map(k => <option key={`${k.row}:${k.col}`} value={`${k.row}:${k.col}`}>{displayText(locale, k.keycodeName)} · {k.row}:{k.col}</option>)}
         </select></label>
-        <button type="button" disabled={busy || !selected} onClick={() => selected && send({ kind: 'higherRead', ...selected })}>{displayText(locale, l('readKey'))}</button>
+        <button type="button" className="om-btn" disabled={busy || !selected} onClick={() => selected && send({ kind: 'higherRead', ...selected })}>{displayText(locale, l('readKey'))}</button>
         {selected && workspace.higher?.row === selected.row && workspace.higher.col === selected.col ? <HigherEditor key={JSON.stringify(workspace.higher)} keyboard={keyboard} locale={locale} /> : null}
       </Card>
     </> : null}
@@ -77,7 +77,7 @@ export function KeyboardWorkspaceCards({ snapshot }: { snapshot: ControlSnapshot
     {tab === 'advanced' ? <Card title={displayText(locale, l('diagnostics'))}>
       {key ? <><h3>{displayText(locale, key.keycodeName)}</h3><dl className="keyboard-identity">
         {([['release', `${key.performance.normalReleaseMm.toFixed(3)} mm`], ['firstTouch', `${key.rtFirstTouchMm.toFixed(3)} mm`], ['axisId', key.performance.axisV2Id], ['axisRange', key.performance.axisRangeMax], ['axisCoefficient', key.performance.axisCoefficient], ['calibration', key.performance.calibrate], ['precision', global?.rtPrecision ?? l('unavailable')]] as const).map(([label, value]) => <div key={label}><dt>{displayText(locale, l(label))}</dt><dd>{displayText(locale, value)}</dd></div>)}
-      </dl><button type="button" disabled={busy} onClick={() => send({ kind: 'adc', row: key.row })}>{displayText(locale, l('adc'))}</button>
+      </dl><button type="button" className="om-btn" disabled={busy} onClick={() => send({ kind: 'adc', row: key.row })}>{displayText(locale, l('adc'))}</button>
       {workspace.adc?.row === key.row ? <p className="keyboard-sensor-readout"><strong>{displayText(locale, l('readout'))}</strong><output>{workspace.adc.data[key.col] ?? l('unavailable')}</output></p> : null}</> : <p>{displayText(locale, l('selectKey'))}</p>}
     </Card> : null}
   </>;
@@ -93,11 +93,11 @@ function RemapCard({ keyboard, locale }: { keyboard: KeyboardView; locale: Inter
   const current = ready && position ? data.rows[position.row]?.[position.col] ?? 0 : null;
   return <Card title={displayText(locale, l('remap'))}>
     <Segmented id="keyboard-layer" ariaLabel={displayText(locale, l('layer'))} value={layer} options={[0, 1, 2, 3].map(value => ({ value, label: `${l('layer')} ${value + 1}` }))} disabled={busy} onChange={value => { setLayer(value); setPosition(null); send({ kind: 'layer', layer: value }); }} />
-    <button type="button" disabled={busy} onClick={() => send({ kind: 'layer', layer })}>{displayText(locale, l('refresh'))}</button>
+    <button type="button" className="om-btn" disabled={busy} onClick={() => send({ kind: 'layer', layer })}>{displayText(locale, l('refresh'))}</button>
     {ready ? <><div className="keyboard-matrix" role="group" aria-label={displayText(locale, l('remap'))}>
       {keyboard.trigger.matrix.map((row, rowIndex) => keyboard.trigger.keys.some(k => k.row === rowIndex) ? <div className="keyboard-matrix-row" key={rowIndex}>{row.map((_code, col) => keyboard.trigger.keys.some(k => k.row === rowIndex && k.col === col) ? <button type="button" key={col} disabled={busy} className={`keyboard-key${position?.row === rowIndex && position.col === col ? ' is-selected' : ''}`} aria-pressed={position?.row === rowIndex && position.col === col} onClick={() => setPosition({ row: rowIndex, col })}>{displayText(locale, wuqueMatrixKeyLabel(data.rows[rowIndex]?.[col] ?? 0) ?? `0x${(data.rows[rowIndex]?.[col] ?? 0).toString(16)}`)}</button> : <span key={col} className="keyboard-key is-empty" />)}</div> : null)}
     </div>{position && current !== null ? <form key={`${layer}:${position.row}:${position.col}:${current}`} onSubmit={event => send({ kind: 'keycode', layer, ...position, keycode: number(form(event), 'keycode') })}>
-      <fieldset disabled={busy} className="keyboard-fields"><KeycodeField label={displayText(locale, l('keycode'))} value={current} /><p className="setting-note">{displayText(locale, l('default'))}: {displayText(locale, keyboard.workspace.defaults[position.row] ? wuqueKeycodeLabel(keyboard.workspace.defaults[position.row]!.keycodes[position.col]) ?? l('unavailable') : l('unavailable'))}</p><button type="submit">{displayText(locale, l('apply'))}</button></fieldset>
+      <fieldset disabled={busy} className="keyboard-fields"><KeycodeField label={displayText(locale, l('keycode'))} value={current} /><p className="setting-note">{displayText(locale, l('default'))}: {displayText(locale, keyboard.workspace.defaults[position.row] ? wuqueKeycodeLabel(keyboard.workspace.defaults[position.row]!.keycodes[position.col]) ?? l('unavailable') : l('unavailable'))}</p><button type="submit" className="om-btn">{displayText(locale, l('apply'))}</button></fieldset>
     </form> : null}
     {keyboard.workspace.styles.some(Boolean) ? <details className="keyboard-layout-details"><summary>{displayText(locale, l('geometry'))}</summary><table><thead><tr><th>{displayText(locale, l('row'))}</th><th>{displayText(locale, l('col'))}</th><th>{displayText(locale, l('ratio'))}</th><th>{displayText(locale, l('kind'))}</th></tr></thead><tbody>{keyboard.workspace.styles.flatMap((style, index) => style?.entries.map((entry, n) => <tr key={`${index}:${n}`}><td>{entry.row}</td><td>{entry.col}</td><td>{entry.ratio}</td><td>{displayText(locale, entry.type)}</td></tr>) ?? [])}</tbody></table></details> : null}
     </> : <p className="setting-note">{displayText(locale, l('readFirst'))}</p>}
@@ -111,7 +111,7 @@ function ProfileCard({ keyboard, locale }: { keyboard: KeyboardView; locale: Int
   return <Card title={displayText(locale, l('slot'))}>
     <Segmented id="keyboard-config-slot" ariaLabel={displayText(locale, l('slot'))} options={[0, 1, 2, 3].map(value => ({ value, label: `${value + 1}` }))} value={keyboard.workspace.global?.configSwitch ?? null} disabled={keyboard.trigger.busy || !keyboard.workspace.global} onChange={value => send({ kind: 'slot', value })} />
     <p className="setting-note">{displayText(locale, l('saveNote'))}</p><label className="keyboard-field"><span>{displayText(locale, l('scope'))}</span><select value={scope} onChange={e => { setScope(e.currentTarget.value as typeof scope); setConfirm(false); }} disabled={keyboard.trigger.busy}>{(['all', 'performance', 'lighting', 'layout', 'higherKey', 'macro'] as const).map(value => <option key={value} value={value}>{displayText(locale, l(value))}</option>)}</select></label>
-    {confirm ? <div className="keyboard-save-confirm" role="alert"><p>{displayText(locale, l('saveConfirm'))}</p><button type="button" disabled={keyboard.trigger.busy} onClick={() => { send({ kind: 'save', scope }); setConfirm(false); }}>{displayText(locale, l('save'))}</button><button type="button" onClick={() => setConfirm(false)}>{t(locale, 'common.cancel')}</button></div> : <button type="button" disabled={keyboard.trigger.busy} onClick={() => setConfirm(true)}>{displayText(locale, l('save'))}</button>}
+    {confirm ? <div className="keyboard-save-confirm" role="alert"><p>{displayText(locale, l('saveConfirm'))}</p><button type="button" className="om-btn" disabled={keyboard.trigger.busy} onClick={() => { send({ kind: 'save', scope }); setConfirm(false); }}>{displayText(locale, l('save'))}</button><button type="button" className="om-btn" onClick={() => setConfirm(false)}>{t(locale, 'common.cancel')}</button></div> : <button type="button" className="om-btn" disabled={keyboard.trigger.busy} onClick={() => setConfirm(true)}>{displayText(locale, l('save'))}</button>}
   </Card>;
 }
 
@@ -132,10 +132,10 @@ function LightingCards({ keyboard, locale }: { keyboard: KeyboardView; locale: I
   const editLed = (value: Partial<WuqueLightingLed>) => setCustom(custom.map((c, index) => index === page * 15 + led ? { ...c, ...value } : c));
   return <>
     <Card title={displayText(locale, l('lighting'))}>
-      <button type="button" disabled={busy} onClick={() => send({ kind: 'refresh' })}>{displayText(locale, l('refresh'))}</button>
+      <button type="button" className="om-btn" disabled={busy} onClick={() => send({ kind: 'refresh' })}>{displayText(locale, l('refresh'))}</button>
       {base ? <><SwitchRow label={displayText(locale, l('lightingOn'))} value={base.open} disabled={busy} onChange={open => send({ kind: 'lighting', base: { ...base, open } })} />
         <p className="setting-note">{displayText(locale, l('rawModeNote'))}</p><form onSubmit={event => { const d = form(event); send({ kind: 'lighting', base: { ...base, mode: number(d, 'mode'), direction: number(d, 'direction'), selectStaticColor: number(d, 'static') } }); }}>
-          <fieldset disabled={busy} className="keyboard-fields keyboard-field-grid"><NumberField name="mode" label={displayText(locale, l('vendorMode'))} value={base.mode} max={255} /><NumberField name="direction" label={displayText(locale, l('direction'))} value={base.direction} max={255} /><NumberField name="static" label={displayText(locale, l('staticColor'))} value={base.selectStaticColor} max={7} /><button type="submit">{displayText(locale, l('apply'))}</button></fieldset>
+          <fieldset disabled={busy} className="keyboard-fields keyboard-field-grid"><NumberField name="mode" label={displayText(locale, l('vendorMode'))} value={base.mode} max={255} /><NumberField name="direction" label={displayText(locale, l('direction'))} value={base.direction} max={255} /><NumberField name="static" label={displayText(locale, l('staticColor'))} value={base.selectStaticColor} max={7} /><button type="submit" className="om-btn">{displayText(locale, l('apply'))}</button></fieldset>
         </form>
         <StepperSlider id="keyboard-brightness" label={displayText(locale, l('brightness'))} value={base.luminance} min={0} max={100} step={1} scale={['0', '', '100']} formatValue={v => `${v}%`} disabled={busy} onCommit={luminance => send({ kind: 'lighting', base: { ...base, luminance } })} />
         <StepperSlider id="keyboard-light-speed" label={displayText(locale, l('speed'))} value={base.speed} min={0} max={100} step={1} scale={['0', '', '100']} formatValue={v => `${v}`} disabled={busy} onCommit={speed => send({ kind: 'lighting', base: { ...base, speed } })} />
@@ -143,16 +143,16 @@ function LightingCards({ keyboard, locale }: { keyboard: KeyboardView; locale: I
       <SwitchRow label={displayText(locale, l('blackout'))} value={workspace.global?.blackout} disabled={busy} onChange={value => send({ kind: 'blackout', value })} />
     </Card>
     <Card title={displayText(locale, l('palette'))}><fieldset disabled={busy || palette.length !== 8} className="keyboard-fields">
-      <Segmented id="keyboard-palette-index" ariaLabel={displayText(locale, l('palette'))} options={palette.map((_, index) => ({ value: index, label: `${index + 1}` }))} value={paletteIndex} disabled={busy} onChange={setPaletteIndex} />{palette[paletteIndex] ? <ColorField disabled={busy} label={displayText(locale, `${l('palette')} ${paletteIndex + 1}`)} value={palette[paletteIndex]} onChange={color => setPalette(palette.map((p, i) => i === paletteIndex ? { ...p, ...color } : p))} /> : null}<button type="button" onClick={() => send({ kind: 'palette', colors: palette })}>{displayText(locale, l('apply'))}</button>
+      <Segmented id="keyboard-palette-index" ariaLabel={displayText(locale, l('palette'))} options={palette.map((_, index) => ({ value: index, label: `${index + 1}` }))} value={paletteIndex} disabled={busy} onChange={setPaletteIndex} />{palette[paletteIndex] ? <ColorField disabled={busy} label={displayText(locale, `${l('palette')} ${paletteIndex + 1}`)} value={palette[paletteIndex]} onChange={color => setPalette(palette.map((p, i) => i === paletteIndex ? { ...p, ...color } : p))} /> : null}<button type="button" className="om-btn" onClick={() => send({ kind: 'palette', colors: palette })}>{displayText(locale, l('apply'))}</button>
     </fieldset></Card>
-    <Card title={displayText(locale, l('correction'))}><form onSubmit={event => { const d = form(event); send({ kind: 'correction', color: { r: number(d, 'r'), g: number(d, 'g'), b: number(d, 'b') } }); }}><fieldset disabled={busy || !workspace.lighting?.colorCorrection} className="keyboard-fields keyboard-field-grid">{(['r', 'g', 'b'] as const).map(channel => <NumberField key={channel} name={channel} label={displayText(locale, channel.toUpperCase())} value={correction[channel]} max={100} />)}<button type="submit">{displayText(locale, l('apply'))}</button></fieldset></form></Card>
+    <Card title={displayText(locale, l('correction'))}><form onSubmit={event => { const d = form(event); send({ kind: 'correction', color: { r: number(d, 'r'), g: number(d, 'g'), b: number(d, 'b') } }); }}><fieldset disabled={busy || !workspace.lighting?.colorCorrection} className="keyboard-fields keyboard-field-grid">{(['r', 'g', 'b'] as const).map(channel => <NumberField key={channel} name={channel} label={displayText(locale, channel.toUpperCase())} value={correction[channel]} max={100} />)}<button type="submit" className="om-btn">{displayText(locale, l('apply'))}</button></fieldset></form></Card>
     <Card title={displayText(locale, l('custom'))}><fieldset disabled={busy || custom.length !== 135} className="keyboard-fields">
       <div className="keyboard-field-grid"><label className="keyboard-field"><span>{displayText(locale, l('page'))}</span><select value={page} onChange={e => setPage(Number(e.currentTarget.value))}>{Array.from({ length: 9 }, (_, i) => <option key={i} value={i}>{i + 1}</option>)}</select></label><label className="keyboard-field"><span>{displayText(locale, l('led'))}</span><select value={led} onChange={e => setLed(Number(e.currentTarget.value))}>{Array.from({ length: 15 }, (_, i) => <option key={i} value={i}>{i + 1}</option>)}</select></label></div>
       {current ? <><ColorField disabled={busy} label={displayText(locale, l('custom'))} value={current} onChange={c => editLed({ ...c, isCustom: true })} /><SwitchRow label={displayText(locale, l('customFlag'))} value={current.isCustom ?? false} onChange={isCustom => editLed({ isCustom })} /></> : null}
-      <div className="keyboard-selection-actions"><button type="button" onClick={() => send({ kind: 'custom', leds: custom })}>{displayText(locale, l('apply'))}</button><button type="button" onClick={() => send({ kind: 'direct', leds: custom })}>{displayText(locale, l('preview'))}</button></div>
+      <div className="keyboard-selection-actions"><button type="button" className="om-btn" onClick={() => send({ kind: 'custom', leds: custom })}>{displayText(locale, l('apply'))}</button><button type="button" className="om-btn" onClick={() => send({ kind: 'direct', leds: custom })}>{displayText(locale, l('preview'))}</button></div>
     </fieldset></Card>
-    <Card title={displayText(locale, l('shell'))}><fieldset disabled={busy || !workspace.shell} className="keyboard-fields"><ColorField disabled={busy} label={displayText(locale, l('shell'))} value={shell} onChange={setShell} /><button type="button" onClick={() => send({ kind: 'shell', color: shell })}>{displayText(locale, l('apply'))}</button></fieldset></Card>
-    <Card title={displayText(locale, l('caps'))}><fieldset disabled={busy} className="keyboard-fields"><ColorField disabled={busy} label={displayText(locale, l('caps'))} value={caps} onChange={setCaps} /><button type="button" onClick={() => send({ kind: 'caps', color: caps })}>{displayText(locale, l('apply'))}</button></fieldset></Card>
+    <Card title={displayText(locale, l('shell'))}><fieldset disabled={busy || !workspace.shell} className="keyboard-fields"><ColorField disabled={busy} label={displayText(locale, l('shell'))} value={shell} onChange={setShell} /><button type="button" className="om-btn" onClick={() => send({ kind: 'shell', color: shell })}>{displayText(locale, l('apply'))}</button></fieldset></Card>
+    <Card title={displayText(locale, l('caps'))}><fieldset disabled={busy} className="keyboard-fields"><ColorField disabled={busy} label={displayText(locale, l('caps'))} value={caps} onChange={setCaps} /><button type="button" className="om-btn" onClick={() => send({ kind: 'caps', color: caps })}>{displayText(locale, l('apply'))}</button></fieldset></Card>
   </>;
 }
 
@@ -164,7 +164,7 @@ function MacroCard({ keyboard, locale }: { keyboard: KeyboardView; locale: Inter
   return <Card title={displayText(locale, l('macro'))}>
     <p className="setting-note">{displayText(locale, l('capacity'))}: {count} / {displayText(locale, keyboard.workspace.global?.macroSpace?.macroNumber ?? '—')}</p>
     <label className="keyboard-field"><span>{displayText(locale, l('macroSlot'))}</span><select value={slot} disabled={keyboard.trigger.busy || count === 0} onChange={e => { const slot = Number(e.currentTarget.value); setSlot(slot); send({ kind: 'macroRead', slot }); }}>{Array.from({ length: count }, (_, i) => <option key={i} value={i}>{i + 1}</option>)}</select></label>
-    <button type="button" disabled={keyboard.trigger.busy || count === 0} onClick={() => send({ kind: 'macroRead', slot })}>{displayText(locale, l('macroRead'))}</button>
+    <button type="button" className="om-btn" disabled={keyboard.trigger.busy || count === 0} onClick={() => send({ kind: 'macroRead', slot })}>{displayText(locale, l('macroRead'))}</button>
     {macro?.header.macroId === slot ? <MacroEditor key={JSON.stringify(macro)} keyboard={keyboard} locale={locale} /> : <p>{displayText(locale, l('readFirst'))}</p>}
   </Card>;
 }
@@ -180,8 +180,8 @@ function MacroEditor({ keyboard, locale }: { keyboard: KeyboardView; locale: Int
     <fieldset disabled={keyboard.trigger.busy} className="keyboard-fields">
       <SwitchRow label={displayText(locale, l('valid'))} value={valid} onChange={setValid} /><div className="keyboard-field-grid"><NumberField name="mode" label={displayText(locale, l('vendorMode'))} value={macroMode} max={255} /><NumberField name="repeat" label={displayText(locale, l('repetitions'))} value={repetitions} /></div>
       <p className="setting-note">{displayText(locale, l('actions'))}: {events.length}</p>
-      <div className="keyboard-macro-events">{events.map((e, i) => <div key={i} className="keyboard-macro-event"><span>{i + 1}</span><label className="keyboard-field"><span>{displayText(locale, l('status'))}</span><select name={`status${i}`} defaultValue={e.status}><option value={0}>0</option><option value={1}>1</option></select></label><KeycodeField name={`key${i}`} label={displayText(locale, l('keycode'))} value={e.keyCode} /><NumberField name={`delay${i}`} label={displayText(locale, l('delay'))} value={e.delay} max={32767} /><button type="button" onClick={event => { const d = new FormData(event.currentTarget.form!); setMacroMode(number(d, 'mode')); setRepetitions(number(d, 'repeat')); setEvents(events.filter((_, n) => n !== i).map((_, n) => { const old = n >= i ? n + 1 : n; return { status: number(d, `status${old}`), keyCode: number(d, `key${old}`), delay: number(d, `delay${old}`) }; })); }}>{displayText(locale, l('remove'))}</button></div>)}</div>
-      <button type="button" disabled={events.length >= capacity} onClick={event => { const d = new FormData(event.currentTarget.form!); setMacroMode(number(d, 'mode')); setRepetitions(number(d, 'repeat')); setEvents([...events.map((_, i) => ({ status: number(d, `status${i}`), delay: number(d, `delay${i}`), keyCode: number(d, `key${i}`) })), { status: 1, delay: 0, keyCode: 4 }]); }}>{displayText(locale, l('addEvent'))}</button><button type="submit">{displayText(locale, l('apply'))}</button>
+      <div className="keyboard-macro-events">{events.map((e, i) => <div key={i} className="keyboard-macro-event"><span>{i + 1}</span><label className="keyboard-field"><span>{displayText(locale, l('status'))}</span><select name={`status${i}`} defaultValue={e.status}><option value={0}>0</option><option value={1}>1</option></select></label><KeycodeField name={`key${i}`} label={displayText(locale, l('keycode'))} value={e.keyCode} /><NumberField name={`delay${i}`} label={displayText(locale, l('delay'))} value={e.delay} max={32767} /><button type="button" className="om-btn" onClick={event => { const d = new FormData(event.currentTarget.form!); setMacroMode(number(d, 'mode')); setRepetitions(number(d, 'repeat')); setEvents(events.filter((_, n) => n !== i).map((_, n) => { const old = n >= i ? n + 1 : n; return { status: number(d, `status${old}`), keyCode: number(d, `key${old}`), delay: number(d, `delay${old}`) }; })); }}>{displayText(locale, l('remove'))}</button></div>)}</div>
+      <button type="button" className="om-btn" disabled={events.length >= capacity} onClick={event => { const d = new FormData(event.currentTarget.form!); setMacroMode(number(d, 'mode')); setRepetitions(number(d, 'repeat')); setEvents([...events.map((_, i) => ({ status: number(d, `status${i}`), delay: number(d, `delay${i}`), keyCode: number(d, `key${i}`) })), { status: 1, delay: 0, keyCode: 4 }]); }}>{displayText(locale, l('addEvent'))}</button><button type="submit" className="om-btn">{displayText(locale, l('apply'))}</button>
     </fieldset>
   </form>;
 }
@@ -216,6 +216,6 @@ function HigherEditor({ keyboard, locale }: { keyboard: KeyboardView; locale: In
     {mode >= 3 ? <NumberField name="time" label={displayText(locale, mode < 5 ? l('time') : l('delay'))} value={'time' in higher ? higher.time : 'delay' in higher ? higher.delay : 0} /> : null}
     {mode >= 6 ? <label className="keyboard-field"><span>{displayText(locale, l('partner'))}</span><select value={pair} required onChange={e => setPair(e.currentTarget.value)}><option value="" disabled>{displayText(locale, l('partner'))}</option>{keyboard.trigger.keys.filter(k => k.row !== higher.row || k.col !== higher.col).map(k => <option key={`${k.row}:${k.col}`} value={`${k.row}:${k.col}`}>{displayText(locale, k.keycodeName)} · {k.row}:{k.col}</option>)}</select></label> : null}
     {mode === 6 ? <NumberField name="socd" label={displayText(locale, `${l('socd')} (0–3)`)} value={'socdMode' in higher ? higher.socdMode : 0} max={3} /> : null}</div>
-    <button type="submit">{displayText(locale, l('apply'))}</button>
+    <button type="submit" className="om-btn">{displayText(locale, l('apply'))}</button>
   </fieldset></form>;
 }
diff --git a/src/app/cards/KochiKeyboardPanel.tsx b/src/features/devices/cards/KochiKeyboardPanel.tsx
similarity index 67%
rename from src/app/cards/KochiKeyboardPanel.tsx
rename to src/features/devices/cards/KochiKeyboardPanel.tsx
index 600d48b1..35866ef4 100644
--- a/src/app/cards/KochiKeyboardPanel.tsx
+++ b/src/features/devices/cards/KochiKeyboardPanel.tsx
@@ -1,11 +1,10 @@
-import { displayText } from "../../i18n";
+import { displayText } from "../../../i18n/index";
 import type { ReactNode } from "react";
-import type { ControlSnapshot } from "../../device/types";
-import * as control from "../../device/controller";
-import { t } from "../../i18n";
-import { Segmented } from "../ui";
+import type { ControlSnapshot } from "../../../device/types";
+import * as control from "../../../device/controller";
+import { t } from "../../../i18n/index";
+import { Segmented } from "../../../shared/ui";
 
-/** Reuse the keyboard workspace's system-mode control, without Wuque settings. */
 export function KochiKeyboardPanel({ snapshot }: { snapshot: ControlSnapshot }): ReactNode {
   const keyboard = snapshot.keyboard;
   if (!keyboard) return null;
@@ -16,7 +15,7 @@ export function KochiKeyboardPanel({ snapshot }: { snapshot: ControlSnapshot }):
     <section className="keyboard-panel" data-workspace-host role="tabpanel" aria-labelledby="workspace-tab-overview">
       {keyboard.trigger.statusText ? <output className="keyboard-status" role="status">{displayText(locale, keyboard.trigger.statusText)}</output> : null}
       <article className="setting-card keyboard-identity-card keyboard-workspace-card">
-        <div className="setting-heading"><div><div className="title-row"><h2>{keyboard.name}</h2><p>{t(locale, "kb.keyboardLabel")}</p></div>
+        <div className="setting-heading"><div><h2>{keyboard.name}</h2>
           <small className="setting-note">{t(locale, "kb.kochiModeNote")}</small>
         </div></div>
         <fieldset disabled={busy || mode == null} className="keyboard-fields">
@@ -24,7 +23,7 @@ export function KochiKeyboardPanel({ snapshot }: { snapshot: ControlSnapshot }):
             value={mode === "win" ? 0 : mode === "mac" ? 1 : null}
             onChange={value => control.applyKeyboardCommand({ kind: "system", value })} />
         </fieldset>
-        <button type="button" disabled={busy} onClick={() => control.applyKeyboardCommand({ kind: "refresh" })}>{t(locale, "kb.refresh")}</button>
+        <button type="button" className="om-btn" disabled={busy} onClick={() => control.applyKeyboardCommand({ kind: "refresh" })}>{t(locale, "kb.refresh")}</button>
       </article>
     </section>
   );
diff --git a/src/app/cards/LightingCard.tsx b/src/features/devices/cards/LightingCard.tsx
similarity index 94%
rename from src/app/cards/LightingCard.tsx
rename to src/features/devices/cards/LightingCard.tsx
index f8726e41..37353d58 100644
--- a/src/app/cards/LightingCard.tsx
+++ b/src/features/devices/cards/LightingCard.tsx
@@ -1,11 +1,11 @@
-import { displayText } from "../../i18n";
+import { displayText } from "../../../i18n/index";
 import { useState, type CSSProperties, type ReactNode } from "react";
 import type { MouseLighting } from "@openmouse/protocol/drivers/mouse-types";
-import * as control from "../../device/controller";
-import type { ControlSnapshot } from "../../device/types";
-import { t, tp } from "../../i18n";
-import { ColorPicker } from "../ColorPicker";
-import { Segmented } from "../ui";
+import * as control from "../../../device/controller";
+import type { ControlSnapshot } from "../../../device/types";
+import { t, tp } from "../../../i18n/index";
+import { ColorPicker } from "../../../shared/ColorPicker";
+import { Segmented } from "../../../shared/ui";
 
 export function LightingCard({
   snapshot,
@@ -42,12 +42,11 @@ export function LightingCard({
   return (
     <article
       id={`${prefix}-card`}
-      className={`setting-card${staged ? " is-staged" : ""}`}
+      className={`setting-card library-lighting${staged ? " is-staged" : ""}`}
       data-pending-key={pendingKey}
     >
       <div className="setting-heading">
         <div>
-          <p>{displayText(locale, variant === "advanced" ? "RECEIVER" : "LIGHTING")}</p>
           <h2 id={`${prefix}-title`}>
             {displayText(locale, lighting.zone === "Receiver" ? t(locale, "light.receiverTitle") : tp(locale, "light.zoneTitle", { zone: lighting.zone }))}
             {lighting.writeOnly ? (
@@ -74,7 +73,7 @@ export function LightingCard({
                 type="button"
                 role="listitem"
                 className={index === activeZoneIndex ? "is-selected" : ""}
-                style={{ "--zone-color": zone.mode === "Off" ? "#15171a" : zone.color ?? "#15171a" } as CSSProperties}
+                style={{ "--zone-color": zone.mode === "Off" ? "var(--well)" : zone.color ?? "var(--well)" } as CSSProperties}
                 title={displayText(locale, zone.group ? `${zone.group} ${zone.zone}` : `${zone.zone} effects`)}
                 aria-label={displayText(locale, zone.group ? `${zone.group} ${zone.zone}` : zone.zone)}
                 aria-pressed={index === activeZoneIndex}
diff --git a/src/app/cards/LunaFuryCards.tsx b/src/features/devices/cards/LunaFuryCards.tsx
similarity index 89%
rename from src/app/cards/LunaFuryCards.tsx
rename to src/features/devices/cards/LunaFuryCards.tsx
index 44d3f575..92483410 100644
--- a/src/app/cards/LunaFuryCards.tsx
+++ b/src/features/devices/cards/LunaFuryCards.tsx
@@ -1,9 +1,9 @@
 import type { ReactNode } from "react";
 import type { LunaFuryButton } from "@openmouse/protocol/lamzu";
-import * as control from "../../device/controller";
-import type { ControlSnapshot } from "../../device/types";
-import { t, type I18nKey } from "../../i18n";
-import { Segmented, StepperSlider, SwitchRow } from "../ui";
+import * as control from "../../../device/controller";
+import type { ControlSnapshot } from "../../../device/types";
+import { t, type I18nKey } from "../../../i18n/index";
+import { Segmented, StepperSlider, SwitchRow } from "../../../shared/ui";
 
 export function LunaFuryButtonsCard({ snapshot }: { snapshot: ControlSnapshot }): ReactNode {
   const settings = snapshot.status?.lunafury;
@@ -19,7 +19,7 @@ export function LunaFuryButtonsCard({ snapshot }: { snapshot: ControlSnapshot })
   return (
     <article id="lunafury-buttons" className={`setting-card${staged ? " is-staged" : ""}`}
       data-pending-key="lunafury-lightning lunafury-button-left lunafury-button-right lunafury-button-middle">
-      <div className="setting-heading compact"><div><p>LUNAFURY</p><h2>{t(locale, "luna.buttons")}</h2></div></div>
+      <div className="setting-heading compact"><div><h2>{t(locale, "luna.buttons")}</h2></div></div>
       {settings.lightningMode != null ? (
         <div className="field-label spaced">
           <span>{t(locale, "luna.lightning")}</span>
@@ -66,7 +66,7 @@ export function LunaFuryWheelCard({ snapshot }: { snapshot: ControlSnapshot }):
   return (
     <article id="lunafury-wheel-guard" className={`setting-card${staged ? " is-staged" : ""}`}
       data-pending-key="lunafury-wheel-guard">
-      <div className="setting-heading compact"><div><p>LUNAFURY</p><h2>{t(locale, "luna.wheelGuard")}</h2></div></div>
+      <div className="setting-heading compact"><div><h2>{t(locale, "luna.wheelGuard")}</h2></div></div>
       <SwitchRow
         id="lunafury-wheel-guard-toggle"
         label={t(locale, "luna.wheelGuard")}
diff --git a/src/app/cards/MxMasterCards.tsx b/src/features/devices/cards/MxMasterCards.tsx
similarity index 77%
rename from src/app/cards/MxMasterCards.tsx
rename to src/features/devices/cards/MxMasterCards.tsx
index b706cb3d..7a046f82 100644
--- a/src/app/cards/MxMasterCards.tsx
+++ b/src/features/devices/cards/MxMasterCards.tsx
@@ -1,14 +1,15 @@
-import { displayText } from "../../i18n";
+import { ArrowDownUp, ArrowLeftRight, BatteryLow, Cog, ScrollText, Vibrate } from "lucide-react";
+import { displayText } from "../../../i18n/index";
 import { useEffect, useState, type ReactNode } from "react";
 import {
   LOGITECH_HAPTIC_PRESETS,
   LOGITECH_SMART_SHIFT_OFF,
   type LogitechHapticPreset,
 } from "@openmouse/protocol/logitech";
-import * as control from "../../device/controller";
-import type { ControlSnapshot } from "../../device/types";
-import { t, tp } from "../../i18n";
-import { OptionMenu, Segmented, SwitchRow } from "../ui";
+import * as control from "../../../device/controller";
+import type { ControlSnapshot } from "../../../device/types";
+import { t, tp } from "../../../i18n/index";
+import { OptionMenu, Segmented, SwitchRow } from "../../../shared/ui";
 
 function HapticsCard({ snapshot }: { snapshot: ControlSnapshot }): ReactNode {
   const status = snapshot.status!;
@@ -18,9 +19,9 @@ function HapticsCard({ snapshot }: { snapshot: ControlSnapshot }): ReactNode {
     .find((name) => LOGITECH_HAPTIC_PRESETS[name] === status.hapticIntensity);
   const staged = snapshot.pending.keys.some((key) => key.startsWith("haptic-"));
   return (
-    <article className={`setting-card${staged ? " is-staged" : ""}`}>
-      <div className="setting-heading compact"><div><p>{displayText(locale, "FEEDBACK")}</p><h2>{t(locale, "mx.haptics")}</h2></div><output>{displayText(locale, status.hapticEnabled ? preset ?? status.hapticIntensity : t(locale, "common.off"))}</output></div>
-      <SwitchRow label={t(locale, "mx.hapticFeedback")} value={status.hapticEnabled} onChange={control.applyHapticEnabled} />
+    <article className={`setting-card mx-control-card${staged ? " is-staged" : ""}`}>
+      <div className="setting-heading compact"><div><h2>{t(locale, "mx.haptics")}</h2></div><output>{displayText(locale, status.hapticEnabled ? preset ?? status.hapticIntensity : t(locale, "common.off"))}</output></div>
+      <SwitchRow icon={Vibrate} label={t(locale, "mx.hapticFeedback")} value={status.hapticEnabled} onChange={control.applyHapticEnabled} />
       <Segmented
         ariaLabel={t(locale, "mx.hapticStrength")}
         value={preset}
@@ -28,7 +29,7 @@ function HapticsCard({ snapshot }: { snapshot: ControlSnapshot }): ReactNode {
         options={(Object.keys(LOGITECH_HAPTIC_PRESETS) as LogitechHapticPreset[]).map((value) => ({ value, label: value }))}
         onChange={control.applyHapticIntensity}
       />
-      <SwitchRow label={t(locale, "mx.batterySaving")} value={status.hapticBatterySaving} onChange={control.applyHapticBatterySaving} />
+      <SwitchRow icon={BatteryLow} label={t(locale, "mx.batterySaving")} value={status.hapticBatterySaving} onChange={control.applyHapticBatterySaving} />
     </article>
   );
 }
@@ -43,8 +44,8 @@ function WheelCard({ snapshot }: { snapshot: ControlSnapshot }): ReactNode {
     "wheel-mode", "smart-shift", "hi-res-scroll", "invert-scroll", "thumb-wheel-invert",
   ].includes(key));
   return (
-    <article className={`setting-card${staged ? " is-staged" : ""}`}>
-      <div className="setting-heading compact"><div><p>{displayText(locale, "SCROLLING")}</p><h2>{displayText(locale, "MagSpeed wheel")}</h2></div><output>{displayText(locale, status.wheelRatchetEngaged == null ? "—" : status.wheelRatchetEngaged ? t(locale, "mx.ratcheted") : t(locale, "mx.freeSpinning"))}</output></div>
+    <article className={`setting-card mx-control-card${staged ? " is-staged" : ""}`}>
+      <div className="setting-heading compact"><div><h2>{displayText(locale, "MagSpeed wheel")}</h2></div><output>{displayText(locale, status.wheelRatchetEngaged == null ? "–" : status.wheelRatchetEngaged ? t(locale, "mx.ratcheted") : t(locale, "mx.freeSpinning"))}</output></div>
       {status.wheelMode != null ? (
         <Segmented
           ariaLabel={t(locale, "mx.wheelMode")}
@@ -55,7 +56,7 @@ function WheelCard({ snapshot }: { snapshot: ControlSnapshot }): ReactNode {
       ) : null}
       {status.smartShiftThreshold != null ? (
         <>
-          <SwitchRow label={displayText(locale, "SmartShift")} value={smartShiftOn} onChange={(enabled) => control.applySmartShiftThreshold(enabled ? 50 : null)} />
+          <SwitchRow icon={Cog} label={displayText(locale, "SmartShift")} value={smartShiftOn} onChange={(enabled) => control.applySmartShiftThreshold(enabled ? 50 : null)} />
           {smartShiftOn ? (
             <label className="field-label spaced">
               <span>{t(locale, "mx.switchThreshold")}</span>
@@ -74,9 +75,9 @@ function WheelCard({ snapshot }: { snapshot: ControlSnapshot }): ReactNode {
           ) : null}
         </>
       ) : null}
-      <SwitchRow label={t(locale, "mx.hiRes")} value={status.hiResScroll} onChange={control.applyHiResScroll} />
-      <SwitchRow label={t(locale, "mx.invertVertical")} value={status.invertScroll} hidden={status.supportsInvertScroll !== true} onChange={control.applyInvertScroll} />
-      <SwitchRow label={t(locale, "mx.invertThumb")} value={status.thumbWheelInverted} hidden={status.supportsThumbWheelInvert !== true} onChange={control.applyThumbWheelInverted} />
+      <SwitchRow icon={ScrollText} label={t(locale, "mx.hiRes")} value={status.hiResScroll} onChange={control.applyHiResScroll} />
+      <SwitchRow icon={ArrowDownUp} label={t(locale, "mx.invertVertical")} value={status.invertScroll} hidden={status.supportsInvertScroll !== true} onChange={control.applyInvertScroll} />
+      <SwitchRow icon={ArrowLeftRight} label={t(locale, "mx.invertThumb")} value={status.thumbWheelInverted} hidden={status.supportsThumbWheelInvert !== true} onChange={control.applyThumbWheelInverted} />
     </article>
   );
 }
@@ -89,11 +90,11 @@ function DeviceNameCard({ snapshot }: { snapshot: ControlSnapshot }): ReactNode
   if (status.friendlyName == null || status.friendlyNameMaxLength == null) return null;
   const valid = name.trim().length > 0 && name.trim() !== status.friendlyName;
   return (
-    <article className={`setting-card${snapshot.pending.keys.includes("friendly-name") ? " is-staged" : ""}`}>
-      <div className="setting-heading compact"><div><p>{displayText(locale, "DEVICE")}</p><h2>{t(locale, "mx.friendlyName")}</h2></div></div>
+    <article className={`setting-card mx-name-card${snapshot.pending.keys.includes("friendly-name") ? " is-staged" : ""}`}>
+      <div className="setting-heading compact"><div><h2>{t(locale, "mx.friendlyName")}</h2></div></div>
       <div className="axis-grid">
         <input aria-label={t(locale, "mx.friendlyNameAria")} maxLength={status.friendlyNameMaxLength} value={name} onChange={(event) => setName(event.currentTarget.value)} />
-        <button className="axis-apply" type="button" disabled={!valid} onClick={() => control.applyFriendlyName(name)}>{t(locale, "mx.stageName")}</button>
+        <button className="om-btn" type="button" disabled={!valid} onClick={() => control.applyFriendlyName(name)}>{t(locale, "mx.stageName")}</button>
       </div>
       <small className="setting-note">{tp(locale, "mx.chars", { n: name.length, max: status.friendlyNameMaxLength })}</small>
     </article>
@@ -107,7 +108,7 @@ function EasySwitchCard({ snapshot }: { snapshot: ControlSnapshot }): ReactNode
   if (status.hostCount == null || status.currentHost == null) return null;
   return (
     <article className="setting-card">
-      <div className="setting-heading compact"><div><p>{displayText(locale, "CONNECTION")}</p><h2>Easy-Switch</h2></div><output>{tp(locale, "mx.hostOf", { a: status.currentHost + 1, b: status.hostCount })}</output></div>
+      <div className="setting-heading compact"><div><h2>{"Easy-Switch"}</h2></div><output>{tp(locale, "mx.hostOf", { a: status.currentHost + 1, b: status.hostCount })}</output></div>
       <div className="easy-switch-slots" role="group" aria-label={t(locale, "mx.pairedComputers")}>
         {Array.from({ length: status.hostCount }, (_, slot) => {
           const current = slot === status.currentHost;
@@ -160,7 +161,7 @@ export function MxMasterButtonsCard({ snapshot }: { snapshot: ControlSnapshot })
   return (
     <article className={`setting-card${anyStaged ? " is-staged" : ""}`}>
       <div className="setting-heading compact">
-        <div><p>{displayText(locale, "BUTTONS")}</p><h2>{t(locale, "mx.remapping")}</h2></div>
+        <div><h2>{t(locale, "mx.remapping")}</h2></div>
         <output>{controls.length}</output>
       </div>
       <div className="button-remap-list">
diff --git a/src/app/cards/PerformanceCards.tsx b/src/features/devices/cards/PerformanceCards.tsx
similarity index 88%
rename from src/app/cards/PerformanceCards.tsx
rename to src/features/devices/cards/PerformanceCards.tsx
index 21103866..2d65ebc2 100644
--- a/src/app/cards/PerformanceCards.tsx
+++ b/src/features/devices/cards/PerformanceCards.tsx
@@ -1,5 +1,5 @@
-import { displayText } from "../../i18n";
-import { useUiLocale } from "../ui-locale";
+import { displayText } from "../../../i18n/index";
+import { useUiLocale } from "../../../shared/ui-locale";
 import { useEffect, useState, type ReactNode } from "react";
 import {
   BUNNY_HOP_LIMITS,
@@ -7,15 +7,15 @@ import {
   reportRateCapabilitiesFor,
   reportRatesFor,
 } from "@openmouse/protocol/drivers/logitech/onboard-profiles";
-import * as control from "../../device/controller";
-import { isNoirKsnakeStatus } from "../../device/noir.ts";
-import { pollingRateText } from "../../ui/polling-rate";
-import { isNativeAttackSharkX11, RATE_STEPS_HZ } from "../../device/controller";
-import type { ControlSnapshot, LiftOffLevel } from "../../device/types";
-import { t, tp } from "../../i18n";
-import type { InterfaceLocale } from "../../interface-preferences";
-import { OptionMenu, RateSlider, Segmented, SwitchButton } from "../ui";
-import { fullChargeHoursAt } from "../../battery-history";
+import * as control from "../../../device/controller";
+import { isNoirKsnakeStatus } from "../../../device/noir.ts";
+import { pollingRateText } from "../../../shared/polling-rate";
+import { isNativeAttackSharkX11, RATE_STEPS_HZ } from "../../../device/controller";
+import type { ControlSnapshot, LiftOffLevel } from "../../../device/types";
+import { t, tp } from "../../../i18n/index";
+import type { InterfaceLocale } from "../../settings/interface-preferences";
+import { RateSlider, Segmented, SwitchButton } from "../../../shared/ui";
+import { fullChargeHoursAt } from "../battery-history";
 
 const LOD_LEVELS: readonly LiftOffLevel[] = ["Low", "Medium", "High"];
 
@@ -62,14 +62,13 @@ export function PollingCard({ snapshot }: { snapshot: ControlSnapshot }): ReactN
                 <span className="setting-scope" id="rate-scope-badge">{displayText(locale, perProfile ? t(locale, "dpi.perProfile") : "Host")}</span>
               ) : null}
             </h2>
-            <p>{displayText(locale, "POLLING RATE")}</p>
           </div>
-          <small id="polling-note" className="setting-note">{displayText(locale, note)}</small>
         </div>
         {!perProfile ? (
-          <output id="polling-value">{displayText(locale, pollingRateText(status.pollingRateHz))} Hz</output>
+          <output id="polling-value" className="performance-figure">{displayText(locale, pollingRateText(status.pollingRateHz))}<span className="performance-unit">{"Hz"}</span></output>
         ) : null}
       </div>
+      <small id="polling-note" className="setting-note">{displayText(locale, note)}</small>
 
       {perProfile && entry ? (
         <div id="profile-rate-rows">
@@ -238,7 +237,6 @@ export function LiftOffDistance({ snapshot }: { snapshot: ControlSnapshot }): Re
         <div>
           <div className="title-row">
             <h2>{t(locale, "perf.liftOff")}</h2>
-            <p>{displayText(locale, "SENSOR")}</p>
           </div>
           <small id="lod-note" className="setting-note">
             {displayText(locale, lodNeedsSurface ? t(locale, "perf.lodNeedSurface") : t(locale, "perf.lodNote"))}
@@ -268,31 +266,15 @@ export function LiftOffDistance({ snapshot }: { snapshot: ControlSnapshot }): Re
       ) : (
         <div id="lod-single">
           {eggLods && eggLods.length > 0 ? (
-            // The mouse's own list, in millimetres: three stops on a v1 mouse,
-            // eleven on a v2, and a two-value glass-mode list. It grows past a
-            // segmented row's width at eleven, so it switches to the menu.
-            eggLods.length <= 3 ? (
-              <Segmented
-                className="three"
-                ariaLabel={t(locale, "perf.liftOff")}
-                options={eggLods.map((label, index) => ({ value: index, label }))}
-                value={status.eggLodIndex ?? null}
-                disabled={snapshot.settingsPending || lodNeedsSurface}
-                onChange={control.applyEggLodIndex}
-              />
-            ) : (
-              <div className="field-label">
-                <span>{t(locale, "perf.liftOff")}</span>
-                <OptionMenu
-                  id="egg-lod-select"
-                  ariaLabel={t(locale, "perf.liftOff")}
-                  options={eggLods.map((label, index) => ({ value: index, label }))}
-                  value={status.eggLodIndex ?? null}
-                  disabled={snapshot.settingsPending || lodNeedsSurface}
-                  onChange={control.applyEggLodIndex}
-                />
-              </div>
-            )
+            <Segmented
+              id="egg-lod-steps"
+              className={eggLods.length <= 3 ? "three" : "lod-steps"}
+              ariaLabel={t(locale, "perf.liftOff")}
+              options={eggLods.map((label, index) => ({ value: index, label }))}
+              value={status.eggLodIndex ?? null}
+              disabled={snapshot.settingsPending || lodNeedsSurface}
+              onChange={control.applyEggLodIndex}
+            />
           ) : (
             <Segmented
               className="three"
@@ -438,7 +420,7 @@ export function LightforceCard({ snapshot }: { snapshot: ControlSnapshot }): Rea
       className={`setting-card${staged ? " is-staged" : ""}`}
       data-pending-key="lightforce-switch-mode"
     >
-      <div className="setting-heading"><div><p>{displayText(locale, "SWITCHES")}</p><h2>LightForce</h2></div></div>
+      <div className="setting-heading"><div><h2>{"LightForce"}</h2></div></div>
       <Segmented
         ariaLabel={t(locale, "perf.lightforceMode")}
         options={[
@@ -526,14 +508,16 @@ export function DynamicSensitivityCard({ snapshot }: { snapshot: ControlSnapshot
       className={`setting-card${staged ? " is-staged" : ""}`}
       data-pending-key="wallhack-dynsens"
     >
-      <div className="setting-heading"><div><h2>{t(locale, "perf.dynSens")}</h2></div></div>
-      <SwitchButton
-        id="wallhack-dynsens-enabled"
-        value={enabled}
-        label={t(locale, "perf.dynSens")}
-        disabled={snapshot.settingsPending}
-        onChange={control.applyDynamicSensitivityEnabled}
-      />
+      <div className="setting-heading">
+        <div><h2>{t(locale, "perf.dynSens")}</h2></div>
+        <SwitchButton
+          id="wallhack-dynsens-enabled"
+          value={enabled}
+          label={t(locale, "perf.dynSens")}
+          disabled={snapshot.settingsPending}
+          onChange={control.applyDynamicSensitivityEnabled}
+        />
+      </div>
       <Segmented
         ariaLabel={t(locale, "perf.dynSensCurve")}
         options={WALLHACK_CURVE_MODES.map((value) => ({
@@ -596,13 +580,16 @@ export function DynamicSensitivityCard({ snapshot }: { snapshot: ControlSnapshot
         </div>
       ) : null}
       <div className="macro-steps">
-        <SwitchButton
-          id="wallhack-dynsens-reporting"
-          value={status.dynamicSensitivitySpeedReporting === true}
-          label={t(locale, "perf.dynSensReporting")}
-          disabled={snapshot.settingsPending}
-          onChange={control.applyDynamicSensitivitySpeedReporting}
-        />
+        <div className="switch-row">
+          <span>{t(locale, "perf.dynSensReporting")}</span>
+          <SwitchButton
+            id="wallhack-dynsens-reporting"
+            value={status.dynamicSensitivitySpeedReporting === true}
+            label={t(locale, "perf.dynSensReporting")}
+            disabled={snapshot.settingsPending}
+            onChange={control.applyDynamicSensitivitySpeedReporting}
+          />
+        </div>
         <small className="setting-note">{t(locale, "perf.dynSensReportingNote")}</small>
       </div>
     </article>
diff --git a/src/app/cards/atk-capabilities.test.ts b/src/features/devices/cards/atk-capabilities.test.ts
similarity index 100%
rename from src/app/cards/atk-capabilities.test.ts
rename to src/features/devices/cards/atk-capabilities.test.ts
diff --git a/src/app/cards/atk-capabilities.ts b/src/features/devices/cards/atk-capabilities.ts
similarity index 60%
rename from src/app/cards/atk-capabilities.ts
rename to src/features/devices/cards/atk-capabilities.ts
index e5c1b267..290c18d4 100644
--- a/src/app/cards/atk-capabilities.ts
+++ b/src/features/devices/cards/atk-capabilities.ts
@@ -1,10 +1,3 @@
-// Vendor-catalog capability helpers for the ATK cards.
-//
-// Kept as pure functions in a .ts module so they can be unit-tested with
-// `node --test` (which cannot load the .tsx cards). The ATK driver reports the
-// vendor HUB's per-model capability flags on `status.atkCatalogFeatures`; the
-// cards use these to show only the controls a given mouse actually has.
-
 import type { MouseStatus } from "@openmouse/protocol/drivers/mouse-types";
 
 type AtkCatalogFeatures = MouseStatus["atkCatalogFeatures"];
@@ -17,10 +10,6 @@ export function atkSensorModes(features: AtkCatalogFeatures): Array<0 | 1 | 2> {
   return features?.noAthleticsMax === true ? [0, 1] : [0, 1, 2];
 }
 
-/**
- * Button rows to display: drops the underside (`bottom`) row on models flagged
- * noBottomButton.
- */
 export function atkVisibleButtons<T extends { id: string }>(
   buttons: readonly T[] | undefined,
   features: AtkCatalogFeatures,
diff --git a/src/app/cards/availability.test.ts b/src/features/devices/cards/availability.test.ts
similarity index 99%
rename from src/app/cards/availability.test.ts
rename to src/features/devices/cards/availability.test.ts
index cfb9fc5e..e3b08b60 100644
--- a/src/app/cards/availability.test.ts
+++ b/src/features/devices/cards/availability.test.ts
@@ -1,8 +1,8 @@
 import assert from "node:assert/strict";
 import { test } from "node:test";
 import { cardAvailability } from "./availability.ts";
-import { traitsFor } from "../../device/traits.ts";
-import type { ControlSnapshot, DeviceCapabilities } from "../../device/types.ts";
+import { traitsFor } from "../../../device/traits.ts";
+import type { ControlSnapshot, DeviceCapabilities } from "../../../device/types.ts";
 import type { MouseStatus } from "@openmouse/protocol/drivers/mouse-types";
 
 const STATUS: MouseStatus = {
@@ -204,7 +204,6 @@ test("the Endgame Gear v2 sensor and handedness cards follow the driver's fields
   }));
   assert.equal(v1.eggV2Sensor, false);
   assert.equal(v1.eggHanded, false);
-  // …and the cards stay inside the EGG advanced section either way.
   assert.equal(cardAvailability(snapshot({
     status: { brand: "Pulsar", ui: { family: "pulsar" }, eggSupportsV2SensorControls: true, eggLeftHanded: true },
   })).eggV2Sensor, false);
@@ -677,7 +676,6 @@ test("LunaFury exposes CompX advanced controls without a signal card", () => {
 });
 
 test("the Incott card follows the fields the device reported, not a brand trait", () => {
-  // Wireless: both controls are present.
   const wireless = cardAvailability(snapshot({
     status: {
       brand: "Incott",
@@ -701,7 +699,6 @@ test("the Incott card follows the fields the device reported, not a brand trait"
   }));
   assert.equal(wired.incott, true);
 
-  // Neither read answered: no card at all rather than an empty one.
   const silent = cardAvailability(snapshot({
     status: { brand: "Incott", ui: { family: "incott", showAdvancedSection: true } },
   }));
diff --git a/src/app/cards/availability.ts b/src/features/devices/cards/availability.ts
similarity index 94%
rename from src/app/cards/availability.ts
rename to src/features/devices/cards/availability.ts
index 22669ad3..0bbe82c7 100644
--- a/src/app/cards/availability.ts
+++ b/src/features/devices/cards/availability.ts
@@ -1,8 +1,8 @@
-import { selectableValues } from "../../device/options.ts";
-import { isPulsarProProtocol } from "../../device/traits.ts";
-import { isSlxStatus, slxProfiles, slxTmr } from "../../device/finalmouse-slx.ts";
-import { isNoirKsnakeStatus } from "../../device/noir.ts";
-import type { ControlSnapshot } from "../../device/types";
+import { selectableValues } from "../../../device/options.ts";
+import { isPulsarProProtocol } from "../../../device/traits.ts";
+import { isSlxStatus, slxProfiles, slxTmr } from "../../../device/finalmouse-slx.ts";
+import { isNoirKsnakeStatus } from "../../../device/noir.ts";
+import type { ControlSnapshot } from "../../../device/types";
 
 export interface CardAvailability {
   dpi: boolean;
@@ -201,9 +201,6 @@ function computeCardAvailability(snapshot: ControlSnapshot): CardAvailability {
     teevolutionDpiLighting: host && (ui?.dpiLighting != null
       || (traits.teevolution && capabilities?.teevolutionProfile != null)),
     finalmouse: host && traits.finalmouse,
-    // Starlight X-only pages from xpanel: TMR-DS needs a reported click
-    // mode, PerfectPolling is a fixed capability readout, and profiles need
-    // a reported roster. All stay hidden on Ultralight X.
     tmrDs: host && traits.finalmouse && isSlxStatus(status) && slxTmr(status) !== null,
     perfectPolling: host && traits.finalmouse && isSlxStatus(status),
     finalmouseProfiles: host && traits.finalmouse && slxProfiles(status) !== null,
@@ -217,7 +214,6 @@ function computeCardAvailability(snapshot: ControlSnapshot): CardAvailability {
       || status.lunafury?.rightDebounceMs != null || status.lunafury?.middleDebounceMs != null
     ),
     lunafuryWheelGuard: host && status.brand === "LunaFury" && status.lunafury?.wheelGuard != null,
-    // Drivers report a boolean only for receivers that answer the LED command.
     dongleLed: typeof status.dongleLedEnabled === "boolean",
     eggFilter: eggs,
     eggSpdt: eggs,
diff --git a/src/app/cards/teevolution/ProfileCard.tsx b/src/features/devices/cards/teevolution/ProfileCard.tsx
similarity index 89%
rename from src/app/cards/teevolution/ProfileCard.tsx
rename to src/features/devices/cards/teevolution/ProfileCard.tsx
index 43b795a8..10427af0 100644
--- a/src/app/cards/teevolution/ProfileCard.tsx
+++ b/src/features/devices/cards/teevolution/ProfileCard.tsx
@@ -1,17 +1,12 @@
-import { displayText } from "../../../i18n";
+import { displayText } from "../../../../i18n/index";
 import { useEffect, useRef, useState, type ReactNode } from "react";
-import * as control from "../../../device/controller";
-import type { ControlSnapshot } from "../../../device/types";
-import { t } from "../../../i18n";
-import { profileLabel } from "../../../ui/profile-label";
-import { IconActivate, IconRunning } from "../../icons";
-import { OptionMenu } from "../../ui";
-import "./profile-card.css";
+import * as control from "../../../../device/controller";
+import type { ControlSnapshot } from "../../../../device/types";
+import { t } from "../../../../i18n/index";
+import { profileLabel } from "../../../../shared/profile-label";
+import { IconActivate, IconRunning } from "../../../../shared/icons";
+import { OptionMenu } from "../../../../shared/ui";
 
-/**
- * Terra Pro onboard banks: the G502 profile disclosure, then the button map
- * for the active bank. Kept here so other mice keep the generic cards.
- */
 export function TeevolutionProfileCard({ snapshot }: { snapshot: ControlSnapshot }): ReactNode {
   const [expanded, setExpanded] = useState(true);
   const inner = useRef<HTMLDivElement>(null);
@@ -68,7 +63,7 @@ export function TeevolutionProfileCard({ snapshot }: { snapshot: ControlSnapshot
           onClick={() => setExpanded((open) => !open)}
         >
           <span className="profile-summary-text">
-            <span className="profile-summary-label">{t(locale, "prof.editing")}</span>
+            <span className="profile-summary-label">{t(locale, "prof.editingTag")}</span>
             <strong>{summaryName}</strong>
             <small>{displayText(locale, liveDetail || t(locale, "prof.profileStores"))}</small>
           </span>
@@ -97,10 +92,10 @@ export function TeevolutionProfileCard({ snapshot }: { snapshot: ControlSnapshot
                       if (!running) void control.applyProfileSelection(value);
                     }}
                   >
-                    <span className={`device-dot${running ? "" : " is-idle"}`} />
+                    <span className="profile-slot">{value}</span>
                     <span className="profile-row-text">
                       <strong>
-                        {label}{tags ? ` · ${tags}` : ""}
+                        {label}{tags ? <span className="om-badge is-accent">{tags}</span> : null}
                       </strong>
                       <small>
                         {displayText(locale, running ? liveDetail || "stored on the mouse" : "stored on the mouse")}
@@ -126,7 +121,6 @@ export function TeevolutionProfileCard({ snapshot }: { snapshot: ControlSnapshot
             <div className="profile-button-editor">
               <div className="profile-button-heading">
                 <div>
-                  <p>{displayText(locale, "BUTTONS")}</p>
                   <h2>{t(locale, "prof.assign")}</h2>
                   <small>{t(locale, "prof.assignBody")}</small>
                 </div>
diff --git a/src/app/workspace-tabs.test.ts b/src/features/devices/workspace-tabs.test.ts
similarity index 98%
rename from src/app/workspace-tabs.test.ts
rename to src/features/devices/workspace-tabs.test.ts
index 06942797..f861fa46 100644
--- a/src/app/workspace-tabs.test.ts
+++ b/src/features/devices/workspace-tabs.test.ts
@@ -11,7 +11,6 @@ test("HB68 exposes only system mode; existing keyboard tabs remain available", (
   assert.ok(availableKeyboardWorkspaceTabs().includes("lighting"));
 });
 
-/** A CardAvailability fixture where every unset field reads as false. */
 function availability(enabled: Partial<CardAvailability>): CardAvailability {
   return new Proxy(enabled, { get: (target, property) => Reflect.get(target, property) ?? false }) as CardAvailability;
 }
diff --git a/src/app/workspace-tabs.ts b/src/features/devices/workspace-tabs.ts
similarity index 82%
rename from src/app/workspace-tabs.ts
rename to src/features/devices/workspace-tabs.ts
index 725919b2..2a560630 100644
--- a/src/app/workspace-tabs.ts
+++ b/src/features/devices/workspace-tabs.ts
@@ -1,7 +1,6 @@
-import { WORKSPACE_TAB_ORDER, type WorkspaceTab } from "../device/types.ts";
+import { WORKSPACE_TAB_ORDER, type WorkspaceTab } from "../../device/types.ts";
 import type { CardAvailability } from "./cards/availability.ts";
 
-/** Tabs a connected mouse may show, narrowed by what its cards support. */
 export function availableWorkspaceTabs(
   connected: boolean,
   has: CardAvailability,
@@ -22,7 +21,6 @@ export function availableWorkspaceTabs(
   });
 }
 
-/** Fall back to the overview when the requested tab is not available. */
 export function availableWorkspaceTab(
   current: WorkspaceTab,
   tabs: readonly WorkspaceTab[],
@@ -30,7 +28,6 @@ export function availableWorkspaceTab(
   return tabs.includes(current) ? current : "overview";
 }
 
-/** The HB68 currently implements only the overview system-mode control. */
 export function availableKeyboardWorkspaceTabs(family?: string): readonly WorkspaceTab[] {
   return family === "kochi" ? ["overview"] : WORKSPACE_TAB_ORDER;
 }
diff --git a/src/app/GameProfilePanel.tsx b/src/features/games/GameProfilePanel.tsx
similarity index 85%
rename from src/app/GameProfilePanel.tsx
rename to src/features/games/GameProfilePanel.tsx
index e27a0d6b..2db3573e 100644
--- a/src/app/GameProfilePanel.tsx
+++ b/src/features/games/GameProfilePanel.tsx
@@ -1,4 +1,4 @@
-import { displayText } from "../i18n";
+import { displayText } from "../../i18n/index";
 // Per-game settings profile, pushed to OpenMouse Bridge's `/v1/profiles` so it
 // keeps applying the moment Bridge sees the game come to the foreground —
 // even with this tab closed. There is no browser-side equivalent: only
@@ -13,24 +13,21 @@ import { displayText } from "../i18n";
 // settings. useBridgeProfileApplier writes it when the game launches and puts
 // the replaced values back when it closes.
 import { useEffect, useRef, useState, type ReactNode } from "react";
-import { ArrowLeft, Gamepad2 } from "lucide-react";
-import * as control from "../device/controller";
-import type { BridgeGame, BridgeProfile } from "../bridge";
-import { bridgeProfiles, saveBridgeProfiles } from "../bridge";
-import { subscribeBridgeHidActive } from "../bridge-hid";
-import { fetchGamesCatalog, gameArtwork, type CatalogGame } from "../games-catalog";
-import { snapshotKey, type GameProfileSnapshot } from "../device/game-profile-snapshot";
-import type { ControlSnapshot, SidebarDevice, ToastKind, WorkspaceTab } from "../device/types";
-import { t, tp, type I18nKey } from "../i18n";
-import type { InterfaceLocale } from "../interface-preferences";
-import { cardAvailability } from "./cards/availability";
-import { TabIcon, Workspace } from "./OverviewPage";
-import { profileTarget } from "./useBridgeProfileApplier";
-import { availableWorkspaceTabs } from "./workspace-tabs";
+import { ArrowLeft, Gamepad2, Mouse } from "lucide-react";
+import * as control from "../../device/controller";
+import type { BridgeGame, BridgeProfile } from "../bridge/bridge";
+import { bridgeProfiles, saveBridgeProfiles } from "../bridge/bridge";
+import { subscribeBridgeHidActive } from "../bridge/bridge-hid";
+import { fetchGamesCatalog, gameArtwork, type CatalogGame } from "./games-catalog";
+import { snapshotKey, type GameProfileSnapshot } from "../../device/game-profile-snapshot";
+import type { ControlSnapshot, SidebarDevice, ToastKind, WorkspaceTab } from "../../device/types";
+import { t, tp, type I18nKey } from "../../i18n/index";
+import type { InterfaceLocale } from "../settings/interface-preferences";
+import { cardAvailability } from "../devices/cards/availability";
+import { TabIcon, Workspace } from "../devices/OverviewPage";
+import { profileTarget } from "../bridge/useBridgeProfileApplier";
+import { availableWorkspaceTabs } from "../devices/workspace-tabs";
 
-// Every card edit changes the draft; waiting this long before pushing to
-// Bridge (and toasting) keeps a slider drag or typed DPI from becoming a
-// dozen separate saves and toasts.
 const SAVE_DEBOUNCE_MS = 600;
 
 // Overview is read-only device information, and Profiles manages the mouse's
@@ -270,15 +267,15 @@ export function GameProfilePanel({
   const activeTab = tabs.includes(tab) ? tab : tabs[0] ?? "performance";
 
   return (
-    <div className="game-profile-page">
-      <button type="button" className="game-profile-back" onClick={onBack}>
+    <div className="om-page game-profile-page">
+      <button type="button" className="om-btn is-ghost game-profile-back" onClick={onBack}>
         <ArrowLeft size={15} strokeWidth={2} aria-hidden="true" />
         {t(locale, "nav.games")}
       </button>
 
-      <div className="game-profile-layout">
+      <div className="om-panel game-profile-layout">
         <div className="game-profile-side">
-          <div className="game-profile-art" style={artwork ? undefined : { background: "linear-gradient(160deg, var(--ui-accent-soft), var(--surface-panel))" }}>
+          <div className="game-profile-art">
             {artwork ? (
               <img src={artwork} alt={game.name} loading="lazy" draggable={false} />
             ) : (
@@ -289,37 +286,38 @@ export function GameProfilePanel({
 
         <div className="game-profile-settings">
           <div className="game-profile-name-card">
-            <span className="game-profile-name-label">{displayText(locale, "PROFILE")}</span>
-            <span className="game-profile-name">{game.name}</span>
-            <span className="game-profile-changed">
-              {displayText(locale, changedCount === 0
-                ? t(locale, "games.noChanges")
-                : tp(locale, "games.changedCount", { n: changedCount }))}
-            </span>
+            <div>
+              <h1 className="game-profile-name">{game.name}</h1>
+              <span className="game-profile-changed">
+                {displayText(locale, changedCount === 0
+                  ? t(locale, "games.noChanges")
+                  : tp(locale, "games.changedCount", { n: changedCount }))}
+              </span>
+            </div>
             <button
               type="button"
-              className="game-profile-clear"
+              className="om-btn is-ghost game-profile-clear"
               disabled={saving || (!autoApply && changedCount === 0)}
               onClick={clearProfile}
-            > {displayText(locale, "Clear")} </button>
+            >{t(locale, "cap.clear")}</button>
           </div>
 
           <section className="game-profile-section">
-            <span className="game-profile-section-label">{displayText(locale, "TARGET DEVICE")}</span>
+            <h2 className="game-profile-section-label">{t(locale, "nav.devices")}</h2>
             {devices.length === 0 ? (
               <p className="game-profile-empty">{displayText(locale, "No devices detected yet.")}</p>
             ) : (
               <ul className="game-profile-devices">
                 {devices.map((device, index) => (
                   <li key={device.index} className="game-profile-device-row">
-                    <span className="game-profile-device-icon" aria-hidden="true">?</span>
+                    <span className="game-profile-device-icon" aria-hidden="true"><Mouse size={20} strokeWidth={1.8} /></span>
                     <span className="game-profile-device-text">
                       <span className="game-profile-device-name">{device.name}</span>
                       <span className="game-profile-device-brand">{displayText(locale, deviceBrand(device))}</span>
                     </span>
                     <button
                       type="button"
-                      className={`game-profile-select${targetIndex === index ? " is-selected" : ""}`}
+                      className={`om-btn is-sm game-profile-select${targetIndex === index ? " is-selected" : ""}`}
                       onClick={() => selectTarget(index)}
                     >
                       {displayText(locale, targetIndex === index ? "Selected" : "Select")}
@@ -333,17 +331,17 @@ export function GameProfilePanel({
           <section className="game-profile-section game-profile-auto-apply">
             <div className="game-profile-auto-apply-text">
               <span className="game-profile-auto-apply-title">{displayText(locale, "Apply automatically")}</span>
-              <span className="game-profile-auto-apply-body"> {displayText(locale, `Push this profile to your mouse the moment ${game.name} is detected running.`)} </span>
+              <span className="game-profile-auto-apply-body">{tp(locale, "bridge.profileEnabledDetail", { name: game.name })}</span>
             </div>
             <button
               type="button"
               role="switch"
               aria-checked={autoApply}
-              className={`game-profile-toggle${autoApply ? " is-on" : ""}`}
+              className={`switch-button game-profile-toggle${autoApply ? " is-on" : ""}`}
               disabled={saving || targetIndex === null}
               onClick={toggleAutoApply}
             >
-              <span className="game-profile-toggle-thumb" />
+              <span className="switch-thumb game-profile-toggle-thumb" />
             </button>
           </section>
         </div>
@@ -364,13 +362,13 @@ export function GameProfilePanel({
           </p>
         ) : (
           <>
-            <nav className="device-tabs-bar game-profile-tabs" role="tablist" aria-label={t(locale, "games.settings")}>
+            <nav className="om-tabs device-tabs-bar game-profile-tabs" role="tablist" aria-label={t(locale, "games.settings")}>
               {tabs.map((entry) => (
                 <button
                   key={entry}
                   type="button"
                   role="tab"
-                  className={`device-tab-pill${activeTab === entry ? " active" : ""}`}
+                  className={`om-tab device-tab-pill${activeTab === entry ? " active is-active" : ""}`}
                   aria-selected={activeTab === entry}
                   onClick={() => setTab(entry)}
                 >
diff --git a/src/app/GameRequestDialog.tsx b/src/features/games/GameRequestDialog.tsx
similarity index 89%
rename from src/app/GameRequestDialog.tsx
rename to src/features/games/GameRequestDialog.tsx
index 2c8bf82e..c93862df 100644
--- a/src/app/GameRequestDialog.tsx
+++ b/src/features/games/GameRequestDialog.tsx
@@ -1,19 +1,11 @@
-import { displayText } from "../i18n";
-import { useUiLocale } from "./ui-locale";
-// "Request a game or app" — the Games page's request flow. Collects what
-// Bridge's detector needs to add an entry
-// to Desktop's `games.json` (a name plus the executable it watches for) — a
-// game, or a regular app like Premiere Pro that deserves its own profile —
-// and who to ask about it, then shows the exact Discord embed before anything
-// is sent.
-// It rides the same `/api/feedback` relay as feedback: a plain JSON embed,
-// no attachment, so there is nothing to screen server-side.
+import { displayText } from "../../i18n/index";
+import { useUiLocale } from "../../shared/ui-locale";
 import { useEffect, useRef, useState, type ReactNode } from "react";
 import { Check, Copy, Gamepad2 } from "lucide-react";
-import * as control from "../device/controller";
-import { bridgeApplicationIconUrl, bridgeRunningApplications, type BridgeApplication, type BridgeGame } from "../bridge";
-import { t, tp, type I18nKey } from "../i18n";
-import type { InterfaceLocale } from "../interface-preferences";
+import * as control from "../../device/controller";
+import { bridgeApplicationIconUrl, bridgeRunningApplications, type BridgeApplication, type BridgeGame } from "../bridge/bridge";
+import { t, tp, type I18nKey } from "../../i18n/index";
+import type { InterfaceLocale } from "../settings/interface-preferences";
 
 const REQUEST_URL = "/api/feedback";
 const MAX_NAME_LENGTH = 80;
@@ -179,7 +171,6 @@ export function GameRequestDialog({ open, onClose, locale = "en", bridgeActive,
   async function loadRunningApps(): Promise<void> {
     try {
       const list = await bridgeRunningApplications();
-      // The window in front is most likely the one being requested.
       setApps(list
         .filter((app) => app.path)
         .sort((a, b) => Number(b.foreground) - Number(a.foreground) || a.name.localeCompare(b.name)));
@@ -255,28 +246,27 @@ export function GameRequestDialog({ open, onClose, locale = "en", bridgeActive,
           }
         }}
       >
-        <header>
+        <header className="om-dialog-head">
           <div>
-            <p className="overline">OpenMouse</p>
             <h2 id="gamereq-dialog-title">
               {t(locale, step === "form" ? "gamereq.title" : "gamereq.previewTitle")}
             </h2>
           </div>
-          <button type="button" onClick={onClose} aria-label={t(locale, "common.close")}>×</button>
+          <button className="om-icon-btn" type="button" onClick={onClose} aria-label={t(locale, "common.close")}>×</button>
         </header>
 
         {step === "form" ? (
           <>
             <p className="feedback-description">{t(locale, "gamereq.description")}</p>
 
-            <div className="gamereq-kind" role="radiogroup" aria-label={t(locale, "gamereq.kindLabel")}>
+            <div className="segmented gamereq-kind" role="radiogroup" aria-label={t(locale, "gamereq.kindLabel")}>
               {(["game", "app"] as const).map((key) => (
                 <button
                   key={key}
                   type="button"
                   role="radio"
                   aria-checked={kind === key}
-                  className={kind === key ? "is-active" : ""}
+                  className={kind === key ? "is-active selected" : ""}
                   onClick={() => setKind(key)}
                 >
                   {t(locale, key === "game" ? "gamereq.kindGame" : "gamereq.kindApp")}
@@ -318,7 +308,7 @@ export function GameRequestDialog({ open, onClose, locale = "en", bridgeActive,
 
                 {bridgeActive ? (
                   <div className="gamereq-running">
-                    <button type="button" className="gamereq-chip" onClick={() => { void loadRunningApps(); }}>
+                    <button type="button" className="om-btn is-sm gamereq-chip" onClick={() => { void loadRunningApps(); }}>
                       {t(locale, "gamereq.pickRunning")}
                     </button>
                     {apps !== null ? (
@@ -343,14 +333,14 @@ export function GameRequestDialog({ open, onClose, locale = "en", bridgeActive,
                   </div>
                 ) : null}
 
-                <div className="gamereq-os" role="tablist" aria-label={t(locale, "gamereq.findTitle")}>
+                <div className="segmented gamereq-os" role="tablist" aria-label={t(locale, "gamereq.findTitle")}>
                   {(Object.keys(COMMANDS) as Platform[]).map((key) => (
                     <button
                       key={key}
                       type="button"
                       role="tab"
                       aria-selected={platform === key}
-                      className={platform === key ? "is-active" : ""}
+                      className={platform === key ? "is-active selected" : ""}
                       onClick={() => setPlatform(key)}
                     >
                       {displayText(locale, PLATFORM_LABELS[key])}
@@ -393,9 +383,9 @@ export function GameRequestDialog({ open, onClose, locale = "en", bridgeActive,
               <p className="feedback-error" role="alert">{t(locale, "gamereq.discordInvalid")}</p>
             ) : null}
 
-            <div className="feedback-actions">
-              <button type="button" onClick={onClose}>{t(locale, "common.cancel")}</button>
-              <button type="submit" className="is-primary" disabled={!canPreview}>
+            <div className="om-dialog-foot feedback-actions">
+              <button className="om-btn is-ghost" type="button" onClick={onClose}>{t(locale, "common.cancel")}</button>
+              <button type="submit" className="om-btn is-primary" disabled={!canPreview}>
                 {t(locale, "gamereq.preview")}
               </button>
             </div>
@@ -445,11 +435,11 @@ export function GameRequestDialog({ open, onClose, locale = "en", bridgeActive,
               </p>
             ) : null}
 
-            <div className="feedback-actions">
-              <button type="button" onClick={() => setStep("form")} disabled={busy}>
+            <div className="om-dialog-foot feedback-actions">
+              <button className="om-btn is-ghost" type="button" onClick={() => setStep("form")} disabled={busy}>
                 {t(locale, "gamereq.edit")}
               </button>
-              <button type="submit" className="is-primary" disabled={busy || cooldown > 0}>
+              <button type="submit" className="om-btn is-primary" disabled={busy || cooldown > 0}>
                 {displayText(locale, busy ? "…" : t(locale, "gamereq.send"))}
               </button>
             </div>
diff --git a/src/features/games/GamesPage.tsx b/src/features/games/GamesPage.tsx
new file mode 100644
index 00000000..e98c8d19
--- /dev/null
+++ b/src/features/games/GamesPage.tsx
@@ -0,0 +1,165 @@
+import { displayText } from "../../i18n/index";
+import { useEffect, useState, type ReactNode } from "react";
+import { Download, Gamepad2, Plus } from "lucide-react";
+import { bridgeGames, bridgeProfiles, type BridgeGame, type BridgeStatus } from "../bridge/bridge";
+import { isBridgeHidActive, subscribeBridgeHidActive } from "../bridge/bridge-hid";
+import { subscribeBridgeStatus } from "../bridge/bridge-status-store";
+import type { ControlSnapshot } from "../../device/types";
+import { fetchGamesCatalog, gameArtwork } from "./games-catalog";
+import { t } from "../../i18n/index";
+import { GameProfilePanel } from "./GameProfilePanel";
+import { GameRequestDialog } from "./GameRequestDialog";
+import { BRIDGE_RELEASES_URL } from "../bridge/BridgeStatus";
+
+export function useBridgeActive(): boolean {
+  const [active, setActive] = useState(isBridgeHidActive());
+  useEffect(() => subscribeBridgeHidActive(setActive), []);
+  return active;
+}
+
+function useBridgeGames(active: boolean): BridgeGame[] {
+  const [games, setGames] = useState<BridgeGame[]>([]);
+  useEffect(() => {
+    if (!active) return;
+    // The games list only changes with a commit to Desktop's repo, not
+    // anything a session does — one fetch per connection is plenty.
+    const controller = new AbortController();
+    void bridgeGames(controller.signal).then(setGames).catch(() => undefined);
+    return () => controller.abort();
+  }, [active]);
+  return games;
+}
+
+function useCatalog(): { artwork: Map<string, string>; games: BridgeGame[] } {
+  const [catalog, setCatalog] = useState<{ artwork: Map<string, string>; games: BridgeGame[] }>({ artwork: new Map(), games: [] });
+  useEffect(() => {
+    const controller = new AbortController();
+    void fetchGamesCatalog(controller.signal)
+      .then((entries) => {
+        const artwork = new Map<string, string>();
+        for (const entry of entries) {
+          const url = gameArtwork(entry);
+          if (url) artwork.set(entry.name.toLowerCase(), url);
+        }
+        setCatalog({ artwork, games: entries.map((entry) => ({ name: entry.name, executables: entry.executables })) });
+      })
+      .catch(() => undefined);
+    return () => controller.abort();
+  }, []);
+  return catalog;
+}
+
+export function GamesPage({ snapshot }: { snapshot: ControlSnapshot }): ReactNode {
+  const locale = snapshot.preferences.locale;
+  const active = useBridgeActive();
+  const bridgeList = useBridgeGames(active);
+  const catalog = useCatalog();
+  const artwork = catalog.artwork;
+  const games = active ? bridgeList : catalog.games;
+  const [status, setStatus] = useState<BridgeStatus | null>(null);
+  const [profiled, setProfiled] = useState<Set<string>>(new Set());
+  const [selectedGame, setSelectedGame] = useState<BridgeGame | null>(null);
+  const [requestOpen, setRequestOpen] = useState(false);
+
+  useEffect(() => subscribeBridgeStatus(setStatus), []);
+
+  // Refetched every time the grid comes back into view, so a profile just
+  // turned on/off in GameProfilePanel shows up in its badge immediately.
+  useEffect(() => {
+    if (!active || selectedGame) return;
+    const controller = new AbortController();
+    void bridgeProfiles(controller.signal)
+      .then((profiles) => setProfiled(new Set(profiles
+        .filter((profile) => profile.enabled !== false)
+        .map((profile) => profile.application.name.toLowerCase()))))
+      .catch(() => undefined);
+    return () => controller.abort();
+  }, [active, selectedGame]);
+
+  if (selectedGame) {
+    return <GameProfilePanel snapshot={snapshot} game={selectedGame} onBack={() => setSelectedGame(null)} />;
+  }
+
+  return (
+    <div className="om-page games-page">
+      <div className="om-page-head games-header">
+        <div>
+          <h1 className="games-title">{t(locale, "nav.games")}</h1>
+          <p className="om-meta games-subtitle">{t(locale, "games.subtitle")}</p>
+        </div>
+        {active ? (
+          <span className="om-badge is-ok games-bridge-status">
+            <span className="games-bridge-dot" aria-hidden="true"><Gamepad2 size={13} strokeWidth={1.8} /></span>
+            {t(locale, "bridge.title")} · {t(locale, "bridge.connected")}
+            {displayText(locale, status?.version ? ` · v${status.version}` : "")}
+          </span>
+        ) : (
+          <span className="om-badge games-bridge-status">
+            {t(locale, "bridge.title")} · {t(locale, "bridge.notRunning")}
+          </span>
+        )}
+      </div>
+
+      {active ? null : (
+        <section className="games-needs-bridge">
+          <span className="games-needs-bridge-icon" aria-hidden="true"><Gamepad2 strokeWidth={1.8} /></span>
+          <div>
+            <h2>{t(locale, "games.needsBridgeTitle")}</h2>
+            <p>{t(locale, "games.needsBridgeBody")}</p>
+          </div>
+          <a className="om-btn is-primary" href={BRIDGE_RELEASES_URL} target="_blank" rel="noreferrer">
+            <Download strokeWidth={2} aria-hidden="true" />
+            {t(locale, "bridge.download")}
+          </a>
+        </section>
+      )}
+
+      <ul className={`games-grid${active ? "" : " is-locked"}`}>
+        {games.map((game) => {
+          const art = artwork.get(game.name.toLowerCase());
+          const body = (
+            <>
+              <span className="games-tile-art">
+                {art ? (
+                  <img src={art} alt={displayText(locale, "")} loading="lazy" />
+                ) : (
+                  <Gamepad2 size={28} strokeWidth={1.6} aria-hidden="true" />
+                )}
+                {profiled.has(game.name.toLowerCase()) ? (
+                  <span className="om-badge games-tile-badge">{t(locale, "games.autoApply")}</span>
+                ) : null}
+              </span>
+              <span className="games-tile-name">{game.name}</span>
+            </>
+          );
+          return (
+            <li key={game.name}>
+              {active ? (
+                <button type="button" className="games-tile" onClick={() => setSelectedGame(game)}>{body}</button>
+              ) : (
+                <div className="games-tile">{body}</div>
+              )}
+            </li>
+          );
+        })}
+        <li>
+          <button type="button" className="games-tile games-tile-request" onClick={() => setRequestOpen(true)}>
+            <span className="games-tile-art">
+              <Plus size={28} strokeWidth={2} aria-hidden="true" />
+              <span className="games-tile-request-copy">{t(locale, "gamereq.tileHint")}</span>
+            </span>
+            <span className="games-tile-name">{t(locale, "gamereq.tile")}</span>
+          </button>
+        </li>
+      </ul>
+
+      <GameRequestDialog
+        open={requestOpen}
+        onClose={() => setRequestOpen(false)}
+        locale={locale}
+        bridgeActive={active}
+        knownGames={games}
+      />
+    </div>
+  );
+}
diff --git a/src/games-catalog.ts b/src/features/games/games-catalog.ts
similarity index 100%
rename from src/games-catalog.ts
rename to src/features/games/games-catalog.ts
diff --git a/src/app/HardwareTestPage.tsx b/src/features/hardware-test/HardwareTestPage.tsx
similarity index 91%
rename from src/app/HardwareTestPage.tsx
rename to src/features/hardware-test/HardwareTestPage.tsx
index 2e55cfdc..53bab7f6 100644
--- a/src/app/HardwareTestPage.tsx
+++ b/src/features/hardware-test/HardwareTestPage.tsx
@@ -1,10 +1,10 @@
-import { displayText } from "../i18n";
+import { displayText } from "../../i18n/index";
 import { useCallback, useEffect, useRef, useState, type ReactNode } from "react";
-import * as control from "../device/controller";
-import type { ControlSnapshot } from "../device/types";
-import { t, tp } from "../i18n";
-import { computeResults, formatHz, rollingLiveHz } from "../ui/polling-stats";
-import { brandChecks } from "../hardware-brand-checks";
+import * as control from "../../device/controller";
+import type { ControlSnapshot } from "../../device/types";
+import { t, tp } from "../../i18n/index";
+import { computeResults, formatHz, rollingLiveHz } from "./polling-stats";
+import { brandChecks } from "./hardware-brand-checks";
 import {
   automaticChecks,
   deviceInfoFromSnapshot,
@@ -18,40 +18,25 @@ import {
   type FlashSettingRoundTrip,
   type HardwareTestReport,
   type HardwareTestResult,
-} from "../hardware-test-report";
-import { crosscheckSupportedDevices } from "../supported-devices-crosscheck";
-import { DeviceShowcaseSidebar } from "./OverviewPage";
-import { DISCORD_URL } from "./social-links";
-
-/**
- * One animated row in the run panel. The suite surfaces itself as a sequence
- * of stages — "Test started", each check animating in with a spinner while it
- * runs, plus dedicated sampling (determinate progress bar with a live Hz
- * readout) and flash (indeterminate "writing" wave) stages — never a terminal
- * log.
- */
+} from "./hardware-test-report";
+import { crosscheckSupportedDevices } from "./supported-devices-crosscheck";
+import { DeviceShowcaseSidebar } from "../devices/OverviewPage";
+import { DISCORD_URL } from "../../shared/social-links";
+
 type StageKind = "start" | "check" | "sampling" | "flash";
 type StageState = "running" | "pass" | "fail" | "skip";
 
 interface TestStage {
   id: number;
   kind: StageKind;
-  /** Human label of the stage; check labels come from the report module. */
   label: string;
   state: StageState;
   detail?: string | null;
-  /** Interactive callout shown only while the stage is running. */
   hint?: string;
 }
 
 const sleep = (ms: number): Promise<void> => new Promise((resolve) => window.setTimeout(resolve, ms));
 
-/**
- * Summarizes the HID collections the browser exposes for the connected device
- * (usage page:usage per top-level collection) — the descriptor-level half of
- * the control-interface check. Returns null on bridge-only transports or when
- * the device is not visible to WebHID.
- */
 async function hidInterfacesSummary(vendorId: number | null, productId: number | null): Promise<string | null> {
   if (vendorId === null || productId === null) return null;
   try {
@@ -469,14 +454,35 @@ export function HardwareTestPage({ snapshot }: { snapshot: ControlSnapshot }): R
           : t(locale, "hw.stateStopped")
       : t(locale, "hw.stateIdle");
 
-  const footerNoteParts = t(locale, "hw.footerNote").split("{discord}");
   const samplingPercent = Math.round((samplingElapsedMs / SAMPLE_WINDOW_MS) * 100);
 
+  const footerNoteParts = t(locale, "hw.footerNote").split("{discord}");
+
   return (
-    <div className="mouse-test-page hardware-test-page">
-      <div className="mouse-test-header">
-        <h1 className="mouse-test-title">{t(locale, "hw.title")}</h1>
-        <p className="mouse-test-subtitle">{t(locale, "hw.subtitle")}</p>
+    <div className="om-page mouse-test-page hardware-test-page">
+      <div className="om-page-head mouse-test-header">
+        <div>
+          <h1 className="mouse-test-title">{t(locale, "hw.title")}</h1>
+          <p className="om-meta mouse-test-subtitle">{t(locale, "hw.subtitle")}</p>
+        </div>
+        <div className="hardware-test-actions">
+          <button
+            className="om-btn hardware-test-btn hardware-test-btn-share"
+            type="button"
+            disabled={!report || running}
+            onClick={downloadReport}
+          >
+            {t(locale, "hw.download")}
+          </button>
+          <button className="om-btn is-primary hardware-test-btn hardware-test-btn-start" type="button" disabled={running} onClick={startTest}>
+            {t(locale, "hw.start")}
+          </button>
+          {running ? (
+            <button className="om-btn is-danger hardware-test-btn hardware-test-btn-end" type="button" onClick={endTest}>
+              {t(locale, "hw.end")}
+            </button>
+          ) : null}
+        </div>
       </div>
 
       <div className="hardware-test-layout">
@@ -486,11 +492,11 @@ export function HardwareTestPage({ snapshot }: { snapshot: ControlSnapshot }): R
           {info.present ? (
             <DeviceShowcaseSidebar snapshot={snapshot} />
           ) : (
-            <div className="hardware-test-no-device">
+            <div className="om-panel hardware-test-no-device">
               <p className="hardware-test-no-device-title">{t(locale, "hw.noDevice")}</p>
               <p className="hardware-test-no-device-detail">{t(locale, "hw.noDeviceDetail")}</p>
               <button
-                className="hardware-test-btn hardware-test-btn-connect"
+                className="om-btn hardware-test-btn hardware-test-btn-connect"
                 type="button"
                 disabled={connecting || snapshot.connectDisabled}
                 onClick={connectDevice}
@@ -503,16 +509,16 @@ export function HardwareTestPage({ snapshot }: { snapshot: ControlSnapshot }): R
 
         {/* ── Right: split panel — animated test run | live device status ── */}
         <section className="hardware-test-panel-wrap">
-          <div className="hardware-test-panel" aria-label={t(locale, "hw.panelTitle")}>
-            <div className="hardware-test-panel-head">
+          <div className="om-panel hardware-test-panel" aria-label={t(locale, "hw.panelTitle")}>
+            <div className="om-panel-head hardware-test-panel-head">
               <svg className="hardware-test-head-glyph" viewBox="0 0 24 24" aria-hidden="true">
                 <path
                   fill="currentColor"
                   d="M12 2 4 5v6c0 5.55 3.84 10.74 8 12 4.16-1.26 8-6.45 8-12V5l-8-3zm-2 15-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z"
                 />
               </svg>
-              <span className="hardware-test-panel-title">{t(locale, "hw.panelTitle")}</span>
-              <span className={`hardware-test-state-pill ${stateClass}`}>
+              <span className="hardware-test-panel-title">{t(locale, "hw.title")}</span>
+              <span className={`om-badge hardware-test-state-pill ${stateClass}`}>
                 <i aria-hidden="true" />
                 {displayText(locale, stateText)}
               </span>
@@ -577,6 +583,10 @@ export function HardwareTestPage({ snapshot }: { snapshot: ControlSnapshot }): R
                         ? tp(locale, "hw.liveHertz", { hz: liveSample.hz, samples: liveSample.samples })
                         : "—")}
                     </span>
+                  ) : stage.state !== "running" ? (
+                    <span className="hardware-test-stage-result">
+                      {displayText(locale, stage.state === "pass" ? "OK" : stage.state === "fail" ? "FAIL" : "SKIP")}
+                    </span>
                   ) : null}
                 </div>
               ))}
@@ -594,12 +604,12 @@ export function HardwareTestPage({ snapshot }: { snapshot: ControlSnapshot }): R
                   )}
                 </svg>
                 <div className="hardware-test-banner-text">
-                  <strong>{displayText(locale, verdictLabel)}</strong>
+                  <strong title={displayText(locale, verdictLabel) ?? undefined}>{displayText(locale, stateText)}</strong>
                   <span>{tp(locale, "hw.finishTime", { s: (report.durationMs / 1000).toFixed(1) })}</span>
                 </div>
                 <div className="hardware-test-banner-counts">
                   <span className="ok">{passed} {displayText(locale, "OK")}</span>
-                  <span className="fail">{failed} {displayText(locale, "FAIL")}</span>
+                  <span className="fail">{failed} {t(locale, "hw.stateFailed")}</span>
                   <span className="skip">{skipped} {displayText(locale, "SKIP")}</span>
                 </div>
               </div>
@@ -607,35 +617,19 @@ export function HardwareTestPage({ snapshot }: { snapshot: ControlSnapshot }): R
 
             <div className="hardware-test-panel-bar">
               <button
-                className="hardware-test-btn hardware-test-btn-connect"
+                className="om-btn is-ghost hardware-test-btn hardware-test-btn-connect"
                 type="button"
                 disabled={connecting || running || snapshot.connectDisabled}
                 onClick={connectDevice}
               >
                 {displayText(locale, connecting ? "…" : t(locale, "hw.connect"))}
               </button>
-              <button className="hardware-test-btn hardware-test-btn-start" type="button" disabled={running} onClick={startTest}>
-                {t(locale, "hw.start")}
-              </button>
-              {running ? (
-                <button className="hardware-test-btn hardware-test-btn-end" type="button" onClick={endTest}>
-                  {t(locale, "hw.end")}
-                </button>
-              ) : null}
-              <button
-                className="hardware-test-btn hardware-test-btn-share"
-                type="button"
-                disabled={!report || running}
-                onClick={downloadReport}
-              >
-                {t(locale, "hw.download")}
-              </button>
             </div>
           </div>
           {info.present ? (
-            <aside className="hardware-test-status" aria-label={t(locale, "hw.deviceCard")}>
+            <aside className="om-panel hardware-test-status" aria-label={t(locale, "hw.deviceCard")}>
               <div className="hardware-test-status-head">
-                <span className="hardware-test-status-title">{t(locale, "hw.deviceCard")}</span>
+                <span className="hardware-test-status-title">{t(locale, "side.connectedMouse")}</span>
               </div>
               <div className="mouse-test-device-rows">
                 {info.vendorId !== null && info.productId !== null && (
@@ -752,7 +746,7 @@ export function HardwareTestPage({ snapshot }: { snapshot: ControlSnapshot }): R
           <a className="hardware-test-footer-link" href={DISCORD_URL} target="_blank" rel="noreferrer">
             {t(locale, "hw.discord")}
           </a>
-          {displayText(locale, footerNoteParts[1])}
+          {displayText(locale, footerNoteParts[1] ?? "")}
         </p>
       </footer>
     </div>
diff --git a/src/hardware-brand-checks.test.ts b/src/features/hardware-test/hardware-brand-checks.test.ts
similarity index 100%
rename from src/hardware-brand-checks.test.ts
rename to src/features/hardware-test/hardware-brand-checks.test.ts
diff --git a/src/hardware-brand-checks.ts b/src/features/hardware-test/hardware-brand-checks.ts
similarity index 90%
rename from src/hardware-brand-checks.ts
rename to src/features/hardware-test/hardware-brand-checks.ts
index 59418440..d777bb19 100644
--- a/src/hardware-brand-checks.ts
+++ b/src/features/hardware-test/hardware-brand-checks.ts
@@ -1,10 +1,3 @@
-// Brand-specific hardware verification checks.
-//
-// The generic suite (`hardware-test-report.ts`) runs on every connected model;
-// these checks add the per-brand invariants the `mouse-protocol`
-// `docs/*-testing.md` checklists rely on for moving a "test-needed" model to
-// "supported". Every rule here is grounded in a documented behavior of the
-// brand's driver — see the doc references inline.
 import type { HardwareDeviceInfo, HardwareTestResult } from "./hardware-test-report";
 
 /**
@@ -54,7 +47,6 @@ const RECEIVER_TELEMETRY_BRANDS = new Set(["ATK", "VXE", "VGN"]);
  */
 const DEVICE_IDENTITY_BRANDS = new Set(["Incott"]);
 
-/** Per-brand checks the generic suite does not cover. */
 export function brandChecks(info: HardwareDeviceInfo): HardwareTestResult[] {
   if (!info.present) return [];
 
diff --git a/src/hardware-test-report.test.ts b/src/features/hardware-test/hardware-test-report.test.ts
similarity index 98%
rename from src/hardware-test-report.test.ts
rename to src/features/hardware-test/hardware-test-report.test.ts
index 138adb92..0916d18d 100644
--- a/src/hardware-test-report.test.ts
+++ b/src/features/hardware-test/hardware-test-report.test.ts
@@ -1,7 +1,7 @@
 import assert from "node:assert/strict";
 import test from "node:test";
 
-import type { ControlSnapshot } from "./device/types.ts";
+import type { ControlSnapshot } from "../../device/types.ts";
 import {
   automaticChecks,
   deviceInfoFromSnapshot,
@@ -20,8 +20,6 @@ function snapshotFor(partial: Partial<ControlSnapshot>): ControlSnapshot {
   return {
     status: null,
     devices: [],
-    // The runner only reads status/devices from the snapshot; the rest of the
-    // shape is irrelevant here.
     ...partial,
   } as unknown as ControlSnapshot;
 }
diff --git a/src/hardware-test-report.ts b/src/features/hardware-test/hardware-test-report.ts
similarity index 88%
rename from src/hardware-test-report.ts
rename to src/features/hardware-test/hardware-test-report.ts
index 47629f5f..2d2b6735 100644
--- a/src/hardware-test-report.ts
+++ b/src/features/hardware-test/hardware-test-report.ts
@@ -1,36 +1,10 @@
-// Hardware-test reporting model.
-//
-// The Hardware Test page runs a verification suite against the connected
-// mouse; its results are the evidence a maintainer uses to move a
-// "test-needed" (likely) model on the Supported Devices page to "supported".
-//
-// The checks follow the project's hardware-verification process as defined in
-// `mouse-protocol/docs/*-testing.md` and `CONTRIBUTING.md` ("Evidence and
-// hardware verification"):
-//
-//   - Control interface — the driver's config collection answered: the model
-//     name, connection type and firmware read back at all proves the
-//     transaction id and the interface (Razer checklist).
-//   - Flash / EEPROM read-back — every field the driver decodes from device
-//     flash is present and in range.
-//   - Wireless link — for a 2.4 GHz device the receiver/mouse connection is
-//     exercised, including the online/pairing telemetry where the driver
-//     exposes it (ATK receiver 0x03/0x06 telemetry).
-//   - Flash write round-trip — a build setting is written, read back, then
-//     restored (CONTRIBUTING: "verify writes by reading the value back").
-//
-// This module is the pure, testable part: device-info extraction from the
-// snapshot, the automatic (driver read-back) checks, the overall verdict, and
-// the Discord embed that the Share Report button posts through the existing
-// `/api/feedback` relay.
-import type { ControlSnapshot } from "./device/types";
-import { formatHz } from "./ui/polling-stats.ts";
+import type { ControlSnapshot } from "../../device/types";
+import { formatHz } from "./polling-stats.ts";
 import type { SupportedDevicesCrosscheck } from "./supported-devices-crosscheck.ts";
 
 export type HardwareTestStatus = "pass" | "fail" | "skip";
 
 export interface HardwareTestResult {
-  /** Stable machine key, e.g. "connection", "interface", "flashWrite". */
   key: string;
   label: string;
   status: HardwareTestStatus;
@@ -65,11 +39,8 @@ export interface HardwareDeviceInfo {
   collectionsSummary?: string | null;
   /** Live signal strength out of 100, when the driver reports link quality. */
   signalStrength?: number | null;
-  /** Receiver online telemetry (ATK receiver): null when not exposed. */
   receiverOnline?: boolean | null;
-  /** RF identifier from the receiver telemetry, when exposed. */
   receiverRfId?: string | null;
-  /** True while the receiver is inside a pairing session. */
   pairingInProgress?: boolean;
 }
 
@@ -80,15 +51,9 @@ export interface HardwareTestReport {
   durationMs: number;
   runAt: string;
   build: string;
-  /**
-   * What the supported-devices page (openmouse.app/supported) lists for this
-   * device and whether this run's verdict qualifies it to move to "Supported".
-   * Populated by the page at suite end; null before the suite runs.
-   */
   supportedPage?: SupportedDevicesCrosscheck | null;
 }
 
-/** Tests that need the user to physically operate the mouse. */
 export const INTERACTIVE_TEST_KEYS: ReadonlySet<string> = new Set(["sampling"]);
 
 /**
@@ -107,7 +72,6 @@ export const INFORMATIONAL_TEST_KEYS: ReadonlySet<string> = new Set([
   "dpiStages",
 ]);
 
-/** Tests that must all pass for a model to be certified as supported. */
 export const ESSENTIAL_TEST_KEYS: ReadonlySet<string> = new Set([
   "connection",
   "interface",
@@ -327,7 +291,6 @@ export function automaticChecks(info: HardwareDeviceInfo): HardwareTestResult[]
     });
   }
 
-  // Flash / EEPROM read-back: every field decoded from device flash is in range.
   const flashFields: string[] = [];
   if (dpiOk) flashFields.push("dpi");
   if (rate !== null && rate > 0) flashFields.push("polling");
diff --git a/src/ui/polling-stats.test.ts b/src/features/hardware-test/polling-stats.test.ts
similarity index 100%
rename from src/ui/polling-stats.test.ts
rename to src/features/hardware-test/polling-stats.test.ts
diff --git a/src/ui/polling-stats.ts b/src/features/hardware-test/polling-stats.ts
similarity index 100%
rename from src/ui/polling-stats.ts
rename to src/features/hardware-test/polling-stats.ts
diff --git a/src/supported-devices-crosscheck.test.ts b/src/features/hardware-test/supported-devices-crosscheck.test.ts
similarity index 97%
rename from src/supported-devices-crosscheck.test.ts
rename to src/features/hardware-test/supported-devices-crosscheck.test.ts
index ccc1f751..f32671df 100644
--- a/src/supported-devices-crosscheck.test.ts
+++ b/src/features/hardware-test/supported-devices-crosscheck.test.ts
@@ -180,14 +180,11 @@ test("an unknown device is reported as not listed", () => {
 });
 
 test("statuses other than supported and likely phrase the page row", () => {
-  // Quick Win row (no PID pinned): a passing run still supports an eventual
-  // move to Supported.
   const quickwin = crosscheckSupportedDevices(device({ brand: "Lamzu", name: "Thorn" }), "pass");
   assert.equal(quickwin.status, "quickwin");
   assert.equal(quickwin.label, "Quick Win");
   assert.match(quickwin.detail, /supports moving it to Supported/);
 
-  // Bridge row matched by name: a non-passing run still keeps the status.
   const bridge = crosscheckSupportedDevices(device({ brand: "Attack Shark", name: "X3" }), "fail");
   assert.equal(bridge.status, "bridge");
   assert.equal(bridge.label, "Needs Bridge");
diff --git a/src/supported-devices-crosscheck.ts b/src/features/hardware-test/supported-devices-crosscheck.ts
similarity index 73%
rename from src/supported-devices-crosscheck.ts
rename to src/features/hardware-test/supported-devices-crosscheck.ts
index 6f724f21..5ea0bdb7 100644
--- a/src/supported-devices-crosscheck.ts
+++ b/src/features/hardware-test/supported-devices-crosscheck.ts
@@ -1,26 +1,14 @@
-// Crosschecks the device under test against the supported-devices page
-// (src/supported-devices-data.ts, mirrored from openmouse.app/supported).
-//
-// Gives the shared hardware-test report the page-side context the certification
-// flow needs: is the device listed, under what status, and does a passing run
-// qualify it to move to "Supported"?
 import { SUPPORTED_DEVICES, type SupportedDevicesStatus } from "./supported-devices-data.ts";
 import type { HardwareDeviceInfo } from "./hardware-test-report.ts";
 
 export type ReportVerdict = "pass" | "fail" | "incomplete";
 
 export interface SupportedDevicesCrosscheck {
-  /** True when the device matches a row on the supported-devices page. */
   listed: boolean;
-  /** The page status of the matched row (label in human terms). */
   status: SupportedDevicesStatus | null;
-  /** Human label for the page status (e.g. "Test Needed"). */
   label: string | null;
-  /** How the row was found: by product id, by brand+model name, or not found. */
   matchedBy: "pid" | "name" | null;
-  /** The page model text of the matched row (e.g. "F1 Ultimate"). */
   pageModel: string | null;
-  /** One-line sentence for the terminal, the report card, and the Discord embed. */
   detail: string;
 }
 
@@ -35,7 +23,6 @@ const STATUS_LABEL: Record<SupportedDevicesStatus, string> = {
   pending: "Requested",
 };
 
-/** Status precedence used to pick a row when several match the same device. */
 const STATUS_ORDER: Record<SupportedDevicesStatus, number> = {
   supported: 0,
   pr: 1,
@@ -47,17 +34,10 @@ const STATUS_ORDER: Record<SupportedDevicesStatus, number> = {
   pending: 7,
 };
 
-/** Lowercase alphanumerics only, so "F1 Ultimate" matches "f1ultimate". */
 function normalize(value: string): string {
   return value.toLowerCase().replace(/[^a-z0-9]+/g, "");
 }
 
-/**
- * Looks the connected device up in the supported-devices table and phrases the
- * page-side outcome for the report. PID matches are preferred (they are the
- * page's most precise key) with the brand used to break ties; when the table
- * does not pin PIDs for the model, a brand+model name match is the fallback.
- */
 export function crosscheckSupportedDevices(
   device: HardwareDeviceInfo,
   verdict: ReportVerdict,
@@ -107,8 +87,6 @@ export function crosscheckSupportedDevices(
     });
     if (byName.length > 0) {
       matchedBy = "name";
-      // The exact normalized model beats a partial one; then the most specific
-      // (longest) model text; then the best status.
       const ranked = byName.sort(
         (left, right) =>
           Number(normalize(right.model) === nameNorm) - Number(normalize(left.model) === nameNorm)
diff --git a/src/supported-devices-data.ts b/src/features/hardware-test/supported-devices-data.ts
similarity index 99%
rename from src/supported-devices-data.ts
rename to src/features/hardware-test/supported-devices-data.ts
index d85d7a69..307933e5 100644
--- a/src/supported-devices-data.ts
+++ b/src/features/hardware-test/supported-devices-data.ts
@@ -1,7 +1,7 @@
 // Supported-devices table, mirrored from the landing page.
 //
 // AUTO-GENERATED — do not edit by hand. Source of truth:
-//   openmouse-landing-page/src/supported-mice.ts
+//   openmouse-landing-page/src/data/supported-mice.ts
 // (the table behind openmouse.app/supported, re-checked against the
 // @openmouse/protocol driver registry every time the landing page builds).
 //
@@ -22,7 +22,6 @@ export interface SupportedDeviceEntry {
   brand: string;
   model: string;
   status: SupportedDevicesStatus;
-  /** Known product ids from the page table (hex), when the driver pins them. */
   pids?: readonly number[];
 }
 
@@ -216,6 +215,8 @@ export const SUPPORTED_DEVICES: readonly SupportedDeviceEntry[] = [
   { brand: "SteelSeries", model: "Rival 3 (wired)", status: "supported", pids: [0x1824, 0x184c] },
   { brand: "SteelSeries", model: "Rival 650 Wireless", status: "supported", pids: [0x172b, 0x1726] },
   { brand: "SteelSeries", model: "Aerox 3", status: "supported", pids: [0x1836] },
+  { brand: "SteelSeries", model: "Aerox 3 Wireless", status: "supported", pids: [0x1838, 0x183a] },
+  { brand: "SteelSeries", model: "Aerox 3 Wireless Gen 2", status: "supported", pids: [0x1838, 0x183a] },
   { brand: "SteelSeries", model: "Prime+", status: "supported", pids: [0x182c] },
   { brand: "SteelSeries", model: "Rival 310", status: "supported", pids: [0x1720, 0x171e, 0x1736] },
   { brand: "SteelSeries", model: "Prime Mini Wireless", status: "supported", pids: [0x184a, 0x1848] },
@@ -707,9 +708,7 @@ export const SUPPORTED_DEVICES: readonly SupportedDeviceEntry[] = [
   { brand: "Solakaka", model: "E9 Pro", status: "pending" },
   { brand: "Solakaka", model: "SM822", status: "pending" },
   { brand: "Sprime", model: "PM1", status: "pending" },
-  { brand: "SteelSeries", model: "Aerox 3 Wireless", status: "pending" },
   { brand: "SteelSeries", model: "Rival 5", status: "pending" },
-  { brand: "SteelSeries", model: "Aerox 3 Wireless Gen 2", status: "pending" },
   { brand: "SteelSeries", model: "Aerox 5 Wireless", status: "pending" },
   { brand: "SteelSeries", model: "M-00029", status: "pending" },
   { brand: "SteelSeries", model: "Rival 600", status: "pending" },
diff --git a/src/app/NewsBanner.tsx b/src/features/news/NewsBanner.tsx
similarity index 87%
rename from src/app/NewsBanner.tsx
rename to src/features/news/NewsBanner.tsx
index afc4f9e4..ce2f465a 100644
--- a/src/app/NewsBanner.tsx
+++ b/src/features/news/NewsBanner.tsx
@@ -1,9 +1,9 @@
-import { displayText } from "../i18n";
+import { displayText } from "../../i18n/index";
 import { AlertTriangle, Info, OctagonAlert, type LucideIcon } from "lucide-react";
 import { useEffect, useState, type ReactNode } from "react";
-import { fetchNews, type NewsItem, type NewsLevel } from "../news";
-import { t } from "../i18n";
-import type { InterfaceLocale } from "../interface-preferences";
+import { fetchNews, type NewsItem, type NewsLevel } from "./news";
+import { t } from "../../i18n/index";
+import type { InterfaceLocale } from "../settings/interface-preferences";
 
 const LEVEL_ICON: Record<NewsLevel, LucideIcon> = {
   info: Info,
@@ -35,7 +35,6 @@ function rememberDismissed(id: string, level: NewsLevel): void {
   try {
     dismissalStore(level).setItem(DISMISSED_STORAGE_KEY, id);
   } catch {
-    /* private mode / storage disabled */
   }
 }
 
@@ -51,8 +50,6 @@ export function NewsBanner({ locale }: { locale: InterfaceLocale }): ReactNode {
         const item = await fetchNews(controller.signal);
         if (!cancelled) setNews(item && item.id !== dismissedId(item.level) ? item : null);
       } catch {
-        // A failed news fetch should never break the app; skip the banner for
-        // this cycle and try again on the next poll.
       }
     }
 
diff --git a/src/app/WhatsNewDialog.tsx b/src/features/news/WhatsNewDialog.tsx
similarity index 50%
rename from src/app/WhatsNewDialog.tsx
rename to src/features/news/WhatsNewDialog.tsx
index d0986bb6..23da9427 100644
--- a/src/app/WhatsNewDialog.tsx
+++ b/src/features/news/WhatsNewDialog.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useRef, type ReactNode } from "react";
-import { t } from "../i18n";
-import type { InterfaceLocale } from "../interface-preferences";
+import { t } from "../../i18n/index";
+import type { InterfaceLocale } from "../settings/interface-preferences";
 
 const DESKTOP_RELEASES_URL = "https://github.com/OpenMouse-Project/Desktop/releases";
 
@@ -33,27 +33,30 @@ export function WhatsNewDialog({ open, onClose, locale = "en" }: {
       onClick={(event) => { if (event.target === dialog.current) onClose(); }}
     >
       <div className="support-dialog-inner whatsnew-dialog-inner">
-        <header>
+        <header className="om-dialog-head">
           <div>
             <h2 id="whatsnew-dialog-title">{t(locale, "wn.title")}</h2>
           </div>
-          <button type="button" onClick={onClose} aria-label={t(locale, "common.close")}>×</button>
+          <button className="om-icon-btn" type="button" onClick={onClose} aria-label={t(locale, "common.close")}>×</button>
         </header>
-        <p className="whatsnew-body">{t(locale, "wn.body")}</p>
-        <a
-          className="whatsnew-download"
-          href={DESKTOP_RELEASES_URL}
-          target="_blank"
-          rel="noreferrer"
-        >
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
-            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
-            <path d="M7 10l5 5 5-5M12 15V3" />
-          </svg>
-          {t(locale, "wn.download")}
-        </a>
-        <div className="support-actions">
-          <button type="button" onClick={onClose}>{t(locale, "wn.close")}</button>
+        <div className="om-dialog-body">
+          <img className="standalone-brand" src="/logo.png" alt="" width={28} height={42} />
+          <p className="whatsnew-body">{t(locale, "wn.body")}</p>
+        </div>
+        <div className="om-dialog-foot">
+          <button className="om-btn is-ghost" type="button" onClick={onClose}>{t(locale, "wn.close")}</button>
+          <a
+            className="om-btn is-primary whatsnew-download"
+            href={DESKTOP_RELEASES_URL}
+            target="_blank"
+            rel="noreferrer"
+          >
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+              <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+              <path d="M7 10l5 5 5-5M12 15V3" />
+            </svg>
+            {t(locale, "wn.download")}
+          </a>
         </div>
       </div>
     </dialog>
diff --git a/src/news.test.ts b/src/features/news/news.test.ts
similarity index 95%
rename from src/news.test.ts
rename to src/features/news/news.test.ts
index d99e6b50..2ec736c0 100644
--- a/src/news.test.ts
+++ b/src/features/news/news.test.ts
@@ -24,7 +24,7 @@ test("news is parsed from the CDN payload", async () => {
       id: "razer",
       level: "critical",
       message: "Razer mice may not be detected.",
-      url: "https://openmouse.app/blog-razer-windows-chrome-153",
+      url: "https://openmouse.app/blog/razer-windows-chrome-153",
     });
   }, async () => {
     const item = await fetchNews();
@@ -33,7 +33,7 @@ test("news is parsed from the CDN payload", async () => {
       id: "razer",
       level: "critical",
       message: "Razer mice may not be detected.",
-      url: "https://openmouse.app/blog-razer-windows-chrome-153",
+      url: "https://openmouse.app/blog/razer-windows-chrome-153",
     });
   });
 });
diff --git a/src/news.ts b/src/features/news/news.ts
similarity index 82%
rename from src/news.ts
rename to src/features/news/news.ts
index 4d3d9be9..0ee92bd0 100644
--- a/src/news.ts
+++ b/src/features/news/news.ts
@@ -1,9 +1,3 @@
-/** Site-wide news banner. The message itself lives outside this repo's
-    build — it is fetched from a CDN mirror of `public/news.json` so an
-    announcement (an outage, a known-issue notice) can go out instantly
-    without shipping a new app build. See `public/news.json` for the source
-    file and how to publish an instant update. */
-
 export type NewsLevel = "info" | "warning" | "critical";
 
 export interface NewsItem {
diff --git a/src/app/Profiles.tsx b/src/features/profiles/Profiles.tsx
similarity index 95%
rename from src/app/Profiles.tsx
rename to src/features/profiles/Profiles.tsx
index a86a4d8c..e081e92f 100644
--- a/src/app/Profiles.tsx
+++ b/src/features/profiles/Profiles.tsx
@@ -1,12 +1,12 @@
-import { displayText } from "../i18n";
+import { displayText } from "../../i18n/index";
 import { useEffect, useRef, useState, type ReactNode } from "react";
 import { capabilitiesForFormat } from "@openmouse/protocol/drivers/logitech/onboard-profiles";
 import { LOGITECH_BUTTON_ACTIONS, type LogitechButtonAction } from "@openmouse/protocol/drivers/logitech/onboard-profiles";
-import * as control from "../device/controller";
-import type { ControlSnapshot } from "../device/types";
+import * as control from "../../device/controller";
+import type { ControlSnapshot } from "../../device/types";
 import { hidKeyForCode, shortcutLabel } from "./hid-keys";
-import { t, tp } from "../i18n";
-import { IconActivate, IconDisabled, IconEnabled, IconRefresh, IconRename, IconRunning, IconShare, IconTrash } from "./icons";
+import { t, tp } from "../../i18n/index";
+import { IconActivate, IconDisabled, IconEnabled, IconRefresh, IconRename, IconRunning, IconShare, IconTrash } from "../../shared/icons";
 
 export function Profiles({
   snapshot,
@@ -72,7 +72,7 @@ export function Profiles({
           onClick={control.toggleProfilesExpanded}
         >
           <span className="profile-summary-text">
-            <span className="profile-summary-label">{t(locale, "prof.editing")}</span>
+            <span className="profile-summary-label">{t(locale, "prof.editingTag")}</span>
             <strong id="profile-summary-name">{summary.name}</strong>
             <small id="profile-summary-detail">{displayText(locale, summary.detail)}</small>
           </span>
@@ -135,11 +135,10 @@ export function Profiles({
                     className="profile-row-open"
                     onClick={() => control.openOnboardProfile("host")}
                   >
-                    <span className={`device-dot${hostRunning ? "" : " is-idle"}`} />
+                    <span className="profile-slot">{t(locale, "prof.hostName")}</span>
                     <span className="profile-row-text">
-                      <strong> {displayText(locale, "Host — live")}{displayText(locale, hostTags ? ` · ${hostTags}` : "")}
-                      </strong>
-                      <small> {displayText(locale, "Settings applied by software, not stored on the mouse. Lost on power-cycle.")} </small>
+                      <strong>{t(locale, "prof.hostName")}{hostTags ? <span className={`om-badge${hostRunning ? " is-accent" : ""}`}>{hostTags}</span> : null}</strong>
+                      <small>{t(locale, "prof.liveDetail")}</small>
                     </span>
                   </button>
                   <button
@@ -194,11 +193,11 @@ export function Profiles({
                         className="profile-row-open"
                         onClick={() => control.openOnboardProfile(profile.sector)}
                       >
-                        <span className={`device-dot${running ? "" : " is-idle"}`} />
+                        <span className="profile-slot">{profile.sector}</span>
                         <span className="profile-row-text">
                           <strong>
                             {(opened && snapshot.stagedProfileName) || profile.name || displayText(locale, `Profile ${profile.sector}`)}
-                            {displayText(locale, tags ? ` · ${tags}` : "")}
+                            {tags ? <span className={`om-badge${running ? " is-accent" : ""}`}>{displayText(locale, tags)}</span> : null}
                           </strong>
                           <small>{displayText(locale, detail)}</small>
                         </span>
@@ -253,7 +252,7 @@ export function Profiles({
           {openedProfile && contentsWritable ? (
             <div className="profile-button-editor">
               <div className="profile-button-heading">
-                <div><p>{displayText(locale, "BUTTONS")}</p><h2>{t(locale, "prof.assign")}</h2><small>{t(locale, "prof.assignBody")}</small></div>
+                <div><h2>{t(locale, "prof.assign")}</h2><small>{t(locale, "prof.assignBody")}</small></div>
                 <div className="assignment-layer-tabs" role="tablist" aria-label={t(locale, "prof.assignLayer")}>
                   <button type="button" role="tab" aria-selected={assignmentLayer === "primary"} onClick={() => setAssignmentLayer("primary")}>{t(locale, "prof.normalTab")}</button>
                   <button type="button" role="tab" aria-selected={assignmentLayer === "g-shift"} onClick={() => setAssignmentLayer("g-shift")}>G-Shift</button>
@@ -387,7 +386,6 @@ export function Profiles({
                       setShortcutError("");
                     }}
                   >
-                    <span className="shortcut-dialog-kicker">{t(locale, "prof.recorder")}</span>
                     <h3 id="shortcut-dialog-title">{t(locale, "prof.recordTitle")}</h3>
                     <p>{t(locale, "prof.recordBody")}</p>
                     <button
diff --git a/src/app/ShareProfileDialog.tsx b/src/features/profiles/ShareProfileDialog.tsx
similarity index 77%
rename from src/app/ShareProfileDialog.tsx
rename to src/features/profiles/ShareProfileDialog.tsx
index de52e8d2..54084367 100644
--- a/src/app/ShareProfileDialog.tsx
+++ b/src/features/profiles/ShareProfileDialog.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useRef, type ReactNode } from "react";
-import type { ControlSnapshot } from "../device/types";
-import { ProfileKeyFields } from "./InterfaceSettings";
-import { t } from "../i18n";
+import type { ControlSnapshot } from "../../device/types";
+import { ProfileKeyFields } from "../settings/InterfaceSettings";
+import { t } from "../../i18n/index";
 
 export function ShareProfileDialog({
   open,
@@ -31,12 +31,11 @@ export function ShareProfileDialog({
       onClick={(event) => { if (event.target === dialog.current) onClose(); }}
     >
       <div className="support-dialog-inner share-profile-dialog-inner">
-        <header>
+        <header className="om-dialog-head">
           <div>
-            <p className="overline">{t(locale, "set.profiles")}</p>
             <h2 id="share-profile-dialog-title">{t(locale, "set.profileKey")}</h2>
           </div>
-          <button type="button" onClick={onClose} aria-label={t(locale, "common.close")}>×</button>
+          <button type="button" className="om-icon-btn" onClick={onClose} aria-label={t(locale, "common.close")}>×</button>
         </header>
         <p className="share-profile-intro">
           {t(locale, "set.profileKeyBody")}
diff --git a/src/app/hid-keys.ts b/src/features/profiles/hid-keys.ts
similarity index 100%
rename from src/app/hid-keys.ts
rename to src/features/profiles/hid-keys.ts
diff --git a/src/features/settings/InterfaceSettings.tsx b/src/features/settings/InterfaceSettings.tsx
new file mode 100644
index 00000000..6c0b1f40
--- /dev/null
+++ b/src/features/settings/InterfaceSettings.tsx
@@ -0,0 +1,244 @@
+import { displayText } from "../../i18n/index";
+import { Globe, RotateCcw } from "lucide-react";
+import { useState, type ReactNode } from "react";
+import * as control from "../../device/controller";
+import type { ControlSnapshot } from "../../device/types";
+import { LOCALE_NAME_KEYS, t } from "../../i18n/index";
+import { interfaceThemeSlug, type InterfaceTheme } from "./interface-preferences";
+import { DiscordIcon, DISCORD_URL, GitHubIcon, GITHUB_URL, TwitterIcon, TWITTER_URL } from "../../shared/social-links";
+import { OptionMenu, SwitchButton } from "../../shared/ui";
+
+const THEME_ORDER: readonly InterfaceTheme[] = [
+  "Emerald",
+  "Matt",
+  "Violet",
+  "Ice",
+  "Ember",
+  "Mono",
+  "Miku",
+  "Catppuccin Mocha",
+  "Catppuccin Macchiato",
+  "Catppuccin Frappé",
+  "NieR: Automata",
+  "Light",
+];
+
+export function ProfileKeyFields({ snapshot }: { snapshot: ControlSnapshot }): ReactNode {
+  const [importText, setImportText] = useState("");
+  const [copied, setCopied] = useState(false);
+  const locale = snapshot.preferences.locale;
+  const key = snapshot.hasActiveDevice ? control.exportProfileKey() : null;
+
+  return (
+    <div className="profile-key-fields">
+      <label className="profile-key-field">
+        <span className="om-label">{t(locale, "set.yourKey")}</span>
+        <textarea
+          readOnly
+          rows={3}
+          value={key ?? t(locale, "set.noKey")}
+          onFocus={(event) => event.currentTarget.select()}
+        />
+      </label>
+      <div className="profile-key-actions">
+        <button
+          type="button"
+          className="om-btn"
+          disabled={!key}
+          onClick={() => {
+            if (!key) return;
+            void navigator.clipboard.writeText(key).then(() => {
+              setCopied(true);
+              setTimeout(() => setCopied(false), 1500);
+            });
+          }}
+        >
+          {displayText(locale, copied ? t(locale, "set.copied") : t(locale, "set.copyKey"))}
+        </button>
+      </div>
+      <label className="profile-key-field">
+        <span className="om-label">{t(locale, "set.importKey")}</span>
+        <textarea
+          rows={3}
+          placeholder={t(locale, "set.importPlaceholder")}
+          value={importText}
+          onChange={(event) => setImportText(event.currentTarget.value)}
+        />
+      </label>
+      <div className="profile-key-actions">
+        <button
+          type="button"
+          className="om-btn"
+          disabled={!importText.trim() || !snapshot.hasActiveDevice}
+          onClick={() => {
+            control.importProfileKey(importText);
+            setImportText("");
+          }}
+        >
+          {t(locale, "set.import")}
+        </button>
+        <small className="setting-description">{t(locale, "set.importNote")}</small>
+      </div>
+    </div>
+  );
+}
+
+function SettingRow({ title, description, children, block = false }: {
+  title?: string;
+  description?: string;
+  children: ReactNode;
+  block?: boolean;
+}): ReactNode {
+  return (
+    <div className={`setting-row${block ? " setting-row-block" : ""}`}>
+      {title || description ? (
+        <div className="setting-label">
+          {title ? <span className="setting-title">{title}</span> : null}
+          {description ? <span className="setting-description">{description}</span> : null}
+        </div>
+      ) : null}
+      <div className="setting-control">{children}</div>
+    </div>
+  );
+}
+
+function SettingsGroup({ id, title, children }: { id: string; title: string; children: ReactNode }): ReactNode {
+  return (
+    <section className="om-panel om-settings-group" aria-labelledby={`${id}-title`}>
+      <header className="om-panel-head">
+        <h2 id={`${id}-title`}>{title}</h2>
+      </header>
+      <div className="om-settings-rows">{children}</div>
+    </section>
+  );
+}
+
+export function InterfaceSettings({ snapshot }: { snapshot: ControlSnapshot }): ReactNode {
+  const preferences = snapshot.preferences;
+  const locale = preferences.locale;
+  const set = <K extends keyof typeof preferences>(key: K) => (value: (typeof preferences)[K]): void =>
+    control.setPreference(key, value);
+
+  const toggle = (id: string, title: string, description: string, checked: boolean, onChange: (next: boolean) => void): ReactNode => (
+    <SettingRow title={title} description={description}>
+      <SwitchButton id={id} label={title} value={checked} onChange={onChange} />
+    </SettingRow>
+  );
+
+  return (
+    <section
+      id="interface-settings-page"
+      className={`page om-page om-settings${snapshot.interfaceSettingsOpen ? " is-open" : ""}`}
+      aria-labelledby="interface-settings-title"
+    >
+      <header className="om-page-head">
+        <div>
+          <h1 id="interface-settings-title">{t(locale, "set.title")}</h1>
+          <p className="om-meta">{t(locale, "set.subtitle")}</p>
+        </div>
+      </header>
+
+      <SettingsGroup id="settings-appearance" title={t(locale, "set.groupAppearance")}>
+        <SettingRow title={t(locale, "set.themeTitle")} description={t(locale, "set.themeBody")} block>
+          <fieldset id="interface-theme" className="om-theme-grid" aria-label={t(locale, "set.themeTitle")}>
+            {THEME_ORDER.map((name) => (
+              <button
+                key={name}
+                type="button"
+                className={`om-theme-tile${preferences.theme === name ? " is-active" : ""}`}
+                data-interface-theme={interfaceThemeSlug(name)}
+                aria-pressed={preferences.theme === name}
+                onClick={() => control.setInterfaceTheme(name)}
+              >
+                <span className="om-theme-preview" aria-hidden="true">
+                  <span className="om-theme-preview-side" />
+                  <span className="om-theme-preview-main">
+                    <span className="om-theme-preview-line is-title" />
+                    <span className="om-theme-preview-line" />
+                    <span className="om-theme-preview-sheet">
+                      <span className="om-theme-preview-accent" />
+                      <span className="om-theme-preview-line is-short" />
+                    </span>
+                  </span>
+                </span>
+                <span className="om-theme-name">{displayText(locale, name)}</span>
+              </button>
+            ))}
+          </fieldset>
+        </SettingRow>
+        <SettingRow title={t(locale, "set.languageTitle")} description={t(locale, "set.languageBody")}>
+          <span className="om-language-picker">
+            <Globe strokeWidth={1.8} aria-hidden="true" />
+            <OptionMenu
+              id="interface-locale"
+              ariaLabel={t(locale, "set.languageTitle")}
+              value={preferences.locale}
+              onChange={set("locale")}
+              options={LOCALE_NAME_KEYS.map(([value, nameKey]) => ({ value, label: t(locale, nameKey) }))}
+            />
+          </span>
+        </SettingRow>
+        {toggle(
+          "interface-reduced-motion",
+          t(locale, "set.animations"),
+          t(locale, "set.animationsBody"),
+          !preferences.reducedMotion,
+          (next) => set("reducedMotion")(!next),
+        )}
+      </SettingsGroup>
+
+      <SettingsGroup id="settings-behaviour" title={t(locale, "set.groupBehaviour")}>
+        {toggle("interface-instant-flash", t(locale, "set.instantFlash"), t(locale, "set.instantFlashBody"), preferences.instantFlash, set("instantFlash"))}
+        {toggle("interface-sounds", t(locale, "set.soundTitle"), t(locale, "set.soundDescription"), preferences.enabledSounds, set("enabledSounds"))}
+        {toggle("interface-expand-sections", t(locale, "set.advancedEditors"), t(locale, "set.advancedEditorsBody"), preferences.expandSections, set("expandSections"))}
+        {toggle("interface-show-experimental", t(locale, "set.experimentalTitle"), t(locale, "set.experimentalBody"), preferences.showExperimental, set("showExperimental"))}
+      </SettingsGroup>
+
+      <SettingsGroup id="settings-profile-key" title={t(locale, "set.profileKey")}>
+        <SettingRow description={t(locale, "set.profileKeyBody")} block>
+          <ProfileKeyFields snapshot={snapshot} />
+        </SettingRow>
+      </SettingsGroup>
+
+      {snapshot.previewEnabled && snapshot.previewEntries.length > 0 ? (
+        <SettingsGroup id="settings-previews" title={t(locale, "set.previewsTitle")}>
+          <SettingRow description={t(locale, "set.previewsBody")} block>
+            <div id="preview-launcher-list" className="preview-launcher-list">
+              {snapshot.previewEntries.map(([key, label]) => (
+                <a
+                  key={key}
+                  className={`preview-launcher-link${snapshot.previewMode === key ? " is-active" : ""}`}
+                  href={`?preview=${key}`}
+                >
+                  <span>{displayText(locale, label)}</span>
+                  <small>{displayText(locale, key)}</small>
+                </a>
+              ))}
+            </div>
+          </SettingRow>
+        </SettingsGroup>
+      ) : null}
+
+      <SettingsGroup id="settings-about" title={t(locale, "set.groupAbout")}>
+        <SettingRow title={t(locale, "set.version")} description={t(locale, "set.supportBody")}>
+          <span className="om-badge">{displayText(locale, snapshot.buildLabel)}</span>
+        </SettingRow>
+        <SettingRow title={t(locale, "set.supportTitle")}>
+          <span className="om-about-links">
+            <a className="om-btn is-sm" href="https://openmouse.app/supported" target="_blank" rel="noreferrer">{t(locale, "nav.supported")}</a>
+            <a className="om-btn is-sm" href="https://openmouse.app/donate.html" target="_blank" rel="noreferrer">{t(locale, "nav.supportProject")}</a>
+            <a className="om-icon-btn" href={DISCORD_URL} target="_blank" rel="noreferrer" title={displayText(locale, "OpenMouse on Discord")} aria-label={displayText(locale, "OpenMouse on Discord")}><DiscordIcon /></a>
+            <a className="om-icon-btn" href={TWITTER_URL} target="_blank" rel="noreferrer" title={displayText(locale, "OpenMouse on X")} aria-label={displayText(locale, "OpenMouse on X")}><TwitterIcon /></a>
+            <a className="om-icon-btn" href={GITHUB_URL} target="_blank" rel="noreferrer" title={displayText(locale, "OpenMouse on GitHub")} aria-label={displayText(locale, "OpenMouse on GitHub")}><GitHubIcon /></a>
+          </span>
+        </SettingRow>
+        <SettingRow title={t(locale, "set.reset")} description={t(locale, "set.resetBody")}>
+          <button id="reset-interface-settings" className="om-btn is-danger" type="button" onClick={control.resetInterfacePreferences}>
+            <RotateCcw strokeWidth={1.9} aria-hidden="true" />
+            {t(locale, "set.resetShort")}
+          </button>
+        </SettingRow>
+      </SettingsGroup>
+    </section>
+  );
+}
diff --git a/src/interface-preferences.test.ts b/src/features/settings/interface-preferences.test.ts
similarity index 98%
rename from src/interface-preferences.test.ts
rename to src/features/settings/interface-preferences.test.ts
index 74e60dbd..3e3b83cf 100644
--- a/src/interface-preferences.test.ts
+++ b/src/features/settings/interface-preferences.test.ts
@@ -72,7 +72,6 @@ test("interface preferences fall back safely for malformed storage", () => {
   const storage = new MemoryStorage();
   storage.setItem("openmouse-interface-settings-v1", "not json");
 
-  // Locale follows the browser on first run, so only it may differ from DEFAULT.
   assert.deepEqual(loadInterfacePreferences(storage), {
     ...DEFAULT_INTERFACE_PREFERENCES,
     locale: detectLocale(),
diff --git a/src/interface-preferences.ts b/src/features/settings/interface-preferences.ts
similarity index 95%
rename from src/interface-preferences.ts
rename to src/features/settings/interface-preferences.ts
index adcc4184..f0ee43d8 100644
--- a/src/interface-preferences.ts
+++ b/src/features/settings/interface-preferences.ts
@@ -87,12 +87,10 @@ export function systemPrefersReducedMotion(): boolean {
       return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
     }
   } catch {
-    // Ignore and fall through to the animated default below.
   }
   return false;
 }
 
-/** First-run locale from the browser, guarded for Node/tests. */
 export function detectLocale(): InterfaceLocale {
   try {
     if (typeof navigator !== "undefined" && typeof navigator.language === "string") {
@@ -101,14 +99,12 @@ export function detectLocale(): InterfaceLocale {
       if (found) return found.code;
     }
   } catch {
-    // Ignore and fall through to English below.
   }
   return "en";
 }
 
 function coerceLocale(value: unknown): InterfaceLocale {
   if (LOCALES.some((locale) => locale.code === value)) return value as InterfaceLocale;
-  // No saved choice yet: follow the browser once, then persist it.
   return detectLocale();
 }
 
diff --git a/src/app/DeleteHitsPresetDialog.tsx b/src/features/superstrike/DeleteHitsPresetDialog.tsx
similarity index 64%
rename from src/app/DeleteHitsPresetDialog.tsx
rename to src/features/superstrike/DeleteHitsPresetDialog.tsx
index 59b3c32f..3204a95d 100644
--- a/src/app/DeleteHitsPresetDialog.tsx
+++ b/src/features/superstrike/DeleteHitsPresetDialog.tsx
@@ -1,16 +1,14 @@
-import { displayText } from "../i18n";
+import { displayText } from "../../i18n/index";
 import { useEffect, useRef, type ReactNode } from "react";
-import { t } from "../i18n";
-import type { InterfaceLocale } from "../interface-preferences";
+import { t } from "../../i18n/index";
+import type { InterfaceLocale } from "../settings/interface-preferences";
 
-/** Asks before a saved HITS preset is deleted. */
 export function DeleteHitsPresetDialog({
   name,
   locale,
   onClose,
   onConfirm,
 }: {
-  /** The preset to delete; null keeps the dialog closed. */
   name: string | null;
   locale: InterfaceLocale;
   onClose: () => void;
@@ -29,23 +27,22 @@ export function DeleteHitsPresetDialog({
   return (
     <dialog
       ref={dialog}
-      className="support-dialog share-profile-dialog"
+      className="hits-delete-dialog"
       aria-labelledby="delete-hits-dialog-title"
       onClose={onClose}
       onClick={(event) => { if (event.target === dialog.current) onClose(); }}
     >
-      <div className="support-dialog-inner share-profile-dialog-inner">
-        <header>
+      <div className="hits-dialog-inner">
+        <header className="om-dialog-head">
           <div>
-            <p className="overline">{displayText(locale, "HITS Tuning")}</p>
             <h2 id="delete-hits-dialog-title">{displayText(locale, "Delete preset")}</h2>
           </div>
-          <button type="button" onClick={onClose} aria-label={t(locale, "common.close")}>×</button>
+          <button type="button" className="om-icon-btn" onClick={onClose} aria-label={t(locale, "common.close")}>×</button>
         </header>
-        <div className="profile-key-fields">
+        <div className="profile-key-fields om-dialog-body">
           <p className="share-profile-intro"> {displayText(locale, "Delete “")}{name}{displayText(locale, "”? It is removed from this browser and cannot be brought back, unless you copied its code.")} </p>
           <div className="import-hits-actions">
-            <button type="button" className="connect-button delete-hits-confirm" onClick={onConfirm}> {displayText(locale, "Delete")} </button>
+            <button type="button" className="om-btn is-danger delete-hits-confirm" onClick={onConfirm}> {displayText(locale, "Delete")} </button>
             <button type="button" className="connect-button" onClick={onClose} autoFocus>
               {t(locale, "common.cancel")}
             </button>
diff --git a/src/app/HitsTestDialog.tsx b/src/features/superstrike/HitsTestDialog.tsx
similarity index 93%
rename from src/app/HitsTestDialog.tsx
rename to src/features/superstrike/HitsTestDialog.tsx
index 046f664c..e2051ba3 100644
--- a/src/app/HitsTestDialog.tsx
+++ b/src/features/superstrike/HitsTestDialog.tsx
@@ -1,9 +1,9 @@
-import { displayText } from "../i18n";
+import { displayText } from "../../i18n/index";
 import { useEffect, useRef, useState, type ReactNode } from "react";
-import * as control from "../device/controller";
-import { t } from "../i18n";
-import type { InterfaceLocale } from "../interface-preferences";
-import { CONVENTIONAL_STEP, savedMs, stepTimes, type DepthSample } from "../hits-test";
+import * as control from "../../device/controller";
+import { t } from "../../i18n/index";
+import type { InterfaceLocale } from "../settings/interface-preferences";
+import { CONVENTIONAL_STEP, savedMs, stepTimes, type DepthSample } from "./hits-test";
 
 const ROUNDS = 1;
 // After the press, wait for the rest of its depth reports before comparing.
@@ -124,20 +124,19 @@ export function HitsTestDialog({
   return (
     <dialog
       ref={dialog}
-      className="support-dialog share-profile-dialog hits-test-dialog"
+      className="hits-test-dialog"
       aria-labelledby="hits-test-title"
       onClose={onClose}
       onClick={(event) => { if (event.target === dialog.current) onClose(); }}
     >
-      <div className="support-dialog-inner share-profile-dialog-inner hits-test">
-        <header>
+      <div className="hits-dialog-inner hits-test">
+        <header className="om-dialog-head">
           <div>
-            <p className="overline">{displayText(locale, "HITS Tuning")}</p>
             <h2 id="hits-test-title">{displayText(locale, "HITS speed test")}</h2>
           </div>
-          <button type="button" onClick={onClose} aria-label={t(locale, "common.close")}>×</button>
+          <button type="button" className="om-icon-btn" onClick={onClose} aria-label={t(locale, "common.close")}>×</button>
         </header>
-        <div className="hits-test-body">
+        <div className="hits-test-body om-dialog-body">
           <div className="hits-test-side">
             <small className="setting-description"> {displayText(locale, "A normal mouse switch fires at one fixed point, about step 5 on the HITS scale. When the field turns blue, click as fast as you can. Each press is timed against that step, so you see how much sooner your actuation fires. Change the actuation and run it again to compare.")} </small>
             <label className="profile-key-field">
diff --git a/src/app/SaveHitsPresetDialog.tsx b/src/features/superstrike/SaveHitsPresetDialog.tsx
similarity index 79%
rename from src/app/SaveHitsPresetDialog.tsx
rename to src/features/superstrike/SaveHitsPresetDialog.tsx
index a0e9ad5e..dbbc2fab 100644
--- a/src/app/SaveHitsPresetDialog.tsx
+++ b/src/features/superstrike/SaveHitsPresetDialog.tsx
@@ -1,8 +1,8 @@
-import { displayText } from "../i18n";
+import { displayText } from "../../i18n/index";
 import { useEffect, useRef, useState, type ReactNode } from "react";
-import { t } from "../i18n";
-import type { InterfaceLocale } from "../interface-preferences";
-import type { HitsButtonValues, HitsPreset } from "../hits-presets";
+import { t } from "../../i18n/index";
+import type { InterfaceLocale } from "../settings/interface-preferences";
+import type { HitsButtonValues, HitsPreset } from "./hits-presets";
 
 function describe(values: HitsButtonValues): string {
   const rapid = values.rapidTriggerEnabled ? `rapid trigger ${values.rapidTrigger}` : "rapid trigger off";
@@ -42,26 +42,25 @@ export function SaveHitsPresetDialog({
   return (
     <dialog
       ref={dialog}
-      className="support-dialog share-profile-dialog"
+      className="hits-save-dialog"
       aria-labelledby="save-hits-dialog-title"
       onClose={onClose}
       onClick={(event) => { if (event.target === dialog.current) onClose(); }}
     >
       <form
-        className="support-dialog-inner share-profile-dialog-inner"
+        className="hits-dialog-inner"
         onSubmit={(event) => {
           event.preventDefault();
           if (trimmed) onSave(trimmed);
         }}
       >
-        <header>
+        <header className="om-dialog-head">
           <div>
-            <p className="overline">{displayText(locale, "HITS Tuning")}</p>
             <h2 id="save-hits-dialog-title">{displayText(locale, "Save preset")}</h2>
           </div>
-          <button type="button" onClick={onClose} aria-label={t(locale, "common.close")}>×</button>
+          <button type="button" className="om-icon-btn" onClick={onClose} aria-label={t(locale, "common.close")}>×</button>
         </header>
-        <div className="profile-key-fields">
+        <div className="profile-key-fields om-dialog-body">
           <label className="profile-key-field">
             <span>{displayText(locale, "Preset name")}</span>
             <input
@@ -77,7 +76,7 @@ export function SaveHitsPresetDialog({
           </small>
           {replaces ? <small className="setting-description" role="status">{displayText(locale, "A preset with this name exists and will be replaced.")}</small> : null}
           <div className="import-hits-actions">
-            <button type="submit" className="connect-button" disabled={!trimmed}>{displayText(locale, "Save")}</button>
+            <button type="submit" className="om-btn is-primary" disabled={!trimmed}>{displayText(locale, "Save")}</button>
             <button type="button" className="connect-button" onClick={onClose}>{t(locale, "common.cancel")}</button>
           </div>
         </div>
diff --git a/src/app/Superstrike.tsx b/src/features/superstrike/Superstrike.tsx
similarity index 96%
rename from src/app/Superstrike.tsx
rename to src/features/superstrike/Superstrike.tsx
index aad16e2c..6e41531d 100644
--- a/src/app/Superstrike.tsx
+++ b/src/features/superstrike/Superstrike.tsx
@@ -1,10 +1,10 @@
-import { displayText } from "../i18n";
-import { useUiLocale } from "./ui-locale";
+import { displayText } from "../../i18n/index";
+import { useUiLocale } from "../../shared/ui-locale";
 import { useEffect, useState, type ReactNode } from "react";
-import * as control from "../device/controller";
-import { t, tp } from "../i18n";
-import type { InterfaceLocale } from "../interface-preferences";
-import type { AnalogTuning, AnalogTuningState, ControlSnapshot } from "../device/types";
+import * as control from "../../device/controller";
+import { t, tp } from "../../i18n/index";
+import type { InterfaceLocale } from "../settings/interface-preferences";
+import type { AnalogTuning, AnalogTuningState, ControlSnapshot } from "../../device/types";
 import {
   deleteHitsPreset,
   loadHitsPresets,
@@ -16,8 +16,8 @@ import {
   type HitsButtonValues,
   type HitsLimits,
   type HitsPreset,
-} from "../hits-presets";
-import { BunnyHop } from "./cards/PerformanceCards";
+} from "./hits-presets";
+import { BunnyHop } from "../devices/cards/PerformanceCards";
 import { DeleteHitsPresetDialog } from "./DeleteHitsPresetDialog";
 import { HitsTestDialog } from "./HitsTestDialog";
 import { SaveHitsPresetDialog } from "./SaveHitsPresetDialog";
@@ -70,7 +70,6 @@ function PressMeter({ actuation }: { actuation: [number, number] }): ReactNode {
     // it is re-armed well before that could hit rather than only once.
     const keepalive = window.setInterval(() => control.startAnalogPressStream(), 20_000);
     const stop = control.subscribeAnalogPress((left, right) => setDepth([left, right]));
-    // A right-click test would otherwise pop the browser's own context menu.
     const suppressContextMenu = (event: MouseEvent) => event.preventDefault();
     window.addEventListener("contextmenu", suppressContextMenu);
     return () => {
@@ -363,7 +362,6 @@ export function Superstrike({ snapshot }: { snapshot: ControlSnapshot }): ReactN
             {(["left", "right"] as const).map((side) => (
               <fieldset key={side} className="superstrike-button-card">
                 <legend>
-                  <span className="superstrike-button-dot" />
                   {displayText(locale, side === "left" ? t(locale, "adv.leftButton") : t(locale, "adv.rightButton"))}
                 </legend>
                 <TuningControls group={side} tuning={state[side]} limits={tuning} locale={locale} />
@@ -381,7 +379,7 @@ export function Superstrike({ snapshot }: { snapshot: ControlSnapshot }): ReactN
             ))}
           </div>
           <fieldset className="superstrike-button-card superstrike-both-panel">
-            <legend><span className="superstrike-button-dot" />{t(locale, "super.bothPrimary")}</legend>
+            <legend>{t(locale, "super.bothPrimary")}</legend>
             <p>{t(locale, "super.bothBody")}</p>
             <TuningControls group="both" tuning={state.both} limits={tuning} locale={locale} />
             {showApply ? (
diff --git a/src/hits-presets.test.ts b/src/features/superstrike/hits-presets.test.ts
similarity index 100%
rename from src/hits-presets.test.ts
rename to src/features/superstrike/hits-presets.test.ts
diff --git a/src/hits-presets.ts b/src/features/superstrike/hits-presets.ts
similarity index 90%
rename from src/hits-presets.ts
rename to src/features/superstrike/hits-presets.ts
index aa31951d..b3a83bb4 100644
--- a/src/hits-presets.ts
+++ b/src/features/superstrike/hits-presets.ts
@@ -1,9 +1,3 @@
-/**
- * HITS presets: both main buttons' tuning, saved in this browser and shared as a
- * short code. The code holds the values only, with a checksum so a mistyped one
- * is rejected; a preset's name stays out of it.
- */
-
 export interface HitsButtonValues {
   actuation: number;
   rapidTrigger: number;
@@ -55,7 +49,6 @@ const MAX_NAME_LENGTH = 40;
 const ABSOLUTE = { actuation: 63, rapidTrigger: 63, haptics: 63 };
 
 function inRange(values: HitsButtonValues | undefined, limits: HitsLimits): boolean {
-  // Stored data can be missing a button or be the wrong shape; that is not valid, and must not throw.
   if (typeof values !== "object" || values === null) return false;
   return Number.isInteger(values.actuation) && values.actuation >= 1 && values.actuation <= limits.maxActuation
     && Number.isInteger(values.rapidTrigger) && values.rapidTrigger >= 1 && values.rapidTrigger <= limits.maxRapidTrigger
@@ -75,7 +68,6 @@ export function presetMatches(a: Pick<HitsPreset, "left" | "right">, b: Pick<Hit
   return side(a.left, b.left) && side(a.right, b.right);
 }
 
-/** True when every value is inside what the mouse reports it can do. */
 export function presetFits(preset: Pick<HitsPreset, "left" | "right">, limits: HitsLimits): boolean {
   return inRange(preset.left, limits) && inRange(preset.right, limits);
 }
@@ -112,7 +104,6 @@ export function encodeHitsCode(preset: Pick<HitsPreset, "left" | "right">): stri
   return CODE_PREFIX + toBase64Url(bytes);
 }
 
-/** Null for anything that is not a well-formed, checksum-correct HITS code. */
 export function decodeHitsCode(text: string): Pick<HitsPreset, "left" | "right"> | null {
   const trimmed = text.trim();
   if (!trimmed.startsWith(CODE_PREFIX)) return null;
@@ -147,7 +138,6 @@ export function loadHitsPresets(storage: Storage): HitsPreset[] {
   }
 }
 
-/** Saves under the name, replacing a preset of the same name. Returns the new list, or null if the name is empty. */
 export function saveHitsPreset(storage: Storage, preset: HitsPreset): HitsPreset[] | null {
   const name = cleanName(preset.name);
   if (!name) return null;
@@ -166,7 +156,6 @@ export function deleteHitsPreset(storage: Storage, name: string): HitsPreset[] {
   try {
     storage.setItem(STORAGE_KEY, JSON.stringify(next));
   } catch {
-    // Storage unavailable: the list simply stays as it was.
   }
   return next;
 }
diff --git a/src/hits-test.test.ts b/src/features/superstrike/hits-test.test.ts
similarity index 100%
rename from src/hits-test.test.ts
rename to src/features/superstrike/hits-test.test.ts
diff --git a/src/hits-test.ts b/src/features/superstrike/hits-test.ts
similarity index 89%
rename from src/hits-test.ts
rename to src/features/superstrike/hits-test.ts
index 278903a0..d98a03fa 100644
--- a/src/hits-test.ts
+++ b/src/features/superstrike/hits-test.ts
@@ -12,7 +12,6 @@ export interface DepthSample {
   depth: number;
 }
 
-/** What a conventional switch is compared against. */
 export const CONVENTIONAL_STEP = 5;
 
 /**
@@ -28,10 +27,6 @@ export function savedMs(samples: readonly DepthSample[], actuation: number): num
   return conventional - fired;
 }
 
-/**
- * When each step 1 to 10 was first reached, in milliseconds after `start`
- * (null for a step the press skipped or never reached).
- */
 export function stepTimes(samples: readonly DepthSample[], start: number): (number | null)[] {
   return Array.from({ length: 10 }, (_, index) => {
     const hit = samples.find((sample) => sample.depth >= index + 1);
diff --git a/src/i18n.test.ts b/src/i18n/i18n.test.ts
similarity index 92%
rename from src/i18n.test.ts
rename to src/i18n/i18n.test.ts
index b9189b4d..f68705f8 100644
--- a/src/i18n.test.ts
+++ b/src/i18n/i18n.test.ts
@@ -1,16 +1,14 @@
 import assert from "node:assert/strict";
 import test from "node:test";
 
-import { batteryStateText, connectLabelText, ensureLocale, missingTranslations, t, tp } from "./i18n.ts";
-import { tr } from "./i18n-tr.ts";
+import { batteryStateText, connectLabelText, ensureLocale, missingTranslations, t, tp } from "./index.ts";
+import { tr } from "./locales/tr.ts";
 
 test("i18n falls back to English until the locale table resolves", async () => {
   assert.equal(t("pt", "nav.settings"), "Settings");
   await ensureLocale("pt");
   assert.equal(t("pt", "nav.settings"), "Configurações");
   assert.equal(t("en", "nav.settings"), "Settings");
-  // Unknown locale-shaped input still resolves through the typed API;
-  // the safety net below must never surface an empty string.
   assert.ok(t("pt", "set.reset").length > 0);
   assert.equal(t("pt", "ov.firmware"), "FIRMWARE");
 });
diff --git a/src/i18n.ts b/src/i18n/index.ts
similarity index 94%
rename from src/i18n.ts
rename to src/i18n/index.ts
index 5022b80f..4cde08fc 100644
--- a/src/i18n.ts
+++ b/src/i18n/index.ts
@@ -1,9 +1,4 @@
-import type { InterfaceLocale } from "./interface-preferences";
-
-/** Skeleton i18n: English is the source of truth and the fallback for any
-    key a locale has not translated yet. Phase 1 covers the app chrome
-    (sidebar, settings, tabs, overview); device-facing strings produced
-    inside the controller stay English until phase 2. */
+import type { InterfaceLocale } from "../features/settings/interface-preferences";
 
 const en = {
   "luna.angleSnap": "Angle Snap",
@@ -24,18 +19,74 @@ const en = {
   "nav.language": "Language",
   "nav.settings": "Settings",
   "nav.support": "Support",
-  "nav.supportProject": "Support the Project",
+  "nav.supportProject": "Support the project",
   "nav.home": "Home",
   "nav.dashboard": "Mouse Config",
-  "nav.help": "Help & Feedback",
+  "nav.help": "Help & feedback",
   "nav.helpSubtitle": "Join the community server",
   "nav.docs": "Docs",
   "nav.supported": "Supported devices",
-  "nav.whatsNew": "What's New",
+  "nav.whatsNew": "What's new",
   "nav.games": "Games",
-  "nav.hardwareTest": "Hardware Test",
+  "nav.hardwareTest": "Hardware test",
   "nav.expand": "Expand sidebar",
   "nav.collapse": "Collapse sidebar",
+  "nav.devices": "Devices",
+  "nav.yourDevices": "Your devices",
+  "nav.main": "Main",
+  "nav.more": "More",
+  "home.notConnected": "Not connected",
+  "home.configure": "Configure",
+  "home.open": "Open",
+  "home.keyboard": "Keyboard",
+  "home.mouse": "Mouse",
+  "home.openHint": "Open it to read its settings",
+  "home.prev": "Previous device",
+  "home.next": "Next device",
+  "home.subtitle": "Devices this browser can open. Pick one to change its settings.",
+  "bridge.statusOn": "Bridge connected",
+  "bridge.statusOff": "Bridge not running",
+  "bridge.body": "A small desktop companion that carries device reports for this page. It reaches Razer mice that Chrome now blocks, and adds per-game profiles and low-battery alerts.",
+  "bridge.download": "Download Bridge",
+  "bridge.statusLabel": "Status",
+  "bridge.running": "Running",
+  "bridge.notRunning": "Not running",
+  "bridge.transport": "Transport",
+  "bridge.latest": "Latest release",
+  "home.actions": "Device options",
+  "home.remove": "Remove device",
+  "home.removeTitle": "Remove {name}?",
+  "home.removeBody": "OpenMouse forgets this device in this browser. Settings saved on the mouse stay as they are, and you can add it again any time.",
+  "ctl.deviceForgotten": "Device removed",
+  "ctl.deviceForgetUnsupported": "Bridge devices can't be removed here. Unplug the device or close Bridge.",
+  "bridge.update": "Update available",
+  "bridge.bodyOn": "Bridge is running and carrying device reports for this page, so Razer mice, game profiles and low-battery alerts are available.",
+  "bridge.releaseNotes": "Release notes",
+  "dev.status": "Device status",
+  "dev.breadcrumb": "Breadcrumb",
+  "ov.sensitivity": "Sensitivity",
+  "ov.stageOf": "Stage {n} of {total}",
+  "ov.pollingRate": "Polling rate",
+  "ov.upTo": "Up to {v}",
+  "ov.batteryLabel": "Battery",
+  "ov.onboardProfile": "Onboard profile",
+  "ov.setupTitle": "Current setup",
+  "ov.setupMeta": "Read from the device",
+  "ov.stages": "DPI stages",
+  "ov.historyTitle": "Battery over time",
+  "ov.historyMeta": "Last 7 days, recorded in this browser",
+  "ov.historyEmpty": "No history yet",
+  "ov.historyEmptyBody": "OpenMouse records the battery every 5 minutes while this page is open. The chart appears after a few readings.",
+  "set.subtitle": "How OpenMouse looks and behaves in this browser.",
+  "set.groupAppearance": "Appearance",
+  "set.themeTitle": "Theme",
+  "set.themeBody": "Each tile shows the app in that theme.",
+  "set.groupBehaviour": "Behaviour",
+  "set.groupAbout": "About",
+  "set.version": "Version",
+  "set.resetBody": "Restore the theme, language and switches on this page to their defaults. Device settings are not touched.",
+  "set.resetShort": "Reset",
+  "help.more": "Something else? The community on Discord answers questions, takes device requests and helps with bugs.",
   "side.selectedDevice": "SELECTED DEVICE",
   "side.connectedMouse": "Connected mouse",
   "side.connected": "Connected",
@@ -44,6 +95,8 @@ const en = {
   "bridge.connected": "Connected",
   "games.subtitle": "Pick a game to give it its own mouse settings — they're applied the moment the game launches.",
   "games.autoApply": "Auto",
+  "games.needsBridgeTitle": "Game profiles need OpenMouse Bridge",
+  "games.needsBridgeBody": "Bridge runs next to your browser, notices when a game starts and switches your mouse to that game's settings. Start Bridge, or download it, to set up a profile.",
   "games.settings": "Settings",
   "games.settingsHint": "Saved to this game's profile only. Your mouse keeps its current settings until {name} launches, and gets them back when it closes.",
   "games.changedCount": "Custom settings for this game: {n}",
@@ -112,7 +165,7 @@ const en = {
   "test.battery": "Battery",
   "test.firmware": "Firmware",
 
-  "hw.title": "Hardware Test",
+  "hw.title": "Hardware test",
   "hw.subtitle": "Runs the full driver-verification suite on the connected mouse — the evidence used to move a test-needed model to supported on the supported-devices page.",
   "hw.start": "Start test",
   "hw.end": "End test",
@@ -125,7 +178,7 @@ const en = {
   "hw.noDevice": "No mouse connected",
   "hw.noDeviceDetail": "Connect a mouse to run the hardware tests.",
   "hw.deviceCard": "DEVICE",
-  "hw.panelTitle": "HARDWARE TEST",
+  "hw.panelTitle": "Test run",
   "hw.stateIdle": "Idle",
   "hw.stateRunning": "Running…",
   "hw.stateDone": "Complete",
@@ -166,7 +219,7 @@ const en = {
   "set.importPlaceholder": "Paste a profile key here…",
   "set.import": "Import",
   "set.soundTitle": "Sound",
-  "set.soundDescription": "Enable sounds like mouse clicks and new connections",
+  "set.soundDescription": "Play a chime for new connections and alerts",
   "set.importNote": "Imported settings are staged like any other edit — nothing is written until you flash them.",
   "set.appearance": "APPEARANCE",
   "set.accentTheme": "Accent theme",
@@ -273,9 +326,7 @@ const en = {
   "wn.body": "Now available in alpha: the OpenMouse Desktop app. Run OpenMouse with a dedicated installable app — no need to keep a browser tab open. It includes native HID access, game profiles, and a unified interface across web and desktop. Head over to our release page to download it for your platform.",
   "wn.download": "Download for desktop",
   "wn.close": "Maybe later",
-  "ai.title": "OpenMouse AI",
   "ai.subtitle": "Quick answers & troubleshooting",
-  "ai.greeting": "Hey! I'm OpenMouse AI. Pick a topic below and I'll help you troubleshoot it.",
   "ai.topic1": "My mouse isn't connecting",
   "ai.topic1Ans": "Make sure your mouse is plugged in (or its receiver is in) and powered on. Try a different USB port, or a wired connection if your mouse supports one. On Linux, double-check that the HID device nodes are readable — the README lists the udev rules. Then press Connect and pick your device from the browser prompt.",
   "ai.topic2": "DPI or polling rate won't change",
@@ -285,8 +336,8 @@ const en = {
   "ai.topic4": "My settings aren't saving",
   "ai.topic4Ans": "Settings are written to the mouse's stored profile and applied on the device, not the cloud. After changing a setting, press Apply and keep the page open until the write finishes. If it still reverts after restarting, that setting may be read-only on your model.",
   "ai.other": "Something else",
-  "ai.otherAns": "No worries — hop over to the OpenMouse Discord and the community will help you out.",
   "ai.joinDiscord": "Join the Discord",
+  "help.faq": "More answers",
   "conn.add": "Add device",
   "conn.addMouse": "Add mouse",
   "conn.connecting": "Connecting…",
@@ -1281,8 +1332,6 @@ const en = {
 
 export type I18nKey = keyof typeof en;
 
-/** Locale codes with the i18n key holding each language's own name, in
-    picker order. Adding a language is one line here plus its table file. */
 export const LOCALE_NAME_KEYS: ReadonlyArray<[InterfaceLocale, I18nKey]> = [
   ["en", "set.english"],
   ["pt", "set.portuguese"],
@@ -1299,7 +1348,7 @@ export const LOCALE_NAME_KEYS: ReadonlyArray<[InterfaceLocale, I18nKey]> = [
 ];
 
 /** Non-English tables load on demand so the initial bundle ships English
-    only (see i18n-pt.ts etc., each split into its own chunk by the
+    only (see locales/*.ts, each split into its own chunk by the
     bundler). Until a table arrives, t() falls back to English — the call
     sites below await ensureLocale() before committing a locale switch, and
     re-render once it resolves for a stored non-English locale on first load. */
@@ -1309,20 +1358,18 @@ let extraTurkish: Readonly<Record<string, string>> = {};
 type DisplayPattern = { pattern: RegExp; names: string[]; translation: string; preserveNames: boolean };
 let displayPatterns: DisplayPattern[] | undefined;
 
-/** One dynamic import per non-English locale, keyed the same way as the
-    picker. Adding a language means adding its file and one line here. */
 const LOCALE_LOADERS: Record<Exclude<InterfaceLocale, "en">, () => Promise<LocaleTable>> = {
-  pt: () => import("./i18n-pt.ts").then((m) => m.pt),
-  es: () => import("./i18n-es.ts").then((m) => m.es),
-  fr: () => import("./i18n-fr.ts").then((m) => m.fr),
-  de: () => import("./i18n-de.ts").then((m) => m.de),
-  zh: () => import("./i18n-zh.ts").then((m) => m.zh),
-  ja: () => import("./i18n-ja.ts").then((m) => m.ja),
-  ko: () => import("./i18n-ko.ts").then((m) => m.ko),
-  ru: () => import("./i18n-ru.ts").then((m) => m.ru),
-  vi: () => import("./i18n-vi.ts").then((m) => m.vi),
-  ar: () => import("./i18n-ar.ts").then((m) => m.ar),
-  tr: () => Promise.all([import("./i18n-tr.ts"), import("./i18n-tr-extra.ts")]).then(([main, extra]) => {
+  pt: () => import("./locales/pt.ts").then((m) => m.pt),
+  es: () => import("./locales/es.ts").then((m) => m.es),
+  fr: () => import("./locales/fr.ts").then((m) => m.fr),
+  de: () => import("./locales/de.ts").then((m) => m.de),
+  zh: () => import("./locales/zh.ts").then((m) => m.zh),
+  ja: () => import("./locales/ja.ts").then((m) => m.ja),
+  ko: () => import("./locales/ko.ts").then((m) => m.ko),
+  ru: () => import("./locales/ru.ts").then((m) => m.ru),
+  vi: () => import("./locales/vi.ts").then((m) => m.vi),
+  ar: () => import("./locales/ar.ts").then((m) => m.ar),
+  tr: () => Promise.all([import("./locales/tr.ts"), import("./locales/tr-extra.ts")]).then(([main, extra]) => {
     extraTurkish = extra.trExtra;
     displayPatterns = undefined;
     return main.tr;
@@ -1345,11 +1392,9 @@ export async function ensureDisplayLocale(
   try {
     await load(locale);
   } catch {
-    // t() continues to provide the existing English fallback.
   }
 }
 
-/** Keys present in English but missing (or empty) in another locale. */
 export async function missingTranslations(): Promise<Array<{ locale: InterfaceLocale; key: string }>> {
   const locales = Object.keys(LOCALE_LOADERS) as Array<Exclude<InterfaceLocale, "en">>;
   await Promise.all(locales.map(ensureLocale));
@@ -1362,7 +1407,6 @@ export async function missingTranslations(): Promise<Array<{ locale: InterfaceLo
   return missing;
 }
 
-/** Translate a chrome key, falling back to English, then to the key itself. */
 export function t(locale: InterfaceLocale, key: I18nKey): string {
   if (locale === "en") return en[key] ?? key;
   return tables[locale]?.[key] ?? en[key] ?? key;
diff --git a/src/locale-loading.test.ts b/src/i18n/locale-loading.test.ts
similarity index 90%
rename from src/locale-loading.test.ts
rename to src/i18n/locale-loading.test.ts
index 01028635..066b190f 100644
--- a/src/locale-loading.test.ts
+++ b/src/i18n/locale-loading.test.ts
@@ -1,6 +1,6 @@
 import assert from "node:assert/strict";
 import test from "node:test";
-import { ensureDisplayLocale, t } from "./i18n.ts";
+import { ensureDisplayLocale, t } from "./index.ts";
 
 test("a failed display-locale load allows rendering with English fallback and a later retry", async () => {
   let rendered = false;
diff --git a/src/i18n-ar.ts b/src/i18n/locales/ar.ts
similarity index 95%
rename from src/i18n-ar.ts
rename to src/i18n/locales/ar.ts
index 650ea66d..c760d046 100644
--- a/src/i18n-ar.ts
+++ b/src/i18n/locales/ar.ts
@@ -1,7 +1,5 @@
-import type { I18nKey } from "./i18n.ts";
+import type { I18nKey } from "../index.ts";
 
-/** Arabic strings, split into a lazy chunk so the initial bundle ships
-    English only. Loaded via ensureLocale() before first use. */
 export const ar: Record<I18nKey, string> = {
   "set.turkish": "Türkçe",
   "luna.angleSnap": "تصحيح الخط المستقيم",
@@ -42,6 +40,8 @@ export const ar: Record<I18nKey, string> = {
   "bridge.connected": "متصل",
   "games.subtitle": "اختر لعبة لتمنحها إعدادات ماوس خاصة بها — تُطبَّق فور تشغيل اللعبة.",
   "games.autoApply": "تلقائي",
+  "games.needsBridgeTitle": "ملفات الألعاب تحتاج إلى OpenMouse Bridge",
+  "games.needsBridgeBody": "يعمل Bridge بجانب متصفحك، ويلاحظ بدء اللعبة ويحوّل ماوسك إلى إعدادات تلك اللعبة. شغّل Bridge أو نزّله لإعداد ملف.",
   "games.settings": "الإعدادات",
   "games.settingsHint": "تُحفظ في ملف هذه اللعبة فقط. يحتفظ ماوسك بإعداداته الحالية حتى تشغيل {name}، ثم يستعيدها عند إغلاقها.",
   "games.changedCount": "إعدادات مخصّصة لهذه اللعبة: {n}",
@@ -162,7 +162,7 @@ export const ar: Record<I18nKey, string> = {
   "set.importPlaceholder": "الصق رمز ملف هنا…",
   "set.import": "استيراد",
   "set.soundTitle": "الصوت",
-  "set.soundDescription": "تفعيل أصوات مثل نقرات الماوس والاتصالات الجديدة",
+  "set.soundDescription": "تشغيل نغمة عند الاتصالات الجديدة والتنبيهات",
   "set.importNote": "تُدرج الإعدادات المستوردة كأي تعديل آخر — لا يُكتب شيء حتى تثبّتها.",
   "set.appearance": "المظهر",
   "set.accentTheme": "مظهر الواجهة",
@@ -268,9 +268,7 @@ export const ar: Record<I18nKey, string> = {
   "wn.body": "تطبيق OpenMouse لسطح المكتب يتوفر الآن بإصدار ألفا! شغّل OpenMouse كتطبيق مكتبي مستقل دون الحاجة لفتح المتصفح. يدعم التطبيق الوصول المباشر لأجهزة HID وملفات الألعاب مع واجهة موحدة للويب وسطح المكتب. حَمّل النسخة المتوافقة مع نظامك من صفحة الإصدارات.",
   "wn.download": "تنزيل لسطح المكتب",
   "wn.close": "ربما لاحقًا",
-  "ai.title": "OpenMouse AI",
   "ai.subtitle": "إجابات سريعة واستكشاف الأخطاء",
-  "ai.greeting": "مرحبًا! أنا OpenMouse AI. اختر موضوعًا أدناه وسأساعدك في حلّه.",
   "ai.topic1": "ماوسي لا يتصل",
   "ai.topic1Ans": "تأكد من أن ماوسك موصول بالكهرباء (أو أن مستقبله في مكانه) وأنه قيد التشغيل. جرّب منفذ USB آخر، أو اتصالًا سلكيًا إن كان ماوسك يدعمه. على Linux، تحقق من أن عقد أجهزة HID قابلة للقراءة — يسرد README قواعد udev. ثم اضغط «اتصال» واختر جهازك من نافذة المتصفح.",
   "ai.topic2": "DPI أو معدل الاستقصاء لا يتغير",
@@ -280,8 +278,8 @@ export const ar: Record<I18nKey, string> = {
   "ai.topic4": "إعداداتي لا تُحفظ",
   "ai.topic4Ans": "تُكتب الإعدادات في الملف المخزّن للماوس وتُطبَّق على الجهاز، لا في السحابة. بعد تغيير إعداد، اضغط «تطبيق» وأبقِ الصفحة مفتوحة حتى تكتمل الكتابة. إذا استُعيدت القيمة بعد إعادة التشغيل، فقد يكون هذا الإعداد للقراءة فقط على طرازك.",
   "ai.other": "شيء آخر",
-  "ai.otherAns": "لا بأس — انضم إلى Discord الخاص بـ OpenMouse وسيساعدك المجتمع.",
   "ai.joinDiscord": "انضم إلى Discord",
+  "help.faq": "المزيد من الإجابات",
   "conn.add": "إضافة جهاز",
   "conn.addMouse": "إضافة ماوس",
   "conn.connecting": "جارٍ الاتصال…",
@@ -1188,7 +1186,6 @@ export const ar: Record<I18nKey, string> = {
   "kb.triggerApplied": "تم تحديث التفعيل",
   "kb.triggerAppliedDetail": "أكّدت لوحة المفاتيح لـ {n} مفتاح/مفاتيح.",
   "kb.triggerFailed": "تعذّر تحديث التفعيل",
-  // New keyboard controls use English until translated.
   "kb.geometry": "Layout style packs",
   "kb.row": "Row",
   "kb.col": "Column",
@@ -1272,4 +1269,60 @@ export const ar: Record<I18nKey, string> = {
   "kb.unavailable": "Not reported",
   "kb.readout": "Sensor ADC counts",
   "kb.multiNote": "Bulk edits use the selected key’s values as the starting point.",
+  "nav.devices": "الأجهزة",
+  "nav.yourDevices": "أجهزتك",
+  "nav.main": "الرئيسية",
+  "nav.more": "المزيد",
+  "home.notConnected": "غير متصل",
+  "home.configure": "ضبط",
+  "home.open": "فتح",
+  "home.keyboard": "لوحة مفاتيح",
+  "home.mouse": "فأرة",
+  "home.openHint": "افتحه لقراءة إعداداته",
+  "home.prev": "الجهاز السابق",
+  "home.next": "الجهاز التالي",
+  "home.subtitle": "الأجهزة التي يستطيع هذا المتصفح فتحها. اختر جهازًا لتغيير إعداداته.",
+  "bridge.statusOn": "Bridge متصل",
+  "bridge.statusOff": "Bridge لا يعمل",
+  "bridge.body": "تطبيق مكتبي صغير ينقل تقارير الجهاز إلى هذه الصفحة. يصل إلى فئران Razer التي يحظرها Chrome الآن، ويضيف ملفات تعريف لكل لعبة وتنبيهات انخفاض البطارية.",
+  "bridge.download": "تنزيل Bridge",
+  "bridge.statusLabel": "الحالة",
+  "bridge.running": "يعمل",
+  "bridge.notRunning": "متوقف",
+  "bridge.transport": "طريقة النقل",
+  "bridge.latest": "أحدث إصدار",
+  "home.actions": "خيارات الجهاز",
+  "home.remove": "إزالة الجهاز",
+  "home.removeTitle": "إزالة {name}؟",
+  "home.removeBody": "سينسى OpenMouse هذا الجهاز في هذا المتصفح. تبقى الإعدادات المحفوظة على الماوس كما هي، ويمكنك إضافته مجددًا في أي وقت.",
+  "ctl.deviceForgotten": "تمت إزالة الجهاز",
+  "ctl.deviceForgetUnsupported": "لا يمكن إزالة أجهزة Bridge من هنا. افصل الجهاز أو أغلق Bridge.",
+  "bridge.update": "تحديث متاح",
+  "bridge.bodyOn": "يعمل Bridge وينقل تقارير الجهاز لهذه الصفحة، لذا تتوفر فئران Razer وملفات الألعاب وتنبيهات انخفاض البطارية.",
+  "bridge.releaseNotes": "ملاحظات الإصدار",
+  "dev.status": "حالة الجهاز",
+  "dev.breadcrumb": "مسار التنقل",
+  "ov.sensitivity": "الحساسية",
+  "ov.stageOf": "المرحلة {n} من {total}",
+  "ov.pollingRate": "معدل الاستقصاء",
+  "ov.upTo": "حتى {v}",
+  "ov.batteryLabel": "البطارية",
+  "ov.onboardProfile": "الملف المدمج",
+  "ov.setupTitle": "الإعداد الحالي",
+  "ov.setupMeta": "مقروء من الجهاز",
+  "ov.stages": "مراحل DPI",
+  "ov.historyTitle": "البطارية عبر الوقت",
+  "ov.historyMeta": "آخر 7 أيام، مسجلة في هذا المتصفح",
+  "ov.historyEmpty": "لا يوجد سجل بعد",
+  "ov.historyEmptyBody": "يسجل OpenMouse البطارية كل 5 دقائق ما دامت هذه الصفحة مفتوحة. يظهر الرسم البياني بعد بضع قراءات.",
+  "set.subtitle": "مظهر OpenMouse وسلوكه في هذا المتصفح.",
+  "set.groupAppearance": "المظهر",
+  "set.themeTitle": "السمة",
+  "set.themeBody": "تعرض كل بطاقة التطبيق بتلك السمة.",
+  "set.groupBehaviour": "السلوك",
+  "set.groupAbout": "حول",
+  "set.version": "الإصدار",
+  "set.resetBody": "يعيد السمة واللغة والمفاتيح في هذه الصفحة إلى القيم الافتراضية. لا تتغير إعدادات الجهاز.",
+  "set.resetShort": "إعادة تعيين",
+  "help.more": "شيء آخر؟ مجتمع Discord يجيب عن الأسئلة ويستقبل طلبات الأجهزة ويساعد في الأخطاء.",
 };
diff --git a/src/i18n-de.ts b/src/i18n/locales/de.ts
similarity index 95%
rename from src/i18n-de.ts
rename to src/i18n/locales/de.ts
index aca17b86..eb5b34dc 100644
--- a/src/i18n-de.ts
+++ b/src/i18n/locales/de.ts
@@ -1,7 +1,5 @@
-import type { I18nKey } from "./i18n.ts";
+import type { I18nKey } from "../index.ts";
 
-/** German strings, split into a lazy chunk so the initial bundle ships
-    English only. Loaded via ensureLocale() before first use. */
 export const de: Record<I18nKey, string> = {
   "set.turkish": "Türkçe",
   "luna.angleSnap": "Geradlinienkorrektur",
@@ -42,6 +40,8 @@ export const de: Record<I18nKey, string> = {
   "bridge.connected": "Verbunden",
   "games.subtitle": "Wähle ein Spiel für eigene Mauseinstellungen – sie werden angewendet, sobald das Spiel startet.",
   "games.autoApply": "Auto",
+  "games.needsBridgeTitle": "Spielprofile brauchen OpenMouse Bridge",
+  "games.needsBridgeBody": "Bridge läuft neben deinem Browser, erkennt den Start eines Spiels und schaltet deine Maus auf die Einstellungen dieses Spiels um. Starte Bridge oder lade es herunter, um ein Profil einzurichten.",
   "games.settings": "Einstellungen",
   "games.settingsHint": "Nur im Profil dieses Spiels gespeichert. Deine Maus behält ihre aktuellen Einstellungen, bis {name} startet, und bekommt sie zurück, wenn es beendet wird.",
   "games.changedCount": "Eigene Einstellungen für dieses Spiel: {n}",
@@ -153,7 +153,7 @@ export const de: Record<I18nKey, string> = {
   "set.title": "Einstellungen",
   "set.back": "Zurück zum Gerät",
   "set.soundTitle": "Klang",
-  "set.soundDescription": "Aktiviere Geräusche wie Mausklicks und neue Verbindungen",
+  "set.soundDescription": "Bei neuen Verbindungen und Hinweisen einen Ton abspielen",
   "set.profiles": "PROFILE",
   "set.profileKey": "Profilschlüssel",
   "set.profileKeyBody": "Ein zum Kopieren geeigneter Schlüssel, der die Einstellungen dieser Maus auf ein anderes Gerät desselben Modells überträgt. Füge ihn dort in den Einstellungen ein, um dieselbe Konfiguration zu laden.",
@@ -269,9 +269,7 @@ export const de: Record<I18nKey, string> = {
   "wn.body": "Jetzt in der Alpha-Version verfügbar: die OpenMouse-Desktop-App. Nutze OpenMouse als installierbare App — ohne Browser-Tab offenhalten zu müssen. Sie bietet nativen HID-Zugriff, Spielprofile und eine einheitliche Oberfläche für Web und Desktop. Besuche unsere Release-Seite, um sie für deine Plattform herunterzuladen.",
   "wn.download": "Für Desktop herunterladen",
   "wn.close": "Vielleicht später",
-  "ai.title": "OpenMouse AI",
   "ai.subtitle": "Schnelle Antworten & Fehlerbehebung",
-  "ai.greeting": "Hey! Ich bin OpenMouse AI. Wähle unten ein Thema aus, und ich helfe dir bei der Fehlerbehebung.",
   "ai.topic1": "Meine Maus verbindet nicht",
   "ai.topic1Ans": "Stelle sicher, dass deine Maus eingesteckt ist (oder ihr Empfänger) und eingeschaltet ist. Probiere einen anderen USB-Port oder, falls unterstützt, eine kabelgebundene Verbindung. Unter Linux prüfe, ob die HID-Geräteknoten lesbar sind — die README listet die udev-Regeln. Drücke dann Verbinden und wähle dein Gerät im Browser-Dialog aus.",
   "ai.topic2": "DPI oder Polling-Rate ändert sich nicht",
@@ -281,8 +279,8 @@ export const de: Record<I18nKey, string> = {
   "ai.topic4": "Meine Einstellungen werden nicht gespeichert",
   "ai.topic4Ans": "Einstellungen werden in das gespeicherte Profil der Maus geschrieben und am Gerät angewendet, nicht in der Cloud. Nach einer Änderung drücke Anwenden und lass die Seite offen, bis der Schreibvorgang abgeschlossen ist. Bleibt es nach einem Neustart rückgängig, ist die Einstellung bei deinem Modell möglicherweise schreibgeschützt.",
   "ai.other": "Etwas anderes",
-  "ai.otherAns": "Kein Problem — schau im OpenMouse-Discord vorbei, und die Community hilft dir weiter.",
   "ai.joinDiscord": "Dem Discord beitreten",
+  "help.faq": "Weitere Antworten",
   "conn.add": "Gerät hinzufügen",
   "conn.addMouse": "Maus hinzufügen",
   "conn.connecting": "Verbindung wird hergestellt…",
@@ -1190,7 +1188,6 @@ export const de: Record<I18nKey, string> = {
   "kb.triggerApplied": "Auslösepunkt aktualisiert",
   "kb.triggerAppliedDetail": "Von der Tastatur für {n} Taste(n) bestätigt.",
   "kb.triggerFailed": "Auslösepunkt konnte nicht aktualisiert werden",
-  // New keyboard controls use English until translated.
   "kb.geometry": "Layout style packs",
   "kb.row": "Row",
   "kb.col": "Column",
@@ -1274,4 +1271,60 @@ export const de: Record<I18nKey, string> = {
   "kb.unavailable": "Not reported",
   "kb.readout": "Sensor ADC counts",
   "kb.multiNote": "Bulk edits use the selected key’s values as the starting point.",
+  "nav.devices": "Geräte",
+  "nav.yourDevices": "Deine Geräte",
+  "nav.main": "Hauptmenü",
+  "nav.more": "Mehr",
+  "home.notConnected": "Nicht verbunden",
+  "home.configure": "Konfigurieren",
+  "home.open": "Öffnen",
+  "home.keyboard": "Tastatur",
+  "home.mouse": "Maus",
+  "home.openHint": "Öffnen, um die Einstellungen zu lesen",
+  "home.prev": "Vorheriges Gerät",
+  "home.next": "Nächstes Gerät",
+  "home.subtitle": "Geräte, die dieser Browser öffnen kann. Wähle eines, um seine Einstellungen zu ändern.",
+  "bridge.statusOn": "Bridge verbunden",
+  "bridge.statusOff": "Bridge läuft nicht",
+  "bridge.body": "Ein kleines Desktop-Programm, das Geräteberichte an diese Seite weiterreicht. Es erreicht Razer-Mäuse, die Chrome inzwischen blockiert, und bringt Spielprofile und Warnungen bei niedrigem Akku.",
+  "bridge.download": "Bridge herunterladen",
+  "bridge.statusLabel": "Status",
+  "bridge.running": "Läuft",
+  "bridge.notRunning": "Gestoppt",
+  "bridge.transport": "Übertragung",
+  "bridge.latest": "Neueste Version",
+  "home.actions": "Geräteoptionen",
+  "home.remove": "Gerät entfernen",
+  "home.removeTitle": "{name} entfernen?",
+  "home.removeBody": "OpenMouse vergisst dieses Gerät in diesem Browser. Auf der Maus gespeicherte Einstellungen bleiben erhalten, und du kannst sie jederzeit wieder hinzufügen.",
+  "ctl.deviceForgotten": "Gerät entfernt",
+  "ctl.deviceForgetUnsupported": "Bridge-Geräte lassen sich hier nicht entfernen. Trenne das Gerät oder beende Bridge.",
+  "bridge.update": "Update verfügbar",
+  "bridge.bodyOn": "Bridge läuft und überträgt die Geräteberichte für diese Seite, damit Razer-Mäuse, Spielprofile und Warnungen bei niedrigem Akku verfügbar sind.",
+  "bridge.releaseNotes": "Versionshinweise",
+  "dev.status": "Gerätestatus",
+  "dev.breadcrumb": "Navigationspfad",
+  "ov.sensitivity": "Empfindlichkeit",
+  "ov.stageOf": "Stufe {n} von {total}",
+  "ov.pollingRate": "Abfragerate",
+  "ov.upTo": "Bis zu {v}",
+  "ov.batteryLabel": "Akku",
+  "ov.onboardProfile": "Onboard-Profil",
+  "ov.setupTitle": "Aktuelles Setup",
+  "ov.setupMeta": "Vom Gerät gelesen",
+  "ov.stages": "DPI-Stufen",
+  "ov.historyTitle": "Akku im Verlauf",
+  "ov.historyMeta": "Letzte 7 Tage, in diesem Browser aufgezeichnet",
+  "ov.historyEmpty": "Noch kein Verlauf",
+  "ov.historyEmptyBody": "OpenMouse zeichnet den Akku alle 5 Minuten auf, solange diese Seite offen ist. Das Diagramm erscheint nach einigen Messungen.",
+  "set.subtitle": "Wie OpenMouse in diesem Browser aussieht und sich verhält.",
+  "set.groupAppearance": "Darstellung",
+  "set.themeTitle": "Design",
+  "set.themeBody": "Jede Kachel zeigt die App in diesem Design.",
+  "set.groupBehaviour": "Verhalten",
+  "set.groupAbout": "Über",
+  "set.version": "Version",
+  "set.resetBody": "Setzt Design, Sprache und die Schalter auf dieser Seite zurück. Geräteeinstellungen bleiben unverändert.",
+  "set.resetShort": "Zurücksetzen",
+  "help.more": "Etwas anderes? Die Community auf Discord beantwortet Fragen, nimmt Gerätewünsche an und hilft bei Fehlern.",
 }
diff --git a/src/i18n-es.ts b/src/i18n/locales/es.ts
similarity index 95%
rename from src/i18n-es.ts
rename to src/i18n/locales/es.ts
index 20365285..d4e9e8b1 100644
--- a/src/i18n-es.ts
+++ b/src/i18n/locales/es.ts
@@ -1,7 +1,5 @@
-import type { I18nKey } from "./i18n.ts";
+import type { I18nKey } from "../index.ts";
 
-/** Spanish strings, split into a lazy chunk so the initial bundle ships
-    English only. Loaded via ensureLocale() before first use. */
 export const es: Record<I18nKey, string> = {
   "set.turkish": "Türkçe",
   "luna.angleSnap": "Corrección de línea recta",
@@ -42,6 +40,8 @@ export const es: Record<I18nKey, string> = {
   "bridge.connected": "Conectado",
   "games.subtitle": "Elige un juego para darle sus propios ajustes de ratón: se aplican en cuanto se inicia el juego.",
   "games.autoApply": "Auto",
+  "games.needsBridgeTitle": "Los perfiles de juego necesitan OpenMouse Bridge",
+  "games.needsBridgeBody": "Bridge se ejecuta junto a tu navegador, detecta cuándo empieza un juego y cambia tu ratón a la configuración de ese juego. Inicia Bridge o descárgalo para crear un perfil.",
   "games.settings": "Ajustes",
   "games.settingsHint": "Se guarda solo en el perfil de este juego. Tu ratón conserva sus ajustes actuales hasta que se inicie {name} y los recupera al cerrarlo.",
   "games.changedCount": "Ajustes propios para este juego: {n}",
@@ -153,7 +153,7 @@ export const es: Record<I18nKey, string> = {
   "set.title": "Configuración",
   "set.back": "Volver al dispositivo",
   "set.soundTitle": "Sonido",
-  "set.soundDescription": "Activa sonidos como clics de ratón y nuevas conexiones",
+  "set.soundDescription": "Reproducir un aviso sonoro con nuevas conexiones y alertas",
   "set.profiles": "PERFILES",
   "set.profileKey": "Clave de perfil",
   "set.profileKeyBody": "Una clave para copiar y pegar que lleva la configuración de este mouse a otra unidad del mismo modelo. Pégala en Configuración allí para cargar el mismo ajuste.",
@@ -269,9 +269,7 @@ export const es: Record<I18nKey, string> = {
   "wn.body": "Ya disponible en alpha: la aplicación de escritorio de OpenMouse. Usa OpenMouse como una app instalable — sin necesidad de mantener una pestaña del navegador abierta. Incluye acceso HID nativo, perfiles de juego y una interfaz unificada para web y escritorio. Visita nuestra página de versiones para descargarla para tu plataforma.",
   "wn.download": "Descargar para escritorio",
   "wn.close": "Quizás más tarde",
-  "ai.title": "OpenMouse AI",
   "ai.subtitle": "Respuestas rápidas y solución de problemas",
-  "ai.greeting": "¡Hola! Soy OpenMouse AI. Elige un tema abajo y te ayudaré a resolverlo.",
   "ai.topic1": "Mi mouse no se conecta",
   "ai.topic1Ans": "Asegúrate de que tu mouse esté enchufado (o su receptor) y encendido. Prueba otro puerto USB o, si tu mouse lo soporta, una conexión por cable. En Linux, verifica que los nodos de dispositivos HID sean legibles: el README enumera las reglas de udev. Después pulsa Conectar y elige tu dispositivo en el diálogo del navegador.",
   "ai.topic2": "El DPI o la frecuencia de sondeo no cambian",
@@ -281,8 +279,8 @@ export const es: Record<I18nKey, string> = {
   "ai.topic4": "Mi configuración no se guarda",
   "ai.topic4Ans": "La configuración se escribe en el perfil almacenado del mouse y se aplica en el dispositivo, no en la nube. Después de cambiar un ajuste, pulsa Aplicar y mantén la página abierta hasta que termine la escritura. Si sigue revirtiendo tras reiniciar, ese ajuste puede ser de solo lectura en tu modelo.",
   "ai.other": "Otra cosa",
-  "ai.otherAns": "Sin problema — pásate por el Discord de OpenMouse y la comunidad te ayudará.",
   "ai.joinDiscord": "Únete al Discord",
+  "help.faq": "Más respuestas",
   "conn.add": "Agregar dispositivo",
   "conn.addMouse": "Agregar mouse",
   "conn.connecting": "Conectando…",
@@ -1190,7 +1188,6 @@ export const es: Record<I18nKey, string> = {
   "kb.triggerApplied": "Gatillo actualizado",
   "kb.triggerAppliedDetail": "Confirmado por el teclado para {n} tecla(s).",
   "kb.triggerFailed": "No se pudo actualizar el gatillo",
-  // New keyboard controls use English until translated.
   "kb.geometry": "Layout style packs",
   "kb.row": "Row",
   "kb.col": "Column",
@@ -1274,4 +1271,60 @@ export const es: Record<I18nKey, string> = {
   "kb.unavailable": "Not reported",
   "kb.readout": "Sensor ADC counts",
   "kb.multiNote": "Bulk edits use the selected key’s values as the starting point.",
+  "nav.devices": "Dispositivos",
+  "nav.yourDevices": "Tus dispositivos",
+  "nav.main": "Principal",
+  "nav.more": "Más",
+  "home.notConnected": "No conectado",
+  "home.configure": "Configurar",
+  "home.open": "Abrir",
+  "home.keyboard": "Teclado",
+  "home.mouse": "Ratón",
+  "home.openHint": "Ábrelo para leer sus ajustes",
+  "home.prev": "Dispositivo anterior",
+  "home.next": "Dispositivo siguiente",
+  "home.subtitle": "Dispositivos que este navegador puede abrir. Elige uno para cambiar sus ajustes.",
+  "bridge.statusOn": "Bridge conectado",
+  "bridge.statusOff": "Bridge no está en ejecución",
+  "bridge.body": "Una pequeña aplicación de escritorio que transporta los informes del dispositivo a esta página. Llega a ratones Razer que Chrome ahora bloquea y añade perfiles por juego y avisos de batería baja.",
+  "bridge.download": "Descargar Bridge",
+  "bridge.statusLabel": "Estado",
+  "bridge.running": "En ejecución",
+  "bridge.notRunning": "Detenido",
+  "bridge.transport": "Transporte",
+  "bridge.latest": "Última versión",
+  "home.actions": "Opciones del dispositivo",
+  "home.remove": "Quitar dispositivo",
+  "home.removeTitle": "¿Quitar {name}?",
+  "home.removeBody": "OpenMouse olvida este dispositivo en este navegador. Los ajustes guardados en el ratón no cambian y puedes volver a añadirlo cuando quieras.",
+  "ctl.deviceForgotten": "Dispositivo quitado",
+  "ctl.deviceForgetUnsupported": "Los dispositivos de Bridge no se pueden quitar aquí. Desconecta el dispositivo o cierra Bridge.",
+  "bridge.update": "Actualización disponible",
+  "bridge.bodyOn": "Bridge está en ejecución y transmite los informes del dispositivo a esta página, así que tienes ratones Razer, perfiles de juego y avisos de batería baja.",
+  "bridge.releaseNotes": "Notas de la versión",
+  "dev.status": "Estado del dispositivo",
+  "dev.breadcrumb": "Ruta de navegación",
+  "ov.sensitivity": "Sensibilidad",
+  "ov.stageOf": "Etapa {n} de {total}",
+  "ov.pollingRate": "Tasa de sondeo",
+  "ov.upTo": "Hasta {v}",
+  "ov.batteryLabel": "Batería",
+  "ov.onboardProfile": "Perfil integrado",
+  "ov.setupTitle": "Configuración actual",
+  "ov.setupMeta": "Leído del dispositivo",
+  "ov.stages": "Etapas de DPI",
+  "ov.historyTitle": "Batería a lo largo del tiempo",
+  "ov.historyMeta": "Últimos 7 días, registrados en este navegador",
+  "ov.historyEmpty": "Aún no hay historial",
+  "ov.historyEmptyBody": "OpenMouse registra la batería cada 5 minutos mientras esta página está abierta. El gráfico aparece tras algunas lecturas.",
+  "set.subtitle": "Cómo se ve y se comporta OpenMouse en este navegador.",
+  "set.groupAppearance": "Apariencia",
+  "set.themeTitle": "Tema",
+  "set.themeBody": "Cada mosaico muestra la app en ese tema.",
+  "set.groupBehaviour": "Comportamiento",
+  "set.groupAbout": "Acerca de",
+  "set.version": "Versión",
+  "set.resetBody": "Restablece el tema, el idioma y los interruptores de esta página. Los ajustes del dispositivo no cambian.",
+  "set.resetShort": "Restablecer",
+  "help.more": "¿Otra cosa? La comunidad en Discord responde preguntas, recibe solicitudes de dispositivos y ayuda con errores.",
 }
diff --git a/src/i18n-fr.ts b/src/i18n/locales/fr.ts
similarity index 95%
rename from src/i18n-fr.ts
rename to src/i18n/locales/fr.ts
index 7785d6d6..b27d3941 100644
--- a/src/i18n-fr.ts
+++ b/src/i18n/locales/fr.ts
@@ -1,7 +1,5 @@
-import type { I18nKey } from "./i18n.ts";
+import type { I18nKey } from "../index.ts";
 
-/** French strings, split into a lazy chunk so the initial bundle ships
-    English only. Loaded via ensureLocale() before first use. */
 export const fr: Record<I18nKey, string> = {
   "set.turkish": "Türkçe",
   "luna.angleSnap": "Correction de ligne droite",
@@ -42,6 +40,8 @@ export const fr: Record<I18nKey, string> = {
   "bridge.connected": "Connecté",
   "games.subtitle": "Choisis un jeu pour lui donner ses propres réglages de souris — ils s'appliquent dès le lancement du jeu.",
   "games.autoApply": "Auto",
+  "games.needsBridgeTitle": "Les profils de jeu nécessitent OpenMouse Bridge",
+  "games.needsBridgeBody": "Bridge tourne à côté de ton navigateur, repère le lancement d'un jeu et applique à ta souris les réglages de ce jeu. Lance Bridge, ou télécharge-le, pour créer un profil.",
   "games.settings": "Réglages",
   "games.settingsHint": "Enregistré uniquement dans le profil de ce jeu. Ta souris garde ses réglages actuels jusqu'au lancement de {name} et les retrouve à sa fermeture.",
   "games.changedCount": "Réglages propres à ce jeu : {n}",
@@ -153,7 +153,7 @@ export const fr: Record<I18nKey, string> = {
   "set.title": "Paramètres",
   "set.back": "Retour à l'appareil",
   "set.soundTitle": "Son",
-  "set.soundDescription": "Activez des sons comme des clics de souris et de nouvelles connexions",
+  "set.soundDescription": "Jouer un son lors des nouvelles connexions et des alertes",
   "set.profiles": "PROFILS",
   "set.profileKey": "Clé de profil",
   "set.profileKeyBody": "Une clé à copier-coller qui transfère les réglages de cette souris vers une autre unité du même modèle. Collez-la dans les Paramètres là-bas pour charger la même configuration.",
@@ -269,9 +269,7 @@ export const fr: Record<I18nKey, string> = {
   "wn.body": "Désormais disponible en alpha : l'application de bureau OpenMouse. Utilisez OpenMouse comme une app installable — sans garder un onglet de navigateur ouvert. Elle inclut l'accès HID natif, des profils de jeu et une interface unifiée sur le web et le bureau. Rendez-vous sur notre page de versions pour la télécharger pour votre plateforme.",
   "wn.download": "Télécharger pour le bureau",
   "wn.close": "Peut-être plus tard",
-  "ai.title": "OpenMouse AI",
   "ai.subtitle": "Réponses rapides et dépannage",
-  "ai.greeting": "Salut ! Je suis OpenMouse AI. Choisis un sujet ci-dessous et je t'aiderai à le résoudre.",
   "ai.topic1": "Ma souris ne se connecte pas",
   "ai.topic1Ans": "Assure-toi que ta souris est branchée (ou que son récepteur est en place) et allumée. Essaie un autre port USB ou une connexion filaire si ta souris le permet. Sous Linux, vérifie que les nœuds de périphériques HID sont lisibles — le README liste les règles udev. Puis appuie sur Connecter et choisis ton périphérique dans l'invite du navigateur.",
   "ai.topic2": "Le DPI ou la fréquence d'interrogation ne change pas",
@@ -281,8 +279,8 @@ export const fr: Record<I18nKey, string> = {
   "ai.topic4": "Mes paramètres ne sont pas enregistrés",
   "ai.topic4Ans": "Les paramètres sont écrits dans le profil stocké de la souris et appliqués sur l'appareil, pas dans le cloud. Après avoir modifié un réglage, appuie sur Appliquer et garde la page ouverte jusqu'à la fin de l'écriture. Si cela revient encore après un redémarrage, ce réglage est peut-être en lecture seule sur ton modèle.",
   "ai.other": "Autre chose",
-  "ai.otherAns": "Pas de souci — passe sur le Discord d'OpenMouse et la communauté t'aidera.",
   "ai.joinDiscord": "Rejoindre le Discord",
+  "help.faq": "Plus de réponses",
   "conn.add": "Ajouter un appareil",
   "conn.addMouse": "Ajouter une souris",
   "conn.connecting": "Connexion…",
@@ -1190,7 +1188,6 @@ export const fr: Record<I18nKey, string> = {
   "kb.triggerApplied": "Déclenchement mis à jour",
   "kb.triggerAppliedDetail": "Confirmé par le clavier pour {n} touche(s).",
   "kb.triggerFailed": "Impossible de mettre à jour le déclenchement",
-  // New keyboard controls use English until translated.
   "kb.geometry": "Layout style packs",
   "kb.row": "Row",
   "kb.col": "Column",
@@ -1274,4 +1271,60 @@ export const fr: Record<I18nKey, string> = {
   "kb.unavailable": "Not reported",
   "kb.readout": "Sensor ADC counts",
   "kb.multiNote": "Bulk edits use the selected key’s values as the starting point.",
+  "nav.devices": "Appareils",
+  "nav.yourDevices": "Vos appareils",
+  "nav.main": "Principal",
+  "nav.more": "Plus",
+  "home.notConnected": "Non connecté",
+  "home.configure": "Configurer",
+  "home.open": "Ouvrir",
+  "home.keyboard": "Clavier",
+  "home.mouse": "Souris",
+  "home.openHint": "Ouvrez-le pour lire ses réglages",
+  "home.prev": "Appareil précédent",
+  "home.next": "Appareil suivant",
+  "home.subtitle": "Appareils que ce navigateur peut ouvrir. Choisissez-en un pour modifier ses réglages.",
+  "bridge.statusOn": "Bridge connecté",
+  "bridge.statusOff": "Bridge n'est pas lancé",
+  "bridge.body": "Un petit compagnon de bureau qui transmet les rapports de l'appareil à cette page. Il atteint les souris Razer que Chrome bloque désormais et ajoute des profils par jeu et des alertes de batterie faible.",
+  "bridge.download": "Télécharger Bridge",
+  "bridge.statusLabel": "État",
+  "bridge.running": "Lancé",
+  "bridge.notRunning": "Arrêté",
+  "bridge.transport": "Transport",
+  "bridge.latest": "Dernière version",
+  "home.actions": "Options de l'appareil",
+  "home.remove": "Retirer l'appareil",
+  "home.removeTitle": "Retirer {name} ?",
+  "home.removeBody": "OpenMouse oublie cet appareil dans ce navigateur. Les réglages enregistrés dans la souris restent inchangés, et vous pouvez l'ajouter de nouveau à tout moment.",
+  "ctl.deviceForgotten": "Appareil retiré",
+  "ctl.deviceForgetUnsupported": "Les appareils Bridge ne peuvent pas être retirés ici. Débranchez l'appareil ou fermez Bridge.",
+  "bridge.update": "Mise à jour disponible",
+  "bridge.bodyOn": "Bridge est lancé et relaie les rapports de l'appareil vers cette page : souris Razer, profils de jeu et alertes de batterie faible sont disponibles.",
+  "bridge.releaseNotes": "Notes de version",
+  "dev.status": "État de l'appareil",
+  "dev.breadcrumb": "Fil d'Ariane",
+  "ov.sensitivity": "Sensibilité",
+  "ov.stageOf": "Palier {n} sur {total}",
+  "ov.pollingRate": "Taux de rapport",
+  "ov.upTo": "Jusqu'à {v}",
+  "ov.batteryLabel": "Batterie",
+  "ov.onboardProfile": "Profil embarqué",
+  "ov.setupTitle": "Configuration actuelle",
+  "ov.setupMeta": "Lu depuis l'appareil",
+  "ov.stages": "Paliers DPI",
+  "ov.historyTitle": "Batterie dans le temps",
+  "ov.historyMeta": "7 derniers jours, enregistrés dans ce navigateur",
+  "ov.historyEmpty": "Pas encore d'historique",
+  "ov.historyEmptyBody": "OpenMouse enregistre la batterie toutes les 5 minutes tant que cette page est ouverte. Le graphique apparaît après quelques relevés.",
+  "set.subtitle": "L'apparence et le comportement d'OpenMouse dans ce navigateur.",
+  "set.groupAppearance": "Apparence",
+  "set.themeTitle": "Thème",
+  "set.themeBody": "Chaque vignette montre l'app dans ce thème.",
+  "set.groupBehaviour": "Comportement",
+  "set.groupAbout": "À propos",
+  "set.version": "Version",
+  "set.resetBody": "Rétablit le thème, la langue et les interrupteurs de cette page. Les réglages de l'appareil ne changent pas.",
+  "set.resetShort": "Réinitialiser",
+  "help.more": "Autre chose ? La communauté sur Discord répond aux questions, prend les demandes d'appareils et aide avec les bugs.",
 }
diff --git a/src/i18n-ja.ts b/src/i18n/locales/ja.ts
similarity index 95%
rename from src/i18n-ja.ts
rename to src/i18n/locales/ja.ts
index 42f9b2c8..7dfc9922 100644
--- a/src/i18n-ja.ts
+++ b/src/i18n/locales/ja.ts
@@ -1,7 +1,5 @@
-import type { I18nKey } from "./i18n.ts";
+import type { I18nKey } from "../index.ts";
 
-/** Japanese strings, split into a lazy chunk so the initial bundle ships
-    English only. Loaded via ensureLocale() before first use. */
 export const ja: Record<I18nKey, string> = {
   "set.turkish": "Türkçe",
   "luna.angleSnap": "Angle Snap",
@@ -42,6 +40,8 @@ export const ja: Record<I18nKey, string> = {
   "bridge.connected": "接続済み",
   "games.subtitle": "ゲームを選んで専用のマウス設定を作成すると、ゲームの起動時にすぐ適用されます。",
   "games.autoApply": "自動",
+  "games.needsBridgeTitle": "ゲームプロファイルには OpenMouse Bridge が必要です",
+  "games.needsBridgeBody": "Bridge はブラウザと並行して動作し、ゲームの起動を検知してマウスをそのゲームの設定に切り替えます。プロファイルを設定するには Bridge を起動するか、ダウンロードしてください。",
   "games.settings": "設定",
   "games.settingsHint": "このゲームのプロファイルにのみ保存されます。{name} が起動するまでマウスは現在の設定のままで、終了すると元に戻ります。",
   "games.changedCount": "このゲーム用に {n} 件の設定",
@@ -153,7 +153,7 @@ export const ja: Record<I18nKey, string> = {
   "set.title": "設定",
   "set.back": "デバイスに戻る",
   "set.soundTitle": "サウンド",
-  "set.soundDescription": "マウスクリック音と新しい接続音を有効にしてください",
+  "set.soundDescription": "新しい接続や通知のときにチャイムを鳴らす",
   "set.profiles": "プロファイル",
   "set.profileKey": "プロファイルキー",
   "set.profileKeyBody": "このマウスの設定を、同じモデルの別の個体に移せるコピー＆ペースト用のキーです。相手側の設定画面に貼り付けると同じ設定が読み込まれます。",
@@ -269,9 +269,7 @@ export const ja: Record<I18nKey, string> = {
   "wn.body": "アルファ版として登場:OpenMouseデスクトップアプリです。ブラウザのタブを開いたままにせず、インストール可能なアプリとしてOpenMouseを利用できます。ネイティブHIDアクセス、ゲームプロファイル、Webとデスクトップで統一されたインターフェースを搭載。対応プラットフォーム向けのダウンロードはリリースページをご覧ください。",
   "wn.download": "デスクトップ版をダウンロード",
   "wn.close": "また今度",
-  "ai.title": "OpenMouse AI",
   "ai.subtitle": "かんたんな回答とトラブルシューティング",
-  "ai.greeting": "やあ、OpenMouse AIだよ。下のトピックを選んでね。解決を手伝うよ。",
   "ai.topic1": "マウスが接続されない",
   "ai.topic1Ans": "マウス（またはレシーバー）が接続されていて、電源が入っているか確認してね。別のUSBポートや、対応していれば有線接続も試して。LinuxではHIDデバイスノードが読み取り可能か確認して(READMEにudevルールが載ってるよ)。それから［接続］を押して、ブラウザのダイアログでデバイスを選んでね。",
   "ai.topic2": "DPIやポーリングレートが変わらない",
@@ -281,8 +279,8 @@ export const ja: Record<I18nKey, string> = {
   "ai.topic4": "設定が保存されない",
   "ai.topic4Ans": "設定はクラウドではなく、マウスの保存プロファイルに書き込まれてデバイスに適用されるよ。設定を変えたら［適用］を押して、書き込みが終わるまでページを開いたままにして。再起動後も戻ってしまう場合、その設定はこのモデルでは読み取り専用の可能性があるよ。",
   "ai.other": "その他",
-  "ai.otherAns": "大丈夫、OpenMouseのDiscordでコミュニティに聞いてみてね。",
   "ai.joinDiscord": "Discordに参加",
+  "help.faq": "その他の回答",
   "conn.add": "デバイスを追加",
   "conn.addMouse": "マウスを追加",
   "conn.connecting": "接続中…",
@@ -1190,7 +1188,6 @@ export const ja: Record<I18nKey, string> = {
   "kb.triggerApplied": "トリガーを更新しました",
   "kb.triggerAppliedDetail": "{n} 個のキーについてキーボードが確認しました。",
   "kb.triggerFailed": "トリガーを更新できませんでした",
-  // New keyboard controls use English until translated.
   "kb.geometry": "Layout style packs",
   "kb.row": "Row",
   "kb.col": "Column",
@@ -1274,4 +1271,60 @@ export const ja: Record<I18nKey, string> = {
   "kb.unavailable": "Not reported",
   "kb.readout": "Sensor ADC counts",
   "kb.multiNote": "Bulk edits use the selected key’s values as the starting point.",
+  "nav.devices": "デバイス",
+  "nav.yourDevices": "あなたのデバイス",
+  "nav.main": "メイン",
+  "nav.more": "その他",
+  "home.notConnected": "未接続",
+  "home.configure": "設定する",
+  "home.open": "開く",
+  "home.keyboard": "キーボード",
+  "home.mouse": "マウス",
+  "home.openHint": "開くと設定を読み込みます",
+  "home.prev": "前のデバイス",
+  "home.next": "次のデバイス",
+  "home.subtitle": "このブラウザーで開けるデバイスです。選ぶと設定を変更できます。",
+  "bridge.statusOn": "Bridge 接続中",
+  "bridge.statusOff": "Bridge は起動していません",
+  "bridge.body": "このページにデバイスのレポートを中継する小さなデスクトップアプリです。Chrome がブロックするようになった Razer マウスにも届き、ゲーム別プロファイルとバッテリー低下の通知を追加します。",
+  "bridge.download": "Bridge をダウンロード",
+  "bridge.statusLabel": "状態",
+  "bridge.running": "起動中",
+  "bridge.notRunning": "停止中",
+  "bridge.transport": "通信方式",
+  "bridge.latest": "最新リリース",
+  "home.actions": "デバイスのオプション",
+  "home.remove": "デバイスを削除",
+  "home.removeTitle": "{name} を削除しますか？",
+  "home.removeBody": "OpenMouse はこのブラウザーでこのデバイスを忘れます。マウスに保存された設定はそのままで、いつでも再追加できます。",
+  "ctl.deviceForgotten": "デバイスを削除しました",
+  "ctl.deviceForgetUnsupported": "Bridge 経由のデバイスはここでは削除できません。デバイスを外すか Bridge を終了してください。",
+  "bridge.update": "アップデートがあります",
+  "bridge.bodyOn": "Bridge が起動しており、このページにデバイスのレポートを中継しています。Razer マウス、ゲームプロファイル、バッテリー低下通知が使えます。",
+  "bridge.releaseNotes": "リリースノート",
+  "dev.status": "デバイスの状態",
+  "dev.breadcrumb": "パンくずリスト",
+  "ov.sensitivity": "感度",
+  "ov.stageOf": "ステージ {n} / {total}",
+  "ov.pollingRate": "ポーリングレート",
+  "ov.upTo": "最大 {v}",
+  "ov.batteryLabel": "バッテリー",
+  "ov.onboardProfile": "オンボードプロファイル",
+  "ov.setupTitle": "現在の設定",
+  "ov.setupMeta": "デバイスから読み取り",
+  "ov.stages": "DPI ステージ",
+  "ov.historyTitle": "バッテリーの推移",
+  "ov.historyMeta": "過去 7 日間、このブラウザーで記録",
+  "ov.historyEmpty": "まだ履歴がありません",
+  "ov.historyEmptyBody": "このページを開いている間、OpenMouse は 5 分ごとにバッテリーを記録します。数回の記録後にグラフが表示されます。",
+  "set.subtitle": "このブラウザーでの OpenMouse の見た目と動作。",
+  "set.groupAppearance": "外観",
+  "set.themeTitle": "テーマ",
+  "set.themeBody": "各タイルはそのテーマでのアプリを表示します。",
+  "set.groupBehaviour": "動作",
+  "set.groupAbout": "情報",
+  "set.version": "バージョン",
+  "set.resetBody": "このページのテーマ、言語、スイッチを既定に戻します。デバイスの設定は変更されません。",
+  "set.resetShort": "リセット",
+  "help.more": "ほかにお困りですか？Discord のコミュニティが質問への回答、デバイスの要望、不具合の対応を行っています。",
 }
diff --git a/src/i18n-ko.ts b/src/i18n/locales/ko.ts
similarity index 95%
rename from src/i18n-ko.ts
rename to src/i18n/locales/ko.ts
index c964b2ca..73534909 100644
--- a/src/i18n-ko.ts
+++ b/src/i18n/locales/ko.ts
@@ -1,7 +1,5 @@
-import type { I18nKey } from "./i18n.ts";
+import type { I18nKey } from "../index.ts";
 
-/** Korean strings, split into a lazy chunk so the initial bundle ships
-    English only. Loaded via ensureLocale() before first use. */
 export const ko: Record<I18nKey, string> = {
   "set.turkish": "Türkçe",
   "luna.angleSnap": "직선 보정",
@@ -42,6 +40,8 @@ export const ko: Record<I18nKey, string> = {
   "bridge.connected": "연결됨",
   "games.subtitle": "게임을 선택해 전용 마우스 설정을 지정하면 게임이 실행되는 즉시 적용됩니다.",
   "games.autoApply": "자동",
+  "games.needsBridgeTitle": "게임 프로필에는 OpenMouse Bridge가 필요합니다",
+  "games.needsBridgeBody": "Bridge는 브라우저 옆에서 실행되며, 게임이 시작되면 이를 감지해 마우스를 해당 게임의 설정으로 전환합니다. 프로필을 만들려면 Bridge를 실행하거나 다운로드하세요.",
   "games.settings": "설정",
   "games.settingsHint": "이 게임의 프로필에만 저장됩니다. {name}이(가) 실행될 때까지 마우스는 현재 설정을 유지하고, 종료되면 원래 설정으로 돌아갑니다.",
   "games.changedCount": "이 게임에 설정된 항목 {n}개",
@@ -153,7 +153,7 @@ export const ko: Record<I18nKey, string> = {
   "set.title": "설정",
   "set.back": "장치로 돌아가기",
   "set.soundTitle": "사운드",
-  "set.soundDescription": "마우스 클릭 소리나 새 연결 소리 같은 소리를 활성화하세요.",
+  "set.soundDescription": "새 연결과 알림에 알림음 재생",
   "set.profiles": "프로필",
   "set.profileKey": "프로필 키",
   "set.profileKeyBody": "이 마우스의 설정을 같은 모델의 다른 기기로 옮길 수 있는 복사용 키입니다. 그쪽 설정에 붙여넣으면 동일한 설정을 불러올 수 있습니다.",
@@ -269,9 +269,7 @@ export const ko: Record<I18nKey, string> = {
   "wn.body": "알파 버전으로 제공되는 OpenMouse 데스크톱 앱을 만나보세요. 브라우저 탭을 열어두지 않고 설치형 앱으로 OpenMouse를 실행하세요. 네이티브 HID 액세스, 게임 프로필, 웹과 데스크톱에서 동일한 통합 인터페이스를 제공합니다. 각 플랫폼용 다운로드는 릴리스 페이지에서 확인하세요.",
   "wn.download": "데스크톱용 다운로드",
   "wn.close": "나중에",
-  "ai.title": "OpenMouse AI",
   "ai.subtitle": "빠른 답변과 문제 해결",
-  "ai.greeting": "안녕하세요! 저는 OpenMouse AI예요. 아래 주제를 골라 주시면 도와드릴게요.",
   "ai.topic1": "마우스가 연결되지 않아요",
   "ai.topic1Ans": "마우스(또는 수신기)가 꽂혀 있고 전원이 켜져 있는지 확인해 주세요. 다른 USB 포트를 쓰거나, 지원된다면 유선으로 연결해 보세요. Linux에서는 HID 디바이스 노드가 읽을 수 있는지 확인하세요(README에 udev 규칙이 있습니다). 그런 다음 연결을 누르고 브라우저 창에서 디바이스를 선택하세요.",
   "ai.topic2": "DPI나 폴링 레이트가 바뀌지 않아요",
@@ -281,8 +279,8 @@ export const ko: Record<I18nKey, string> = {
   "ai.topic4": "설정이 저장되지 않아요",
   "ai.topic4Ans": "설정은 클라우드가 아니라 마우스의 저장된 프로필에 기록되고 기기에서 적용됩니다. 설정을 바꾼 뒤 적용을 누르고 쓰기가 끝날 때까지 페이지를 열어 두세요. 재시작 후에도 되돌아간다면 그 설정은 이 모델에서 읽기 전용일 수 있어요.",
   "ai.other": "다른 문제",
-  "ai.otherAns": "걱정 마세요. OpenMouse Discord에 가면 커뮤니티가 도와드릴 거예요.",
   "ai.joinDiscord": "Discord 참여",
+  "help.faq": "더 많은 답변",
   "conn.add": "장치 추가",
   "conn.addMouse": "마우스 추가",
   "conn.connecting": "연결 중…",
@@ -1190,7 +1188,6 @@ export const ko: Record<I18nKey, string> = {
   "kb.triggerApplied": "트리거 업데이트됨",
   "kb.triggerAppliedDetail": "{n}개 키에 대해 키보드가 확인했습니다.",
   "kb.triggerFailed": "트리거를 업데이트할 수 없습니다",
-  // New keyboard controls use English until translated.
   "kb.geometry": "Layout style packs",
   "kb.row": "Row",
   "kb.col": "Column",
@@ -1274,4 +1271,60 @@ export const ko: Record<I18nKey, string> = {
   "kb.unavailable": "Not reported",
   "kb.readout": "Sensor ADC counts",
   "kb.multiNote": "Bulk edits use the selected key’s values as the starting point.",
+  "nav.devices": "장치",
+  "nav.yourDevices": "내 장치",
+  "nav.main": "메인",
+  "nav.more": "더 보기",
+  "home.notConnected": "연결되지 않음",
+  "home.configure": "설정",
+  "home.open": "열기",
+  "home.keyboard": "키보드",
+  "home.mouse": "마우스",
+  "home.openHint": "열어서 설정 읽기",
+  "home.prev": "이전 장치",
+  "home.next": "다음 장치",
+  "home.subtitle": "이 브라우저에서 열 수 있는 장치입니다. 하나를 골라 설정을 바꾸세요.",
+  "bridge.statusOn": "Bridge 연결됨",
+  "bridge.statusOff": "Bridge 실행 안 됨",
+  "bridge.body": "이 페이지로 장치 보고를 전달하는 작은 데스크톱 도우미입니다. Chrome이 이제 막는 Razer 마우스에도 접근하고, 게임별 프로필과 배터리 부족 알림을 추가합니다.",
+  "bridge.download": "Bridge 다운로드",
+  "bridge.statusLabel": "상태",
+  "bridge.running": "실행 중",
+  "bridge.notRunning": "중지됨",
+  "bridge.transport": "전송 방식",
+  "bridge.latest": "최신 릴리스",
+  "home.actions": "장치 옵션",
+  "home.remove": "장치 제거",
+  "home.removeTitle": "{name}을(를) 제거할까요?",
+  "home.removeBody": "OpenMouse가 이 브라우저에서 이 장치를 잊습니다. 마우스에 저장된 설정은 그대로 유지되며 언제든 다시 추가할 수 있습니다.",
+  "ctl.deviceForgotten": "장치를 제거했습니다",
+  "ctl.deviceForgetUnsupported": "Bridge 장치는 여기서 제거할 수 없습니다. 장치를 분리하거나 Bridge를 종료하세요.",
+  "bridge.update": "업데이트 가능",
+  "bridge.bodyOn": "Bridge가 실행 중이며 이 페이지로 장치 보고를 전달하고 있어 Razer 마우스, 게임 프로필, 배터리 부족 알림을 사용할 수 있습니다.",
+  "bridge.releaseNotes": "릴리스 노트",
+  "dev.status": "장치 상태",
+  "dev.breadcrumb": "탐색 경로",
+  "ov.sensitivity": "감도",
+  "ov.stageOf": "{total}단계 중 {n}단계",
+  "ov.pollingRate": "폴링 레이트",
+  "ov.upTo": "최대 {v}",
+  "ov.batteryLabel": "배터리",
+  "ov.onboardProfile": "온보드 프로필",
+  "ov.setupTitle": "현재 설정",
+  "ov.setupMeta": "장치에서 읽음",
+  "ov.stages": "DPI 단계",
+  "ov.historyTitle": "배터리 변화",
+  "ov.historyMeta": "최근 7일, 이 브라우저에 기록됨",
+  "ov.historyEmpty": "아직 기록 없음",
+  "ov.historyEmptyBody": "이 페이지가 열려 있는 동안 OpenMouse가 5분마다 배터리를 기록합니다. 몇 번 기록되면 차트가 나타납니다.",
+  "set.subtitle": "이 브라우저에서 OpenMouse의 모양과 동작입니다.",
+  "set.groupAppearance": "모양",
+  "set.themeTitle": "테마",
+  "set.themeBody": "각 타일은 해당 테마의 앱 모습을 보여 줍니다.",
+  "set.groupBehaviour": "동작",
+  "set.groupAbout": "정보",
+  "set.version": "버전",
+  "set.resetBody": "이 페이지의 테마, 언어, 스위치를 기본값으로 되돌립니다. 장치 설정은 바뀌지 않습니다.",
+  "set.resetShort": "재설정",
+  "help.more": "다른 문제가 있나요? Discord 커뮤니티에서 질문 답변, 장치 요청, 버그 해결을 도와줍니다.",
 }
diff --git a/src/i18n-pt.ts b/src/i18n/locales/pt.ts
similarity index 94%
rename from src/i18n-pt.ts
rename to src/i18n/locales/pt.ts
index 133734c9..6e67ec20 100644
--- a/src/i18n-pt.ts
+++ b/src/i18n/locales/pt.ts
@@ -1,7 +1,5 @@
-import type { I18nKey } from "./i18n.ts";
+import type { I18nKey } from "../index.ts";
 
-/** Portuguese strings, split into a lazy chunk so the initial bundle
-    ships English only. Loaded via ensureLocale() before first use. */
 export const pt: Record<I18nKey, string> = {
   "set.turkish": "Türkçe",
   "luna.angleSnap": "Correção de linha reta",
@@ -42,6 +40,8 @@ export const pt: Record<I18nKey, string> = {
   "bridge.connected": "Conectado",
   "games.subtitle": "Escolha um jogo para dar a ele suas próprias configurações de mouse — elas são aplicadas assim que o jogo abre.",
   "games.autoApply": "Auto",
+  "games.needsBridgeTitle": "Os perfis de jogo precisam do OpenMouse Bridge",
+  "games.needsBridgeBody": "O Bridge roda ao lado do seu navegador, percebe quando um jogo começa e muda o seu mouse para as configurações desse jogo. Inicie o Bridge, ou baixe-o, para criar um perfil.",
   "games.settings": "Configurações",
   "games.settingsHint": "Salvo só no perfil deste jogo. Seu mouse mantém as configurações atuais até {name} abrir e volta a elas quando ele fecha.",
   "games.changedCount": "Configurações próprias deste jogo: {n}",
@@ -153,7 +153,7 @@ export const pt: Record<I18nKey, string> = {
   "set.title": "Configurações",
   "set.back": "Voltar ao dispositivo",
   "set.soundTitle": "Som",
-  "set.soundDescription": "Ativar sons como cliques do rato e novas ligações",
+  "set.soundDescription": "Tocar um aviso sonoro em novas conexões e alertas",
   "set.profiles": "PERFIS",
   "set.profileKey": "Chave de perfil",
   "set.profileKeyBody": "Uma chave de copiar e colar que leva as configurações deste mouse para outra unidade do mesmo modelo. Cole-a nas Configurações de lá para carregar o mesmo setup.",
@@ -269,9 +269,7 @@ export const pt: Record<I18nKey, string> = {
   "wn.body": "Agora disponível em alpha: o aplicativo de desktop do OpenMouse. Use o OpenMouse como um app instalável — sem precisar manter uma aba do navegador aberta. Ele inclui acesso HID nativo, perfis de jogo e uma interface unificada entre web e desktop. Acesse nossa página de versões para baixar para sua plataforma.",
   "wn.download": "Baixar para desktop",
   "wn.close": "Talvez mais tarde",
-  "ai.title": "OpenMouse AI",
   "ai.subtitle": "Respostas rápidas e solução de problemas",
-  "ai.greeting": "Olá! Eu sou o OpenMouse AI. Escolha um tópico abaixo e eu te ajudo a resolver.",
   "ai.topic1": "Meu mouse não conecta",
   "ai.topic1Ans": "Verifique se o mouse está plugado (ou o receptor) e ligado. Tente outra porta USB ou, se o mouse suportar, uma conexão com fio. No Linux, confira se os nós de dispositivos HID estão legíveis — o README lista as regras do udev. Depois, pressione Conectar e escolha o dispositivo no diálogo do navegador.",
   "ai.topic2": "DPI ou taxa de polling não muda",
@@ -281,8 +279,8 @@ export const pt: Record<I18nKey, string> = {
   "ai.topic4": "Minhas configurações não estão salvando",
   "ai.topic4Ans": "As configurações são gravadas no perfil armazenado do mouse e aplicadas no dispositivo, não na nuvem. Depois de alterar uma config, pressione Aplicar e deixe a página aberta até a gravação terminar. Se ainda reverter após reiniciar, essa configuração pode ser somente leitura no seu modelo.",
   "ai.other": "Outra coisa",
-  "ai.otherAns": "Sem problema — passe no Discord do OpenMouse e a comunidade vai te ajudar.",
   "ai.joinDiscord": "Entrar no Discord",
+  "help.faq": "Mais respostas",
   "conn.add": "Adicionar dispositivo",
   "conn.addMouse": "Adicionar mouse",
   "conn.connecting": "Conectando…",
@@ -1190,7 +1188,6 @@ export const pt: Record<I18nKey, string> = {
   "kb.triggerApplied": "Gatilho atualizado",
   "kb.triggerAppliedDetail": "Confirmado pelo teclado para {n} tecla(s).",
   "kb.triggerFailed": "Não foi possível atualizar o gatilho",
-  // New keyboard controls use English until translated.
   "kb.geometry": "Layout style packs",
   "kb.row": "Row",
   "kb.col": "Column",
@@ -1274,4 +1271,60 @@ export const pt: Record<I18nKey, string> = {
   "kb.unavailable": "Not reported",
   "kb.readout": "Sensor ADC counts",
   "kb.multiNote": "Bulk edits use the selected key’s values as the starting point.",
+  "nav.devices": "Dispositivos",
+  "nav.yourDevices": "Seus dispositivos",
+  "nav.main": "Principal",
+  "nav.more": "Mais",
+  "home.notConnected": "Não conectado",
+  "home.configure": "Configurar",
+  "home.open": "Abrir",
+  "home.keyboard": "Teclado",
+  "home.mouse": "Mouse",
+  "home.openHint": "Abra para ler as configurações",
+  "home.prev": "Dispositivo anterior",
+  "home.next": "Próximo dispositivo",
+  "home.subtitle": "Dispositivos que este navegador pode abrir. Escolha um para mudar as configurações.",
+  "bridge.statusOn": "Bridge conectado",
+  "bridge.statusOff": "Bridge não está em execução",
+  "bridge.body": "Um pequeno aplicativo para desktop que transporta os relatórios do dispositivo para esta página. Ele alcança mouses Razer que o Chrome agora bloqueia e adiciona perfis por jogo e alertas de bateria fraca.",
+  "bridge.download": "Baixar Bridge",
+  "bridge.statusLabel": "Status",
+  "bridge.running": "Em execução",
+  "bridge.notRunning": "Parado",
+  "bridge.transport": "Transporte",
+  "bridge.latest": "Versão mais recente",
+  "home.actions": "Opções do dispositivo",
+  "home.remove": "Remover dispositivo",
+  "home.removeTitle": "Remover {name}?",
+  "home.removeBody": "O OpenMouse esquece este dispositivo neste navegador. As configurações salvas no mouse continuam como estão, e você pode adicioná-lo de novo quando quiser.",
+  "ctl.deviceForgotten": "Dispositivo removido",
+  "ctl.deviceForgetUnsupported": "Dispositivos do Bridge não podem ser removidos aqui. Desconecte o dispositivo ou feche o Bridge.",
+  "bridge.update": "Atualização disponível",
+  "bridge.bodyOn": "O Bridge está em execução e leva os relatórios do dispositivo para esta página, então mouses Razer, perfis de jogo e alertas de bateria fraca estão disponíveis.",
+  "bridge.releaseNotes": "Notas da versão",
+  "dev.status": "Status do dispositivo",
+  "dev.breadcrumb": "Navegação",
+  "ov.sensitivity": "Sensibilidade",
+  "ov.stageOf": "Estágio {n} de {total}",
+  "ov.pollingRate": "Taxa de polling",
+  "ov.upTo": "Até {v}",
+  "ov.batteryLabel": "Bateria",
+  "ov.onboardProfile": "Perfil interno",
+  "ov.setupTitle": "Configuração atual",
+  "ov.setupMeta": "Lido do dispositivo",
+  "ov.stages": "Estágios de DPI",
+  "ov.historyTitle": "Bateria ao longo do tempo",
+  "ov.historyMeta": "Últimos 7 dias, registrados neste navegador",
+  "ov.historyEmpty": "Ainda sem histórico",
+  "ov.historyEmptyBody": "O OpenMouse registra a bateria a cada 5 minutos enquanto esta página está aberta. O gráfico aparece após algumas leituras.",
+  "set.subtitle": "Como o OpenMouse aparece e se comporta neste navegador.",
+  "set.groupAppearance": "Aparência",
+  "set.themeTitle": "Tema",
+  "set.themeBody": "Cada bloco mostra o app nesse tema.",
+  "set.groupBehaviour": "Comportamento",
+  "set.groupAbout": "Sobre",
+  "set.version": "Versão",
+  "set.resetBody": "Restaura o tema, o idioma e os interruptores desta página para o padrão. As configurações do dispositivo não são alteradas.",
+  "set.resetShort": "Redefinir",
+  "help.more": "Outra coisa? A comunidade no Discord responde perguntas, recebe pedidos de dispositivos e ajuda com bugs.",
 }
diff --git a/src/i18n-ru.ts b/src/i18n/locales/ru.ts
similarity index 94%
rename from src/i18n-ru.ts
rename to src/i18n/locales/ru.ts
index 6efb91b7..e3e6c766 100644
--- a/src/i18n-ru.ts
+++ b/src/i18n/locales/ru.ts
@@ -1,7 +1,5 @@
-import type { I18nKey } from "./i18n.ts";
+import type { I18nKey } from "../index.ts";
 
-/** Russian strings, split into a lazy chunk so the initial bundle ships
-    English only. Loaded via ensureLocale() before first use. */
 export const ru: Record<I18nKey, string> = {
   "set.turkish": "Türkçe",
   "luna.angleSnap": "Коррекция прямой линии",
@@ -42,6 +40,8 @@ export const ru: Record<I18nKey, string> = {
   "bridge.connected": "Подключено",
   "games.subtitle": "Выберите игру, чтобы задать ей собственные настройки мыши — они применяются сразу при запуске игры.",
   "games.autoApply": "Авто",
+  "games.needsBridgeTitle": "Для игровых профилей нужен OpenMouse Bridge",
+  "games.needsBridgeBody": "Bridge работает рядом с браузером, замечает запуск игры и переключает мышь на настройки этой игры. Запустите Bridge или скачайте его, чтобы создать профиль.",
   "games.settings": "Настройки",
   "games.settingsHint": "Сохраняется только в профиле этой игры. Мышь сохраняет текущие настройки до запуска {name} и возвращается к ним после закрытия.",
   "games.changedCount": "Настроек для этой игры: {n}",
@@ -153,7 +153,7 @@ export const ru: Record<I18nKey, string> = {
   "set.title": "Настройки",
   "set.back": "Назад к устройству",
   "set.soundTitle": "Звук",
-  "set.soundDescription": "Включите звуки, такие как щелчки мыши и новые соединения.",
+  "set.soundDescription": "Звуковой сигнал при новых подключениях и уведомлениях",
   "set.profiles": "ПРОФИЛИ",
   "set.profileKey": "Ключ профиля",
   "set.profileKeyBody": "Ключ для копирования: переносит настройки этой мыши на другую такой же модели. Вставьте его в Настройках там, чтобы получить ту же конфигурацию.",
@@ -268,9 +268,7 @@ export const ru: Record<I18nKey, string> = {
   "wn.body": "Теперь доступно в альфа-версии: десктопное приложение OpenMouse. Используйте OpenMouse как устанавливаемое приложение — без необходимости держать вкладку браузера открытой. Оно включает нативный доступ к HID, игровые профили и единый интерфейс для веб-версии и десктопа. Загрузите его для своей платформы на странице релизов.",
   "wn.download": "Скачать для десктопа",
   "wn.close": "Может, позже",
-  "ai.title": "OpenMouse AI",
   "ai.subtitle": "Быстрые ответы и устранение неполадок",
-  "ai.greeting": "Привет! Я OpenMouse AI. Выбери тему ниже — помогу разобраться.",
   "ai.topic1": "Мышь не подключается",
   "ai.topic1Ans": "Убедись, что мышь (или её приёмник) подключена и включена. Попробуй другой USB-порт или проводное соединение, если мышь его поддерживает. В Linux проверь, что узлы HID-устройств читаемы — правила udev перечислены в README. Затем нажми «Подключить» и выбери устройство в окне браузера.",
   "ai.topic2": "DPI или частота опроса не меняются",
@@ -280,8 +278,8 @@ export const ru: Record<I18nKey, string> = {
   "ai.topic4": "Мои настройки не сохраняются",
   "ai.topic4Ans": "Настройки записываются в сохранённый профиль мыши и применяются на устройстве, а не в облаке. После изменения настройки нажми «Применить» и держи страницу открытой, пока запись не завершится. Если после перезапуска всё равно откатывается, настройка может быть только для чтения в твоей модели.",
   "ai.other": "Что-то другое",
-  "ai.otherAns": "Не страшно — загляни в Discord OpenMouse, и сообщество поможет.",
   "ai.joinDiscord": "Присоединиться к Discord",
+  "help.faq": "Больше ответов",
   "conn.add": "Добавить устройство",
   "conn.addMouse": "Добавить мышь",
   "conn.connecting": "Подключение…",
@@ -1190,7 +1188,6 @@ export const ru: Record<I18nKey, string> = {
   "kb.triggerApplied": "Срабатывание обновлено",
   "kb.triggerAppliedDetail": "Клавиатура подтвердила для {n} клавиш(и).",
   "kb.triggerFailed": "Не удалось обновить срабатывание",
-  // New keyboard controls use English until translated.
   "kb.geometry": "Layout style packs",
   "kb.row": "Row",
   "kb.col": "Column",
@@ -1274,4 +1271,60 @@ export const ru: Record<I18nKey, string> = {
   "kb.unavailable": "Not reported",
   "kb.readout": "Sensor ADC counts",
   "kb.multiNote": "Bulk edits use the selected key’s values as the starting point.",
+  "nav.devices": "Устройства",
+  "nav.yourDevices": "Ваши устройства",
+  "nav.main": "Главное",
+  "nav.more": "Ещё",
+  "home.notConnected": "Не подключено",
+  "home.configure": "Настроить",
+  "home.open": "Открыть",
+  "home.keyboard": "Клавиатура",
+  "home.mouse": "Мышь",
+  "home.openHint": "Откройте, чтобы прочитать настройки",
+  "home.prev": "Предыдущее устройство",
+  "home.next": "Следующее устройство",
+  "home.subtitle": "Устройства, которые может открыть этот браузер. Выберите одно, чтобы изменить настройки.",
+  "bridge.statusOn": "Bridge подключён",
+  "bridge.statusOff": "Bridge не запущен",
+  "bridge.body": "Небольшое приложение для компьютера, которое передаёт отчёты устройства этой странице. Оно открывает доступ к мышам Razer, которые теперь блокирует Chrome, и добавляет профили для игр и предупреждения о низком заряде.",
+  "bridge.download": "Скачать Bridge",
+  "bridge.statusLabel": "Статус",
+  "bridge.running": "Запущен",
+  "bridge.notRunning": "Не запущен",
+  "bridge.transport": "Транспорт",
+  "bridge.latest": "Последний выпуск",
+  "home.actions": "Параметры устройства",
+  "home.remove": "Удалить устройство",
+  "home.removeTitle": "Удалить {name}?",
+  "home.removeBody": "OpenMouse забудет это устройство в этом браузере. Настройки, сохранённые в мыши, не изменятся, и вы сможете добавить её снова в любой момент.",
+  "ctl.deviceForgotten": "Устройство удалено",
+  "ctl.deviceForgetUnsupported": "Устройства Bridge нельзя удалить здесь. Отключите устройство или закройте Bridge.",
+  "bridge.update": "Доступно обновление",
+  "bridge.bodyOn": "Bridge запущен и передаёт отчёты устройства этой странице, поэтому доступны мыши Razer, игровые профили и уведомления о низком заряде.",
+  "bridge.releaseNotes": "Примечания к выпуску",
+  "dev.status": "Состояние устройства",
+  "dev.breadcrumb": "Навигация",
+  "ov.sensitivity": "Чувствительность",
+  "ov.stageOf": "Ступень {n} из {total}",
+  "ov.pollingRate": "Частота опроса",
+  "ov.upTo": "До {v}",
+  "ov.batteryLabel": "Батарея",
+  "ov.onboardProfile": "Встроенный профиль",
+  "ov.setupTitle": "Текущая настройка",
+  "ov.setupMeta": "Прочитано с устройства",
+  "ov.stages": "Ступени DPI",
+  "ov.historyTitle": "Заряд со временем",
+  "ov.historyMeta": "Последние 7 дней, записано в этом браузере",
+  "ov.historyEmpty": "Истории пока нет",
+  "ov.historyEmptyBody": "OpenMouse записывает заряд каждые 5 минут, пока страница открыта. График появится после нескольких замеров.",
+  "set.subtitle": "Как OpenMouse выглядит и работает в этом браузере.",
+  "set.groupAppearance": "Внешний вид",
+  "set.themeTitle": "Тема",
+  "set.themeBody": "Каждая плитка показывает приложение в этой теме.",
+  "set.groupBehaviour": "Поведение",
+  "set.groupAbout": "О программе",
+  "set.version": "Версия",
+  "set.resetBody": "Возвращает тему, язык и переключатели на этой странице к значениям по умолчанию. Настройки устройства не меняются.",
+  "set.resetShort": "Сбросить",
+  "help.more": "Что-то ещё? Сообщество в Discord отвечает на вопросы, принимает запросы устройств и помогает с ошибками.",
 }
diff --git a/src/i18n-tr-extra.ts b/src/i18n/locales/tr-extra.ts
similarity index 100%
rename from src/i18n-tr-extra.ts
rename to src/i18n/locales/tr-extra.ts
diff --git a/src/i18n-tr.ts b/src/i18n/locales/tr.ts
similarity index 95%
rename from src/i18n-tr.ts
rename to src/i18n/locales/tr.ts
index aceda93a..ab6504dc 100644
--- a/src/i18n-tr.ts
+++ b/src/i18n/locales/tr.ts
@@ -1,6 +1,5 @@
-import type { I18nKey } from "./i18n.ts";
+import type { I18nKey } from "../index.ts";
 
-/** Turkish strings, loaded on demand via ensureLocale(). */
 export const tr: Record<I18nKey, string> = {
   "luna.angleSnap": "Düz çizgi düzeltme",
   "luna.competitiveMode": "Rekabetçi mod",
@@ -40,6 +39,8 @@ export const tr: Record<I18nKey, string> = {
   "bridge.connected": "Bağlı",
   "games.subtitle": "Bir oyun seçip ona özel fare ayarları oluşturun. Ayarlar, oyun açıldığında uygulanır.",
   "games.autoApply": "Otomatik",
+  "games.needsBridgeTitle": "Oyun profilleri için OpenMouse Bridge gerekir",
+  "games.needsBridgeBody": "Bridge tarayıcınızın yanında çalışır, bir oyun başladığında bunu fark eder ve farenizi o oyunun ayarlarına geçirir. Profil oluşturmak için Bridge'i başlatın veya indirin.",
   "games.settings": "Ayarlar",
   "games.settingsHint": "Yalnızca bu oyunun profiline kaydedilir. Fareniz, {name} açılana kadar mevcut ayarlarını korur; oyun kapandığında bu ayarlara geri döner.",
   "games.changedCount": "Bu oyuna özel ayarlar: {n}",
@@ -161,7 +162,7 @@ export const tr: Record<I18nKey, string> = {
   "set.importPlaceholder": "Profil anahtarını buraya yapıştırın…",
   "set.import": "İçe aktar",
   "set.soundTitle": "Ses",
-  "set.soundDescription": "Fare tıklaması ve yeni bağlantı gibi sesleri etkinleştir",
+  "set.soundDescription": "Yeni bağlantılarda ve uyarılarda bir zil sesi çal",
   "set.importNote": "İçe aktarılan ayarlar diğer değişiklikler gibi beklemeye alınır. Cihaza yazana kadar hiçbir ayar kaydedilmez.",
   "set.appearance": "GÖRÜNÜM",
   "set.accentTheme": "Vurgu teması",
@@ -256,9 +257,7 @@ export const tr: Record<I18nKey, string> = {
   "wn.body": "OpenMouse masaüstü uygulamasının alfa sürümü artık hazır. OpenMouse'u kurulabilir bir uygulamayla kullanın; tarayıcı sekmesini açık tutmanız gerekmez. Yerel HID erişimi, oyun profilleri ve web ile masaüstünde ortak arayüz sunar. Platformunuza uygun sürümü indirmek için sürüm sayfamızı ziyaret edin.",
   "wn.download": "Masaüstü için indir",
   "wn.close": "Daha sonra",
-  "ai.title": "OpenMouse AI",
   "ai.subtitle": "Hızlı yanıtlar ve sorun giderme",
-  "ai.greeting": "Merhaba! Ben OpenMouse AI. Aşağıdan bir konu seçin, sorunu çözmenize yardımcı olayım.",
   "ai.topic1": "Farem bağlanmıyor",
   "ai.topic1Ans": "Farenizin veya alıcısının takılı ve farenin açık olduğundan emin olun. Farklı bir USB bağlantı noktası deneyin veya fareniz destekliyorsa kabloyla bağlayın. Linux'ta HID cihaz düğümlerinin okunabilir olduğunu kontrol edin; udev kuralları README'de listelenir. Ardından Bağlan'a basıp tarayıcı penceresinden cihazınızı seçin.",
   "ai.topic2": "DPI veya yoklama hızı değişmiyor",
@@ -268,8 +267,8 @@ export const tr: Record<I18nKey, string> = {
   "ai.topic4": "Ayarlarım kaydedilmiyor",
   "ai.topic4Ans": "Ayarlar buluta değil, farenin belleğindeki profile yazılır ve cihazda uygulanır. Bir ayarı değiştirdikten sonra Uygula'ya basıp yazma bitene kadar sayfayı açık tutun. Yeniden başlatınca eski haline dönüyorsa bu ayar modelinizde salt okunur olabilir.",
   "ai.other": "Başka bir sorun",
-  "ai.otherAns": "OpenMouse Discord sunucusuna katılın; topluluk size yardımcı olur.",
   "ai.joinDiscord": "Discord'a katıl",
+  "help.faq": "Daha fazla yanıt",
   "conn.add": "Cihaz ekle",
   "conn.addMouse": "Fare ekle",
   "conn.connecting": "Bağlanıyor…",
@@ -1270,4 +1269,60 @@ export const tr: Record<I18nKey, string> = {
   "page.ko": "한국어",
   "page.ru": "РУС",
   "set.turkish": "Türkçe",
+  "nav.devices": "Cihazlar",
+  "nav.yourDevices": "Cihazların",
+  "nav.main": "Ana menü",
+  "nav.more": "Daha fazla",
+  "home.notConnected": "Bağlı değil",
+  "home.configure": "Yapılandır",
+  "home.open": "Aç",
+  "home.keyboard": "Klavye",
+  "home.mouse": "Fare",
+  "home.openHint": "Ayarlarını okumak için aç",
+  "home.prev": "Önceki cihaz",
+  "home.next": "Sonraki cihaz",
+  "home.subtitle": "Bu tarayıcının açabildiği cihazlar. Ayarlarını değiştirmek için birini seç.",
+  "bridge.statusOn": "Bridge bağlı",
+  "bridge.statusOff": "Bridge çalışmıyor",
+  "bridge.body": "Cihaz raporlarını bu sayfaya taşıyan küçük bir masaüstü yardımcısı. Chrome'un artık engellediği Razer farelerine erişir, oyun başına profiller ve düşük pil uyarıları ekler.",
+  "bridge.download": "Bridge'i indir",
+  "bridge.statusLabel": "Durum",
+  "bridge.running": "Çalışıyor",
+  "bridge.notRunning": "Çalışmıyor",
+  "bridge.transport": "Aktarım",
+  "bridge.latest": "Son sürüm",
+  "home.actions": "Cihaz seçenekleri",
+  "home.remove": "Cihazı kaldır",
+  "home.removeTitle": "{name} kaldırılsın mı?",
+  "home.removeBody": "OpenMouse bu cihazı bu tarayıcıda unutur. Farede kayıtlı ayarlar olduğu gibi kalır ve istediğin zaman yeniden ekleyebilirsin.",
+  "ctl.deviceForgotten": "Cihaz kaldırıldı",
+  "ctl.deviceForgetUnsupported": "Bridge cihazları buradan kaldırılamaz. Cihazı çıkar veya Bridge'i kapat.",
+  "bridge.update": "Güncelleme var",
+  "bridge.bodyOn": "Bridge çalışıyor ve bu sayfaya cihaz raporlarını taşıyor; Razer fareler, oyun profilleri ve düşük pil uyarıları kullanılabilir.",
+  "bridge.releaseNotes": "Sürüm notları",
+  "dev.status": "Cihaz durumu",
+  "dev.breadcrumb": "Gezinti yolu",
+  "ov.sensitivity": "Hassasiyet",
+  "ov.stageOf": "Kademe {n} / {total}",
+  "ov.pollingRate": "Yoklama hızı",
+  "ov.upTo": "En fazla {v}",
+  "ov.batteryLabel": "Pil",
+  "ov.onboardProfile": "Dahili profil",
+  "ov.setupTitle": "Güncel kurulum",
+  "ov.setupMeta": "Cihazdan okundu",
+  "ov.stages": "DPI kademeleri",
+  "ov.historyTitle": "Zaman içinde pil",
+  "ov.historyMeta": "Son 7 gün, bu tarayıcıda kaydedildi",
+  "ov.historyEmpty": "Henüz geçmiş yok",
+  "ov.historyEmptyBody": "OpenMouse bu sayfa açıkken pili 5 dakikada bir kaydeder. Grafik birkaç okumadan sonra görünür.",
+  "set.subtitle": "OpenMouse'un bu tarayıcıdaki görünümü ve davranışı.",
+  "set.groupAppearance": "Görünüm",
+  "set.themeTitle": "Tema",
+  "set.themeBody": "Her kutu uygulamayı o temada gösterir.",
+  "set.groupBehaviour": "Davranış",
+  "set.groupAbout": "Hakkında",
+  "set.version": "Sürüm",
+  "set.resetBody": "Bu sayfadaki tema, dil ve anahtarları varsayılana döndürür. Cihaz ayarları değişmez.",
+  "set.resetShort": "Sıfırla",
+  "help.more": "Başka bir şey mi? Discord topluluğu soruları yanıtlar, cihaz isteklerini alır ve hatalarda yardım eder.",
 };
diff --git a/src/i18n-vi.ts b/src/i18n/locales/vi.ts
similarity index 95%
rename from src/i18n-vi.ts
rename to src/i18n/locales/vi.ts
index 05cb3745..2e0d7f36 100644
--- a/src/i18n-vi.ts
+++ b/src/i18n/locales/vi.ts
@@ -1,7 +1,5 @@
-import type { I18nKey } from "./i18n";
+import type { I18nKey } from "../index";
 
-/** Vietnamese strings, split into a lazy chunk so the initial bundle
-    ships English only. Loaded via ensureLocale() before first use. */
 export const vi: Record<I18nKey, string> = {
   "set.turkish": "Türkçe",
   "luna.angleSnap": "Hiệu chỉnh đường thẳng",
@@ -42,6 +40,8 @@ export const vi: Record<I18nKey, string> = {
   "bridge.connected": "Đã kết nối",
   "games.subtitle": "Chọn một trò chơi để đặt cài đặt chuột riêng — chúng được áp dụng ngay khi trò chơi khởi động.",
   "games.autoApply": "Tự động",
+  "games.needsBridgeTitle": "Hồ sơ trò chơi cần OpenMouse Bridge",
+  "games.needsBridgeBody": "Bridge chạy cạnh trình duyệt, nhận biết khi trò chơi bắt đầu và chuyển chuột sang cài đặt của trò chơi đó. Hãy khởi động Bridge hoặc tải về để tạo hồ sơ.",
   "games.settings": "Cài đặt",
   "games.settingsHint": "Chỉ lưu vào hồ sơ của trò chơi này. Chuột giữ cài đặt hiện tại cho đến khi {name} khởi động và trở lại như cũ khi trò chơi đóng.",
   "games.changedCount": "Cài đặt riêng cho trò chơi này: {n}",
@@ -105,7 +105,7 @@ export const vi: Record<I18nKey, string> = {
   "set.title": "Cài đặt",
   "set.back": "Quay lại thiết bị",
   "set.soundTitle": "Âm thanh",
-  "set.soundDescription": "Bật các âm thanh như nhấp chuột và kết nối mới",
+  "set.soundDescription": "Phát âm báo khi có kết nối mới và cảnh báo",
   "set.profiles": "PROFILES",
   "set.profileKey": "Mã profile",
   "set.profileKeyBody": "Một mã có thể sao chép và dán để mang cài đặt của chuột này sang một thiết bị khác cùng model. Dán mã đó vào phần Cài đặt trên thiết bị kia để tải cùng cấu hình.",
@@ -221,9 +221,7 @@ export const vi: Record<I18nKey, string> = {
   "wn.download": "Tải bản desktop",
   "wn.close": "Để sau",
 
-  "ai.title": "OpenMouse AI",
   "ai.subtitle": "Trả lời nhanh & khắc phục sự cố",
-  "ai.greeting": "Chào! Mình là OpenMouse AI. Chọn một chủ đề bên dưới và mình sẽ giúp bạn khắc phục sự cố.",
   "ai.topic1": "Chuột của tôi không kết nối được",
   "ai.topic1Ans": "Đảm bảo chuột đã được cắm vào (hoặc receiver đã được cắm) và đang bật nguồn. Thử một cổng USB khác hoặc kết nối có dây nếu chuột hỗ trợ. Trên Linux, hãy kiểm tra các node thiết bị HID có quyền đọc — README có liệt kê các quy tắc udev. Sau đó nhấn Kết nối và chọn thiết bị trong hộp thoại của trình duyệt.",
   "ai.topic2": "Không đổi được DPI hoặc Polling rate",
@@ -233,8 +231,8 @@ export const vi: Record<I18nKey, string> = {
   "ai.topic4": "Cài đặt của tôi không được lưu",
   "ai.topic4Ans": "Cài đặt được ghi vào profile lưu trên chuột và áp dụng trực tiếp trên thiết bị, không phải trên đám mây. Sau khi thay đổi một cài đặt, nhấn Áp dụng và giữ trang mở cho đến khi quá trình ghi hoàn tất. Nếu cài đặt vẫn trở lại như cũ sau khi khởi động lại, mục đó có thể chỉ đọc trên mẫu chuột của bạn.",
   "ai.other": "Vấn đề khác",
-  "ai.otherAns": "Hãy ghé Discord của OpenMouse, cộng đồng sẽ giúp bạn.",
   "ai.joinDiscord": "Tham gia Discord",
+  "help.faq": "Thêm câu trả lời",
   "conn.add": "Thêm thiết bị",
   "conn.connecting": "Đang kết nối…",
   "conn.preview": "Chế độ xem trước",
@@ -1195,7 +1193,6 @@ export const vi: Record<I18nKey, string> = {
   "kb.triggerApplied": "Đã cập nhật kích hoạt",
   "kb.triggerAppliedDetail": "Bàn phím đã xác nhận cho {n} phím.",
   "kb.triggerFailed": "Không thể cập nhật kích hoạt",
-  // New keyboard controls use English until translated.
   "kb.geometry": "Layout style packs",
   "kb.row": "Row",
   "kb.col": "Column",
@@ -1279,4 +1276,60 @@ export const vi: Record<I18nKey, string> = {
   "kb.unavailable": "Not reported",
   "kb.readout": "Sensor ADC counts",
   "kb.multiNote": "Bulk edits use the selected key’s values as the starting point.",
+  "nav.devices": "Thiết bị",
+  "nav.yourDevices": "Thiết bị của bạn",
+  "nav.main": "Chính",
+  "nav.more": "Thêm",
+  "home.notConnected": "Chưa kết nối",
+  "home.configure": "Cấu hình",
+  "home.open": "Mở",
+  "home.keyboard": "Bàn phím",
+  "home.mouse": "Chuột",
+  "home.openHint": "Mở để đọc cài đặt",
+  "home.prev": "Thiết bị trước",
+  "home.next": "Thiết bị tiếp theo",
+  "home.subtitle": "Các thiết bị trình duyệt này có thể mở. Chọn một thiết bị để thay đổi cài đặt.",
+  "bridge.statusOn": "Bridge đã kết nối",
+  "bridge.statusOff": "Bridge chưa chạy",
+  "bridge.body": "Một ứng dụng nhỏ trên máy tính chuyển báo cáo thiết bị cho trang này. Nó tiếp cận được chuột Razer mà Chrome hiện chặn, đồng thời thêm hồ sơ theo trò chơi và cảnh báo pin yếu.",
+  "bridge.download": "Tải Bridge",
+  "bridge.statusLabel": "Trạng thái",
+  "bridge.running": "Đang chạy",
+  "bridge.notRunning": "Không chạy",
+  "bridge.transport": "Kết nối",
+  "bridge.latest": "Bản phát hành mới nhất",
+  "home.actions": "Tùy chọn thiết bị",
+  "home.remove": "Gỡ thiết bị",
+  "home.removeTitle": "Gỡ {name}?",
+  "home.removeBody": "OpenMouse sẽ quên thiết bị này trên trình duyệt này. Cài đặt đã lưu trên chuột vẫn giữ nguyên và bạn có thể thêm lại bất cứ lúc nào.",
+  "ctl.deviceForgotten": "Đã gỡ thiết bị",
+  "ctl.deviceForgetUnsupported": "Không thể gỡ thiết bị Bridge tại đây. Hãy rút thiết bị hoặc đóng Bridge.",
+  "bridge.update": "Có bản cập nhật",
+  "bridge.bodyOn": "Bridge đang chạy và chuyển báo cáo thiết bị cho trang này, nên chuột Razer, hồ sơ trò chơi và cảnh báo pin yếu đều dùng được.",
+  "bridge.releaseNotes": "Ghi chú phát hành",
+  "dev.status": "Trạng thái thiết bị",
+  "dev.breadcrumb": "Đường dẫn",
+  "ov.sensitivity": "Độ nhạy",
+  "ov.stageOf": "Mức {n} trên {total}",
+  "ov.pollingRate": "Tần số báo cáo",
+  "ov.upTo": "Tối đa {v}",
+  "ov.batteryLabel": "Pin",
+  "ov.onboardProfile": "Hồ sơ trên thiết bị",
+  "ov.setupTitle": "Thiết lập hiện tại",
+  "ov.setupMeta": "Đọc từ thiết bị",
+  "ov.stages": "Các mức DPI",
+  "ov.historyTitle": "Pin theo thời gian",
+  "ov.historyMeta": "7 ngày qua, ghi trong trình duyệt này",
+  "ov.historyEmpty": "Chưa có lịch sử",
+  "ov.historyEmptyBody": "OpenMouse ghi lại pin mỗi 5 phút khi trang này đang mở. Biểu đồ sẽ hiện sau vài lần đo.",
+  "set.subtitle": "Giao diện và cách hoạt động của OpenMouse trong trình duyệt này.",
+  "set.groupAppearance": "Giao diện",
+  "set.themeTitle": "Chủ đề",
+  "set.themeBody": "Mỗi ô hiển thị ứng dụng ở chủ đề đó.",
+  "set.groupBehaviour": "Hành vi",
+  "set.groupAbout": "Giới thiệu",
+  "set.version": "Phiên bản",
+  "set.resetBody": "Khôi phục chủ đề, ngôn ngữ và các công tắc trên trang này về mặc định. Cài đặt thiết bị không thay đổi.",
+  "set.resetShort": "Đặt lại",
+  "help.more": "Còn vấn đề khác? Cộng đồng trên Discord trả lời câu hỏi, nhận yêu cầu thiết bị và hỗ trợ sửa lỗi.",
 }
diff --git a/src/i18n-zh.ts b/src/i18n/locales/zh.ts
similarity index 95%
rename from src/i18n-zh.ts
rename to src/i18n/locales/zh.ts
index 44891887..61e4dc26 100644
--- a/src/i18n-zh.ts
+++ b/src/i18n/locales/zh.ts
@@ -1,7 +1,5 @@
-import type { I18nKey } from "./i18n.ts";
+import type { I18nKey } from "../index.ts";
 
-/** Simplified Chinese strings, split into a lazy chunk so the initial
-    bundle ships English only. Loaded via ensureLocale() before first use. */
 export const zh: Record<I18nKey, string> = {
   "set.turkish": "Türkçe",
   "luna.angleSnap": "直线修正",
@@ -42,6 +40,8 @@ export const zh: Record<I18nKey, string> = {
   "bridge.connected": "已连接",
   "games.subtitle": "选择一个游戏为其设置专属鼠标设置——游戏启动时立即应用。",
   "games.autoApply": "自动",
+  "games.needsBridgeTitle": "游戏配置需要 OpenMouse Bridge",
+  "games.needsBridgeBody": "Bridge 在浏览器旁运行，检测到游戏启动时会把鼠标切换到该游戏的设置。启动或下载 Bridge 即可创建配置。",
   "games.settings": "设置",
   "games.settingsHint": "仅保存到此游戏的配置中。在 {name} 启动前，鼠标保持当前设置，游戏关闭后恢复原样。",
   "games.changedCount": "此游戏已设置 {n} 项",
@@ -153,7 +153,7 @@ export const zh: Record<I18nKey, string> = {
   "set.title": "设置",
   "set.back": "返回设备",
   "set.soundTitle": "音效",
-  "set.soundDescription": "启用鼠标点击和新连接等声音",
+  "set.soundDescription": "新连接和提醒时播放提示音",
   "set.profiles": "配置文件",
   "set.profileKey": "配置密钥",
   "set.profileKeyBody": "可复制粘贴的密钥，能把这只鼠标的设置带到同型号的另一台设备上。在那台设备的设置里粘贴它，即可加载相同的配置。",
@@ -269,9 +269,7 @@ export const zh: Record<I18nKey, string> = {
   "wn.body": "Alpha 版现已推出：OpenMouse 桌面应用。以可安装应用的形式使用 OpenMouse，无需一直打开浏览器标签页。它包含原生 HID 访问、游戏配置文件，以及网页版和桌面版统一一致的界面。请前往我们的发布页面下载对应平台的版本。",
   "wn.download": "下载桌面版",
   "wn.close": "以后再说",
-  "ai.title": "OpenMouse AI",
   "ai.subtitle": "快速解答与故障排除",
-  "ai.greeting": "嗨！我是 OpenMouse AI。请选择下面的主题，我来帮你解决问题。",
   "ai.topic1": "我的鼠标连接不上",
   "ai.topic1Ans": "请确保鼠标（或其接收器）已插入并开机。试试另一个 USB 接口；如果鼠标支持，也可以改用有线连接。在 Linux 上，请确认 HID 设备节点可读——README 中列出了 udev 规则。然后点击“连接”，在弹出的浏览器窗口中选择你的设备。",
   "ai.topic2": "DPI 或回报率改不了",
@@ -281,8 +279,8 @@ export const zh: Record<I18nKey, string> = {
   "ai.topic4": "我的设置保存不了",
   "ai.topic4Ans": "设置会写入鼠标上存储的配置文件，并在设备端生效，而不是云端。更改设置后点击“应用”，并保持页面打开直到写入完成。如果重启后仍然恢复原样，说明该设置在你的型号上可能是只读的。",
   "ai.other": "其他问题",
-  "ai.otherAns": "没关系，前往 OpenMouse Discord，社区会帮你解决。",
   "ai.joinDiscord": "加入 Discord",
+  "help.faq": "更多解答",
   "conn.add": "添加设备",
   "conn.addMouse": "添加鼠标",
   "conn.connecting": "连接中…",
@@ -1190,7 +1188,6 @@ export const zh: Record<I18nKey, string> = {
   "kb.triggerApplied": "触发设置已更新",
   "kb.triggerAppliedDetail": "已由键盘确认 {n} 个按键。",
   "kb.triggerFailed": "无法更新触发设置",
-  // New keyboard controls use English until translated.
   "kb.geometry": "Layout style packs",
   "kb.row": "Row",
   "kb.col": "Column",
@@ -1274,4 +1271,60 @@ export const zh: Record<I18nKey, string> = {
   "kb.unavailable": "Not reported",
   "kb.readout": "Sensor ADC counts",
   "kb.multiNote": "Bulk edits use the selected key’s values as the starting point.",
+  "nav.devices": "设备",
+  "nav.yourDevices": "你的设备",
+  "nav.main": "主菜单",
+  "nav.more": "更多",
+  "home.notConnected": "未连接",
+  "home.configure": "配置",
+  "home.open": "打开",
+  "home.keyboard": "键盘",
+  "home.mouse": "鼠标",
+  "home.openHint": "打开以读取其设置",
+  "home.prev": "上一个设备",
+  "home.next": "下一个设备",
+  "home.subtitle": "此浏览器可以打开的设备。选择一个来更改其设置。",
+  "bridge.statusOn": "Bridge 已连接",
+  "bridge.statusOff": "Bridge 未运行",
+  "bridge.body": "一个小型桌面伴侣程序，为本页面传递设备报告。它能访问 Chrome 现已阻止的雷蛇鼠标，并提供按游戏的配置文件和低电量提醒。",
+  "bridge.download": "下载 Bridge",
+  "bridge.statusLabel": "状态",
+  "bridge.running": "运行中",
+  "bridge.notRunning": "未运行",
+  "bridge.transport": "传输方式",
+  "bridge.latest": "最新版本",
+  "home.actions": "设备选项",
+  "home.remove": "移除设备",
+  "home.removeTitle": "移除 {name}？",
+  "home.removeBody": "OpenMouse 会在此浏览器中忘记该设备。鼠标上保存的设置保持不变，你可以随时重新添加。",
+  "ctl.deviceForgotten": "已移除设备",
+  "ctl.deviceForgetUnsupported": "无法在此移除 Bridge 设备。请拔下设备或关闭 Bridge。",
+  "bridge.update": "有可用更新",
+  "bridge.bodyOn": "Bridge 正在运行并为此页面传递设备报告，因此可以使用 Razer 鼠标、游戏配置和低电量提醒。",
+  "bridge.releaseNotes": "发行说明",
+  "dev.status": "设备状态",
+  "dev.breadcrumb": "导航路径",
+  "ov.sensitivity": "灵敏度",
+  "ov.stageOf": "第 {n} 档，共 {total} 档",
+  "ov.pollingRate": "回报率",
+  "ov.upTo": "最高 {v}",
+  "ov.batteryLabel": "电量",
+  "ov.onboardProfile": "板载配置",
+  "ov.setupTitle": "当前设置",
+  "ov.setupMeta": "从设备读取",
+  "ov.stages": "DPI 档位",
+  "ov.historyTitle": "电量变化",
+  "ov.historyMeta": "最近 7 天，记录于此浏览器",
+  "ov.historyEmpty": "暂无记录",
+  "ov.historyEmptyBody": "页面打开期间，OpenMouse 每 5 分钟记录一次电量。几次读数后会显示图表。",
+  "set.subtitle": "OpenMouse 在此浏览器中的外观与行为。",
+  "set.groupAppearance": "外观",
+  "set.themeTitle": "主题",
+  "set.themeBody": "每个图块都以该主题显示应用。",
+  "set.groupBehaviour": "行为",
+  "set.groupAbout": "关于",
+  "set.version": "版本",
+  "set.resetBody": "将本页的主题、语言和开关恢复为默认值。不会更改设备设置。",
+  "set.resetShort": "重置",
+  "help.more": "还有其他问题？Discord 社区会解答问题、收集设备需求并协助排查问题。",
 }
diff --git a/src/i18n-tr-coverage.test.ts b/src/i18n/tr-coverage.test.ts
similarity index 96%
rename from src/i18n-tr-coverage.test.ts
rename to src/i18n/tr-coverage.test.ts
index 129e7fa5..7b1acd0a 100644
--- a/src/i18n-tr-coverage.test.ts
+++ b/src/i18n/tr-coverage.test.ts
@@ -4,8 +4,8 @@ import { dirname, join } from "node:path";
 import { fileURLToPath } from "node:url";
 import test from "node:test";
 import ts from "typescript";
-import { displayTemplate, displayText, ensureLocale, tp } from "./i18n.ts";
-import { trExtra } from "./i18n-tr-extra.ts";
+import { displayTemplate, displayText, ensureLocale, tp } from "./index.ts";
+import { trExtra } from "./locales/tr-extra.ts";
 
 test("Turkish legacy display catalog translates every literal entry", async () => {
   await ensureLocale("tr");
@@ -65,6 +65,6 @@ test("control UI contains no untranslated static JSX copy outside technical name
       }
     }
   };
-  visitFiles(join(root, "app"));
+  for (const area of ["app", "features", "shared"]) visitFiles(join(root, "..", area));
   assert.deepEqual(missing, []);
 });
diff --git a/src/launch.css b/src/launch.css
deleted file mode 100644
index cd981142..00000000
--- a/src/launch.css
+++ /dev/null
@@ -1,176 +0,0 @@
-/* ── Early Access launch countdown ───────────────────────────────────────
-   Minimal gate that replaces the control app until the beta opens: brand
-   mark, headline, timer, one line of copy. No motion, no side art. */
-
-.launch-shell {
-  position: relative;
-  min-height: 100vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: clamp(2rem, 6vw, 5rem) 1.5rem;
-  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-  color: #f4ffff;
-  background: #09090b;
-  -webkit-font-smoothing: antialiased;
-}
-
-.launch-stage {
-  position: relative;
-  z-index: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: clamp(2rem, 6vw, 3rem);
-  width: 100%;
-  max-width: 560px;
-}
-
-.launch-brand {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  font-size: 0.95rem;
-  font-weight: 700;
-  letter-spacing: 0.02em;
-  color: #69d28d;
-}
-.launch-brand img {
-  width: 20px;
-  height: auto;
-}
-
-.launch-hero {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  text-align: center;
-  gap: 1.6rem;
-  width: 100%;
-}
-
-.launch-title {
-  margin: 0;
-  font-size: clamp(1.5rem, 4vw, 2rem);
-  font-weight: 700;
-  line-height: 1.15;
-  letter-spacing: -0.01em;
-  color: #f4ffff;
-}
-
-.launch-lead {
-  margin: 0;
-  font-size: 0.95rem;
-  line-height: 1.5;
-  color: #7a9498;
-}
-
-/* ── Timer ─────────────────────────────────────────────────────────────── */
-.launch-timer {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-}
-
-.launch-digit {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 0.4rem;
-  min-width: 3.4rem;
-}
-
-.launch-digit-value {
-  font-family: "JetBrains Mono", ui-monospace, monospace;
-  font-size: clamp(1.6rem, 6vw, 2.2rem);
-  font-weight: 600;
-  font-variant-numeric: tabular-nums;
-  color: #f4ffff;
-}
-
-.launch-digit-label {
-  font-size: 0.68rem;
-  font-weight: 600;
-  letter-spacing: 0.1em;
-  text-transform: uppercase;
-  color: #7a9498;
-}
-
-.launch-colon {
-  padding-bottom: 1.1rem;
-  font-family: "JetBrains Mono", ui-monospace, monospace;
-  font-size: clamp(1.3rem, 4vw, 1.7rem);
-  font-weight: 600;
-  color: #69d28d;
-}
-
-/* ── CTA + go state ────────────────────────────────────────────────────── */
-.launch-cta {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0.75rem 1.8rem;
-  border-radius: 10px;
-  background: #69d28d;
-  color: #041412;
-  font-weight: 700;
-  transition: opacity 0.15s;
-}
-.launch-cta:hover {
-  opacity: 0.88;
-}
-
-/* ── Socials footer ────────────────────────────────────────────────────── */
-.launch-socials {
-  position: fixed;
-  left: 0;
-  right: 0;
-  bottom: clamp(1.2rem, 4vh, 2.2rem);
-  z-index: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-wrap: wrap;
-  gap: 0.6rem;
-  padding: 0 1.5rem;
-}
-
-.launch-socials a {
-  display: flex;
-  align-items: center;
-  gap: 0.4rem;
-  padding: 0.5rem 0.9rem;
-  border: 1px solid color-mix(in srgb, #69d28d 16%, #232527);
-  border-radius: 999px;
-  background: color-mix(in srgb, #14161a 88%, transparent);
-  color: #7a9498;
-  transition: color 0.15s, border-color 0.15s, background 0.15s;
-}
-.launch-socials a:hover {
-  color: #f4ffff;
-  border-color: color-mix(in srgb, #69d28d 34%, #232527);
-  background: color-mix(in srgb, #191b1f 92%, transparent);
-}
-.launch-socials svg {
-  width: 16px;
-  height: 16px;
-}
-
-.launch-star-count {
-  display: flex;
-  align-items: center;
-  gap: 0.3rem;
-  font-size: 0.85rem;
-  font-weight: 600;
-  font-variant-numeric: tabular-nums;
-}
-.launch-star-count svg {
-  width: 13px;
-  height: 13px;
-  color: #69d28d;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  * { animation: none !important; }
-}
diff --git a/src/launch.ts b/src/launch.ts
deleted file mode 100644
index c9fe12e4..00000000
--- a/src/launch.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-/* Public launch gate. OpenMouse Early Access (Beta 1.0) opens at 11:00 AM
-   Mountain time (MDT, UTC-6 — daylight saving is in effect in September) on
-   Friday September 4th 2026 — 17:00 UTC. Before that moment the control app
-   is replaced by a countdown page; after it, the app renders normally.
-
-   Swap the timestamp for the next milestone (or set it to now to lift the
-   gate) once the beta is live. */
-
-const LAUNCH_AT = Date.UTC(2026, 8, 4, 17, 0, 0);
-
-export const LAUNCH_TIME = LAUNCH_AT;
-
-export function isBeforeLaunch(now: number = Date.now()): boolean {
-  return now < LAUNCH_TIME;
-}
-
-export function millisecondsUntilLaunch(now: number = Date.now()): number {
-  return Math.max(0, LAUNCH_TIME - now);
-}
-
-export function launchDateTimeLabel(): string {
-  return new Intl.DateTimeFormat("en-US", {
-    timeZone: "UTC",
-    weekday: "long",
-    month: "long",
-    day: "numeric",
-    hour: "numeric",
-    minute: "2-digit",
-    hour12: true,
-    timeZoneName: "short",
-  }).format(new Date(LAUNCH_TIME));
-}
diff --git a/src/main.tsx b/src/main.tsx
new file mode 100644
index 00000000..d5fb298a
--- /dev/null
+++ b/src/main.tsx
@@ -0,0 +1,67 @@
+import type { ReactNode } from "react";
+import { createRoot } from "react-dom/client";
+import "./styles/index.css";
+import { App } from "./app/App";
+import { UnsupportedNotice } from "./app/UnsupportedNotice";
+import { installBridgeHid } from "./features/bridge/bridge-hid";
+import { unsupportedNotice } from "./platform/browser-support";
+import { start } from "./device/controller";
+import { mountOfflineBanner } from "./platform/offline-banner";
+import { registerServiceWorker } from "./platform/register-sw";
+import { startSelfXssGuard } from "./platform/self-xss-guard";
+import { MIN_HEIGHT, MIN_WIDTH, useViewportTooSmall } from "./app/useViewportTooSmall";
+import { ensureDisplayLocale } from "./i18n/index";
+import { initialUiLocale } from "./shared/ui-locale";
+
+const controlApp = document.querySelector<HTMLDivElement>("#control-app");
+
+if (!controlApp) {
+  throw new Error("OpenMouse could not find the control application root.");
+}
+
+function isChromium(): boolean {
+  const brands = (navigator as Navigator & {
+    userAgentData?: { brands?: { brand: string }[] };
+  }).userAgentData?.brands;
+  if (brands) return brands.some((entry) => /chromium/i.test(entry.brand));
+  return /Chrom(e|ium)\/|Edg\//.test(navigator.userAgent);
+}
+
+registerServiceWorker();
+mountOfflineBanner();
+if (import.meta.env.PROD) startSelfXssGuard();
+
+function Root(): ReactNode {
+  const tooSmall = useViewportTooSmall();
+  if (tooSmall) {
+    return (
+      <UnsupportedNotice
+        notice={{
+          headline: "Make the window bigger.",
+          detail: `OpenMouse lays its device controls out side by side and needs at least ${MIN_WIDTH} × ${MIN_HEIGHT} pixels. Resize the window, or move to a larger display.`,
+        }}
+      />
+    );
+  }
+  return <App />;
+}
+
+const root = createRoot(controlApp);
+// Prefer Bridge when it is installed: native HID can reach protected mouse
+// collections that Chrome 153+ correctly withholds from WebHID. If Bridge is
+// absent, installation falls back to the browser's own WebHID implementation.
+void installBridgeHid({ force: true }).then(async (hasHid) => {
+  await ensureDisplayLocale(initialUiLocale());
+  const notice = unsupportedNotice({
+    hasWebHid: hasHid,
+    handheld: window.matchMedia("(pointer: coarse) and (hover: none)").matches,
+    secureContext: window.isSecureContext,
+    chromium: isChromium(),
+  });
+  if (notice) {
+    root.render(<UnsupportedNotice notice={notice} />);
+    return;
+  }
+  start();
+  root.render(<Root />);
+});
diff --git a/src/offline-banner.css b/src/offline-banner.css
deleted file mode 100644
index 692d3fd0..00000000
--- a/src/offline-banner.css
+++ /dev/null
@@ -1,33 +0,0 @@
-.offline-banner {
-  position: fixed;
-  inset-inline: 0;
-  bottom: 1rem;
-  z-index: 2147483000;
-  width: fit-content;
-  max-width: calc(100vw - 2rem);
-  margin-inline: auto;
-  padding: 0.5rem 1rem;
-  border: 1px solid rgb(255 255 255 / 0.14);
-  border-radius: 999px;
-  background: #09090b;
-  box-shadow: 0 8px 24px rgb(0 0 0 / 0.35);
-  color: #fafafa;
-  font-size: 0.8125rem;
-  line-height: 1.4;
-  text-align: center;
-  pointer-events: none;
-  opacity: 0;
-  transform: translateY(0.5rem);
-  transition: opacity 160ms ease, transform 160ms ease;
-}
-
-.offline-banner.is-visible {
-  opacity: 1;
-  transform: none;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .offline-banner {
-    transition: none;
-  }
-}
diff --git a/src/browser-support.ts b/src/platform/browser-support.ts
similarity index 100%
rename from src/browser-support.ts
rename to src/platform/browser-support.ts
diff --git a/src/platform/offline-banner.css b/src/platform/offline-banner.css
new file mode 100644
index 00000000..95473782
--- /dev/null
+++ b/src/platform/offline-banner.css
@@ -0,0 +1,33 @@
+.offline-banner {
+  position: fixed;
+  inset-inline: 0;
+  bottom: 20px;
+  z-index: 2147483000;
+  width: fit-content;
+  max-width: calc(100vw - 40px);
+  margin-inline: auto;
+  padding: 12px 18px;
+  border: 1px solid var(--line-2);
+  border-radius: var(--r-md);
+  background: var(--solid-2);
+  box-shadow: var(--shadow-float);
+  color: var(--text-2);
+  font-family: var(--font-sans);
+  font-size: var(--fs-meta);
+  line-height: 1.5;
+  text-align: center;
+  pointer-events: none;
+  opacity: 0;
+  transform: translateY(8px);
+  transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease);
+}
+
+.offline-banner.is-visible {
+  opacity: 1;
+  transform: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .offline-banner { transition: none; }
+}
+html:has(.reduce-interface-motion) .offline-banner { transition: none; }
diff --git a/src/offline-banner.ts b/src/platform/offline-banner.ts
similarity index 82%
rename from src/offline-banner.ts
rename to src/platform/offline-banner.ts
index d1f2c10d..f8615a10 100644
--- a/src/offline-banner.ts
+++ b/src/platform/offline-banner.ts
@@ -1,8 +1,8 @@
 import "./offline-banner.css";
 
-import type { InterfaceLocale } from "./interface-preferences";
-import { detectLocale, loadInterfacePreferences } from "./interface-preferences";
-import { ensureDisplayLocale, t } from "./i18n";
+import type { InterfaceLocale } from "../features/settings/interface-preferences";
+import { detectLocale, loadInterfacePreferences } from "../features/settings/interface-preferences";
+import { ensureDisplayLocale, t } from "../i18n/index";
 
 /**
  * Announces a dropped connection. The banner stays empty while online so the
diff --git a/src/register-sw.ts b/src/platform/register-sw.ts
similarity index 51%
rename from src/register-sw.ts
rename to src/platform/register-sw.ts
index 61f11e91..bfd1a31a 100644
--- a/src/register-sw.ts
+++ b/src/platform/register-sw.ts
@@ -1,13 +1,8 @@
-/**
- * Registers the generated service worker so the public pages stay available
- * without a connection. The worker only exists in a production build.
- */
 export function registerServiceWorker(): void {
   if (!import.meta.env.PROD || !("serviceWorker" in navigator)) return;
 
   window.addEventListener("load", () => {
     void navigator.serviceWorker.register("/sw.js").catch(() => {
-      // Offline support is an enhancement; the pages work without it.
     });
   });
 }
diff --git a/src/self-xss-guard.ts b/src/platform/self-xss-guard.ts
similarity index 95%
rename from src/self-xss-guard.ts
rename to src/platform/self-xss-guard.ts
index 8bafaed5..cb247c72 100644
--- a/src/self-xss-guard.ts
+++ b/src/platform/self-xss-guard.ts
@@ -20,7 +20,6 @@ const WARNING_BODY =
   "code here, it is a scam: pasting it can hand over your connected mouse and " +
   "your OpenMouse settings. Never paste code you do not fully understand.";
 
-/** Prints the production-only console warning. Call once. */
 export function startSelfXssGuard(): void {
   console.log(
     `%c${WARNING_TITLE}`,
diff --git a/src/sound-manager.ts b/src/platform/sound-manager.ts
similarity index 55%
rename from src/sound-manager.ts
rename to src/platform/sound-manager.ts
index ff3e9b84..d06f8692 100644
--- a/src/sound-manager.ts
+++ b/src/platform/sound-manager.ts
@@ -1,9 +1,6 @@
-import type { ToastKind } from "./device/types";
+import type { ToastKind } from "../device/types";
 
 let context: AudioContext | null = null;
-let clickBuffer: AudioBuffer | null = null;
-let clickPreparePromise: Promise<void> | null = null;
-let clickAudioRequest: Promise<ArrayBuffer> | null = null;
 let pendingToast: ToastKind | null = null;
 let enabled = false;
 let gestureListenerInstalled = false;
@@ -27,59 +24,6 @@ function getContext(): AudioContext | null {
   return context;
 }
 
-function fetchClickAudio(): Promise<ArrayBuffer> {
-  if (!clickAudioRequest) {
-    clickAudioRequest = fetch(new URL("/sounds/click.wav", window.location.href).toString())
-      .then((response) => {
-        if (!response.ok) throw new Error(`click sound fetch failed: ${response.status}`);
-        return response.arrayBuffer();
-      })
-      .catch((error) => {
-        // Do not cache a rejected fetch: a later attempt (a fresh gesture)
-        // must be able to recover instead of reusing the same failure forever.
-        clickAudioRequest = null;
-        throw error;
-      });
-  }
-  return clickAudioRequest;
-}
-
-function prepareClick(): Promise<void> {
-  if (!clickPreparePromise) {
-    clickPreparePromise = (async () => {
-      const ctx = getContext();
-      if (!ctx) return;
-      clickBuffer = await ctx.decodeAudioData(await fetchClickAudio());
-    })().catch((error) => {
-      console.warn("OpenMouse click sound unavailable:", error);
-      clickPreparePromise = null;
-    });
-  }
-  return clickPreparePromise;
-}
-
-async function playClick(): Promise<void> {
-  if (!enabled) return;
-  const ctx = context;
-  const audio = clickBuffer;
-  if (!ctx || !audio) return;
-  if (ctx.state === "suspended") await ctx.resume();
-
-  const now = ctx.currentTime;
-  const length = audio.duration;
-  const gain = ctx.createGain();
-  gain.gain.setValueAtTime(0.0001, now);
-  gain.gain.linearRampToValueAtTime(1.35, now + 0.003);
-  gain.gain.setValueAtTime(1.35, now + Math.max(0.04, length - 0.06));
-  gain.gain.setTargetAtTime(0.0001, now + length - 0.06, 0.028);
-  gain.connect(ctx.destination);
-
-  const source = ctx.createBufferSource();
-  source.buffer = audio;
-  source.connect(gain);
-  source.start(now, 0, length);
-}
-
 async function playToast(kind: ToastKind): Promise<void> {
   try {
     if (!enabled) return;
@@ -120,7 +64,6 @@ function unlock(): void {
     pendingToast = null;
     void playToast(kind);
   }
-  void prepareClick().then(playClick).catch(() => undefined);
 }
 
 export function setSoundsEnabled(nextEnabled: boolean): void {
@@ -134,8 +77,6 @@ export function setSoundsEnabled(nextEnabled: boolean): void {
     return;
   }
 
-  void fetchClickAudio().catch(() => undefined);
-  void prepareClick();
   if (!gestureListenerInstalled) {
     window.addEventListener("pointerdown", unlock, { passive: true, capture: true });
     gestureListenerInstalled = true;
diff --git a/src/trusted-types.ts b/src/platform/trusted-types.ts
similarity index 100%
rename from src/trusted-types.ts
rename to src/platform/trusted-types.ts
diff --git a/src/shared/CardSlot.tsx b/src/shared/CardSlot.tsx
new file mode 100644
index 00000000..2a379a88
--- /dev/null
+++ b/src/shared/CardSlot.tsx
@@ -0,0 +1,74 @@
+import {
+  Activity, BatteryLow, Cog, Command, Cpu, Crosshair, Disc3, FlaskConical, Gauge, Hand, Layers, Lightbulb, Magnet,
+  Moon, Mouse, MousePointerClick, Palette, Radar, Rocket, ScanEye, ShieldCheck, SlidersHorizontal, Sparkles,
+  Spline, Timer, ToggleRight, Usb, Wifi, Zap, type LucideIcon,
+} from "lucide-react";
+import { Children, isValidElement, type ReactElement, type ReactNode } from "react";
+
+const GLYPHS: Readonly<Record<string, LucideIcon>> = {
+  dpi: Crosshair,
+  polling: Activity,
+  sensor: ScanEye,
+  "wallhack-scanning": Radar,
+  "wallhack-curves": Spline,
+  "atk-sensor": ScanEye,
+  lightforce: Zap,
+  "finalmouse-tmr": Magnet,
+  "ninjutso-sensor": ScanEye,
+  "ninjutso-click": MousePointerClick,
+  processing: Cpu,
+  eggfilter: SlidersHorizontal,
+  eggsensor: ScanEye,
+  eggpolling: FlaskConical,
+  eggcpi: Layers,
+  "power-mode": Rocket,
+  debounce: Timer,
+  eggspdt: ToggleRight,
+  egghanded: Hand,
+  eggbuttons: Mouse,
+  razerbuttons: Mouse,
+  "mxmaster-buttons": Mouse,
+  "atk-buttons": Mouse,
+  "button-mapping": Mouse,
+  "ksnake-scroll": Disc3,
+  "ksnake-macros": Command,
+  "wallhack-macros": Command,
+  signal: Wifi,
+  sleep: Moon,
+  lighting: Lightbulb,
+  "lighting-tab": Lightbulb,
+  lowpower: BatteryLow,
+  "finalmouse-pp": Gauge,
+  finalmouse: Cog,
+  "finalmouse-profiles": Layers,
+  incott: Cog,
+  "lunafury-buttons": Mouse,
+  "lunafury-wheel": ShieldCheck,
+  "dongle-led": Usb,
+  "atk-profile": Layers,
+  "atk-receiver": Usb,
+  "atk-dongle": Usb,
+  "onboard-profile": Layers,
+  pulsarpro: Sparkles,
+  "dpi-indicator": Palette,
+};
+
+const WIDE = new Set(["dpi", "eggpolling", "eggcpi", "eggbuttons", "ksnake-macros", "wallhack-macros", "lighting-tab", "button-mapping"]);
+
+export function slotCards(cards: readonly ReactNode[]): ReactNode[] {
+  return Children.toArray(cards).map((card) => {
+    if (!isValidElement(card)) return card;
+    const key = String((card as ReactElement).key ?? "").replace(/^\.\$/, "");
+    const Glyph = GLYPHS[key];
+    return (
+      <div key={key} className={`card-slot${WIDE.has(key) ? " is-wide" : ""}`} data-card={key}>
+        {card}
+        {Glyph ? (
+          <span className="card-glyph" aria-hidden="true">
+            <Glyph strokeWidth={1.8} />
+          </span>
+        ) : null}
+      </div>
+    );
+  });
+}
diff --git a/src/app/ColorPicker.tsx b/src/shared/ColorPicker.tsx
similarity index 99%
rename from src/app/ColorPicker.tsx
rename to src/shared/ColorPicker.tsx
index 568c0e25..eb62f8c5 100644
--- a/src/app/ColorPicker.tsx
+++ b/src/shared/ColorPicker.tsx
@@ -1,7 +1,7 @@
-import { displayText } from "../i18n";
+import { displayText } from "../i18n/index";
 import { useUiLocale } from "./ui-locale";
 import { useEffect, useRef, useState, type PointerEvent, type ReactNode } from "react";
-import { clamp, hexToHsv, hsvToHex, hexToRgb, rgbToHsv, type Hsv } from "../ui/color-math";
+import { clamp, hexToHsv, hsvToHex, hexToRgb, rgbToHsv, type Hsv } from "./color-math";
 
 const HUE_STOPS = ["#ff0000", "#ffff00", "#00ff00", "#00ffff", "#0000ff", "#ff00ff", "#ff0000"];
 
diff --git a/src/ui/battery-icon.ts b/src/shared/battery-icon.ts
similarity index 98%
rename from src/ui/battery-icon.ts
rename to src/shared/battery-icon.ts
index 77515f44..659138fb 100644
--- a/src/ui/battery-icon.ts
+++ b/src/shared/battery-icon.ts
@@ -1,5 +1,5 @@
 import type { MouseStatus } from "@openmouse/protocol/drivers/mouse-types";
-import { setSanitizedHtml } from "../trusted-types.ts";
+import { setSanitizedHtml } from "../platform/trusted-types.ts";
 
 export type BatteryIconState = "charging" | "dead" | "low" | "ok" | "unknown";
 
diff --git a/src/ui/color-math.ts b/src/shared/color-math.ts
similarity index 100%
rename from src/ui/color-math.ts
rename to src/shared/color-math.ts
diff --git a/src/ui/device-images.test.ts b/src/shared/device-images.test.ts
similarity index 94%
rename from src/ui/device-images.test.ts
rename to src/shared/device-images.test.ts
index 52f02e27..e22b4b04 100644
--- a/src/ui/device-images.test.ts
+++ b/src/shared/device-images.test.ts
@@ -36,8 +36,6 @@ test("PRO X3 SUPERSTRIKE gets its own render, not the X2's", () => {
   assert.equal(deviceImage(dev(0x046d, 0xc54f), "PRO X3 SUPERSTRIKE"), CDN + "logitech-pro-x3-superstrike.png");
   assert.equal(deviceImage(null, "Logitech PRO X3 SUPERSTRIKE"), CDN + "logitech-pro-x3-superstrike.png");
   assert.equal(deviceImage(null, "PRO X 3 Superstrike"), CDN + "logitech-pro-x3-superstrike.png");
-  // Neighbouring names must not collide: X2 keeps its render, and the
-  // unrelated Attack Shark X3 keeps its own.
   assert.equal(deviceImage(null, "PRO X 2 Superstrike"), CDN + "logitech-pro-x2-superstrike.png");
   assert.equal(deviceImage(null, "Attack Shark X3"), CDN + "attackshark-x3.png");
 });
@@ -152,7 +150,6 @@ test("G Pro family uses the classic shell; G Pro Wireless and G Pro 2 get their
   // models (e.g. G703), so it can only be resolved by its reported name.
   assert.equal(deviceImage(null, "G Pro Wireless Gaming Mouse"), CDN + "logitech-gpro-wireless.png");
   assert.equal(deviceImage(null, "G Pro 2 Lightspeed"), CDN + "logitech-g-pro-2.png");
-  // The Superlight must keep its own render, not the classic G Pro shell.
   assert.equal(deviceImage(null, "G Pro X Superlight"), CDN + "logitech-pro-x-superlight-2c.png");
   // The original Superlight (PID 0xc094) reports its own HID++ device name as
   // "PRO X Wireless", not "Superlight" — confirmed against real hardware.
@@ -176,7 +173,6 @@ test("DeathAdder V2 family shares the V2 render; V4 Pro gets its own", () => {
   assert.equal(deviceImage(null, "DeathAdder Essential"), CDN + "razer-deathadder-v2.png");
   assert.equal(deviceImage(null, "DeathAdder V4 Pro"), CDN + "razer-deathadder-v4-pro.png");
   assert.equal(deviceImage(null, "DeathAdder V4 Pro Carbon Fiber Edition"), CDN + "razer-deathadder-v4-pro.png");
-  // Test-needed V2 X HyperSpeed must NOT pick up V2 artwork.
   assert.equal(deviceImage(null, "DeathAdder V2 X HyperSpeed"), CDN + "unknown-device.png");
 });
 
@@ -195,21 +191,16 @@ test("DeathAdder V3 and V3 Pro share the V3 render; HyperSpeed has its own", ()
 test("Viper family resolves each generation to its own render", () => {
   assert.equal(deviceImage(null, "Viper V2 Pro"), CDN + "razer-viper-v2-pro.png");
   assert.equal(deviceImage(null, "Viper V3 Pro"), CDN + "razer-viper-v3-pro.png");
-  // Viper V3 Pro SE must NOT fall into the plain V3 Pro render — no art of
-  // its own yet, so it resolves to the placeholder.
   assert.equal(deviceImage(null, "Viper V3 Pro SE"), CDN + "unknown-device.png");
   assert.equal(deviceImage(null, "Viper V3 HyperSpeed"), CDN + "razer-viper-v3-hyperspeed.png");
   assert.equal(deviceImage(null, "Viper V4 Pro"), CDN + "razer-viper-v4-pro.png");
-  // The plain original Viper resolves last among the viper checks.
   assert.equal(deviceImage(null, "Viper"), CDN + "razer-viper.webp");
-  // Viper Ultimate has no render of its own; must not borrow the plain Viper's.
   assert.equal(deviceImage(null, "Viper Ultimate"), CDN + "unknown-device.png");
 });
 
 test("Endgame Gear XM2 8K and XM2w resolve to their own renders", () => {
   assert.equal(deviceImage(null, "XM2 8K"), CDN + "endgame-gear-xm2-8k.png");
   assert.equal(deviceImage(null, "XM2w 4K"), CDN + "endgame-gear-xm2w.png");
-  // XM2w must not be caught by the OP1 render.
   assert.equal(deviceImage(null, "Endgame Gear XM2w 4K"), CDN + "endgame-gear-xm2w.png");
 });
 
@@ -217,7 +208,6 @@ test("WLMouse Beast X / Beast Mini / Beast X Pro have no render and fall back to
   assert.equal(deviceImage(null, "WLMouse Beast X"), CDN + "unknown-device.png");
   assert.equal(deviceImage(null, "WLMouse Beast Mini"), CDN + "unknown-device.png");
   assert.equal(deviceImage(null, "WLMouse Beast X Pro"), CDN + "unknown-device.png");
-  // Sword X keeps its render.
   assert.equal(deviceImage(null, "WLMouse Sword X"), CDN + "wlmouse-sword-x.png");
 });
 
@@ -225,9 +215,7 @@ test("VGN Dragonfly F2 Master+, Lamzu Maya X, ATK F1 V2, Orbital and moddo resol
   assert.equal(deviceImage(null, "Dragonfly F2 Master+"), CDN + "vgn-dragonfly-f2.png");
   assert.equal(deviceImage(null, "Lamzu Maya X"), CDN + "lamzu-maya-x.png");
   assert.equal(deviceImage(null, "ATK F1 V2 Ultra Max"), CDN + "atk-f1-v2-ultra-max.png");
-  // Orbital has no product render yet; it resolves to the generic placeholder.
   assert.equal(deviceImage(null, "Orbital Ghost"), CDN + "unknown-device.png");
-  // moddo has no product render yet; it resolves to the generic placeholder.
   assert.equal(deviceImage(null, "moddoMOUSE"), CDN + "unknown-device.png");
 });
 
@@ -240,7 +228,6 @@ test("Finalmouse Starlight X resolves to its own render, not the ULX's", () => {
   assert.equal(deviceImage(null, "Finalmouse Starlight X"), CDN + "finalmouse-slx.png");
   assert.equal(deviceImage(null, "SLX"), CDN + "finalmouse-slx.png");
   assert.equal(isUnknownDevice(null, "Finalmouse Starlight X"), false);
-  // The Ultralight X shell keeps its own render.
   assert.equal(deviceImage(null, "Finalmouse UltralightX"), CDN + "finalmouse-ulx.png");
 });
 
@@ -272,7 +259,6 @@ test("Noir Gear M2-NEX resolves to its maintainer-hosted artwork", () => {
 test("Noir Gear M1-NEX resolves to its reserved maintainer-hosted artwork", () => {
   assert.equal(deviceImage(null, "M1-NEX"), CDN + "noir-m1-nex.png");
   assert.equal(deviceImage(null, "Noir Gear M1-NEX"), CDN + "noir-m1-nex.png");
-  // Neighboring Noir Gear models must not match the M1-NEX render.
   assert.equal(deviceImage(null, "Noir M1"), CDN + "unknown-device.png");
   assert.equal(deviceImage(null, "Noir M1 Lite"), CDN + "unknown-device.png");
 });
@@ -290,9 +276,7 @@ test("Attack Shark X11 does not inherit K-snake artwork", () => {
 test("Attack Shark X3 / X3 Pro resolve by name", () => {
   assert.equal(deviceImage(null, "Attack Shark X3"), CDN + "attackshark-x3.png");
   assert.equal(deviceImage(null, "Attack Shark X3 Pro"), CDN + "attackshark-x3.png");
-  // Neighbouring models must not inherit it.
   assert.equal(deviceImage(null, "Attack Shark X11"), CDN + "unknown-device.png");
-  // Pulsar X3 keeps its own generic Pulsar render.
   assert.equal(deviceImage(null, "Pulsar X3 Medium"), CDN + "pulsar-x2-v2.png");
 });
 
@@ -359,7 +343,6 @@ test("the wired product string resolves the same render as the read model", () =
 });
 
 test("Incott names do not collide with other brands' renders", () => {
-  // "G Pro" and the Logitech G-series numbers sit in the same cascade.
   assert.equal(deviceImage(null, "G PRO WIRELESS"), CDN + "logitech-gpro-wireless.png");
   assert.equal(deviceImage(null, "G203 LIGHTSYNC"), CDN + "logitech-g203.png");
   assert.equal(deviceImage(null, "G303 SHROUD"), CDN + "logitech-g303.png");
diff --git a/src/ui/device-images.ts b/src/shared/device-images.ts
similarity index 92%
rename from src/ui/device-images.ts
rename to src/shared/device-images.ts
index c92b2e86..131d5be3 100644
--- a/src/ui/device-images.ts
+++ b/src/shared/device-images.ts
@@ -22,11 +22,6 @@
 
 const filenameCache = new Map<string, string>();
 
-/**
- * Memoized wrapper: the resolver is a pure function of the display name and
- * evaluates a long regex chain, so repeated renders of the device list reuse
- * the result instead of recompiling every pattern.
- */
 function resolveDeviceImageFilename(_device: HIDDevice | null | undefined, displayName = ""): string {
   const cached = filenameCache.get(displayName);
   if (cached !== undefined) return cached;
@@ -59,7 +54,6 @@ function computeDeviceImageFilename(displayName: string): string {
   if (/op1we/i.test(displayName)) return "endgame-gear-op1we.png";
   if (/\bop1\b/i.test(displayName)) return "endgame-gear-op1-8k.png";
   if (/\bviper\s*v2\s*pro\b/i.test(displayName)) return "razer-viper-v2-pro.png";
-  // "Viper V3 Pro SE" must not fall into the plain V3 Pro render.
   if (/\bviper\s*v3\s*pro\b(?!\s*se)/i.test(displayName)) return "razer-viper-v3-pro.png";
   if (/\bviper\s*mini\b/i.test(displayName)) return "razer-viper-mini.webp";
   if (/\borochi\s*v2\b/i.test(displayName)) return "razer-orochi-v2.png";
@@ -89,8 +83,6 @@ function computeDeviceImageFilename(displayName: string): string {
   if (/\bterra\s*pro\b/i.test(displayName)) return "teevolution-terra-pro.png";
   if (/\bm-001\b/i.test(displayName)) return "wallhack-m-001.png";
   if (/\bk-001\b/i.test(displayName)) return "wallhack-k-001.png";
-  // Corsair NIGHTSWORD RGB has no product render yet; resolves to the generic
-  // placeholder until art is uploaded (then add ["1b1c:1b5c", ...] above).
   if (/\bnightsword\b/i.test(displayName)) return "unknown-device.png";
   // Newer supported-model artwork resolved from the reported product name. These
   // run after the shared-receiver checks above but before the Pulsar/unknown
@@ -142,14 +134,10 @@ function computeDeviceImageFilename(displayName: string): string {
   if (/\bnoir\s*s1\b/i.test(displayName)) return "noir-s1.png";
   if (/k[\s-]*snake/i.test(displayName)) return "ksnake-x11.png";
   if (/\bf1\s*v2\b/i.test(displayName)) return "atk-f1-v2-ultra-max.png";
-  // Catches any A7 variant whose product id is not pinned above. V3 first, so
-  // an "A7 V3" name is not swallowed by a looser A7 match later.
   if (/\ba7\s*v3\b/i.test(displayName)) return "mchose-a7-v3.png";
   if (/\ba7\s*v2\b/i.test(displayName)) return "mchose-a7-v2.png";
   if (/\ba950\s*pro\s*mg\b/i.test(displayName)) return "dareu-a950-pro-mg.png";
   if (/\bmm711\b/i.test(displayName)) return "coolermaster-mm711.png";
-  // NinjaForce/Ninjutso family — V3 first so "Sora V3" isn't swallowed by a
-  // looser V2 or "Ten" match.
   if (/\bsora\s*v3\b/i.test(displayName)) return "ninjutso-sora-v3.png";
   if (/\bsora\s*v2\b/i.test(displayName)) return "ninjutso-sora-v2.png";
   if (/\bninjutso\b.*\bten\b/i.test(displayName)) return "ninjutso-ten.png";
@@ -194,8 +182,6 @@ function computeDeviceImageFilename(displayName: string): string {
   // retail shell. Keep its artwork match name-based so USB and 2.4 GHz
   // receiver connections resolve to the same product image.
   if (/m2\s*[-_]?\s*nex/i.test(displayName)) return "noir-m2-nex.png";
-  // M1-NEX wired support uses Noir Gear's own reported model name. Match the
-  // full model token so Noir M1 and M1 Lite keep their own artwork/placeholder.
   if (/\bm1\s*[-_]?\s*nex\b/i.test(displayName)) return "noir-m1-nex.png";
   if (/\bnoir\s*e1\b/i.test(displayName)) return "noir-e1.png";
   if (/fantech/i.test(displayName)) return "unknown-device.png";
@@ -234,21 +220,10 @@ export function deviceImage(device: HIDDevice | null | undefined, displayName =
   return LOCAL_OVERRIDES[filename] ?? DEVICE_IMAGE_BASE_URL + filename;
 }
 
-/**
- * The bare filename a device's artwork resolves to (no bucket URL). Lets
- * callers detect placeholder-bound devices without importing the resolver's
- * internals.
- */
 export function deviceImageFilename(displayName = ""): string {
   return resolveDeviceImageFilename(null, displayName);
 }
 
-/**
- * A curated, brand-diverse sample of real product renders (not every device
- * this app supports — just enough to cycle through on the "Add mouse" card
- * before anything is connected). Filenames only, so callers build the full
- * URL with `showcaseDeviceImageUrls`.
- */
 // Every filename here is checked against the R2 bucket directly (curl -o
 // /dev/null -w '%{http_code}') before landing on this list — several
 // filenames resolveDeviceImageFilename can return above 404 because the art
diff --git a/src/app/icons.tsx b/src/shared/icons.tsx
similarity index 70%
rename from src/app/icons.tsx
rename to src/shared/icons.tsx
index 654b8699..ede08527 100644
--- a/src/app/icons.tsx
+++ b/src/shared/icons.tsx
@@ -2,11 +2,11 @@ import { CircleDot, Circle, Eye, EyeOff, Link2, Pencil, RefreshCw, Share2, Trash
 import type { ReactNode } from "react";
 
 export function IconEnabled(): ReactNode {
-  return <Eye size={13} strokeWidth={1.8} stroke="#9fe0b6" aria-hidden="true" />;
+  return <Eye size={13} strokeWidth={1.8} stroke="currentColor" aria-hidden="true" />;
 }
 
 export function IconDisabled(): ReactNode {
-  return <EyeOff size={13} strokeWidth={1.8} stroke="#77777c" aria-hidden="true" />;
+  return <EyeOff size={13} strokeWidth={1.8} stroke="currentColor" aria-hidden="true" />;
 }
 
 export function IconLinked(): ReactNode {
@@ -18,15 +18,15 @@ export function IconUnlinked(): ReactNode {
 }
 
 export function IconRename(): ReactNode {
-  return <Pencil size={13} strokeWidth={1.8} stroke="#8b8b90" aria-hidden="true" />;
+  return <Pencil size={13} strokeWidth={1.8} stroke="currentColor" aria-hidden="true" />;
 }
 
 export function IconRunning(): ReactNode {
-  return <CircleDot size={13} strokeWidth={1.8} stroke="#9fe0b6" aria-hidden="true" />;
+  return <CircleDot size={13} strokeWidth={1.8} stroke="currentColor" aria-hidden="true" />;
 }
 
 export function IconActivate(): ReactNode {
-  return <Circle size={13} strokeWidth={1.8} stroke="#77777c" aria-hidden="true" />;
+  return <Circle size={13} strokeWidth={1.8} stroke="currentColor" aria-hidden="true" />;
 }
 
 export function IconRefresh(): ReactNode {
diff --git a/src/ui/polling-rate.test.ts b/src/shared/polling-rate.test.ts
similarity index 100%
rename from src/ui/polling-rate.test.ts
rename to src/shared/polling-rate.test.ts
diff --git a/src/ui/polling-rate.ts b/src/shared/polling-rate.ts
similarity index 88%
rename from src/ui/polling-rate.ts
rename to src/shared/polling-rate.ts
index 680f4681..69ef0852 100644
--- a/src/ui/polling-rate.ts
+++ b/src/shared/polling-rate.ts
@@ -3,7 +3,6 @@ export function pollingRateText(rate: number): string {
   return Number.isFinite(rate) && rate > 0 ? rate.toLocaleString() : "—";
 }
 
-/** Preserve nearest-step selection for known rates; leave unknown ones blank. */
 export function selectedPollingStep(options: readonly number[], rate: number | null): number | null {
   if (options.length === 0 || rate === null || !Number.isFinite(rate) || rate <= 0) return null;
   const exact = options.indexOf(rate);
diff --git a/src/ui/profile-label.test.ts b/src/shared/profile-label.test.ts
similarity index 91%
rename from src/ui/profile-label.test.ts
rename to src/shared/profile-label.test.ts
index c797cb63..fe5a281f 100644
--- a/src/ui/profile-label.test.ts
+++ b/src/shared/profile-label.test.ts
@@ -1,6 +1,6 @@
 import assert from "node:assert/strict";
 import test from "node:test";
-import { ensureLocale } from "../i18n.ts";
+import { ensureLocale } from "../i18n/index.ts";
 import { profileLabel } from "./profile-label.ts";
 
 test("saved profile names remain exact while missing names get a localized fallback", async () => {
diff --git a/src/ui/profile-label.ts b/src/shared/profile-label.ts
similarity index 69%
rename from src/ui/profile-label.ts
rename to src/shared/profile-label.ts
index d5311bbd..b8fc645b 100644
--- a/src/ui/profile-label.ts
+++ b/src/shared/profile-label.ts
@@ -1,5 +1,5 @@
-import type { InterfaceLocale } from "../interface-preferences";
-import { tp } from "../i18n.ts";
+import type { InterfaceLocale } from "../features/settings/interface-preferences";
+import { tp } from "../i18n/index.ts";
 
 /** Saved names are user data; only the generated numbered fallback is localized. */
 export function profileLabel(locale: InterfaceLocale, names: readonly string[] | undefined, index: number): string {
diff --git a/src/app/social-links.tsx b/src/shared/social-links.tsx
similarity index 92%
rename from src/app/social-links.tsx
rename to src/shared/social-links.tsx
index e574e309..c98de067 100644
--- a/src/app/social-links.tsx
+++ b/src/shared/social-links.tsx
@@ -1,10 +1,5 @@
 import { useEffect, useState, type CSSProperties, type ReactNode } from "react";
 
-/* Shared social/community links and icon marks — used by the launch
-   countdown gate (control.openmouse.app) and the marketing landing page
-   (openmouse.app), so both surfaces link to the same places and render the
-   same GitHub star count without duplicating the SVG marks. */
-
 export const GITHUB_REPO = "OpenMouse-Project/openmouse";
 export const DISCORD_URL = "https://discord.gg/yxC9jzMdw6";
 export const TWITTER_URL = "https://x.com/openmouseapp";
diff --git a/src/app/ui-locale.ts b/src/shared/ui-locale.ts
similarity index 90%
rename from src/app/ui-locale.ts
rename to src/shared/ui-locale.ts
index af68259e..b369e90d 100644
--- a/src/app/ui-locale.ts
+++ b/src/shared/ui-locale.ts
@@ -1,5 +1,5 @@
 import { createContext, useContext } from "react";
-import { detectLocale, loadInterfacePreferences, type InterfaceLocale } from "../interface-preferences";
+import { detectLocale, loadInterfacePreferences, type InterfaceLocale } from "../features/settings/interface-preferences";
 
 /** Display locale is inherited; device commands and stored profile data stay untouched. */
 export const UiLocaleContext = createContext<InterfaceLocale | null>(null);
diff --git a/src/app/ui.tsx b/src/shared/ui.tsx
similarity index 89%
rename from src/app/ui.tsx
rename to src/shared/ui.tsx
index 5cee43a8..f2a43684 100644
--- a/src/app/ui.tsx
+++ b/src/shared/ui.tsx
@@ -1,12 +1,16 @@
-import { displayText } from "../i18n";
+import { displayText } from "../i18n/index";
 import { useUiLocale } from "./ui-locale";
 import { useEffect, useId, useRef, useState, type ReactNode } from "react";
-import { Check, ChevronDown, Minus, Plus } from "lucide-react";
+import {
+  Activity, ArrowUpFromLine, AudioWaveform, Check, ChevronDown, Combine, Crosshair, Gauge, Gem, Hand,
+  LightbulbOff, Minus, MousePointerClick, Plus, Radar, Rocket, Ruler, ShieldCheck, Timer, Vibrate, Waves, Zap,
+  type LucideIcon,
+} from "lucide-react";
 import type { MouseStatus } from "@openmouse/protocol/drivers/mouse-types";
-import { batteryFillWidth, batteryIconState, batteryLevel } from "../ui/battery-icon";
-import { selectedPollingStep } from "../ui/polling-rate";
-import { t } from "../i18n";
-import type { InterfaceLocale } from "../interface-preferences";
+import { batteryFillWidth, batteryIconState, batteryLevel } from "./battery-icon";
+import { selectedPollingStep } from "./polling-rate";
+import { t } from "../i18n/index";
+import type { InterfaceLocale } from "../features/settings/interface-preferences";
 
 export function SwitchButton({
   id,
@@ -45,6 +49,34 @@ export function SwitchButton({
   );
 }
 
+const FEATURE_ICONS: readonly [RegExp, LucideIcon][] = [
+  [/motion-sync/, Activity],
+  [/angle-snap/, Ruler],
+  [/ripple/, Waves],
+  [/slamclick/, MousePointerClick],
+  [/jitter/, AudioWaveform],
+  [/glass/, Gem],
+  [/max-fps/, Gauge],
+  [/led-lift-off/, LightbulbOff],
+  [/handed/, Hand],
+  [/lift-off|lod/, ArrowUpFromLine],
+  [/debounce/, Timer],
+  [/mistouch|wheel-guard/, ShieldCheck],
+  [/combination/, Combine],
+  [/turbo|hyper/, Zap],
+  [/performance-mode/, Rocket],
+  [/long-range/, Radar],
+  [/wheel-accel/, Gauge],
+  [/haptic/, Vibrate],
+  [/sensor|cpi|dpi/, Crosshair],
+];
+
+function featureIcon(id: string | undefined): LucideIcon | null {
+  if (!id) return null;
+  for (const [pattern, icon] of FEATURE_ICONS) if (pattern.test(id)) return icon;
+  return null;
+}
+
 export function SwitchRow({
   id,
   label,
@@ -53,6 +85,7 @@ export function SwitchRow({
   onChange,
   hidden,
   labelId,
+  icon,
 }: {
   id?: string;
   label: string;
@@ -61,12 +94,30 @@ export function SwitchRow({
   onChange: (next: boolean) => void;
   hidden?: boolean;
   labelId?: string;
+  icon?: LucideIcon;
 }): ReactNode {
   const __uiLocale = useUiLocale();
   if (hidden) return null;
+  const Icon = icon ?? featureIcon(id);
+  const unsupported = value === null || value === undefined;
+  const state = unsupported ? "na" : value ? "on" : "off";
+  const inert = unsupported || disabled === true;
   return (
-    <div className="switch-row">
-      <span id={labelId}>{displayText(__uiLocale, label)}</span>
+    <div
+      className={`switch-row${Icon ? " has-icon" : ""}`}
+      data-state={state}
+      data-inert={inert ? "true" : undefined}
+      onClick={(event) => {
+        if (inert || (event.target as HTMLElement).closest("button, a, input, select, label")) return;
+        onChange(value !== true);
+      }}
+    >
+      {Icon ? (
+        <span className="switch-row-icon" aria-hidden="true">
+          <Icon strokeWidth={1.8} />
+        </span>
+      ) : null}
+      <span id={labelId} className="switch-row-label">{displayText(__uiLocale, label)}</span>
       <SwitchButton id={id} value={value} label={displayText(__uiLocale, label)} disabled={disabled} onChange={onChange} />
     </div>
   );
diff --git a/src/admin.css b/src/styles/admin.css
similarity index 93%
rename from src/admin.css
rename to src/styles/admin.css
index 5a093fff..f8622847 100644
--- a/src/admin.css
+++ b/src/styles/admin.css
@@ -1,9 +1,3 @@
-/* Gated admin dashboard (see functions/api/admin/*). Self-contained — not
-   shared with the rest of the app's stylesheets. Bento-grid layout: one
-   oversized "live" tile carries the page (this is a live-monitoring tool
-   first), a wide chart sits beside it, then supporting stats and tables
-   fill in underneath at a smaller scale. */
-
 :root{ color-scheme: dark; }
 *{ box-sizing:border-box; }
 html,body{ margin:0; padding:0; background:#0b0c0e; }
@@ -35,7 +29,6 @@ html,body{ margin:0; padding:0; background:#0b0c0e; }
 
 .adm-root{ background:var(--bg); color:var(--text); font-family:var(--font-body); min-height:100vh; }
 
-/* ---------- top bar ---------- */
 .adm-topbar{
   display:flex; align-items:center; justify-content:space-between; gap:16px;
   padding:18px 32px; border-bottom:1px solid var(--border-soft);
@@ -59,7 +52,6 @@ html,body{ margin:0; padding:0; background:#0b0c0e; }
 .adm-content{ padding:24px 32px 60px; max-width:1320px; margin:0 auto; }
 .adm-login-error{ color:var(--bad); font-size:12.5px; font-family:var(--font-mono); margin:0 0 14px; }
 
-/* ---------- bento grid ---------- */
 .adm-bento{
   display:grid;
   grid-template-columns: repeat(4, 1fr);
@@ -85,7 +77,6 @@ html,body{ margin:0; padding:0; background:#0b0c0e; }
 
 .adm-tile{ background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:20px; display:flex; flex-direction:column; }
 
-/* ---- hero live tile ---- */
 .adm-live-tile{ justify-content:space-between; background:radial-gradient(140% 120% at 100% 0%, var(--live-dim), transparent 55%), var(--panel); }
 .adm-live-label{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted); letter-spacing:.04em; }
 .adm-pulse{ position:relative; width:9px; height:9px; border-radius:50%; background:var(--live); flex:none; }
@@ -100,7 +91,6 @@ html,body{ margin:0; padding:0; background:#0b0c0e; }
 .adm-ring-fill{ height:100%; background:linear-gradient(90deg, var(--indigo), var(--live)); }
 .adm-ring-label{ font-family:var(--font-mono); font-size:11px; color:var(--muted); white-space:nowrap; }
 
-/* ---- chart tile ---- */
 .adm-chart-tile{ gap:4px; }
 .adm-chart-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:6px; }
 .adm-chart-title{ font-family:var(--font-display); font-size:13.5px; font-weight:600; margin:0; }
@@ -111,7 +101,6 @@ html,body{ margin:0; padding:0; background:#0b0c0e; }
 .adm-axis-label{ font-size:10px; color:var(--faint); font-family:var(--font-mono); }
 .adm-bar-rect{ cursor:pointer; }
 
-/* ---- small stat tiles ---- */
 .adm-mini{ gap:8px; padding:16px 18px; }
 .adm-mini-label{ font-size:10.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; display:flex; align-items:center; gap:6px; }
 .adm-mini-label svg{ width:12px; height:12px; opacity:.8; }
@@ -122,7 +111,6 @@ html,body{ margin:0; padding:0; background:#0b0c0e; }
 .adm-pill.is-up{ color:var(--live); background:var(--live-dim); }
 .adm-pill.is-down{ color:var(--bad); background:var(--bad-dim); }
 
-/* ---- table tiles ---- */
 .adm-table-tile .adm-chart-title{ margin-bottom:2px; }
 table.adm-table{ width:100%; border-collapse:collapse; font-size:12.5px; margin-top:12px; }
 .adm-table thead th{ text-align:left; font-size:10px; color:var(--faint); letter-spacing:.06em; text-transform:uppercase; font-weight:500; padding:0 8px 8px; border-bottom:1px solid var(--border); }
@@ -135,7 +123,6 @@ table.adm-table{ width:100%; border-collapse:collapse; font-size:12.5px; margin-
 .adm-table-bar{ width:44px; height:4px; background:var(--track); flex:none; border-radius:2px; overflow:hidden; }
 .adm-table-bar-fill{ height:100%; background:var(--indigo); }
 
-/* ---- heatmap tile ---- */
 .adm-heatmap{ display:flex; flex-direction:column; gap:4px; margin-top:10px; }
 .adm-heatmap-row{ display:grid; grid-template-columns:24px repeat(7,1fr); gap:4px; align-items:center; }
 .adm-hm-label{ font-size:9.5px; color:var(--faint); font-family:var(--font-mono); }
@@ -143,7 +130,6 @@ table.adm-table{ width:100%; border-collapse:collapse; font-size:12.5px; margin-
 .adm-hm-foot{ display:grid; grid-template-columns:24px repeat(7,1fr); gap:4px; margin-top:2px; }
 .adm-hm-foot span{ text-align:center; font-size:9.5px; color:var(--faint); font-family:var(--font-mono); }
 
-/* ---- detail kv tile ---- */
 .adm-kv-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:0; margin-top:10px; }
 .adm-kv{ padding:9px 0; border-bottom:1px solid var(--border-soft); }
 .adm-kv:nth-child(odd){ padding-right:14px; }
@@ -160,7 +146,6 @@ table.adm-table{ width:100%; border-collapse:collapse; font-size:12.5px; margin-
   }
 }
 
-/* ---------- login ---------- */
 .adm-login{
   font-family:var(--font-body); background:var(--bg); color:var(--text); min-height:100vh;
   display:flex; flex-direction:column; gap:14px; align-items:flex-start; justify-content:center;
diff --git a/src/styles/areas/advanced.css b/src/styles/areas/advanced.css
new file mode 100644
index 00000000..bec69e35
--- /dev/null
+++ b/src/styles/areas/advanced.css
@@ -0,0 +1,231 @@
+#signal-settings { gap: 4px; }
+#signal-output {
+  background: none;
+  padding: 0;
+  font-size: 28px;
+  line-height: 1.1;
+  letter-spacing: -0.02em;
+}
+#signal-detail { padding-inline-end: 64px; }
+#dongle-led-settings { min-height: 76px; justify-content: center; }
+
+#sleep-settings, #low-power-settings {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  column-gap: 24px;
+  row-gap: 4px;
+  align-items: center;
+}
+#sleep-settings > .setting-heading { min-width: 0; }
+#sleep-settings:has(#sleep-toggle) > .setting-heading { grid-column: 1 / -1; }
+#sleep-settings > .option-menu, #sleep-settings > .sleep-time-picker { grid-column: 2; }
+#sleep-settings:has(#sleep-toggle) > .option-menu,
+#sleep-settings:has(#sleep-toggle) > .sleep-time-picker { margin-top: 8px; }
+#low-power-settings > .option-menu { grid-column: 2; grid-row: 1 / 3; }
+#low-power-note { grid-column: 1; grid-row: 2; max-width: 48ch; }
+.sleep-time-picker { display: flex; align-items: center; gap: 6px; max-width: 240px; }
+.sleep-time-picker label { display: grid; gap: 4px; min-width: 0; text-align: center; color: var(--text-3); font-size: var(--fs-small); }
+.sleep-time-picker input[type="number"] { width: 56px; min-width: 0; text-align: center; padding-inline: 4px; font-variant-numeric: tabular-nums; }
+.sleep-time-sep { align-self: start; padding-top: 6px; color: var(--text-3); }
+
+:is(#incott-settings, #finalmouse-settings) { gap: 0; }
+:is(#incott-settings, #finalmouse-settings) > .setting-heading { margin-bottom: 8px; }
+:is(#incott-settings, #finalmouse-settings) > .field-label {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 20px;
+  min-height: 56px;
+  padding-block: 10px;
+  margin: 0;
+  border-top: 1px solid var(--line-1);
+  color: var(--text-2);
+  font-size: var(--fs-body);
+}
+:is(#incott-settings, #finalmouse-settings) .option-menu { flex: 0 1 220px; }
+#incott-fire-key-interval { width: 88px; text-align: end; font-variant-numeric: tabular-nums; }
+#finalmouse-perfect-polling .stat-row { display: flex; justify-content: space-between; gap: 16px; padding-block: 12px; border-block: 1px solid var(--line-1); color: var(--text-3); }
+#perfect-polling-latency { color: var(--text-1); font-size: 18px; font-weight: 650; font-variant-numeric: tabular-nums; }
+#perfect-polling-output { color: var(--ok); background: color-mix(in srgb, var(--ok) 13%, transparent); }
+
+#atk-receiver-status .button-remap-list { display: grid; }
+#atk-receiver-status .button-remap-row { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; min-height: 40px; padding-block: 10px; border-top: 1px solid var(--line-1); }
+#atk-receiver-status .button-remap-row > span { color: var(--text-3); }
+#atk-receiver-status .button-remap-row > output { font-variant-numeric: tabular-nums; text-align: end; overflow-wrap: anywhere; }
+#atk-receiver-status .setting-action { justify-content: flex-end; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--line-1); }
+#atk-receiver-status .setting-action > small { flex: 1 1 220px; }
+#atk-receiver-status .setting-action:has(button + button) > small { flex-basis: 100%; }
+#atk-dongle-light > .segmented { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; gap: 4px; }
+#atk-dongle-light > .segmented > button { min-width: 0; height: auto; min-height: 36px; padding: 8px 10px; white-space: normal; line-height: 1.4; }
+#atk-dongle-light > small:first-of-type { color: var(--text-2); }
+
+#firmware-update { gap: 0; padding: 0; }
+.fw-collapse { min-width: 0; }
+.fw-collapse > summary { list-style: none; cursor: pointer; padding: 16px 18px; border-radius: var(--r-md); }
+.fw-summary-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
+.fw-title { flex: 1; font-size: var(--fs-h2); font-weight: 600; }
+.fw-summary-row::after, .fw-details > summary::after,
+.device-debug-raw > summary::after, .keyboard-layout-details > summary::after {
+  content: "";
+  width: 7px;
+  height: 7px;
+  flex: none;
+  border-inline-end: 1.5px solid var(--text-3);
+  border-bottom: 1.5px solid var(--text-3);
+  transform: rotate(45deg);
+  transition: transform var(--t-base) var(--ease);
+}
+.fw-collapse[open] > summary .fw-summary-row::after,
+.fw-details[open] > summary::after,
+.device-debug-raw[open] > summary::after,
+.keyboard-layout-details[open] > summary::after { transform: rotate(-135deg); }
+.fw-head-actions { display: flex; align-items: center; gap: 10px; }
+#firmware-update-output, #firmware-update .fw-badge-available {
+  display: inline-flex;
+  align-items: center;
+  min-height: 22px;
+  padding: 3px 7px;
+  border-radius: var(--r-xs);
+  background: var(--surface-2);
+  color: var(--text-3);
+  font-size: var(--fs-small);
+  font-weight: 550;
+  line-height: 1.3;
+}
+#firmware-update .fw-badge-available { color: var(--ok); background: color-mix(in srgb, var(--ok) 13%, transparent); }
+.fw-current { display: grid; gap: 6px; padding-top: 20px; color: var(--text-3); font-size: var(--fs-meta); }
+.fw-current strong { color: var(--text-1); font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
+.fw-collapse > .setting-note { padding: 0 18px 18px; }
+.fw-device { border-top: 1px solid var(--line-1); padding: 12px 18px; }
+.fw-device .setting-heading { gap: 10px; min-height: 24px; }
+.fw-device .setting-heading > div > :is(span, p) { color: var(--text-2); font-size: var(--fs-body); font-weight: 550; }
+.fw-details { margin-top: 8px; color: var(--text-2); font-size: var(--fs-meta); }
+.fw-details > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 32px; list-style: none; cursor: pointer; color: var(--text-2); font-variant-numeric: tabular-nums; }
+.fw-details > summary:hover { color: var(--text-1); }
+.fw-details > :is(p, .setting-eyebrow, ul) { margin-top: 8px; }
+.fw-details > p { line-height: 1.5; white-space: pre-line; }
+.fw-details .setting-eyebrow { display: block; color: var(--text-1); font-weight: 550; }
+.fw-history { display: grid; gap: 6px; list-style: none; padding: 0; color: var(--text-3); font-variant-numeric: tabular-nums; }
+.fw-meta { padding: 8px 18px 16px; color: var(--text-3); font-size: var(--fs-small); }
+#firmware-update .setting-action { padding: 12px 18px 16px; border-top: 1px solid var(--line-1); }
+#firmware-update .setting-action > span { display: flex; flex-wrap: wrap; gap: 8px; }
+.om-overview-grid #firmware-update { height: 100%; }
+
+:is(#device-debug-details, #logitech-device-details) .setting-card { padding: 0; background: none; box-shadow: none; gap: 16px; }
+.device-debug-overview, #logitech-detail-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
+:is(.device-debug-overview, #logitech-detail-list) > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; min-width: 0; padding-block: 10px; border-top: 1px solid var(--line-1); }
+:is(.device-debug-overview, #logitech-detail-list) small { color: var(--text-3); font-size: var(--fs-meta); flex: 0 1 auto; }
+:is(.device-debug-overview, #logitech-detail-list) span { color: var(--text-1); text-align: end; font-size: var(--fs-meta); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; min-width: 0; }
+.device-debug-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--line-1); }
+#diagnostic-download-status { color: var(--text-3); font-size: var(--fs-meta); flex: 1 1 200px; }
+.device-debug-raw { min-width: 0; background: var(--well); border-radius: var(--r-sm); box-shadow: var(--inset-shadow); }
+.device-debug-raw > summary, .keyboard-layout-details > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; list-style: none; min-height: 40px; padding: 10px 12px; cursor: pointer; color: var(--text-2); font-size: var(--fs-meta); font-weight: 550; }
+.device-debug-snapshot { max-height: 360px; min-width: 0; overflow: auto; padding: 12px; border-top: 1px solid var(--line-1); color: var(--text-2); font: 12px/1.65 var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere; user-select: text; }
+aside.testing-note { padding-inline: 2px; color: var(--text-3); font-size: var(--fs-meta); line-height: 1.5; }
+aside.testing-note strong { display: none; }
+
+.keyboard-panel { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 16px; min-width: 0; align-items: start; }
+.keyboard-panel [hidden] { display: none !important; }
+.keyboard-status { grid-column: 1 / -1; padding: 12px 16px; border-radius: var(--r-sm); background: var(--surface-2); color: var(--text-2); overflow-wrap: anywhere; }
+.keyboard-identity { display: grid; min-width: 0; }
+.keyboard-identity > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; min-width: 0; min-height: 40px; padding-block: 10px; border-top: 1px solid var(--line-1); }
+.keyboard-identity dt { color: var(--text-3); font-size: var(--fs-meta); }
+.keyboard-identity dd { text-align: end; font-size: var(--fs-meta); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; min-width: 0; }
+#keyboard-trigger-card, .keyboard-workspace-card:has(.keyboard-matrix), .keyboard-workspace-card:has(.keyboard-macro-events) { grid-column: 1 / -1; }
+.keyboard-key-deck { padding: 16px; border-radius: var(--r-md); background: var(--well); box-shadow: var(--inset-shadow); min-width: 0; }
+.keyboard-matrix { display: grid; gap: 6px; min-width: 0; overflow-x: auto; padding: 4px; }
+.keyboard-matrix-row { display: grid; grid-auto-columns: minmax(36px, 1fr); grid-auto-flow: column; gap: 6px; min-width: 680px; }
+.keyboard-key { display: grid; place-items: center; min-width: 0; min-height: 42px; padding: 4px; border-radius: var(--r-sm); background: var(--key); box-shadow: var(--key-shadow); color: var(--text-2); font-size: var(--fs-meta); font-weight: 550; overflow-wrap: anywhere; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
+.keyboard-key:hover:not(:disabled) { background: var(--btn-hover); color: var(--text-1); }
+.keyboard-key.is-selected { background: var(--accent-soft); color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent-line); }
+.keyboard-key.is-empty { visibility: hidden; }
+.keyboard-key.is-long { font-size: var(--fs-small); }
+.keyboard-key:disabled { opacity: 0.45; }
+.keyboard-selection-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 12px; }
+.keyboard-selection-count { color: var(--text-3); font-size: var(--fs-meta); margin-inline-end: auto; }
+.keyboard-trigger-editor { display: grid; gap: 16px; padding-top: 8px; }
+.keyboard-editor-heading { display: flex; justify-content: space-between; align-items: start; gap: 16px; }
+.keyboard-editor-heading h3 { font-size: var(--fs-h2); font-weight: 600; }
+.keyboard-editor-heading p { margin-top: 4px; color: var(--text-3); font-size: var(--fs-meta); }
+.keyboard-selected-chips { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
+.keyboard-selected-chips span { padding: 4px 8px; border-radius: var(--r-xs); background: var(--surface-2); color: var(--text-2); font-size: var(--fs-small); }
+.keyboard-trigger-controls { display: grid; gap: 0; }
+.keyboard-tuning-group { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 1fr); gap: 8px 32px; padding-block: 18px; border-top: 1px solid var(--line-1); }
+.keyboard-tuning-group h4 { grid-column: 1; font-size: var(--fs-body); font-weight: 600; }
+.keyboard-tuning-group > p { grid-column: 1; color: var(--text-3); font-size: var(--fs-meta); max-width: 48ch; }
+.keyboard-tuning-group > .stepper-slider { grid-column: 2; }
+.keyboard-tuning-group > .stepper-slider:first-of-type { grid-row: 1 / 3; }
+.keyboard-empty { color: var(--text-3); font-size: var(--fs-meta); padding-block: 12px; }
+.keyboard-fields { display: grid; gap: 16px; border: 0; padding: 0; margin: 0; min-width: 0; }
+.keyboard-workspace-card > .om-btn { align-self: flex-end; }
+.keyboard-fields > .om-btn { justify-self: end; }
+.keyboard-field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); align-items: end; gap: 12px; }
+.keyboard-field { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-width: 0; color: var(--text-2); font-size: var(--fs-meta); }
+.keyboard-field :is(input, select) { width: 54%; min-width: 0; font-variant-numeric: tabular-nums; }
+.keyboard-field-grid .keyboard-field { display: grid; gap: 6px; }
+.keyboard-field-grid .keyboard-field :is(input, select) { width: 100%; }
+.keyboard-inline-form { display: flex; gap: 8px; align-items: end; }
+.keyboard-inline-form > .keyboard-field { flex: 1; }
+.keyboard-color-field { display: flex; align-items: center; justify-content: space-between; gap: 16px; color: var(--text-2); font-size: var(--fs-meta); }
+.keyboard-save-confirm { padding: 12px; border-radius: var(--r-sm); background: var(--well); display: flex; flex-wrap: wrap; gap: 8px; }
+.keyboard-save-confirm > p { flex-basis: 100%; color: var(--text-2); font-size: var(--fs-meta); }
+.keyboard-macro-events { display: grid; gap: 0; max-height: 480px; overflow: auto; }
+.keyboard-macro-event { display: grid; grid-template-columns: 24px minmax(80px, 0.7fr) minmax(140px, 1.5fr) minmax(100px, 1fr) auto; gap: 12px; align-items: end; border-top: 1px solid var(--line-1); padding-block: 12px; }
+.keyboard-macro-event > span { color: var(--text-3); font-size: var(--fs-meta); align-self: center; font-variant-numeric: tabular-nums; }
+.keyboard-macro-event > .keyboard-field { display: grid; gap: 6px; }
+.keyboard-macro-event > .keyboard-field :is(input, select) { width: 100%; }
+.keyboard-sensor-readout { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-top: 12px; border-top: 1px solid var(--line-1); }
+.keyboard-sensor-readout strong { color: var(--text-3); font-size: var(--fs-meta); font-weight: 500; }
+.keyboard-sensor-readout output { color: var(--text-1); font-size: 28px; font-weight: 650; font-variant-numeric: tabular-nums; }
+.keyboard-layout-details { background: var(--well); border-radius: var(--r-sm); min-width: 0; overflow: auto; }
+.keyboard-layout-details table { width: 100%; border-collapse: collapse; text-align: start; font-size: var(--fs-meta); font-variant-numeric: tabular-nums; }
+.keyboard-layout-details :is(th, td) { padding: 8px 12px; border-top: 1px solid var(--line-1); text-align: start; }
+.keyboard-layout-details th { color: var(--text-3); font-weight: 500; }
+
+#capture-dialog { width: min(1000px, calc(100vw - 48px)); max-width: none; height: min(88vh, 900px); }
+.capture-layout { display: flex; flex-direction: column; height: 100%; min-height: 0; }
+#capture-dialog .om-dialog-head { padding-bottom: 14px; }
+#capture-dialog .om-dialog-body { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: auto; }
+.capture-intro { color: var(--text-3); font-size: var(--fs-meta); line-height: 1.55; }
+.capture-intro strong { color: var(--text-2); font-weight: 600; }
+.capture-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
+#capture-status { flex-basis: 100%; color: var(--text-3); font-size: var(--fs-meta); min-height: 18px; }
+#capture-diff { flex: 1; min-height: 120px; overflow: auto; padding: 12px; border-radius: var(--r-sm); background: var(--well); box-shadow: var(--inset-shadow); }
+.capture-empty { color: var(--text-3); font-size: var(--fs-meta); }
+.capture-sector + .capture-sector { margin-top: 16px; }
+.capture-sector-heading { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; }
+.capture-sector-heading strong { font-size: var(--fs-meta); font-weight: 600; font-variant-numeric: tabular-nums; }
+.capture-result { font-size: var(--fs-small); font-weight: 550; }
+.capture-result.is-ok { color: var(--ok); }
+.capture-result.is-bad { color: var(--bad); }
+.capture-changes { display: grid; margin-top: 8px; gap: 4px; }
+.capture-change { display: flex; align-items: baseline; gap: 16px; font-size: var(--fs-meta); }
+.capture-change code { font: 12px/1.6 var(--font-mono); color: var(--text-2); min-width: 70px; user-select: text; }
+.capture-change code:first-child { color: var(--text-3); min-width: 48px; }
+.capture-change span { color: var(--text-2); }
+.capture-change span.is-checksum { color: var(--text-3); }
+.capture-actions-label { color: var(--text-3); font-size: var(--fs-meta); margin-bottom: 8px; }
+#capture-action-list { display: flex; flex-wrap: wrap; gap: 6px; }
+#capture-action-list button { background: var(--well); color: var(--text-3); box-shadow: var(--inset-shadow); }
+#capture-action-list button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent-line); }
+#capture-notes { width: 100%; min-height: 64px; }
+
+@media (max-width: 1180px) {
+  #pulsar-advanced { grid-template-columns: minmax(0, 1fr); }
+}
+@media (max-width: 700px) {
+  .device-debug-overview, #logitech-detail-list { grid-template-columns: minmax(0, 1fr); }
+  .keyboard-tuning-group { grid-template-columns: minmax(0, 1fr); gap: 10px; }
+  .keyboard-tuning-group > .stepper-slider, .keyboard-tuning-group > .stepper-slider:first-of-type { grid-column: 1; grid-row: auto; }
+  .keyboard-macro-event { grid-template-columns: 24px minmax(0, 1fr) minmax(0, 1fr); }
+  .keyboard-macro-event > .keyboard-field:last-of-type { grid-column: 2; }
+  .keyboard-editor-heading { flex-direction: column; }
+  .keyboard-key-deck { padding: 8px; }
+  #sleep-settings, #low-power-settings { grid-template-columns: minmax(0, 1fr); gap: 10px; }
+  #sleep-settings > .option-menu, #sleep-settings > .sleep-time-picker,
+  #low-power-settings > .option-menu, #low-power-note { grid-column: 1; grid-row: auto; }
+  #low-power-note { order: 0; }
+  #low-power-settings > .option-menu { order: 1; }
+  .fw-head-actions { flex-wrap: wrap; }
+  #capture-dialog { width: calc(100vw - 24px); max-height: calc(100vh - 32px); height: auto; }
+}
diff --git a/src/styles/areas/buttons.css b/src/styles/areas/buttons.css
new file mode 100644
index 00000000..3ef1daed
--- /dev/null
+++ b/src/styles/areas/buttons.css
@@ -0,0 +1,220 @@
+.button-remap-list { display: grid; min-width: 0; }
+.button-remap-row, :is(#button-mapping-settings, #ksnake-scroll-settings) .button-map-row {
+  display: grid; grid-template-columns: minmax(0, 1fr) minmax(160px, 42%);
+  align-items: center; gap: 16px; min-height: 44px; border-top: 1px solid var(--line-1);
+}
+.button-remap-row:first-child, :is(#button-mapping-settings, #ksnake-scroll-settings) .button-map-row:first-child { border-top: 0; }
+.button-remap-row > span { color: var(--text-2); font-weight: 500; }
+.button-remap-row > output { color: var(--text-3); text-align: end; font-size: var(--fs-meta); overflow-wrap: anywhere; }
+.button-remap-row .option-menu { width: 100%; min-width: 0; }
+.button-remap-row.is-staged > span { color: var(--accent); }
+.button-remap-diverted { display: grid; gap: 12px; padding-top: 12px; border-top: 1px solid var(--line-1); color: var(--warn); font-size: var(--fs-meta); }
+.button-remap-diverted button { justify-self: start; }
+:is(#button-mapping-settings, #ksnake-scroll-settings) .button-map-list { display: grid; }
+.button-map-control { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
+.button-map-index { display: inline-grid; place-items: center; width: 24px; height: 24px; flex: none; background: var(--well); color: var(--text-3); border-radius: var(--r-xs); font-size: var(--fs-small); font-variant-numeric: tabular-nums; }
+.button-map-name { color: var(--text-2); font-weight: 500; }
+.button-map-connector { display: none; }
+.button-map-select-wrap { min-width: 0; }
+.button-map-select-wrap select { width: 100%; }
+#egg-spdt-settings .field-label { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 44px; margin: 0; border-top: 1px solid var(--line-1); }
+#egg-spdt-settings .option-menu { width: 42%; min-width: 160px; }
+#egg-button-settings .setting-card { padding: 0; background: none; box-shadow: none; }
+#egg-button-list { display: grid; }
+#egg-button-list > div { display: grid; grid-template-columns: minmax(100px, 1fr) 100px minmax(160px, 1.5fr); gap: 16px; align-items: center; padding-block: 12px; border-top: 1px solid var(--line-1); }
+#egg-button-list > div:first-child { border-top: 0; }
+#egg-button-list strong { font-weight: 500; }
+#egg-button-list .egg-tile-label { display: grid; gap: 6px; min-width: 0; color: var(--text-3); font-size: var(--fs-meta); }
+#egg-button-list .egg-tile-field { width: 100%; }
+#egg-button-list .option-menu { width: 100%; min-width: 0; }
+:is(#lunafury-buttons, #lunafury-wheel-guard) .stepper-slider + .stepper-slider { padding-top: 16px; border-top: 1px solid var(--line-1); }
+#lunafury-buttons .field-label { display: grid; gap: 8px; }
+#debounce-settings > .option-menu { width: min(100%, 240px); }
+#finalmouse-tmr-settings > .segmented { align-self: start; }
+.tmr-side { display: grid; gap: 16px; padding-top: 12px; border-top: 1px solid var(--line-1); }
+.tmr-side .field-label { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0; min-height: 40px; }
+.tmr-side .option-menu { width: 50%; min-width: 160px; }
+.tmr-side .stat-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 40px; border-top: 1px solid var(--line-1); color: var(--text-3); }
+.tmr-side .stat-row output { color: var(--text-1); font-weight: 600; }
+
+:is(#logitech-analog-button-settings, #magnetic-button-settings) { min-width: 0; container-type: inline-size; }
+.superstrike-tuning-card { gap: 16px; }
+.superstrike-presets { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding-bottom: 16px; border-bottom: 1px solid var(--line-1); }
+.superstrike-presets select { flex: 1 1 220px; min-width: 0; }
+.superstrike-presets .icon-button { width: auto; padding-inline: 10px; font-size: var(--fs-meta); font-weight: 550; }
+.superstrike-presets-note { width: 100%; padding-top: 4px; color: var(--text-3); font-size: var(--fs-meta); }
+.superstrike-press-meters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; padding-block: 4px; }
+.superstrike-press-meter { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; color: var(--text-3); font-size: var(--fs-meta); }
+.superstrike-press-meter > div { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 3px; }
+.superstrike-press-meter i { position: relative; height: 8px; border-radius: var(--r-xs); background: var(--surface-4); }
+.superstrike-press-meter i[data-on="true"] { background: var(--accent); }
+.superstrike-press-meter i[data-actuation="true"]::after { content: ""; position: absolute; inset: -3px 0; border: 1px solid var(--text-2); border-radius: var(--r-xs); }
+.superstrike-tabs, .button-map-layers { display: inline-flex; align-self: start; justify-self: center; gap: 2px; padding: 3px; background: var(--well); box-shadow: var(--inset-shadow); border-radius: var(--r-sm); max-width: 100%; }
+.superstrike-tabs { align-self: flex-start; }
+.superstrike-tabs button, .button-map-layers button { min-height: 30px; padding: 6px 14px; border-radius: var(--r-xs); color: var(--text-3); font-size: var(--fs-meta); font-weight: 600; }
+.superstrike-tabs button[aria-selected="true"], .button-map-layers button[aria-selected="true"] { background: var(--key); box-shadow: var(--key-shadow); color: var(--text-1); }
+.superstrike-tuning-panels { min-width: 0; }
+.superstrike-independent-panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
+.superstrike-tuning-panels[data-superstrike-mode="both"] .superstrike-independent-panel,
+.superstrike-tuning-panels[data-superstrike-mode="independent"] .superstrike-both-panel { display: none; }
+.superstrike-button-card { min-width: 0; margin: 0; padding: 0; border: 0; }
+.superstrike-button-card legend { padding: 0 0 8px; color: var(--text-1); font-size: var(--fs-body); font-weight: 600; }
+.superstrike-button-card > p { color: var(--text-3); font-size: var(--fs-meta); padding-bottom: 8px; }
+.superstrike-button-dot { display: none; }
+.superstrike-control-row { display: grid; grid-template-columns: minmax(140px, .6fr) minmax(0, 1fr); align-items: center; gap: 24px; padding-block: 16px; border-top: 1px solid var(--line-1); }
+.superstrike-control-row label { color: var(--text-1); font-weight: 550; }
+.superstrike-control-row label small { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin-top: 4px; color: var(--text-3); font-size: var(--fs-small); font-weight: 400; }
+.superstrike-steps { min-width: 0; }
+.superstrike-steps > div { display: flex; flex-wrap: wrap; gap: 3px; padding: 3px; border-radius: var(--r-sm); background: var(--well); box-shadow: var(--inset-shadow); }
+.superstrike-steps button { flex: 1 0 24px; height: 32px; min-width: 24px; padding-inline: 4px; border-radius: var(--r-xs); color: var(--text-3); font-size: var(--fs-meta); font-weight: 600; font-variant-numeric: tabular-nums; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
+.superstrike-steps button:hover:not(:disabled) { color: var(--text-1); background: var(--glint); }
+.superstrike-steps button[aria-pressed="true"] { background: var(--key); box-shadow: var(--key-shadow); color: var(--accent); }
+.superstrike-steps button:disabled { opacity: .4; cursor: default; }
+.superstrike-rapid-controls { display: grid; gap: 8px; min-width: 0; }
+.superstrike-switch { justify-self: start; min-width: 100px; }
+.superstrike-switch button { padding-inline: 10px; }
+.superstrike-independent-panel .superstrike-control-row { grid-template-columns: 1fr; gap: 10px; }
+.superstrike-apply-button, .button-remap-diverted button, .easy-switch-confirm-actions button { display: inline-flex; justify-content: center; align-items: center; min-height: 32px; padding: 6px 12px; border-radius: var(--r-sm); background: var(--btn); box-shadow: var(--btn-shadow); color: var(--text-1); font-size: var(--fs-meta); font-weight: 600; }
+.superstrike-apply-button:hover:not(:disabled), .button-remap-diverted button:hover:not(:disabled), .easy-switch-confirm-actions button:hover { background: var(--btn-hover); }
+.superstrike-apply-button:disabled { opacity: .45; }
+.superstrike-button-card > .superstrike-apply-button { margin-top: 4px; }
+.magnetic-note { color: var(--text-3); font-size: var(--fs-meta); line-height: 1.5; }
+.magnetic-calibration { display: grid; gap: 12px; padding-top: 16px; border-top: 1px solid var(--line-1); }
+.magnetic-calibration-head { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
+.magnetic-calibration-head > div { display: grid; gap: 4px; }
+.magnetic-calibration-head strong { font-weight: 550; }
+.magnetic-calibration-head p, .magnetic-calibration-progress p { color: var(--text-3); font-size: var(--fs-meta); line-height: 1.5; }
+.magnetic-calibration-head button { flex: none; }
+.magnetic-calibration-progress { display: grid; gap: 12px; padding: 12px; border-radius: var(--r-sm); background: var(--well); }
+.magnetic-calibration-progress button { justify-self: start; }
+.magnetic-calibration-progress[data-phase="done"] p { color: var(--ok); }
+.magnetic-calibration-progress[data-phase="failed"] p { color: var(--bad); }
+
+#logitech-button-map { min-width: 0; container-type: inline-size; }
+.button-map-heading { flex-wrap: wrap; }
+.button-map-status { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-inline-start: auto; color: var(--text-3); font-size: var(--fs-meta); }
+.button-map-status strong { font-weight: 500; color: var(--text-2); }
+.button-map-status span { display: inline-flex; align-items: center; gap: 5px; font-variant-numeric: tabular-nums; }
+.button-map-status .battery-icon { width: 18px; height: 9px; }
+.button-map-body { display: grid; grid-template-columns: 224px minmax(0, 1fr); gap: 24px; }
+.button-map-commands { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
+.button-map-search { width: 100%; }
+.button-map-record, .button-map-reset button { min-height: 32px; padding: 6px 10px; border-radius: var(--r-sm); background: var(--btn); box-shadow: var(--btn-shadow); color: var(--text-2); font-size: var(--fs-meta); text-align: start; }
+.button-map-record[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }
+.button-map-record:disabled, .button-map-reset button:disabled { opacity: .45; }
+.button-map-reset { display: flex; gap: 6px; }
+.button-map-reset button { flex: 1; text-align: center; }
+.button-map-help { color: var(--text-3); font-size: var(--fs-meta); line-height: 1.5; }
+#logitech-button-map .button-map-list { display: grid; gap: 12px; max-height: 320px; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line-3) transparent; padding: 4px; margin: -4px; }
+.button-map-section { display: grid; align-content: start; }
+.button-map-section h3 { padding: 8px 6px; color: var(--text-3); font-size: var(--fs-meta); font-weight: 550; }
+.button-map-command { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 32px; padding: 6px 8px; border-radius: var(--r-sm); color: var(--text-2); font-size: var(--fs-meta); text-align: start; }
+.button-map-command small { color: var(--text-3); font-size: var(--fs-small); }
+.button-map-command:hover:not(:disabled) { background: var(--glint); color: var(--text-1); }
+.button-map-command[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }
+.button-map-command:disabled { opacity: .45; }
+.button-map-stage { display: grid; gap: 12px; align-content: center; min-width: 0; padding: 16px; border-radius: var(--r-md); background: var(--stage-light), var(--well); box-shadow: var(--inset-shadow); }
+.button-map-canvas { --map-h: 380px; position: relative; width: 100%; height: var(--map-h); }
+.button-map-art { position: absolute; top: 0; left: 50%; height: 100%; width: calc(var(--map-h) * var(--aspect)); max-width: none; transform: translateX(-50%); object-fit: contain; pointer-events: none; filter: drop-shadow(0 14px 18px rgb(var(--shade-rgb) / .5)); }
+.button-map-spot { --dotx: calc(50% + (var(--sx) - .5) * var(--map-h) * var(--aspect)); --label-w: 120px; position: absolute; inset: 0; pointer-events: none; }
+.button-map-dot { position: absolute; z-index: 1; left: var(--dotx); top: calc(var(--sy) * 100%); width: 24px; height: 24px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--solid-2); border: 1px solid var(--line-3); box-shadow: var(--btn-shadow); color: var(--text-1); font-size: var(--fs-small); font-weight: 650; font-variant-numeric: tabular-nums; pointer-events: auto; }
+.button-map-label { position: absolute; display: grid; gap: 3px; width: var(--label-w); min-height: 44px; padding: 6px; border-radius: var(--r-sm); color: var(--text-1); font-size: var(--fs-meta); line-height: 1.3; pointer-events: auto; }
+.button-map-label strong { font-weight: 550; }
+.button-map-label span { color: var(--text-3); font-size: var(--fs-small); overflow-wrap: anywhere; }
+.button-map-label:hover { background: var(--glint); }
+.button-map-spot.is-selected .button-map-dot { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
+.button-map-spot.is-selected .button-map-label { background: var(--accent-soft); }
+.button-map-spot.is-selected .button-map-label span { color: var(--accent); }
+.button-map-line { position: absolute; background: var(--line-3); }
+.button-map-spot.is-left .button-map-label { left: 0; top: calc(var(--sy) * 100%); transform: translateY(-50%); text-align: end; }
+.button-map-spot.is-left .button-map-line { left: var(--label-w); top: calc(var(--sy) * 100%); height: 1px; width: max(0px, calc(var(--dotx) - var(--label-w))); }
+.button-map-spot.is-right .button-map-label { right: 0; top: calc(var(--sy) * 100%); transform: translateY(-50%); text-align: start; }
+.button-map-spot.is-right .button-map-line { left: var(--dotx); top: calc(var(--sy) * 100%); height: 1px; width: max(0px, calc(100% - var(--dotx) - var(--label-w))); }
+.button-map-spot.is-top .button-map-label { left: var(--dotx); top: 0; transform: translateX(-50%); text-align: center; }
+.button-map-spot.is-top .button-map-line { left: var(--dotx); top: 48px; width: 1px; height: max(0px, calc(var(--sy) * 100% - 48px)); }
+.button-map-hints { display: grid; gap: 4px; list-style: none; padding: 0; color: var(--warn); font-size: var(--fs-meta); }
+.button-map-host .connect-button { align-self: flex-start; }
+
+
+.mx-control-card .field-label { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 16px; }
+.mx-control-card .field-label .glass-slider-rail { grid-column: 1; grid-row: 2; }
+.mx-control-card .field-label output { grid-column: 2; grid-row: 2; font-weight: 600; font-variant-numeric: tabular-nums; }
+.mx-name-card .axis-grid { display: flex; gap: 8px; }
+.mx-name-card input { flex: 1; min-width: 0; }
+.easy-switch-slots { display: flex; gap: 8px; }
+.easy-switch-slots > * { display: grid; place-items: center; width: 48px; height: 44px; border-radius: var(--r-sm); background: var(--well); box-shadow: var(--inset-shadow); color: var(--text-3); font-weight: 600; font-variant-numeric: tabular-nums; }
+.easy-switch-slots > button { background: var(--btn); box-shadow: var(--btn-shadow); color: var(--text-1); }
+.easy-switch-slots .is-current { color: var(--accent); background: var(--accent-soft); box-shadow: none; }
+.easy-switch-confirm { display: grid; gap: 12px; border-top: 1px solid var(--line-1); padding-top: 12px; color: var(--text-2); font-size: var(--fs-meta); }
+.easy-switch-confirm-actions { display: flex; gap: 8px; }
+
+:is(.hits-test-dialog, .hits-save-dialog, .hits-delete-dialog) { width: 520px; }
+.hits-test-dialog { width: 860px; max-width: min(860px, calc(100vw - 48px)); }
+.hits-dialog-inner { display: grid; padding: 0; }
+.hits-dialog-inner .om-dialog-head > div { flex: 1; min-width: 0; }
+.hits-dialog-inner .om-dialog-head .om-icon-btn { font-size: 22px; font-weight: 400; }
+:is(.hits-test-dialog, .hits-save-dialog, .hits-delete-dialog) .om-dialog-head { justify-content: space-between; padding-bottom: 12px; }
+:is(.hits-test-dialog, .hits-save-dialog, .hits-delete-dialog) .profile-key-field { display: grid; gap: 8px; color: var(--text-3); font-size: var(--fs-meta); }
+:is(.hits-test-dialog, .hits-save-dialog, .hits-delete-dialog) .profile-key-field input { width: 100%; }
+:is(.hits-test-dialog, .hits-save-dialog, .hits-delete-dialog) .import-hits-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line-1); }
+.hits-test > .import-hits-actions { padding: 12px 20px 16px; }
+.hits-test-body { grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: 20px; }
+.hits-test-side { display: grid; gap: 16px; align-content: start; }
+.hits-test-actuation { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--text-2); font-size: var(--fs-meta); }
+.hits-test-actuation > div { display: inline-flex; align-items: center; gap: 12px; }
+.hits-test-actuation button { width: 32px; height: 32px; border-radius: var(--r-sm); background: var(--btn); box-shadow: var(--btn-shadow); }
+.hits-test-actuation button:disabled { opacity: .4; }
+.hits-test-actuation strong { color: var(--text-1); font-variant-numeric: tabular-nums; }
+.hits-test-area { display: grid; place-items: center; min-height: 320px; padding: 20px; border-radius: var(--r-md); background: var(--well); box-shadow: var(--inset-shadow); color: var(--text-2); font-size: var(--fs-h2); font-weight: 550; text-align: center; }
+.hits-test-area.is-wait { background: color-mix(in srgb, var(--warn) 13%, var(--well)); color: var(--warn); }
+.hits-test-area.is-go { background: var(--info); color: var(--ink-0); }
+.hits-test-result { display: grid; gap: 16px; width: 100%; }
+.hits-test-result-numbers { display: grid; gap: 4px; }
+.hits-test-result small { color: var(--text-3); font-size: var(--fs-meta); font-weight: 400; }
+.hits-test-result-numbers strong { color: var(--text-1); font-size: 30px; font-weight: 650; font-variant-numeric: tabular-nums; }
+.hits-test-result-numbers b { color: var(--text-1); font-size: var(--fs-h2); font-weight: 600; font-variant-numeric: tabular-nums; }
+.hits-test-result-numbers em { color: var(--text-2); font-size: var(--fs-meta); font-weight: 400; }
+.hits-test-ladder { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
+.hits-test-ladder > span { display: grid; gap: 4px; padding: 6px 2px; border-radius: var(--r-xs); background: var(--surface-2); font-size: var(--fs-small); font-variant-numeric: tabular-nums; }
+.hits-test-ladder i { font-style: normal; color: var(--text-3); }
+.hits-test-ladder u { text-decoration: none; }
+.hits-test-ladder [data-mark="hits"] { background: var(--accent-soft); color: var(--accent); }
+.hits-test-ladder [data-mark="conventional"] { box-shadow: inset 0 0 0 1px var(--line-3); }
+
+@container (max-width: 850px) {
+  .button-map-body { grid-template-columns: minmax(0, 1fr); }
+  .button-map-stage { order: -1; }
+  #logitech-button-map .button-map-list { max-height: 240px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .button-map-canvas { --map-h: 360px; }
+}
+@container (max-width: 640px) {
+  .superstrike-control-row { grid-template-columns: 1fr; gap: 12px; }
+  .superstrike-independent-panel { grid-template-columns: 1fr; }
+  .superstrike-press-meters { gap: 16px; }
+  .magnetic-calibration-head { align-items: flex-start; flex-direction: column; gap: 12px; }
+}
+@container (max-width: 440px) {
+  .button-map-canvas { --map-h: calc((100cqw - 72px) / var(--aspect)); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; height: auto; padding-top: calc(var(--map-h) + 12px); }
+  .button-map-art { height: var(--map-h); }
+  .button-map-spot { display: contents; }
+  .button-map-dot { top: calc(var(--sy) * var(--map-h)); width: 20px; height: 20px; }
+  .button-map-line { display: none; }
+  .button-map-canvas .button-map-label { position: static; transform: none; display: grid; grid-template-columns: 20px minmax(0, 1fr); align-content: center; gap: 2px 6px; width: auto; min-height: 48px; text-align: start; font-size: var(--fs-small); }
+  .button-map-label::before { content: attr(data-button-number); grid-row: 1 / span 2; align-self: center; color: var(--text-3); font-weight: 650; font-variant-numeric: tabular-nums; }
+  .button-map-label > * { grid-column: 2; }
+  .button-map-status { margin-inline-start: 0; }
+  .button-map-status strong { display: none; }
+  .superstrike-press-meters { grid-template-columns: 1fr; gap: 12px; }
+}
+@media (max-width: 680px) {
+  .button-remap-row, :is(#button-mapping-settings, #ksnake-scroll-settings) .button-map-row { grid-template-columns: minmax(0, 1fr) minmax(120px, 48%); gap: 8px; padding-block: 6px; }
+  #egg-button-list > div { grid-template-columns: minmax(0, 1fr) 80px; gap: 12px; }
+  #egg-button-list .egg-tile-label:last-child { grid-column: 1 / -1; grid-template-columns: 1fr minmax(120px, 60%); align-items: center; }
+  .hits-test-body { grid-template-columns: 1fr; }
+  .hits-test-area { min-height: 240px; }
+  .mx-name-card .axis-grid { flex-wrap: wrap; }
+  .mx-name-card input { flex-basis: 100%; }
+}
+@media (pointer: coarse) {
+  .superstrike-steps button, .superstrike-tabs button, .button-map-layers button, .button-map-command, .button-map-record, .button-map-reset button { min-height: 44px; }
+}
diff --git a/src/styles/areas/library.css b/src/styles/areas/library.css
new file mode 100644
index 00000000..148deb68
--- /dev/null
+++ b/src/styles/areas/library.css
@@ -0,0 +1,227 @@
+.library-lighting { gap: 16px; }
+.library-lighting .setting-heading h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
+.library-lighting .setting-scope { padding: 3px 7px; border-radius: var(--r-xs); background: var(--surface-2); color: var(--text-2); font-size: var(--fs-small); font-weight: 500; }
+.lighting-zone-picker { display: grid; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--line-1); }
+.lighting-zone-copy { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; }
+.lighting-zone-copy > span { color: var(--text-3); font-size: var(--fs-meta); }
+.lighting-zone-copy > strong { color: var(--text-1); font-size: 13px; font-weight: 550; }
+.lighting-strip { display: flex; flex-wrap: wrap; gap: 8px; }
+.lighting-strip > button { position: relative; display: grid; place-items: center; width: 44px; height: 44px; padding-bottom: 9px; border-radius: var(--r-sm); background: var(--well); box-shadow: var(--inset-shadow); color: var(--text-2); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
+.lighting-strip > button::after { content: ""; position: absolute; inset-inline: 10px; bottom: 8px; height: 4px; border-radius: var(--r-xs); background: var(--zone-color); }
+.lighting-strip > button:hover { background: var(--surface-3); color: var(--text-1); }
+.lighting-strip > button.is-selected { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-line); color: var(--accent); }
+.lighting-modes { display: flex; align-self: start; }
+.lighting-modes > button { flex: 1 1 auto; min-width: 76px; }
+.lighting-color-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 20px; }
+.lighting-color-field { display: grid; align-content: start; gap: 8px; min-width: 0; }
+.lighting-color-field > span { color: var(--text-2); font-size: var(--fs-meta); font-weight: 500; }
+.lighting-color-field input[type="color"] { width: 88px; height: 36px; padding: 4px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--well); cursor: pointer; }
+.lighting-color-field input[type="color"]:disabled { opacity: .45; cursor: default; }
+.lighting-speed-row { display: grid; gap: 8px; }
+.lighting-speed-row .setting-heading { min-height: 20px; }
+.lighting-speed-row .setting-heading h2 { font-size: 13px; font-weight: 550; }
+.library-lighting > .setting-action { padding-top: 12px; border-top: 1px solid var(--line-1); }
+.library-lighting > .setting-note { margin-top: -8px; }
+.lighting-color-picker { display: grid; gap: 12px; width: 100%; max-width: 320px; min-width: 0; }
+.lighting-color-panel { position: relative; min-width: 0; border-radius: var(--r-sm); overflow: hidden; cursor: crosshair; touch-action: none; }
+.lighting-sv-canvas { display: block; width: 100%; height: auto; aspect-ratio: 22 / 13; }
+.lighting-sv-thumb, .lighting-hue-thumb { position: absolute; width: 14px; height: 14px; border: 2px solid var(--text-1); border-radius: 50%; box-shadow: 0 0 0 1px rgb(var(--shade-rgb) / .65); pointer-events: none; transform: translate(-50%, -50%); }
+.lighting-hue-bar { position: relative; min-width: 0; height: 18px; border-radius: var(--r-sm); cursor: crosshair; touch-action: none; }
+.lighting-hue-canvas { display: block; width: 100%; height: 18px; border-radius: var(--r-sm); }
+.lighting-hue-thumb { top: 50%; height: 24px; width: 10px; border-radius: var(--r-xs); }
+.lighting-color-actions { display: flex; gap: 8px; align-items: center; }
+.lighting-color-swatch { width: 32px; height: 32px; flex: none; border-radius: var(--r-sm); box-shadow: inset 0 0 0 1px var(--line-3); }
+.lighting-color-hex { width: 112px; min-width: 0; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
+.lighting-color-picker.is-disabled { opacity: .45; pointer-events: none; }
+
+.profile-disclosure { min-width: 0; border-radius: var(--r-md); background: var(--sheen), var(--surface-1); box-shadow: var(--lit); }
+.profile-summary { display: flex; align-items: center; gap: 8px; padding: 8px 16px 8px 8px; }
+.profile-summary-main { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex: 1; min-width: 0; padding: 10px; border-radius: var(--r-sm); text-align: start; }
+.profile-summary-main:hover { background: var(--glint); }
+.profile-summary-text { display: grid; gap: 4px; min-width: 0; }
+.profile-summary-label { color: var(--text-3); font-size: var(--fs-meta); }
+.profile-summary-label::first-letter { text-transform: uppercase; }
+.profile-summary-text > strong { color: var(--text-1); font-size: var(--fs-h2); font-weight: 600; overflow-wrap: anywhere; }
+.profile-summary-text > small { color: var(--text-3); font-size: var(--fs-meta); line-height: 1.45; }
+.profile-summary-chevron { flex: none; width: 7px; height: 7px; border-inline-end: 1.6px solid var(--text-3); border-bottom: 1.6px solid var(--text-3); transform: rotate(45deg); transition: transform var(--t-base) var(--ease); }
+.profile-disclosure.is-open .profile-summary-chevron { transform: rotate(-135deg); }
+.profile-disclosure-body { max-height: 0; overflow: hidden; transition: max-height var(--t-slow) var(--ease); }
+.profile-disclosure-inner { padding: 0 18px 18px; }
+#onboard-profile-list, #nape-layer-list, #teevolution-profile-list { display: grid; grid-template-columns: minmax(0, 1fr); }
+#teevolution-onboard { order: 5; }
+.profile-row { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 8px; border-top: 1px solid var(--line-1); }
+.profile-row.is-open { background: var(--surface-2); border-radius: var(--r-sm); }
+.profile-row:has(.icon-button.is-active) { background: var(--accent-soft); border-radius: var(--r-sm); }
+.profile-row.is-disabled .profile-row-open { opacity: .5; }
+.profile-row-open { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; min-height: 44px; text-align: start; border-radius: var(--r-sm); padding: 4px; }
+.profile-row-open:hover:not(:disabled) { background: var(--glint); }
+.profile-slot { display: grid; place-items: center; flex: none; min-width: 32px; height: 32px; padding-inline: 6px; border-radius: var(--r-sm); background: var(--well); color: var(--text-3); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
+.profile-row:has(.icon-button.is-active) .profile-slot { color: var(--accent); }
+.profile-row-text { display: grid; gap: 4px; min-width: 0; }
+.profile-row-text > strong { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--text-1); font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
+.profile-row-text > small { color: var(--text-2); font-size: var(--fs-meta); line-height: 1.4; overflow-wrap: anywhere; }
+.profile-row .icon-button { flex: none; }
+.profile-row-rule { display: none; }
+.profile-rule { border-top: 1px solid var(--line-1); }
+.profile-list-hint { display: block; padding: 12px 4px; color: var(--text-3); font-size: var(--fs-meta); line-height: 1.45; }
+.profile-setup-button.icon-button { width: auto; padding-inline: 10px; background: var(--btn); box-shadow: var(--btn-shadow); font-size: 12px; font-weight: 600; }
+.profile-delete-button.icon-button { color: var(--bad); }
+#onboard-status { display: block; color: var(--text-3); font-size: var(--fs-meta); line-height: 1.5; padding: 12px 4px 0; }
+#onboard-status:empty { display: none; }
+
+.profile-button-editor { display: grid; gap: 16px; margin-top: 16px; padding-top: 20px; border-top: 1px solid var(--line-1); }
+.profile-button-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
+.profile-button-heading h2 { font-size: var(--fs-h2); font-weight: 600; }
+.profile-button-heading small { display: block; margin-top: 4px; color: var(--text-3); font-size: var(--fs-meta); line-height: 1.45; }
+.assignment-layer-tabs { display: flex; gap: 2px; padding: 3px; border-radius: var(--r-sm); background: var(--well); box-shadow: var(--inset-shadow); }
+.assignment-layer-tabs > button { padding: 6px 12px; border-radius: var(--r-xs); color: var(--text-3); font-size: 12px; font-weight: 600; }
+.assignment-layer-tabs > button[aria-selected="true"] { color: var(--text-1); background: var(--key); box-shadow: var(--key-shadow); }
+.assignment-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); column-gap: 24px; }
+.assignment-card { display: grid; grid-template-columns: 32px minmax(72px, .7fr) minmax(144px, 1fr); align-items: center; gap: 10px; min-width: 0; min-height: 56px; padding: 10px 0; border-top: 1px solid var(--line-1); }
+.assignment-card.is-wide { grid-column: 1 / -1; }
+.assignment-card.is-staged { border-color: var(--accent-line); }
+.assignment-button-number { display: grid; place-items: center; width: 32px; height: 32px; background: var(--well); border-radius: var(--r-sm); color: var(--text-3); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
+.assignment-button-name { min-width: 0; color: var(--text-2); font-size: 12px; overflow-wrap: anywhere; }
+.assignment-select-wrap { position: relative; min-width: 0; }
+.assignment-select-wrap > select, .assignment-select-wrap > .option-menu { width: 100%; min-width: 0; }
+.assignment-select-wrap > i { display: none; }
+
+.shortcut-dialog-backdrop { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 24px; background: rgb(var(--shade-rgb) / .6); }
+.shortcut-dialog { display: grid; gap: 12px; width: min(480px, 100%); max-height: calc(100dvh - 48px); overflow: auto; padding: 20px; border-radius: var(--r-lg); background: var(--solid-2); box-shadow: var(--lit), var(--shadow-float); }
+.shortcut-dialog-kicker { display: none; }
+.shortcut-dialog h3 { font-size: 16px; font-weight: 650; }
+.shortcut-dialog > p, .shortcut-macro-note { color: var(--text-2); font-size: var(--fs-meta); line-height: 1.5; }
+.shortcut-record-button { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 36px; background: var(--btn); box-shadow: var(--btn-shadow); border-radius: var(--r-sm); color: var(--text-1); font-weight: 600; }
+.shortcut-record-button i { width: 8px; height: 8px; background: var(--text-3); border-radius: 50%; }
+.shortcut-record-button.is-recording { color: var(--bad); }
+.shortcut-record-button.is-recording i { background: var(--bad); border-radius: var(--r-xs); }
+.shortcut-capture { display: grid; align-items: center; min-height: 80px; padding: 16px; background: var(--well); border-radius: var(--r-md); box-shadow: var(--inset-shadow); color: var(--text-3); font-size: 13px; }
+.shortcut-capture ol { display: flex; flex-wrap: wrap; gap: 12px; list-style: none; }
+.shortcut-capture li { display: flex; align-items: center; gap: 8px; }
+.shortcut-capture kbd { padding: 7px 10px; border-radius: var(--r-sm); background: var(--key); box-shadow: var(--key-shadow); color: var(--text-1); font: 600 12px var(--font-sans); }
+.shortcut-capture li small { color: var(--text-3); font-size: var(--fs-small); font-variant-numeric: tabular-nums; }
+.shortcut-error { color: var(--bad); font-size: var(--fs-meta); }
+.shortcut-dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 4px; padding-top: 16px; border-top: 1px solid var(--line-1); }
+
+:is(#teevolution-dpi-lighting, #pulsar-pro-settings, #onboard-profile-settings, #finalmouse-profiles) .field-label { display: grid; gap: 8px; }
+:is(#pulsar-pro-settings, #onboard-profile-settings) .field-label > .option-menu { width: min(100%, 320px); }
+#pulsar-pro-settings > .field-label { padding-top: 12px; border-top: 1px solid var(--line-1); }
+#atk-profile-status .segmented > button.selected { color: var(--accent); }
+#teevolution-dpi-lighting .teevolution-dpi-light-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
+#teevolution-dpi-lighting .teevolution-dpi-light-controls > label { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; color: var(--text-2); font-size: var(--fs-meta); }
+#teevolution-dpi-lighting output { color: var(--text-1); font-weight: 650; font-variant-numeric: tabular-nums; }
+#teevolution-dpi-lighting .glass-slider-rail { grid-column: 1 / -1; }
+#finalmouse-profiles > div:has(> .stat-row) { border-top: 1px solid var(--line-1); padding-top: 10px; }
+#finalmouse-profiles .stat-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; min-height: 36px; }
+#finalmouse-profiles .stat-row > span:first-child { color: var(--text-1); font-weight: 550; }
+:where(#finalmouse-profiles) .profile-row-actions, :where(#finalmouse-profiles) .profile-rename { display: flex; align-items: center; gap: 12px; }
+#finalmouse-profiles .profile-rename { margin-top: 8px; }
+#finalmouse-profiles .profile-rename input { min-width: 0; flex: 1; }
+
+:is(#ksnake-macro-settings, #wallhack-macro-settings) { grid-column: 1 / -1; gap: 16px; }
+.ksnake-macro-lead { margin-top: 4px; color: var(--text-3); font-size: var(--fs-meta); font-weight: 400; line-height: 1.5; }
+.ksnake-macro-notice { padding: 12px; background: var(--well); border-radius: var(--r-sm); color: var(--text-2); font-size: var(--fs-meta); line-height: 1.5; }
+.ksnake-macro-slot-picker { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; color: var(--text-2); font-size: var(--fs-meta); }
+.ksnake-macro-slot-picker select { min-width: min(240px, 100%); max-width: 100%; }
+.ksnake-macro-recorder { display: grid; gap: 16px; padding: 16px; background: var(--well); border-radius: var(--r-md); box-shadow: var(--inset-shadow); }
+.ksnake-macro-recorder.is-recording { box-shadow: inset 0 0 0 1px var(--bad); }
+.ksnake-macro-recorder-status { display: flex; align-items: center; gap: 12px; }
+.ksnake-macro-recorder-status > div { display: grid; gap: 4px; }
+.ksnake-macro-recorder-status strong { color: var(--text-1); font-weight: 600; }
+.ksnake-macro-recorder-status span { color: var(--text-3); font-size: var(--fs-meta); line-height: 1.5; }
+.ksnake-macro-recorder-dot { display: none; }
+.is-recording .ksnake-macro-recorder-dot { display: block; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--bad); }
+.ksnake-macro-recorder-tools { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
+.ksnake-macro-timing-picker, .ksnake-macro-fixed-delay-picker { display: grid; gap: 8px; min-width: 0; color: var(--text-3); font-size: var(--fs-meta); }
+.ksnake-macro-fixed-delay-control { display: flex; align-items: center; gap: 6px; }
+.ksnake-macro-fixed-delay-control input { width: 96px; }
+.ksnake-macro-recorder-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-inline-start: auto; }
+.ksnake-macro-steps, .macro-steps { display: grid; gap: 0; min-width: 0; }
+.ksnake-macro-step { display: grid; grid-template-columns: 28px minmax(100px, 1fr) minmax(100px, 1fr) 76px 88px minmax(80px, 1fr) 32px; gap: 12px; align-items: end; padding: 12px 0; border-top: 1px solid var(--line-1); }
+.macro-step { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; padding: 12px 0; border-top: 1px solid var(--line-1); }
+.macro-step > label { flex: 1 1 120px; }
+.ksnake-macro-step-number, .macro-step-index { align-self: center; color: var(--text-3); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
+.ksnake-macro-step-field, .ksnake-macro-number, .macro-step > label { display: grid; gap: 8px; min-width: 0; color: var(--text-3); font-size: var(--fs-meta); }
+.ksnake-macro-step :is(select, input), .macro-step :is(select, input) { width: 100%; min-width: 0; }
+.ksnake-macro-preview { color: var(--text-2); font-size: var(--fs-meta); overflow-wrap: anywhere; align-self: center; }
+.ksnake-macro-empty { display: grid; gap: 6px; padding: 24px 16px; border-radius: var(--r-md); background: var(--well); }
+.ksnake-macro-empty strong { font-size: 13px; color: var(--text-1); font-weight: 600; }
+.ksnake-macro-empty span { color: var(--text-3); font-size: var(--fs-meta); line-height: 1.5; }
+.ksnake-macro-actions.setting-action { flex-wrap: wrap; justify-content: flex-start; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line-1); }
+.ksnake-macro-help { color: var(--text-3); border-top: 1px solid var(--line-1); padding-top: 12px; font-size: var(--fs-meta); }
+.ksnake-macro-help summary { width: fit-content; cursor: pointer; color: var(--text-2); font-weight: 550; }
+.ksnake-macro-help p { max-width: 72ch; margin-top: 8px; line-height: 1.5; }
+.ksnake-macro-recording-list { background: var(--well); padding: 12px; border-radius: var(--r-md); }
+.ksnake-macro-recording-list-heading { display: flex; justify-content: space-between; gap: 12px; color: var(--text-2); font-size: var(--fs-meta); }
+.ksnake-macro-recording-list ol { list-style: none; max-height: 320px; overflow: auto; margin-top: 12px; }
+.ksnake-macro-recording-list li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line-1); }
+.ksnake-macro-recording-list li strong { font-weight: 550; }
+.ksnake-macro-recording-list li :is(small, .ksnake-macro-recording-step-number), .ksnake-macro-recording-empty { color: var(--text-3); font-size: var(--fs-meta); font-variant-numeric: tabular-nums; }
+.ksnake-macro-recording-empty { padding-block: 20px 8px; }
+
+:is(.shortcut-dialog-actions, .ksnake-macro-recorder-actions, .ksnake-macro-actions, .m2nex-profile-overview-actions, :where(#finalmouse-profiles) .profile-row-actions, :where(#finalmouse-profiles) .profile-rename) > button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 32px; height: auto; padding: 7px 12px; border-radius: var(--r-sm); background: var(--btn); box-shadow: var(--btn-shadow); color: var(--text-1); font-size: 12px; font-weight: 600; }
+:is(.shortcut-dialog-actions, .ksnake-macro-recorder-actions, .ksnake-macro-actions, .m2nex-profile-overview-actions, :where(#finalmouse-profiles) .profile-row-actions, :where(#finalmouse-profiles) .profile-rename) > button:hover:not(:disabled) { background: var(--btn-hover); }
+:is(.shortcut-dialog-actions, .ksnake-macro-recorder-actions, .ksnake-macro-actions, .m2nex-profile-overview-actions, #finalmouse-profiles) button:disabled { opacity: .45; cursor: default; }
+.shortcut-dialog-actions > .is-primary, .ksnake-macro-actions.setting-action > .ksnake-macro-save, .m2nex-profile-overview-actions > .m2nex-profile-overview-apply { background: var(--accent); box-shadow: var(--primary-shadow); color: var(--on-accent); }
+.shortcut-dialog-actions > .is-primary:hover:not(:disabled), .ksnake-macro-actions.setting-action > .ksnake-macro-save:hover:not(:disabled), .m2nex-profile-overview-actions > .m2nex-profile-overview-apply:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 90%, var(--text-1)); }
+.ksnake-macro-actions.setting-action > button:not(.om-btn):not(.connect-button):not(.icon-button) { background: var(--btn); color: var(--text-1); box-shadow: var(--btn-shadow); height: auto; }
+.ksnake-macro-actions.setting-action > button.ksnake-macro-save:not(.om-btn):not(.connect-button):not(.icon-button) { background: var(--accent); color: var(--on-accent); box-shadow: var(--primary-shadow); }
+.ksnake-macro-recorder-actions > .ksnake-macro-stop { color: var(--bad); }
+.ksnake-macro-delete { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-sm); color: var(--text-3); }
+.ksnake-macro-delete:hover:not(:disabled) { color: var(--bad); background: var(--glint); }
+.ksnake-macro-delete:disabled { opacity: .4; }
+
+.m2nex-profile-overview { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 16px 18px; border-radius: var(--r-md); background: var(--sheen), var(--surface-1); box-shadow: var(--lit); }
+.m2nex-profile-overview-title { display: grid; gap: 4px; }
+.m2nex-profile-overview-title > span { display: none; }
+.m2nex-profile-overview-title strong { font-size: var(--fs-h2); font-weight: 600; }
+.m2nex-profile-overview-picker { min-width: 0; flex: 1 1 160px; }
+.m2nex-profile-overview-picker select { width: 100%; }
+.m2nex-profile-overview-state { color: var(--text-3); font-size: var(--fs-meta); }
+.m2nex-profile-overview-state.is-dirty { color: var(--warn); }
+.m2nex-profile-overview-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-inline-start: auto; }
+.m2nex-profile-import-input { display: none; }
+
+dialog.share-profile-dialog { width: 520px; }
+.share-profile-dialog .share-profile-dialog-inner { display: grid; gap: 16px; padding: 0 20px 20px; }
+.share-profile-dialog .om-dialog-head { margin-inline: -20px; padding-bottom: 0; }
+.share-profile-dialog .om-dialog-head > div { flex: 1; min-width: 0; }
+.share-profile-dialog .om-dialog-head > .om-icon-btn { font-size: 22px; font-weight: 400; }
+.share-profile-intro { color: var(--text-2); font-size: 13px; line-height: 1.5; }
+.share-profile-dialog .profile-key-fields { display: grid; gap: 12px; min-width: 0; }
+.share-profile-dialog .profile-key-field { display: grid; gap: 8px; min-width: 0; }
+.share-profile-dialog .profile-key-field > span { color: var(--text-2); font-size: var(--fs-meta); font-weight: 550; }
+.share-profile-dialog .profile-key-field :is(input, textarea) { width: 100%; min-width: 0; font-family: var(--font-mono); font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
+.share-profile-dialog :is(.profile-key-actions, .import-hits-actions) { display: flex; flex-wrap: wrap; gap: 8px; }
+.share-profile-dialog .profile-key-field:not(:first-child) { margin-top: 12px; padding-top: 16px; border-top: 1px solid var(--line-1); }
+.share-profile-dialog [role="alert"] { color: var(--bad); }
+
+@media (max-width: 1180px) {
+  .ksnake-macro-step { grid-template-columns: 28px minmax(0, 1fr) minmax(0, 1fr) 32px; }
+  .ksnake-macro-step-number { grid-column: 1; grid-row: 1; }
+  .ksnake-macro-step-field:nth-of-type(1) { grid-column: 2; }
+  .ksnake-macro-step-field:nth-of-type(2) { grid-column: 3; }
+  .ksnake-macro-code-field { grid-column: 2; grid-row: 2; }
+  .ksnake-macro-delay-field { grid-column: 3; grid-row: 2; }
+  .ksnake-macro-step > .ksnake-macro-preview { grid-column: 2 / 4; }
+  .ksnake-macro-step > .ksnake-macro-delete { grid-column: 4; grid-row: 1; }
+}
+@media (max-width: 640px) {
+  .profile-summary { flex-wrap: wrap; padding: 8px; }
+  .profile-summary-main { flex-basis: calc(100% - 48px); }
+  .profile-disclosure-inner { padding-inline: 12px; }
+  .profile-row { flex-wrap: wrap; padding-inline: 4px; }
+  .profile-row-open { flex-basis: calc(100% - 48px); }
+  .profile-row:has(> .icon-button:nth-of-type(3)) > .profile-row-open { flex-basis: 100%; }
+  .profile-row .icon-button, .profile-summary .icon-button { min-width: 44px; min-height: 44px; }
+  .assignment-card { grid-template-columns: 32px minmax(0, 1fr); gap: 8px 12px; }
+  .assignment-card > .assignment-select-wrap { grid-column: 2; }
+  #teevolution-dpi-lighting .teevolution-dpi-light-controls { grid-template-columns: 1fr; gap: 16px; }
+  .ksnake-macro-recorder-tools > label, .ksnake-macro-recorder-actions { width: 100%; margin-inline-start: 0; }
+  .ksnake-macro-recorder-actions > button { flex: 1; }
+  .ksnake-macro-recorder-actions > button, .ksnake-macro-actions > button, .shortcut-dialog-actions > button { min-height: 44px; }
+  .lighting-modes > button { min-height: 40px; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .profile-disclosure-body, .profile-summary-chevron { transition: none; }
+}
diff --git a/src/styles/areas/pages.css b/src/styles/areas/pages.css
new file mode 100644
index 00000000..a9cd2d1e
--- /dev/null
+++ b/src/styles/areas/pages.css
@@ -0,0 +1,236 @@
+.hardware-test-header { align-items: center; }
+.hardware-test-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; flex: none; }
+.hardware-test-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 16px; align-items: start; }
+.hardware-test-device { min-width: 0; position: sticky; top: 18px; }
+.hardware-test-no-device { display: grid; justify-items: start; align-content: center; gap: 8px; min-height: 240px; padding: 24px; }
+.hardware-test-no-device-title { font-size: var(--fs-h2); font-weight: 600; }
+.hardware-test-no-device-detail { color: var(--text-2); font-size: var(--fs-meta); }
+.hardware-test-no-device .om-btn { margin-top: 12px; }
+.hardware-test-panel-wrap { display: grid; gap: 16px; min-width: 0; }
+.hardware-test-panel { min-width: 0; }
+.hardware-test-panel-head { padding-bottom: 14px; border-bottom: 1px solid var(--line-1); }
+.hardware-test-head-glyph { width: 17px; height: 17px; color: var(--text-3); }
+.hardware-test-panel-title, .hardware-test-status-title { font-size: var(--fs-h2); font-weight: 600; }
+.hardware-test-state-pill { margin-inline-start: auto; }
+.hardware-test-state-pill > i { display: none; }
+.hardware-test-state-pill.running { color: var(--accent); background: var(--accent-soft); }
+.hardware-test-state-pill.done { color: var(--ok); background: color-mix(in srgb, var(--ok) 10%, transparent); }
+.hardware-test-state-pill.failed { color: var(--bad); background: color-mix(in srgb, var(--bad) 10%, transparent); }
+.hardware-test-state-pill.stopped { color: var(--warn); background: color-mix(in srgb, var(--warn) 10%, transparent); }
+.hardware-test-stages { padding: 0 18px; }
+.hardware-test-ready { display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 120px; padding-block: 20px; color: var(--text-2); }
+.hardware-test-ready p { max-width: 40ch; font-size: var(--fs-meta); }
+.hardware-test-ready-glyph { width: 28px; height: 28px; color: var(--text-3); }
+.hardware-test-stage { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 44px; padding-block: 10px; border-bottom: 1px solid var(--line-1); }
+.hardware-test-stage:last-child { border-bottom: 0; }
+.hardware-test-stage-icon { display: grid; place-items: center; width: 18px; height: 18px; color: var(--text-3); }
+.hardware-test-stage-icon svg { width: 16px; height: 16px; }
+.hardware-test-stage.pass .hardware-test-stage-icon, .hardware-test-stage.pass .hardware-test-stage-result { color: var(--ok); }
+.hardware-test-stage.fail .hardware-test-stage-icon, .hardware-test-stage.fail .hardware-test-stage-result { color: var(--bad); }
+.hardware-test-stage.running .hardware-test-stage-icon { color: var(--accent); }
+.hardware-test-stage-spin { width: 12px; height: 12px; border: 1.5px solid var(--line-3); border-top-color: var(--accent); border-radius: 50%; animation: hardware-test-spin 900ms linear infinite; }
+.hardware-test-stage-skip { width: 10px; height: 1.5px; background: currentColor; }
+.hardware-test-stage-main { display: grid; gap: 3px; min-width: 0; }
+.hardware-test-stage-label { font-weight: 550; overflow-wrap: anywhere; }
+.hardware-test-stage-detail, .hardware-test-stage-hint { color: var(--text-2); font-size: var(--fs-meta); overflow-wrap: anywhere; }
+.hardware-test-stage-hint { color: var(--accent); }
+.hardware-test-stage-result { padding: 3px 7px; border-radius: var(--r-xs); font-size: var(--fs-small); font-weight: 600; text-transform: lowercase; color: var(--text-2); background: var(--glint); }
+.hardware-test-stage-result::first-letter { text-transform: uppercase; }
+.hardware-test-stage.pass .hardware-test-stage-result { background: color-mix(in srgb, var(--ok) 8%, transparent); }
+.hardware-test-stage.fail .hardware-test-stage-result { background: color-mix(in srgb, var(--bad) 8%, transparent); }
+.hardware-test-live { min-width: 88px; max-width: 180px; text-align: end; font-size: var(--fs-meta); font-variant-numeric: tabular-nums; color: var(--accent); }
+.hardware-test-live.empty { color: var(--text-3); }
+.hardware-test-progress { position: relative; height: 3px; margin-top: 9px; border-radius: var(--r-xs); background: var(--well); overflow: hidden; }
+.hardware-test-progress > i { display: block; height: 100%; background: var(--accent); transition: width var(--t-fast) linear; }
+.hardware-test-progress-wave::after { content: ""; display: block; width: 30%; height: 100%; background: var(--accent); animation: hardware-test-writing 1400ms var(--ease) infinite; }
+.hardware-test-banner { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-top: 1px solid var(--line-1); background: color-mix(in srgb, var(--warn) 5%, transparent); }
+.hardware-test-banner.pass { background: color-mix(in srgb, var(--ok) 5%, transparent); }
+.hardware-test-banner.fail { background: color-mix(in srgb, var(--bad) 5%, transparent); }
+.hardware-test-banner-glyph { width: 20px; height: 20px; color: var(--warn); }
+.hardware-test-banner.pass .hardware-test-banner-glyph { color: var(--ok); }
+.hardware-test-banner.fail .hardware-test-banner-glyph { color: var(--bad); }
+.hardware-test-banner-text { display: grid; gap: 2px; }
+.hardware-test-banner-text strong { font-size: var(--fs-h2); font-weight: 600; }
+.hardware-test-banner-text > span { color: var(--text-2); font-size: var(--fs-meta); font-variant-numeric: tabular-nums; }
+.hardware-test-banner-counts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-inline-start: auto; color: var(--text-2); font-size: var(--fs-meta); font-variant-numeric: tabular-nums; }
+.hardware-test-banner-counts .ok { color: var(--ok); }
+.hardware-test-banner-counts .fail { color: var(--bad); }
+.hardware-test-banner-counts .skip { text-transform: lowercase; }
+.hardware-test-panel-bar { display: flex; justify-content: flex-end; padding: 8px 12px; border-top: 1px solid var(--line-1); }
+.hardware-test-status-head { padding: 16px 18px 6px; }
+.hardware-test-status .mouse-test-device-rows { padding: 0 18px 8px; }
+.hardware-test-status .mouse-test-device-row { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; min-height: 40px; padding-block: 10px; border-top: 1px solid var(--line-1); }
+.hardware-test-status .mouse-test-device-row:first-child { border-top: 0; }
+.hardware-test-status .mouse-test-device-key { color: var(--text-2); font-size: var(--fs-meta); flex: none; }
+.hardware-test-status .mouse-test-device-val { min-width: 0; text-align: end; font-size: var(--fs-meta); font-weight: 550; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
+.hardware-test-status .mouse-test-dpi-stages { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
+.hardware-test-status .mouse-test-dpi-chip { padding: 2px 7px; border-radius: var(--r-xs); background: var(--well); color: var(--text-2); }
+.hardware-test-status .mouse-test-dpi-chip.active { background: var(--accent-soft); color: var(--accent); }
+.hardware-test-status-note { padding: 12px 18px 16px; border-top: 1px solid var(--line-1); color: var(--text-3); font-size: var(--fs-small); line-height: 1.5; }
+.hardware-test-footer { color: var(--text-3); font-size: var(--fs-meta); }
+.hardware-test-footer-link { color: var(--text-2); text-decoration: underline; text-decoration-color: var(--line-3); text-underline-offset: 3px; }
+.hardware-test-footer-link:hover { color: var(--text-1); }
+@keyframes hardware-test-spin { to { transform: rotate(360deg); } }
+@keyframes hardware-test-writing { from { transform: translateX(-100%); } to { transform: translateX(440%); } }
+
+.games-header { align-items: flex-start; }
+.games-subtitle { max-width: 65ch; }
+.games-bridge-status { flex: none; height: auto; min-height: 26px; padding-block: 4px; margin-top: 4px; }
+.games-bridge-dot { display: inline-flex; }
+.games-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 16px; list-style: none; }
+.games-grid > li { min-width: 0; }
+.games-tile { display: flex; flex-direction: column; height: 100%; width: 100%; padding: 8px; gap: 0; text-align: start; border-radius: var(--r-md); background: var(--sheen), var(--surface-1); box-shadow: var(--lit); transition: background var(--t-fast) var(--ease); }
+.games-tile:hover { background: var(--surface-3); }
+.games-tile:focus-visible { box-shadow: var(--focus); }
+.games-tile-art { position: relative; display: grid; place-content: center; justify-items: center; gap: 12px; width: 100%; aspect-ratio: 4 / 3; border-radius: var(--r-sm); background: var(--well); box-shadow: var(--inset-shadow); color: var(--text-3); overflow: hidden; }
+.games-tile-art > img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; }
+.games-tile-badge { position: absolute; inset-inline-start: 8px; bottom: 8px; background: var(--solid-2); color: var(--text-1); box-shadow: var(--lit); }
+.games-tile-name { padding: 12px 6px 6px; color: var(--text-1); font-size: var(--fs-body); font-weight: 600; overflow-wrap: anywhere; }
+.games-tile-request { background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); }
+.games-tile-request .games-tile-art { box-shadow: none; background: transparent; padding: 16px; }
+.games-tile-request-copy { font-size: var(--fs-meta); color: var(--text-2); text-align: center; }
+.games-tile-request:hover .games-tile-art > svg { color: var(--accent); }
+.games-grid.is-locked div.games-tile { cursor: default; }
+.games-grid.is-locked div.games-tile:hover { background: inherit; }
+.games-grid.is-locked div.games-tile .games-tile-art > img { filter: saturate(0.7) brightness(0.8); }
+.games-needs-bridge {
+  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px;
+  padding: 16px 18px;
+  border-radius: var(--r-lg);
+  background: radial-gradient(60% 120% at 0% 50%, rgb(var(--accent-rgb) / 0.12), transparent 70%), var(--sheen), var(--surface-1);
+  box-shadow: var(--lit), inset 0 0 0 1px rgb(var(--accent-rgb) / 0.2);
+}
+.games-needs-bridge-icon {
+  display: grid; place-items: center;
+  width: 40px; height: 40px;
+  border-radius: var(--r-md);
+  background: var(--accent-soft);
+  color: var(--accent);
+}
+.games-needs-bridge-icon svg { width: 20px; height: 20px; }
+.games-needs-bridge h2 { font-size: 15px; font-weight: 650; letter-spacing: -0.01em; }
+.games-needs-bridge p { margin-top: 3px; color: var(--text-2); font-size: var(--fs-meta); line-height: 1.5; max-width: 72ch; }
+.games-needs-bridge .om-btn svg { width: 15px; height: 15px; }
+
+.game-profile-back { justify-self: start; margin-inline-start: -10px; }
+[dir="rtl"] .game-profile-back svg { transform: scaleX(-1); }
+.game-profile-layout { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; padding: 18px; align-items: start; }
+.game-profile-side { min-width: 0; }
+.game-profile-art { display: grid; place-items: center; width: 100%; aspect-ratio: 3 / 4; border-radius: var(--r-sm); background: var(--well); box-shadow: var(--inset-shadow); color: var(--text-3); overflow: hidden; }
+.game-profile-art img { width: 100%; height: 100%; object-fit: cover; }
+.game-profile-settings { min-width: 0; display: grid; gap: 16px; }
+.game-profile-name-card { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
+.game-profile-name-card > div { display: grid; gap: 5px; min-width: 0; }
+.game-profile-name { font-size: var(--fs-title); font-weight: 650; letter-spacing: -0.02em; overflow-wrap: anywhere; }
+.game-profile-changed { font-size: var(--fs-meta); color: var(--text-2); font-variant-numeric: tabular-nums; }
+.game-profile-section { border-top: 1px solid var(--line-1); padding-top: 14px; }
+.game-profile-section-label { font-size: var(--fs-body); font-weight: 600; margin-bottom: 6px; }
+.game-profile-devices { list-style: none; }
+.game-profile-device-row { display: flex; align-items: center; gap: 10px; padding-block: 8px; min-height: 52px; border-top: 1px solid var(--line-1); }
+.game-profile-device-row:first-child { border-top: 0; }
+.game-profile-device-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--r-sm); background: var(--well); color: var(--text-3); }
+.game-profile-device-text { display: grid; flex: 1; min-width: 0; gap: 1px; }
+.game-profile-device-name { font-weight: 550; overflow-wrap: anywhere; }
+.game-profile-device-brand { color: var(--text-3); font-size: var(--fs-small); }
+.game-profile-select.is-selected { color: var(--accent); background: var(--accent-soft); box-shadow: none; }
+.game-profile-auto-apply { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
+.game-profile-auto-apply-text { display: grid; gap: 3px; }
+.game-profile-auto-apply-title { font-weight: 600; }
+.game-profile-auto-apply-body { color: var(--text-2); font-size: var(--fs-meta); }
+.game-profile-workspace { display: grid; gap: 16px; min-width: 0; }
+.game-profile-workspace-head { display: grid; gap: 4px; padding-inline: 2px; max-width: 80ch; }
+.game-profile-section-title { font-size: var(--fs-h2); font-weight: 600; }
+.game-profile-tabs { border-top: 0; padding: 6px; background: var(--surface-1); border-radius: var(--r-md); box-shadow: var(--lit); }
+.game-profile-empty { padding-block: 12px; color: var(--text-2); font-size: var(--fs-meta); }
+.game-profile-workspace > .game-profile-empty { padding: 22px; border-radius: var(--r-md); background: var(--surface-1); box-shadow: var(--lit); }
+
+.gamereq-dialog { width: 560px; }
+.gamereq-dialog .feedback-dialog-inner { display: grid; gap: 14px; padding: 20px; }
+.gamereq-dialog .om-dialog-head { padding: 0 0 2px; justify-content: space-between; gap: 16px; }
+.gamereq-dialog .om-dialog-head > div { min-width: 0; }
+.gamereq-dialog .om-dialog-head .om-icon-btn { flex: none; font-size: 20px; }
+.gamereq-dialog .feedback-description { color: var(--text-2); font-size: var(--fs-meta); line-height: 1.6; }
+.gamereq-kind, .gamereq-os { justify-self: start; }
+.gamereq-dialog .feedback-handle { display: grid; gap: 6px; min-width: 0; }
+.gamereq-dialog .feedback-handle > span { font-size: var(--fs-meta); color: var(--text-2); font-weight: 550; }
+.gamereq-dialog .feedback-handle input { width: 100%; height: 36px; }
+.gamereq-exe { display: grid; gap: 12px; min-width: 0; }
+.gamereq-finder { display: grid; gap: 10px; padding: 14px; border-radius: var(--r-md); background: var(--surface-2); }
+.gamereq-finder-title { font-size: var(--fs-meta); font-weight: 600; }
+.gamereq-hint { color: var(--text-2); font-size: var(--fs-meta); line-height: 1.5; }
+.gamereq-mono { font-family: var(--font-mono); font-size: var(--fs-small); }
+.gamereq-running { display: grid; gap: 8px; }
+.gamereq-chip { justify-self: start; }
+.gamereq-apps { display: grid; list-style: none; max-height: 200px; overflow-y: auto; }
+.gamereq-apps button { display: flex; align-items: center; gap: 10px; text-align: start; width: 100%; min-height: 44px; padding: 8px; border-radius: var(--r-sm); }
+.gamereq-apps button:hover { background: var(--glint); }
+.gamereq-apps button > img, .gamereq-apps button > svg { width: 24px; height: 24px; object-fit: contain; flex: none; color: var(--text-3); }
+.gamereq-apps button > span { display: grid; min-width: 0; gap: 2px; }
+.gamereq-apps strong { font-size: var(--fs-meta); font-weight: 550; overflow-wrap: anywhere; }
+.gamereq-apps small { color: var(--text-3); overflow-wrap: anywhere; }
+.gamereq-command { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border-radius: var(--r-sm); background: var(--well); box-shadow: var(--inset-shadow); }
+.gamereq-command code { flex: 1; min-width: 0; overflow-wrap: anywhere; white-space: pre-wrap; color: var(--text-2); line-height: 1.65; }
+.gamereq-command button { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: var(--r-sm); background: var(--btn); box-shadow: var(--btn-shadow); color: var(--text-2); }
+.gamereq-command button:hover { background: var(--btn-hover); color: var(--text-1); }
+.gamereq-dialog .om-dialog-foot { padding: 14px 0 0; margin-top: 2px; }
+.gamereq-dialog .feedback-error { padding: 10px 12px; border-radius: var(--r-sm); color: var(--bad); background: color-mix(in srgb, var(--bad) 8%, transparent); font-size: var(--fs-meta); }
+.gamereq-embed { display: grid; gap: 16px; padding: 18px; border-radius: var(--r-md); background: var(--well); box-shadow: var(--inset-shadow); }
+.gamereq-embed-title { font-size: var(--fs-h2); font-weight: 600; }
+.gamereq-embed-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
+.gamereq-embed-fields > div { display: grid; align-content: start; gap: 5px; min-width: 0; }
+.gamereq-embed-fields .is-wide { grid-column: 1 / -1; }
+.gamereq-embed-fields span { color: var(--text-3); font-size: var(--fs-meta); }
+.gamereq-embed-fields strong { font-weight: 550; }
+.gamereq-embed-fields code, .gamereq-embed-fields p, .gamereq-embed-fields strong { overflow-wrap: anywhere; }
+.gamereq-embed-footer { display: flex; align-items: center; gap: 6px; font-size: var(--fs-meta); color: var(--text-3); }
+.gamereq-notice { padding: 12px; border-radius: var(--r-sm); background: color-mix(in srgb, var(--warn) 8%, transparent); color: var(--warn); font-size: var(--fs-meta); }
+.whatsnew-dialog { width: 480px; }
+.whatsnew-dialog .om-dialog-head { justify-content: space-between; padding-bottom: 14px; border-bottom: 1px solid var(--line-1); }
+.whatsnew-dialog .om-dialog-head > div { min-width: 0; }
+.whatsnew-dialog .om-icon-btn { flex: none; font-size: 20px; }
+.whatsnew-dialog .om-dialog-body { justify-items: center; gap: 24px; padding: 28px 28px 32px; }
+.whatsnew-body { font-size: var(--fs-body); line-height: 1.75; text-align: center; text-wrap: pretty; }
+.whatsnew-dialog .om-dialog-foot { padding: 14px 18px 18px; }
+.standalone-brand { width: 28px; height: 42px; object-fit: contain; }
+
+.small-screen-blocker { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; min-height: 100vh; min-height: 100dvh; width: 100%; padding: 40px 24px; background: var(--ground); color: var(--text-1); text-align: center; }
+.small-screen-blocker .standalone-brand { margin-bottom: 12px; }
+.small-screen-blocker h1 { max-width: 28ch; font-size: clamp(22px, 3vw, 28px); font-weight: 600; line-height: 1.25; letter-spacing: -0.02em; text-wrap: balance; }
+.small-screen-blocker p { max-width: 48ch; font-size: var(--fs-body); color: var(--text-2); line-height: 1.65; text-wrap: pretty; }
+
+@media (max-width: 1280px) {
+  .hardware-test-layout { grid-template-columns: 220px minmax(0, 1fr); }
+  .hardware-test-header { flex-wrap: wrap; align-items: flex-start; }
+  .hardware-test-actions { justify-content: flex-start; }
+  .games-header { flex-wrap: wrap; }
+  .game-profile-layout { grid-template-columns: 160px minmax(0, 1fr); gap: 18px; }
+}
+@media (max-width: 1050px) {
+  .hardware-test-layout { grid-template-columns: minmax(0, 1fr); }
+  .hardware-test-device { position: static; }
+  .hardware-test-device .showcase-sidebar { grid-template-columns: 120px minmax(0, 1fr); align-items: center; }
+  .hardware-test-device .showcase-sidebar-visual { grid-row: span 3; }
+  .hardware-test-no-device { min-height: 160px; }
+  .game-profile-layout { grid-template-columns: 120px minmax(0, 1fr); }
+  .game-profile-art { aspect-ratio: 1 / 1; }
+  .games-grid { grid-template-columns: repeat(auto-fill, minmax(156px, 1fr)); }
+}
+@media (max-width: 720px) {
+  .hardware-test-page, .games-page, .game-profile-page { padding: 20px 18px 80px; }
+  .hardware-test-actions { width: 100%; }
+  .hardware-test-actions .om-btn { flex: 1; min-height: 44px; }
+  .hardware-test-stage { grid-template-columns: 18px minmax(0, 1fr); gap: 10px; }
+  .hardware-test-stage-result, .hardware-test-live { grid-column: 2; justify-self: start; text-align: start; }
+  .hardware-test-banner { flex-wrap: wrap; }
+  .hardware-test-banner-counts { width: 100%; justify-content: flex-start; margin-inline-start: 32px; }
+  .game-profile-layout { grid-template-columns: minmax(0, 1fr); }
+  .game-profile-side { max-width: 160px; }
+  .game-profile-device-row { flex-wrap: wrap; }
+  .games-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
+  .games-bridge-status { white-space: normal; }
+  .gamereq-embed-fields { grid-template-columns: minmax(0, 1fr); }
+  .gamereq-dialog .feedback-dialog-inner { padding: 18px; }
+  .gamereq-dialog .om-btn, .gamereq-dialog .segmented > button { min-height: 44px; }
+  .gamereq-command button, .gamereq-dialog .om-icon-btn { min-width: 44px; min-height: 44px; }
+  .whatsnew-dialog .om-dialog-foot { flex-wrap: wrap; }
+}
diff --git a/src/styles/areas/performance.css b/src/styles/areas/performance.css
new file mode 100644
index 00000000..81f79e53
--- /dev/null
+++ b/src/styles/areas/performance.css
@@ -0,0 +1,370 @@
+.dpi-card.has-lift-off {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 260px;
+  gap: 24px;
+}
+.dpi-card-main {
+  display: grid;
+  align-content: start;
+  gap: 16px;
+  min-width: 0;
+}
+.dpi-card-main > .setting-heading {
+  align-items: center;
+  flex-wrap: wrap;
+}
+.dpi-card .setting-heading > .dpi-heading-label {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 16px;
+}
+.dpi-card h2,
+.performance-controls .setting-heading h2 {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+:is(.dpi-card, .performance-controls, #lightforce-card, #bunny-hop-card) .setting-scope {
+  display: inline-flex;
+  align-items: center;
+  min-height: 22px;
+  padding-inline: 7px;
+  border-radius: var(--r-xs);
+  background: var(--surface-2);
+  color: var(--text-3);
+  font-size: var(--fs-small);
+  font-weight: 500;
+  letter-spacing: 0;
+}
+.dpi-view-toggle {
+  display: inline-flex;
+  gap: 2px;
+  padding: 3px;
+  border-radius: var(--r-sm);
+  background: var(--well);
+  box-shadow: var(--inset-shadow);
+}
+.dpi-view-toggle > button {
+  min-height: 30px;
+  padding-inline: 12px;
+  border-radius: var(--r-xs);
+  color: var(--text-3);
+  font-size: var(--fs-meta);
+  font-weight: 600;
+}
+.dpi-view-toggle > button:hover { color: var(--text-1); }
+.dpi-view-toggle > button.is-on {
+  background: var(--key);
+  box-shadow: var(--key-shadow);
+  color: var(--text-1);
+}
+.dpi-header-actions { display: flex; align-items: center; gap: 12px; margin-inline-start: auto; }
+#dpi-output {
+  width: 164px;
+  min-height: 38px;
+  padding: 2px 6px;
+  text-align: end;
+  font-size: 26px;
+  font-weight: 650;
+  letter-spacing: -0.02em;
+  font-variant-numeric: tabular-nums;
+}
+#dpi-output[readonly] { background: transparent; box-shadow: none; cursor: text; }
+#custom-dpi,
+#egg-polling-settings .egg-action-button,
+#egg-cpi-stage-list > div > button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 32px;
+  padding-inline: 12px;
+  border-radius: var(--r-sm);
+  background: var(--btn);
+  box-shadow: var(--btn-shadow);
+  color: var(--text-1);
+  font-size: var(--fs-meta);
+  font-weight: 600;
+}
+#custom-dpi:hover:not(:disabled),
+#egg-polling-settings .egg-action-button:hover:not(:disabled),
+#egg-cpi-stage-list > div > button:hover:not(:disabled) { background: var(--btn-hover); }
+#custom-dpi:disabled { opacity: 0.45; }
+.dpi-editor { display: grid; gap: 12px; min-width: 0; }
+.dpi-editor-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  gap: 12px;
+  color: var(--text-3);
+  font-size: var(--fs-meta);
+}
+.dpi-editor-bar-count { color: var(--text-2); font-variant-numeric: tabular-nums; }
+.dpi-slot-rule { display: none; }
+.dpi-editor-list { display: grid; min-width: 0; border-top: 1px solid var(--line-1); }
+.dpi-editor-row {
+  display: grid;
+  grid-template-columns: 32px 36px 92px minmax(0, 1fr);
+  align-items: center;
+  gap: 12px;
+  height: 44px;
+  padding-inline: 4px 12px;
+  border-bottom: 1px solid var(--line-1);
+}
+.dpi-editor-row.is-active { background: rgb(var(--accent-rgb) / 0.065); }
+.dpi-editor.has-stage-axes .dpi-editor-row { grid-template-columns: 32px 36px 84px 84px minmax(0, 1fr); }
+.dpi-editor-axes-head {
+  display: grid;
+  grid-template-columns: 32px 36px 84px 84px minmax(0, 1fr);
+  gap: 12px;
+  padding: 0 12px 6px 4px;
+  color: var(--text-3);
+  font-size: var(--fs-meta);
+  font-weight: 600;
+}
+.dpi-editor-axes-head > span { text-align: end; padding-inline-end: 4px; }
+.dpi-editor-axes-head > span:first-child { grid-column: 3; }
+.dpi-editor-axes-head > span:last-child { grid-column: 4; }
+.dpi-editor-check {
+  position: relative;
+  display: grid;
+  place-items: center;
+  width: 32px;
+  height: 44px;
+  cursor: pointer;
+}
+.dpi-editor-check > .dpi-editor-tick {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  opacity: 0;
+  cursor: inherit;
+}
+.dpi-editor-box {
+  display: grid;
+  place-items: center;
+  width: 16px;
+  height: 16px;
+  border: 1px solid var(--line-3);
+  border-radius: var(--r-xs);
+  background: var(--well);
+  color: transparent;
+}
+.dpi-editor-tick:checked + .dpi-editor-box {
+  border-color: var(--line-3);
+  background: var(--surface-4);
+  color: var(--text-1);
+}
+.dpi-editor-check:hover .dpi-editor-box { border-color: var(--accent-line); }
+.dpi-editor-tick:focus-visible + .dpi-editor-box { box-shadow: var(--focus); }
+.dpi-editor-check:has(> input:disabled) { cursor: default; }
+.dpi-editor-check:has(> input:disabled) .dpi-editor-box { opacity: 0.55; }
+.dpi-editor-index {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  gap: 5px;
+  min-width: 0;
+  height: 32px;
+  border-radius: var(--r-sm);
+  color: var(--text-3);
+  font-size: var(--fs-meta);
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+.dpi-editor-index:hover:not(:disabled) { background: var(--surface-2); color: var(--text-1); }
+.dpi-editor-row.is-active .dpi-editor-index { color: var(--accent); background: var(--accent-soft); }
+.dpi-editor-stage-swatch { width: 4px; height: 12px; border-radius: var(--r-xs); background: var(--dpi-stage-color); }
+.dpi-editor-row > .dpi-editor-value {
+  width: 100%;
+  min-width: 0;
+  height: 32px;
+  padding-inline: 10px 4px;
+  text-align: end;
+  font-size: var(--fs-body);
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+.dpi-editor-value::-webkit-inner-spin-button { opacity: 0; }
+.dpi-editor-value:hover::-webkit-inner-spin-button,
+.dpi-editor-value:focus::-webkit-inner-spin-button { opacity: 1; }
+.dpi-editor-slider { min-width: 0; margin: 0; }
+.dpi-editor-row.is-off .dpi-editor-value,
+.dpi-editor-row.is-off .dpi-editor-index { color: var(--text-3); }
+.dpi-editor-row.is-off .dpi-editor-slider { opacity: 0.5; }
+.dpi-card-main > .setting-action { min-height: 20px; }
+.dpi-card.is-staged #dpi-pending { color: var(--accent); }
+
+.dpi-card-lift { min-width: 0; border-inline-start: 1px solid var(--line-1); padding-inline-start: 24px; }
+#host-lod-row { display: grid; align-content: start; gap: 16px; min-width: 0; }
+#host-lod-row .setting-heading > div { gap: 6px; }
+#host-lod-row .segmented { display: flex; width: 100%; }
+#host-lod-row .segmented > button { min-width: 0; flex: 1 1 0; padding-inline: 8px; }
+.lod-sliders { display: grid; gap: 16px; min-width: 0; }
+.lod-sliders > label { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 8px; color: var(--text-2); font-size: var(--fs-meta); }
+.lod-sliders output { font-weight: 650; color: var(--text-1); font-variant-numeric: tabular-nums; }
+.lod-sliders .glass-slider-rail { grid-column: 1 / -1; display: block; }
+.slot-lod-list { display: grid; border-top: 1px solid var(--line-1); margin-top: 30px; }
+.dpi-card:has(.slot-lod-list) :is(.dpi-card-main > .setting-heading, #host-lod-row > .setting-heading) { min-height: 40px; }
+.slot-lod-row { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 12px; height: 44px; border-bottom: 1px solid var(--line-1); }
+.slot-lod-index { color: var(--text-3); font-size: var(--fs-meta); font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; }
+.lod-select { position: relative; min-width: 0; }
+.lod-select-value {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  width: 100%;
+  height: 32px;
+  padding-inline: 11px;
+  border-radius: var(--r-sm);
+  background: var(--btn);
+  box-shadow: var(--btn-shadow);
+  color: var(--text-1);
+  font-size: var(--fs-meta);
+  font-weight: 550;
+}
+.lod-select-value:hover:not(:disabled) { background: var(--btn-hover); }
+.lod-select-value:disabled { opacity: 0.45; }
+.lod-select-value i { width: 6px; height: 6px; flex: none; border-inline-end: 1px solid var(--text-3); border-bottom: 1px solid var(--text-3); transform: rotate(45deg); }
+.lod-select.is-open .lod-select-value i { transform: rotate(225deg); }
+.lod-select-menu {
+  display: none;
+  position: absolute;
+  z-index: 40;
+  inset-inline: 0;
+  top: calc(100% + 4px);
+  margin: 0;
+  padding: 4px;
+  list-style: none;
+  border-radius: var(--r-sm);
+  background: var(--solid-2);
+  box-shadow: var(--lit), var(--shadow-float);
+}
+.lod-select.is-open .lod-select-menu { display: block; }
+.lod-select-menu li { min-height: 32px; padding: 7px 10px; border-radius: var(--r-xs); color: var(--text-2); font-size: var(--fs-meta); cursor: pointer; }
+.lod-select-menu li:hover { background: var(--surface-3); color: var(--text-1); }
+.lod-select-menu li[aria-selected="true"] { color: var(--accent); }
+
+#polling-card { gap: 16px; }
+#polling-card .setting-heading > .performance-figure {
+  padding: 0;
+  border-radius: 0;
+  background: transparent;
+  font-size: 28px;
+  font-weight: 650;
+  letter-spacing: -0.02em;
+  line-height: 1.1;
+}
+.performance-unit { margin-inline-start: 5px; font-size: var(--fs-meta); font-weight: 500; letter-spacing: 0; color: var(--text-3); }
+#profile-rate-rows { display: grid; gap: 16px; }
+#profile-rate-rows > .rate-slider + .rate-slider { padding-top: 16px; border-top: 1px solid var(--line-1); }
+#polling-card .rate-slider-buttons > button { height: 38px; }
+#polling-card .rate-slider-head { color: var(--text-3); font-size: var(--fs-meta); }
+#polling-card .rate-slider-head output { color: var(--text-1); font-size: 18px; }
+#gaming-surface-row { display: grid; gap: 16px; }
+#gaming-surface-row .segmented { display: flex; }
+
+#processing-settings > .field-label { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 16px; margin: 0; padding-block: 12px; border-top: 1px solid var(--line-1); }
+#processing-settings > .field-label > .setting-note { grid-column: 1 / -1; }
+#processing-settings > .field-label > .option-menu { min-width: 128px; }
+#processing-settings > .stepper-slider { padding-block: 16px 8px; border-top: 1px solid var(--line-1); }
+#processing-settings > .setting-note { padding-bottom: 8px; }
+#ninjutso-sensor-settings > :is(#ninjutso-system-row, #ninjutso-optical-row),
+#ninjutso-click-settings > #ninjutso-slam-row { display: grid; gap: 8px; }
+#ninjutso-optical-row, #ninjutso-slam-row { padding-top: 12px; border-top: 1px solid var(--line-1); }
+#ninjutso-click-settings > .setting-note { margin-top: 12px; }
+:is(#ninjutso-system-row, #ninjutso-optical-row, #ninjutso-slam-row) .setting-heading h2 { font-size: var(--fs-body); font-weight: 500; color: var(--text-2); }
+:is(#ninjutso-system-row, #ninjutso-optical-row, #ninjutso-slam-row, #power-mode-settings) > .segmented { display: flex; }
+#atk-sensor-mode > .segmented { display: grid; grid-template-columns: 1fr; }
+#atk-sensor-mode > .segmented > button { min-height: 40px; height: auto; padding: 10px 12px; text-align: start; white-space: normal; line-height: 1.4; }
+
+:is(#egg-polling-settings, #egg-cpi-settings) { grid-column: 1 / -1; min-width: 0; }
+:is(#egg-polling-settings, #egg-cpi-settings) .setting-card { padding: 0; border-radius: 0; background: transparent; box-shadow: none; }
+#egg-polling-settings .egg-warning { color: var(--warn); font-size: var(--fs-meta); line-height: 1.5; max-width: 80ch; }
+#egg-polling-settings .egg-form-card > label { display: flex; align-items: center; justify-content: space-between; gap: 16px; color: var(--text-2); font-size: var(--fs-meta); }
+#egg-polling-divider { width: 96px; font-weight: 600; text-align: end; font-variant-numeric: tabular-nums; }
+#egg-polling-settings .egg-action-button { align-self: flex-start; }
+#egg-cpi-settings .setting-card > .field-label { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
+#egg-cpi-stage-list { display: grid; }
+#egg-cpi-stage-list > div { display: grid; grid-template-columns: 80px minmax(140px, 1fr) minmax(180px, 1.4fr) auto; gap: 16px; align-items: center; min-height: 56px; padding-block: 12px; border-top: 1px solid var(--line-1); }
+#egg-cpi-stage-list strong { font-size: var(--fs-meta); font-weight: 600; }
+#egg-cpi-stage-list .egg-split-toggle { display: flex; align-items: center; gap: 8px; color: var(--text-2); font-size: var(--fs-meta); }
+#egg-cpi-stage-list input[type="checkbox"] { accent-color: var(--accent); width: 16px; height: 16px; }
+#egg-cpi-stage-list .egg-tile-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
+#egg-cpi-stage-list .egg-tile-label { display: flex; align-items: center; gap: 8px; color: var(--text-3); font-size: var(--fs-meta); }
+#egg-cpi-stage-list .egg-tile-field { width: 100%; min-width: 0; text-align: end; font-weight: 600; font-variant-numeric: tabular-nums; }
+
+#bunny-hop-row { display: grid; gap: 12px; margin-top: 4px; padding-top: 16px; border-top: 1px solid var(--line-1); }
+#bunny-hop-card #bunny-hop-row { margin: 0; padding: 0; border: 0; }
+.bunny-hop-controls { display: flex; align-items: center; gap: 8px; color: var(--text-3); font-size: var(--fs-meta); }
+#bunny-hop-input { width: 88px; margin-inline-start: auto; text-align: end; font-size: 18px; font-weight: 650; font-variant-numeric: tabular-nums; }
+#wallhack-dynsens-card > .macro-steps { display: grid; gap: 12px; padding-top: 12px; border-top: 1px solid var(--line-1); }
+#wallhack-dynsens-card .macro-step { display: grid; grid-template-columns: 28px minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: center; }
+#wallhack-dynsens-card .macro-step-index { color: var(--text-3); font-variant-numeric: tabular-nums; }
+#wallhack-dynsens-card .macro-step label { display: grid; gap: 6px; color: var(--text-3); font-size: var(--fs-meta); }
+#wallhack-dynsens-card .macro-step input { width: 100%; min-width: 0; font-variant-numeric: tabular-nums; }
+
+@media (max-width: 1180px) {
+  .dpi-card.has-lift-off { grid-template-columns: minmax(0, 1fr) 220px; gap: 20px; }
+  .dpi-card-lift { padding-inline-start: 20px; }
+  .dpi-card .setting-heading > .dpi-heading-label { gap: 8px; }
+  #dpi-output { width: 152px; font-size: 24px; }
+  #egg-cpi-stage-list > div { grid-template-columns: 72px minmax(120px, 1fr) minmax(160px, 1.4fr) auto; gap: 12px; }
+}
+@media (max-width: 900px) {
+  .dpi-card.has-lift-off { grid-template-columns: minmax(0, 1fr); }
+  .dpi-card-lift { border-inline-start: 0; padding-inline-start: 0; border-top: 1px solid var(--line-1); padding-top: 20px; }
+  .slot-lod-list { max-width: 360px; margin-top: 0; }
+  #egg-cpi-stage-list > div { grid-template-columns: 1fr auto; }
+  #egg-cpi-stage-list .egg-tile-pair { grid-column: 1; }
+}
+@media (max-width: 560px) {
+  .dpi-editor-row { grid-template-columns: 24px 28px 72px minmax(0, 1fr); gap: 8px; padding-inline: 0 8px; }
+  .dpi-editor.has-stage-axes .dpi-editor-row,
+  .dpi-editor-axes-head { grid-template-columns: 24px 28px 64px 64px minmax(0, 1fr); gap: 8px; padding-inline: 0 8px; }
+  .dpi-editor-check { width: 24px; }
+  .dpi-heading-label { width: 100%; justify-content: space-between; }
+  .dpi-header-actions { margin-inline-start: 0; width: 100%; justify-content: space-between; }
+  #dpi-output { text-align: start; padding-inline-start: 0; }
+  #polling-card .rate-slider-buttons { flex-wrap: wrap; }
+  #polling-card .rate-slider-buttons > button { flex-basis: 48px; }
+  #processing-settings > .field-label { grid-template-columns: minmax(0, 1fr); }
+  #egg-cpi-stage-list .egg-tile-pair { grid-column: 1 / -1; grid-row: 2; }
+  #egg-cpi-stage-list > div > button { grid-column: 2; grid-row: 3; }
+}
+
+#egg-v2-sensor-settings .egg-angle-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding-block: 4px 12px;
+  border-bottom: 1px solid var(--line-1);
+}
+#egg-v2-sensor-settings .egg-angle-row > label { display: grid; gap: 4px; min-width: 0; color: var(--text-1); font-size: var(--fs-body); font-weight: 600; }
+#egg-v2-sensor-settings .egg-angle-row .setting-note { color: var(--text-3); font-size: var(--fs-meta); font-weight: 400; }
+#egg-v2-sensor-settings .egg-angle-field { display: flex; flex: none; align-items: center; gap: 8px; }
+#egg-v2-sensor-settings .egg-angle-field input {
+  width: 72px;
+  height: 32px;
+  padding-inline: 10px;
+  border: 1px solid var(--line-2);
+  border-radius: var(--r-sm);
+  background: var(--well);
+  color: var(--text-1);
+  font-family: var(--font-mono);
+  font-size: 13px;
+  text-align: end;
+}
+#egg-v2-sensor-settings .egg-angle-field input:focus-visible { outline: 2px solid var(--accent-line); outline-offset: 1px; }
+
+#host-lod-row .segmented.lod-steps {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  width: 100%;
+}
+#host-lod-row .segmented.lod-steps > button { min-width: 0; height: 30px; padding-inline: 4px; font-variant-numeric: tabular-nums; }
diff --git a/src/styles/base.css b/src/styles/base.css
new file mode 100644
index 00000000..9e4cc87f
--- /dev/null
+++ b/src/styles/base.css
@@ -0,0 +1,62 @@
+[hidden] { display: none !important; }
+
+*, *::before, *::after { box-sizing: border-box; }
+
+html, body { margin: 0; padding: 0; }
+
+body {
+  min-width: 320px;
+  background: var(--ink-1);
+  color: var(--text-1);
+  font-family: var(--font-sans);
+  font-size: var(--fs-body);
+  line-height: 1.45;
+  font-synthesis: none;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
+h1, h2, h3, h4 { font-weight: 600; letter-spacing: -0.01em; }
+ul, ol { margin: 0; padding: 0; }
+button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
+button { cursor: pointer; background: none; border: 0; padding: 0; }
+button:disabled { cursor: default; }
+a { color: inherit; text-decoration: none; }
+img, svg { display: block; }
+svg { flex: none; }
+output, .num, input[type="number"] { font-variant-numeric: tabular-nums; }
+code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.92em; }
+::selection { background: rgb(var(--accent-rgb) / 0.3); }
+
+:focus { outline: none; }
+:focus-visible { outline: none; box-shadow: var(--focus); }
+input:focus-visible, textarea:focus-visible, select:focus-visible { box-shadow: var(--focus); }
+
+* { scrollbar-width: thin; scrollbar-color: var(--line-3) transparent; }
+::-webkit-scrollbar { width: 10px; height: 10px; }
+::-webkit-scrollbar-thumb { background: var(--line-3); border-radius: 10px; border: 3px solid transparent; background-clip: content-box; }
+::-webkit-scrollbar-track { background: transparent; }
+
+.sr-only, .app-live-region {
+  position: absolute !important;
+  width: 1px; height: 1px;
+  margin: -1px; padding: 0;
+  overflow: hidden; clip: rect(0 0 0 0);
+  white-space: nowrap; border: 0;
+}
+
+.reduce-interface-motion *, .reduce-interface-motion *::before, .reduce-interface-motion *::after {
+  animation-duration: 1ms !important;
+  animation-iteration-count: 1 !important;
+  transition-duration: 1ms !important;
+  scroll-behavior: auto !important;
+}
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 1ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 1ms !important;
+    scroll-behavior: auto !important;
+  }
+}
diff --git a/src/styles/controls.css b/src/styles/controls.css
new file mode 100644
index 00000000..a1a78016
--- /dev/null
+++ b/src/styles/controls.css
@@ -0,0 +1,469 @@
+.om-panel {
+  position: relative;
+  background: var(--sheen), var(--surface-1);
+  box-shadow: var(--lit);
+  border-radius: var(--r-md);
+  min-width: 0;
+}
+.om-panel.is-lit {
+  background:
+    radial-gradient(70% 90% at 100% 0%, rgb(var(--accent-rgb) / 0.07), transparent 62%),
+    var(--sheen), var(--surface-1);
+}
+.om-panel-head {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-height: 52px;
+  padding: 14px 18px 8px;
+}
+.om-panel-head h2 { font-size: var(--fs-h2); font-weight: 600; }
+.om-panel-head .om-meta { color: var(--text-3); font-size: var(--fs-meta); }
+.om-panel-head .om-end { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; }
+.om-panel-body { padding: 6px 18px 18px; }
+.om-panel-foot {
+  display: flex; align-items: center; gap: 8px;
+  padding: 12px 18px 14px;
+  border-top: 1px solid var(--line-1);
+  color: var(--text-3);
+  font-size: var(--fs-meta);
+}
+
+.om-meta { color: var(--text-3); font-size: var(--fs-meta); }
+.om-label { color: var(--text-3); font-size: var(--fs-meta); font-weight: 500; }
+
+.om-btn, .connect-button {
+  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
+  height: 32px; padding-inline: 13px;
+  border-radius: var(--r-sm);
+  background: var(--btn);
+  box-shadow: var(--btn-shadow);
+  color: var(--text-1);
+  font-size: 12.5px; font-weight: 600;
+  white-space: nowrap;
+  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
+}
+.om-btn:hover:not(:disabled), .connect-button:hover:not(:disabled) { background: var(--btn-hover); }
+.om-btn:disabled, .connect-button:disabled { opacity: 0.45; cursor: default; }
+.om-btn svg, .connect-button svg { width: 15px; height: 15px; }
+.om-btn.is-primary, .connect-button.is-primary {
+  background: var(--accent);
+  color: var(--on-accent);
+  box-shadow: var(--primary-shadow);
+}
+.om-btn.is-primary:hover:not(:disabled), .connect-button.is-primary:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--accent) 88%, white);
+}
+.om-btn.is-ghost { background: transparent; box-shadow: none; color: var(--text-2); }
+.om-btn.is-ghost:hover:not(:disabled) { background: var(--glint); color: var(--text-1); }
+.om-btn.is-danger { color: var(--bad); }
+.om-btn.is-lg { height: 38px; padding-inline: 16px; font-size: 13px; }
+.om-btn.is-sm { height: 26px; padding-inline: 9px; font-size: 12px; }
+.om-btn.is-icon { width: 32px; padding: 0; }
+.om-btn.is-icon.is-sm { width: 26px; }
+
+.om-icon-btn, .icon-button {
+  display: inline-grid; place-items: center;
+  width: 30px; height: 30px;
+  border-radius: var(--r-sm);
+  color: var(--text-2);
+  background: transparent;
+  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
+}
+.om-icon-btn:hover:not(:disabled), .icon-button:hover:not(:disabled) { background: var(--glint); color: var(--text-1); }
+.om-icon-btn:disabled, .icon-button:disabled { opacity: 0.4; cursor: default; }
+.om-icon-btn svg, .icon-button svg { width: 16px; height: 16px; overflow: visible; }
+.icon-button.is-active { color: var(--accent); background: var(--accent-soft); }
+
+.om-badge {
+  display: inline-flex; align-items: center; gap: 5px;
+  height: 22px; padding-inline: 8px;
+  border-radius: var(--r-xs);
+  background: var(--surface-2);
+  color: var(--text-2);
+  font-size: var(--fs-small); font-weight: 600;
+  white-space: nowrap;
+}
+.om-badge svg { width: 12px; height: 12px; }
+.om-badge.is-ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 13%, transparent); }
+.om-badge.is-bad { color: var(--bad); background: color-mix(in srgb, var(--bad) 13%, transparent); }
+.om-badge.is-warn { color: var(--warn); background: color-mix(in srgb, var(--warn) 13%, transparent); }
+.om-badge.is-accent { color: var(--accent); background: var(--accent-soft); }
+
+.om-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-4); flex: none; }
+.om-dot.is-ok { background: var(--ok); }
+.om-dot.is-bad { background: var(--bad); }
+
+.om-fig {
+  font-size: 28px; font-weight: 650; line-height: 1.05;
+  letter-spacing: -0.02em;
+  font-variant-numeric: tabular-nums;
+  color: var(--text-1);
+}
+.om-fig .om-unit { margin-inline-start: 4px; color: var(--text-3); font-size: 13px; font-weight: 500; letter-spacing: 0; }
+.om-fig.is-sm { font-size: 18px; }
+
+.om-kv { list-style: none; padding: 0 18px 8px; }
+.om-kv > li {
+  display: flex; align-items: center; justify-content: space-between; gap: 16px;
+  min-height: 38px;
+  border-top: 1px solid var(--line-1);
+}
+.om-kv > li:first-child { border-top: 0; }
+.om-kv > li > span:first-child { color: var(--text-3); }
+.om-kv > li > :last-child { font-weight: 550; text-align: end; font-variant-numeric: tabular-nums; }
+
+.om-empty { display: grid; gap: 6px; padding: 8px 18px 20px; }
+.om-empty strong { font-weight: 600; }
+.om-empty p { color: var(--text-3); max-width: 52ch; }
+
+.om-chip {
+  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
+  height: 28px; min-width: 60px; padding-inline: 10px;
+  border-radius: var(--r-sm);
+  background: var(--well);
+  box-shadow: var(--inset-shadow);
+  color: var(--text-2);
+  font-size: 12px; font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+.om-chip.is-on { background: var(--key); box-shadow: var(--key-shadow); color: var(--text-1); }
+.om-chip.is-on::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
+
+.om-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; color: var(--text-2); font-size: 12.5px; }
+.om-stat { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-variant-numeric: tabular-nums; }
+.om-stat > svg:not(.battery-icon) { width: 15px; height: 15px; color: var(--text-3); }
+.om-stat b { color: var(--text-1); font-weight: 600; }
+.om-stat .om-muted { color: var(--text-3); }
+
+.battery-icon { width: 22px; height: 11px; flex: none; overflow: visible; }
+.battery-icon .battery-shell { fill: none; stroke: currentColor; stroke-width: 1.4; opacity: 0.7; }
+.battery-icon .battery-cap { fill: currentColor; opacity: 0.7; }
+.battery-icon .battery-track { fill: transparent; }
+.battery-icon .battery-fill { fill: currentColor; }
+.battery-icon .battery-bolt { fill: currentColor; }
+.battery-icon .battery-dead { fill: none; stroke: var(--bad); stroke-width: 1.6; stroke-linecap: round; }
+.battery-icon { color: var(--text-2); }
+.battery-icon.is-ok .battery-fill { fill: var(--text-1); }
+.battery-icon.is-charging { color: var(--ok); }
+.battery-icon.is-low { color: var(--bad); }
+.battery-icon.is-low .battery-shell { opacity: 1; }
+.battery-icon.is-dead { color: var(--bad); }
+.battery-icon.is-unknown { color: var(--text-4); }
+
+.switch-button {
+  position: relative;
+  display: inline-flex; align-items: center;
+  width: 38px; height: 22px; flex: none;
+  padding: 2px;
+  border-radius: 11px;
+  background: var(--well);
+  box-shadow: var(--inset-shadow);
+  transition: background var(--t-base) var(--ease);
+}
+.switch-button .switch-thumb {
+  display: grid; place-items: center;
+  width: 18px; height: 18px;
+  border-radius: 50%;
+  background: var(--key);
+  box-shadow: var(--key-shadow);
+  color: var(--accent);
+  transition: transform var(--t-base) var(--ease);
+}
+.switch-button .switch-thumb svg { width: 10px; height: 10px; }
+.switch-button.is-on { background: var(--accent); box-shadow: none; }
+.switch-button.is-on .switch-thumb { transform: translateX(16px); background: var(--on-accent); color: var(--accent); box-shadow: none; }
+[dir="rtl"] .switch-button.is-on .switch-thumb { transform: translateX(-16px); }
+.switch-button:disabled { opacity: 0.5; }
+.switch-button.is-na { width: auto; padding-inline: 8px; opacity: 1; }
+.switch-button .switch-na { color: var(--text-3); font-size: var(--fs-small); font-weight: 600; }
+
+.switch-row {
+  display: flex; align-items: center; justify-content: space-between; gap: 16px;
+  min-height: 40px;
+  color: var(--text-1);
+  font-weight: 500;
+}
+
+.segmented {
+  display: inline-flex; flex-wrap: wrap;
+  gap: 2px; padding: 3px;
+  border-radius: var(--r-sm);
+  background: var(--well);
+  box-shadow: var(--inset-shadow);
+  max-width: 100%;
+}
+.segmented > button {
+  flex: 1 0 auto;
+  min-width: 44px; height: 28px; padding-inline: 11px;
+  border-radius: 4px;
+  color: var(--text-3);
+  font-size: 12px; font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
+}
+.segmented > button:hover:not(:disabled):not(.selected) { color: var(--text-1); }
+.segmented > button.selected { background: var(--key); box-shadow: var(--key-shadow); color: var(--text-1); }
+.segmented > button:disabled:not(.selected) { opacity: 0.4; }
+
+.option-menu { position: relative; display: inline-block; min-width: 160px; max-width: 100%; }
+.option-menu-trigger {
+  display: flex; align-items: center; justify-content: space-between; gap: 10px;
+  width: 100%; height: 32px; padding-inline: 11px 9px;
+  border-radius: var(--r-sm);
+  background: var(--btn);
+  box-shadow: var(--btn-shadow);
+  font-size: 12.5px; font-weight: 550;
+  text-align: start;
+}
+.option-menu-trigger span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.option-menu-trigger svg { color: var(--text-3); transition: transform var(--t-fast) var(--ease); }
+.option-menu.is-open .option-menu-trigger svg { transform: rotate(180deg); }
+.option-menu-trigger:hover:not(:disabled) { background: var(--btn-hover); }
+.option-menu-trigger:disabled { opacity: 0.45; }
+.option-menu-list {
+  position: absolute; z-index: 40;
+  inset-inline: 0; top: calc(100% + 4px);
+  min-width: 100%; width: max-content; max-width: 320px;
+  max-height: 300px; overflow: auto;
+  padding: 4px;
+  list-style: none;
+  border-radius: var(--r-sm);
+  background: var(--solid-2);
+  box-shadow: var(--lit), var(--shadow-float);
+}
+.option-menu-list li {
+  display: flex; align-items: center;
+  min-height: 32px; padding: 6px 10px;
+  border-radius: 4px;
+  color: var(--text-2);
+  font-size: 12.5px;
+  cursor: pointer;
+}
+.option-menu-list li:hover, .option-menu-list li:focus-visible { background: var(--surface-3); color: var(--text-1); box-shadow: none; }
+.option-menu-list li.is-selected { color: var(--text-1); font-weight: 600; }
+.option-menu-list li.is-selected::after { content: ""; width: 6px; height: 6px; margin-inline-start: auto; padding-inline-start: 0; border-radius: 50%; background: var(--accent); }
+.option-menu-list li[aria-disabled="true"] { opacity: 0.4; cursor: default; }
+
+select {
+  height: 32px; padding-inline: 10px 28px;
+  border: 0; border-radius: var(--r-sm);
+  background: var(--btn);
+  box-shadow: var(--btn-shadow);
+  color: var(--text-1);
+  font-size: 12.5px;
+}
+select option { background: var(--solid-2); color: var(--text-1); }
+
+input[type="text"], input[type="number"], input[type="search"], input:not([type]), textarea {
+  min-height: 32px; padding: 6px 10px;
+  border: 0; border-radius: var(--r-sm);
+  background: var(--well);
+  box-shadow: var(--inset-shadow);
+  color: var(--text-1);
+  font-size: 12.5px;
+}
+textarea { resize: vertical; line-height: 1.45; }
+input::placeholder, textarea::placeholder { color: var(--text-4); }
+input:disabled, textarea:disabled { color: var(--text-3); }
+
+input[type="range"] {
+  --fill: 50%;
+  -webkit-appearance: none; appearance: none;
+  width: 100%; height: 20px;
+  background: transparent;
+  cursor: pointer;
+}
+input[type="range"]::-webkit-slider-runnable-track {
+  height: 4px; border-radius: 2px;
+  background: linear-gradient(90deg, var(--accent) var(--fill), rgb(var(--tint-rgb) / 0.14) var(--fill));
+}
+input[type="range"]::-moz-range-track { height: 4px; border-radius: 2px; background: rgb(var(--tint-rgb) / 0.14); }
+input[type="range"]::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--accent); }
+input[type="range"]::-webkit-slider-thumb {
+  -webkit-appearance: none; appearance: none;
+  width: 14px; height: 14px; margin-top: -5px;
+  border: 0; border-radius: 50%;
+  background: var(--text-1);
+  box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / 0.25), 0 1px 3px rgb(var(--shade-rgb) / 0.5);
+}
+input[type="range"]::-moz-range-thumb {
+  width: 14px; height: 14px;
+  border: 0; border-radius: 50%;
+  background: var(--text-1);
+  box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / 0.25), 0 1px 3px rgb(var(--shade-rgb) / 0.5);
+}
+input[type="range"]:focus-visible { box-shadow: none; }
+input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: var(--focus); }
+input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: var(--focus); }
+input[type="range"]:disabled { opacity: 0.45; cursor: default; }
+
+.stepper-slider { display: grid; gap: 6px; min-width: 0; }
+.stepper-slider-toggle { margin-bottom: 2px; }
+.stepper-slider-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
+.stepper-slider-title { display: inline-flex; align-items: center; gap: 8px; font-weight: 550; }
+.stepper-slider-badge { padding: 2px 6px; border-radius: var(--r-xs); background: var(--surface-2); color: var(--text-3); font-size: var(--fs-small); font-style: normal; font-weight: 600; }
+.stepper-slider-head output { color: var(--text-1); font-weight: 650; font-variant-numeric: tabular-nums; }
+.stepper-slider-inputs { display: grid; grid-template-columns: 28px 1fr 28px; align-items: center; gap: 10px; }
+.stepper-slider-inputs > button {
+  display: grid; place-items: center;
+  width: 28px; height: 28px;
+  border-radius: var(--r-sm);
+  background: var(--btn); box-shadow: var(--btn-shadow);
+  color: var(--text-2);
+}
+.stepper-slider-inputs > button:hover:not(:disabled) { color: var(--text-1); background: var(--btn-hover); }
+.stepper-slider-inputs > button:disabled { opacity: 0.35; }
+.stepper-slider-scale { display: flex; justify-content: space-between; padding-inline: 38px; color: var(--text-4); font-size: var(--fs-small); font-variant-numeric: tabular-nums; }
+.stepper-slider-scale i { font-style: normal; }
+
+.rate-slider { display: grid; gap: 8px; min-width: 0; }
+.rate-slider-head { display: flex; justify-content: space-between; align-items: baseline; font-weight: 550; }
+.rate-slider-head output { font-weight: 650; font-variant-numeric: tabular-nums; }
+.rate-slider-buttons {
+  display: flex; gap: 2px; padding: 3px;
+  border-radius: var(--r-sm);
+  background: var(--well);
+  box-shadow: var(--inset-shadow);
+}
+.rate-slider-buttons > button {
+  flex: 1 1 0; min-width: 0; height: 32px;
+  border-radius: 4px;
+  color: var(--text-3);
+  font-size: 12.5px; font-weight: 650;
+  font-variant-numeric: tabular-nums;
+  transition: color var(--t-fast) var(--ease);
+}
+.rate-slider-buttons > button:hover:not(:disabled):not(.is-on) { color: var(--text-1); }
+.rate-slider-buttons > button.is-on { background: var(--key); box-shadow: var(--key-shadow); color: var(--text-1); }
+.rate-slider-buttons > button.is-on::after { content: ""; display: block; width: 14px; height: 2px; margin: 3px auto -5px; border-radius: 1px; background: var(--accent); }
+.rate-slider-buttons > button:disabled { opacity: 0.45; }
+.rate-slider-hours { color: var(--text-3); font-size: var(--fs-meta); }
+
+details.egg-collapsible, details.egg-experimental {
+  border-radius: var(--r-md);
+  background: var(--sheen), var(--surface-1);
+  box-shadow: var(--lit);
+}
+details.egg-collapsible > summary, details.egg-experimental > summary {
+  display: flex; align-items: center; justify-content: space-between; gap: 12px;
+  min-height: 52px; padding: 12px 18px;
+  list-style: none; cursor: pointer;
+  font-size: var(--fs-h2); font-weight: 600;
+}
+details > summary::-webkit-details-marker { display: none; }
+details.egg-collapsible > summary small, details.egg-experimental > summary small { display: none; }
+details.egg-collapsible > summary > i, details.egg-experimental > summary > i {
+  width: 8px; height: 8px;
+  border-inline-end: 1.6px solid var(--text-3);
+  border-bottom: 1.6px solid var(--text-3);
+  transform: rotate(45deg);
+  transition: transform var(--t-base) var(--ease);
+}
+details[open].egg-collapsible > summary > i, details[open].egg-experimental > summary > i { transform: rotate(-135deg); }
+.egg-collapsible-body, .egg-experimental-body { padding: 4px 18px 18px; display: grid; gap: 14px; }
+
+.settings-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr));
+  gap: 14px;
+  align-items: start;
+}
+
+.setting-card {
+  position: relative;
+  display: flex; flex-direction: column; gap: 12px;
+  min-width: 0;
+  padding: 16px 18px 18px;
+  border-radius: var(--r-md);
+  background: var(--sheen), var(--surface-1);
+  box-shadow: var(--lit);
+}
+.setting-card.is-staged { box-shadow: var(--lit), inset 0 0 0 1px var(--accent-line); }
+
+.setting-heading {
+  display: flex; align-items: center; justify-content: space-between; gap: 12px;
+  min-height: 28px;
+}
+.setting-heading > div:first-child { min-width: 0; display: grid; gap: 2px; }
+.setting-heading > div > p:has(+ h2), .setting-heading > div > p:has(+ h3) { display: none; }
+.setting-heading h2, .setting-heading h3 { font-size: var(--fs-h2); font-weight: 600; letter-spacing: -0.01em; }
+.setting-heading p { color: var(--text-3); font-size: var(--fs-meta); }
+.setting-heading output {
+  padding: 4px 9px;
+  border-radius: var(--r-xs);
+  background: var(--surface-2);
+  color: var(--text-1);
+  font-size: 12px; font-weight: 650;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+.setting-heading output.fw-badge-available { color: var(--ok); background: color-mix(in srgb, var(--ok) 13%, transparent); }
+
+.setting-note, .field-note {
+  display: block;
+  color: var(--text-3);
+  font-size: var(--fs-meta);
+  line-height: 1.5;
+}
+.setting-note-warning { color: var(--warn); }
+.setting-note-stable { min-height: 3em; }
+
+.setting-action {
+  display: flex; align-items: center; justify-content: space-between; gap: 10px;
+  color: var(--text-3);
+  font-size: var(--fs-meta);
+}
+.setting-action button:not(.om-btn):not(.connect-button):not(.icon-button) {
+  height: 28px; padding-inline: 11px;
+  border-radius: var(--r-sm);
+  background: var(--accent); color: var(--on-accent);
+  box-shadow: var(--primary-shadow);
+  font-size: 12px; font-weight: 650;
+}
+.setting-action button:disabled { opacity: 0.45; }
+
+.field-label { display: block; color: var(--text-3); font-size: var(--fs-meta); font-weight: 500; }
+.field-label.spaced { margin-top: 6px; }
+
+.title-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
+.overline { color: var(--text-3); font-size: var(--fs-meta); font-weight: 500; }
+
+.setting-row {
+  display: flex; align-items: center; justify-content: space-between; gap: 24px;
+  min-height: 60px;
+  padding: 12px 18px;
+  border-top: 1px solid var(--line-1);
+}
+.setting-row:first-child { border-top: 0; }
+.setting-row-block { display: grid; gap: 12px; align-items: start; justify-content: stretch; }
+.setting-label { display: grid; gap: 2px; min-width: 0; }
+.setting-title { font-weight: 600; }
+.setting-description { color: var(--text-3); font-size: var(--fs-meta); line-height: 1.45; }
+
+.workspace-tab-empty { padding: 28px 22px; border-radius: var(--r-md); background: var(--surface-1); box-shadow: var(--lit); display: grid; gap: 4px; }
+.workspace-tab-empty p { font-weight: 600; }
+.workspace-tab-empty small { color: var(--text-3); }
+
+dialog {
+  max-width: min(560px, calc(100vw - 48px));
+  max-height: calc(100vh - 64px);
+  padding: 0;
+  border: 0;
+  border-radius: var(--r-lg);
+  background: var(--solid-2);
+  color: var(--text-1);
+  box-shadow: var(--lit), var(--shadow-float);
+  overflow: auto;
+}
+dialog[open] { animation: om-dialog-in var(--t-base) var(--ease) both; }
+dialog::backdrop { background: rgb(var(--shade-rgb) / 0.6); }
+@keyframes om-dialog-in {
+  from { opacity: 0; transform: translateY(6px) scale(0.99); }
+  to { opacity: 1; transform: none; }
+}
+.om-dialog-head { display: flex; align-items: center; gap: 10px; padding: 18px 18px 6px 20px; }
+.om-dialog-head h2 { flex: 1; font-size: 16px; font-weight: 650; }
+.om-dialog-body { display: grid; gap: 12px; padding: 8px 20px 18px; color: var(--text-2); }
+.om-dialog-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px 16px; border-top: 1px solid var(--line-1); }
diff --git a/src/styles/device.css b/src/styles/device.css
new file mode 100644
index 00000000..8f056473
--- /dev/null
+++ b/src/styles/device.css
@@ -0,0 +1,135 @@
+.om-device-page { gap: 18px; }
+
+.om-hero {
+  display: grid;
+  border-radius: var(--r-lg);
+  background:
+    radial-gradient(60% 120% at 0% 0%, rgb(var(--accent-rgb) / 0.07), transparent 60%),
+    var(--sheen), var(--surface-1);
+  box-shadow: var(--lit);
+}
+.om-hero-top {
+  display: grid;
+  grid-template-columns: 176px minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 24px;
+  padding: 16px 22px 16px 16px;
+}
+.om-hero-stage {
+  position: relative;
+  aspect-ratio: 1 / 1;
+  border-radius: var(--r-md);
+  background: var(--stage-light), var(--well);
+  box-shadow: var(--inset-shadow);
+}
+.om-hero-stage img {
+  position: absolute; inset: 8%;
+  width: 84%; height: 84%;
+  object-fit: contain;
+  filter: drop-shadow(0 14px 18px rgb(var(--shade-rgb) / 0.5));
+}
+.om-hero-main { display: grid; gap: 8px; min-width: 0; align-content: center; }
+.om-crumbs { display: flex; align-items: center; gap: 4px; color: var(--text-3); font-size: var(--fs-meta); }
+.om-crumbs button { padding: 2px 4px; margin-inline-start: -4px; border-radius: var(--r-xs); color: var(--text-3); font-weight: 500; }
+.om-crumbs button:hover { color: var(--text-1); background: var(--glint); }
+.om-crumbs svg { width: 13px; height: 13px; color: var(--text-4); }
+[dir="rtl"] .om-crumbs svg { transform: scaleX(-1); }
+.om-crumbs span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.om-hero-name { font-size: 28px; font-weight: 650; letter-spacing: -0.025em; line-height: 1.1; overflow-wrap: anywhere; }
+.om-hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--text-2); font-size: 12.5px; }
+.om-hero-meta .om-sep { color: var(--text-4); }
+.om-hero .om-stats { margin-top: 6px; gap: 8px 18px; }
+.om-hero .om-stat { font-size: 13px; }
+.om-hero-actions { display: flex; align-items: flex-start; gap: 6px; align-self: start; }
+
+.om-tabs {
+  display: flex; flex-wrap: wrap; gap: 2px;
+  padding: 6px 8px;
+  border-top: 1px solid var(--line-1);
+}
+.om-tab {
+  display: inline-flex; align-items: center; gap: 8px;
+  height: 34px; padding-inline: 12px;
+  border-radius: var(--r-sm);
+  color: var(--text-2);
+  font-weight: 600; font-size: 12.5px;
+  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
+}
+.om-tab svg { color: var(--text-3); }
+.om-tab:hover { background: var(--glint); color: var(--text-1); }
+.om-tab.is-active { background: var(--surface-3); color: var(--text-1); box-shadow: var(--lit); }
+.om-tab.is-active svg { color: var(--accent); }
+
+.om-device-body { display: grid; gap: 16px; min-width: 0; animation: om-fade var(--t-base) var(--ease) both; }
+.device-data { min-width: 0; }
+
+@keyframes om-fade { from { opacity: 0; } to { opacity: 1; } }
+
+.om-setup-figures {
+  display: grid;
+  grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
+  padding: 6px 18px 18px;
+}
+.om-setup-figure { display: grid; gap: 6px; align-content: start; padding-inline: 18px; border-inline-start: 1px solid var(--line-1); }
+.om-setup-figure:first-child { padding-inline-start: 0; border-inline-start: 0; }
+.om-setup-figure .om-fig { font-size: 30px; }
+.om-setup-stages {
+  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
+  padding: 14px 18px 16px;
+  border-top: 1px solid var(--line-1);
+}
+.om-setup-stage-list { display: flex; flex-wrap: wrap; gap: 6px; }
+
+.om-overview-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
+.om-overview-grid.is-single { grid-template-columns: 1fr; }
+.om-overview-grid > * { min-width: 0; }
+.om-overview-grid > .device-data { display: grid; }
+
+.om-battery { display: flex; flex-direction: column; }
+.om-battery .om-end { gap: 8px; align-items: baseline; }
+.om-battery-chart { display: grid; gap: 6px; padding: 4px 18px 16px; margin-top: auto; }
+.om-battery-chart svg { width: 100%; height: 120px; overflow: visible; }
+.om-chart-guide { stroke: var(--line-1); stroke-width: 1; vector-effect: non-scaling-stroke; }
+.om-chart-area { fill: rgb(var(--accent-rgb) / 0.14); }
+.om-chart-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
+.om-battery-axis { display: flex; justify-content: space-between; color: var(--text-3); font-size: var(--fs-small); font-variant-numeric: tabular-nums; }
+
+.performance-layout { display: grid; gap: 16px; grid-template-columns: 260px minmax(0, 1fr); align-items: start; }
+.performance-layout.has-no-sidebar { grid-template-columns: minmax(0, 1fr); }
+.performance-sidebar { position: sticky; top: 16px; }
+.performance-main { display: grid; gap: 16px; min-width: 0; }
+.performance-controls { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); align-items: start; }
+
+.showcase-sidebar {
+  display: grid; gap: 12px;
+  padding: 14px;
+  border-radius: var(--r-lg);
+  background: var(--sheen), var(--surface-1);
+  box-shadow: var(--lit);
+}
+.showcase-sidebar-visual {
+  position: relative;
+  display: grid; place-items: center;
+  aspect-ratio: 1 / 1;
+  border-radius: var(--r-md);
+  background: var(--stage-light), var(--well);
+  box-shadow: var(--inset-shadow);
+}
+.showcase-sidebar-image { position: absolute; inset: 8%; width: 84%; height: 84%; object-fit: contain; filter: drop-shadow(0 14px 18px rgb(var(--shade-rgb) / 0.5)); }
+.showcase-sidebar-info { display: grid; gap: 2px; }
+.showcase-sidebar-name { font-size: 17px; font-weight: 650; letter-spacing: -0.015em; }
+.showcase-sidebar-brand { color: var(--text-3); font-size: var(--fs-meta); }
+.showcase-sidebar-status { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--text-2); font-size: var(--fs-meta); }
+.showcase-sidebar-status .battery-icon { width: 18px; height: 9px; margin-inline-end: 3px; }
+.device-showcase-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
+.device-showcase-status-detail { display: inline-flex; align-items: center; gap: 4px; color: var(--text-3); }
+
+@media (max-width: 1180px) {
+  .om-hero-top { grid-template-columns: 132px minmax(0, 1fr); }
+  .om-hero-actions { grid-column: 2; }
+  .om-setup-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 16px; }
+  .om-setup-figure:nth-child(odd) { padding-inline-start: 0; border-inline-start: 0; }
+  .om-overview-grid { grid-template-columns: 1fr; }
+  .performance-layout { grid-template-columns: minmax(0, 1fr); }
+  .performance-sidebar { position: static; }
+}
diff --git a/src/styles/home.css b/src/styles/home.css
new file mode 100644
index 00000000..25a5d92d
--- /dev/null
+++ b/src/styles/home.css
@@ -0,0 +1,154 @@
+.page:has(> .om-home) { display: grid; min-height: 100%; }
+.om-home { max-width: 1720px; gap: 22px; grid-template-rows: auto 1fr; padding-bottom: 48px; }
+.om-home > .om-shelf { align-content: center; }
+
+.om-shelf { position: relative; display: grid; gap: 14px; min-width: 0; }
+.om-shelf-head { position: absolute; inset-inline-end: 0; top: -54px; }
+.om-shelf-nav { display: flex; gap: 6px; }
+.om-shelf-track {
+  list-style: none;
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: minmax(280px, 330px);
+  justify-content: safe center;
+  gap: 16px;
+  overflow-x: auto;
+  overscroll-behavior-x: contain;
+  scroll-snap-type: x mandatory;
+  scroll-padding-inline: 2px;
+  padding: 2px 2px 6px;
+  scrollbar-width: none;
+}
+.om-shelf-track::-webkit-scrollbar { display: none; }
+.om-shelf-track.is-dragging { scroll-snap-type: none; cursor: grabbing; user-select: none; }
+.om-shelf-track.is-dragging * { pointer-events: none; }
+.om-shelf-item { scroll-snap-align: start; display: flex; min-width: 0; }
+
+.om-shelf-dots { display: flex; justify-content: center; gap: 2px; }
+.om-shelf-dots button {
+  display: grid; place-items: center;
+  width: 22px; height: 22px;
+  border-radius: 50%;
+}
+.om-shelf-dots button::before {
+  content: "";
+  width: 6px; height: 6px;
+  border-radius: 3px;
+  background: var(--line-3);
+  transition: width var(--t-base) var(--ease), background var(--t-base) var(--ease);
+}
+.om-shelf-dots button.is-active::before { width: 16px; background: var(--text-2); }
+.om-shelf-dots button:hover::before { background: var(--text-3); }
+
+.om-device-block {
+  position: relative;
+  display: flex; flex-direction: column; gap: 8px;
+  width: 100%;
+  min-height: clamp(440px, 58vh, 560px);
+  padding: 16px 16px 14px;
+  border-radius: var(--r-lg);
+  background:
+    radial-gradient(70% 46% at 50% 62%, rgb(var(--tint-rgb) / 0.05), transparent 72%),
+    var(--sheen), var(--surface-1);
+  box-shadow: var(--lit);
+  text-align: start;
+  isolation: isolate;
+  transition: background var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
+}
+.om-device-block:has(> .om-device-block-hit:hover) { background: radial-gradient(70% 46% at 50% 62%, rgb(var(--tint-rgb) / 0.07), transparent 72%), var(--sheen), var(--surface-2); }
+.om-device-block.is-live {
+  background:
+    radial-gradient(70% 48% at 50% 62%, rgb(var(--accent-rgb) / 0.16), transparent 72%),
+    var(--sheen), var(--surface-1);
+  box-shadow: var(--lit), inset 0 0 0 1px rgb(var(--accent-rgb) / 0.24);
+}
+.om-device-block-hit {
+  position: absolute; inset: 0; z-index: 0;
+  border-radius: inherit;
+  background: transparent;
+  cursor: pointer;
+}
+.om-device-block-hit:focus-visible { outline: 2px solid var(--accent-line); outline-offset: 2px; }
+.om-device-block > :not(.om-device-block-hit) { position: relative; z-index: 1; pointer-events: none; }
+.om-device-block > :is(.om-device-block-top, button.om-device-block-action) { pointer-events: auto; }
+.om-device-block-top > :not(.om-device-menu) { pointer-events: none; }
+
+.om-device-block-top { display: flex; align-items: center; gap: 8px; min-height: 28px; }
+.om-device-block > .om-device-block-top { z-index: 3; }
+.om-device-block-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; font-weight: 650; letter-spacing: -0.015em; }
+.om-device-block-meta { color: var(--text-3); font-size: var(--fs-meta); }
+.om-device-block .om-stats { min-height: 20px; }
+
+.om-device-block-art {
+  position: relative;
+  flex: 1;
+  min-height: 210px;
+  margin-inline: -4px;
+}
+.om-device-block-art::after {
+  content: "";
+  position: absolute; inset-inline: 22%; bottom: 8%;
+  height: 14px;
+  border-radius: 50%;
+  background: radial-gradient(closest-side, rgb(var(--shade-rgb) / 0.55), transparent);
+  filter: blur(4px);
+  z-index: -1;
+}
+.om-device-render {
+  position: absolute; inset: 4% 12% 12%;
+  width: 76%; height: 84%;
+  object-fit: contain;
+  filter: drop-shadow(0 16px 20px rgb(var(--shade-rgb) / 0.45));
+  transition: transform var(--t-slow) var(--ease);
+}
+.om-device-render.is-portrait { inset: 2% 22% 10%; width: 56%; height: 88%; }
+.om-device-block:has(> .om-device-block-hit:hover) .om-device-render { transform: translateY(-4px) scale(1.02); }
+.om-device-block-action { align-self: stretch; justify-content: center; }
+
+.om-device-menu { position: relative; flex: none; }
+.om-device-menu-trigger { width: 28px; height: 28px; color: var(--text-3); opacity: 0.7; }
+.om-device-block:hover .om-device-menu-trigger, .om-device-menu-trigger[aria-expanded="true"], .om-device-menu-trigger:focus-visible { opacity: 1; }
+.om-device-menu-pop {
+  position: absolute; z-index: 20; top: calc(100% + 6px); inset-inline-end: -4px;
+  display: grid; gap: 2px;
+  min-width: 190px; padding: 5px;
+  border: 1px solid var(--line-2);
+  border-radius: var(--r-md);
+  background: var(--solid-1);
+  box-shadow: var(--shadow-float);
+}
+.om-device-menu-item {
+  display: flex; align-items: center; gap: 9px;
+  height: 32px; padding-inline: 10px;
+  border-radius: var(--r-sm);
+  color: var(--text-1);
+  font-size: 13px; font-weight: 550; text-align: start;
+}
+.om-device-menu-item svg { width: 15px; height: 15px; color: var(--text-3); }
+.om-device-menu-item:hover, .om-device-menu-item:focus-visible { background: var(--surface-3); }
+.om-device-menu-item.is-danger, .om-device-menu-item.is-danger svg { color: var(--bad); }
+.om-device-menu-pop.is-confirm { width: 280px; gap: 8px; padding: 14px; }
+.om-device-menu-pop.is-confirm strong { font-size: 14px; font-weight: 650; }
+.om-device-menu-pop.is-confirm p { color: var(--text-2); font-size: var(--fs-meta); line-height: 1.5; }
+.om-device-menu-actions { display: flex; justify-content: flex-end; gap: 6px; margin-top: 4px; }
+.om-btn.is-danger-solid { background: var(--bad); box-shadow: none; color: var(--on-accent); }
+.om-btn.is-danger-solid:hover:not(:disabled) { filter: brightness(1.08); background: var(--bad); }
+
+.om-device-block.is-add { background: var(--sheen), var(--surface-1); box-shadow: var(--lit), inset 0 0 0 1px var(--line-1); }
+.om-device-block.is-add > * { pointer-events: auto; }
+.om-device-block.is-add .om-device-block-name { color: var(--text-1); }
+.om-showcase { position: absolute; inset: 0; }
+.om-showcase img {
+  position: absolute; inset: 14%;
+  width: 72%; height: 72%;
+  object-fit: contain;
+  opacity: 0;
+  filter: grayscale(0.25) drop-shadow(0 14px 18px rgb(var(--shade-rgb) / 0.45));
+  transition: opacity 900ms var(--ease);
+}
+.om-showcase img.is-active { opacity: 0.85; }
+.om-home.is-empty .om-shelf-track { grid-auto-columns: minmax(300px, 420px); }
+.om-home.is-empty .om-device-block { min-height: clamp(440px, 64vh, 620px); padding: 22px 22px 18px; gap: 10px; }
+.om-home.is-empty .om-device-block-name { font-size: 22px; letter-spacing: -0.02em; }
+.om-home.is-empty .om-device-block-meta { font-size: 14px; line-height: 1.5; }
+.om-home.is-empty .om-device-block-action { height: 42px; font-size: 14px; }
diff --git a/src/styles/index.css b/src/styles/index.css
new file mode 100644
index 00000000..1092564b
--- /dev/null
+++ b/src/styles/index.css
@@ -0,0 +1,15 @@
+@import "./tokens.css";
+@import "./base.css";
+@import "./controls.css";
+@import "./shell.css";
+@import "./home.css";
+@import "./device.css";
+@import "./settings.css";
+
+@import "./areas/performance.css";
+@import "./areas/buttons.css";
+@import "./areas/library.css";
+@import "./areas/advanced.css";
+@import "./areas/pages.css";
+
+@import "./instrument.css";
diff --git a/src/styles/instrument.css b/src/styles/instrument.css
new file mode 100644
index 00000000..435d4304
--- /dev/null
+++ b/src/styles/instrument.css
@@ -0,0 +1,172 @@
+.card-flow {
+  display: block;
+  columns: 2 400px;
+  column-gap: 16px;
+}
+.card-flow > * {
+  display: block;
+  break-inside: avoid;
+  width: 100%;
+  min-width: 0;
+  margin: 0 0 16px;
+}
+.card-flow > :last-child { margin-bottom: 0; }
+.card-flow > :is(.is-wide, details, .egg-collapsible, .egg-experimental, :only-child) { column-span: all; }
+.card-flow > :is(.is-wide, details, .egg-collapsible, .egg-experimental):not(:last-child) { margin-bottom: 16px; }
+.card-flow > :is(.is-wide, details, .egg-collapsible, .egg-experimental):not(:first-child) { margin-top: 16px; }
+.card-flow > :is(.is-wide, details, .egg-collapsible, .egg-experimental) + :is(.is-wide, details, .egg-collapsible, .egg-experimental) { margin-top: 0; }
+#pulsar-advanced.card-flow {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
+  gap: 16px;
+  align-items: stretch;
+}
+#pulsar-advanced.card-flow > * { margin: 0; }
+#pulsar-advanced.card-flow > :is(.is-wide, details, .egg-collapsible, .egg-experimental) { grid-column: 1 / -1; align-self: start; }
+#pulsar-advanced.card-flow > .card-slot > .setting-card { height: 100%; }
+
+.card-flow:not(:has(> .card-slot:not(.is-wide) ~ .card-slot:not(.is-wide))) > .card-slot:not(.is-wide) { column-span: all; }
+#pulsar-advanced.card-flow:not(:has(> .card-slot:not(.is-wide) ~ .card-slot:not(.is-wide))) > .card-slot:not(.is-wide) { grid-column: 1 / -1; }
+
+.card-slot:empty, .card-slot:has(> [hidden]:first-child) { display: none; }
+.card-slot { position: relative; }
+.card-slot > .setting-card { height: auto; }
+
+.card-glyph {
+  position: absolute;
+  inset-block-start: 15px;
+  inset-inline-start: 16px;
+  display: grid; place-items: center;
+  width: 30px; height: 30px;
+  border-radius: 8px;
+  background: linear-gradient(180deg, rgb(var(--accent-rgb) / 0.2), rgb(var(--accent-rgb) / 0.08));
+  box-shadow: inset 0 0 0 1px rgb(var(--accent-rgb) / 0.22), 0 4px 14px -6px rgb(var(--accent-rgb) / 0.55);
+  color: var(--accent);
+  pointer-events: none;
+}
+.card-glyph svg { width: 16px; height: 16px; }
+.card-slot:has(> .setting-card > .setting-heading) > .setting-card > .setting-heading,
+.card-slot > .dpi-card > .dpi-card-main > .setting-heading:first-child { padding-inline-start: 40px; min-height: 30px; }
+.card-slot:not(:has(> .setting-card > .setting-heading, > .dpi-card > .dpi-card-main > .setting-heading:first-child)) > .card-glyph { display: none; }
+
+.setting-card:has(> .switch-row ~ .switch-row) {
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-content: flex-start;
+}
+.setting-card:has(> .switch-row ~ .switch-row) > :not(.switch-row) { flex: 1 1 100%; min-width: 0; }
+.setting-card:has(> .switch-row ~ .switch-row) > .switch-row { flex: 1 1 128px; min-width: 0; }
+.setting-card:has(> .switch-row ~ .switch-row) > .setting-heading { margin-bottom: 4px; }
+
+.setting-card:has(> .switch-row ~ .switch-row) > .switch-row {
+  position: relative;
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-template-rows: auto 1fr;
+  grid-template-areas: "icon switch" "label label";
+  align-items: start;
+  gap: 14px 8px;
+  min-height: 96px;
+  padding: 12px;
+  border-radius: var(--r-md);
+  background: var(--surface-1);
+  box-shadow: inset 0 0 0 1px var(--line-1);
+  cursor: pointer;
+  transition: background var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
+}
+.setting-card:has(> .switch-row ~ .switch-row) > .switch-row:hover:not([data-inert]) {
+  background: var(--surface-2);
+  box-shadow: inset 0 0 0 1px var(--line-2);
+}
+.setting-card:has(> .switch-row ~ .switch-row) > .switch-row > .switch-row-icon { grid-area: icon; }
+.setting-card:has(> .switch-row ~ .switch-row) > .switch-row > .switch-button { grid-area: switch; justify-self: end; }
+.setting-card:has(> .switch-row ~ .switch-row) > .switch-row > .switch-row-label {
+  grid-area: label;
+  align-self: end;
+  color: var(--text-2);
+  font-size: 13px; font-weight: 600; line-height: 1.3;
+  transition: color var(--t-base) var(--ease);
+}
+.setting-card:has(> .switch-row ~ .switch-row) > .switch-row:not(.has-icon) {
+  grid-template-areas: "switch switch" "label label";
+}
+
+.setting-card:has(> .switch-row ~ .switch-row) > .switch-row[data-state="on"] {
+  background: radial-gradient(120% 90% at 0% 0%, rgb(var(--accent-rgb) / 0.16), transparent 70%), var(--surface-2);
+  box-shadow: inset 0 0 0 1px rgb(var(--accent-rgb) / 0.35), 0 8px 22px -14px rgb(var(--accent-rgb) / 0.7);
+}
+[dir="rtl"] .setting-card:has(> .switch-row ~ .switch-row) > .switch-row[data-state="on"] {
+  background: radial-gradient(120% 90% at 100% 0%, rgb(var(--accent-rgb) / 0.16), transparent 70%), var(--surface-2);
+}
+.setting-card:has(> .switch-row ~ .switch-row) > .switch-row[data-state="on"] > .switch-row-label { color: var(--text-1); }
+.setting-card:has(> .switch-row ~ .switch-row) > .switch-row[data-inert] { cursor: default; }
+.setting-card:has(> .switch-row ~ .switch-row) > .switch-row[data-state="na"] { opacity: 0.55; }
+
+.switch-row-icon {
+  display: grid; place-items: center;
+  flex: none;
+  width: 28px; height: 28px;
+  border-radius: 8px;
+  background: var(--surface-3);
+  color: var(--text-3);
+  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
+}
+.switch-row-icon svg { width: 15px; height: 15px; }
+.switch-row[data-state="on"] > .switch-row-icon {
+  background: rgb(var(--accent-rgb) / 0.18);
+  box-shadow: inset 0 0 0 1px rgb(var(--accent-rgb) / 0.3);
+  color: var(--accent);
+}
+.switch-row.has-icon { justify-content: flex-start; }
+.switch-row.has-icon > .switch-row-label { flex: 1; min-width: 0; }
+.switch-row.has-icon { cursor: pointer; }
+.switch-row.has-icon[data-inert] { cursor: default; }
+
+.rate-slider-buttons > button { --lvl: 1; }
+.rate-slider-buttons > button:nth-child(2) { --lvl: 2; }
+.rate-slider-buttons > button:nth-child(3) { --lvl: 3; }
+.rate-slider-buttons > button:nth-child(4) { --lvl: 4; }
+.rate-slider-buttons > button:nth-child(5) { --lvl: 5; }
+.rate-slider-buttons > button:nth-child(6) { --lvl: 6; }
+.rate-slider-buttons > button:nth-child(7) { --lvl: 7; }
+.rate-slider-buttons > button:nth-child(8) { --lvl: 8; }
+
+#polling-card .rate-slider-buttons > button,
+#keyboard-polling-card .rate-slider-buttons > button {
+  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 7px;
+  height: 74px;
+  padding-block: 8px 9px;
+}
+#polling-card .rate-slider-buttons > button::before,
+#keyboard-polling-card .rate-slider-buttons > button::before {
+  content: "";
+  display: block;
+  width: min(60%, 34px);
+  height: calc(6px + var(--lvl) * 4px);
+  border-radius: 3px;
+  background: var(--surface-4);
+  transition: background var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
+}
+#polling-card .rate-slider-buttons > button:has(~ button.is-on)::before,
+#keyboard-polling-card .rate-slider-buttons > button:has(~ button.is-on)::before { background: rgb(var(--accent-rgb) / 0.42); }
+#polling-card .rate-slider-buttons > button.is-on::before,
+#keyboard-polling-card .rate-slider-buttons > button.is-on::before {
+  background: var(--accent);
+  box-shadow: 0 0 14px rgb(var(--accent-rgb) / 0.55);
+}
+#polling-card .rate-slider-buttons > button.is-on::after,
+#keyboard-polling-card .rate-slider-buttons > button.is-on::after { display: none; }
+#polling-card .rate-slider-buttons > button.is-on,
+#keyboard-polling-card .rate-slider-buttons > button.is-on { color: var(--accent); }
+
+.performance-figure {
+  font-family: var(--font-mono);
+  letter-spacing: -0.02em;
+}
+.performance-figure .performance-unit { color: var(--accent); }
+
+.reduce-interface-motion :is(.switch-row, .switch-row-icon, .rate-slider-buttons > button::before) { transition: none; }
+@media (max-width: 720px) {
+  .card-flow { columns: 1; }
+}
diff --git a/src/styles/settings.css b/src/styles/settings.css
new file mode 100644
index 00000000..5af9b56a
--- /dev/null
+++ b/src/styles/settings.css
@@ -0,0 +1,69 @@
+.om-settings { max-width: 880px; }
+.om-settings-group .om-panel-head { padding-bottom: 4px; }
+.om-settings-rows { display: grid; }
+.om-settings-group .setting-row { padding-inline: 18px; }
+.setting-control { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex: none; min-width: 0; }
+.setting-row-block .setting-control { display: block; width: 100%; min-width: 0; }
+
+.om-theme-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
+  gap: 10px;
+  width: 100%;
+  min-width: 0;
+  margin: 0; padding: 0; border: 0;
+}
+.om-theme-tile {
+  display: grid; gap: 8px;
+  padding: 6px 6px 9px;
+  border-radius: var(--r-md);
+  background: var(--ink-1);
+  color: var(--text-1);
+  box-shadow: inset 0 0 0 1px rgb(var(--tint-rgb) / 0.1);
+  text-align: start;
+  transition: box-shadow var(--t-fast) var(--ease);
+}
+.om-theme-tile:hover { box-shadow: inset 0 0 0 1px rgb(var(--tint-rgb) / 0.25); }
+.om-theme-tile.is-active { box-shadow: inset 0 0 0 2px var(--accent); }
+.om-theme-preview {
+  display: grid; grid-template-columns: 22% 1fr;
+  height: 64px;
+  overflow: hidden;
+  border-radius: var(--r-sm);
+  background: var(--ground);
+}
+.om-theme-preview-side { background: var(--ink-0); border-inline-end: 1px solid var(--line-1); }
+.om-theme-preview-main { display: grid; align-content: start; gap: 5px; padding: 8px; }
+.om-theme-preview-line { height: 4px; width: 70%; border-radius: 2px; background: var(--text-3); }
+.om-theme-preview-line.is-title { width: 45%; height: 5px; background: var(--text-1); }
+.om-theme-preview-line.is-short { width: 50%; background: var(--text-3); }
+.om-theme-preview-sheet { display: flex; align-items: center; gap: 6px; margin-top: 3px; padding: 6px; border-radius: 4px; background: var(--surface-2); box-shadow: var(--lit); }
+.om-theme-preview-accent { width: 18px; height: 7px; border-radius: 2px; background: var(--accent); flex: none; }
+.om-theme-name { padding-inline: 3px; font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+.om-language-picker { display: inline-flex; align-items: center; gap: 10px; color: var(--text-3); }
+.om-language-picker svg { width: 16px; height: 16px; }
+.om-language-picker .option-menu { min-width: 200px; }
+
+.profile-key-fields { display: grid; gap: 12px; width: 100%; }
+.profile-key-field { display: grid; gap: 6px; }
+.profile-key-field textarea { width: 100%; font-family: var(--font-mono); font-size: 12px; }
+.profile-key-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
+
+.preview-launcher-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; width: 100%; }
+.preview-launcher-link {
+  display: grid; gap: 2px;
+  padding: 8px 10px;
+  border-radius: var(--r-sm);
+  background: var(--surface-1);
+  box-shadow: var(--row);
+  font-weight: 550;
+}
+.preview-launcher-link small { color: var(--text-3); font-family: var(--font-mono); font-size: 11px; font-weight: 400; }
+.preview-launcher-link:hover { background: var(--surface-2); }
+.preview-launcher-link.is-active { box-shadow: var(--row), inset 0 0 0 1px var(--accent-line); }
+
+.om-about-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; }
+.om-about-links .om-icon-btn svg { width: 16px; height: 16px; }
+
+.setting-row-block > .setting-label:only-child { display: none; }
diff --git a/src/styles/shell.css b/src/styles/shell.css
new file mode 100644
index 00000000..f6c43566
--- /dev/null
+++ b/src/styles/shell.css
@@ -0,0 +1,288 @@
+.om-shell {
+  display: grid;
+  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
+  height: 100vh;
+  height: 100dvh;
+  background: var(--ground);
+  color: var(--text-1);
+  font-family: var(--font-sans);
+  font-size: var(--fs-body);
+  transition: grid-template-columns var(--t-slow) var(--ease);
+}
+.om-shell.sidebar-collapsed { grid-template-columns: var(--sidebar-w-collapsed) minmax(0, 1fr); }
+
+html, body { background: var(--ink-1); }
+
+.om-sidebar {
+  display: flex; flex-direction: column; gap: 18px;
+  min-width: 0; height: 100%;
+  padding: 14px 10px 12px;
+  overflow-x: hidden; overflow-y: auto;
+  background: var(--ink-0);
+  border-inline-end: 1px solid var(--line-1);
+}
+.om-sidebar-head { display: flex; align-items: center; gap: 6px; min-height: 40px; padding-inline: 6px 0; }
+.om-brand { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; padding: 4px 2px; border-radius: var(--r-sm); }
+.om-brand-mark { width: 14px; height: 21px; object-fit: contain; flex: none; filter: var(--mark-filter); }
+.om-brand-text { display: grid; min-width: 0; line-height: 1.2; }
+.om-brand-name { font-size: 15px; font-weight: 650; letter-spacing: -0.015em; }
+.om-brand-build { color: var(--text-3); font-size: var(--fs-small); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.om-sidebar-toggle { flex: none; color: var(--text-3); }
+
+.om-nav { display: grid; gap: 2px; }
+.om-nav-item {
+  display: flex; align-items: center; gap: 11px;
+  width: 100%; height: 36px; padding-inline: 10px;
+  border-radius: var(--r-sm);
+  color: var(--text-2);
+  font-size: 13px; font-weight: 550;
+  text-align: start;
+  white-space: nowrap;
+  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
+}
+.om-nav-item:hover { background: var(--glint); color: var(--text-1); }
+.om-nav-item.is-active { background: var(--surface-2); color: var(--text-1); box-shadow: var(--lit); }
+.om-nav-icon { width: 17px; height: 17px; color: var(--text-3); transition: color var(--t-fast) var(--ease); }
+.om-nav-item:hover .om-nav-icon { color: var(--text-2); }
+.om-nav-item.is-active .om-nav-icon { color: var(--accent); }
+.om-nav-label { overflow: hidden; text-overflow: ellipsis; }
+.om-nav-ext { margin-inline-start: auto; color: var(--text-4); font-size: 11px; }
+
+.om-side-devices { display: grid; gap: 6px; min-height: 0; }
+.om-side-heading { padding-inline: 10px; color: var(--text-3); font-size: var(--fs-small); font-weight: 600; letter-spacing: 0; white-space: nowrap; }
+.om-side-devices ul { list-style: none; display: grid; gap: 2px; }
+.om-side-device {
+  display: flex; align-items: center; gap: 10px;
+  width: 100%; min-height: 46px; padding: 5px 8px 5px 6px;
+  border-radius: var(--r-sm);
+  text-align: start;
+  transition: background var(--t-fast) var(--ease);
+}
+.om-side-device:hover { background: var(--glint); }
+.om-side-device.is-active { background: var(--surface-2); box-shadow: var(--lit); }
+.om-side-device-art {
+  position: relative;
+  display: grid; place-items: center;
+  width: 36px; height: 36px; flex: none;
+  border-radius: var(--r-sm);
+  background: var(--stage-light), var(--surface-3);
+}
+.om-side-device-art img { width: 30px; height: 30px; object-fit: contain; }
+.om-side-device-live {
+  position: absolute; inset-inline-end: -2px; bottom: -2px;
+  width: 9px; height: 9px; border-radius: 50%;
+  background: var(--ok);
+  box-shadow: 0 0 0 2px var(--ink-0);
+}
+.om-side-device-text { display: grid; min-width: 0; gap: 1px; }
+.om-side-device-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: 12.5px; }
+.om-side-device-sub { display: flex; align-items: center; gap: 6px; color: var(--text-3); font-size: var(--fs-small); font-variant-numeric: tabular-nums; white-space: nowrap; }
+.om-side-device-sub .battery-icon { width: 18px; height: 9px; }
+
+.om-sidebar-foot { display: grid; gap: 10px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line-1); }
+.om-bridge { position: relative; }
+.om-bridge-line {
+  display: flex; align-items: center; gap: 9px; width: 100%; height: 30px; padding-inline: 12px;
+  border: 0; border-radius: var(--r-sm); background: transparent;
+  color: var(--text-3); font: inherit; font-size: var(--fs-small); white-space: nowrap; text-align: start; cursor: pointer;
+}
+.om-bridge-line:hover, .om-bridge-line.is-open { background: var(--glint); color: var(--text-1); }
+.om-bridge-line:focus-visible { outline: 2px solid var(--accent-line); outline-offset: 1px; }
+.om-bridge-line.is-on { color: var(--text-2); }
+.om-bridge-line-text { flex: 1; overflow: hidden; text-overflow: ellipsis; }
+.om-bridge-line-flag {
+  flex: none; padding: 1px 7px; border-radius: 99px;
+  background: var(--accent-soft); color: var(--accent); font-size: 11px; font-weight: 600;
+}
+.om-bridge-pop {
+  position: fixed; z-index: 60; width: 300px; display: grid; gap: 12px; padding: 14px 16px 16px;
+  border: 1px solid var(--line-2); border-radius: var(--r-lg);
+  background: var(--solid-1); box-shadow: var(--shadow-float);
+  animation: om-pop-in 140ms ease-out;
+}
+.om-bridge-pop-head { display: flex; align-items: center; gap: 9px; }
+.om-bridge-pop-head h2 { flex: 1; font-size: 14px; font-weight: 650; }
+.om-bridge-pop-head .om-icon-btn { margin-inline-end: -6px; }
+.om-bridge-pop-body { color: var(--text-2); font-size: var(--fs-meta); line-height: 1.55; }
+.om-bridge-pop-facts { padding: 0; font-size: var(--fs-meta); }
+.om-bridge-pop-facts bdi { unicode-bidi: isolate; direction: ltr; }
+.om-bridge-pop-foot { display: flex; }
+.om-bridge-pop-foot .om-btn { width: 100%; justify-content: center; }
+@keyframes om-pop-in { from { opacity: 0; transform: translateY(4px); } }
+.reduce-interface-motion .om-bridge-pop { animation: none; }
+@media (prefers-reduced-motion: reduce) { .om-bridge-pop { animation: none; } }
+
+.om-sidebar.is-collapsed { padding-inline: 10px; align-items: stretch; }
+.om-sidebar.is-collapsed .om-sidebar-head { flex-direction: column; padding: 0; gap: 8px; }
+.om-sidebar.is-collapsed .om-brand { justify-content: center; flex: none; }
+.om-sidebar.is-collapsed .om-brand-text,
+.om-sidebar.is-collapsed .om-nav-label,
+.om-sidebar.is-collapsed .om-nav-ext,
+.om-sidebar.is-collapsed .om-side-heading,
+.om-sidebar.is-collapsed .om-side-device-text,
+.om-sidebar.is-collapsed .om-bridge-line-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+.om-sidebar.is-collapsed .om-nav-item { justify-content: center; padding: 0; }
+.om-sidebar.is-collapsed .om-side-device { justify-content: center; padding: 4px; }
+.om-sidebar.is-collapsed .om-bridge-line { justify-content: center; padding: 0; }
+.om-sidebar.is-collapsed .om-bridge-line-flag { display: none; }
+
+.om-main {
+  position: relative;
+  display: flex; flex-direction: column;
+  min-width: 0; height: 100%;
+  overflow: hidden;
+}
+.om-content { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; scroll-behavior: smooth; }
+.om-page { width: 100%; max-width: var(--content-w); margin-inline: auto; padding: 28px 36px 120px; display: grid; gap: 18px; align-content: start; }
+
+.om-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding-bottom: 2px; }
+.om-page-head h1 { font-size: var(--fs-title); font-weight: 650; letter-spacing: -0.02em; }
+.om-page-head .om-meta { margin-top: 4px; }
+
+.news-banner {
+  display: flex; align-items: center; gap: 10px;
+  min-height: 38px; padding: 7px 14px 7px 18px;
+  border-bottom: 1px solid var(--line-1);
+  background: var(--ink-0);
+  color: var(--text-2);
+  font-size: var(--fs-meta);
+}
+.news-banner-icon { color: var(--accent); }
+.news-banner-warning .news-banner-icon { color: var(--warn); }
+.news-banner-critical .news-banner-icon { color: var(--bad); }
+.news-banner-link { flex: 1; min-width: 0; }
+a.news-banner-link { color: var(--text-1); text-decoration: underline; text-decoration-color: var(--line-3); text-underline-offset: 3px; }
+a.news-banner-link:hover { text-decoration-color: var(--text-2); }
+.news-banner-dismiss { display: grid; place-items: center; width: 26px; height: 26px; border-radius: var(--r-sm); color: var(--text-3); font-size: 18px; line-height: 1; }
+.news-banner-dismiss:hover { background: var(--glint); color: var(--text-1); }
+
+.apply-bar {
+  position: absolute; z-index: 30;
+  inset-inline: 0; bottom: 20px;
+  width: min(680px, calc(100% - 48px));
+  margin-inline: auto;
+  display: flex; align-items: center; gap: 14px;
+  padding: 10px 10px 10px 16px;
+  border-radius: var(--r-md);
+  background: var(--solid-2);
+  box-shadow: var(--lit), var(--shadow-float);
+  animation: om-rise var(--t-slow) var(--ease) both;
+}
+.apply-bar-label { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; font-weight: 600; }
+.apply-bar-label svg { width: 17px; height: 17px; color: var(--accent); }
+.apply-bar-summary { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-3); font-size: var(--fs-meta); font-style: normal; font-weight: 500; }
+.apply-bar-actions { display: flex; gap: 6px; flex: none; }
+.apply-bar-revert, .apply-bar-apply {
+  height: 32px; padding-inline: 14px;
+  border-radius: var(--r-sm);
+  font-size: 12.5px; font-weight: 600;
+}
+.apply-bar-revert { color: var(--text-2); }
+.apply-bar-revert:hover:not(:disabled) { background: var(--glint); color: var(--text-1); }
+.apply-bar-apply { background: var(--accent); color: var(--on-accent); box-shadow: var(--primary-shadow); }
+.apply-bar-apply:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 88%, white); }
+.apply-bar.is-applying .apply-bar-apply { opacity: 0.7; }
+.has-pending-changes .om-page { padding-bottom: 140px; }
+
+@keyframes om-rise {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: none; }
+}
+
+.toast-stack {
+  position: fixed; z-index: 60;
+  inset-inline-end: 20px; bottom: 20px;
+  display: grid; gap: 8px;
+  width: min(380px, calc(100vw - 40px));
+}
+.toast {
+  display: grid; grid-template-columns: 18px 1fr 26px; align-items: start; gap: 12px;
+  padding: 12px 10px 12px 14px;
+  border-radius: var(--r-md);
+  background: var(--solid-2);
+  box-shadow: var(--lit), var(--shadow-float);
+  animation: om-rise var(--t-base) var(--ease) both;
+}
+.toast.is-leaving { opacity: 0; transform: translateY(6px); transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease); }
+.toast-icon { width: 18px; height: 18px; margin-top: 1px; color: var(--text-2); }
+.toast-success .toast-icon { color: var(--ok); }
+.toast-error .toast-icon { color: var(--bad); }
+.toast-warning .toast-icon { color: var(--warn); }
+.toast-info .toast-icon { color: var(--info); }
+.toast-copy { display: grid; gap: 3px; min-width: 0; }
+.toast-copy strong { font-weight: 600; }
+.toast-copy span { color: var(--text-2); font-size: var(--fs-meta); overflow-wrap: anywhere; }
+.toast-action { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; color: var(--accent); font-size: var(--fs-meta); font-weight: 600; }
+.toast-action svg { width: 13px; height: 13px; }
+.toast-dismiss { display: grid; place-items: center; width: 26px; height: 26px; border-radius: var(--r-sm); color: var(--text-3); }
+.toast-dismiss:hover { background: var(--glint); color: var(--text-1); }
+.toast-dismiss svg { width: 14px; height: 14px; }
+.toast-prominent { box-shadow: var(--lit), inset 0 0 0 1px var(--accent-line), var(--shadow-float); }
+
+.om-help-launcher {
+  position: fixed; inset-inline-end: 20px; bottom: 22px; z-index: 60;
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 44px; height: 44px;
+  border-radius: 50%;
+  background: var(--solid-1);
+  color: var(--text-1);
+  box-shadow: var(--lit), inset 0 0 0 1px var(--line-2), var(--shadow-float);
+  transition: transform var(--t-base) var(--ease), background var(--t-base) var(--ease);
+}
+.om-help-launcher:hover { transform: translateY(-2px); background: var(--surface-3); }
+.om-help-launcher.is-open { background: var(--surface-3); transform: none; }
+.om-help-launcher:focus-visible { outline: 2px solid var(--accent-line); outline-offset: 3px; }
+.om-help-launcher svg { width: 20px; height: 20px; }
+
+.om-help {
+  position: fixed; inset-inline-end: 20px; bottom: 78px; z-index: 60;
+  display: flex; flex-direction: column;
+  width: min(380px, calc(100vw - 40px));
+  max-height: calc(100vh - 120px);
+  border: 1px solid var(--line-2);
+  border-radius: var(--r-lg);
+  background: var(--solid-1);
+  box-shadow: var(--shadow-float);
+  overflow: hidden;
+  animation: om-rise var(--t-base) var(--ease);
+}
+.reduce-interface-motion .om-help { animation: none; }
+.om-help-head { display: grid; gap: 2px; padding: 14px 16px 10px; }
+.om-help-head strong { font-size: 15px; font-weight: 650; letter-spacing: -0.01em; }
+.om-help-head span { color: var(--text-3); font-size: var(--fs-meta); }
+
+.om-help-list { list-style: none; flex: 1; min-height: 0; overflow-y: auto; padding: 0 8px 8px; }
+.om-help-list li { border-radius: var(--r-md); }
+.om-help-list li + li { margin-top: 2px; }
+.om-help-list li.is-open { background: var(--surface-2); }
+.om-help-list button {
+  display: flex; align-items: center; justify-content: space-between; gap: 10px;
+  width: 100%; min-height: 40px; padding: 9px 10px;
+  border-radius: var(--r-md);
+  color: var(--text-1);
+  font-size: 13px; font-weight: 550; line-height: 1.35; text-align: start;
+}
+.om-help-list button:hover { background: var(--surface-2); }
+.om-help-list button:focus-visible { outline: 2px solid var(--accent-line); outline-offset: -2px; }
+.om-help-list button svg { flex: none; width: 15px; height: 15px; color: var(--text-3); transition: transform var(--t-fast) var(--ease); }
+.om-help-list li.is-open button svg { transform: rotate(180deg); color: var(--text-1); }
+.om-help-list p { padding: 0 10px 12px; color: var(--text-2); font-size: 13px; line-height: 1.55; }
+
+.om-help-foot {
+  display: grid; gap: 8px;
+  padding: 12px 16px 14px;
+  border-top: 1px solid var(--line-1);
+  background: var(--surface-1);
+}
+.om-help-foot > span { color: var(--text-3); font-size: var(--fs-meta); }
+.om-help-links { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
+.om-help-links .om-btn { justify-content: center; }
+.om-help-links .om-btn svg { width: 14px; height: 14px; }
+.om-help-discord svg { width: 16px; height: 12px; color: var(--discord); }
+
+.om-nav-discord { height: auto; min-height: 46px; padding-block: 6px; }
+.om-nav-icon-discord { width: 18px; height: 14px; color: var(--discord); flex: none; }
+.om-nav-text { display: grid; gap: 1px; min-width: 0; flex: 1; }
+.om-nav-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-3); font-size: var(--fs-small); font-weight: 500; }
+.om-sidebar.is-collapsed .om-nav-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+.om-sidebar.is-collapsed .om-nav-discord { min-height: 36px; padding-block: 0; }
diff --git a/src/styles/tokens.css b/src/styles/tokens.css
new file mode 100644
index 00000000..4ff5eb7f
--- /dev/null
+++ b/src/styles/tokens.css
@@ -0,0 +1,201 @@
+:root {
+  --discord: #5865f2;
+  --r-xs: 3px;
+  --r-sm: 6px;
+  --r-md: 10px;
+  --r-lg: 14px;
+
+  --font-sans: "DM Sans", system-ui, -apple-system, "Segoe UI", "Noto Sans", "Noto Sans Arabic", "Noto Sans JP", "Noto Sans KR", "Noto Sans SC", sans-serif;
+  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", monospace;
+
+  --fs-title: 22px;
+  --fs-h2: 15px;
+  --fs-body: 13px;
+  --fs-meta: 12px;
+  --fs-small: 11px;
+
+  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
+  --t-fast: 120ms;
+  --t-base: 180ms;
+  --t-slow: 260ms;
+
+  --sidebar-w: 248px;
+  --sidebar-w-collapsed: 68px;
+  --content-w: 1160px;
+}
+
+:root,
+[data-interface-theme] {
+  color-scheme: dark;
+
+  --ink-0: #08090a;
+  --ink-1: #0c0d0f;
+  --solid-1: #141618;
+  --solid-2: #1b1e21;
+  --tint-rgb: 214 228 240;
+  --text-1: #eef0f2;
+  --text-2: #aab0b7;
+  --text-3: #7f858d;
+  --text-4: #565b63;
+  --accent: #5dde89;
+  --accent-rgb: 93 222 137;
+  --on-accent: #07160e;
+  --ok: #5dde89;
+  --bad: #ff6b6b;
+  --warn: #f2b84b;
+  --info: #67d8ff;
+  --shade-rgb: 0 0 0;
+  --light-a: 0.075;
+  --mark-filter: none;
+
+  --surface-1: rgb(var(--tint-rgb) / 0.035);
+  --surface-2: rgb(var(--tint-rgb) / 0.06);
+  --surface-3: rgb(var(--tint-rgb) / 0.09);
+  --surface-4: rgb(var(--tint-rgb) / 0.13);
+  --well: rgb(var(--shade-rgb) / 0.26);
+  --glint: rgb(var(--tint-rgb) / 0.03);
+  --accent-soft: rgb(var(--accent-rgb) / 0.14);
+  --accent-line: rgb(var(--accent-rgb) / 0.45);
+
+  --line-1: rgb(var(--tint-rgb) / 0.07);
+  --line-2: rgb(var(--tint-rgb) / 0.11);
+  --line-3: rgb(var(--tint-rgb) / 0.18);
+
+  --sheen: linear-gradient(180deg, rgb(255 255 255 / 0.025), rgb(255 255 255 / 0) 60%);
+  --lit: inset 0 1px 0 rgb(255 255 255 / 0.065), inset 0 0 0 1px rgb(var(--tint-rgb) / 0.045);
+  --row: inset 0 1px 0 rgb(255 255 255 / 0.045), 0 1px 2px rgb(var(--shade-rgb) / 0.3);
+  --inset-shadow: inset 0 1px 2px rgb(var(--shade-rgb) / 0.45), 0 1px 0 rgb(255 255 255 / 0.035);
+  --key: linear-gradient(180deg, rgb(255 255 255 / 0.1), rgb(255 255 255 / 0.05)), var(--solid-2);
+  --key-shadow: inset 0 1px 0 rgb(255 255 255 / 0.09), 0 1px 3px rgb(var(--shade-rgb) / 0.5);
+  --btn: linear-gradient(180deg, rgb(255 255 255 / 0.05), rgb(255 255 255 / 0.015)), var(--surface-2);
+  --btn-hover: linear-gradient(180deg, rgb(255 255 255 / 0.075), rgb(255 255 255 / 0.03)), var(--surface-3);
+  --btn-shadow: inset 0 1px 0 rgb(255 255 255 / 0.07), 0 1px 2px rgb(var(--shade-rgb) / 0.4);
+  --primary-shadow: inset 0 1px 0 rgb(255 255 255 / 0.28), 0 1px 2px rgb(var(--shade-rgb) / 0.45);
+  --shadow-float: 0 18px 44px -14px rgb(var(--shade-rgb) / 0.7), 0 2px 6px rgb(var(--shade-rgb) / 0.3);
+  --focus: 0 0 0 2px var(--ink-1), 0 0 0 4px rgb(var(--accent-rgb) / 0.7);
+  --ground: radial-gradient(110% 80% at 82% -20%, rgb(var(--accent-rgb) / var(--light-a)), transparent 62%), var(--ink-1);
+  --stage-light: radial-gradient(62% 58% at 50% 46%, rgb(var(--accent-rgb) / 0.13), transparent 72%);
+  --chart-fill: linear-gradient(180deg, rgb(var(--accent-rgb) / 0.2), rgb(var(--accent-rgb) / 0));
+}
+
+[data-interface-theme="matt"] {
+  --ink-0: #0a0908; --ink-1: #0f0d0c; --solid-1: #171513; --solid-2: #201d1a;
+  --tint-rgb: 240 226 214;
+  --text-1: #f3efeb; --text-2: #b4ada6; --text-3: #8a827a; --text-4: #5e5751;
+  --accent: #f5975c; --accent-rgb: 245 151 92; --on-accent: #1a0e06;
+  --ok: #7fd49a; --bad: #ff6f6b; --warn: #f2c14b; --info: #7cc8f0;
+}
+
+[data-interface-theme="violet"] {
+  --ink-0: #09080c; --ink-1: #0e0c13; --solid-1: #16141d; --solid-2: #1f1c28;
+  --tint-rgb: 222 214 255;
+  --text-1: #efedf7; --text-2: #afabc0; --text-3: #847f97; --text-4: #5b576c;
+  --accent: #a78bfa; --accent-rgb: 167 139 250; --on-accent: #130b25;
+  --ok: #6fdc9b; --bad: #ff6f86; --warn: #f2c14b; --info: #7fc6ff;
+}
+
+[data-interface-theme="ice"] {
+  --ink-0: #07090b; --ink-1: #0a0e11; --solid-1: #121820; --solid-2: #19212b;
+  --tint-rgb: 205 228 245;
+  --text-1: #edf3f7; --text-2: #a6b2bd; --text-3: #7a8692; --text-4: #535e69;
+  --accent: #67d8ff; --accent-rgb: 103 216 255; --on-accent: #06161d;
+  --ok: #6fdc9b; --bad: #ff6f7a; --warn: #f2c14b; --info: #67d8ff;
+}
+
+[data-interface-theme="ember"] {
+  --ink-0: #0b0807; --ink-1: #110c0a; --solid-1: #1a1411; --solid-2: #241c18;
+  --tint-rgb: 255 222 205;
+  --text-1: #f6efeb; --text-2: #bbaca4; --text-3: #8f8077; --text-4: #625750;
+  --accent: #ff9b62; --accent-rgb: 255 155 98; --on-accent: #211006;
+  --ok: #7fd49a; --bad: #ff6b6b; --warn: #f2c14b; --info: #7cc8f0;
+}
+
+[data-interface-theme="mono"] {
+  --ink-0: #09090a; --ink-1: #0d0d0e; --solid-1: #161617; --solid-2: #1f1f21;
+  --tint-rgb: 232 232 236;
+  --text-1: #f1f1f3; --text-2: #ababb1; --text-3: #808087; --text-4: #58585e;
+  --accent: #f1f1f3; --accent-rgb: 241 241 243; --on-accent: #09090b;
+  --ok: #8fd8a8; --bad: #ff7a7a; --warn: #e9c46a; --info: #a9c8e8;
+  --light-a: 0.045;
+}
+
+[data-interface-theme="miku"] {
+  --ink-0: #061012; --ink-1: #0a1719; --solid-1: #102226; --solid-2: #162d32;
+  --tint-rgb: 190 240 236;
+  --text-1: #e7f7f6; --text-2: #a2c4c1; --text-3: #739996; --text-4: #4d6e6b;
+  --accent: #39c5bb; --accent-rgb: 57 197 187; --on-accent: #031413;
+  --ok: #7ee0a6; --bad: #ff6f9a; --warn: #f2c96b; --info: #86d6ff;
+  --light-a: 0.1;
+}
+
+[data-interface-theme="catppuccin-mocha"] {
+  --ink-0: #11111b; --ink-1: #1e1e2e; --solid-1: #181825; --solid-2: #313244;
+  --tint-rgb: 205 214 244;
+  --text-1: #cdd6f4; --text-2: #bac2de; --text-3: #9399b2; --text-4: #6c7086;
+  --accent: #cba6f7; --accent-rgb: 203 166 247; --on-accent: #1e1e2e;
+  --ok: #a6e3a1; --bad: #f38ba8; --warn: #f9e2af; --info: #89b4fa;
+  --shade-rgb: 8 8 16;
+}
+
+[data-interface-theme="catppuccin-macchiato"] {
+  --ink-0: #181926; --ink-1: #24273a; --solid-1: #1e2030; --solid-2: #363a4f;
+  --tint-rgb: 202 211 245;
+  --text-1: #cad3f5; --text-2: #b8c0e0; --text-3: #939ab7; --text-4: #6e738d;
+  --accent: #c6a0f6; --accent-rgb: 198 160 246; --on-accent: #24273a;
+  --ok: #a6da95; --bad: #ed8796; --warn: #eed49f; --info: #8aadf4;
+  --shade-rgb: 10 10 20;
+}
+
+[data-interface-theme="catppuccin-frappe"] {
+  --ink-0: #232634; --ink-1: #303446; --solid-1: #292c3c; --solid-2: #414559;
+  --tint-rgb: 198 208 245;
+  --text-1: #c6d0f5; --text-2: #b5bfe2; --text-3: #a5adce; --text-4: #737994;
+  --accent: #ca9ee6; --accent-rgb: 202 158 230; --on-accent: #303446;
+  --ok: #a6d189; --bad: #e78284; --warn: #e5c890; --info: #8caaee;
+  --shade-rgb: 14 15 24;
+}
+
+[data-interface-theme="nier-automata"] {
+  --ink-0: #282620; --ink-1: #2f2d26; --solid-1: #36342c; --solid-2: #403e35;
+  --tint-rgb: 209 205 183;
+  --text-1: #dad6c0; --text-2: #bdb9a4; --text-3: #a4a08c; --text-4: #7f7c6c;
+  --accent: #d1cdb7; --accent-rgb: 209 205 183; --on-accent: #2f2d26;
+  --ok: #b3bb8c; --bad: #d47a65; --warn: #cdbb70; --info: #b5b096;
+  --shade-rgb: 20 18 12;
+  --light-a: 0;
+  --stage-light: radial-gradient(62% 58% at 50% 46%, rgb(var(--accent-rgb) / 0.06), transparent 72%);
+}
+
+[data-interface-theme="light"] {
+  color-scheme: light;
+  --ink-0: #fbfbf9; --ink-1: #f2f2ef; --solid-1: #ffffff; --solid-2: #ffffff;
+  --tint-rgb: 30 30 24;
+  --text-1: #17181a; --text-2: #45484e; --text-3: #63676e; --text-4: #9a9ea5;
+  --accent: #c4581f; --accent-rgb: 196 88 31; --on-accent: #ffffff;
+  --ok: #16803c; --bad: #c42b33; --warn: #8a5a00; --info: #0b6fa4;
+  --shade-rgb: 40 36 24;
+  --light-a: 0.05;
+  --mark-filter: invert(1);
+
+  --surface-1: #ffffff;
+  --surface-2: #f6f6f3;
+  --surface-3: #ecece8;
+  --surface-4: #e3e3de;
+  --well: rgb(30 30 24 / 0.045);
+  --glint: rgb(30 30 24 / 0.035);
+  --line-1: rgb(30 30 24 / 0.08);
+  --line-2: rgb(30 30 24 / 0.13);
+  --line-3: rgb(30 30 24 / 0.2);
+  --sheen: linear-gradient(#ffffff, #ffffff);
+  --lit: 0 0 0 1px rgb(30 30 24 / 0.075), 0 1px 2px rgb(30 30 24 / 0.05);
+  --row: 0 0 0 1px rgb(30 30 24 / 0.075), 0 1px 2px rgb(30 30 24 / 0.04);
+  --inset-shadow: inset 0 1px 2px rgb(30 30 24 / 0.1), inset 0 0 0 1px rgb(30 30 24 / 0.05);
+  --key: #ffffff;
+  --key-shadow: 0 0 0 1px rgb(30 30 24 / 0.1), 0 1px 2px rgb(30 30 24 / 0.14);
+  --btn: #ffffff;
+  --btn-hover: #f6f6f3;
+  --btn-shadow: 0 0 0 1px rgb(30 30 24 / 0.13), 0 1px 2px rgb(30 30 24 / 0.06);
+  --primary-shadow: 0 1px 2px rgb(30 30 24 / 0.22);
+  --shadow-float: 0 18px 44px -14px rgb(30 30 24 / 0.28), 0 2px 6px rgb(30 30 24 / 0.08);
+  --stage-light: radial-gradient(62% 58% at 50% 46%, rgb(var(--accent-rgb) / 0.08), transparent 72%);
+}
diff --git a/src/vite-env.d.ts b/src/types/vite-env.d.ts
similarity index 100%
rename from src/vite-env.d.ts
rename to src/types/vite-env.d.ts
diff --git a/src/webhid.d.ts b/src/types/webhid.d.ts
similarity index 100%
rename from src/webhid.d.ts
rename to src/types/webhid.d.ts
diff --git a/src/admin-unban.test.ts b/test/admin-unban.test.ts
similarity index 100%
rename from src/admin-unban.test.ts
rename to test/admin-unban.test.ts
diff --git a/src/discord-card.test.ts b/test/discord-card.test.ts
similarity index 100%
rename from src/discord-card.test.ts
rename to test/discord-card.test.ts
diff --git a/src/pwa-precache.test.ts b/test/pwa-precache.test.ts
similarity index 100%
rename from src/pwa-precache.test.ts
rename to test/pwa-precache.test.ts
diff --git a/src/security-headers.test.ts b/test/security-headers.test.ts
similarity index 98%
rename from src/security-headers.test.ts
rename to test/security-headers.test.ts
index b9b494db..f0eb4eab 100644
--- a/src/security-headers.test.ts
+++ b/test/security-headers.test.ts
@@ -6,7 +6,7 @@ import {
   PERMISSIONS_POLICY,
   SECURITY_HEADERS,
 } from "../functions/_lib/security-headers.js";
-import { TRUSTED_TYPES_POLICY, setSanitizedHtml } from "./trusted-types.ts";
+import { TRUSTED_TYPES_POLICY, setSanitizedHtml } from "../src/platform/trusted-types.ts";
 
 const headersFile = readFileSync(new URL("../public/_headers", import.meta.url), "utf8");
 const indexHtml = readFileSync(new URL("../index.html", import.meta.url), "utf8");
diff --git a/src/security-middleware.test.ts b/test/security-middleware.test.ts
similarity index 97%
rename from src/security-middleware.test.ts
rename to test/security-middleware.test.ts
index 050f58f0..b60a1cc6 100644
--- a/src/security-middleware.test.ts
+++ b/test/security-middleware.test.ts
@@ -187,7 +187,7 @@ test("the GET rate limit resets on a new minute", async () => {
         await guarded(new Request("https://openmouse.app/api/presence"), kv)
       ).status;
     }
-    clock += 60_000; // next minute -> a fresh window bucket
+    clock += 60_000;
     lastStatus = (
       await guarded(new Request("https://openmouse.app/api/presence"), kv)
     ).status;
@@ -213,11 +213,10 @@ test("repeated abuse permanently bans the IP", async () => {
 
 test("static subresources bypass the guard with zero KV traffic", async () => {
   const kv = new FakeKV();
-  await kv.put("ban:1.2.3.4", "security"); // even a banned IP
+  await kv.put("ban:1.2.3.4", "security");
   kv.gets = 0;
   kv.puts = 0;
 
-  // Browser asset fetch — Sec-Fetch-Dest decides.
   const script = await guarded(
     new Request("https://openmouse.app/assets/app.js", {
       headers: { "CF-Connecting-IP": "1.2.3.4", "Sec-Fetch-Dest": "script" },
@@ -226,7 +225,6 @@ test("static subresources bypass the guard with zero KV traffic", async () => {
   );
   assert.equal(script.status, 200);
 
-  // Non-browser client with no Sec-Fetch-Dest — the path extension decides.
   const image = await guarded(
     new Request("https://openmouse.app/logo.png", {
       headers: { "CF-Connecting-IP": "1.2.3.4" },
diff --git a/vite.config.ts b/vite.config.ts
index e97c0b0c..e68fc8a8 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -15,9 +15,6 @@ const packageVersion = JSON.parse(
 ) as { version: string };
 const buildChannel = process.env.OPENMOUSE_BUILD_CHANNEL ?? "beta";
 
-/** Beta build version: major.minor from the package plus the build number
-    (total commits on this history, monotonic per push). Falls back to a
-    date-based number when git is unavailable (e.g. source archives). */
 const versionBase = packageVersion.version.replace(/\.\d+$/, "");
 function betaBuildVersion(): string {
   const sha = process.env.CF_PAGES_COMMIT_SHA;