:root{
  --tutorial-reading-width:960px;
  --tutorial-title-width:1000px;
  --tutorial-label-spacing:.08em;
  --tutorial-step-gap:56px;
}
.tutorial-intro{
  background:linear-gradient(180deg,var(--accent-a05),var(--clear));
  padding-bottom:40px;
}
.tutorial-intro .section-head{
  max-width:var(--tutorial-title-width);
  margin-bottom:24px;
}
.tutorial-intro h1{
  font-size:var(--fs-h1);
  margin-top:24px;
}
.tutorial-facts{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}
.tutorial-document{
  max-width:var(--tutorial-reading-width);
  padding-top:16px;
  padding-bottom:80px;
}
.tutorial-document>.callout{
  margin-top:0;
  margin-bottom:40px;
}
.tutorial-step{
  padding-top:32px;
  padding-bottom:var(--tutorial-step-gap);
}
.tutorial-step+.tutorial-step{
  border-top:1px solid var(--border);
}
.tutorial-step__label{
  margin-bottom:16px;
  font-size:var(--fs-xs);
  font-weight:700;
  letter-spacing:var(--tutorial-label-spacing);
  color:var(--accent-dark);
}
.tutorial-step .prose{
  max-width:none;
}
.tutorial-step .prose h2{
  margin-top:0;
}
.tutorial-step .prose h3{
  scroll-margin-top:var(--toc-offset);
}
.tutorial-step .prose>p{
  color:var(--text-muted);
}
.tutorial-step .cta-row{
  margin-bottom:24px;
}
.tutorial-step:last-child{
  padding-bottom:0;
}
@media(max-width:768px){
  .tutorial-intro h1{
    font-size:36px;
  }
  .tutorial-document{
    padding-bottom:56px;
  }
}
@media(max-width:640px){
  :root{
    --tutorial-step-gap:40px;
  }
  .tutorial-intro{
    padding-bottom:24px;
  }
}