Bootstrap agent-ready docs and permissions (D-036)

Root AGENTS.md is now the single source of truth for coding agents;
CLAUDE.md, GEMINI.md and docs/CLAUDE.md are pointers. The product spec
moves from docs/CLAUDE.md to PRODUCT.md, DESIGN.md records the shipped
visual system, and docs/PERMISSIONS.md defines agent permission tiers
rendered to .claude/, .codex/ and .gemini/. Adds docs/specs/ and
docs/plans/, logs issues noticed (not fixed) in WorkBreakdown.md.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

DESIGN.md

@@ -0,0 +1,32 @@
+# Design
+
+Derived from the shipped `src/index.css` (single stylesheet, plain CSS, no framework). Describes what
+exists, not an aspiration. Update in the same commit as visual changes.
+
+## Foundations
+
+- **Theme:** dark only. `:root` sets `color: #e8e8e8; background-color: #16181d` (also the PWA
+  `theme_color`). `color-scheme: light dark` is declared but there is no light palette.
+- **Tokens (`:root`):** `--panel #1f232b` · `--border #343a46` · `--accent #7aa2f7` · `--muted #9aa3b2`.
+  Everything else is a hard-coded hex.
+- **Semantic colours in use (hard-coded):** success/ready text `#9ad6ae` (bg `#1d2b23`, border `#3d6b4f`);
+  error text `#f2b8b5` (bg `#2a1c1e`, border `#8b3a3a`); live/recording `#e0605e`; raised surfaces
+  `#262b34` / `#232a38`.
+- **Type:** `Inter, system-ui, …` stack — Inter is not loaded, so it renders in the system font unless
+  installed locally. Body line-height 1.5; `h1` 2.2rem / 1.15. Any webfont must be self-hosted (COEP,
+  see AGENTS.md).
+- **Layout:** single centred column, `.app { max-width: 720px; padding: 2.5rem 1.25rem 3rem; gap: 1.5rem }`,
+  `body { min-width: 320px }`.
+- **Radius:** 8px for controls (most common); 10–14px for panels/cards; 999px for pills/badges.
+- **Motion:** `0.15s` colour/border transitions; `pulse` (live dot) and `blink` (cursor) animations,
+  disabled under `prefers-reduced-motion`.
+
+## Components
+
+One BEM-ish class block per React component in `src/components/` (`.model-picker`, `.dropzone`,
+`.live-controls`, `.engine-toggle`, `.auth-panel`, `.update-toast`, …), with modifier classes like
+`-selected`, `-active`, `-disabled`. Interactive states use `:hover:enabled` and `:focus-visible`.
+`.visually-hidden` exists for screen-reader-only text.
+
+TODO(maintainer): confirm whether the dark-only theme is intentional, and whether hard-coded semantic
+colours should become tokens.