feat: add CSS Specificity Visualizer tool

Summary

Add a css-specificity.html tool that parses CSS selectors and visualizes their specificity as stacked bar charts — making the cascade immediately understandable rather than something developers debug by accident.

Motivation

CSS specificity is one of the most misunderstood concepts in front-end development, and with the rise of CSS Layers, :is(), :where(), :has(), and container queries, it's more relevant than ever. No clean standalone tool exists for this — developers currently rely on mental math or obscure spec tables. "CSS specificity calculator" has steady search volume and this tool is genuinely educational.

Proposed UX

• Input: one selector per line (textarea); supports up to 20 selectors
• Results table (updates live):
  • Selector text
  • Stacked bar: [IDs] [Classes/Attributes/Pseudo-classes] [Elements/Pseudo-elements] — colored segments, each segment's count shown as a number inside
  • Specificity tuple: (1, 2, 3) notation
  • Numeric weight for easy ranking (IDs × 100 + Classes × 10 + Elements × 1)
  • Rank badge (#1 = wins, highlighted)
• Conflict explainer: paste two selectors targeting the same element → see which wins, which loses, and why in plain English ("Selector A wins because it has 1 more ID selector")
• Cheat sheet (collapsible): reference card of what counts toward each column (inline style, !important, IDs, classes, attributes, pseudo-classes, elements, pseudo-elements, :is()/:not()/:has() specificity rules)
• Special rules highlighted: :where() (always 0,0,0), !important warning, * universal selector (0,0,0)

Implementation notes

• Category: Code
• Slug: css-specificity
• Icon: 🎯
• No npm dependencies — specificity parsing is a ~120-line regex-based state machine walking the selector string: count #id → IDs, .class/[attr]/:pseudo-class → Classes, tag/::pseudo-element → Elements; handle :is()/:not()/:has() by recursing on the argument list
• All logic inline in <script>
• Follow src/_tool-template.html and run bun run generate:sections, bun run generate:index, bun run generate:favicon after adding to tools.json

Start by reading src/_tool-template.html and the existing tool registration in tools.json to understand the expected single-file structure and metadata. Add css-specificity.html with the listed input, visualization, conflict explainer, and cheat sheet behavior, then run bun run generate:sections, bun run generate:index, and bun run generate:favicon to verify integration.