.tutorial-intro {
  position:relative;
  overflow:hidden;
  padding-top:64px;
  padding-bottom:72px;
  background:linear-gradient(165deg,var(--field-0),var(--field-1) 60%,var(--field-2));
  color:var(--on-dark);
}
.tutorial-intro h1 {
  margin-top:24px;
  margin-bottom:24px;
}
.tutorial-intro__gradient {
  background:linear-gradient(100deg,var(--on-dark),var(--field-3));
  background-clip:text;
  -webkit-background-clip:text;
  color:var(--clear);
}
.tutorial-intro__lead {
  max-width:640px;
  margin-bottom:28px;
  color:var(--on-dark-soft);
}
.tutorial-route {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  padding:0;
  margin:0;
  list-style:none;
}
.tutorial-route a {
  display:flex;
  align-items:center;
  min-height:44px;
  padding:9px 16px;
  border:1px solid var(--on-dark-line);
  border-radius:var(--radius-pill);
  color:var(--on-dark);
  background:var(--veil-1);
  font-size:var(--size-small);
}
.tutorial-route a:hover {
  background:var(--veil-2);
  text-decoration:none;
}
.tutorial-intro :focus-visible {
  outline-color:var(--field-3);
}
.tutorial-document {
  padding-bottom:var(--space-section);
}
.tutorial-document .toc .eyebrow {
  margin-bottom:12px;
}
.tutorial-step {
  scroll-margin-top:28px;
}
.tutorial-step + .tutorial-step {
  margin-top:64px;
  padding-top:48px;
  border-top:1px solid var(--border);
}
.tutorial-step h2 {
  margin-top:16px;
}
@media(max-width:768px) {
  .tutorial-intro {
    padding-top:40px;
    padding-bottom:48px;
  }
  .tutorial-step + .tutorial-step {
    margin-top:48px;
    padding-top:36px;
  }
}