.tutorial-hero{
  position:relative;
  max-width:100%;
  overflow-x:clip;
  padding-top:72px;
  padding-bottom:64px;
  background-image:
    linear-gradient(var(--color-grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--color-grid) 1px,transparent 1px),
    linear-gradient(180deg,var(--color-hero-top),var(--color-hero-bottom));
  background-size:48px 48px,48px 48px,100% 100%;
}
.tutorial-hero-inner{
  position:relative;
  z-index:2;
}
.tutorial-intro{
  position:relative;
  z-index:2;
  max-width:820px;
  margin-inline:auto;
  text-align:center;
}
.tutorial-intro h1{
  margin-top:18px;
  margin-bottom:0;
}
.tutorial-lede{
  max-width:740px;
  margin:18px auto 0;
  font-size:18px;
}
.tutorial-decor{
  position:absolute;
  inset:0;
  overflow:hidden;
}
.tutorial-orbit{
  position:absolute;
  display:block;
  border:1px dashed var(--color-border);
  border-radius:50%;
}
.tutorial-orbit-a{
  top:12%;
  left:-8%;
  width:34vw;
  aspect-ratio:1;
}
.tutorial-orbit-b{
  right:-5%;
  bottom:-28%;
  width:29vw;
  aspect-ratio:1;
  background:radial-gradient(circle,var(--color-success-soft),transparent 68%);
}
.tutorial-route{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  max-width:980px;
  margin:54px auto 0;
  padding:22px;
  border:1px solid var(--color-border);
  border-radius:var(--radius-2xl);
  background:var(--color-panel);
  box-shadow:var(--shadow-window);
}
.tutorial-route::before{
  content:"";
  position:absolute;
  top:38px;
  left:10%;
  right:10%;
  height:1px;
  background:var(--color-border);
}
.route-stop{
  position:relative;
  z-index:1;
  display:flex;
  min-width:0;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.route-mark{
  width:32px;
  height:32px;
  margin-bottom:10px;
  border:7px solid var(--color-panel);
  border-radius:50%;
  background:var(--color-panel-2);
  box-shadow:0 0 0 1px var(--color-border);
}
.route-stop.is-current .route-mark{
  background:var(--color-success);
  box-shadow:0 0 0 1px var(--color-success);
}
.route-stop strong{
  font-size:14px;
  font-weight:500;
}
.route-stop small{
  color:var(--color-muted);
  font-size:12px;
}
.tutorial-content{
  padding-top:72px;
  padding-bottom:24px;
}
.tutorial-manual{
  max-width:980px;
  margin-inline:auto;
}
.tutorial-manual .toc-tabs{
  margin-bottom:64px;
}
.tutorial-section{
  position:relative;
  padding-top:12px;
  padding-bottom:72px;
}
.tutorial-section + .tutorial-section{
  border-top:1px solid var(--color-border-soft);
  padding-top:72px;
}
.tutorial-section p{
  margin-bottom:20px;
}
.step-heading{
  display:grid;
  grid-template-columns:72px minmax(0,1fr);
  gap:22px;
  align-items:start;
  margin-bottom:28px;
}
.step-heading h2{
  margin-bottom:0;
}
.step-heading .section-kicker{
  margin-bottom:8px;
}
.step-index{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  padding:6px 10px;
  border:1px dashed var(--color-success);
  border-radius:var(--radius-pill);
  background:var(--color-success-soft);
  color:var(--color-forest);
  font:500 12px/1 var(--font-mono);
}
.step-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:18px;
  margin-top:28px;
}
.platform-instructions{
  display:grid;
  gap:20px;
  margin:32px 0;
}
.platform-guide{
  padding:28px;
  border:1px solid var(--color-border-soft);
  border-radius:var(--radius-xl);
  background:var(--color-panel);
  box-shadow:var(--shadow-panel);
}
.platform-guide:nth-child(even){
  background:var(--color-panel-3);
}
.platform-guide-head{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:18px;
}
.platform-guide-head svg{
  width:28px;
  height:28px;
  flex:0 0 28px;
  color:var(--color-accent-dark);
}
.platform-guide-head h3{
  margin-bottom:0;
}
.tutorial-section pre{
  margin:24px 0;
}
.tutorial-manual .callout{
  margin:28px 0;
}
.tutorial-manual .callout p{
  margin-top:6px;
  margin-bottom:0;
}
.tutorial-manual .promo-block{
  margin-top:16px;
}
@media (max-width:768px){
  .tutorial-hero{
    padding-top:56px;
    padding-bottom:48px;
  }
  .tutorial-decor{
    display:none;
  }
  .tutorial-route{
    grid-template-columns:1fr;
    gap:12px;
    margin-top:40px;
    padding:16px;
  }
  .tutorial-route::before{
    top:28px;
    bottom:28px;
    left:31px;
    right:auto;
    width:1px;
    height:auto;
  }
  .route-stop{
    min-height:48px;
    padding-left:58px;
    align-items:flex-start;
    justify-content:center;
    text-align:left;
  }
  .route-mark{
    position:absolute;
    left:0;
    top:8px;
    margin:0;
  }
  .tutorial-content{
    padding-top:56px;
  }
  .tutorial-manual .toc-tabs{
    margin-bottom:48px;
  }
  .tutorial-section{
    padding-bottom:56px;
  }
  .tutorial-section + .tutorial-section{
    padding-top:56px;
  }
  .step-heading{
    grid-template-columns:1fr;
    gap:14px;
  }
  .step-index{
    justify-self:start;
  }
}
@media (max-width:640px){
  .tutorial-lede{
    font-size:17px;
  }
  .tutorial-content{
    padding-top:40px;
  }
  .platform-guide{
    padding:20px;
  }
  .platform-guide-head{
    align-items:flex-start;
  }
  .platform-guide-head h3{
    font-size:21px;
  }
  .step-actions{
    align-items:stretch;
    flex-direction:column;
  }
  .step-actions .article-link{
    display:inline-flex;
    min-height:44px;
    align-items:center;
  }
}