.tutorial-heading {
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);
  gap:40px;
  margin-top:28px;
  padding:var(--pad);
  border-radius:var(--r-panel);
  background:var(--c-ink);
  color:var(--c-on-ink);
}
.tutorial-heading>* {
  min-width:0;
}
.tutorial-heading h1 {
  margin-top:24px;
  margin-bottom:20px;
  font-size:var(--size-h1);
}
.tutorial-heading__key {
  color:var(--c-lime);
}
.tutorial-heading__lede {
  max-width:34em;
  margin-bottom:0;
  color:var(--c-on-ink-soft);
}
.tutorial-outline {
  align-self:center;
  padding-left:32px;
  border-left:1px solid var(--a-line-ink-strong);
  color:var(--c-on-ink-soft);
  font-size:var(--size-small);
}
.tutorial-outline__label {
  font-family:var(--f-mono);
  color:var(--c-lime);
}
.tutorial-outline p {
  margin-top:18px;
  margin-bottom:18px;
  color:var(--c-on-ink);
  font-family:var(--f-display);
  font-size:var(--size-h3);
  font-weight:var(--weight-bold);
  line-height:1.5;
}
.tutorial-document {
  padding-bottom:24px;
}
.tutorial-step {
  padding-top:24px;
  padding-bottom:40px;
  border-bottom:1px solid var(--c-border-soft);
}
.tutorial-step__heading {
  display:flex;
  align-items:flex-start;
  gap:16px;
  margin-bottom:28px;
}
.tutorial-step__number {
  display:grid;
  place-items:center;
  flex-shrink:0;
  width:44px;
  height:44px;
  border-radius:var(--r-round);
  background:var(--c-lime-deep);
  color:var(--c-bg);
  font-family:var(--f-mono);
  font-size:var(--size-small);
}
.tutorial-step__heading h2 {
  margin-top:2px;
  margin-bottom:0;
}
.tutorial-step__layout {
  display:grid;
  grid-template-columns:minmax(0,1fr) 280px;
  align-items:start;
  gap:44px;
}
.tutorial-step__layout>* {
  min-width:0;
}
.tutorial-step__layout h3 {
  font-size:var(--size-h3);
}
.tutorial-download h2 {
  margin-top:0;
  font-size:var(--size-h3);
}
@media(max-width:960px) {
  .tutorial-heading {
    grid-template-columns:minmax(0,1fr);
    gap:28px;
  }
  .tutorial-outline {
    padding-left:20px;
  }
  .tutorial-outline p {
    margin-top:10px;
    margin-bottom:10px;
  }
  .tutorial-step__layout {
    grid-template-columns:minmax(0,1fr);
    gap:24px;
  }
}
@media(max-width:640px) {
  .tutorial-heading {
    margin-top:16px;
    padding:28px 22px;
  }
  .tutorial-heading h1 {
    overflow-wrap:anywhere;
  }
  .tutorial-step__heading {
    gap:12px;
  }
  .tutorial-step__number {
    width:36px;
    height:36px;
  }
  .tutorial-step__heading h2 {
    flex:1;
    min-width:0;
  }
  .tutorial-outline {
    font-size:var(--size-caption);
  }
}