Comparison Bar

<!-- Comparison Bar -->
<div class="nuda-compare">
  <div class="nuda-compare__row">
    <span class="nuda-compare__label">This week</span>
    <div class="nuda-compare__bar">
      <span class="nuda-compare__fill nuda-compare__fill--primary" style="--w:78%"></span>
    </div>
    <span class="nuda-compare__value">2.4k</span>
  </div>
  <div class="nuda-compare__row">
    <span class="nuda-compare__label">Last week</span>
    <div class="nuda-compare__bar">
      <span class="nuda-compare__fill" style="--w:52%"></span>
    </div>
    <span class="nuda-compare__value">1.6k</span>
  </div>
</div>

/* Comparison Bar
   Two metrics side-by-side with growing fills, primary one highlighted.
   Customize: --cmp-primary, --cmp-secondary, --cmp-track. */

.nuda-compare {
  --cmp-primary: #e4ff54;
  --cmp-secondary: rgba(228, 255, 84, 0.4);
  --cmp-track: rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 280px;
  padding: 10px;
}

.nuda-compare__row {
  display: grid;
  grid-template-columns: 70px 1fr 40px;
  align-items: center;
  gap: 10px;
}

.nuda-compare__label {
  font: 500 0.625rem ui-sans-serif, system-ui, sans-serif;
  color: #a1a1aa;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.nuda-compare__bar {
  height: 8px;
  background: var(--cmp-track);
  border-radius: 4px;
  overflow: hidden;
}

.nuda-compare__fill {
  display: block;
  height: 100%;
  width: var(--w, 0%);
  background: var(--cmp-secondary);
  border-radius: 4px;
  transform: scaleX(0);
  transform-origin: left;
  animation: nuda-compare-fill 1.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.nuda-compare__fill--primary {
  background: linear-gradient(90deg, var(--cmp-primary), rgba(228, 255, 84, 0.7));
  box-shadow: 0 0 6px rgba(228, 255, 84, 0.3);
  animation-delay: 0.2s;
}

.nuda-compare__value {
  font: 700 0.75rem ui-sans-serif, system-ui, sans-serif;
  color: #fafafa;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

@keyframes nuda-compare-fill { to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
  .nuda-compare__fill { transform: scaleX(1); animation: none; }
}