.tutorial-page {
  line-height:var(--leading-prose);
}
.tutorial-intro {
  padding-top:var(--space-8);
  padding-bottom:var(--space-7);
  border-bottom:1px solid var(--border);
}
.tutorial-intro__layout {
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  gap:var(--space-8);
  align-items:center;
  margin-bottom:var(--space-7);
}
.tutorial-intro__layout > * {
  min-width:0;
}
.tutorial-intro h1 {
  margin-top:var(--space-4);
  margin-bottom:var(--space-5);
  letter-spacing:var(--tracking-display);
}
.tutorial-intro__lead {
  max-width:34em;
  font-size:var(--text-lg);
  color:var(--text);
}
.tutorial-intro .callout a {
  color:var(--accent-dark);
  text-decoration:underline;
  text-underline-offset:3px;
}
.tutorial-map {
  position:relative;
  padding:var(--space-6);
  background:var(--bg-panel);
  color:var(--text);
  border:1px solid var(--border);
  clip-path:polygon(var(--chamfer) 0,100% 0,100% calc(100% - var(--chamfer)),calc(100% - var(--chamfer)) 100%,0 100%,0 var(--chamfer));
}
.tutorial-map__label {
  margin-bottom:var(--space-4);
  color:var(--accent-dark);
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  letter-spacing:var(--tracking-label);
}
.tutorial-map ol {
  margin:0;
  padding:0;
  list-style:none;
}
.tutorial-map li {
  display:flex;
  align-items:baseline;
  gap:var(--space-4);
  padding-top:var(--space-2);
  padding-bottom:var(--space-2);
  border-bottom:1px solid var(--border);
  font-weight:var(--weight-medium);
}
.tutorial-map li span {
  flex-shrink:0;
  color:var(--accent-dark);
  font-family:var(--font-mono);
  font-size:var(--text-sm);
}
.tutorial-map > p:last-child {
  margin-top:var(--space-5);
  margin-bottom:0;
  color:var(--text-muted);
  font-size:var(--text-sm);
}
.tutorial-reading {
  max-width:880px;
  margin-inline:auto;
}
.tutorial-step {
  padding-top:var(--space-8);
  padding-bottom:var(--space-7);
  border-bottom:1px solid var(--border);
  scroll-margin-top:var(--space-5);
}
.tutorial-step > .eyebrow {
  margin-bottom:var(--space-3);
}
.tutorial-step h2 {
  margin-top:0;
  margin-bottom:var(--space-6);
}
.tutorial-step h3 {
  margin-bottom:var(--space-4);
}
.tutorial-step ol {
  padding-left:var(--space-5);
  margin-top:var(--space-5);
  margin-bottom:var(--space-5);
}
.tutorial-step li {
  padding-left:var(--space-1);
}
.tutorial-step li::marker {
  color:var(--accent-dark);
  font-weight:var(--weight-bold);
}
.tutorial-transition {
  margin-top:var(--space-6);
  margin-bottom:0;
  padding-left:var(--space-4);
  border-left:2px solid var(--accent);
  color:var(--text-muted);
}
.tutorial-check {
  margin-top:var(--space-6);
  margin-bottom:0;
  padding-top:var(--space-5);
  border-top:1px dashed var(--border-strong);
}
.tutorial-check strong {
  color:var(--accent-dark);
}
.tutorial-next {
  padding-top:var(--space-7);
  padding-bottom:var(--space-8);
}
.tutorial-next h2 {
  margin-top:var(--space-3);
  margin-bottom:var(--space-5);
  font-size:var(--heading-md);
}
.tutorial-next ul {
  margin:0;
  padding:0;
  list-style:none;
}
.tutorial-next li {
  display:grid;
  grid-template-columns:minmax(0,130px) minmax(0,1fr);
  gap:var(--space-4);
  align-items:baseline;
  padding-top:var(--space-3);
  padding-bottom:var(--space-3);
  border-bottom:1px solid var(--border);
}
.tutorial-next li span {
  color:var(--text-muted);
  font-size:var(--text-sm);
}
@media (max-width:768px) {
  .tutorial-intro {
    padding-top:var(--space-7);
  }
  .tutorial-intro__layout {
    grid-template-columns:minmax(0,1fr);
    gap:var(--space-5);
    margin-bottom:var(--space-6);
  }
  .tutorial-map {
    padding:var(--space-5);
  }
  .tutorial-step {
    padding-top:var(--space-7);
    padding-bottom:var(--space-6);
  }
  .tutorial-intro__lead {
    font-size:var(--text-base);
  }
}
@media (max-width:480px) {
  .tutorial-next li {
    grid-template-columns:minmax(0,1fr);
    gap:var(--space-1);
  }
}