.tutorial-hero{
  position:relative;
  max-width:100%;
  overflow-x:clip;
  border-bottom:1px solid var(--color-border);
  background:
    radial-gradient(circle at 78% 24%,var(--color-accent-halo),transparent 34%),
    linear-gradient(180deg,var(--color-glow),var(--color-page));
}
.tutorial-halo{
  position:absolute;
  top:10%;
  right:4%;
  width:min(42vw,520px);
  aspect-ratio:1;
  border:1px dashed var(--color-accent-line);
  border-radius:50%;
  opacity:.5;
}
.tutorial-halo::before,
.tutorial-halo::after{
  content:"";
  position:absolute;
  border:1px solid var(--color-accent-line);
  border-radius:50%;
}
.tutorial-halo::before{inset:18%}
.tutorial-halo::after{inset:38%}
.tutorial-hero__inner{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);
  gap:clamp(36px,7vw,92px);
  align-items:center;
  min-height:620px;
  padding-top:clamp(58px,7vw,92px);
  padding-bottom:clamp(66px,8vw,106px);
}
.tutorial-hero__copy{min-width:0}
.tutorial-hero__copy h1{
  max-width:720px;
  margin-top:22px;
  margin-bottom:18px;
}
.tutorial-hero__lede{
  max-width:680px;
  color:var(--color-muted);
  font-size:clamp(17px,1.8vw,20px);
}
.tutorial-hero__copy .button-row{margin-top:28px}
.tutorial-facts{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin:30px 0 0;
  padding:18px 0 0;
  border-top:1px dashed var(--color-border);
  list-style:none;
}
.tutorial-facts li{min-width:0}
.tutorial-facts strong{
  display:block;
  margin-bottom:3px;
  color:var(--color-accent-dark);
  font-size:14px;
}
.tutorial-facts span{
  display:block;
  color:var(--color-muted);
  font-size:12px;
}
.tutorial-ticket{
  position:relative;
  min-width:0;
  padding:10px;
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  background:var(--color-surface-alt);
  box-shadow:var(--shadow-frame);
}
.tutorial-ticket::before{
  content:"";
  position:absolute;
  top:-10px;
  right:24px;
  width:74px;
  height:20px;
  border:1px solid var(--color-accent-line);
  border-radius:var(--radius-xs);
  background:linear-gradient(90deg,var(--color-accent),var(--color-accent-end));
  box-shadow:var(--shadow-card);
}
.tutorial-ticket__head{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:18px 18px 15px;
  border-bottom:1px solid var(--color-border);
  border-radius:var(--radius-md) var(--radius-md) 0 0;
  background:var(--color-surface);
}
.tutorial-ticket__head .mono{
  color:var(--color-muted);
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
}
.tutorial-ticket__route{
  display:flex;
  align-items:center;
  gap:7px;
  padding:28px 18px;
  overflow-x:auto;
  background:var(--color-surface);
  scrollbar-width:thin;
}
.tutorial-ticket__route span{
  display:inline-flex;
  min-width:max-content;
  min-height:34px;
  align-items:center;
  padding:6px 10px;
  border:1px solid var(--color-accent-line);
  border-radius:var(--radius-sm);
  background:var(--color-accent-soft);
  color:var(--color-accent-dark);
  font-size:12px;
  font-weight:750;
}
.tutorial-ticket__route i{
  width:20px;
  min-width:20px;
  height:1px;
  background:var(--color-accent-line);
}
.tutorial-ticket__facts{
  display:grid;
  gap:1px;
  margin:0;
  padding:0 18px;
  background:var(--color-border);
}
.tutorial-ticket__facts div{
  display:grid;
  grid-template-columns:68px minmax(0,1fr);
  gap:12px;
  padding:13px 0;
  background:var(--color-surface);
}
.tutorial-ticket__facts dt{
  color:var(--color-muted);
  font:650 11px/1.5 var(--font-mono);
}
.tutorial-ticket__facts dd{
  min-width:0;
  margin:0;
  overflow-wrap:anywhere;
  font-size:13px;
  font-weight:650;
}
.tutorial-ticket>p{
  margin:0;
  padding:18px;
  border-radius:0 0 var(--radius-md) var(--radius-md);
  background:var(--color-surface);
  color:var(--color-muted);
  font-size:13px;
}
.tutorial-reading{
  max-width:940px;
  padding-top:clamp(52px,7vw,88px);
  padding-bottom:var(--section-space);
}
.tutorial-reading>.callout{margin-top:0}
.tutorial-reading>.callout a{
  color:var(--color-accent-dark);
  text-decoration:underline;
  text-underline-offset:3px;
}
.tutorial-step{
  display:grid;
  grid-template-columns:88px minmax(0,1fr);
  gap:28px;
  padding-top:64px;
  padding-bottom:24px;
  border-bottom:1px solid var(--color-border);
}
.tutorial-step:last-child{border-bottom:0}
.tutorial-step__mark{
  position:sticky;
  top:86px;
  display:grid;
  width:72px;
  height:72px;
  place-items:center;
  align-self:start;
  border:1px solid var(--color-accent-line);
  border-radius:50%;
  background:linear-gradient(145deg,var(--color-surface),var(--color-surface-alt));
  color:var(--color-accent-dark);
  box-shadow:var(--shadow-float);
  font:750 12px/1 var(--font-mono);
}
.tutorial-step__body{min-width:0}
.tutorial-step__body h2{margin-top:0}
.tutorial-step__body>p{
  color:var(--color-muted);
  line-height:1.85;
}
.tutorial-step__body>p strong{color:var(--color-text)}
.tutorial-action{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:20px;
  align-items:center;
  margin-top:28px;
  padding:18px 20px;
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  background:var(--color-surface-alt);
}
.tutorial-action strong{
  display:block;
  margin-bottom:3px;
  color:var(--color-accent-dark);
}
.tutorial-action p{
  margin:0;
  color:var(--color-muted);
  font-size:14px;
}
.platform-guide-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin-top:30px;
}
.platform-guide{
  min-width:0;
  padding:22px;
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  background:var(--color-surface);
  box-shadow:var(--shadow-card);
}
.platform-guide:nth-child(even){transform:translateY(10px)}
.platform-guide__head{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
}
.platform-guide__icon{
  display:grid;
  width:42px;
  height:42px;
  flex:none;
  place-items:center;
  border-radius:var(--radius-sm);
  background:var(--color-accent-soft);
  color:var(--color-accent-dark);
}
.platform-guide__icon svg{
  width:24px;
  height:24px;
}
.platform-guide h3{
  margin:0;
  font-size:21px;
}
.platform-guide p{
  color:var(--color-muted);
  font-size:14px;
  line-height:1.75;
}
.platform-guide p:last-child{margin-bottom:0}
.verification-sheet{
  margin-top:30px;
  padding:24px;
  border:1px solid var(--color-accent-line);
  border-radius:var(--radius-md);
  background:var(--color-surface-alt);
  box-shadow:var(--shadow-card);
}
.verification-sheet h3{font-size:22px}
.verification-sheet dl{
  display:grid;
  gap:1px;
  margin:18px 0 0;
  background:var(--color-border);
}
.verification-sheet dl div{
  display:grid;
  grid-template-columns:120px minmax(0,1fr);
  gap:18px;
  padding:14px 16px;
  background:var(--color-surface);
}
.verification-sheet dt{
  color:var(--color-accent-dark);
  font-weight:750;
}
.verification-sheet dd{
  margin:0;
  color:var(--color-muted);
}
.tutorial-finish{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:18px;
  align-items:center;
  margin-top:34px;
  padding:24px;
  border:1px solid var(--color-accent-line);
  border-radius:var(--radius-lg);
  background:linear-gradient(135deg,var(--color-surface-alt),var(--color-surface));
  box-shadow:var(--shadow-float);
}
.tutorial-finish__seal{
  display:grid;
  width:58px;
  height:58px;
  place-items:center;
  border:3px solid var(--color-white);
  border-radius:50%;
  background:linear-gradient(135deg,var(--color-accent),var(--color-accent-end));
  color:var(--color-white);
  box-shadow:var(--shadow-button);
  font:800 25px/1 var(--font-mono);
}
.tutorial-finish h3{
  margin-bottom:4px;
  font-size:22px;
}
.tutorial-finish p{
  margin:0;
  color:var(--color-muted);
}
@media (max-width:980px){
  .tutorial-hero__inner{
    grid-template-columns:1fr;
    min-height:0;
  }
  .tutorial-ticket{
    width:100%;
    max-width:680px;
  }
}
@media (max-width:768px){
  .tutorial-halo{display:none}
  .tutorial-facts{grid-template-columns:1fr}
  .tutorial-step{
    grid-template-columns:1fr;
    gap:18px;
    padding-top:52px;
  }
  .tutorial-step__mark{
    position:static;
    width:58px;
    height:58px;
  }
  .platform-guide-grid{grid-template-columns:1fr}
  .platform-guide:nth-child(even){transform:none}
}
@media (max-width:640px){
  .tutorial-hero__inner{
    padding-top:36px;
    padding-bottom:58px;
  }
  .tutorial-ticket__facts div{
    grid-template-columns:1fr;
    gap:3px;
  }
  .tutorial-action{grid-template-columns:1fr}
  .tutorial-action .btn{width:100%}
  .verification-sheet{padding:18px}
  .verification-sheet dl div{
    grid-template-columns:1fr;
    gap:4px;
  }
  .tutorial-finish{
    grid-template-columns:1fr;
    align-items:start;
  }
}