.tutorial-intro {
  background:linear-gradient(115deg,var(--sky),var(--lavender),var(--blush));
  color:var(--text);
}
.tutorial-intro-copy {
  max-width:var(--reading);
}
.tutorial-intro-copy h1 {
  margin-top:var(--space-6);
  margin-bottom:var(--space-5);
}
.tutorial-intro .callout {
  background:var(--veil);
  color:var(--text);
}
.tutorial-intro-note {
  margin-bottom:0;
  font-size:var(--text-sm);
}
.tutorial-step-layout {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,280px);
  align-items:start;
  gap:var(--space-16);
}
.tutorial-step-layout > .prose {
  max-width:var(--reading);
}
.tutorial-step-label {
  margin-bottom:var(--space-3);
  color:var(--accent-dark);
  font-family:var(--font-mono);
  font-size:var(--text-sm);
  font-weight:var(--weight-medium);
}
.tutorial-step-layout .prose > h2,
.section > .reading.prose > h2 {
  margin-top:0;
}
.tutorial-step-layout > .official-shot {
  margin-top:var(--space-12);
}
# get-app {
  scroll-margin-top:var(--space-6);
}
@media (max-width:960px) {
  .tutorial-step-layout {
    grid-template-columns:minmax(0,1fr) minmax(0,240px);
    gap:var(--space-8);
  }
}
@media (max-width:768px) {
  .tutorial-step-layout {
    grid-template-columns:minmax(0,1fr);
  }
  .tutorial-step-layout > .official-shot {
    margin-top:0;
  }
}