tour-guide-supademo — Tour style kiểu Supademo

Distill từ player Supademo (supademo.com, 2026-06). Docs họ không công bố hex/px chính xác — đây là design language quy ra recipe dùng được ngay. Component nền lấy từ skill tour-guide; skill này là lớp style đè lên.

Nguyên tắc: brand color là 1 token duy nhất (--tour-brand), mọi thứ ăn theo.

WHAT

Purpose và context

• Purpose: phủ lớp style kiểu Supademo (blinker hotspot, tooltip card, control bar, progress/timer bar, transition, theme tokens) lên component tour của skill tour-guide, dưới dạng recipe Tailwind/CSS copy dùng ngay, ăn theo một token brand duy nhất.
• Trigger (when to use): "/tour-guide-supademo", "tour kiểu Supademo", "style supademo", "blinker hotspot"; khi đã/ sẽ dùng component tour-guide và muốn giao diện kiểu Supademo.
• Non-goals: không chứa UX mechanic (đo/cuộn/step, branching, cơ chế timer — thuộc skill tour-guide); không hardcode hex brand gốc của Supademo; style của sản phẩm khác là skill riêng tour-guide-<tên>.

Mental model

--tour-brand (1 token) → blinker · tooltip card · control bar · progress bar · autoplay timer bar · transition · backdrop per-spot → map sang TOUR_THEME của tour-guide. Skill này = lớp style; tour-guide = component nền + cơ chế.