Replace the repeated "Why?" links with a small i marker

[MyNamesEMurray]

Summary

Reading "Why?" once is fine. Reading it two dozen times down a settings tab is a page shouting a question nobody asked. The disclosure is now a small circular i at the right edge of the setting row, level with the label it explains, filling with accent when open.

This is the follow-up to #29, which merged before this commit was pushed.

Changes

• .why > summary is now a 17px circular marker (scaling with the font-size setting) instead of a text link. Inside a .setting it is absolutely positioned at the row's right edge, level with its label; outside one — the wizard, which has no settings rows — it stays in flow under its control.
• Done entirely in theme.css, so no page needed new markup and no data-path or config binding was touched.
• The summary keeps its question ("Why?", "What does this cost me?", "How do I set it up?") as real text, hidden visually with font-size: 0 rather than removed, so a screen reader still announces the question rather than the letter i.
• summary was missing from the :focus-visible selector list, so the marker had no keyboard focus ring at all. It has the standard 2px accent ring now, like every other interactive element.
• DESIGN.md's component list describes the marker, since theme.css is where pages inherit it from.

Verification

• npm test 161 pass / 0 fail (1 pre-existing Windows-only SAPI skip); npm run smoke → SMOKE OK.
• Collision check across every settings tab in Advanced (where the markers are densest), at 1200×900, 900×900, and 900×900 at the 1.25 font scale: each marker was scrolled into view and hit-tested with elementFromPoint — clean at all three, no marker overlaps anything.
• Verified the accessible text survives: the summary still returns "Why?" / "Which should I pick?" to the DOM, and the hit target measures 18×18.
• Verified the focus ring computes to 2px solid on the marker.
• Screenshotted closed and open states on the Voice tab and the wizard's brain step; no console errors beyond the known /favicon.ico 404.

Risk & rollout

• Presentation only, and only theme.css plus a DESIGN.md line. No page markup, no server change, no config keys, nothing to migrate.
• The one thing worth a look: the in-.setting marker is absolutely positioned, so it relies on the row's top-right being free. That is why the collision check above ran at three sizes across every tab rather than eyeballing one.
• Nothing here touches the AI badge, the "simulated viewers" watermark, the API-key handling, or any Twitch access.

Checklist

• npm run smoke passes locally (or CI is green)
• Follows the design language in DESIGN.md (if UI changed)
• AI-labeling / "simulated viewers" guarantees intact (if bot output or overlay changed)
• Docs updated (README / config reference) if behavior or config changed
• Targets main

🤖 Generated with Claude Code

https://claude.ai/code/session_01LWa54BF5RjHWC5GFaENZMM

---

Generated by Claude Code