Record the design system and fix four endpoint-screen defects

[botre]

Adds PRODUCT.md and DESIGN.md for the project, and fixes four defects found while documenting it.

Fixes

Captured request rows squeezed on phones. The details and headers lists were two-column grids with a fixed 10rem key column that held at every width, so a phone-sized viewport gave roughly half its content width to the label and the rest to a path or header value. They are flex rows now — key column above the breakpoint, label stacked above its value below it. Desktop is unchanged: the label column still measures 160px with a 12px gap.

Two details worth a reviewer's attention:

• Each row is now its own element instead of a display: contents wrapper. The old first:border-t-0 sat on the dt inside that wrapper, so only the dd ever drew a rule and dividers were painting over the value column alone. They span the full row now.
• The divider is border-b with the last row cleared rather than border-t with the first cleared, because x-for leaves its <template> as the first child and a :first-child rule never matches a rendered row. There's a comment on this so it doesn't get "simplified" back.

The retention notice used an emoji in an otherwise uniform set of 24×24 stroked icons. Replaced with the matching alert triangle, inheriting colour like every other icon.

The CSP blocked local design tooling. It serves an injected script from a local port and opens a socket back to it. The extra source is gated on the environment rather than on anything a request carries, and the policy is now assembled once at startup instead of per response. Verified both branches: development carries the origin, production is byte-identical to the previous policy.

docs/scripts.md documented a command that doesn't compile. go run ./src/application.go excludes the rest of the package and fails on the undefined request logger.

Documentation

PRODUCT.md records product truth — audience, positioning, and the constraints future work must preserve (free and anonymous permanently; ephemeral by design).

DESIGN.md records the implemented visual system under the DESIGN.md spec. Since there's no Tailwind config, the token values were read from the pinned CDN bundle and checked against computed styles in a browser rather than transcribed. It also documents the vendored highlight.js palette, which the rest of the system does not author. .impeccable/design.json carries what the format can't hold: tonal ramps, shadow/motion tokens, and renderable component snippets.

Verification

go vet, gofmt, go build, unit tests and prettier --check all clean. Playwright suite 35/35 passing. Mobile and desktop rendering checked in a browser.

Not addressed

The home page / ships with no security headers at all — no CSP, X-Frame-Options, X-Content-Type-Options or Referrer-Policy — while every other route, including unmatched paths, has them. This reproduces on unmodified master, so it predates this branch; the likely cause is the Get("/*", static.New("./public")) catch-all registered ahead of the page routes. Left alone here to keep this PR to its stated scope, but it's a real gap on the most-visited page and worth its own fix.

🤖 Generated with Claude Code

https://claude.ai/code/session_01X8JeP7AQwpd2coSfwbMopt