tesseron-diagramlisted

# Tesseron Diagram Skill Produce self-contained HTML files with embedded CSS and inline SVG in the Tesseron docs aesthetic. ## Core principle **One accent color. Everything else is neutral.** Rainbow palettes are the #1 amateur tell. The accent (amber) is reserved for the single "novel" or "featured" node per diagram. Every other node is a neutral slate card. --- ## ⚠️ Hard rules (learned the hard way — do not deviate) These are non-negotiable conventions established through visual QA. Every rule here exists because breaking it produced a visible bug. ### 1. ASCII-only in all text content Smartypants-style post-processors (Astro, MDX, many static-site pipelines) silently convert `'` → `'`, `"` → `"`, `...` → `…`. Those characters then get mis-encoded as `’`, `“`, `…` by browsers that don't declare UTF-8 cleanly. Avoid the whole class of problem: - Use `'` (straight apostrophe), never `'`. - Use `"` (straight double quote), never `"` `"`. - Use `...` (three dots), never `…`. - Use `-` (hyphen), never `–` `—`. - Use `|` or `,` or `+` for decorative separators, never `·`, never `↔`, never `→` inside text labels. If the host framework does smartypants at build time, disable it (e.g. Astro: `markdown: { smartypants: false }`). ### 2. Arrows: line + polygon, NOT SVG `<marker>` `<marker>` with `refX`, scaling, and various `markerUnits` modes is a perpetual source of alignment bugs: the line stroke consistently renders a pixel or two past the arrowhead tip due to `r