.tutorial-opening-grid {
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(0,.8fr);
  align-items:center;
  gap:72px;
}
.tutorial-opening-grid > * {
  min-width:0;
}
.tutorial-preflight {
  padding-left:28px;
  border-left:3px solid var(--c-line-2);
  color:var(--c-ink-2);
}
.tutorial-preflight h2 {
  font-size:24px;
  color:var(--c-ink);
}
.tutorial-preflight a {
  display:inline-block;
  padding-top:8px;
  padding-bottom:8px;
  color:var(--c-ink);
  text-decoration:underline;
  text-decoration-color:var(--c-accent-dark);
  text-underline-offset:5px;
}
.tutorial-body {
  padding-top:32px;
  padding-bottom:56px;
}
.tutorial-step + .tutorial-step {
  border-top:1px solid var(--c-border);
}
.tutorial-step-label {
  font-family:var(--f-mono);
  font-size:13px;
  color:var(--c-text-muted);
  letter-spacing:.035em;
}
.tutorial-step.prose h2 {
  margin-top:0;
}
.tutorial-step :is(h2,h3)[id] {
  scroll-margin-top:132px;
}
.tutorial-setting-note {
  margin-top:32px;
}
.tutorial-setting-note h3 {
  margin-top:0;
}
.tutorial-setting-note p:last-child {
  margin-bottom:0;
}
.tutorial-setting-list {
  margin-top:0;
  margin-bottom:24px;
}
.tutorial-setting-list > div {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);
  gap:16px;
  padding-top:14px;
  padding-bottom:14px;
  border-bottom:1px solid var(--c-line-2);
}
.tutorial-setting-list dt {
  color:var(--c-ink-2);
}
.tutorial-setting-list dd {
  margin:0;
  font-weight:600;
}
@media (max-width:960px) {
  .tutorial-opening-grid {
    gap:36px;
    grid-template-columns:minmax(0,1fr);
  }
  .tutorial-preflight {
    max-width:var(--w-reading);
  }
}
@media (max-width:640px) {
  .tutorial-body {
    padding-top:24px;
    padding-bottom:24px;
  }
  .tutorial-preflight {
    padding-left:20px;
  }
  .tutorial-step :is(h2,h3)[id] {
    scroll-margin-top:24px;
  }
  .tutorial-setting-list > div {
    grid-template-columns:minmax(0,1fr);
    gap:4px;
  }
}