interactive-explainerlisted

# Interactive Explainer Turn "how does X work?" into a single HTML file the reader can *explore*: click a node to see what feeds it and what it feeds, step through the story, read details on demand. The picture carries the structure; the words carry only what the picture can't. ## When to use — and when not | Situation | Verdict | |---|---| | Cycles, workflows, dependencies, state machines, lifecycles, request paths | **Yes** — this is the target case | | A concept with real structure that markdown flattens into "and then… and then…" | **Yes** | | Live data, dashboards, real metrics | **No** — that's an app; use the project's data/dashboard tooling | | A list, a comparison table, three bullet points | **No** — markdown wins; don't build a page to say what a sentence says | ## The contract 1. **One self-contained `.html` file.** No build step, no CDN, no external requests. It must open from disk, offline, forever. (Embed a font via `@font-face` data-URI only if the file budget allows; otherwise pick a deliberate local stack and let weight/size/spacing do the typographic work.) 2. **Data-driven.** Nodes, edges, and steps live in one JS object at the top of the file. The rendering reads the data; nobody should ever edit SVG coordinates to fix a typo. 3. **The picture carries structure; words carry mechanism.** If the text restates what an arrow already shows, cut the text. 4. **Overview first, zoom and filter, details on demand.** The first screen is the whole shape, legibl