explainer-diagramslisted

# Explainer diagrams A diagram in this grammar is a **scene**: shapes, positions, and arrows that carry the meaning, with few words. The first attempt at this usually comes out as a table in nice colors. The verdict that produced this skill was "they're not visual, they look boring." Read `examples/severance-week/` before your first diagram: `index.html` is the source of seven diagrams and `out/` holds the PNGs they produced. That is the reference implementation. ## The grammar | token | value | used for | |---|---|---| | blue `#1a52e0` | flow, structure, the real thing | card strokes, solid arrows, solid nodes, stat numbers, index badge | | orange `#d66b2f` | intervention, return path, the outside hand | dashed arrows, seed cards (`#fff3ea` tint), rewind | | panel `#f5f7ff` | containers, callouts | dashed container fill, callout background | | gray `#aaa` / `#f2f2f2` | invalid, scripted, never happened | hollow nodes, struck-through lines, "never entered" boxes | | text `#666`, muted `#767676`, ink `#000` | | | Type: **Pixelify Sans** (Google Fonts) for the title and the callout heading only; system mono for everything else; system sans bold only for card labels and node names. Cards are white, 1px stroke, `border-radius: 3px`. Arrows use a 6×6 triangle `<marker>`, one per diagram with a unique id. Components (all in `template.html`): `.shot` (1100px white sheet, 40px padding; the PNG is this element) → `.shot-head` (blue mono index `01`, Pixelify `<h2>`, one-line mono