@font-face{font-family:"Lulo Clean";src:url(../fonts/lulo-clean-bold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"TT Commons";src:url(../fonts/tt-commons-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"TT Commons";src:url(../fonts/tt-commons-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"TT Commons";src:url(../fonts/tt-commons-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"TT Commons";src:url(../fonts/tt-commons-700.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  --bone:#f5f1ea; --red:#ba0c2f; --red-dark:#8f0923; --ink:#1c1214; --muted:#6b5b5e; --line:#ddd5c8; --paper:#fffdf9;
  --display:"Lulo Clean","TT Commons",system-ui,sans-serif;
  --body:"TT Commons",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bone);color:var(--ink);font-family:var(--body);font-size:18px;line-height:1.45;
  padding-bottom:calc(32px + env(safe-area-inset-bottom,0px))}
img{max-width:100%;height:auto}
a{color:inherit}
button,select,input{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--red);outline-offset:3px}
h1,h2,h3{font-family:var(--body);font-weight:700;line-height:1.15;margin:0;text-wrap:balance}
.tile h3,.piece-head h1{font-family:var(--display);text-transform:uppercase;line-height:1.1}
.inner{max-width:1000px;margin:0 auto;padding-left:max(18px,env(safe-area-inset-left,0px));padding-right:max(18px,env(safe-area-inset-right,0px))}

/* kop */
.top{background:var(--red);color:var(--bone);padding-top:env(safe-area-inset-top,0px)}
.top .inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:14px}
.brand img{display:block;height:78px;width:auto}
.site-name{font-family:var(--display);font-weight:700;font-size:1.9rem;line-height:1;letter-spacing:-.04em;text-transform:uppercase;margin:0 auto 0 6px;padding:2px 0 2px 22px;border-left:2px solid rgba(245,241,234,.55);background:none;color:var(--bone)}
@media (max-width:640px){.site-name{font-size:1.25rem;padding-left:14px;margin-right:auto}.top .inner{justify-content:space-between}}

main{padding-block:32px 24px}
section.block{margin-bottom:44px}
section.block>h2{font-size:1.6rem;color:var(--red);margin-bottom:16px}

/* tegels */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.tile{display:flex;align-items:flex-end;min-height:120px;padding:20px;background:var(--red);color:var(--bone);border-radius:6px;text-decoration:none;transition:background .15s,transform .15s}
.tile h3{font-size:1.3rem}
.tile:hover{background:var(--red-dark);transform:translateY(-2px)}
.tile.light{background:transparent;color:var(--red);border:2px solid var(--red)}
.tile.light:hover{background:var(--red);color:var(--bone)}

/* lijsten */
.list{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.list li{border-bottom:1px solid var(--line);display:flex;align-items:stretch}
.list .open{flex:1;min-width:0;text-align:left;background:none;border:0;cursor:pointer;padding:15px 4px;font-weight:600;font-size:1.05rem;overflow-wrap:anywhere}
.list .open:hover{color:var(--red)}
.dl{display:inline-flex;align-items:center;justify-content:center;width:52px;color:var(--muted);text-decoration:none}
.dl:hover{color:var(--red)}
.groupname{font-weight:700;margin:22px 0 8px;font-size:1.1rem}
.archive .list{border-top-color:var(--line)}
.archive .open{color:var(--muted);font-weight:500}

/* knoppen */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 20px;border-radius:4px;background:var(--red);color:var(--bone);border:2px solid var(--red);font-weight:700;text-decoration:none;cursor:pointer}
.btn:hover{background:var(--red-dark);border-color:var(--red-dark)}
.btn.ghost{background:transparent;color:var(--red)}
.btn.ghost:hover{background:var(--red);color:var(--bone)}
.back{display:inline-flex;align-items:center;gap:8px;background:none;border:0;cursor:pointer;color:var(--red);font-weight:700;padding:10px 0;min-height:46px;text-decoration:none}

/* stuk */
.piece-head{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin:6px 0 30px}
.piece-head h1{font-size:clamp(1.6rem,6.5vw,2.9rem);color:var(--red)}
.sec{margin-top:38px}
.sec>h2{font-size:1.6rem;color:var(--red);margin-bottom:14px}
.sechead h2{font-size:1.6rem;color:var(--red)}

/* video */
.lesson{background:var(--paper);border:2px solid var(--ink);border-radius:6px;padding:18px}
.ctl{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center;margin-bottom:16px}
.seg{display:inline-flex;border:2px solid var(--red);border-radius:4px;overflow:hidden}
.seg button{background:transparent;border:0;min-height:46px;padding:0 16px;cursor:pointer;font-weight:700;color:var(--red)}
.seg button+button{border-left:2px solid var(--red)}
.seg button[aria-pressed="true"]{background:var(--red);color:var(--bone)}
.seg button:disabled{opacity:.35;cursor:not-allowed}
.letters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.rm{min-width:50px;min-height:50px;padding:0 12px;border:2px solid var(--ink);border-radius:2px;background:transparent;font-family:var(--body);font-weight:700;font-size:1.3rem;cursor:pointer}
.rm[aria-pressed="true"]{background:var(--red);border-color:var(--red);color:var(--bone)}
.opts{display:flex;flex-wrap:wrap;gap:6px 22px;margin-bottom:14px}
.chk{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:500}
.chk input{width:20px;height:20px;accent-color:var(--red)}
.chk select{background:var(--paper);border:2px solid var(--line);border-radius:4px;padding:6px 10px;min-height:40px}
.stage{max-width:780px}
.stage video{display:block;width:100%;height:auto;border-radius:4px;background:#000}

/* PDF-lezer */
.viewer{position:fixed;inset:0;z-index:50;background:#e9e3d8;display:flex;flex-direction:column}
.viewer[hidden]{display:none}
.vbar{display:flex;align-items:center;gap:12px;background:var(--bone);border-bottom:2px solid var(--ink);padding:8px max(12px,env(safe-area-inset-right,0px)) 8px max(12px,env(safe-area-inset-left,0px));padding-top:calc(8px + env(safe-area-inset-top,0px))}
.vbar h2{flex:1;min-width:0;font-size:1rem;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
.vbtn{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;background:none;border:0;cursor:pointer;color:var(--ink);border-radius:4px}
.vbtn:hover{color:var(--red)}
.vpages{flex:1;overflow:auto;padding:16px max(12px,env(safe-area-inset-right,0px)) 24px max(12px,env(safe-area-inset-left,0px));display:flex;flex-direction:column;align-items:center;gap:14px;-webkit-overflow-scrolling:touch}
.vpage{width:100%;max-width:920px;background:#fff;box-shadow:0 1px 6px rgba(28,18,20,.25)}
.vpage canvas{display:block;width:100%;height:auto}
.vmsg{padding:40px 0;font-weight:600}

/* metronoom */
.mbtn{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 18px;border-radius:23px;border:2px solid var(--bone);background:transparent;color:var(--bone);font-weight:700;cursor:pointer}
.mbtn:hover{background:var(--bone);color:var(--red)}
.mbtn.on{background:var(--bone);color:var(--red)}
.vbtn.on{color:var(--red)}
.mpanel{position:fixed;z-index:70;right:max(12px,env(safe-area-inset-right,0px));left:max(12px,env(safe-area-inset-left,0px));bottom:calc(12px + env(safe-area-inset-bottom,0px));margin-left:auto;max-width:440px;background:var(--paper);border:2px solid var(--ink);border-radius:8px;padding:16px;box-shadow:0 8px 28px rgba(28,18,20,.35)}
.mpanel[hidden]{display:none}
.mtop{display:flex;align-items:center;justify-content:space-between}
.chip{min-height:46px;padding:0 16px;border:2px solid var(--red);border-radius:23px;background:transparent;color:var(--red);font-weight:700;cursor:pointer}
.chip:hover{background:var(--red);color:var(--bone)}

.foot{color:var(--muted);font-size:.95rem;padding-block:8px 0}
body.lock{overflow:hidden}
@media (prefers-reduced-motion:reduce){.tile{transition:none}.tile:hover{transform:none}}



/* metronoom onder de partituur */
.vmini{display:flex;align-items:center;gap:8px;background:var(--bone);border-top:2px solid var(--ink);padding:8px max(12px,env(safe-area-inset-right,0px)) calc(8px + env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px))}

/* groepskeuze in de kop */
.lvl{display:inline-flex;border:2px solid var(--bone);border-radius:4px;overflow:hidden}
.lvl button{background:transparent;border:0;color:var(--bone);min-height:46px;padding:0 18px;font-weight:700;cursor:pointer}
.lvl button+button{border-left:2px solid var(--bone)}
.lvl button[aria-pressed="true"]{background:var(--bone);color:var(--red)}
.lvl button:focus-visible,.mbtn:focus-visible,.brand:focus-visible{outline-color:var(--bone)}
.site-name{margin-right:0}
.top .inner{flex-wrap:wrap}
.top .mbtn{margin-left:auto}
@media (max-width:640px){
  .top .inner{gap:12px 12px}
  .lvl{order:3;flex-basis:100%;display:flex}
  .lvl button{flex:1}
}

/* instrumentkeuze en instrumentpagina */
.picks{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.pick{display:flex;align-items:center;min-height:68px;padding:12px 18px;border:2px solid var(--red);border-radius:6px;color:var(--red);font-weight:700;font-size:1.2rem;text-decoration:none;overflow-wrap:anywhere}
.pick:hover{background:var(--red);color:var(--bone)}
.piece-head .of{font-weight:600;font-size:1.15rem;color:var(--muted)}
.sechead{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.sechead h2{margin:0}
.inline-pdf{display:flex;flex-direction:column;align-items:center;gap:14px}
.inline-pdf .vpage{box-shadow:0 1px 6px rgba(28,18,20,.25)}
.fixedbar{position:fixed;left:0;right:0;bottom:0;z-index:55}
.vmini[hidden]{display:none}
body.has-mini{padding-bottom:calc(92px + env(safe-area-inset-bottom,0px))}
.vpages{padding-bottom:110px}

/* basics */
.basics{max-width:760px}
.basics .lead{font-size:1.3rem;font-weight:600;margin:0 0 10px}
.basics .step{margin-top:24px;padding:22px;background:var(--paper);border:2px solid var(--ink);border-radius:10px}
.basics .step h2{display:flex;align-items:center;gap:12px;font-size:1.6rem;color:var(--red);margin-bottom:14px}
.basics .step .n{display:inline-flex;align-items:center;justify-content:center;flex:none;width:40px;height:40px;border-radius:50%;background:var(--red);color:var(--bone);font-size:1.3rem}
.basics .step p{margin:0 0 12px}
.basics .step .small{font-size:1rem;color:var(--muted);margin:14px 0 0}
svg .t{font:700 var(--fs,22px) var(--body);fill:var(--ink)}
svg .t.red{fill:var(--red)}
svg .t.muted{font-weight:600;fill:var(--muted)}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ticks li{display:flex;align-items:flex-start;gap:12px}
.ticks i{flex:none;width:28px;height:28px;border-radius:50%;margin-top:1px;background:var(--red);position:relative}
.ticks .yes i::after{content:"";position:absolute;left:9px;top:5px;width:8px;height:14px;border:solid var(--bone);border-width:0 3px 3px 0;transform:rotate(45deg)}
.ticks .no i{background:var(--ink)}
.ticks .no i::before,.ticks .no i::after{content:"";position:absolute;left:7px;top:12px;width:14px;height:3px;background:var(--bone);transform:rotate(45deg);border-radius:2px}
.ticks .no i::after{transform:rotate(-45deg)}
.ticks .no{color:var(--ink);font-weight:600}
.seg{display:inline-flex;border:2px solid var(--red);border-radius:6px;overflow:hidden;margin:2px 0 14px}
.seg button{min-height:44px;padding:0 16px;border:0;background:transparent;color:var(--red);font-weight:700;cursor:pointer}
.seg button+button{border-left:2px solid var(--red)}
.seg button[aria-pressed="true"]{background:var(--red);color:var(--bone)}
.rl{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;margin:0 0 14px}
.rl b{display:flex;align-items:center;justify-content:center;aspect-ratio:1;border:2px solid var(--ink);border-radius:8px;font-family:var(--display);font-size:clamp(1rem,5vw,1.6rem);transition:background .06s,color .06s}
.rl b.on{background:var(--red);border-color:var(--red);color:var(--bone)}
.rlbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.rltempo{display:inline-flex;gap:8px}
.rltempo .chip{min-width:58px}
.rltempo .chip[aria-pressed="true"]{background:var(--red);color:var(--bone)}
.rlgo{min-width:110px}

/* metronoom vast boven de partituur, even breed als de partituur */
.scorewrap{max-width:920px;margin:0 auto}
.vmini.inline{position:sticky;top:0;z-index:30;margin:0 0 14px;border:2px solid var(--ink);border-radius:8px;padding:8px 12px;background:var(--bone);box-shadow:0 3px 10px rgba(28,18,20,.18)}
.vmini.inline[hidden]{display:none}

.vslot{padding:10px max(12px,env(safe-area-inset-right,0px)) 0 max(12px,env(safe-area-inset-left,0px))}
.vslot:empty{display:none}
.vslot .vmini{max-width:920px;margin:0 auto}
.vmini.inline:not(.stuck){position:static;box-shadow:none}

.vmini{flex-direction:column;align-items:stretch;gap:10px}
.vpresets{display:inline-flex;gap:8px;flex-wrap:wrap}
@media (max-height:720px){.vmini.inline.stuck{position:static}}

/* metronoom als witte strook bovenaan de partituur */
.vmini.inline{background:#fff;border:0;border-bottom:2px solid var(--line);border-radius:0;margin:0;box-shadow:0 1px 6px rgba(28,18,20,.25);padding:12px 14px}
.vmini.inline.stuck{box-shadow:0 3px 8px rgba(28,18,20,.2)}
.scorewrap .inline-pdf{gap:0}
.scorewrap .inline-pdf .vpage + .vpage{margin-top:14px}
.vslot{padding-bottom:0}
.vslot + .vpages{padding-top:0}
.vslot .vmini.inline{margin:0 auto}

/* compacte balk + tempo-popup */
.vmini{position:relative}
.vmini{gap:0}
.rlgo.on{background:var(--ink);border-color:var(--ink)}

/* tempo-keuze: vaste stappen */
.vmini.inline:not(.stuck){position:relative}

/* Lulo staat van nature ruim: letters dichter bij elkaar */
.piece-head h1{letter-spacing:-.05em}
.tile h3{letter-spacing:-.05em}
.rl b{letter-spacing:-.03em}
/* basics: illustraties */
.basics{--wood:#d8b47c;--skin:#f1dcc6}
.basics .art{margin:0 0 18px}
.basics .art svg{display:block;width:100%;max-width:520px;height:auto;margin:0 auto}
.basics .art figcaption{text-align:center;font-size:.95rem;font-weight:600;color:var(--muted);margin-top:6px}
.arts{display:grid;grid-template-columns:1fr;gap:10px;align-items:end;margin-bottom:6px}
@media (min-width:720px){.arts{grid-template-columns:1.25fr 1fr;gap:24px}}
.guide{stroke:var(--muted);stroke-width:2.5;stroke-dasharray:8 7;fill:none}
.guide.red{stroke:var(--red)}
.lead-line{stroke:var(--red);stroke-width:2.5;fill:none}
.lead-line.muted{stroke:var(--muted)}
.ghost{stroke:var(--muted);stroke-width:3;stroke-dasharray:10 8;stroke-linecap:round;opacity:.7}
.swing{transform-box:view-box;transform-origin:70px 150px;transform:rotate(-28deg)}
.ripple{opacity:0;transform-box:fill-box;transform-origin:center}
.phases{display:flex;justify-content:center;gap:8px;list-style:none;margin:10px 0 0;padding:0;counter-reset:ph}
.phases li{counter-increment:ph;padding:6px 12px;border:2px solid var(--ink);border-radius:20px;font-weight:700;font-size:.95rem;white-space:nowrap}
.phases li::before{content:counter(ph) ". "}
@media (max-width:420px){.phases li{padding:5px 9px;font-size:.85rem}}
@media (prefers-reduced-motion:no-preference){
  .swing{animation:swing 3s infinite}
  @keyframes swing{
    0%,35%{transform:rotate(-28deg);animation-timing-function:cubic-bezier(.55,0,1,.6)}
    47%{transform:rotate(4.5deg);animation-timing-function:cubic-bezier(0,.45,.35,1)}
    67%,100%{transform:rotate(-28deg)}}
  .ripple{animation:ripple 3s infinite}
  @keyframes ripple{0%,46%{opacity:0;transform:scale(.4)}47%{opacity:1;transform:scale(1)}62%,100%{opacity:0;transform:scale(1.6)}}
  .phases .p1{animation:ph1 3s infinite}.phases .p2{animation:ph2 3s infinite}.phases .p3{animation:ph3 3s infinite}
  @keyframes ph1{0%,35%{background:var(--red);border-color:var(--red);color:var(--bone)}35.1%,66.9%{background:transparent;border-color:var(--ink);color:var(--ink)}67%,100%{background:var(--red);border-color:var(--red);color:var(--bone)}}
  @keyframes ph2{0%,34.9%{background:transparent;border-color:var(--ink);color:var(--ink)}35%,47%{background:var(--red);border-color:var(--red);color:var(--bone)}47.1%,100%{background:transparent;border-color:var(--ink);color:var(--ink)}}
  @keyframes ph3{0%,46.9%{background:transparent;border-color:var(--ink);color:var(--ink)}47%,67%{background:var(--red);border-color:var(--red);color:var(--bone)}67.1%,100%{background:transparent;border-color:var(--ink);color:var(--ink)}}
}

.piece-head .inst{flex-basis:100%;margin:-6px 0 0;font-size:1.6rem;font-weight:700;color:var(--ink)}

/* tempo's rechtstreeks in de balk */

/* duidelijk een metronoom: label + grote gekleurde tel-bolletjes */

/* ===== metronoom (balk boven de partituur + paneel) ===== */
.mx-play{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:10px;width:56px;height:56px;border-radius:50%;border:0;background:var(--red);color:#fff;cursor:pointer;transition:background .15s,transform .1s;touch-action:manipulation}
.mx-play:hover{background:var(--red-dark)}
.mx-play:active{transform:scale(.95)}
.mx-play svg{width:26px;height:26px;fill:currentColor}
.mx-play .i-stop,.mx-play.on .i-play{display:none}
.mx-play.on .i-stop{display:block}
.mx-play.on{background:var(--ink)}
.mx-play.wide{width:100%;height:56px;border-radius:28px;font-weight:700;font-size:1.15rem;margin-top:14px}
.mx-play.wide svg{width:22px;height:22px}
.mx-tempo{display:inline-flex;align-items:center;gap:6px}
.mx-step{flex:none;width:44px;height:44px;border-radius:50%;border:2px solid var(--ink);background:transparent;color:var(--ink);font:700 1.6rem/1 var(--body);cursor:pointer;touch-action:manipulation;display:inline-flex;align-items:center;justify-content:center;padding:0 0 3px}
.mx-step:hover{border-color:var(--red);color:var(--red)}
.mx-step:active{background:var(--ink);border-color:var(--ink);color:var(--bone)}
.mx-bpm{display:flex;flex-direction:column;align-items:center;min-width:3.4ch;line-height:1}
.mx-bpm b{font-size:2rem;font-variant-numeric:tabular-nums;color:var(--ink)}
.mx-bpm small{font-size:.8rem;font-weight:600;color:var(--muted);margin-top:2px}
.mx-tempo.big{display:flex;justify-content:center;gap:18px;margin:10px 0 4px}
.mx-tempo.big .mx-step{width:56px;height:56px;font-size:2rem}
.mx-tempo.big .mx-bpm{flex-direction:row;align-items:baseline;gap:6px;min-width:4.6ch;justify-content:center}
.mx-tempo.big .mx-bpm b{font-size:3.6rem;color:var(--red)}
.mx-tempo.big .mx-bpm small{font-size:1rem}
.mx-dots{display:flex;gap:8px;margin-left:auto}
.mx-dots i{width:34px;height:34px;border-radius:50%;border:2.5px solid var(--ink);display:inline-flex;align-items:center;justify-content:center;font:700 .95rem/1 var(--body);font-style:normal;color:var(--ink);background:var(--paper);transition:transform .06s,background .06s}
.mx-dots i:first-child{border-color:var(--red);color:var(--red)}
.mx-dots i.hit{background:var(--ink);border-color:var(--ink);color:var(--bone);transform:scale(1.15)}
.mx-dots i.hit.first{background:var(--red);border-color:var(--red);color:#fff}
.mx-dots.big{justify-content:center;margin:12px 0 16px;gap:12px}
.mx-dots.big i{width:44px;height:44px;font-size:1.1rem}
.mx-row{display:flex;align-items:center;gap:14px}
.mx-chiprow{margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.mx-chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:thin;padding:2px 2px 4px;scroll-behavior:smooth}
.mx-chips.more{-webkit-mask-image:linear-gradient(to right,#000 82%,transparent);mask-image:linear-gradient(to right,#000 82%,transparent)}
.mx-chips.less{-webkit-mask-image:linear-gradient(to left,#000 82%,transparent);mask-image:linear-gradient(to left,#000 82%,transparent)}
.mx-chips.more.less{-webkit-mask-image:linear-gradient(to right,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(to right,transparent,#000 14%,#000 86%,transparent)}
.mx-chips.wrap{flex-wrap:wrap;overflow:visible;align-items:center}
.mx-chips:empty{display:none}
.mx-chip{flex:none;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;min-width:58px;height:46px;padding:0 12px;border-radius:23px;border:2px solid var(--line);background:var(--paper);color:var(--ink);font:700 1.05rem/1 var(--body);font-variant-numeric:tabular-nums;cursor:pointer}
.mx-chip:hover{border-color:var(--ink)}
.mx-chip small{font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--red);margin-top:2px}
.mx-chip.goal{border-color:var(--red);color:var(--red)}
.mx-chip.now{background:var(--ink);border-color:var(--ink);color:var(--bone)}
.mx-chip.now small{color:var(--bone)}
.mx-lbl{flex-basis:100%;font-size:.9rem;font-weight:600;color:var(--muted)}
.mx-title{font-size:1.2rem}
.mx-range{display:block;width:100%;accent-color:var(--red);height:36px;margin:6px 0 0}
.mx-opts{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:12px}
.mx-sel{display:inline-flex;align-items:center;gap:8px;font-weight:600}
.mx-sel select{background:var(--paper);border:2px solid var(--ink);border-radius:23px;min-height:46px;padding:0 14px;font:600 1rem var(--body);color:var(--ink)}
.mx-tap{min-height:46px;padding:0 18px;border-radius:23px;border:2px solid var(--ink);background:transparent;color:var(--ink);font-weight:700;cursor:pointer;margin-left:auto}
.mx-tap:active{background:var(--ink);color:var(--bone)}
@media (max-width:520px){
  .mx-row{gap:10px}
  .mx-play{width:52px;height:52px}
  .mx-step{width:40px;height:40px;font-size:1.45rem}
  .mx-bpm b{font-size:1.75rem}
  .mx-dots{gap:6px}
  .mx-dots i{width:28px;height:28px;font-size:.85rem}
}


.lesson .ctl{display:flex;flex-wrap:wrap;gap:12px}

/* download: klein knopje rechtsboven op de partituur */
.scorebody{position:relative}
.dlfab{position:absolute;top:12px;right:12px;z-index:5;display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;border-radius:20px;background:#fff;color:var(--red);border:2px solid var(--red);font-weight:700;font-size:.95rem;text-decoration:none;box-shadow:0 1px 4px rgba(28,18,20,.2)}
.dlfab:hover{background:var(--red);color:var(--bone)}
.dlfab svg{width:18px;height:18px}

/* ===== speler (afspelen met meelopende partituur) ===== */
.pl .pl-where{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;text-align:right;line-height:1.15;font-variant-numeric:tabular-nums}
.pl .pl-where b{font-size:1.25rem;color:var(--ink)}
.pl .pl-where small{font-size:.85rem;font-weight:600;color:var(--muted);min-height:1em}
.pl-set{background:#fff;padding:10px 14px 12px;border-bottom:2px solid var(--line);box-shadow:0 1px 6px rgba(28,18,20,.12);margin-bottom:0}
.pl-set .mx-chiprow{margin-top:0;border-top:0}
.pl-set .pl-hint{margin:8px 0 0}
.pl-opts{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px}
.pl-seg{display:inline-flex;border:2px solid var(--ink);border-radius:23px;overflow:hidden}
.pl-seg button{min-height:42px;padding:0 14px;border:0;background:transparent;color:var(--ink);font-weight:700;cursor:pointer}
.pl-seg button+button{border-left:2px solid var(--ink)}
.pl-seg button[aria-pressed="true"]{background:var(--ink);color:var(--bone)}
.pl-tog{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 14px 0 12px;border-radius:23px;border:2px solid var(--line);background:transparent;color:var(--ink);font-weight:700;cursor:pointer}
.pl-tog::before{content:"";width:16px;height:16px;border-radius:50%;border:2px solid var(--muted);box-sizing:border-box}
.pl-tog[aria-pressed="true"]{border-color:var(--red);color:var(--red)}
.pl-tog[aria-pressed="true"]::before{border-color:var(--red);background:var(--red);box-shadow:inset 0 0 0 2px #fff}
.pl-hint{margin:8px 0 0;font-size:.9rem;color:var(--muted)}
.pl-set.playing .pl-hint{visibility:hidden}
.vmini.pl{z-index:31}
.mx-play.busy{opacity:.6;cursor:progress}
.vpage{position:relative}
.pl-layer{position:absolute;inset:0}
.pl-m{position:absolute;padding:0;margin:0;border:0;border-radius:6px;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}
.pl-m:hover{background:rgba(28,18,20,.05)}
.pl-m:focus-visible{outline:2px solid var(--red);outline-offset:1px}
.pl-m.cur{background:linear-gradient(to right,rgba(186,12,47,.2) var(--p,0%),rgba(186,12,47,.08) var(--p,0%));box-shadow:inset 0 -3px 0 var(--red)}
@media (max-width:520px){
  .pl .pl-where b{font-size:1.05rem}
  .pl .pl-where small{font-size:.78rem}
  .pl-seg button{padding:0 11px;font-size:.95rem}
  .pl-tog{padding:0 11px 0 10px;font-size:.95rem}
}
/* de speelbalk is slank genoeg: altijd bovenaan laten plakken, ook op lage schermen */
@media (max-height:720px){.vmini.inline.stuck.pl{position:sticky}}
.site-name{text-decoration:none}.site-name:hover{opacity:.85}
.pl-lbl{font-size:.9rem;font-weight:600;color:var(--muted);margin-right:2px}
.pl-sep{width:1px;align-self:stretch;background:var(--line);margin:4px 4px}
@media (max-width:520px){.pl-lbl{flex-basis:100%}.pl-sep{display:none}}

.seg.wrap{flex-wrap:wrap;border:0;gap:8px;overflow:visible}.seg.wrap button{border:2px solid var(--red);border-radius:23px;min-width:54px}.seg.wrap button+button{border-left:2px solid var(--red)}

.lesson .ctl{align-items:center}
.alt{display:inline-flex;align-items:center;gap:8px;font-weight:600}
.alt select{min-height:46px;padding:0 12px;border:2px solid var(--line);border-radius:4px;background:var(--paper);font:600 1rem var(--body);color:var(--ink)}
.alt.on select{border-color:var(--red);background:var(--red);color:var(--bone)}