Percentage Ring Count

<!-- Percentage Ring Count
     Modern engines animate the number via @property + counter();
     other browsers keep the static "86%" text as a graceful fallback. -->
<div class="nuda-sc2-ringcount" role="img" aria-label="Battery health 86 percent">
  <svg viewBox="0 0 80 80" aria-hidden="true">
    <circle cx="40" cy="40" r="34" fill="none" stroke="rgba(255,255,255,.06)" stroke-width="6" />
    <circle class="nuda-sc2-ringcount__arc" cx="40" cy="40" r="34" fill="none"
            stroke="#e4ff54" stroke-width="6" stroke-linecap="round" />
  </svg>
  <span class="nuda-sc2-ringcount__num">86%</span>
</div>

.nuda-sc2-ringcount {
  position: relative;
  width: 88px;
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nuda-sc2-ringcount svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  filter: drop-shadow(0 0 8px rgba(228,255,84,.25));
}

.nuda-sc2-ringcount__arc {
  stroke-dasharray: 213;
  stroke-dashoffset: 213;
  animation: _nuda-sc2ringcount-arc 1.6s cubic-bezier(.4,0,.2,1) forwards;
}

.nuda-sc2-ringcount__num {
  position: relative;
  font: 800 20px ui-sans-serif,system-ui;
  color: #fafafa;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

@keyframes _nuda-sc2ringcount-arc {
  to {
    stroke-dashoffset: 30;
  }
}

@supports (background:paint(1)) {
  @property --nuda-sc2-ringcount-n {
    syntax: '<integer>';
    inherits: true;
    initial-value: 0;
  }
  .nuda-sc2-ringcount__num {
    color: transparent;
    font-size: 0;
  }
  .nuda-sc2-ringcount__num::before {
    content: counter(nuda-sc2-ringcount-c) "%";
    counter-reset: nuda-sc2-ringcount-c var(--nuda-sc2-ringcount-n);
    display: block;
    font: 800 20px ui-sans-serif,system-ui;
    color: #fafafa;
    animation: _nuda-sc2ringcount-count 1.6s steps(86,end) forwards;
  }
  @keyframes _nuda-sc2ringcount-count {
    to {
      --nuda-sc2-ringcount-n: 86;
    }
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-sc2-ringcount__arc {
    animation: none !important;
    stroke-dashoffset: 30;
  }
  .nuda-sc2-ringcount__num::before {
    animation: none !important;
    --nuda-sc2-ringcount-n: 86;
  }
}