.stage-steps {
  position: relative;
  flex: none;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  padding-bottom: var(--sp-150);
}
.stage-steps::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: var(--track-left, calc(100% / 6));
  width: var(--track-width, calc(100% * 2 / 3));
  height: calc(var(--bw) * 2);
  border-radius: var(--r-full);
  background: var(--line);
}
.stage-steps::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: var(--track-left, calc(100% / 6));
  width: var(--track-fill, calc(100% * 2 / 3 * var(--progress, 0)));
  height: calc(var(--bw) * 2);
  border-radius: var(--r-full);
  background: var(--acc);
  transition: width var(--dur-fold) var(--ease-out);
}
.stage-step {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-050);
  min-width: 0;
  height: var(--h-btn-sm);
  padding: 0;
  border: none;
  background: none;
  color: var(--ink2);
  cursor: pointer;
}
.stage-dot {
  flex: none;
  display: grid;
  place-items: center;
  width: calc(var(--h-btn-sm) * .75);
  height: calc(var(--h-btn-sm) * .75);
  border: calc(var(--bw) * 1.5) solid var(--line);
  border-radius: var(--r-full);
  background: var(--card);
  font-size: var(--fs-xs);
  font-weight: var(--fw-reg);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  transition: background-color var(--dur-fold) var(--ease-out) calc(var(--dur-fold) * .6),
              border-color var(--dur-fold) var(--ease-out) calc(var(--dur-fold) * .6),
              color var(--dur-fold) var(--ease-out) calc(var(--dur-fold) * .6);
}
.stage-step.done .stage-dot > .ic {
  transition: opacity var(--dur-fold) var(--ease-out), transform var(--dur-fold) var(--ease-out);
}
@starting-style {
  .stage-step.done .stage-dot > .ic { opacity: 0; transform: scale(.5); }
}
html[data-motion="calm"] .stage-steps::after,
html[data-motion="calm"] .stage-dot,
html[data-motion="calm"] .stage-step.done .stage-dot > .ic { transition: none; }
.stage-label {
  font-size: var(--fs-s);
  line-height: var(--lh-s);
}
.stage-step:hover .stage-dot { border-color: var(--acc); }
.stage-step.now { color: var(--ink); }
.stage-step.now .stage-dot { border-color: var(--acc); background: var(--acc); color: var(--acc-fg); }
.stage-step.done .stage-dot { border-color: var(--acc); color: var(--acc-ink); background: var(--acc-weak); }
.stage-step:focus-visible { outline: none; }
.stage-step:focus-visible .stage-dot { box-shadow: 0 0 0 calc(var(--bw) * 2) var(--acc-weak); }
:has(> .stage-steps) { container-type: inline-size; }
@container (max-width: 320px) {
  .stage-steps { grid-auto-columns: auto; justify-content: space-between; }
  .stage-step:not(.now) > .stage-label { display: none; }
}