.steps-scroll { max-width: 100%; overflow-x: auto; }
.steps {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: max-content;
  min-width: 100%;
}
.steps-lane {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}
.steps-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}
.steps-card { width: min(560px, 92vw); }
.steps-branch .steps-card { width: min(440px, 86vw); }
.steps-step.picked > .steps-card { border-color: var(--acc-solid); }
.steps-step.now > .steps-card { border-color: var(--good); }

.steps-add,
.steps-link {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.steps-add::before,
.steps-add::after,
.steps-link::before {
  content: "";
  width: var(--bw);
  height: var(--sp-150);
  background: var(--line);
}
.steps-link::before { height: var(--sp-300); }
.steps-plus {
  display: grid;
  place-items: center;
  width: var(--h-btn-sm);
  height: var(--h-btn-sm);
  padding: 0;
  border: var(--bw) solid var(--line);
  border-radius: var(--r-full);
  background: var(--card);
  color: var(--ink3);
  cursor: pointer;
  flex: none;
}
.steps-plus:hover { border-color: var(--acc-solid); color: var(--acc-ink); }

.steps-branches {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  gap: var(--gap);
  margin-top: var(--sp-100);
}
.steps-branch {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  padding: var(--sp-150);
  border: var(--bw) dashed var(--line);
  border-radius: var(--r);
}
.steps-branch-head {
  font-size: var(--fs-s);
  line-height: var(--lh-s);
  font-weight: var(--fw-med);
  color: var(--ink3);
}

:root[data-mob] .steps { width: 100%; }
:root[data-mob] .steps-branches { grid-auto-flow: row; grid-auto-columns: auto; width: 100%; }
:root[data-mob] .steps-card,
:root[data-mob] .steps-branch .steps-card { width: 100%; }
:root[data-mob] .steps-lane,
:root[data-mob] .steps-step { width: 100%; }