:root{
  --tutorial-line:var(--color-map-grid);
  --tutorial-marker:var(--color-blue);
  --tutorial-note:var(--color-panel);
  --tutorial-reading:760px;
}
.tutorial-hero{
  padding-top:64px;
  padding-bottom:52px;
}
.tutorial-hero .hero-subtitle{
  max-width:620px;
}
.tutorial-facts{
  margin-top:22px;
}
.tutorial-toc{
  width:min(100%,var(--content-width));
  margin-inline:auto;
  justify-content:center;
  border-top:1px solid var(--color-border);
  border-bottom:1px solid var(--color-border);
}
.tutorial-toc a{
  font-weight:650;
}
.tutorial-section{
  padding-top:72px;
  padding-bottom:72px;
}
.tutorial-section--panel{
  background:var(--color-panel);
}
.tutorial-layout{
  display:grid;
  grid-template-columns:110px minmax(0,var(--tutorial-reading)) minmax(180px,250px);
  gap:28px;
  align-items:start;
}
.tutorial-marker{
  display:flex;
  align-items:center;
  gap:10px;
  padding-top:8px;
  color:var(--color-blue);
}
.tutorial-marker .mono{
  font-size:11px;
  letter-spacing:.08em;
  white-space:nowrap;
}
.tutorial-marker .status-dot{
  width:7px;
  height:7px;
  flex:0 0 auto;
}
.tutorial-copy{
  min-width:0;
}
.section-kicker{
  color:var(--color-blue);
  font:700 12px var(--font-mono);
  letter-spacing:.14em;
  text-transform:uppercase;
}
.tutorial-copy h2{
  margin-top:9px;
  font-size:clamp(28px,3.5vw,42px);
}
.tutorial-copy p{
  margin-top:18px;
  font-size:16px;
}
.tutorial-copy .tutorial-link{
  margin-top:24px;
}
.tutorial-note{
  position:relative;
  min-width:0;
  padding:18px;
  background:var(--tutorial-note);
  border-radius:var(--radius-md);
}
.tutorial-note::before{
  content:"";
  position:absolute;
  top:0;
  left:-14px;
  width:1px;
  height:100%;
  background:var(--tutorial-line);
}
.tutorial-note .mono{
  color:var(--color-muted);
  font-size:11px;
  letter-spacing:.1em;
}
.tutorial-note p{
  margin-top:9px;
  font-size:13px;
}
.text-link{
  color:var(--color-blue);
  font-weight:700;
  text-decoration:underline;
  text-decoration-color:var(--color-border);
  text-underline-offset:3px;
}
.text-link:hover{
  color:var(--color-accent-dark);
}
.tutorial-end{
  background:var(--color-bg);
}
.tutorial-end-panel{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  padding:32px 36px;
  background:var(--color-text);
}
.tutorial-end-panel h2{
  margin-top:8px;
  color:var(--color-bg);
  font-size:clamp(25px,3vw,36px);
}
.tutorial-end-panel p{
  max-width:620px;
  margin-top:10px;
  color:var(--color-panel-strong);
}
.tutorial-end-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  flex:0 0 auto;
}
.tutorial-end-actions .btn-secondary{
  background:var(--color-bg);
}
@media (max-width:1000px){
  .tutorial-layout{
    grid-template-columns:92px minmax(0,1fr);
  }
  .tutorial-note{
    grid-column:2;
    justify-self:start;
    max-width:360px;
  }
  .tutorial-note::before{
    display:none;
  }
}
@media (max-width:640px){
  .tutorial-hero{
    padding-top:40px;
    padding-bottom:36px;
  }
  .tutorial-toc{
    justify-content:flex-start;
    margin-inline:0;
    border-radius:0;
  }
  .tutorial-section{
    padding-top:52px;
    padding-bottom:52px;
  }
  .tutorial-layout{
    display:block;
  }
  .tutorial-marker{
    margin-bottom:18px;
  }
  .tutorial-copy h2{
    font-size:30px;
  }
  .tutorial-copy p{
    font-size:15px;
  }
  .tutorial-note{
    margin-top:24px;
    max-width:none;
  }
  .tutorial-end-panel{
    display:grid;
    padding:26px 22px;
  }
  .tutorial-end-actions{
    width:100%;
  }
  .tutorial-end-actions .btn{
    flex:1 1 150px;
  }
}
@media (prefers-reduced-motion:reduce){
  .tutorial-toc{
    scroll-behavior:auto;
  }
}