.tutorial-page {
  padding-top:40px;
}
.tutorial-intro {
  padding:48px 40px;
  border-radius:var(--r-panel);
  background:var(--grad-feature);
  color:var(--c-white);
  overflow-x:clip;
}
.tutorial-intro__label {
  margin-bottom:20px;
  color:var(--c-on-dark-72);
  font-size:var(--text-sm);
  letter-spacing:var(--track-small);
}
.tutorial-intro__lede {
  margin-top:24px;
  max-width:760px;
  font-size:var(--text-lead);
  color:var(--c-white);
}
.tutorial-intro__note {
  margin-top:16px;
  max-width:680px;
  color:var(--c-on-dark-88);
}
.tutorial-route {
  display:flex;
  flex-wrap:wrap;
  gap:12px 24px;
  margin:32px 0 0;
  padding:0;
  list-style:none;
  font-family:var(--font-mono);
  font-size:var(--text-sm);
  color:var(--c-on-dark-88);
}
.tutorial-route li {
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.tutorial-route li::before {
  content:"";
  width:6px;
  height:6px;
  border-radius:var(--r-circle);
  background:var(--c-on-dark-72);
}
.tutorial-prerequisite {
  margin-top:32px;
  margin-bottom:24px;
}
.tutorial-step {
  margin-bottom:12px;
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  color:var(--c-muted);
}
.tutorial-page .section__heading .tutorial-step {
  margin-top:0;
}
.tutorial-page > section {
  scroll-margin-top:calc(var(--nav-h) + 100px);
}
.tutorial-page .shot-layout .prose > :first-child {
  margin-top:0;
}
@media (max-width:640px) {
  .tutorial-page {
    padding-top:24px;
  }
  .tutorial-intro {
    padding:32px 20px;
  }
  .tutorial-intro__lede {
    font-size:var(--text-body);
  }
  .tutorial-route {
    gap:12px 18px;
  }
  .tutorial-page > section {
    scroll-margin-top:calc(var(--nav-h) + 92px);
  }
}