.tutorial-section { scroll-margin-top: 130px; }
.tutorial-list { display: grid; gap: 1.35rem; }
.tutorial-card {
  overflow: hidden; border: 1px solid var(--line); border-radius: 20px;
  background: var(--surface); box-shadow: 0 10px 30px rgba(24,39,45,.07);
}
.tutorial-card.completed { border-color: color-mix(in srgb,var(--se) 72%,var(--line)); }
.tutorial-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding: 1.25rem 1.35rem .45rem;
}
.tutorial-head h3 { margin: .15rem 0 0; font-size: clamp(1.25rem,2.4vw,1.75rem); line-height: 1.25; }
.tutorial-kicker { margin: 0; color: var(--focus); font: 800 .67rem/1.2 var(--mono,monospace); letter-spacing: .1em; }
.tutorial-status {
  flex: 0 0 auto; padding: .28rem .58rem; border: 1px solid var(--line); border-radius: 999px;
  color: var(--muted); font: 750 .65rem/1.2 var(--mono,monospace);
}
.tutorial-card.completed .tutorial-status { border-color: var(--se); color: var(--se); }
.tutorial-intro { max-width: 880px; margin: 0; padding: 0 1.35rem 1.1rem; color: var(--muted); }
.tutorial-media { margin: 0 1.35rem 1rem; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--graphite); }
.tutorial-media img { display: block; width: 100%; max-height: 390px; object-fit: contain; }
.tutorial-media figcaption { padding: .55rem .75rem; color: #c1d0d4; font-size: .75rem; }
.tutorial-stage { margin: 0 1.35rem; padding: 1.1rem; border: 1px solid var(--line); border-radius: 15px; background: var(--surface-2); }
.tutorial-stage h4 { margin: .1rem 0 .35rem; font-size: 1.08rem; }
.tutorial-stage p { margin: .25rem 0; }
.tutorial-controls { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; }
.tutorial-controls button, .tutorial-layer-tabs button, .tutorial-compare-tabs button, .tutorial-check-options button {
  min-height: 44px; height: auto; padding: .5rem .72rem; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); color: var(--ink); text-align: left;
}
.tutorial-controls button:hover, .tutorial-layer-tabs button:hover, .tutorial-compare-tabs button:hover, .tutorial-check-options button:hover { border-color: var(--beam); background: var(--beam-soft); }
.tutorial-controls button:disabled { cursor: default; opacity: .45; }
.tutorial-why { display: grid; grid-template-columns: auto 1fr; gap: .7rem; margin: 1rem 1.35rem 0; padding: .75rem .85rem; border-left: 4px solid var(--beam); border-radius: 10px; background: var(--beam-soft); }
.tutorial-why b { color: var(--focus); }
.tutorial-takeaway { display: grid; grid-template-columns: auto 1fr; gap: .8rem; align-items: center; margin: .8rem 1.35rem 1.25rem; padding: .75rem .85rem; border-radius: 10px; background: var(--graphite); color: #fff; }
.tutorial-takeaway span { color: #8ee2e8; font: 750 .65rem/1.2 var(--mono,monospace); letter-spacing: .07em; }
.tutorial-takeaway strong { font-size: .9rem; }
.tutorial-reflection { margin: 0 1.35rem 1.25rem; padding: .65rem .8rem; border: 1px dashed var(--line); border-radius: 10px; }
.tutorial-reflection summary { cursor: pointer; color: var(--muted); font-weight: 800; }
.tutorial-check-options { display: grid; grid-template-columns: repeat(auto-fit,minmax(170px,1fr)); gap: .45rem; }
.tutorial-check-options button.correct { border-color: var(--se); box-shadow: inset 3px 0 var(--se); }
.tutorial-check-options button.wrong { border-color: var(--danger); box-shadow: inset 3px 0 var(--danger); }
.tutorial-check-feedback { margin-top: .55rem; color: var(--muted); font-size: .84rem; }
.tutorial-error { padding: 1rem; border: 1px solid var(--danger); border-radius: 12px; background: var(--surface); }

/* 1. Mechanism animation */
.mechanism-stage { display: grid; grid-template-columns: minmax(190px,.7fr) 1fr; gap: 1rem; align-items: center; }
.tutorial-step-visual { position: relative; min-height: 170px; overflow: hidden; border-radius: 12px; background: var(--graphite); }
.tutorial-step-visual::before { content: ""; position: absolute; inset: 18% 12%; border: 1px solid color-mix(in srgb,var(--beam) 65%,transparent); border-radius: 50%; transform: scale(calc(.65 + var(--step,0)*.35)); }
.tutorial-step-visual i { position: absolute; left: calc(12% + var(--step,0)*70%); top: 47%; width: 13px; height: 13px; border-radius: 50%; background: var(--beam); box-shadow: 0 0 18px var(--beam); transition: left .35s; }
.tutorial-step-visual span { position: absolute; left: 10%; right: 10%; top: 52%; height: 2px; background: linear-gradient(90deg,var(--beam),var(--focus)); }
.tutorial-step-visual b { position: absolute; inset: 25%; border: 1px dashed rgba(255,255,255,.32); transform: rotate(calc(var(--step,0)*45deg)); transition: transform .35s; }
.tutorial-step-count { color: var(--focus); font: 800 .66rem/1.2 var(--mono,monospace); letter-spacing: .08em; }

/* 2. Annotated layers */
.tutorial-layer-tabs, .tutorial-compare-tabs { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: .8rem; }
.tutorial-layer-tabs button[aria-selected="true"], .tutorial-compare-tabs button[aria-selected="true"] { border-color: var(--beam); background: var(--beam-soft); font-weight: 850; }
.tutorial-layer-stage { position: relative; min-height: 180px; display: grid; grid-template-columns: 150px 1fr; align-items: center; gap: 1rem; overflow: hidden; padding: 1rem; border-radius: 12px; background: var(--surface); }
.layer-orbit { width: 120px; height: 120px; justify-self: center; border: 2px solid var(--beam); border-radius: 50%; box-shadow: 0 0 0 calc(var(--layer,0)*8px) color-mix(in srgb,var(--focus) 14%,transparent),inset 0 0 25px color-mix(in srgb,var(--beam) 22%,transparent); }
.tutorial-layer-body { color: var(--muted); }

/* 3. Parameter explorer */
.tutorial-explorer-visual { position: relative; min-height: 170px; overflow: hidden; padding: 1rem; border-radius: 12px; background: var(--graphite); color: #fff; }
.explorer-beam { position: absolute; left: 10%; top: 20%; width: calc(18% + var(--value,0)*65%); height: 60%; border-right: 3px solid var(--beam); background: linear-gradient(90deg,transparent,color-mix(in srgb,var(--beam) 24%,transparent)); transition: width .25s; }
.tutorial-readouts { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: .7rem; }
.tutorial-readouts div { min-width: 120px; padding: .55rem .65rem; border: 1px solid rgba(255,255,255,.2); border-radius: 9px; background: rgba(0,0,0,.25); }
.tutorial-readouts span { display: block; color: #b9cbd0; font-size: .67rem; }
.tutorial-readouts strong { font-size: 1rem; }
.tutorial-explorer-controls { display: grid; gap: .65rem; margin-top: .9rem; }
.tutorial-explorer-controls label { display: grid; grid-template-columns: minmax(130px,.7fr) 1.6fr auto; align-items: center; gap: .7rem; }
.tutorial-explorer-controls label>span { font-weight: 750; }
.tutorial-explorer-controls input { width: 100%; accent-color: var(--beam); }
.tutorial-explorer-controls output { min-width: 72px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 850; }

/* 4. Guided walkthrough */
.tutorial-route { display: grid; grid-template-columns: repeat(auto-fit,minmax(92px,1fr)); gap: .45rem; margin: 0 0 .9rem; padding: 0; list-style: none; }
.tutorial-route li { display: grid; justify-items: center; gap: .3rem; color: var(--muted); text-align: center; font-size: .72rem; }
.tutorial-route button { width: 36px; min-height: 36px; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--ink); }
.tutorial-route li.active button { border-color: var(--beam); background: var(--beam); color: #052126; font-weight: 900; }
.tutorial-route li.visited button { border-color: var(--se); background: var(--se); color: #fff; }
.tutorial-walkthrough-panel { min-height: 125px; padding: 1rem; border-radius: 12px; background: var(--surface); }

/* 5. Compare modes */
.tutorial-compare-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(190px,1fr)); gap: .65rem; }
.tutorial-compare-grid article { padding: .85rem; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); opacity: .72; }
.tutorial-compare-grid article.active { border-color: var(--beam); box-shadow: inset 0 3px var(--beam); opacity: 1; }
.tutorial-compare-grid small { color: var(--focus); font: 750 .65rem var(--mono,monospace); }
.tutorial-compare-grid h4 { margin-top: .6rem; }
.tutorial-compare-grid p { color: var(--muted); font-size: .85rem; }
.tutorial-compare-grid strong { color: var(--focus); font-size: .82rem; }
.chapter-jumps.has-tutorials { grid-template-columns: repeat(6,1fr); }

@media (max-width:900px){
  .chapter-jumps.has-tutorials { grid-template-columns: repeat(3,1fr); }
  .mechanism-stage { grid-template-columns: 1fr; }
}
@media (max-width:620px){
  .tutorial-head { display: grid; }
  .tutorial-head,.tutorial-intro { padding-inline: 1rem; }
  .tutorial-stage,.tutorial-media,.tutorial-why,.tutorial-takeaway,.tutorial-reflection { margin-inline: 1rem; }
  .tutorial-why,.tutorial-takeaway { grid-template-columns: 1fr; gap: .25rem; }
  .tutorial-layer-stage { grid-template-columns: 1fr; }
  .tutorial-explorer-controls label { grid-template-columns: 1fr auto; }
  .tutorial-explorer-controls input { grid-column: 1/-1; grid-row: 2; }
  .chapter-jumps.has-tutorials { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion:reduce){
  .tutorial-card * { transition: none!important; animation: none!important; }
}