[bmscomp]

Why

The architecture diagram told the disruption story with a CSS clock and a line of text that faded in and out. A visitor couldn't stop on a step, and the Kafka box stayed opaque, though it is where the run's outcome is decided.

What changed

• Architecture figure (#architecture): a broker-pod-kill run plays in five phases (Baseline, Inject, Broker down, Recovery, Graded) from a clickable timeline. site.js sets data-phase on the figure, and both the wide and the phone SVG react to it, so the old --cycle/--at keyframes are gone.
  • Wide layout: a live P99 line in the Grafana box (17.8 → 41.2 ms → back) and an "A" grade stamp on the CLI box.
  • Phone layout: the same phases from the same timeline; no chart or stamp.
  • Hover and focus highlighting, the entrance animation and the off-screen pause are all unchanged.
• Inside Kafka (new figure under the diagram): three brokers in three zones with partition leaders (★). LitmusChaos kills krafter-kafka-1, p1's leadership moves to zone c, the ISR drops to 2, the broker catches up and the preferred leader returns. On phones the names shorten to kafka-0 and the partitions stack.
• Themes: the per-theme .arch box fills are removed; the diagram uses the theme tokens.

Under prefers-reduced-motion both figures show a still frame: the timeline still works by click, and the Kafka view holds on "Broker down".

Checked

• npx html-validate@9 website/index.html passes (the CI validate job).
• In a browser at 1280px, 800px and 375px, Paper and Navy themes: no console errors and no horizontal scroll at 375px.

Notes

• The numbers (48,112 rec/s, P99 17.8 → 41.2 ms, 6.4 s recovery, 0 records lost) are copied from the hero terminal so the page tells one story. They are illustrative, not measured.
• Not checked: Phosphor, Ember and Slate themes beyond the token change, and Safari.