.tutorial-hero{
  position:relative;
  overflow-x:clip;
  padding-top:clamp(58px,7vw,92px);
  padding-bottom:clamp(64px,8vw,108px);
  border-bottom:1px solid var(--color-border);
  background:
    radial-gradient(ellipse at 78% 68%,color-mix(in srgb,var(--color-accent) 12%,transparent),transparent 38%),
    repeating-radial-gradient(circle at 78% 64%,transparent 0,transparent 54px,color-mix(in srgb,var(--color-border) 28%,transparent) 55px,transparent 56px),
    var(--color-bg);
}
.tutorial-hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(420px,.92fr);
  align-items:center;
  gap:clamp(44px,7vw,104px);
}
.tutorial-hero-copy{
  min-width:0;
  max-width:720px;
}
.tutorial-hero-copy h1{
  margin-top:20px;
}
.tutorial-hero-lead{
  max-width:680px;
  margin-top:22px;
  color:var(--color-muted);
  font-size:17px;
}
.tutorial-hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:28px;
}
.tutorial-facts{
  display:flex;
  flex-wrap:wrap;
  gap:10px 22px;
  margin-top:25px;
  color:var(--color-muted);
  font-family:var(--font-mono);
  font-size:11px;
}
.tutorial-facts span{
  position:relative;
  display:inline-flex;
  align-items:center;
  min-height:24px;
}
.tutorial-facts span::before{
  content:"";
  width:5px;
  height:5px;
  margin-right:9px;
  flex-shrink:0;
  border-radius:50%;
  background:var(--color-accent);
  box-shadow:var(--shadow-accent);
}
.tutorial-route-panel{
  position:relative;
  min-width:0;
  height:390px;
  overflow:hidden;
  background:
    linear-gradient(color-mix(in srgb,var(--color-border) 24%,transparent) 1px,transparent 1px),
    linear-gradient(90deg,color-mix(in srgb,var(--color-border) 24%,transparent) 1px,transparent 1px),
    var(--color-panel);
  background-size:42px 42px;
}
.tutorial-route-label{
  position:absolute;
  top:20px;
  left:22px;
  z-index:4;
  color:var(--color-muted);
  font-size:10px;
  letter-spacing:.16em;
}
.tutorial-route{
  position:absolute;
  inset:48px 18px 24px;
  width:calc(100% - 36px);
  height:calc(100% - 72px);
  color:var(--color-accent-deep);
  opacity:.82;
}
.tutorial-route-core{
  position:absolute;
  left:50%;
  top:50%;
  z-index:5;
  display:grid;
  width:78px;
  height:78px;
  place-items:center;
  transform:translate(-50%,-50%);
  border:1px solid var(--color-accent);
  border-radius:32%;
  background:linear-gradient(145deg,var(--color-accent),var(--color-accent-deep));
  color:var(--color-white);
  box-shadow:var(--shadow-accent);
}
.tutorial-route-node{
  position:absolute;
  z-index:4;
  display:grid;
  min-width:68px;
  min-height:34px;
  place-items:center;
  padding:6px 12px;
  border:1px solid var(--color-border);
  border-radius:var(--radius-pill);
  background:var(--color-panel-raised);
  color:var(--color-text);
  font-family:var(--font-mono);
  font-size:11px;
  box-shadow:var(--shadow-panel);
}
.node-account{
  left:7%;
  bottom:13%;
}
.node-plan{
  left:29%;
  top:15%;
}
.node-sub{
  right:25%;
  bottom:14%;
}
.node-connect{
  right:5%;
  top:20%;
}
.tutorial-shell{
  padding-top:34px;
  padding-bottom:var(--section-space);
}
.tutorial-shell > .toc-tabs{
  top:12px;
}
.tutorial-content{
  width:100%;
  max-width:1040px;
  margin-inline:auto;
}
.guide-section{
  display:grid;
  grid-template-columns:96px minmax(0,1fr);
  gap:34px;
  padding-top:clamp(70px,8vw,108px);
  padding-bottom:clamp(70px,8vw,108px);
  border-bottom:1px solid var(--color-border);
}
.guide-step-mark{
  position:relative;
  display:flex;
  justify-content:center;
}
.guide-step-mark::before{
  content:"";
  position:absolute;
  top:46px;
  bottom:-108px;
  left:50%;
  width:1px;
  transform:translateX(-50%);
  background:linear-gradient(var(--color-accent-deep),var(--color-border));
}
.guide-step-mark span{
  position:sticky;
  top:88px;
  display:grid;
  width:58px;
  height:58px;
  place-items:center;
  align-self:start;
  border:1px solid var(--color-accent-deep);
  border-radius:32%;
  background:var(--color-panel-raised);
  color:var(--color-accent);
  font-family:var(--font-mono);
  font-size:11px;
  box-shadow:0 0 24px color-mix(in srgb,var(--color-accent) 13%,transparent);
}
.guide-copy{
  min-width:0;
}
.guide-copy > h2{
  max-width:790px;
}
.guide-copy > p:not(.eyebrow){
  max-width:790px;
  margin-top:18px;
  color:var(--color-muted);
  font-size:16px;
}
.guide-copy a:not(.btn){
  color:var(--color-accent);
  text-decoration:underline;
  text-underline-offset:3px;
}
.guide-copy .callout{
  max-width:790px;
  margin-top:28px;
}
.guide-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:16px;
  margin-top:30px;
}
.guide-text-link{
  display:inline-flex;
  align-items:center;
  min-height:38px;
  padding:6px 2px;
}
.subscription-example{
  display:grid;
  max-width:790px;
  gap:8px;
  margin-top:28px;
  padding:20px;
  overflow-x:auto;
  border:1px solid var(--color-border);
  border-radius:var(--radius-sm);
  background:var(--color-panel);
  -webkit-overflow-scrolling:touch;
}
.subscription-example span{
  color:var(--color-muted);
  font-size:10px;
  letter-spacing:.12em;
}
.subscription-example code{
  width:max-content;
  max-width:none;
  color:var(--color-text);
}
.platform-guides{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin-top:32px;
}
.platform-guide{
  min-width:0;
  padding:26px;
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  background:var(--color-panel);
}
.platform-guide-label{
  margin-bottom:12px;
  color:var(--color-accent);
  font-size:10px;
  letter-spacing:.14em;
}
.platform-guide h3{
  font-family:var(--font-body);
  font-size:20px;
  font-weight:650;
}
.platform-guide p:not(.platform-guide-label){
  margin-top:14px;
  color:var(--color-muted);
}
.verification-list{
  display:grid;
  gap:10px;
  max-width:790px;
  margin-top:30px;
}
.verification-list > div{
  display:grid;
  grid-template-columns:24px minmax(0,1fr);
  gap:13px;
  padding:18px;
  border:1px solid var(--color-border);
  border-radius:var(--radius-sm);
  background:var(--color-panel);
}
.verification-list p{
  color:var(--color-muted);
}
.verification-list strong{
  color:var(--color-text);
}
.verification-mark{
  position:relative;
  width:20px;
  height:20px;
  margin-top:3px;
  flex-shrink:0;
  border:1px solid var(--color-accent-deep);
  border-radius:50%;
}
.verification-mark::after{
  content:"";
  position:absolute;
  left:5px;
  top:4px;
  width:7px;
  height:4px;
  transform:rotate(-45deg);
  border-left:2px solid var(--color-accent);
  border-bottom:2px solid var(--color-accent);
}
.tutorial-finish{
  max-width:790px;
  margin:var(--section-space) auto 0;
  padding:34px;
  border:1px solid var(--color-accent-deep);
  border-radius:var(--radius-md);
  background:linear-gradient(140deg,var(--color-panel-raised),var(--color-panel));
  box-shadow:0 0 34px color-mix(in srgb,var(--color-accent) 10%,transparent);
}
.tutorial-finish p:last-child{
  margin-top:16px;
  color:var(--color-muted);
  font-size:16px;
}
@media (max-width:1000px){
  .tutorial-hero-grid{
    grid-template-columns:1fr;
  }
  .tutorial-hero-copy{
    margin-inline:auto;
    text-align:center;
  }
  .tutorial-hero-copy .badge{
    margin-inline:auto;
  }
  .tutorial-hero-actions,
  .tutorial-facts{
    justify-content:center;
  }
  .tutorial-route-panel{
    width:100%;
    max-width:680px;
    height:330px;
    margin-inline:auto;
  }
}
@media (max-width:768px){
  .tutorial-hero{
    padding-top:46px;
    padding-bottom:64px;
  }
  .tutorial-hero-lead{
    font-size:16px;
  }
  .tutorial-hero-actions{
    align-items:stretch;
    flex-direction:column;
    max-width:340px;
    margin-inline:auto;
    margin-top:26px;
  }
  .tutorial-facts{
    align-items:center;
    flex-direction:column;
    gap:5px;
  }
  .tutorial-route-panel{
    height:290px;
  }
  .tutorial-route-label{
    display:none;
  }
  .tutorial-route{
    inset:26px 8px 14px;
    width:calc(100% - 16px);
    height:calc(100% - 40px);
  }
  .tutorial-route-node{
    min-width:58px;
    min-height:30px;
    padding:5px 8px;
    font-size:10px;
  }
  .tutorial-route-core{
    width:66px;
    height:66px;
  }
  .tutorial-route-core svg{
    width:38px;
    height:38px;
  }
  .guide-section{
    grid-template-columns:1fr;
    gap:18px;
    padding-top:70px;
    padding-bottom:70px;
  }
  .guide-step-mark{
    justify-content:flex-start;
  }
  .guide-step-mark::before{
    display:none;
  }
  .guide-step-mark span{
    position:static;
    width:auto;
    height:30px;
    padding-inline:12px;
    border-radius:var(--radius-pill);
  }
  .platform-guides{
    grid-template-columns:1fr;
  }
}
@media (max-width:520px){
  .tutorial-hero-grid{
    gap:38px;
  }
  .tutorial-route-panel{
    height:250px;
  }
  .node-account{
    left:3%;
    bottom:8%;
  }
  .node-plan{
    left:18%;
    top:11%;
  }
  .node-sub{
    right:16%;
    bottom:9%;
  }
  .node-connect{
    right:2%;
    top:13%;
  }
  .platform-guide{
    padding:21px;
  }
  .tutorial-finish{
    padding:24px;
  }
  .guide-actions{
    align-items:stretch;
    flex-direction:column;
  }
  .guide-actions .btn{
    width:100%;
  }
  .guide-text-link{
    align-self:flex-start;
  }
}
@media (max-width:370px){
  .tutorial-route-panel{
    height:226px;
  }
  .tutorial-route-node{
    min-width:52px;
    padding-inline:6px;
  }
  .tutorial-route-core{
    width:58px;
    height:58px;
  }
}