Radial Gauge

<!-- Radial Gauge -->
<div class="nuda-gauge" role="img" aria-label="Gauge, 65 of 100">
  <svg viewBox="0 0 100 60">
    <path d="M10 55 A 40 40 0 0 1 90 55"
          stroke="rgba(255,255,255,.08)" stroke-width="6"
          fill="none" stroke-linecap="round" />
    <path class="nuda-gauge__arc" d="M10 55 A 40 40 0 0 1 90 55"
          stroke="#e4ff54" stroke-width="6"
          fill="none" stroke-linecap="round" />
  </svg>
  <span class="nuda-gauge__value">65</span>
  <span class="nuda-gauge__label">/ 100</span>
</div>

/* Radial Gauge
   Half-circle gauge filling to a percentage.
   Customize: --gauge-color, --gauge-track, --gauge-size */

.nuda-gauge {
  --gauge-color: #e4ff54;
  --gauge-track: rgba(255, 255, 255, 0.08);
  --gauge-size: 120px;
  position: relative;
  width: var(--gauge-size);
  height: calc(var(--gauge-size) * 0.7);
}

.nuda-gauge svg {
  width: 100%;
  height: 75%;
  filter: drop-shadow(0 0 6px rgba(228, 255, 84, 0.2));
}

.nuda-gauge__arc {
  stroke-dasharray: 126;
  stroke-dashoffset: 126;
  animation: nuda-gauge-fill 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.nuda-gauge__value {
  position: absolute;
  left: 0;
  right: 0;
  top: 38%;
  text-align: center;
  font: 700 1.5rem ui-sans-serif, system-ui, sans-serif;
  color: #fafafa;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.nuda-gauge__label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  text-align: center;
  font: 500 0.625rem ui-sans-serif, system-ui, sans-serif;
  color: #a1a1aa;
  letter-spacing: 0.05em;
}

/* 126 ≈ π × 40. For 65%: 126 × 0.35 ≈ 44 */
@keyframes nuda-gauge-fill {
  0%        { stroke-dashoffset: 126; }
  40%, 75%  { stroke-dashoffset: 44; }
  100%      { stroke-dashoffset: 126; }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-gauge__arc { stroke-dashoffset: 44; animation: none; }
}