Record the settled visual spec in CLAUDE.md

Direction A (manual) with a dark counterpart is settled, so reference/
is demoted: it remains authoritative for behaviour and data - combos,
layer logic, Leitner scheduling, the pointer model - but no longer for
appearance. This section and the canvas govern that.

Captures the language (flat fills, hard zero-blur offset shadows, 2px
outlines, a single #FF4A00 that means 'live', positive LCD, no green or
red), the panel construction drawn from the hardware (circle behind the
display, silkscreen group captions, FX buttons dark with orange text),
the measured type rules that stop labels overflowing, and the vertical
budget nothing may exceed.

Typeface and accent are still open and are noted as such; neither
blocks the data and logic work.

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

CLAUDE.md

@@ -156,6 +156,58 @@ now empty and bar styling is configured in `capacitor.config.json`
 installs over Phase 1's without an uninstall and drill progress survives.
 `appId` is `dev.ncode.sp404layers` and must not change for the same reason.
 
+## Visual spec (settled — build Phase 2 against this)
+
+The look is **Direction A, "manual"**, after Teenage Engineering's EP-133 manual,
+with a dark counterpart. Canvas: https://claude.ai/artifact/4Jvjop1hEsJY2xzcpGrrgg
+Working files: `design/canvas/*.dc.html` + `canvas.json` (the seeded payload is
+gitignored and regenerates from them).
+
+**`reference/` is now the behaviour and data spec only.** It no longer governs
+appearance — this section and the canvas do. Combos, layer logic, Leitner
+scheduling and the pointer model still come from the reference.
+
+The language:
+
+- Flat fills, no gradients, no blur. Depth is a **hard zero-blur offset shadow**:
+  4px on the panel, 3px on cards and pickers.
+- **2px `#111111` outlines** everywhere (dark mode: 2px `#000000`).
+- **One accent, `#FF4A00`**, meaning exactly one thing: this control is live.
+  Pad numerals stay grey so the accent is never ambiguous.
+- Uppercase, technical labels; monospaced numerals and annotations.
+- **No green or red.** Drill feedback is orange fill for correct, dashed outline
+  for not-quite.
+- The LCD is a **positive** display — `#C9D2C4` with dark text — in both modes.
+
+Panel construction, drawn from the hardware rather than invented:
+
+- The screen's circle sits **behind** the display, not around it: a 124px circle
+  behind a 168×84 LCD shows only as two 20px caps above and below. The display
+  names the layer and lists what is on it.
+- The control block is grouped as the unit is silkscreened (`PATTERN SEQUENCER`,
+  `SAMPLING`, `SAMPLE EDIT`, `BANK`), each group a hairline bracket caption over
+  its row, 10px between the two blocks and 7px between groups.
+- FX buttons are dark with orange text, as on the device.
+- Key labels are **7px, no letter-spacing, 1px side padding**. A left-block
+  button is 35.9px wide and only 27.9px of that is usable text width; at 8px with
+  tracking `SAMPLE` measured ~27.8px and sat flush against the border.
+  `RESAMPLE`, `REMAIN` and `REVERSE` are the only labels with no space in them,
+  so they carry soft hyphens — everything else wraps at its space.
+- `SHIFT` gets `flex: 1.25` in the six-button bank row, as the hardware widens it.
+
+Vertical budget at the real 360×735, which nothing may exceed:
+
+```
+root   8 + 44 + 8 + 525 + 8 + 84 + 8 + 50            = 735
+panel  8 + 36 + 8 + 124 + 10 + 134 + 10 + 187 + 8    = 525
+pads   (187 - 15) / 4                                = 43px rows
+```
+
+**Still open:** the typeface (mockups use Space Grotesk + Space Mono; Martian
+Mono and Archivo are the alternates on the specimen board) and whether the accent
+is `#FF4A00` or the current, softer `#ff7a1a`. Neither blocks the data and logic
+work, only the UI.
+
 ## Phase 2 must carry these UI changes
 
 Phase 1 fixes a strip ergonomics problem in `native/native.{css,js}` rather than