CSS‑Only Accordion

Accessible, animated, dark‑mode aware—no JavaScript.

What makes this accordion special?

CSS‑only: native <details>/<summary>.
Smooth height animation via the grid-rows trick.
Keyboard & A11y: focus ring, enter/space toggle, screenreader friendly.
Dark‑mode aware with prefers-color-scheme.

Can I keep only one panel open?

Yes—use a radio‑input variant to force single-open behavior. This file sticks to native <details> for simplicity and accessibility.

How do I theme it?

Edit CSS variables at the top: --acc-brand, --acc-radius, shadows, borders, and paddings. Swap the header background hover by changing --acc-bg-soft.

Production tips

Use semantic headings inside .acc__inner if content is long.
Place accordions in a <section role="list"> for grouped semantics.
Respect motion settings: already handled with prefers-reduced-motion.