[Robdel12]

The reporter got its dyno brand in #34, and now the docs site matches. Same cell, same instruments, a bit more room to play.

What changed

• A homepage hero that does a pull. Next to the title, an example pull draws itself in: the trace sweeps left to right, the tach needle swings, and the sheet note prints 12 tests @ 2.39 s. It uses the real dyno-chart.js, so it's the same sheet you see in the reporter. The flat stretch is one slow import test.
• Run it again. Click it and the suite reruns after that slow test got faster. The first run stays as a dotted ghost, the tach goes from red to green, and the caption tells you how much time you saved. The hero shows off the ghost feature by doing it.
• A wordmark that rolls. The roller in the site title turns as you scroll, like the drum under a car on the dyno. It sits still where scroll-driven animation isn't supported, and with reduced motion on.
• The current page sits on a roller in the sidebar, the same mark as a running test in the reporter. There are no more rails on nested lists.
• The 404 page is "Not on the sheet", with a big tach whose needle never left zero.
• The theme. A steel-blue dark mode and a printed-sheet light mode, Archivo throughout, yellow primary buttons, blue links, and tables with only row dividers. Callouts are tinted plates; cautions get hazard tape along the top.

One brand, one file

The /simplify pass caught that the docs had copied the reporter's palette and instrument CSS. That's now a shared src/browser/brand.css:

• Tokens are light-dark() pairs. Each page picks a theme with color-scheme: the reporter follows the system, the control room stays dark, and the docs follow Starlight's theme toggle. The palette lives in exactly one place.
• Who loads it: the reporter, the control room, saved reports, and the docs all load brand.css. It holds the wordmark, roller, tach, sheet, sheet notes, and legend styles. docs.css just maps Starlight's variable names onto it.
• Shared label helpers: dyno-chart.js now has testCount, sheetNote, and sheetSpan, and sheetHead returns which side the note goes on. The reporter, saved reports, and the docs hero share them, so labels can't drift.

Smaller cleanups:

• Generator frontmatter: generate.js writes it as JSON (valid YAML) instead of hand-built YAML strings.
• The 404's tach is passed to Starlight's own hero as data, so it isn't special-cased in a component.
• Dev server: Vite may only read the site and src/browser, which is enough to load the shared font.
• Code frames: their style lives in the Expressive Code config.
• Smoother scrolling: the scroll roller rotates the whole SVG, so it stays on the compositor, and the header no longer has a backdrop blur.

docs/design.md covers the docs site and brand.css.

Screenshots

Homepage

After Run it again

Homepage, light

A guide page

A guide page, light

404

Phone width

Testing

• npm test: 262 passed, 2 skipped. The reporter now loads brand.css, and I compared the reporter and saved report screenshots with the earlier ones; they look the same.
• npm --prefix site test: 7 passed, including the docs browser tests and the link checker.
• Clean npm --prefix site run build. It still warns that [...slug] also lists the 404 entry; Starlight's /404 route wins and renders it.

A few things I left alone:

• Font preload: the font isn't preloaded yet, because its URL is hashed.
• Hero CSS: the hero's CSS ships in the shared stylesheet, about 1 KB gzipped.
• Phone-width header: the existing "Other versions unavailable" text overlaps the page at phone width in local builds, which have no versions list.