/* Tutorials: one clip and its written steps per band, alternating sides. Tokens from site.css. */
.tut-hero{padding:var(--space-7) var(--gutter) var(--space-6);background:var(--rose);border-bottom:var(--line)}
.tut-hero h1{font-size:clamp(2rem,1.2rem + 3.4vw,3.6rem);text-wrap:balance}
.tut-index ol{list-style:none;margin:0 auto;padding:0;max-width:1100px;display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.tut-index a{display:flex;align-items:center;gap:10px;padding:8px 16px 8px 8px;border:var(--line);border-radius:var(--r-pill);background:var(--surface);color:var(--ink);text-decoration:none;font:500 .98rem/1.4 var(--font-display);box-shadow:var(--drop)}
.tut-index a:hover{background:var(--white);transform:translateY(-2px)}
.tut-index a{transition:transform .2s var(--ease-out),background .2s}
.tut{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(28px,4vw,72px);align-items:center;padding:var(--space-section) var(--gutter);scroll-margin-top:72px}
.tut:nth-of-type(odd){background:var(--white);border-block:var(--line)}
.tut:nth-of-type(odd) .tut-player{order:2}
.tut-player video{display:block;width:100%;aspect-ratio:16/9;border:var(--line);border-radius:var(--r-panel);box-shadow:var(--drop-lg);background:var(--ink)}
.tut-player [hidden]{display:none}
.tut-missing{margin:0;padding:var(--space-6);border:1.5px dashed var(--navy);border-radius:var(--r-panel);background:var(--surface);text-align:center}
.tut-copy h2{display:flex;align-items:flex-start;gap:14px;font-size:clamp(1.5rem,1.1rem + 1.5vw,2.2rem);text-wrap:balance}
.tut-copy h2 .beat-no{margin-top:.2em}
.tut-dur{margin:var(--space-2) 0 var(--space-4);font:500 .9rem/1.5 var(--font-display);color:var(--rose-ink)}
.tut-steps{list-style:decimal;margin:0;padding-left:1.6em;display:grid;gap:12px;max-width:var(--measure);line-height:1.85}
.tut-steps li::marker{font:600 1rem/1 var(--font-display);color:var(--rose-ink)}
@media (max-width:860px){.tut{grid-template-columns:minmax(0,1fr)}.tut:nth-of-type(odd) .tut-player{order:0}.tut-index ol{justify-content:flex-start}}
@media (prefers-reduced-motion:reduce){.tut-index a{transition:none}.tut-index a:hover{transform:none}}
.tut-version{max-width:46rem;margin:var(--space-3) auto 0!important;font-size:var(--text-small);line-height:1.7;color:var(--ink)}
/* A text link on the rose closer: rose ink on rose fails contrast (2.2:1), ink passes. */
.tut-closer .closer-copy p a{color:var(--ink);font-weight:700}