toutourlisted

# Toutour — generate a verified spotlight onboarding tour You are adding a step-by-step guided tour (dark mask + spotlight + tooltip) to the user's website. Follow all five phases in order. Do not skip the interview and do not skip verification — an unverified tour that covers its own target is worse than no tour. ## Phase 1 — Analyze the site (before proposing anything) Read the code and, if a browser tool (Playwright/Chromium) is available, load the real page. Build an inventory: 1. **Stack & render model**: static HTML / SPA framework / SSR+hydration. For SPAs note route changes and lazy-mounted components — targets may not exist at tour-start time; steps need `waitFor` logic or route navigation hooks. 2. **Layout regions**: header/nav, panels, canvas/content area, footer. Note `position: sticky/fixed` elements and every explicit `z-index` in the codebase (you must render above ALL of them — pick tour z-indexes above the max found, and record the max in a comment). 3. **Tab systems & disclosure**: every tab bar, accordion, drawer, modal. Record: the trigger element selector, the panel shown, and HOW switching works (click handler? URL hash? framework state?). The tour must programmatically reveal a target's container before spotlighting it — prefer dispatching a real `click()` on the existing trigger over re-implementing state changes. 4. **Interactive controls per region**: buttons, sliders, checkboxes, selects, color pickers, canvases. For each: selector, what it doe