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.

Blinker hotspot (signature look)

Chấm tròn ~12px màu brand + vòng ripple animate-ping lan ra, đặt tại tâm element cần click. Transparency vòng ngoài ~25–30%.

<span className="absolute flex h-3 w-3" style={{ top: cy, left: cx }}>
  <span className="absolute inline-flex h-full w-full animate-ping rounded-full opacity-30"
    style={{ background: "var(--tour-brand)" }} />
  <span className="relative inline-flex h-3 w-3 rounded-full"
    style={{ background: "var(--tour-brand)" }} />
</span>