Sunburst chart

Nested data, one ring per level: if both rings count out of the same total, each part lines up with its category on its own.

Hover or Tab through the rings: a category lights up its parts.

How it's built

Two rings, two levels: orbit-6 for categories and orbit-10 for their parts. --o-size-ratio: 3.6 on the .gravity-spot makes each band 3.6 lanes thick; the rings are four lanes apart, which leaves a thin line between levels.
Every <o-arc> gets its share of the whole week as value. Arcs with values stack in DOM order, so when the parts are listed in the same order as their categories, each one lands inside its parent with no angles to compute.
The names are the arcs' own text. flip turns the text of arcs on the lower half so it reads the right way up, and --o-color sets its color.
Each part is a shade of its category made with color-mix(), so a branch reads as one without a legend.
interactive and tabindex make every slice hoverable and focusable; the center tells you what you are on.