[royandre]

What and why

• Each toolbar button shows its shortcut: ⌘1–⌘4 / Ctrl+1–4 on the devices, ⌘S on Screenshot, ⌘C on copy, Esc on close. The labels are aria-hidden; screen readers get the keys from aria-keyshortcuts. Below 1140px window width the labels hide so the toolbar stays on one row (the tooltips still name the keys).
• iPhone SE uses the Midnight finish: black front, dark aluminium sides, dark earpiece and home-button ring.
• iPad Pro 11″ is shown in landscape (1210 × 834), with the front camera centred in the top bezel. frame.js now draws a camera on the top or right edge. The side buttons are dropped: in landscape they sit on the top edge, which the frame doesn't draw.
• The shortcut line under the phone is removed, since the toolbar now shows every shortcut; the phone gets about 40px more height. Its four strings are gone from both locales.
• docs/devices.png and docs/overlay.png regenerated with the new toolbar, black SE and landscape iPad.

How I tested it

• npm run check (lint + 20 unit tests) and npm run test:e2e (8 tests) pass on macOS. New: unit test for the iPad camera position, e2e assertion for the toolbar labels.
• Looked at overlay screenshots of all four devices, and of the toolbar with Ctrl+ labels (about 1100px wide).

Checklist

• npm run check passes
• Added a line under ## [Unreleased] in CHANGELOG.md
• No new permissions, runtime dependencies or network requests
• For device changes: the iPad viewport is the existing 834 × 1210 rotated; no new sizes

🤖 Generated with Claude Code