.rsc-chart {
  --rsc-bg: #0f172a;
  --rsc-border: #334155;
  --rsc-text: #f8fafc;
  --rsc-muted: #7f9abc;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(260px, 38%) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2.25rem, 5vw, 5rem);
  width: 100%;
  padding: clamp(2rem, 4vw, 3.5rem);
  color: var(--rsc-text);
  background: var(--rsc-bg);
  border: 1px solid var(--rsc-border);
  border-radius: 20px;
}

.rsc-chart * { box-sizing: border-box; }

.rsc-visual {
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, 280px);
  margin-inline: auto;
  aspect-ratio: 1;
}

.rsc-donut {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform: rotate(-90deg);
}

.rsc-track,
.rsc-slice {
  fill: none;
  stroke-width: 31;
}

.rsc-track { stroke: #1e293b; }

.rsc-slice {
  cursor: help;
  transform-origin: 100px 100px;
  transition: filter 160ms ease, stroke-width 160ms ease;
}

.rsc-slice:hover,
.rsc-slice:focus-visible {
  filter: brightness(1.18);
  outline: none;
  stroke-width: 36;
}

.rsc-total {
  position: absolute;
  inset: 50% auto auto 50%;
  display: grid;
  justify-items: center;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.rsc-total strong {
  color: #fff;
  font-size: clamp(2rem, 4vw, 2.7rem);
  line-height: 1;
}

.rsc-total span {
  margin-top: .55rem;
  color: #9db7d8;
  font-size: .77rem;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.rsc-tooltip {
  position: absolute;
  z-index: 3;
  min-width: max-content;
  padding: .5rem .7rem;
  color: #fff;
  background: #020617;
  border: 1px solid #475569;
  border-radius: 7px;
  box-shadow: 0 10px 25px rgb(0 0 0 / 35%);
  font-size: .8rem;
  line-height: 1.25;
  pointer-events: none;
  transform: translate(-50%, calc(-100% - 12px));
}

.rsc-heading {
  margin: 0 0 1.1rem!important;
  color: #8faed1;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .17em;
  line-height: 1.4;
  text-transform: uppercase;
}

.rsc-heading b { color: #35e77c; font: inherit; }

.rsc-legend {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(4, auto);
  grid-auto-flow: column;
  column-gap: clamp(2rem, 5vw, 4rem);
  row-gap: .8rem;
  margin: 0;
  padding: 0 0 1.5rem;
  list-style: none;
  border-bottom: 1px solid #26354b;
}
ul.rsc-legend {padding-left:0;}
.rsc-legend li {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  align-items: center;
  gap: .7rem;
  margin: 0 ;
}

.rsc-key {
  width: 12px;
  height: 12px;
  background: var(--rsc-color);
  border-radius: 3px;
}

.rsc-term { color: #f1f5f9; }
.rsc-count { color: var(--rsc-muted); font-variant-numeric: tabular-nums; }

.rsc-description {
  margin-top: 1.35rem;
  color: #8eacd0;
  font-size: .9rem;
  line-height: 1.65;
}

.rsc-description > :first-child { margin-top: 0; }
.rsc-description > :last-child { margin-bottom: 0; }

@media (max-width: 780px) {
  .rsc-chart {
    grid-template-columns: 1fr;
  }

  .rsc-visual { width: min(78vw, 270px); }
}

@media (max-width: 480px) {
  .rsc-chart { padding: 1.5rem; border-radius: 16px; }
  .rsc-legend {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-flow: row;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rsc-slice { transition: none; }
}