.finance-chart-help{font-size:14px;color:#606c63;margin-bottom:24px}
.finance-doughnut .composition{display:grid;grid-template-columns:1fr 1fr;gap:55px;align-items:center}
.finance-doughnut .legend{grid-column:1;grid-row:1;min-width:0}
.finance-doughnut .chart-wrap{grid-column:2;grid-row:1;position:relative;width:100%;max-width:470px;margin:auto}
.finance-doughnut svg{display:block;width:100%;height:auto;overflow:visible}
.finance-doughnut path[data-index]{filter:url(#pillar-grain);stroke:#fff;stroke-width:2;cursor:pointer;transition:opacity .2s}
.finance-doughnut path.dim{opacity:.25}
.finance-doughnut path:focus-visible{stroke:#202b25;stroke-width:4;outline:none}
.finance-doughnut .hole{fill:white}
.finance-doughnut .centre{position:absolute;inset:32% 20%;display:flex;justify-content:center;align-items:center;flex-direction:column;text-align:center;pointer-events:none}
.finance-doughnut .centre span{font-size:12px;letter-spacing:1px;text-transform:uppercase;color:#66736a}
.finance-doughnut .centre strong{font-size:38px;letter-spacing:-1px;margin:6px 0;line-height:1.2;color:#202b25}
.finance-doughnut .centre small{font-size:12px;color:#606c63}
.finance-doughnut .legend-item{border:0;border-bottom:1px solid #dfe6df;background:transparent;color:#202b25;font:inherit;display:flex;align-items:center;gap:14px;width:100%;padding:18px 16px;text-align:left;cursor:pointer;border-radius:10px;transition:background .2s,box-shadow .2s}
.finance-doughnut .legend-item:hover{background:#f4f7f2}
.finance-doughnut .legend-item:focus-visible{outline:3px solid #F36B23;outline-offset:3px}
.finance-doughnut .legend-item.is-active{background:color-mix(in srgb,var(--accent) 10%,white);box-shadow:inset 4px 0 var(--accent)}
.finance-doughnut .legend-item.is-active .label{font-weight:600}
.finance-doughnut .swatch{width:12px;height:12px;border-radius:50%;flex-shrink:0}
.finance-doughnut .label{font-size:20px;flex:1}
.finance-doughnut .label small{display:block;font-size:14px;color:#66736a;margin-top:5px}
.finance-doughnut .legend-item strong{font-size:20px;font-weight:600}
.finance-doughnut + .note{margin-top:32px}
@media(max-width:760px){.finance-doughnut .composition{grid-template-columns:1fr;gap:16px}.finance-doughnut .chart-wrap{grid-column:1;grid-row:1;max-width:360px}.finance-doughnut .legend{grid-column:1;grid-row:2}.finance-doughnut .centre strong{font-size:30px}.finance-doughnut .label,.finance-doughnut .legend-item strong{font-size:17px}.finance-doughnut .legend-item{padding:16px 12px}}
@media(prefers-reduced-motion:reduce){.finance-doughnut path[data-index],.finance-doughnut .legend-item{transition:none}}