Linear Stepper

<ol class="nuda-step-linear">
  <li class="is-done">
    <span class="nuda-step-linear__circle">✓</span>
    <span class="nuda-step-linear__label">Account</span>
  </li>
  <li class="is-done">
    <span class="nuda-step-linear__circle">✓</span>
    <span class="nuda-step-linear__label">Profile</span>
  </li>
  <li class="is-active">
    <span class="nuda-step-linear__circle">3</span>
    <span class="nuda-step-linear__label">Plan</span>
  </li>
  <li>
    <span class="nuda-step-linear__circle">4</span>
    <span class="nuda-step-linear__label">Done</span>
  </li>
</ol>

.nuda-step-linear li {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: #63636e;
}

.nuda-step-linear li::before {
  content: "";
  position: absolute;
  top: 11px;
  left: calc(-50% + 14px);
  right: calc(50% + 14px);
  height: 2px;
  background: rgba(255, 255, 255, 0.06);
  transition: background 0.5s ease;
}

.nuda-step-linear li:first-child::before { display: none; }

.nuda-step-linear li.is-done .nuda-step-linear__circle {
  background: #e4ff54;
  border-color: #e4ff54;
  color: #09090b;
  transform: scale(1.05);
}

.nuda-step-linear li.is-done::before { background: #e4ff54; }

.nuda-step-linear li.is-active .nuda-step-linear__circle {
  background: rgba(228, 255, 84, 0.1);
  border-color: #e4ff54;
  color: #e4ff54;
  animation: nuda-step-pulse 2s ease-in-out infinite;
}

@keyframes nuda-step-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(228, 255, 84, 0.4); }
  50%      { box-shadow: 0 0 0 6px rgba(228, 255, 84, 0);   }
}