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>

content/site/tutorials/getting-started.md

@@ -7,7 +7,7 @@ description: "Install Impeccable, run /impeccable teach once to establish projec
 
 ## What you'll build
 
-You will end this tutorial with Impeccable installed in your project, a `PRODUCT.md` file that captures your brand and audience, and one hand-polished page that went through a polish pass. Total time: about five minutes.
+You will end this tutorial with Impeccable installed in your project, a `PRODUCT.md` plus `DESIGN.md` pair that captures your brand, audience, and visual system, and one hand-polished page that went through a polish pass. Total time: about ten minutes.
 
 ## Prerequisites
 
@@ -16,7 +16,7 @@ You will end this tutorial with Impeccable installed in your project, a `PRODUCT
 
 ## How Impeccable works
 
-Impeccable installs as a single agent skill called `impeccable`. You access all 20 design commands through it:
+Impeccable installs as a single agent skill called `impeccable`. You access all 23 sub-commands through it:
 
 ```
 /impeccable <command> <target>
@@ -24,7 +24,7 @@ Impeccable installs as a single agent skill called `impeccable`. You access all
 
 For example: `/impeccable polish the pricing page`, or `/impeccable audit the checkout`. Type `/impeccable` alone to see the full list.
 
-If you use a command often, pin it with `/impeccable pin <command>` to create a standalone shortcut (e.g., `/impeccable pin audit` gives you `/audit` directly).
+If you use a command often, pin it with `/impeccable pin <command>` to create a standalone shortcut (for example, `/impeccable pin audit` gives you `/audit` directly).
 
 ## Step 1. Install
 
@@ -46,18 +46,27 @@ Run:
 /impeccable teach
 ```
 
-The skill will ask you a handful of questions:
+The first question is about **register**: is this a brand surface (marketing site, landing page, portfolio, where design IS the product) or a product surface (app UI, dashboard, tools, where design SERVES the product)? Register shapes every downstream default, from type lanes to motion energy. See [brand vs product](/tutorials/brand-vs-product) for how the two diverge. Teach will form a hypothesis from your codebase and ask you to confirm, rather than starting cold.
+
+Then a handful of shorter questions:
 
 - **Who is this product for?** Be specific. Not "users" but "solo founders evaluating a new tool on their phone between meetings".
 - **What is the brand voice in three words?** Pick real words. "Warm and mechanical and opinionated" is better than "modern and clean".
-- **What should the interface feel like?** Concrete adjectives. "Calm, trustworthy, fast" or "playful, bold, a little chaotic".
-- **Any visual references?** Screenshots, sites, design systems you admire.
-- **Anti-references?** Things the product should explicitly not look like.
+- **Any visual references?** Named brands, products, or printed objects, not adjectives. "Klim Type Foundry specimen pages", not "technical and clean".
+- **Anti-references?** Things the product should explicitly not look like, equally named.
 
-Answer in your own words. The skill writes a `PRODUCT.md` file with the answers. Every future command run reads it automatically.
+Answer in your own words. The skill writes `PRODUCT.md` with the answers. Every future command run reads it automatically.
 
 Open `PRODUCT.md` and read what it wrote. Edit anything that does not feel right. The file is yours.
 
+## Step 2.5. Capture the visual system
+
+At the end of `/impeccable teach`, the skill offers to run `/impeccable document` for you. Say yes. It scans your tokens (CSS custom properties, Tailwind config, CSS-in-JS themes), extracts colors and typography, asks one grouped question for the parts that need creative input (a Creative North Star, descriptive color names), and writes a `DESIGN.md` that follows the [Google Stitch DESIGN.md format](https://stitch.withgoogle.com/docs/design-md/format/).
+
+On a fresh project with no tokens yet, document runs in seed mode: five quick questions about color strategy, type direction, and motion energy, and writes a scaffold you can refresh once there is code.
+
+`PRODUCT.md` carries strategy (who, what, why). `DESIGN.md` carries visuals (colors, typography, components). Every command reads both before generating.
+
 ## Step 3. Polish something
 
 Pick a page that already exists. An about page, a settings screen, a pricing table, anything. Run:
@@ -83,9 +92,11 @@ Review the diff. If something does not feel right, ask the model to explain the
 
 ## What to try next
 
+- [Iterate visually with Live Mode](/tutorials/iterate-live) opens a browser picker on your dev server, generates three production-quality variants per element, and writes the accepted one back to source.
 - `/impeccable critique the landing page` runs a full design review with scoring, persona tests, and automated detection. It is the best way to find what to fix next.
 - `/impeccable audit the checkout` runs accessibility, performance, theming, responsive, and anti-pattern checks against the implementation. Useful before shipping.
 - `/impeccable craft a pricing page for enterprise customers` runs the full shape-then-build flow on a brand new feature.
+- **Pin your favorites.** If you reach for one command constantly, `/impeccable pin audit` makes `/audit` work as a standalone shortcut without reversing the consolidation.
 - `/impeccable redo this hero section` works too. Any description after `/impeccable` applies the design principles to the task.
 
 ## Common issues