Progress Widget

<div class="ws-progress-widget rounded-2xl border p-6 max-w-xs w-full text-center"
     style="
       --ws-progress-widget-bg: oklch(0.99 0.005 75);
       --ws-progress-widget-text: oklch(0.25 0.02 75);
       --ws-progress-widget-text-soft: oklch(0.40 0.015 75);
       --ws-progress-widget-text-muted: oklch(0.55 0.01 75);
       --ws-progress-widget-border: oklch(0.90 0.01 75);
       --ws-progress-widget-accent: oklch(0.55 0.15 250);
       --ws-progress-widget-accent-soft: oklch(0.92 0.04 250);
       --ws-progress-widget-track: oklch(0.93 0.01 75);
       background: var(--ws-progress-widget-bg);
       color: var(--ws-progress-widget-text);
       border-color: var(--ws-progress-widget-border);
     ">

  <!-- Circular Progress Ring -->
  <div class="mx-auto mb-5 relative flex items-center justify-center"
       role="progressbar"
       aria-valuenow="73"
       aria-valuemin="0"
       aria-valuemax="100"
       aria-label="Storage used: 73 percent"
       style="width: 160px; height: 160px;">

    <!-- Conic gradient ring -->
    <div class="absolute inset-0 rounded-full"
         style="background: conic-gradient(var(--ws-progress-widget-accent) 0% 73%, var(--ws-progress-widget-track) 73% 100%);"></div>

    <!-- Inner mask circle -->
    <div class="absolute rounded-full"
         style="
           inset: 14px;
           background: var(--ws-progress-widget-bg);
         "></div>

    <!-- Percentage text -->
    <span class="relative text-4xl font-bold tabular-nums tracking-tight"
          style="color: var(--ws-progress-widget-text);">73%</span>
  </div>

  <p class="text-sm font-semibold tracking-tight"
     style="color: var(--ws-progress-widget-text);">Storage Used</p>
  <p class="mt-1 text-xs"
     style="color: var(--ws-progress-widget-text-muted);">14.6 GB of 20 GB</p>

</div>