Step Counter

<!-- Step Counter — dots fill as you progress; current is wider + pulses -->
<div class="nuda-tcount">
  <div class="nuda-tcount__dots">
    <span class="is-done"></span>
    <span class="is-done"></span>
    <span class="is-current"></span>
    <span></span>
    <span></span>
  </div>
  <span class="nuda-tcount__text">Step 3 of 5</span>
</div>

/* Step Counter
   Compact tour progress: dots + label.
   Customize: --tcount-accent */

.nuda-tcount {
  --tcount-accent: #e4ff54;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 999px;
}

.nuda-tcount__dots {
  display: flex;
  gap: 4px;
}

.nuda-tcount__dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  transition: all 0.3s;
}

.nuda-tcount__dots .is-done {
  background: var(--tcount-accent);
  box-shadow: 0 0 4px rgba(228, 255, 84, 0.4);
}

.nuda-tcount__dots .is-current {
  background: var(--tcount-accent);
  width: 18px;
  border-radius: 3px;
  box-shadow: 0 0 6px rgba(228, 255, 84, 0.5);
  animation: nuda-tcount-pulse 1.6s ease-in-out infinite;
}

.nuda-tcount__text {
  font: 600 0.7rem ui-sans-serif, system-ui, sans-serif;
  color: #a1a1aa;
  font-variant-numeric: tabular-nums;
}

@keyframes nuda-tcount-pulse {
  0%, 100% { opacity: 0.8; }
  50%      { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-tcount__dots .is-current { animation: none; }
}