.tutorial-intro {
  padding-top:64px;
  padding-bottom:88px;
  background:var(--bg-panel);
  color:var(--on-dark);
}
.tutorial-kicker {
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:24px;
  color:var(--on-dark-muted);
  font-family:var(--font-mono);
  font-size:var(--fs-small);
}
.tutorial-subtitle {
  margin-top:20px;
  margin-bottom:20px;
  font-size:var(--fs-h3);
  font-weight:var(--weight-regular);
}
.tutorial-intro-copy {
  max-width:720px;
  color:var(--on-dark-muted);
}
.tutorial-route {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
  margin-top:32px;
  color:var(--accent);
  font-family:var(--font-mono);
  font-size:var(--fs-small);
}
.tutorial-body {
  padding-top:24px;
}
.tutorial-body > .callout {
  margin-top:16px;
  margin-bottom:32px;
}
.tutorial-step-heading {
  display:flex;
  align-items:flex-start;
  gap:20px;
  margin-bottom:36px;
}
.tutorial-step-heading h2 {
  min-width:0;
  margin-bottom:0;
  scroll-margin-top:32px;
}
.tutorial-number {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:none;
  width:44px;
  height:44px;
  border:1px solid var(--border);
  border-radius:var(--r-logo);
  background:var(--accent);
  color:var(--text);
  font-family:var(--font-mono);
  font-size:var(--fs-small);
  font-weight:var(--weight-semibold);
}
.tutorial-step-grid {
  display:grid;
  grid-template-columns:minmax(0,1fr) 280px;
  align-items:start;
  gap:64px;
}
.tutorial-step-grid > * {
  min-width:0;
}
.tutorial-step-grid .prose {
  max-width:var(--reading);
}
.tutorial-check-panel {
  border-radius:var(--r-xl);
}
.tutorial-check-panel .prose {
  max-width:var(--reading);
  margin-inline:auto;
}
@media (max-width:1100px) {
  .tutorial-step-grid {
    gap:32px;
    grid-template-columns:minmax(0,1fr) 240px;
  }
}
@media (max-width:768px) {
  .tutorial-intro {
    padding-top:40px;
    padding-bottom:56px;
  }
  .tutorial-step-grid {
    grid-template-columns:minmax(0,1fr);
    gap:32px;
  }
  .tutorial-step-grid .official-shot {
    margin-inline:auto;
  }
  .tutorial-step-heading {
    gap:12px;
    margin-bottom:28px;
  }
  .tutorial-number {
    width:36px;
    height:36px;
  }
}