.tutorial-intro {
  padding-top:64px;
  padding-bottom:64px;
  background-color:var(--c-bg);
  color:var(--c-text);
  background-image:radial-gradient(var(--c-border) 1px,var(--c-clear) 1px);
  background-size:24px 24px;
}
.tutorial-heading {
  max-width:820px;
  margin-inline:auto;
  text-align:center;
}
.tutorial-heading .badge {
  margin-bottom:24px;
}
.tutorial-heading h1 {
  margin-bottom:24px;
}
.tutorial-summary {
  max-width:660px;
  margin-inline:auto;
  color:var(--c-muted);
  line-height:1.9;
}
.tutorial-intro .callout {
  margin-top:48px;
  margin-bottom:32px;
}
.tutorial-intro .toc {
  margin-bottom:0;
}
.tutorial-step .prose {
  max-width:860px;
  margin-inline:auto;
}
.tutorial-step__label {
  margin-bottom:18px;
  color:var(--c-muted);
  font-family:var(--font-mono);
  font-size:var(--size-small);
  letter-spacing:.04em;
}
.tutorial-step h2 {
  margin-top:0;
}
.tutorial-step h2[id] {
  scroll-margin-top:32px;
}
.tutorial-step caption {
  padding:16px 20px;
  text-align:left;
  font-weight:var(--weight-heading);
  background:var(--c-panel-2);
  color:var(--c-text);
}
.tutorial-step .table-scroll {
  margin-bottom:28px;
}
.tutorial-step ol {
  padding-inline-start:24px;
}
@media (max-width:640px) {
  .tutorial-intro {
    padding-top:40px;
    padding-bottom:48px;
  }
  .tutorial-intro .callout {
    margin-top:32px;
  }
  .tutorial-heading .facts {
    gap:6px;
  }
}