1. Default — section accent markers, theme card tooltip
Pulsing markers should use the section accent color; click one — the tooltip surface should follow the theme card variant 1 colors and its text should inherit that surface color.
Feature one
Top-left hotspot. Tooltip opens below-right.
Feature two
Center hotspot with a longer description to confirm the tooltip width preset (Medium) wraps text cleanly inside the popover.
Feature three
Right-side hotspot. Tooltip opens to the left.
2. Dark section — heading + markers track the dark palette
On the dark section the heading and this intro should use the dark-section text color, and the markers should use the dark-section accent color.
Dark — feature one
Marker color comes from the dark-section accent.
Dark — feature two
Tooltip surface stays the theme card surface, readable on either background.
3. Custom — ring markers, custom tooltip colors, 16:9, contained
Markers should be rings in dark red; the tooltip should have a dark background with light text; the image is forced to 16:9 and the module is contained to a narrower width.
Custom — feature one
Ring marker, custom color #B30000.
Custom — feature two
Tooltip background #1a2433 with light text.
4. Animation — module slides up on scroll, numbered markers
Scroll into view: the whole module should slide up once with the theme animation duration and easing. Without JavaScript the module simply stays visible; reduced motion is respected.
Step one
Numbered marker 1.
Step two
Numbered marker 2.
Step three
Numbered marker 3.
