[data-tone=dark]{--donut-strong:var(--color-on-dark);--donut-body:var(--color-on-dark-body);--donut-muted:var(--color-on-dark-muted)}figure.donut [data-fill=mark]{--donut-fill:var(--mark-emphasis)}figure.donut [data-fill=strong]{--donut-fill:var(--fill-strong)}figure.donut [data-fill=alt-strong]{--donut-fill:var(--fill-alt-strong)}figure.donut [data-fill=quiet]{--donut-fill:var(--fill-quiet);--donut-edge:var(--fill-strong)}figure.donut [data-fill=alt]{--donut-fill:var(--fill-alt);--donut-edge:var(--fill-alt-strong)}figure.donut [data-fill=outline]{--donut-fill:transparent;--donut-edge:var(--edge-control)}figure.donut{gap:var(--space-4);flex-wrap:wrap;align-items:center;min-width:0;margin:0;display:flex}figure.donut>.ring{inline-size:calc(2 * var(--space-8));flex:none;display:grid}figure.donut>.ring>svg,figure.donut>.ring>.centre{grid-area:1/1}figure.donut>.ring>svg{block-size:auto;inline-size:100%;display:block;overflow:visible}figure.donut>.ring>svg>.segment{fill:var(--donut-fill);stroke:var(--donut-edge,none);stroke-width:var(--line-width);vector-effect:non-scaling-stroke}figure.donut>.ring>svg>.track{fill:var(--fill-quiet)}figure.donut>.ring>.centre{text-align:center;overflow-wrap:anywhere;flex-direction:column;place-self:center;align-items:center;max-inline-size:60%;margin:0;display:flex}figure.donut>.ring>.centre>.figure{color:var(--donut-strong);font-family:var(--font-heading);font-size:var(--text-h3);font-weight:var(--weight-heading);line-height:var(--text-h3-leading);letter-spacing:var(--text-h3-tracking);font-variant-numeric:tabular-nums}figure.donut>.ring>.centre>.caption{color:var(--donut-strong);font-size:var(--text-small);font-weight:var(--weight-emphasis);line-height:var(--text-small-leading)}figure.donut>.side{gap:var(--space-2);min-width:0;font-size:var(--text-small);line-height:var(--text-small-leading);flex-direction:column;flex:1;display:flex}figure.donut>.side>.title{color:var(--donut-strong);font-family:var(--font-heading);font-weight:var(--weight-heading)}figure.donut>.side>.line{color:var(--donut-muted)}figure.donut>.side>.legend{gap:var(--space-1);color:var(--donut-body);flex-direction:column;margin:0;padding:0;list-style:none;display:flex}figure.donut>.side>.legend>li{gap:var(--space-2);overflow-wrap:anywhere;align-items:center;min-width:0;display:flex}figure.donut>.side>.legend>li>.swatch{inline-size:var(--space-3);block-size:var(--space-3);border-radius:var(--radius-xs);background-color:var(--donut-fill);box-shadow:inset 0 0 0 var(--line-width) var(--donut-edge,transparent);flex:none}figure.donut>.side>.legend>li>.value{color:var(--donut-strong);font-weight:var(--weight-emphasis);font-variant-numeric:tabular-nums}figure.donut>.side>.legend>li>.value:before{content:"·" / "";color:var(--donut-muted);font-weight:var(--weight-chrome);margin-inline-end:var(--space-2)}figure.donut>.side>.legend>li>.said{inline-size:var(--line-width);block-size:var(--line-width);clip-path:inset(50%);white-space:nowrap;position:absolute;overflow:hidden}@media (prefers-reduced-motion:no-preference){figure.donut[data-play-once=waiting]>.ring>svg{opacity:0}figure.donut[data-play-once=played]>.ring>svg{animation-name:donut-turn;animation-duration:var(--dur-800);animation-timing-function:var(--ease);animation-fill-mode:backwards}}@keyframes donut-turn{0%{opacity:0;transform:rotate(-90deg)scale(.85)}}