.tutorial-page{
  padding-top:var(--gutter);
}
.tutorial-intro h1{
  margin-top:var(--space-card);
  margin-bottom:var(--space-card);
  color:var(--c-on-dark);
  font-size:var(--text-h1);
  overflow-wrap:anywhere;
}
.tutorial-subtitle{
  display:block;
  margin-top:16px;
  color:var(--c-on-dark-soft);
  font-size:var(--text-h3);
  line-height:1.6;
  letter-spacing:var(--track-tight);
}
.tutorial-lede{
  max-width:46em;
  margin-bottom:0;
  color:var(--c-on-dark-2);
}
.tutorial-route{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
  margin-top:var(--space-card);
  padding-top:24px;
  border-top:var(--line) solid var(--c-line-dark);
  color:var(--c-on-dark-soft);
  font-size:var(--text-small);
}
.tutorial-step-head{
  display:flex;
  align-items:flex-start;
  gap:20px;
  margin-bottom:var(--space-card);
}
.tutorial-step-index{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:none;
  width:44px;
  height:58px;
  border-radius:var(--r-arch);
  background:var(--c-navy);
  color:var(--c-on-dark);
  font-family:var(--f-mono);
  font-weight:var(--weight-bold);
}
.tutorial-step-kicker{
  margin-top:0;
  margin-bottom:8px;
  color:var(--c-muted);
  font-size:var(--text-small);
}
.tutorial-step-head>div{min-width:0}
.tutorial-step-head h2 .nowrap{white-space:normal}
.tutorial-step-head h2{
  margin-top:0;
  margin-bottom:0;
  color:var(--c-navy);
  overflow-wrap:anywhere;
}
.tutorial-step-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,280px);
  align-items:start;
  gap:48px;
}
.tutorial-step-layout .prose{
  max-width:100%;
}
.tutorial-step-layout .prose>p:first-child{
  margin-top:0;
}
.tutorial-step .prose h3{
  color:var(--c-navy);
}
.tutorial-platform-note h2{
  margin-top:0;
}
.tutorial-platform-note>p{
  max-width:72ch;
}
.tutorial-platform-note .get-note{
  margin-bottom:0;
}
@media(max-width:900px){
  .tutorial-step-layout{
    grid-template-columns:minmax(0,1fr);
    gap:var(--space-card);
  }
}
@media(max-width:768px){
  .tutorial-intro h1{
    font-size:clamp(24px,5.5vw,30px);
  }
}
@media(max-width:640px){
  .tutorial-subtitle{
    font-size:var(--text-body);
  }
  .tutorial-step-head{
    gap:12px;
  }
  .tutorial-step-index{
    width:36px;
    height:48px;
    font-size:var(--text-small);
  }
  .tutorial-step-head h2{
    font-size:var(--text-h3);
  }
}