.tutorial-intro {
  padding-top:calc(var(--section-space) / 2);
  background-color:var(--bg);
  background-image:radial-gradient(circle,var(--border) 1px,var(--transparent) 1.5px);
  background-size:22px 22px;
}
.tutorial-intro h1 {
  margin-top:var(--space-lg);
  margin-bottom:var(--space-lg);
  letter-spacing:var(--tracking-display);
}
.tutorial-intro__lede {
  margin-bottom:var(--space-lg);
  color:var(--text-muted);
  font-size:var(--text-large);
  line-height:1.8;
}
.tutorial-intro .toc {
  margin-top:var(--space-xl);
}
.tutorial-step__layout {
  display:grid;
  grid-template-columns:minmax(0,1fr) 280px;
  align-items:start;
  gap:calc(var(--gap) * 3);
}
.tutorial-step__layout > * {
  min-width:0;
}
.tutorial-step__number {
  margin-top:0;
  margin-bottom:var(--space-md);
  color:var(--accent);
  font-size:var(--text-xs);
  letter-spacing:var(--tracking-display);
}
.tutorial-step .prose > h2:first-of-type {
  margin-top:0;
}
.tutorial-step h2[id] {
  scroll-margin-top:var(--space-xl);
}
.tutorial-step .official-shot {
  margin-top:calc(var(--space-xl) * 2);
}
@media (max-width:960px) {
  .tutorial-step__layout {
    grid-template-columns:minmax(0,1fr) 240px;
    gap:var(--space-xl);
  }
}
@media (max-width:768px) {
  .tutorial-step__layout {
    grid-template-columns:minmax(0,1fr);
    gap:var(--space-xl);
  }
  .tutorial-step .official-shot {
    margin-top:0;
  }
}