: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}
.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:62%;height:auto;max-width:34px}
.fing.big{width:84px;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:2.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:42px}.fing.big{width:100px}}
@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.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}