feat(appstore): add the listing screenshots

Five 2560x1600 frames. The app window inside each is a CSS rebuild of the real interface rather
than a bitmap, laid out at the app's own 1440x900 and scaled once, so the type is real text at
render time instead of a resampled capture. The only Macs to hand are 1x, and an upscaled screen
capture looks like one.

The website's own AppWindow mockup was the obvious source and turned out to be wrong in several
places: the sidebar is 248px not 196, the proofing marks are straight underlines rather than wavy,
and the trim default differs. The rebuild follows shared/css/tokens.css and src/styles/app.css
instead, so these are more accurate than the marketing imagery.

Sample prose is original and written for this listing, since it goes in a public store page.

Claude-Session: https://claude.ai/code/session_018HwEWvoE1NkkUjJCMLSnup

appstore/screenshots/README.md

@@ -0,0 +1,51 @@
+# Mac App Store screenshots
+
+Five 2560x1600 frames for the Margin listing: `frame-1.png` through `frame-5.png`.
+
+Each frame is an HTML page in `src/`, rendered at a 2560x1600 viewport with a device pixel ratio of
+1. The app window inside the frame is not a bitmap capture. It is a CSS rebuild of the real app in
+`src/app.css`, with rules and values lifted from `shared/css/tokens.css` and `src/styles/app.css`,
+laid out at the app's own 1440x900 and scaled once into the 1600x1000 window well. That is why the
+type is sharp: it is real text at render time, not a resampled screenshot.
+
+| File | Frame | Shows |
+| --- | --- | --- |
+| `frame-1.png` | Write | The writing surface, preview dock closed |
+| `frame-2.png` | Preview | The editor beside the live page preview |
+| `frame-3.png` | Proof | Three proofing marks and an open spelling popover |
+| `frame-4.png` | Publish | The PDF export preview panel over the editor |
+| `frame-5.png` | Yours | The library, no sign-in anywhere |
+
+## Re-rendering
+
+Serve this directory and screenshot each page at a 2560x1600 viewport, dpr 1:
+
+```
+python3 -m http.server 8731
+```
+
+Load `http://127.0.0.1:8731/src/frame-1.html` and capture the viewport to `frame-1.png` here. Check
+every output with `sips -g pixelWidth -g pixelHeight frame-*.png`; App Store Connect rejects
+anything that is not exactly 2560x1600.
+
+Type comes from Google Fonts (Literata for headlines and prose, Hanken Grotesk for the interface),
+so the render needs a network connection.
+
+## Editing
+
+`src/frame.css` is the frame surface: the eyebrow, headline, supporting line and the window well.
+Every length in it is a real output pixel.
+
+`src/app.css` is the app window. Every length in it is an app pixel, so a value copied out of the
+product's own stylesheet can go in unchanged. Keep it that way; the whole point is that the
+screenshots stay honest about what the app looks like.
+
+Copy lives in each `src/frame-N.html`, along with that frame's window markup, since every frame
+shows a different state of the app.
+
+## Sample content
+
+The frames use "The Quiet Hours" by Elena Marsh, an invented author. The prose is original and
+written for this listing, so it is safe to publish. If you change it, keep it general non-fiction
+rather than novel writing: the listing positions Margin as a writing app, not as software for one
+genre.