Accordion
Collapses welded into one surface, native <details> underneath. The signal dot marks the open panel.
Why tokens before templates?
Because a template argues about one page; a token settles it for every page at once.
Why only one accent colour?
The dot means live. Two accents and neither means anything.
Why native details?
Keyboard, screen readers and find-in-page all work before any JS loads.
.acc > .collapse — dot on the open panel, hairlines between
Exclusive group — one open
These share
name="acc-x", so opening one closes the rest. Platform feature, zero JS.Second panel
Opens alone.
Third panel
Also alone.
exclusive accordion — <details name="…">