.tutorial-hero{
  position:relative;
  overflow:hidden;
  padding-top:clamp(54px,8vw,96px);
  padding-bottom:clamp(62px,9vw,108px);
  background:
    radial-gradient(circle at top left,var(--color-panel),transparent 48%),
    linear-gradient(135deg,var(--color-panel),var(--color-wash-mint) 58%,var(--color-wash-blue));
}
.tutorial-hero::after{
  position:absolute;
  right:var(--gutter);
  bottom:24px;
  width:180px;
  height:180px;
  border:1px solid var(--color-border);
  border-radius:50%;
  box-shadow:
    0 0 0 28px var(--color-shadow-soft),
    0 0 0 56px var(--color-shadow-soft);
  content:"";
  pointer-events:none;
}
.tutorial-hero-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(360px,.82fr);
  gap:clamp(36px,6vw,84px);
  align-items:center;
}
.tutorial-intro{max-width:690px}
.tutorial-intro h1{max-width:680px}
.tutorial-intro .lead{max-width:650px;margin-top:22px}
.tutorial-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:28px;
  margin-bottom:26px;
}
.workflow-card{
  padding:clamp(22px,3vw,32px);
  border:1px solid var(--color-border);
  border-radius:var(--radius-xl);
  background:var(--color-panel);
  box-shadow:var(--shadow-layered);
  transform:rotate(1deg);
}
.workflow-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding-bottom:18px;
  border-bottom:1px solid var(--color-border);
  color:var(--color-muted);
  font-size:.82rem;
  font-weight:700;
}
.workflow-list{
  display:grid;
  gap:0;
  padding:0;
  list-style:none;
}
.workflow-list li{
  display:grid;
  grid-template-columns:44px minmax(0,1fr);
  gap:14px;
  align-items:center;
  padding-top:17px;
  padding-bottom:17px;
  border-bottom:1px solid var(--color-border);
}
.workflow-list li:last-child{border-bottom:0}
.workflow-index{
  display:grid;
  width:44px;
  height:44px;
  place-items:center;
  border-radius:var(--radius-sm);
  background:var(--color-panel-soft);
  color:var(--color-accent-deep);
  font-family:var(--font-mono);
  font-size:.78rem;
  font-weight:800;
}
.workflow-list strong,.workflow-list span{display:block}
.workflow-list li div>span{
  margin-top:2px;
  color:var(--color-muted);
  font-size:.86rem;
}
.workflow-card .setting-row{margin-top:18px}
.tutorial-toc-wrap{
  position:relative;
  z-index:5;
  margin-top:-25px;
}
.tutorial-reading{max-width:980px}
.tutorial-reading>.prose{max-width:820px}
.platform-callout{margin-bottom:34px}
.prep-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  max-width:980px;
  margin-top:34px;
}
.prep-grid .card{box-shadow:var(--shadow-soft)}
.prep-grid h3{margin-bottom:8px;font-size:1.05rem}
.step-heading{
  display:flex;
  align-items:flex-start;
  gap:20px;
  margin-bottom:34px;
}
.step-number{
  display:grid;
  width:58px;
  height:58px;
  flex-shrink:0;
  place-items:center;
  border:1px solid var(--color-accent);
  border-radius:var(--radius-md);
  background:var(--color-panel);
  color:var(--color-accent-deep);
  box-shadow:var(--shadow-mid);
  font-weight:800;
}
.step-heading .eyebrow{margin-bottom:8px}
.result-strip{
  display:flex;
  max-width:900px;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  margin-top:34px;
  margin-bottom:24px;
  padding:20px 22px;
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  background:var(--color-panel);
  box-shadow:var(--shadow-mid);
}
.result-strip strong,.result-strip span{display:block}
.result-strip>div:first-child span{
  margin-top:3px;
  color:var(--color-muted);
}
.status-dot-group{
  display:flex;
  flex-shrink:0;
  align-items:center;
  gap:9px;
  color:var(--color-accent-deep);
  font-size:.76rem;
  font-weight:700;
}
.status-dot{
  width:9px;
  height:9px;
  flex-shrink:0;
  border-radius:50%;
  background:var(--color-success);
  box-shadow:0 0 0 5px var(--color-success-ring);
}
.mode-comparison{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
  margin-top:36px;
}
.mode-comparison .card{display:flex;flex-direction:column}
.mode-comparison h3{margin-top:14px;margin-bottom:8px}
.mode-comparison .setting-row{margin-top:auto}
.connection-state{
  display:flex;
  max-width:930px;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  margin-top:38px;
}
.connection-state-copy{max-width:580px}
.connection-state-copy h3{margin-bottom:10px}
.connection-indicator{
  display:flex;
  min-width:220px;
  align-items:center;
  gap:14px;
  padding:16px;
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  background:var(--color-bg);
}
.connection-light{
  width:18px;
  height:18px;
  flex-shrink:0;
  border:5px solid var(--color-panel);
  border-radius:50%;
  background:var(--color-success);
  box-shadow:0 0 0 4px var(--color-success-ring);
}
.connection-indicator strong,.connection-indicator span{display:block}
.connection-indicator span{
  margin-top:3px;
  color:var(--color-muted);
  font-size:.7rem;
}
.verification-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  margin-top:36px;
  margin-bottom:28px;
}
.verification-item{
  display:flex;
  gap:14px;
  padding:22px;
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  background:var(--color-panel);
  box-shadow:var(--shadow-soft);
}
.verification-mark{
  display:grid;
  width:34px;
  height:34px;
  flex-shrink:0;
  place-items:center;
  border-radius:var(--radius-pill);
  background:var(--color-accent);
  color:var(--color-panel);
  font-family:var(--font-mono);
  font-size:.82rem;
  font-weight:800;
}
.verification-item h3{margin-bottom:7px;font-size:1.05rem}
.verification-item p{color:var(--color-muted);font-size:.9rem}
.advanced-note{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  margin-top:36px;
}
.advanced-note>div{max-width:650px}
.advanced-note h3{margin-bottom:9px}
.advanced-note .eyebrow{margin-bottom:9px}

@media (max-width:900px){
  .tutorial-hero-grid{grid-template-columns:1fr}
  .tutorial-intro{max-width:760px}
  .workflow-card{
    max-width:720px;
    transform:none;
  }
  .prep-grid,.verification-grid{grid-template-columns:1fr}
  .connection-state{align-items:flex-start;flex-direction:column}
  .connection-indicator{width:100%}
}
@media (max-width:720px){
  .tutorial-hero::after{display:none}
  .tutorial-actions{align-items:stretch;flex-direction:column}
  .tutorial-actions .button{width:100%}
  .step-heading{gap:14px}
  .step-number{
    width:46px;
    height:46px;
    border-radius:var(--radius-sm);
  }
  .result-strip{
    align-items:flex-start;
    flex-direction:column;
  }
  .status-dot-group{flex-shrink:1}
  .mode-comparison{grid-template-columns:1fr}
  .advanced-note{align-items:flex-start;flex-direction:column}
  .advanced-note .button{width:100%}
}
@media (max-width:480px){
  .tutorial-hero{padding-top:44px;padding-bottom:68px}
  .workflow-card{padding:18px}
  .workflow-list li{
    grid-template-columns:38px minmax(0,1fr);
    gap:11px;
  }
  .workflow-index{
    width:38px;
    height:38px;
  }
  .tutorial-toc-wrap{margin-top:-20px}
  .step-heading{align-items:center}
  .step-heading .eyebrow{display:none}
  .result-strip,.verification-item{padding:18px}
}