system-maplisted

# HTML Widget One system map on one screen: sources on the left, a glowing core in the middle, deliverables on the right, and a machinery box underneath. Hovering a node lights up its connection, dims the rest, and explains it in a tooltip card. Built for a projector. One fixed 16:9 coordinate space that scales with pure CSS, so it looks the same at 1280×800 and 1920×1080. No build, no server, no external calls — a double-clickable file. ## ⛔ Only permitted workflow **Never write the widget from scratch.** Always start from whichever of the four files in `references/examples/` is closest to your content — they are finished, debugged starting points: the curve geometry, tooltip placement, idle cycle, and scaling are all fixed through actual testing in a browser. From scratch, you lose all of that, and every entry in Pitfalls comes back. 1. Ask the user which of the four examples is the closest match for their content (or pick for them if it's obvious from context), and read that file into context. 2. Ask which color direction they want — see `references/palette.md` for the four options. Default to Neutral if they have no preference. 3. Ask whether they want a second language. Default is English only, with no language-switching machinery at all. If they want a second language, see "Adding a second language" below. 4. Clarify the content with the user (see Content model). 5. Run `scripts/layout.py <left-count> <right-count>` if the number of nodes changes.