Polish docs mobile layout

[xuefei-wang]

Summary

Mobile styles for the docs: hero, CTA buttons, cards, and the Mermaid expand /
zoom controls. The guiding rule is to add rules only where MkDocs Material does
not already handle the narrow viewport — several first-draft rules turned out
to duplicate or actively fight Material's own layout, and have been dropped.

What changed

Hero. Tighter type scale and spacing at phone widths. The title uses
text-wrap: balance and the tagline text-wrap: pretty, so neither strands a
short final line — this replaces hand-tuned max-width values that only worked
for the current wording.

CTA. The three buttons become a small grid: the primary spans the full
width, with Blog / GitHub side by side beneath it, and all three get a
comfortable touch target.

Cards. Tighter gaps and padding, and the hover lift is disabled — on touch
a hover transform sticks after a tap.

Mermaid. The expand button is permanently visible (there is no hover on
touch) and sized as a touch target; the zoom toolbar gets larger controls.
Diagrams keep the native sizing introduced in 5cfa2e1 and scroll inside their
own box, with overscroll-behavior-x: contain so a swipe at the diagram's edge
doesn't trigger back-navigation.

Inline code gets overflow-wrap: anywhere — long flags and dotted paths are
the one thing Material's word-break: break-word won't break on a narrow column.

Deliberately left to Material

Verified against Material 9.7.6's compiled CSS rather than assumed:

• Wide tables — every table is wrapped in .md-typeset__scrollwrap, which
  already has overflow-x: auto at all widths. An earlier draft added a second
  overflow-x to the inner .md-typeset__table (nesting a scroller inside the
  scroller) plus min-width: 34rem, which forced narrow tables to scroll too.
  On architecture.md at 390px that meant all five tables scrolled; now only the
  one genuinely wider than the column does.
• Block code — pre > code already carries its own overflow: auto, and
  Material pulls top-level blocks edge-to-edge at this same breakpoint via
  .md-content__inner > .highlight. An earlier pre { margin-inline: 0 } was
  outranked by that selector and never applied; a font-size: 0.68rem restated
  the value already inherited (.md-typeset is .8rem, code is .85em).

The breakpoint is Material's own 44.984375em so the two switch on exactly the
same viewport.

Scope

This PR is now purely additive mobile CSS — it touches nothing outside the
@media block.

An earlier revision also flattened heading letter-spacing to 0 and card /
table border-radius to 8px. Those are viewport-independent and sat outside
the media query, so they changed desktop too. Checked against the design source
this stylesheet names in its own header — the blog, which it says it mirrors "so
the two sites read as one system" — the blog uses letter-spacing: -0.02em on
headings and defines --radius: 14px for its card surfaces, which is exactly
what the docs originally had. The values also predate this work (they came in
with the public release). They've been restored.

Validation

• uv run pytest: 3097 passed, 22 skipped.
• uv run mkdocs build --strict: passes.
• Audited the rendered homepage, architecture, experiments, and getting-started
  pages in headless Chrome at 360px and 390px: no document-level horizontal
  overflow and no nested scroll containers on any of them. The hero title
  balances to 3 lines at 360px and 2 at 390px.
• Not verified: a live-rendered Mermaid diagram. Material lazy-loads mermaid
  from unpkg and its sub-chunks return 403 in this sandbox, so the diagram
  reasoning above rests on the CSS and on 5cfa2e1's intent, not on a screenshot.