/* Sampling (music) lesson. All rules scoped under .smp-* */
.smp-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.smp-note { font-size: 13px; color: var(--dim); text-align: center; max-width: 300px; }
.smp-hero img { display: block; width: 260px; max-width: 100%; max-height: 32vh; object-fit: contain; margin: 0 auto; filter: drop-shadow(0 18px 30px rgba(123, 92, 253, .35)); }
.smp-hero.smp-wide img { width: 310px; }
.smp-hero.smp-mpc img, .smp-hero.smp-rec img { width: 220px; border-radius: 14px; filter: none; box-shadow: 0 14px 34px rgba(0,0,0,.45); }
.smp-hero.smp-rec img { border-radius: 50%; }

/* ---------- the strip ---------- */
.smp-strip { width: 100%; max-width: 340px; display: block; overflow: visible; }
.smp-bg { fill: var(--surface); stroke: var(--line); }
.smp-sec.band { fill: rgba(123, 92, 253, .10); }
.smp-sec.brk { fill: rgba(252, 192, 80, .12); stroke: rgba(252, 192, 80, .45); stroke-width: 1.2; }
.smp-sl { font: 700 12px var(--sans); text-anchor: middle; letter-spacing: .06em; text-transform: uppercase; }
.smp-sl.band { fill: var(--violet-bright); }
.smp-sl.brk { fill: var(--gold); }
.smp-ln { font: 600 12px var(--sans); fill: var(--dim); }
.smp-m { transition: opacity .2s; }
.smp-m.l0 { fill: #8FA0C8; }
.smp-m.l0.sn { fill: var(--gold); }
.smp-m.l1 { fill: #4B8BFF; }
.smp-m.l2 { fill: #3FD69A; }
.smp-m.hit { animation: smpHit .28s ease-out; }
@keyframes smpHit { 0% { fill: #FFF6D8; } }
.smp-ph { fill: #FFF6D8; filter: drop-shadow(0 0 4px rgba(255, 246, 216, .8)); }

/* ---------- the turntables ---------- */
.smp-decks { display: flex; gap: 14px; justify-content: center; width: 100%; }
.smp-deck { flex: 1; max-width: 158px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px 10px; border-radius: 22px; background: linear-gradient(180deg, var(--raised), var(--surface)); border: 2px solid var(--line-strong); color: var(--text); font: inherit; cursor: pointer; box-shadow: 0 6px 0 rgba(0,0,0,.35); -webkit-tap-highlight-color: transparent; }
.smp-deck:active { transform: translateY(3px); box-shadow: 0 3px 0 rgba(0,0,0,.35); }
.smp-deck svg { width: 118px; height: 118px; display: block; overflow: visible; }
.smp-plat { fill: #0B1020; stroke: var(--line); }
.smp-ring { fill: none; stroke: var(--gold); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transform: rotate(-90deg); transform-origin: 60px 60px; transition: stroke-dashoffset .12s linear; }
.smp-vin { fill: #151515; stroke: #2B2B2B; }
.smp-gr { fill: none; stroke: #2E2E2E; stroke-width: 1.2; }
.smp-lab { fill: #E8792F; }
.smp-mark { stroke: #FFE0C2; stroke-width: 3; stroke-linecap: round; }
.smp-hole { fill: #0B1020; }
.smp-deck[data-s="play"] .smp-spin { animation: smpSpin 1.33s linear infinite; }
@keyframes smpSpin { to { transform: rotate(360deg); } }
.smp-dn { font-size: 14px; font-weight: 800; }
.smp-st { font-size: 13px; font-weight: 700; color: var(--dim); padding: 2px 10px; border-radius: 99px; background: rgba(234, 227, 215, .06); }
.smp-deck[data-s="play"] { border-color: var(--gold); }
.smp-deck[data-s="play"] .smp-st { color: #2A1B00; background: var(--gold); }
.smp-deck[data-s="cued"] { border-color: var(--mint); }
.smp-deck[data-s="cued"] .smp-st { color: var(--mint-ink); background: var(--mint); }
.smp-deck[data-s="band"] .smp-st { color: #fff; background: var(--violet); }
.smp-tally { display: flex; gap: 8px; }
.smp-tally i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line-strong); }
.smp-tally i.on { background: var(--gold); border-color: var(--gold); }

/* ---------- two copyrights ---------- */
.smp-cr { display: flex; gap: 10px; width: 100%; max-width: 340px; }
.smp-half { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 8px; border-radius: 18px; background: var(--surface); border: 2px solid var(--line); text-align: center; transition: border-color .25s, background .25s; }
.smp-half svg { width: 44px; height: 44px; fill: none; stroke: var(--violet-bright); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.smp-half[data-k="song"] circle { fill: var(--violet-bright); }
.smp-half b { font-size: 16px; }
.smp-half span { font-size: 13px; color: var(--dim); }
.smp-half em { font-style: normal; font-size: 13px; font-weight: 700; margin-top: 4px; }
.smp-ok { font-style: normal; font-size: 13px; font-weight: 800; padding: 3px 10px; border-radius: 99px; margin-top: 6px; color: var(--faint); background: rgba(234, 227, 215, .06); }
.smp-half.on { border-color: var(--gold); background: rgba(252, 192, 80, .08); }
.smp-half.on .smp-ok { color: #2A1B00; background: var(--gold); }

@media (max-height: 700px) {
  .smp-hero img { max-height: 26vh; }
  .smp-deck svg { width: 100px; height: 100px; }
  .smp-hero.smp-mpc img, .smp-hero.smp-rec img { width: 180px; }
}