.tutorial-intro {
  position:relative;
  isolation:isolate;
}
.tutorial-intro::before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  right:0;
  width:38%;
  height:290px;
  background:var(--grad-soft);
  pointer-events:none;
}
.tutorial-opening {
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:64px;
  align-items:center;
}
.tutorial-opening > * {
  min-width:0;
}
.tutorial-entry {
  margin-top:24px;
}
.tutorial-ready h2 {
  margin-top:12px;
  margin-bottom:16px;
  font-size:var(--f-26);
}
.tutorial-ready > p {
  color:var(--muted);
}
.tutorial-ready > p:last-child {
  margin-top:16px;
  margin-bottom:0;
}
.tutorial-step {
  display:grid;
  grid-template-columns:minmax(0,300px) minmax(0,760px);
  gap:80px;
  justify-content:space-between;
  align-items:start;
}
.tutorial-number {
  display:inline-block;
  margin-bottom:20px;
  color:var(--accent-dark);
  font-family:var(--font-mono);
  font-size:var(--f-18);
}
.tutorial-rail h2 {
  scroll-margin-top:24px;
}
.tutorial-rail > .panel {
  margin-top:24px;
}
.tutorial-rail > .panel p {
  color:var(--muted);
}
.tutorial-step .prose > p:first-child {
  margin-top:0;
}
.tutorial-step .prose > h3:first-of-type {
  margin-top:1.2em;
}
@media (max-width:900px) {
  .tutorial-opening {
    grid-template-columns:minmax(0,1fr);
    gap:32px;
  }
  .tutorial-step {
    grid-template-columns:minmax(0,1fr);
    gap:28px;
  }
  .tutorial-rail > .box,
  .tutorial-rail > .feature-frame,
  .tutorial-rail > .panel {
    max-width:520px;
  }
}
@media (max-width:640px) {
  .tutorial-intro::before {
    width:24%;
    height:180px;
  }
  .tutorial-entry {
    gap:10px;
  }
  .tutorial-number {
    margin-bottom:12px;
  }
}