.od-chart {
  width: 100%; height: 100%; background: #eef1f4; box-sizing: border-box;
  padding: 20px; font: 14px/1.4 sans-serif; display: flex; flex-direction: column;
  align-items: center; text-align: center;
}
.od-chart .od-title { margin: 0 0 12px; font-size: 20px; font-weight: 500; color: #333; }
.od-chart .od-stage { position: relative; width: 260px; height: 260px; }
.od-chart .od-svg { width: 100%; height: 100%; display: block; }
.od-chart .od-center {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; pointer-events: none;
}
.od-chart .od-center-value { font-size: 34px; font-weight: 700; color: #16324f; font-variant-numeric: tabular-nums; }
.od-chart .od-center-label { font-size: 12px; color: #999; text-transform: uppercase; letter-spacing: 0.04em; }
.od-chart .od-takeaway { margin: 16px 0 8px; font-size: 15px; color: #16324f; font-weight: 600; }
.od-chart .od-legend { display: flex; gap: 16px; }
.od-chart .od-legend-item { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #444; }
.od-chart .od-legend-swatch { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }