.tutorial-document {
  counter-reset:tutorial-stage;
}

.tutorial-intro {
  max-width:calc(var(--space-10) * 11);
  margin-bottom:var(--space-4);
}

.tutorial-summary {
  max-width:calc(var(--space-10) * 10);
  color:var(--muted);
  font-size:var(--text-lg);
  line-height:1.9;
}

.tutorial-document > .callout {
  max-width:calc(var(--space-10) * 11);
}

.tutorial-step {
  counter-increment:tutorial-stage;
  display:grid;
  grid-template-columns:minmax(var(--space-10),.24fr) minmax(0,1fr);
  gap:var(--space-4);
  padding-top:var(--space-6);
  padding-bottom:var(--space-6);
  border-top:1px solid var(--border);
  scroll-margin-top:var(--toc-offset);
}

.tutorial-step:last-child {
  border-bottom:1px solid var(--border);
}

.step-rail {
  position:relative;
  align-self:start;
  min-height:var(--space-8);
  border-top:3px solid var(--blue);
  padding-top:var(--space-2);
  color:var(--blue-dark);
  font-family:var(--mono);
  font-size:var(--text-xs);
  font-weight:var(--weight-semibold);
}

.step-rail::before {
  content:counter(tutorial-stage);
  display:grid;
  place-items:center;
  width:var(--space-4);
  height:var(--space-4);
  margin-bottom:var(--space-2);
  border:1px solid var(--slab-edge);
  border-radius:var(--r-sm);
  background:var(--blue-tint);
  color:var(--blue-dark);
  font-family:var(--mono);
  font-size:var(--text-sm);
}

.step-rail span {
  display:block;
}

.step-body {
  min-width:0;
}

.step-body > h2 {
  margin-bottom:var(--space-3);
}

.step-body > .button {
  margin-top:var(--space-1);
}

.platform-preface {
  max-width:calc(var(--space-10) * 10);
  color:var(--muted);
  line-height:1.9;
}

.platform-manual {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--space-3);
  margin-top:var(--space-4);
  margin-bottom:var(--space-3);
}

.platform-manual section {
  min-width:0;
  border-left:3px solid var(--slab-edge);
  border-top:1px solid var(--border);
  border-right:1px solid var(--border);
  border-bottom:1px solid var(--border);
  border-radius:var(--r-sm);
  background:var(--panel);
  padding:var(--space-3);
  box-shadow:var(--shadow-panel);
}

.platform-manual section:nth-child(even) {
  border-left-color:var(--orange);
  background:linear-gradient(180deg,var(--orange-tint),var(--panel));
}

.platform-manual h3 {
  margin-bottom:var(--space-2);
  font-size:var(--text-xl);
}

.platform-manual p {
  color:var(--muted);
  font-size:var(--text-md);
  line-height:1.9;
}

.platform-manual p:last-child {
  margin-bottom:0;
}

@media (max-width:768px) {
  .tutorial-step {
    grid-template-columns:1fr;
    gap:var(--space-2);
    padding-top:var(--space-5);
    padding-bottom:var(--space-5);
  }

  .step-rail {
    display:flex;
    align-items:center;
    gap:var(--space-2);
    min-height:0;
    padding-top:var(--space-2);
  }

  .step-rail::before {
    flex-shrink:0;
    margin-bottom:0;
  }

  .platform-manual {
    grid-template-columns:1fr;
  }
}

@media (max-width:640px) {
  .tutorial-summary {
    font-size:var(--text-base);
  }

  .tutorial-step {
    gap:var(--space-2);
  }

  .platform-manual {
    gap:var(--space-2);
    margin-top:var(--space-3);
  }

  .platform-manual section {
    padding:var(--space-2);
  }
}