feat(live): tune popover, theme-aware bar/picker, action icons, params system

Adds a coarse-controls ("Tune") popover that slides out from behind the
contextual bar via clip-path, showing 2-4 per-variant knobs (range / steps /
toggle) driven by a `data-impeccable-params` manifest. Range/toggle drive
CSS custom properties on the variant wrapper; steps toggle a data
attribute. Values reset per variant; on accept, current values are passed
through live-poll to live-accept as an `impeccable-param-values` comment
for the carbonize cleanup step to bake in.

Other live-UI work in this change:
- Theme-aware palette (barPaletteForTheme) now drives the contextual bar,
  action picker, and tune popover. Dark sand on light pages, paper on
  dark. Detection has a localStorage dev override for QA.
- Action picker chips get inline SVG icons (wand / bars / funnel / sparkle /
  type ramp / circles / grid / devices / curve / star / bolt) stacked
  above the label; selection state recolors via currentColor.
- Accept button switched to saturated site magenta with paper text.
- Cycle dots reworked: solid accent for active, neutral for arrived,
  hairline ring for pending. No more magenta-on-gray noise.
- Tune chip sits in the cycling row with a count pill badge; open state
  uses accentSoft bg + accent text (no ad-hoc white border).
- Popover uses the bar's palette with a deeper surface (surfaceDeep),
  lives behind the bar via z-index so a 6px overlap reads as tucked under
  it, and animates with clip-path inset() for reliable slide behavior.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

scripts/build-sub-pages.js

@@ -262,7 +262,7 @@ function renderSkillsOverviewMain(skillsByCategory, allSkills) {
     const tagline = skill.editorial?.frontmatter?.tagline || skill.description;
     const shortTagline = tagline.length > 140 ? tagline.slice(0, 137) + '...' : tagline;
     const rel = COMMAND_RELATIONSHIPS[skill.id] || {};
-    const isBeta = skill.id === 'overdrive';
+    const isBeta = skill.id === 'live';
 
     let metaHtml = '';
     if (rel.pairs) {
@@ -333,7 +333,13 @@ ${rowsHtml}
       <li>
         <a href="/docs/teach">
           <span class="docs-home-mode-label"><span class="docs-home-mode-slash">/</span>impeccable teach</span>
-          <span class="docs-home-mode-hint">One-time project setup. Runs automatically on first use.</span>
+          <span class="docs-home-mode-hint">One-time project setup. Writes PRODUCT.md, offers DESIGN.md next.</span>
+        </a>
+      </li>
+      <li>
+        <a href="/docs/document">
+          <span class="docs-home-mode-label"><span class="docs-home-mode-slash">/</span>impeccable document</span>
+          <span class="docs-home-mode-hint">Generate a spec-compliant DESIGN.md that captures your visual system.</span>
         </a>
       </li>
       <li>
@@ -343,9 +349,9 @@ ${rowsHtml}
         </a>
       </li>
       <li>
-        <a href="/docs/extract">
-          <span class="docs-home-mode-label"><span class="docs-home-mode-slash">/</span>impeccable extract</span>
-          <span class="docs-home-mode-hint">Pull reusable components and tokens into the design system.</span>
+        <a href="/docs/live">
+          <span class="docs-home-mode-label"><span class="docs-home-mode-slash">/</span>impeccable live</span>
+          <span class="docs-home-mode-hint">Pick an element, get three variants, accept one. Writes back to source.</span>
         </a>
       </li>
     </ul>
@@ -641,7 +647,7 @@ ${rules.map(renderRuleCard).join('\n')}
   <header class="anti-patterns-header">
     <p class="sub-page-eyebrow">${totalRules} rules</p>
     <h1 class="sub-page-title">Anti-patterns</h1>
-    <p class="sub-page-lede">The full catalog of patterns <a href="/docs/impeccable">/impeccable</a> teaches against. ${detectedCount} are caught by a deterministic detector (<code>npx impeccable detect</code> or the browser extension). ${llmCount} can only be flagged by <a href="/docs/critique">/impeccable critique</a>'s LLM review pass. Want to see them live on real pages? Try <a href="/visual-mode">Visual Mode</a>.</p>
+    <p class="sub-page-lede">The full catalog of patterns <a href="/docs/impeccable">/impeccable</a> teaches against. ${detectedCount} are caught by a deterministic detector (<code>npx impeccable detect</code> or the browser extension). ${llmCount} can only be flagged by <a href="/docs/critique">/impeccable critique</a>'s LLM review pass. Want to see them live on real pages? Try <a href="/visual-mode">Visual Mode</a>, or iterate past them on your own dev server with <a href="/docs/live">Live Mode</a>.</p>
   </header>
 
   <details class="anti-patterns-legend">