.tutorial-intro {
  padding-top: 64px;
}
.tutorial-intro h1 {
  max-width: var(--reading-width);
}
.tutorial-lede {
  max-width: var(--reading-width);
  color: var(--text-soft);
  font-size: var(--h3-size);
  line-height: 1.75;
}
.tutorial-intro .callout {
  max-width: var(--reading-width);
}
.tutorial-intro .callout p + p {
  margin-top: 16px;
}
.tutorial-intro > .shell > .muted {
  max-width: var(--reading-width);
}
.tutorial-body > .toc {
  margin-bottom: 40px;
}
.tutorial-steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--section-space);
}
.tutorial-steps > *,
.tutorial-steps .prose {
  min-width: 0;
}
.tutorial-steps .eyebrow {
  margin-bottom: 12px;
}
.tutorial-steps .eyebrow + h2 {
  margin-top: 0;
}
.tutorial-steps .table-scroll {
  margin-block: 28px;
}
.tutorial-steps > .card:not(.shot-and-copy) > .prose {
  max-width: var(--reading-width);
}
@media (max-width: 640px) {
  .tutorial-intro {
    padding-top: 36px;
  }
  .tutorial-lede {
    font-size: var(--body-size);
  }
}