.sdc-wrap { display: flex; flex-direction: column; align-items: center; gap: 24px; width: 100%; }
.sdc-chart { position: relative; width: 256px; max-width: 100%; aspect-ratio: 1 / 1; }
.sdc-chart svg { width: 100%; height: 100%; transform: rotate(-90deg); display: block; }
.sdc-track { stroke: rgba(0, 0, 0, 0.06); }
.sdc-seg { transition: stroke-width .2s ease; }
.sdc-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: none; }
.sdc-center-value { line-height: 1; }
.sdc-center-label { margin-top: 4px; text-transform: uppercase; letter-spacing: .1em; }
.sdc-legend { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 10px; }
.sdc-legend-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px; border-radius: 4px; }
.sdc-legend-key { display: flex; align-items: center; gap: 8px; }
.sdc-swatch { width: 14px; height: 14px; border-radius: 4px; flex-shrink: 0; }