.tutorial-document {
  max-width:var(--shell-width);
}

.tutorial-document .article-masthead {
  max-width:var(--reading-width);
}

.tutorial-lead {
  max-width:var(--description-width);
  margin-bottom:0;
  color:var(--muted);
  font-size:var(--fs-body);
  line-height:var(--lh-prose);
}

.tutorial-document > .callout {
  max-width:var(--reading-width);
}

.tutorial-flow {
  max-width:var(--reading-width);
}

.tutorial-flow > section {
  scroll-margin-top:var(--anchor-offset);
}

.tutorial-flow > section + section {
  margin-top:var(--s16);
  padding-top:var(--s10);
  border-top:var(--hairline) solid var(--border);
}

.tutorial-heading {
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:start;
  gap:var(--s5);
  margin-bottom:var(--s6);
}

.tutorial-heading .section-icon {
  margin-bottom:0;
}

.tutorial-heading h2 {
  margin-bottom:0;
}

.tutorial-kicker {
  margin:0 0 var(--s1);
  color:var(--accent-dark);
  font-size:var(--fs-small);
  font-weight:var(--bold);
  letter-spacing:var(--tracking-label);
}

.tutorial-action {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:var(--s4);
  margin-top:var(--s6);
}

.tutorial-action-split {
  justify-content:space-between;
}

.platform-notes {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--s5);
  margin-top:var(--s6);
}

.platform-notes .panel {
  display:flex;
  flex-direction:column;
  gap:var(--s3);
}

.platform-notes h3,
.platform-notes p {
  margin:0;
}

.platform-notes h3 {
  color:var(--accent-dark);
}

.platform-notes p {
  color:var(--muted);
  font-size:var(--fs-nav);
  line-height:var(--lh-prose);
}

.tutorial-flow pre {
  margin:var(--s5) 0;
}

@media (max-width:768px) {
  .tutorial-flow > section + section {
    margin-top:var(--s12);
    padding-top:var(--s8);
  }

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

@media (max-width:640px) {
  .tutorial-lead {
    font-size:var(--fs-ui);
  }

  .tutorial-heading {
    gap:var(--s3);
  }

  .tutorial-heading .section-icon {
    width:var(--s10);
    height:var(--s10);
  }

  .tutorial-heading .section-icon svg {
    width:var(--s5);
    height:var(--s5);
  }

  .tutorial-action,
  .tutorial-action-split {
    align-items:stretch;
    flex-direction:column;
  }

  .tutorial-action .button {
    width:100%;
  }
}