Pure CSS Stepper

<!-- Pure CSS Stepper — radio step indicator, zero JS -->
<div class="nuda-css-stepper">
  <input class="nuda-css-stepper__input" type="radio" name="nuda-css-stepper" id="nuda-css-st-1" />
  <input class="nuda-css-stepper__input" type="radio" name="nuda-css-stepper" id="nuda-css-st-2" checked />
  <input class="nuda-css-stepper__input" type="radio" name="nuda-css-stepper" id="nuda-css-st-3" />

  <div class="nuda-css-stepper__row">
    <label class="nuda-css-stepper__step" for="nuda-css-st-1">
      <span class="nuda-css-stepper__dot">1</span>
      <span class="nuda-css-stepper__caption">Cart</span>
    </label>
    <label class="nuda-css-stepper__step" for="nuda-css-st-2">
      <span class="nuda-css-stepper__dot">2</span>
      <span class="nuda-css-stepper__caption">Shipping</span>
    </label>
    <label class="nuda-css-stepper__step" for="nuda-css-st-3">
      <span class="nuda-css-stepper__dot">3</span>
      <span class="nuda-css-stepper__caption">Pay</span>
    </label>
  </div>

  <div class="nuda-css-stepper__panel nuda-css-stepper__panel--1">Review your cart.</div>
  <div class="nuda-css-stepper__panel nuda-css-stepper__panel--2">Enter shipping details.</div>
  <div class="nuda-css-stepper__panel nuda-css-stepper__panel--3">Complete payment.</div>
</div>

/* Pure CSS Stepper
   Hidden radios drive the active dot + panel via sibling
   selectors. No JS. Customize: --nuda-css-st-accent */

.nuda-css-stepper {
  --nuda-css-st-accent: #e4ff54;
  width: 100%;
  max-width: 420px;
}

.nuda-css-stepper__input {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); border: 0;
}

.nuda-css-stepper__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.nuda-css-stepper__step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1;
  cursor: pointer;
}

.nuda-css-stepper__dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 0.85rem;
  font-weight: 700;
  color: #888;
  background: rgba(255, 255, 255, 0.06);
  border: 2px solid rgba(255, 255, 255, 0.1);
  transition: color 0.25s, background 0.25s, border-color 0.25s, transform 0.25s;
}

.nuda-css-stepper__caption {
  font-size: 0.72rem;
  color: #777;
  transition: color 0.25s;
}

/* Connector line between steps */
.nuda-css-stepper__step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 17px;
  left: calc(50% + 20px);
  width: calc(100% - 40px);
  height: 2px;
  background: rgba(255, 255, 255, 0.1);
}

.nuda-css-stepper__panel {
  display: none;
  margin-top: 1rem;
  padding: 1rem;
  font-size: 0.85rem;
  color: #bbb;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  animation: nuda-css-step-fade 0.3s ease-out;
}

/* Active dot */
#nuda-css-st-1:checked ~ .nuda-css-stepper__row label[for="nuda-css-st-1"] .nuda-css-stepper__dot,
#nuda-css-st-2:checked ~ .nuda-css-stepper__row label[for="nuda-css-st-2"] .nuda-css-stepper__dot,
#nuda-css-st-3:checked ~ .nuda-css-stepper__row label[for="nuda-css-st-3"] .nuda-css-stepper__dot {
  color: #09090b;
  background: var(--nuda-css-st-accent);
  border-color: var(--nuda-css-st-accent);
  transform: scale(1.08);
}

/* Active caption */
#nuda-css-st-1:checked ~ .nuda-css-stepper__row label[for="nuda-css-st-1"] .nuda-css-stepper__caption,
#nuda-css-st-2:checked ~ .nuda-css-stepper__row label[for="nuda-css-st-2"] .nuda-css-stepper__caption,
#nuda-css-st-3:checked ~ .nuda-css-stepper__row label[for="nuda-css-st-3"] .nuda-css-stepper__caption {
  color: #fff;
}

/* Matching panel */
#nuda-css-st-1:checked ~ .nuda-css-stepper__panel--1,
#nuda-css-st-2:checked ~ .nuda-css-stepper__panel--2,
#nuda-css-st-3:checked ~ .nuda-css-stepper__panel--3 {
  display: block;
}

.nuda-css-stepper__input:focus-visible + .nuda-css-stepper__row label .nuda-css-stepper__dot {
  outline: 2px solid var(--nuda-css-st-accent);
  outline-offset: 2px;
}

@keyframes nuda-css-step-fade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-css-stepper__dot { transition: none; }
  .nuda-css-stepper__panel { animation: none; }
}