.tutorial-hero {
  min-height: auto;
  padding-top: 24px;
  padding-bottom: 56px;
}
.tutorial-grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(var(--grid-line) 1px, var(--clear) 1px), linear-gradient(90deg, var(--grid-line) 1px, var(--clear) 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(var(--clear), var(--ink) 85%);
  pointer-events: none;
}
.tutorial-hero .hero-copy {
  max-width: calc(var(--reading-width) + var(--gutter) * 2);
}
.tutorial-body {
  padding-top: 48px;
  padding-bottom: var(--section-space);
}
.tutorial-body > .callout {
  margin-top: 0;
  margin-bottom: 32px;
}
.tutorial-step {
  padding-top: var(--section-space);
  scroll-margin-top: 100px;
}
.tutorial-step > h2 {
  margin-top: 0;
  margin-bottom: 28px;
}
.tutorial-step > .mono {
  margin-bottom: 16px;
}
.tutorial-step > p:last-child {
  margin-bottom: 0;
}
.tutorial-body .toc a {
  text-decoration: none;
}
@media (max-width: 640px) {
  .tutorial-hero {
    padding-top: 8px;
    padding-bottom: 32px;
  }
  .tutorial-body {
    padding-top: 32px;
  }
}