:root{--red:#b82c0c;--red-d:#7a1904;--copper:#c87533;--brass:#d4af37;--brass-l:#f3e5ab;--bg:#12100e;--card:#1b1714;--text:#e6dac3;--muted:#b8ab99;--line:rgba(200,117,51,.28)}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;font-size:112.5%}
body{background:var(--bg) radial-gradient(circle at 50% 0,#6a1c06 0,#2e0d05 35%,#150906 70%,#12100e 100%) fixed;color:var(--text);font:1rem/1.5 "Open Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;min-height:100vh;-webkit-font-smoothing:antialiased;padding-bottom:env(safe-area-inset-bottom)}
.top{display:flex;align-items:center;gap:12px;padding:calc(10px + env(safe-area-inset-top)) 16px 10px;max-width:760px;margin:0 auto}
.back{color:var(--brass-l);text-decoration:none;font-weight:600;padding:8px 12px;border:1px solid var(--line);border-radius:999px;font-size:.85rem;white-space:nowrap}
.brand{display:flex;flex-direction:column;line-height:1.15}.brand b{font-family:"Plus Jakarta Sans",system-ui,sans-serif;font-size:1.25rem;color:#fff}.brand small{color:var(--muted);font-size:.72rem}
main{max-width:760px;margin:0 auto;padding:4px 14px 30px;display:grid;gap:12px}
.card{background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.015)),var(--card);border:1px solid var(--line);border-radius:18px;padding:14px}
.muted{color:var(--muted)}.small{font-size:.8rem}.foot{text-align:center;padding:4px 10px}
.chips{display:flex;gap:8px;margin-bottom:10px}
.chip{flex:1;font:inherit;font-weight:700;color:var(--text);background:transparent;border:1px solid var(--line);border-radius:12px;padding:10px 8px;cursor:pointer}
.chip.on{background:var(--brass);color:#2a1a05;border-color:var(--brass)}
.nowrow{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:196px}
.phase{color:var(--brass-l);font-weight:700;font-size:.9rem}
.nowname{font:800 4.6rem/1 "Plus Jakarta Sans",system-ui,sans-serif;color:#fff;margin:4px 0}
.barinfo{color:var(--text);font-weight:600}.nowsub{color:var(--muted);font-size:.85rem;margin-top:2px;max-width:15em}
.nowfinger{flex:0 0 auto}
.progress{height:6px;background:rgba(255,255,255,.08);border-radius:6px;overflow:hidden;margin-top:12px}.progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--copper),var(--brass));transition:width .25s}
/* notenstrook */
.strip{padding:12px 8px}
.stripwrap{display:flex;align-items:flex-start}
.cols{flex:1;display:grid;grid-template-columns:repeat(8,1fr)}
.col{font:inherit;color:var(--text);background:transparent;border:0;border-radius:10px;display:flex;flex-direction:column;align-items:center;padding:0 0 6px;cursor:pointer;transition:background .15s}
.col.act{background:rgba(212,175,55,.16)}
.col.done{opacity:.45}
.staffsvg{display:block;width:100%;height:auto}
.sl{stroke:#8d7a66;stroke-width:.9}
.clef{fill:#e6dac3}.sharp{stroke:#e6dac3;stroke-width:1.4;fill:none;stroke-linecap:round}.sharp.acc{stroke-width:1.5;stroke-linejoin:round}
.ts{fill:#e6dac3;font:700 17px "Plus Jakarta Sans",system-ui,sans-serif}
.head{fill:none;stroke:#e6dac3;stroke-width:2}.stem{stroke:#e6dac3;stroke-width:1.5}.bar{stroke:#8d7a66;stroke-width:1}
.col.act .head{stroke:var(--brass);fill:rgba(212,175,55,.35)}.col.act .stem{stroke:var(--brass)}
.nm{font-weight:800;font-size:.95rem;margin:2px 0 4px;color:#fff}
.col.act .nm{color:var(--brass)}
.fing{width:96%;height:auto;max-width:58px}
.fing.big{width:96px;max-width:none}
.dot{fill:none;stroke:#a8957f;stroke-width:1.4}.dot.on{fill:var(--brass);stroke:var(--brass)}
.fing.big .dot{stroke-width:1.2}
.legend{margin-top:8px;font-size:.72rem;color:var(--muted);padding:0 6px;display:flex;flex-wrap:wrap;align-items:center;gap:2px 4px}
.ld{display:inline-block;width:11px;height:11px;border-radius:50%;border:1.5px solid #a8957f;vertical-align:-1px}.ld.on{background:var(--brass);border-color:var(--brass)}
.lk{display:inline-block;width:14px;height:6px;border-radius:3px;border:1.5px solid #a8957f}
.chordcard{display:grid;gap:2px}.chordcard b{color:var(--brass-l)}
/* bediening */
.controls{display:grid;gap:16px}
.play{display:flex;align-items:center;justify-content:center;gap:12px;font:800 1.4rem "Plus Jakarta Sans",system-ui,sans-serif;color:#fff;border:0;border-radius:16px;padding:16px;cursor:pointer;background:linear-gradient(180deg,#d8421d,var(--red) 55%,var(--red-d));box-shadow:0 6px 18px rgba(184,44,12,.35)}
.play .ico{width:0;height:0;border-left:16px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent}
.playing .play .ico{width:16px;height:18px;border:0;background:#fff;border-radius:3px}
.trow{display:flex;justify-content:space-between;align-items:baseline;font-weight:700;margin-bottom:6px}.trow b{font-size:1.3rem;color:var(--brass-l)}
.tctl{display:flex;align-items:center;gap:10px}
.round{flex:0 0 48px;height:48px;border-radius:50%;border:1px solid var(--line);background:transparent;color:#fff;font:700 1.6rem/1 system-ui;cursor:pointer}
input[type=range]{flex:1;width:100%;accent-color:var(--brass);height:36px}
.link{margin-top:2px;background:none;border:0;color:var(--muted);text-decoration:underline;font:inherit;font-size:.8rem;cursor:pointer;padding:6px 0}
.seg{display:flex;flex-wrap:wrap;gap:8px}
.seg button{flex:1 1 auto;font:inherit;font-weight:600;color:var(--text);background:transparent;border:1px solid var(--line);border-radius:12px;padding:10px 12px;cursor:pointer}
.seg button.on{background:var(--brass);color:#2a1a05;border-color:var(--brass)}
.more summary{cursor:pointer;font-weight:700;color:var(--brass-l);padding:6px 0;list-style:none}.more summary::-webkit-details-marker{display:none}
.opt{display:flex;align-items:center;gap:10px;padding:9px 2px;border-top:1px solid rgba(255,255,255,.06)}
.opt input[type=checkbox]{width:22px;height:22px;accent-color:var(--brass)}.opt.vol{justify-content:space-between}.opt.vol input{max-width:55%}
.btn{font:inherit;font-weight:700;color:#fff;background:var(--red);border:0;border-radius:12px;padding:12px 16px;cursor:pointer;margin-top:6px}
.install p{margin:2px 0 6px}
button:focus-visible,input:focus-visible,summary:focus-visible,a:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
@media(min-width:620px){.nowname{font-size:5.4rem}.fing{max-width:72px}.fing.big{width:110px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

.blk{display:grid;gap:4px}
.keys{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.keys button{font:inherit;color:var(--text);background:transparent;border:1px solid var(--line);border-radius:12px;padding:8px 2px;cursor:pointer;display:flex;flex-direction:column;align-items:center;line-height:1.15}
.keys button b{font-size:1.05rem;color:#fff}.keys button small{font-size:.62rem;color:var(--muted)}
.keys button.on{background:var(--brass);border-color:var(--brass)}.keys button.on b,.keys button.on small{color:#2a1a05}
.keys button.pend{outline:2px dashed var(--brass);outline-offset:1px}
.mixer{display:grid;gap:2px}
.mrow{display:grid;grid-template-columns:5.6rem 1fr 3.4rem 3.8rem;align-items:center;gap:8px}
.mrow.dim .mname{opacity:.5}
.mname{font-weight:600;font-size:.88rem;line-height:1.15}
.mute{font:inherit;font-weight:700;font-size:.8rem;color:#2a1a05;background:var(--brass);border:0;border-radius:10px;padding:8px 0;cursor:pointer}
.mute.off{background:transparent;color:var(--muted);border:1px solid var(--line)}
.ex{font-size:.6rem;color:var(--brass-l);min-height:.9rem;line-height:.9rem}
.lead{flex:0 0 auto;margin:0}
.dotn{fill:#e6dac3}.col.act .dotn{fill:var(--brass)}

/* ===== v6: tabs, vaste balk, improviseren ===== */
.tabs{position:sticky;top:0;z-index:20;display:flex;gap:6px;max-width:760px;margin:0 auto;padding:6px 14px;background:linear-gradient(#12100e 60%,rgba(18,16,14,0))}
.tabs button{flex:1;font:inherit;font-weight:700;color:var(--text);background:transparent;border:1px solid var(--line);border-radius:12px;padding:11px 4px;cursor:pointer}
.tabs button.on{background:var(--brass);color:#2a1a05;border-color:var(--brass)}
main{padding-bottom:178px}
.pane{display:grid;gap:12px}
.pane[hidden]{display:none}
.bar{position:fixed;left:0;right:0;bottom:0;z-index:30;background:rgba(18,16,14,.96);border-top:1px solid var(--line);padding:6px 14px calc(8px + env(safe-area-inset-bottom));backdrop-filter:blur(8px)}
.barrow{display:flex;align-items:center;gap:12px;max-width:760px;margin:0 auto}
.bar .play{flex:0 0 auto;font-size:1.15rem;padding:12px 18px;min-width:128px}
.bar .tempo{flex:1;min-width:0}
.bar .trow{margin-bottom:0;font-size:.85rem}.bar .trow b{font-size:1.1rem}
.bar .round{flex:0 0 40px;height:40px;font-size:1.3rem}
.bar input[type=range]{height:30px}
.audiomsg{max-width:760px;margin:0 auto 4px;min-height:0}
.audiomsg:empty{display:none}
.ilabel{font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin:8px 0 2px}
.ichordrow{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin:4px 0 6px}
.ichord{font:800 3.2rem/1.05 "Plus Jakarta Sans",system-ui,sans-serif;color:#fff}
.iwho{font-weight:800;font-size:.95rem;border-radius:12px;padding:8px 12px;border:1px solid var(--line);color:var(--muted);text-align:center;max-width:9em}
.iwho:empty{display:none}
.iwho.ex{background:rgba(212,175,55,.18);color:var(--brass-l);border-color:var(--brass)}
.iwho.you{background:#2f7d3a;color:#fff;border-color:#2f7d3a}
.inotes{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 6px}
.inote{display:flex;flex-direction:column;align-items:center;min-width:3.1rem;border-radius:12px;padding:6px 6px 4px;border:1px solid var(--line);color:var(--text);line-height:1.1}
.inote b{font-size:1.15rem}.inote small{font-size:.66rem;opacity:.8}
.inote.ct{background:#2f7d3a;border-color:#2f7d3a;color:#fff}
.inote.st{opacity:.75}
.inote.hide{opacity:.4}
.chip-ct,.chip-st{display:inline-block;border-radius:6px;padding:0 6px;font-weight:700}
.chip-ct{background:#2f7d3a;color:#fff}.chip-st{border:1px solid var(--line)}
.imeasures{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:6px 0}
.imeas{border:1px solid var(--line);border-radius:12px;padding:10px 4px;text-align:center;font-weight:800;font-size:1.05rem;color:#fff}
.imeas small{display:block;font-weight:600;font-size:.64rem;color:var(--muted)}
.imeas.act{background:var(--brass);border-color:var(--brass);color:#2a1a05}.imeas.act small{color:#4a3510}
.imeas.cont{opacity:.7}
.ibeats{display:flex;gap:6px;margin:4px 0 6px}
.ibeat{flex:1;height:40px;border-radius:10px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--muted)}
.ibeat.hit{background:rgba(212,175,55,.25);color:var(--brass-l);border-color:var(--brass)}
.ibeat.cur{outline:3px solid #fff;outline-offset:1px}
.credits b{color:var(--brass-l)}
.iheard{color:var(--brass-l)}

.realbtn{font:inherit;font-weight:700;font-size:.76rem;color:var(--muted);background:transparent;border:1px solid var(--line);border-radius:10px;padding:8px 0;cursor:pointer}.realbtn.on{background:#2f7d3a;border-color:#2f7d3a;color:#fff}

/* v8: instrumentkeuze en notenschrift bij improviseren */
.instbar{display:flex;align-items:center;gap:8px;max-width:760px;margin:0 auto;padding:2px 14px 8px}
.instbar[hidden]{display:none}
.instlab{font-weight:700;font-size:.8rem;color:var(--muted);flex:0 0 auto}
.instbar button{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;font:inherit;color:var(--text);background:transparent;border:1px solid var(--line);border-radius:12px;padding:6px 8px;cursor:pointer}
.instbar button.on{background:var(--brass);border-color:var(--brass);color:#2a1a05}
.instbar .itx{display:flex;flex-direction:column;align-items:flex-start;line-height:1.1}
.instbar .itx b{font-size:1rem}.instbar .itx small{font-size:.66rem;opacity:.85}
.sax{width:22px;height:32px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.sax circle{fill:currentColor;stroke:none}
.sax.tenor{width:26px;height:36px}
.istripbox{margin:4px 0 6px}
.icols{flex:1;display:grid;grid-template-columns:repeat(8,1fr)}
.icell{display:flex;flex-direction:column;align-items:center;padding:0 0 4px}
.icell b{font-size:.82rem;color:#fff;margin-top:2px}.icell small{font-size:.6rem;color:var(--muted);line-height:1.1}
.headf{fill:#e6dac3;stroke:#e6dac3;stroke-width:1}
.icell.ct .headf{fill:#3fae4f;stroke:#3fae4f}.icell.ct .stem{stroke:#3fae4f}.icell.ct b{color:#7fe08e}
.icell.hide{opacity:.4}

.saxe{font-size:1.9rem;line-height:1;flex:0 0 auto}
.mrow{grid-template-columns:7rem 1fr 3.2rem 3.6rem}
.mname{font-size:.78rem}

.saxe.big{font-size:2.5rem}
.swapown{border-top:0;padding:4px 2px}.swapown input{width:5.5rem;font:inherit;padding:8px;border-radius:10px;border:1px solid var(--line);background:transparent;color:var(--text)}
#swapBlk[hidden]{display:none}

/* v11: drieklank op elke trap + eigen akkoorden */
.cols.trap{grid-template-columns:repeat(4,1fr);row-gap:6px}
.col.tc{padding-bottom:4px}
.tn{font-size:.62rem;color:var(--muted);font-weight:600;line-height:1.1;text-align:center}
.beam{stroke:#e6dac3;stroke-width:3.4}
.nh.cur .headf{fill:var(--brass);stroke:var(--brass)}.nh.cur .stem,.nh.cur .beam{stroke:var(--brass)}
.col.tc .headf{fill:#e6dac3;stroke:#e6dac3}
.staffsvg.mini{height:58px;width:100%}
.imeas{padding:6px 3px}
.imn{font-size:.58rem;font-weight:600;color:var(--muted)}
.imrow{display:flex;gap:2px;justify-content:center}
.imc{flex:1;display:flex;flex-direction:column;align-items:center;min-width:0}
.imc b{font-size:1.02rem}
.imnum{font-size:.8rem;font-weight:700;color:var(--brass-l);min-height:1.1em}.imnum sup{font-size:.62em}
.imeas.act .imnum{color:#4a3510}
.imeas .headf{fill:#e6dac3;stroke:#e6dac3}.imeas.act .headf{fill:#2a1a05;stroke:#2a1a05}.imeas.act .sl{stroke:#6b5420}.imeas.act .sharp{stroke:#2a1a05}
#iEditor textarea,#iName{width:100%;box-sizing:border-box;font:inherit;font-size:1.05rem;color:var(--text);background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
#iEditor textarea{resize:vertical;min-height:4.2em}
.erow{display:flex;gap:8px;align-items:center;margin:6px 0}
.pri{font:inherit;font-weight:700;color:#2a1a05;background:var(--brass);border:0;border-radius:12px;padding:10px 16px;cursor:pointer;flex:0 0 auto}
.bad{color:#ffb089}
.exs{margin:4px 0 6px}.exs button{font-size:.85rem;padding:8px 10px}
.saved{margin:6px 0}
.srow{display:flex;gap:8px;margin:6px 0}
.sload{flex:1;text-align:left;font:inherit;font-weight:700;color:var(--text);background:transparent;border:1px solid var(--line);border-radius:12px;padding:10px 12px;cursor:pointer}
.sdel{font:inherit;color:var(--muted);background:transparent;border:1px solid var(--line);border-radius:12px;padding:10px 12px;cursor:pointer}

/* v12: eigen saxofoontjes + brede indeling voor Mac en tablet */
.sax{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;width:26px;height:38px;flex:0 0 auto}
.sax.tenor{width:34px;height:48px}
.sax .bl{fill:currentColor}.sax .kd{fill:#1b1714;stroke:none}
.instbar button.on .kd{fill:var(--brass)}
@media(min-width:820px){
  .top,.tabs,.instbar,main,.barrow,.audiomsg{max-width:1180px}
  #tab-play,#tab-imp{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-items:start;gap:14px}
  #tab-play>*,#tab-imp>*{grid-column:1}
  #tab-play>.controls,#tab-imp>.controls{grid-column:2;grid-row:1 / span 4}
  #tab-play>.foot,#tab-imp>.foot{grid-column:1 / -1;grid-row:auto}
  #tab-sound{max-width:760px;margin:0 auto;width:100%}
  .nowname{font-size:6.4rem}
  .keys{grid-template-columns:repeat(4,1fr)}
}
@media(min-width:1180px){.instbar button{max-width:260px}.instbar{justify-content:flex-start}}

/* v14: eigen tabblad Akkoorden, maatstrepen */
#iEditor{display:none}
#tab-imp.chordsmode #iEditor{display:block}
#tab-imp.chordsmode #iProgsBlk{display:none}
.imeasures{gap:10px 0;border-right:2px solid #8d7a66}
.imeas{border:0;border-left:2px solid #8d7a66;border-radius:0}
.imeas.act{border-left-color:var(--brass)}
#iEditor textarea{font-size:1.15rem;min-height:5.2em}
@media(min-width:820px){
  #tab-imp.chordsmode{grid-template-columns:1fr}
  #tab-imp.chordsmode>*{grid-column:1}
  #tab-imp.chordsmode>.controls{grid-row:auto}
  #tab-imp.chordsmode .controls{display:grid;grid-template-columns:1fr 1fr;gap:6px 26px}
  #tab-imp.chordsmode .controls>.blk:last-child{grid-column:1 / -1}
  #iEditor .exs{max-width:760px}
}
.staffsvg.mini{height:74px}
@media(min-width:820px){.staffsvg.mini{height:118px}.imc b{font-size:1.25rem}.imnum{font-size:.95rem}}

/* v15: schema als vakjes met maatstrepen, direct in te typen */
#tab-imp.chordsmode #iRitme{display:none}
#tab-imp.chordsmode{display:flex;flex-direction:column;gap:12px}
#tab-imp.chordsmode #iAkkCard{order:1}#tab-imp.chordsmode #iEditor{order:2}#tab-imp.chordsmode>.now{order:3}#tab-imp.chordsmode>.controls{order:4}#tab-imp.chordsmode>.foot{order:5}
.imeasures.editgrid{border-right:0;gap:0}
.imeasures.editgrid .imeas{border:0;border-left:3px solid #d9c9a8;border-top:1px solid rgba(217,201,168,.25);border-bottom:1px solid rgba(217,201,168,.25);border-radius:0;padding:6px 4px 8px;min-width:0}
.imeasures.editgrid .imeas:nth-child(4n){border-right:3px solid #d9c9a8}
.imeasures.editgrid .imeas.act{background:rgba(212,175,55,.28);border-color:var(--brass)}
.imeasures.editgrid .imeas.act .imnum,.imeasures.editgrid .imeas.act .imn{color:var(--brass-l)}
.imeasures.editgrid .imeas .headf{fill:#e6dac3;stroke:#e6dac3}.imeasures.editgrid .imeas.act .headf{fill:#e6dac3;stroke:#e6dac3}
.imeasures.editgrid .imeas.act .sl{stroke:#8d7a66}.imeasures.editgrid .imeas.act .sharp{stroke:#e6dac3}
.bin{width:100%;box-sizing:border-box;text-align:center;font:inherit;font-weight:800;font-size:1.05rem;color:#fff;background:rgba(255,255,255,.06);border:1px dashed rgba(217,201,168,.45);border-radius:8px;padding:6px 2px;margin:2px 0 2px;min-width:0}
.bin:focus{outline:2px solid var(--brass);background:rgba(255,255,255,.12)}
.imeasures.editgrid .imc b{font-size:.82rem;color:var(--muted)}
.imeasures.editgrid .imc{flex:1}
.pri.alt{background:transparent;color:var(--brass-l);border:1px solid var(--line);font-weight:600}
@media(min-width:820px){.bin{font-size:1.3rem;padding:10px 4px}.imeasures.editgrid .imc b{font-size:1rem}}

.bin.bad{border-color:#e0664a;background:rgba(224,102,74,.14)}
#tab-imp.chordsmode>*{width:100%;max-width:none;box-sizing:border-box}

/* v17: tabblad Akkoorden als speelschema (geen educatie) */
#tab-imp.chordsmode>.now,#tab-imp.chordsmode .edu,#tab-imp.chordsmode>.foot,#tab-imp.chordsmode #iRitme{display:none}
#tab-imp.chordsmode .imnum,#tab-imp.chordsmode svg.mini,#tab-imp.chordsmode .imc b{display:none}
.altl{font-size:.8rem;color:var(--muted);text-align:center;min-height:1.1em;font-weight:600}
@media(min-width:820px){.bin{font-size:1.5rem;padding:12px 4px}}
#iFile{color:var(--text);font:inherit;font-size:.9rem;max-width:100%}

/* v26: voorbeeld in notenschrift */
#iSheet summary{cursor:pointer;font-weight:700;padding:6px 0;color:var(--brass-l,#e8c964)}
#iSheetBox{display:grid;gap:6px;margin-top:6px}
.staffsvg.sheet{background:rgba(255,255,255,.03);border-radius:10px}
.chtxt{fill:#e6dac3;font:700 13px system-ui,sans-serif}.chtxt.dim{fill:#8d7a66;font-weight:500;font-size:11px}
.flag{fill:none;stroke:#e6dac3;stroke-width:1.6}
.restf{fill:#e6dac3}.restl{fill:none;stroke:#e6dac3;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.nh.sn.on .headf,.nh.sn.on .head{fill:#ffd23f;stroke:#ffd23f}.nh.sn.on .stem,.nh.sn.on .beam,.nh.sn.on .flag,.nh.sn.on .sharp{stroke:#ffd23f}.nh.sn.on .dotn{fill:#ffd23f}

/* v28: schermvullend notenschrift */
.ov{position:fixed;inset:0;z-index:25;background:#16120f;overflow:auto;padding:12px 12px 130px}
.ov[hidden]{display:none}
.ovhead{display:flex;align-items:center;justify-content:space-between;gap:10px;max-width:960px;margin:0 auto 10px;color:var(--text,#e6dac3)}
#iSheetBig{display:grid;gap:12px;max-width:960px;margin:0 auto}
@media(min-width:700px){.ov{padding:18px 3vw 130px}.ovhead,#iSheetBig{max-width:1600px}.ovhead b{font-size:1.4rem}}
#iSheetBig .staffsvg.sheet{width:100%}
body.ovopen{overflow:hidden}

#iSheetOpen{white-space:normal;max-width:100%}
.ov{overflow-x:hidden}
#iSheetBig{grid-template-columns:minmax(0,1fr)}
#iSheetBig .staffsvg.sheet{max-width:100%;min-width:0}

/* v30: extra oefeningen, compact op de telefoon */
.tech{padding:4px 14px}
.tech details.more{border-top:1px solid rgba(255,255,255,.07);padding:2px 0}
.tech details.more:first-child{border-top:0}
.tech summary{display:flex;align-items:center;gap:8px;min-height:46px}
.tech summary::after{content:'+';margin-left:auto;font-weight:800;color:var(--muted);font-size:1.2rem}
.tech details[open]>summary::after{content:'–'}
.tech details[open]{padding-bottom:10px}
.tech details>*:not(summary){margin-top:8px}
.sumx{color:var(--muted);font-weight:600;font-size:.8rem}
#iKindMore{margin-top:6px}#iKindMore summary{font-size:.9rem}
.task{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;padding:12px 14px}
.tasklab{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--brass-l);font-weight:800;flex:0 0 100%}
.tasktxt{flex:1 1 14em;font-weight:600}
.task .link{white-space:nowrap}
.ltph{font-weight:700;color:var(--brass-l)}
.progress.lt0 i{background:#6aa3d6}.progress.lt2 i{background:#8d7a66}
.ltbox{border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.micbox{margin-top:8px;padding:12px;border:1px solid var(--line);border-radius:14px;text-align:center}
.micnote{font:800 3rem/1 "Plus Jakarta Sans",system-ui,sans-serif;color:#fff}
.micmeter{position:relative;height:10px;border-radius:6px;background:rgba(255,255,255,.1);margin:14px auto 12px;max-width:360px}
.micmid{position:absolute;left:50%;top:-5px;bottom:-5px;width:2px;background:var(--muted);transform:translateX(-1px)}
.micmark{position:absolute;top:-4px;width:12px;height:18px;border-radius:6px;background:var(--brass);transform:translateX(-6px);left:50%;transition:left .08s}
.micbox.ok .micmark{background:#3fae4f}.micbox.mid .micmark{background:#e0b02f}.micbox.bad .micmark{background:#e0664a}
.micfb{font-weight:700;min-height:1.5em}
.micbox.ok .micfb{color:#7fe08e}.micbox.mid .micfb{color:#f0cf6a}.micbox.bad .micfb{color:#ff9a85}
.logsum{font-size:.9rem}
.logbars{display:flex;gap:8px;align-items:flex-end;height:84px;margin:10px 0}
.lb{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:4px}
.lb i{display:block;width:100%;max-height:calc(100% - 20px);background:rgba(255,255,255,.12);border-radius:4px 4px 0 0}
.lb.has i{background:var(--brass)}
.lb span{font-size:.7rem;color:var(--muted)}.lb.today span{color:var(--brass-l);font-weight:800}
#tab-imp.chordsmode>#techI{order:4}
#tab-imp.chordsmode #iTask{display:none}
select[data-tr]{font:inherit;color:var(--text);background:#2a2520;border:1px solid var(--line);border-radius:8px;padding:4px 6px}
/* v30: geen horizontaal schuiven op smalle telefoons */
.erow{flex-wrap:wrap}
.instbar button{min-width:0}
@media(max-width:480px){.instbar .itx small{display:none}.instbar button{padding:6px 6px;gap:6px}.instlab{font-size:.75rem}}
#tab-imp.chordsmode .erow .pri{flex:1 1 auto}
.tabs button{min-width:0;white-space:nowrap}
@media(max-width:520px){.tabs{gap:5px;padding:6px 10px}.tabs button{font-size:.78rem;padding:11px 2px}}
main>.pane{min-width:0;max-width:100%}
@media(min-width:820px){
  #tab-play,#tab-imp{grid-template-rows:auto auto auto auto 1fr}
  #tab-play>.controls,#tab-imp>.controls{grid-row:1 / span 5}
  #tab-imp.chordsmode{grid-template-rows:none}
  #tab-imp.chordsmode>.controls{grid-row:auto}
}

/* v31: aanstoten */
.ex.art{font-size:.8rem;font-weight:800;line-height:1.05;white-space:normal;text-align:center;min-height:2.1rem;padding:2px 1px 0}
.artdemo{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px}
.adwrap{flex:1 1 120px;min-width:0}
.adcell{display:grid;gap:4px;border:1px solid var(--line);border-radius:12px;padding:8px 6px}
.adh{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.adh i{display:block;height:14px;border-radius:7px;background:var(--brass);opacity:.45;transition:opacity .08s}
.adh.on i{opacity:1;background:#ffd23f}
.adh span{font-size:.85rem;font-weight:800;color:var(--brass-l)}
.adlab{font-size:.7rem;color:var(--muted);text-align:center;margin-top:3px}
.drstat{color:var(--brass-l);font-weight:600}

/* v37: hele oefening in notenschrift */
.exsheet{padding:6px 14px}
.exbox{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.exrow{background:rgba(255,255,255,.03);border-radius:10px}
.exbg{fill:transparent}.exbg.cur{fill:rgba(212,175,55,.13)}
.brl{stroke:#8d7a66;stroke-width:1}
.exn.cur .head,.exn.cur .headf{stroke:var(--brass);fill:#ffd23f}.exn.cur .stem{stroke:var(--brass)}.exn.cur .sharp{stroke:var(--brass)}
@media(min-width:820px){.exbox{gap:14px}}

#exSheet summary{cursor:pointer;font-weight:700;padding:6px 0;color:var(--brass-l,#e8c964)}
#exOpen{white-space:normal;max-width:100%}
.exbox{display:grid;gap:6px;margin-top:6px}
#iSheetBig .exrow{width:100%}

.ovhint{max-width:960px;margin:0 auto 8px}
@media(min-width:700px){.ovhint{max-width:1600px}}
#iSheetBig .exrow{display:block}
.ver{white-space:nowrap;opacity:.7}