Toutour — Verified Onboarding Tours for Any Website

Use toutour to add an onboarding tour to my dashboard app. First-time users can't find the export feature. The site is plain HTML + vanilla JS in ./src, bilingual zh/en with a dark mode toggle, and has three tabs (Design / Data / Export). I want it to auto-show on first visit.

Phase 1 — Analysis: found 3 tab panels (click-driven, .tab-btn[data-tab]), 14 interactive controls grouped into 6 cards; 2 conditional rows; dark mode via CSS variables; i18n via .zh/.en spans; max z-index on site: 100.

Phase 2 — Interview: you chose: two-tier (8-step main tour + per-tab "?" mini-tours), mask ON, accent ring ON, zh+en, follow site dark mode, auto-show first visit + persistent "?" button.

Phase 3 — Library: site has zero deps → bundled MIT engine (no AGPL risk).

Phase 4 — Implemented: engine + styles vendored, 8-step map with tab auto-navigation, bare checkboxes widened to labels, localStorage key app_tour_seen, tour_step funnel events wired to your existing gtag().

Phase 5 — Verified (Playwright, 1280×800 + 390×844): 41/41 assertions passed — every spotlight intersects its target, tooltip never overlaps the lit area, Esc/arrows work, reduced-motion clean, zero console errors. Screenshots attached. One fix applied during verification: the Export tab "?" was covered by your sticky footer (z-index raised to 110).