.tutorial-intro {
  background:var(--c-cobalt);
  color:var(--c-on-dark);
}
.tutorial-intro__lead {
  max-width:640px;
  font-size:var(--text-lead);
  color:var(--c-on-dark-muted);
}
.tutorial-intro__hint {
  font-size:var(--text-sm);
  color:var(--c-on-dark-muted);
}
.tutorial-intro a:focus-visible {
  outline-color:var(--c-on-dark);
}
.tutorial-map {
  margin:0;
}
.tutorial-map__caption {
  padding-bottom:18px;
  border-bottom:var(--line) solid var(--c-border);
  font-size:var(--text-sm);
  font-weight:var(--weight-semibold);
  color:var(--c-muted);
}
.tutorial-map__path {
  display:grid;
  gap:0;
  margin:0;
  padding:0;
  list-style:none;
}
.tutorial-map__path li {
  display:flex;
  align-items:center;
  gap:16px;
  padding-top:20px;
  padding-bottom:20px;
}
.tutorial-map__path li + li {
  border-top:var(--line) dashed var(--c-border);
}
.tutorial-map__path li > div {
  min-width:0;
}
.tutorial-map__path strong {
  font-size:var(--text-base);
  font-weight:var(--weight-bold);
  color:var(--c-cobalt);
}
.tutorial-map__path p {
  margin-top:4px;
  font-size:var(--text-sm);
  color:var(--c-muted);
}
.tutorial-map__number {
  display:grid;
  place-items:center;
  flex-shrink:0;
  width:42px;
  height:42px;
  border-radius:var(--r-circle);
  background:var(--c-panel);
  color:var(--c-cobalt);
  font-family:var(--font-mono);
  font-size:var(--text-sm);
  font-weight:var(--weight-bold);
}
.tutorial-map__path li:first-child .tutorial-map__number {
  background:var(--c-note);
  color:var(--c-cobalt);
}
.tutorial-map__footer {
  padding:12px 16px;
  border-radius:var(--r-inner);
  background:var(--c-panel-2);
  color:var(--c-cobalt);
  font-size:var(--text-sm);
}
.tutorial-steps .prose section {
  scroll-margin-top:112px;
}
@media (max-width:640px) {
  .tutorial-intro__lead {
    font-size:var(--text-base);
  }
  .tutorial-intro .button-row {
    align-items:stretch;
    flex-direction:column;
  }
  .tutorial-map__path li {
    gap:12px;
  }
}