.tutorial-opening {
  background:var(--bg-panel);
  color:var(--text);
  padding-top:64px;
  padding-bottom:56px;
}
.tutorial-opening h1 {
  margin-top:24px;
  margin-bottom:24px;
}
.tutorial-lead {
  color:var(--text-muted);
  font-size:var(--size-body);
  max-width:680px;
}
.tutorial-opening .callout {
  background:var(--bg);
  color:var(--text);
}
.tutorial-opening .toc {
  margin-top:32px;
}
.tutorial-opening-note {
  font-size:var(--size-small);
  margin-bottom:0;
}
.tutorial-step-heading {
  max-width:800px;
  margin-bottom:40px;
}
.tutorial-step-heading h2 {
  margin-top:20px;
  margin-bottom:20px;
}
.tutorial-step-heading .section-intro {
  margin-bottom:0;
}
.tutorial-step-layout {
  display:grid;
  grid-template-columns:minmax(0,1fr) 280px;
  align-items:start;
  gap:64px;
}
.tutorial-copy {
  min-width:0;
  overflow-wrap:break-word;
}
.tutorial-copy h3 {
  margin-top:32px;
  margin-bottom:18px;
}
.tutorial-copy > h3:first-child {
  margin-top:0;
}
.tutorial-copy > p:last-child {
  margin-bottom:0;
}
.tutorial-copy a,
.tutorial-check-note a {
  color:var(--accent-dark);
}
.tutorial-copy a:hover,
.tutorial-check-note a:hover {
  color:var(--steel);
}
.tutorial-check-flow {
  display:grid;
  grid-template-columns:minmax(0,1fr) 280px;
  align-items:start;
  gap:64px;
}
.tutorial-check-note h3 {
  margin-top:0;
  margin-bottom:20px;
}
.tutorial-check-note ol {
  padding-left:22px;
  margin-bottom:24px;
}
.tutorial-check-note li {
  margin-bottom:14px;
}
.tutorial-check-note p {
  font-size:var(--size-small);
  margin-bottom:0;
}
@media (max-width:900px) {
  .tutorial-step-layout,
  .tutorial-check-flow {
    gap:32px;
  }
}
@media (max-width:768px) {
  .tutorial-opening {
    padding-top:40px;
    padding-bottom:40px;
  }
  .tutorial-step-layout,
  .tutorial-check-flow {
    grid-template-columns:minmax(0,1fr);
    gap:36px;
  }
  .tutorial-step-heading {
    margin-bottom:28px;
  }
}