:root{--bg:#f5f0e6;--surf:#fff;--bdr:#ddd5bf;--bdr2:#ece5d3;--tx:#18130a;--txm:#5a4e38;--txd:#8a7c62;--gold:#8a6008;--gbg:#fef8e4;--gbd:#c8a028;--blue:#1a4e7a;--bbg:#eaf3fb;--bbd:#5a9cd0;--grn:#185c28;--gbg2:#edfaf0;--gbd2:#50b070;--pur:#5a1c8a;--pbg:#f5eeff;--pbd:#9860c8;--red:#7a1808;--rbg:#fdf0ee;--rbd:#c06050;--org:#8a4008;--obg:#fff5ee;--obd:#c88040;--tel:#0a5a60;--tbg:#eafaf8;--tbd:#40a8b0;--arp:#3a5a1a;--arpbg:#f0fae8;--arpbd:#80b840}*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{height:100%}body{background:var(--bg);color:var(--tx);font-family:'DM Mono',monospace;font-size:14px;transition:background .2s,color .2s;display:flex;flex-direction:column;height:100%}header{background:var(--tx);padding:0 20px;display:flex;align-items:center;height:32px;flex-shrink:0}.logo{font-family:'Playfair Display',serif;font-size:20px;color:#f0e8cc;letter-spacing:.06em;font-weight:700;white-space:nowrap;flex-shrink:0}.logo-sub{display:none}.main-nav{display:flex;flex:1;justify-content:center;height:100%;overflow-x:auto;scrollbar-width:none;background:none;border:none}.main-nav::-webkit-scrollbar{display:none}.mnav-btn{flex:0 0 auto;background:none;border:none;color:#b89060;font-family:'DM Mono',monospace;font-size:12px;font-weight:600;letter-spacing:.06em;padding:0 16px;height:100%;cursor:pointer;text-transform:uppercase;border-bottom:3px solid transparent;border-top:3px solid transparent;transition:all .12s;white-space:nowrap}.mnav-btn.active{color:#f0d890;border-bottom-color:#c8a028}.lang-btn{background:none;border:1.5px solid #6a5030;border-radius:4px;font-size:10px;font-family:'DM Mono',monospace;font-weight:700;cursor:pointer;padding:3px 7px;opacity:.45;transition:all .15s;line-height:1;flex-shrink:0;color:#c8a060;letter-spacing:.06em}.lang-btn.active{opacity:1;background:#4a3020;border-color:#c8a028;color:#f0d890}#appContent{flex:1;min-height:0;overflow-y:auto;padding:16px 32px max(calc(40vh + 32px),292px);width:100%}.slabel{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--txd);margin-bottom:6px;margin-top:12px;font-weight:600}.note-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;margin-bottom:4px}.nbtn{background:var(--surf);border:1.5px solid var(--bdr);border-radius:5px;color:var(--txm);font-family:'DM Mono',monospace;font-size:12px;font-weight:500;padding:10px 2px;cursor:pointer;text-align:center;transition:all .1s;user-select:none}.nbtn.on{background:var(--tx);border-color:var(--tx);color:#f0e8cc;font-weight:700}.chord-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:4px}.cbtn{background:var(--surf);border:1.5px solid var(--bdr);border-radius:6px;color:var(--txm);font-family:'DM Mono',monospace;padding:7px 9px;cursor:pointer;text-align:left;transition:all .1s;user-select:none}.cbtn .cs{font-size:14px;display:block;color:var(--tx);font-weight:600}.cbtn .cd{font-size:8px;color:var(--txd);display:block;margin-top:1px}.cbtn.on{border-color:var(--gbd);background:var(--gbg)}.cbtn.on .cs{color:var(--gold)}.preview{background:var(--surf);border:1.5px solid var(--bdr);border-radius:8px;padding:10px;margin-top:10px;display:none;text-align:center}.preview.show{display:block}.prev-name{font-family:'Playfair Display',serif;font-size:34px;color:var(--tx);line-height:1}.prev-tag{display:inline-flex;align-items:center;gap:5px;margin-top:6px;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--txm);border:1.5px solid var(--bdr);border-radius:20px;padding:2px 9px;background:var(--bg)}.cdot{width:7px;height:7px;border-radius:50%;flex-shrink:0}.dom-warn{margin-top:6px;font-size:9px;color:var(--red);display:none;align-items:center;justify-content:center;gap:4px;font-weight:600}.dom-warn::before{content:'⚡'}.go-btn{width:100%;background:var(--tx);border:none;border-radius:8px;color:#f0e8cc;font-family:'Playfair Display',serif;font-size:15px;letter-spacing:.06em;padding:13px;cursor:pointer;margin-top:10px;box-shadow:0 3px 10px rgba(0,0,0,.2)}.go-btn:active{opacity:.8}#results{display:none;margin-top:14px}#results.show{display:block}.res-divider{height:2px;background:linear-gradient(90deg,transparent,var(--bdr),transparent);margin:10px 0}.res-header{background:var(--tx);padding:0 20px;display:flex;align-items:center;height:46px;flex-shrink:0}.res-chord{font-family:'Playfair Display',serif;font-size:22px;letter-spacing:.05em}.res-sub{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:11px;color:#a09070;margin-top:2px}.filter-box{background:var(--surf);border:1.5px solid var(--bdr);border-radius:8px;padding:9px 11px;margin-bottom:9px;display:none}.filter-box.show{display:block}.filter-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}.filter-title{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--txd);font-weight:600}.filter-clear{font-size:9px;color:var(--red);cursor:pointer;padding:2px 6px;border:1px solid var(--rbd);border-radius:4px;background:var(--rbg);display:none}.filter-clear.vis{display:block}.filter-grid{display:flex;flex-wrap:wrap;gap:3px}.ibtn{font-family:'DM Mono',monospace;font-size:10px;font-weight:600;padding:4px 7px;border-radius:5px;border:1.5px solid var(--bdr);background:var(--bg);color:var(--txm);cursor:pointer;transition:all .1s}.ibtn.on{background:var(--tx);border-color:var(--tx);color:#f0e8cc}.filter-count{font-size:9px;color:var(--txd);margin-top:5px;letter-spacing:.05em;display:none}.filter-count.vis{display:block}.tabs{display:flex;gap:3px;margin-bottom:9px;overflow-x:auto;scrollbar-width:none}.tabs::-webkit-scrollbar{display:none}.tab-btn{flex:none;background:var(--surf);border:1.5px solid var(--bdr);border-radius:6px;font-family:'DM Mono',monospace;font-size:9px;font-weight:600;letter-spacing:.07em;padding:6px 9px;cursor:pointer;color:var(--txm);text-transform:uppercase;white-space:nowrap;transition:all .1s}.tab-btn.active{background:var(--tx);border-color:var(--tx);color:#f0e8cc}.tab-panel{display:none}.tab-panel.active{display:block}.legend{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:7px;font-size:9px;color:var(--txd)}.leg{display:flex;align-items:center;gap:4px}.ldot{width:9px;height:9px;border-radius:2px;border:1.5px solid}.ldot.ct{border-color:var(--gbd);background:var(--gbg)}.ldot.pass{border-color:var(--bdr);background:var(--bg)}.ldot.ac{border-color:var(--arpbd);background:var(--arpbg)}.fam-head{display:flex;align-items:center;gap:6px;margin:13px 0 5px;font-size:8px;letter-spacing:.2em;text-transform:uppercase}.fam-head.hidden{display:none}.scard{background:var(--surf);border:1.5px solid var(--bdr);border-radius:7px;margin-bottom:6px;overflow:hidden;animation:up .18s ease both;box-shadow:0 1px 4px rgba(0,0,0,.05)}.scard.arp-card{border-left:3px solid var(--arpbd)}.scard.hidden{display:none}@keyframes up{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}.scard-head{padding:9px 10px 7px;display:flex;align-items:flex-start;justify-content:space-between;cursor:pointer;border-bottom:1.5px solid transparent}.scard.open .scard-head{border-bottom-color:var(--bdr2)}.sc-fullname{font-size:13px;font-weight:700;color:var(--tx);line-height:1.2;margin-bottom:1px}.sc-sub{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:11px;color:var(--txd)}.mbar-wrap{margin-top:3px}.mbar{height:3px;background:var(--bdr2);border-radius:2px;overflow:hidden;width:56px}.mbar-fill{height:100%;border-radius:2px}.mbar-lbl{font-size:8px;margin-top:1px;letter-spacing:.04em}.badge{font-size:7px;letter-spacing:.08em;text-transform:uppercase;padding:2px 5px;border-radius:8px;white-space:nowrap;border:1.5px solid;flex-shrink:0;margin-left:4px;margin-top:1px}.b-base{color:var(--gold);border-color:var(--gbd);background:var(--gbg)}.b-melo{color:var(--tel);border-color:var(--tbd);background:var(--tbg)}.b-harm{color:var(--pur);border-color:var(--pbd);background:var(--pbg)}.b-penta{color:var(--blue);border-color:var(--bbd);background:var(--bbg)}.b-bebop{color:var(--grn);border-color:var(--gbd2);background:var(--gbg2)}.b-blues{color:var(--red);border-color:var(--rbd);background:var(--rbg)}.b-modal{color:var(--org);border-color:var(--obd);background:var(--obg)}.b-out{color:#8a4820;border-color:#c07040;background:var(--obg)}.b-arp{color:var(--arp);border-color:var(--arpbd);background:var(--arpbg)}.b-triad{color:#3a3a8a;border-color:#8080c8;background:#eeeeff}.toggle-arrow{font-size:9px;color:var(--txd);margin-left:2px;transition:transform .2s;flex-shrink:0;align-self:center}.scard.open .toggle-arrow{transform:rotate(180deg)}.scard-body{display:none;padding:9px 10px 8px}.scard.open .scard-body{display:block}.score-row{display:flex;align-items:center;gap:6px;margin-bottom:7px;padding-bottom:6px;border-bottom:1.5px solid var(--bdr2)}.score-circ{width:38px;height:38px;border-radius:50%;border:2px solid;display:flex;align-items:center;justify-content:center;flex-shrink:0}.score-n{font-size:13px;font-weight:700;line-height:1}.score-d{font-size:8px;color:var(--txd)}.score-txt{font-size:10px;color:var(--txm);line-height:1.5;flex:1}.score-txt strong{color:var(--tx);font-weight:600}.play-btn{background:var(--bg);border:1.5px solid var(--bdr);border-radius:6px;color:var(--txm);font-size:10px;font-family:'DM Mono',monospace;font-weight:600;padding:4px 9px;cursor:pointer;flex-shrink:0;letter-spacing:.04em;transition:all .15s;display:flex;align-items:center;gap:4px}.play-btn:hover{background:var(--gbg);border-color:var(--gbd);color:var(--gold)}.play-btn.playing{background:var(--tx);border-color:var(--tx);color:#f0e8cc}.play-btn:active{opacity:.75}.nstrip{display:flex;flex-wrap:wrap;gap:3px;margin-bottom:6px}.npenta,.narp{display:flex;gap:3px;margin-bottom:6px;flex-wrap:wrap}.nc{background:var(--bg);border:1.5px solid var(--bdr);border-radius:4px;padding:5px 3px;min-width:30px;flex:1;text-align:center}.nc.ct{border-color:var(--gbd);background:var(--gbg)}.nc.ac{border-color:var(--arpbd);background:var(--arpbg)}.npenta .nc,.narp .nc{min-width:40px}.np{font-size:12px;color:var(--tx);display:block;font-weight:600}.nc.ct .np{color:var(--gold)}.nc.ac .np{color:var(--arp)}.ni{font-size:8px;color:var(--txd);display:block;margin-top:1px}.nc.ct .ni{color:#9a7a18}.nc.ac .ni{color:var(--arp)}.sdesc{font-size:10px;color:var(--txm);line-height:1.65;border-top:1.5px solid var(--bdr2);padding-top:6px}.stip{font-size:9px;color:var(--txm);margin-top:4px;padding:4px 8px;border-radius:4px;background:var(--bg);border:1.5px solid var(--bdr)}.stip::before{content:'→ ';color:var(--gold);font-weight:700}.fav-btn{background:none;border:none;font-size:13px;cursor:pointer;padding:1px 3px;opacity:.45;transition:opacity .15s;flex-shrink:0}.fav-btn.on{opacity:1}.empty-msg{text-align:center;padding:20px;font-size:11px;color:var(--txd);display:none}.empty-msg.show{display:block}.kbd-outer{overflow-x:auto;padding-bottom:3px}.kbd{position:relative;height:64px}.kbd-white{position:absolute;width:28px;height:64px;background:#fff;border:1.5px solid #bbb;border-radius:0 0 4px 4px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:3px}.kbd-black{position:absolute;height:40px;background:#18130a;border-radius:0 0 3px 3px;z-index:2;display:flex;align-items:flex-end;justify-content:center;padding-bottom:3px}.kbd-white.hl{background:#f0c040;border-color:#c8a028}.kbd-black.hl{background:#c88010}.kbd-lbl{font-size:7px;font-weight:700;color:rgba(0,0,0,.4)}.kbd-white.hl .kbd-lbl,.kbd-black.hl .kbd-lbl{color:#fff;opacity:.9}.transp-wrap{margin:5px 0;padding:7px 10px;background:var(--bg);border:1.5px solid var(--bdr);border-radius:5px}.transp-title{font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:var(--txd);margin-bottom:4px;font-weight:600}.transp-grid{display:flex;flex-wrap:wrap;gap:3px}.transp-note{font-size:10px;font-weight:600;color:var(--txm);padding:2px 5px;border-radius:3px;border:1px solid var(--bdr);background:var(--surf)}.transp-note.root{border-color:var(--gbd);background:var(--gbg);color:var(--gold)}.guide-wrap{margin-top:5px;padding:6px 8px;background:var(--pbg);border:1.5px solid var(--pbd);border-radius:5px}.guide-title{font-size:8px;letter-spacing:.12em;text-transform:uppercase;color:var(--pur);margin-bottom:3px;font-weight:600}.guide-row{display:flex;gap:7px;flex-wrap:wrap;font-size:10px}.guide-note{font-weight:700;color:var(--pur)}.guide-res{color:var(--grn);font-weight:600}.lib-toolbar{background:var(--surf);border:1.5px solid var(--bdr);border-radius:8px;padding:10px;margin-bottom:0}.lib-cat-btn{font-family:'DM Mono',monospace;font-size:8px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:3px 8px;border-radius:12px;border:1.5px solid var(--bdr);background:var(--bg);color:var(--txm);cursor:pointer;transition:all .1s;white-space:nowrap}.lib-cat-btn.on{background:var(--tx);border-color:var(--tx);color:#f0e8cc}.lib-item{background:var(--surf);border:1.5px solid var(--bdr);border-radius:7px;padding:10px 12px;margin-bottom:5px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:all .12s;gap:8px}.lib-item:hover{border-color:var(--gbd);background:var(--gbg)}.lib-item.active{border-color:var(--gold);background:var(--gbg);box-shadow:0 2px 8px rgba(200,160,40,.15)}.lib-item-left{flex:1;min-width:0}.lib-item-name{font-size:12px;font-weight:700;color:var(--tx);margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lib-item-notes{font-size:9px;color:var(--txd);letter-spacing:.04em}.lib-ni-row{display:flex;flex-wrap:wrap;gap:3px;align-items:flex-end;margin-top:3px}.lib-ni-pair{display:inline-flex;flex-direction:column;align-items:center;gap:1px}.lib-ni-note{font-size:9px;font-weight:600;color:var(--txm);font-family:'DM Mono',monospace}.lib-ni-int{font-size:7px;color:var(--txd);letter-spacing:.03em}.lib-ni-root .lib-ni-note{color:var(--gold);font-weight:700}.lib-ni-root .lib-ni-int{color:var(--gold);opacity:.7}.lib-ni-sep{font-size:8px;color:var(--bdr);align-self:center;padding:0 1px;line-height:1.8}.lib-item-badge{font-size:7px;letter-spacing:.08em;text-transform:uppercase;padding:2px 6px;border-radius:8px;border:1.5px solid var(--bdr);color:var(--txm);background:var(--bg);white-space:nowrap;flex-shrink:0}.lib-item-play{background:var(--bg);border:1.5px solid var(--bdr);border-radius:5px;color:var(--txm);font-size:9px;font-family:'DM Mono',monospace;font-weight:600;padding:3px 7px;cursor:pointer;flex-shrink:0;transition:all .12s}.lib-item-play:hover{background:var(--gbg);border-color:var(--gbd);color:var(--gold)}.lib-item-play.playing{background:var(--tx);border-color:var(--tx);color:#f0e8cc}.lib-cat-head{font-size:8px;letter-spacing:.2em;text-transform:uppercase;color:var(--txd);font-weight:600;margin:12px 0 5px;padding-bottom:4px;border-bottom:1.5px solid var(--bdr2)}.fav-section{background:var(--surf);border:1.5px solid var(--bdr);border-radius:8px;padding:11px;margin-bottom:10px}.fav-title{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--txd);font-weight:600;margin-bottom:7px}.fav-item{display:flex;align-items:center;justify-content:space-between;padding:5px 0;border-bottom:1px solid var(--bdr2);font-size:11px}.fav-item:last-child{border-bottom:none}.fav-remove{background:none;border:none;color:var(--red);cursor:pointer;font-size:12px;padding:2px 5px}.fav-empty{font-size:10px;color:var(--txd);text-align:center;padding:10px 0;letter-spacing:.05em}.hist-item{display:flex;align-items:center;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--bdr2);cursor:pointer}.hist-item:last-child{border-bottom:none}.hist-chord{font-size:14px;font-weight:700;color:var(--tx)}.hist-time{font-size:9px;color:var(--txd)}.hist-replay{font-size:9px;color:var(--blue);padding:2px 6px;border:1px solid var(--bbd);border-radius:4px;background:var(--bbg)}.compare-cols{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:7px}.compare-col{background:var(--bg);border-radius:5px;padding:7px}.compare-col-title{font-size:10px;font-weight:700;color:var(--tx);margin-bottom:5px;text-align:center}.compare-scale{font-size:9px;color:var(--txm);padding:2px 0;border-bottom:1px solid var(--bdr2);display:flex;justify-content:space-between}.compare-scale:last-child{border-bottom:none}.metro-wrap{background:var(--surf);border:1.5px solid var(--bdr);border-radius:10px;padding:16px;margin-bottom:10px}.metro-section{margin-bottom:14px;padding-bottom:14px;border-bottom:1.5px solid var(--bdr2)}.metro-section:last-child{margin-bottom:0;padding-bottom:0;border-bottom:none}.metro-slabel{font-size:8px;letter-spacing:.2em;text-transform:uppercase;color:var(--txd);font-weight:600;margin-bottom:6px}.metro-compact{background:var(--surf);border:1.5px solid var(--bdr);border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:8px}.mc-row{display:flex;align-items:center;gap:8px}.mc-top{align-items:center}.mc-bpm-block{display:flex;align-items:baseline;gap:5px;min-width:90px}.mc-bpm-btns{display:flex;gap:4px;flex:1}.mc-grid3{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding-top:8px;border-top:1px solid var(--bdr2)}.tap-btn-sm{font-family:"DM Mono",monospace;font-size:10px;font-weight:700;letter-spacing:.1em;padding:6px 10px;border-radius:6px;border:1.5px solid var(--bdr);background:var(--bg);color:var(--tx);cursor:pointer;white-space:nowrap;transition:all .1s}.tap-btn-sm:active{background:var(--gbg);border-color:var(--gbd)}.metro-bpm-row{display:flex;align-items:center;justify-content:center;gap:16px}.metro-bpm{font-family:'Playfair Display',serif;font-size:42px;color:var(--tx);line-height:1}.metro-bpm-unit{font-size:9px;color:var(--txd);letter-spacing:.15em;text-transform:uppercase;margin-top:2px;text-align:center}.metro-beat{display:flex;justify-content:center;gap:10px;margin:8px 0;flex-wrap:wrap}.beat-dot{width:28px;height:28px;border-radius:50%;background:var(--bdr2);border:2px solid var(--bdr);transition:background .04s,transform .04s,border-color .04s;display:flex;align-items:center;justify-content:center;cursor:pointer;user-select:none}.beat-dot.active{background:var(--gold);border-color:var(--gbd);transform:scale(1.4);box-shadow:0 0 8px rgba(200,160,40,.5)}.beat-dot.accent{background:var(--tx);border-color:var(--txm);color:#f0e8cc}.beat-dot.active.accent{background:#e85010;border-color:#b03000;transform:scale(1.5);box-shadow:0 0 12px rgba(220,80,20,.7)}.beat-dot.muted{background:var(--bg);border-color:var(--bdr);opacity:.35;text-decoration:line-through}.beat-dot.active.muted{background:var(--bdr2);border-color:var(--bdr);transform:scale(1.05);box-shadow:none;opacity:.3}.metro-slider{width:100%;-webkit-appearance:none;height:5px;border-radius:3px;background:var(--bdr2);outline:none;cursor:pointer}.metro-slider::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--tx);cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.3)}.mbtn{background:var(--tx);border:none;border-radius:6px;color:#f0e8cc;font-family:'DM Mono',monospace;font-size:11px;font-weight:600;padding:8px 13px;cursor:pointer;transition:opacity .1s;letter-spacing:.04em}.mbtn:active{opacity:.75}.mbtn.big{font-size:13px;padding:11px 24px;min-width:90px}.mbtn.outline{background:none;border:1.5px solid var(--bdr);color:var(--txm)}.mbtn.outline.on{background:var(--tx);border-color:var(--tx);color:#f0e8cc}.sig-grid{display:flex;gap:4px;flex-wrap:wrap}.sig-btn{font-family:'DM Mono',monospace;font-size:10px;padding:5px 10px;border-radius:5px;border:1.5px solid var(--bdr);background:var(--bg);color:var(--txm);cursor:pointer;transition:all .1s}.sig-btn.on{background:var(--tx);border-color:var(--tx);color:#f0e8cc}.subdiv-grid{display:flex;gap:4px;flex-wrap:wrap}.subdiv-btn{font-family:'DM Mono',monospace;font-size:10px;padding:5px 10px;border-radius:5px;border:1.5px solid var(--bdr);background:var(--bg);color:var(--txm);cursor:pointer;transition:all .1s}.subdiv-btn.on{background:var(--tx);border-color:var(--tx);color:#f0e8cc}.sound-grid{display:flex;gap:4px;flex-wrap:wrap}.sound-btn{font-family:'DM Mono',monospace;font-size:10px;padding:5px 10px;border-radius:5px;border:1.5px solid var(--bdr);background:var(--bg);color:var(--txm);cursor:pointer;transition:all .1s}.sound-btn.on{background:var(--tx);border-color:var(--tx);color:#f0e8cc}.vol-row{display:flex;align-items:center;gap:10px}.vol-label{font-size:10px;color:var(--txd);min-width:28px;text-align:right}.tap-btn{display:none}.tap-btn:active{background:var(--gbg);border-color:var(--gbd)}.tempo-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:5px}.tempo-preset{font-family:'DM Mono',monospace;font-size:9px;padding:7px 8px;border-radius:6px;border:1.5px solid var(--bdr);background:var(--bg);color:var(--txm);cursor:pointer;text-align:left;transition:all .1s;line-height:1.4}.tempo-preset:active{background:var(--gbg);border-color:var(--gbd)}.tempo-preset .tp-name{font-weight:700;color:var(--tx);display:block;font-size:10px}.tempo-preset .tp-range{color:var(--txd);font-size:8px;display:block;margin-top:1px}.accent-row{display:flex;gap:5px;flex-wrap:wrap;margin-top:6px}.acc-btn{width:32px;height:32px;border-radius:50%;border:2px solid var(--bdr);background:var(--bg);font-family:'DM Mono',monospace;font-size:9px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--txm);transition:all .12s}.acc-btn.strong{background:#b87818;border-color:#8a5010;color:#fff}.acc-btn.medium{background:var(--gbg);border-color:var(--gbd);color:var(--gold)}.prog-preset{font-family:'DM Mono',monospace;font-size:9px;padding:5px 9px;border-radius:5px;border:1.5px solid var(--bdr);background:var(--bg);color:var(--txm);cursor:pointer;transition:all .1s;margin:0 3px 3px 0;display:inline-block}.prog-chord-cell{background:var(--surf);border:1.5px solid var(--bdr);border-radius:6px;padding:7px;cursor:pointer;text-align:left;transition:all .1s}.prog-chord-cell.on{border-color:var(--gbd);background:var(--gbg)}.prog-chord-cell .pc-deg{font-size:8px;color:var(--txd);text-transform:uppercase;letter-spacing:.08em;display:block;margin-bottom:2px}.prog-chord-cell .pc-name{font-size:14px;font-weight:700;color:var(--tx);display:block}.prog-chord-cell .pc-type{font-size:9px;color:var(--txm);display:block}.prog-chord-cell.on .pc-name{color:var(--gold)}#neckPanel{position:fixed;bottom:0;left:0;right:0;height:40vh;min-height:260px;max-height:440px;background:#c8cdd6;border-top:3px solid #8a8a80;z-index:600;display:flex;flex-direction:column;box-shadow:0 -3px 18px rgba(0,0,0,.28)}#neckBar{position:relative;display:flex;align-items:center;padding:5px 10px 4px;background:#d8dde4;border-bottom:2px solid #aab0ba;gap:7px;flex-shrink:0}#neckBarLeft{display:flex;gap:8px;align-items:center;flex-shrink:0}#neckBarRight{display:flex;gap:5px;align-items:center;flex-shrink:0}#neckBarTitle{flex:1;text-align:center;font-family:'DM Mono',monospace;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#18130a}.ntb{font-family:'DM Mono',monospace;font-size:9px;font-weight:700;letter-spacing:.1em;padding:4px 9px;border-radius:20px;border:2px solid #888;background:#e0e5eb;color:#444;cursor:pointer;transition:all .12s;text-transform:uppercase;white-space:nowrap}.ntb.on{background:#4a3828;border-color:#2e2010;color:#f0e0b0}.neck-toggle{display:flex;align-items:center;gap:7px;cursor:pointer;user-select:none}.neck-toggle-label{font-family:'DM Mono',monospace;font-size:8px;font-weight:700;letter-spacing:.1em;color:#3a2818;opacity:1;transition:opacity .15s}.neck-toggle-label2{font-family:'DM Mono',monospace;font-size:8px;font-weight:700;letter-spacing:.1em;color:#3a2818;opacity:.4;transition:opacity .15s}.neck-toggle-track{width:36px;height:18px;border-radius:9px;background:#8a6840;border:1.5px solid #5a3818;position:relative;transition:background .15s;cursor:pointer}.neck-toggle-thumb{width:12px;height:12px;border-radius:50%;background:#f0e0b0;position:absolute;top:2px;left:2px;transition:left .15s}.neck-toggle.notes .neck-toggle-label{opacity:.4}.neck-toggle.notes .neck-toggle-label2{opacity:1}.neck-toggle.notes .neck-toggle-thumb{left:20px}.ntb.print-btn{background:#4a3828;border-color:#2e2010;color:#f0e0b0;display:flex;align-items:center;gap:4px}.ntb.tuning-btn{background:#4a3828;border-color:#2e2010;color:#f0e0b0;display:flex;align-items:center;gap:4px}.ntb.fret-btn{font-size:8px;padding:3px 7px}.neck-toggle-btn{font-size:13px;padding:2px 8px;line-height:1;border-radius:6px;background:#5a4838;border-color:#3a2818;color:#f0e0b0;font-weight:700}.neck-toggle-btn:hover{background:#3a2818}#neckPanel.collapsed{height:36px!important;min-height:36px!important;overflow:hidden}#neckPanel.collapsed #neckArea{display:none}#neckPanel.collapsed #neckToggleBtn{transform:rotate(180deg)}#mobileNav{display:none}#neckFloatBtn{display:none}#metroFloatBtn{display:flex;align-items:center;gap:5px;background:rgba(255,255,255,0.08);color:#5a4000;border:1.5px solid rgba(140,120,60,0.5);border-radius:16px;padding:4px 10px;font-family:'DM Mono',monospace;font-size:10px;font-weight:700;letter-spacing:.04em;cursor:pointer;transition:background .15s;white-space:nowrap}#metroFloatBtn:hover{background:rgba(255,255,255,0.15)}#metroFloatBtn.playing{background:rgba(40,160,80,.35);border-color:rgba(60,200,100,.4);color:#80f0a0}.mfb-icon{font-size:12px;line-height:1}.mfb-bpm{font-size:9px;opacity:.9}
#lib3cols{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;align-items:start}
.lib3-col{min-width:0}
.lib3-col .lib-toolbar{margin-bottom:0;padding:8px 10px}
.lib3-col .note-grid{grid-template-columns:repeat(6,1fr);gap:2px}
.lib3-col .nbtn{font-size:10px;padding:6px 1px}
.lib3-title{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--txd);font-weight:700;margin-bottom:6px;display:flex;align-items:center;gap:5px;padding:0 2px}
.lib3-icon{font-size:11px}
#libScaleDetail{margin-top:10px}
#finderResults2::-webkit-scrollbar{width:4px}
#finderResults2::-webkit-scrollbar-thumb{background:var(--bdr);border-radius:2px}
@media (max-width:600px){#metroFloatBtn{padding:3px 7px;font-size:9px}.mfb-bpm{display:none}}@media (max-width:600px){header .main-nav{display:none}header>div:last-of-type{display:none}#mobileNav{display:flex;position:fixed;bottom:0;left:0;right:0;height:56px;background:var(--tx);border-top:2px solid #3a2e1a;z-index:700;align-items:stretch;box-shadow:0 -2px 12px rgba(0,0,0,.3)}.mnav-mobile{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;background:none;border:none;color:#b89060;cursor:pointer;padding:4px 2px;gap:2px;border-top:3px solid transparent;transition:all .12s}.mnav-mobile.active{color:#f0d890;border-top-color:#c8a028}.mnav-icon{font-size:16px;line-height:1}.mnav-lbl{font-family:'DM Mono',monospace;font-size:8px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}.mnav-lang{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:3px;padding:4px 6px;border-left:1px solid #3a2e1a}.mnav-lang .lang-btn{font-size:8px;padding:2px 4px}header{padding:0 14px;height:40px;justify-content:center}.logo{font-size:16px}#appContent{padding:10px 12px max(calc(36vh + 20px),220px);overflow-y:auto}.note-grid{gap:2px;grid-template-columns:repeat(6,1fr)}.nbtn{font-size:10px;padding:7px 1px}.chord-grid{grid-template-columns:repeat(2,1fr);gap:3px}.cbtn{padding:6px 7px}.cbtn .cs{font-size:12px}.cbtn .cd{font-size:7px}.go-btn{font-size:14px;padding:11px}.prev-name{font-size:26px}.scard{overflow:hidden}.sc-fullname{font-size:12px}.score-row{flex-wrap:wrap;gap:5px}.score-circ{width:32px;height:32px}.score-n{font-size:11px}.play-btn{font-size:9px;padding:3px 7px}.nstrip,.npenta,.narp{gap:2px;flex-wrap:wrap}.nc{min-width:22px;padding:4px 1px;flex:1}.np{font-size:10px}.ni{font-size:7px}.npenta .nc,.narp .nc{min-width:30px}.sdesc,.stip{font-size:9px;word-break:break-word}.tabs{flex-wrap:nowrap;overflow-x:auto}.tab-btn{font-size:8px;padding:5px 7px;flex-shrink:0}.res-header{padding:0 10px;height:40px}.res-chord{font-size:17px}.lib-item{padding:8px 10px}.lib-item-name{font-size:11px}.lib-toolbar{padding:8px}#neckPanel{height:36vh;min-height:200px;max-height:320px}#neckBarTitle{font-size:9px}.ntb{font-size:8px;padding:3px 6px}.neck-toggle-label,.neck-toggle-label2{font-size:7px}.neck-toggle-track{width:28px;height:14px;border-radius:7px}.neck-toggle-thumb{width:9px;height:9px;top:1.5px;left:1.5px}.neck-toggle.notes .neck-toggle-thumb{left:16px}.pc-2col{grid-template-columns:1fr!important;gap:12px}.pc-left{position:static!important}.lib-pc{grid-template-columns:1fr!important;gap:12px}.lib-pc-left{position:static!important}#lib3cols{grid-template-columns:1fr!important;gap:8px}.compare-pc{grid-template-columns:1fr!important;gap:12px}#libList{columns:1!important}.compare-pc .note-grid{grid-template-columns:repeat(6,1fr)}.compare-pc .nbtn{font-size:10px;padding:6px 1px}.compare-pc select{width:100%;box-sizing:border-box}#libList .lib-item{overflow:hidden}.lib-item-name{overflow:hidden;text-overflow:ellipsis}.metro-compact{padding:10px}.mc-top{flex-wrap:wrap;gap:6px}.mc-bpm-block{min-width:70px}.mc-bpm-btns{flex-wrap:wrap;gap:3px}.mc-bpm-btns .mbtn{font-size:9px;padding:6px 8px}.mbtn.big{font-size:12px;padding:9px 16px;min-width:70px;width:100%}#tapInfo{min-width:0!important;font-size:8px}.tap-btn-sm{font-size:9px;padding:5px 8px}.metro-slider{min-width:0}.mc-grid3{grid-template-columns:1fr 1fr;gap:6px}.sig-grid,.subdiv-grid,.sound-grid{gap:3px;flex-wrap:wrap}.metro-slabel{font-size:7px}.metro-beat{gap:6px}#metroVol{width:100%}.metro-slider::-webkit-slider-thumb{width:28px;height:28px}#neckFloatBtn{position:fixed;bottom:62px;left:50%;transform:translateX(-50%);background:var(--tx);color:#f0d890;border:none;border-radius:20px;padding:7px 18px;font-family:'DM Mono',monospace;font-size:11px;font-weight:700;letter-spacing:.06em;cursor:pointer;z-index:650;box-shadow:0 2px 10px rgba(0,0,0,.35);display:none;align-items:center;gap:6px;white-space:nowrap}}@media (max-height:500px) and (orientation:landscape){#mobileNav{display:none!important}header{padding:0 10px;height:38px;justify-content:flex-start}.logo{font-size:12px;letter-spacing:.02em;flex-shrink:0}header .main-nav{display:flex;flex:1;justify-content:center;overflow-x:auto}header>div:last-of-type{display:flex}.mnav-btn{font-size:9px;padding:0 8px;letter-spacing:.03em}.lang-btn{font-size:8px;padding:2px 4px}#appContent{padding:8px 12px max(calc(52vh + 20px),160px);overflow-y:auto}.pc-2col{grid-template-columns:1fr!important;gap:10px}.pc-left{position:static!important}.lib-pc{grid-template-columns:1fr!important;gap:10px}.lib-pc-left{position:static!important}.compare-pc{grid-template-columns:1fr!important;gap:10px}#libList{columns:1!important}#neckPanel{height:52vh;min-height:140px;max-height:none}#neckBarTitle{font-size:9px}.ntb{font-size:8px;padding:3px 6px}.note-grid{gap:2px}.nbtn{font-size:10px;padding:6px 1px}}.neck-inline-opts{display:flex;align-items:center;gap:6px;margin-left:0}.neck-inline-opts .nio-sep{width:1px;height:16px;background:rgba(0,0,0,0.35);flex-shrink:0}.nbar-sep{width:1px;height:16px;background:rgba(0,0,0,0.35);flex-shrink:0}.tdr-item{font-family:'DM Mono',monospace;font-size:9px;font-weight:600;letter-spacing:.06em;color:#c8a060;padding:6px 12px;cursor:pointer;transition:background .1s}.tdr-item:hover,.tdr-item.on{background:#3a2810;color:#f0d890}.nio-btn{font-size:8px;padding:3px 8px;border-radius:10px;opacity:.6}.nio-btn.active,.nio-btn:hover{opacity:1}.nio-select{font-family:'DM Mono',monospace;font-size:8px;font-weight:700;letter-spacing:.04em;background:#4a3828;color:#f0e0b0;border:1.5px solid #2e2010;border-radius:6px;padding:3px 7px;cursor:pointer;height:auto;display:flex;align-items:center;gap:4px}#neckSettingsBtn{display:none;font-size:13px;padding:2px 8px;background:#4a3828;border-color:#2e2010;color:#f0e0b0}#neckSettingsBtn:hover{background:#3a2818}#neckSettingsPanel{display:none;position:absolute;bottom:100%;left:0;z-index:700;background:#2a1e10;border:1.5px solid #5a3818;border-radius:8px 8px 0 0;padding:10px 12px;min-width:220px;box-shadow:0 6px 16px rgba(0,0,0,.4);flex-direction:column;gap:8px}#neckSettingsPanel.open{display:flex}.nsp-row{display:flex;align-items:center;gap:8px}.nsp-label{font-family:'DM Mono',monospace;font-size:8px;font-weight:700;letter-spacing:.08em;color:#8a7060;min-width:60px;text-transform:uppercase}@media (max-width:900px){.neck-inline-opts{display:none}.nbar-sep{display:none}#neckSettingsBtn{display:flex}}.ntb.fret-btn.on{background:#4a3828;border-color:#2e2010;color:#f0e0b0}#neckArea{flex:1;position:relative;overflow:hidden;display:flex;align-items:stretch}#neckCanvas{display:block;cursor:crosshair;flex:1}#strToggles{display:flex;flex-direction:column;justify-content:space-around;padding:5px 6px;background:rgba(0,0,0,.08);width:36px;flex-shrink:0}.str-tog{width:26px;height:14px;border-radius:7px;background:#bbb;border:1.5px solid #999;cursor:pointer;position:relative;transition:background .15s;flex-shrink:0}.str-tog.on{background:#7a6a50;border-color:#5a4a30}.str-tog::after{content:'';position:absolute;top:1.5px;left:1.5px;width:9px;height:9px;border-radius:50%;background:#fff;transition:left .15s;box-shadow:0 1px 3px rgba(0,0,0,.35)}.str-tog.on::after{left:13px}#colorPop{display:none;position:fixed;z-index:9999;background:#fff;border:2px solid #555;border-radius:8px;padding:8px;box-shadow:0 4px 20px rgba(0,0,0,.45);width:138px}#colorPop .cp-title{font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:#555;width:100%;margin-bottom:5px;display:block}#colorPop .cp-swatches{display:flex;flex-wrap:wrap;gap:5px}#colorPop .cp-swatch{width:22px;height:22px;border-radius:50%;cursor:pointer;border:2px solid rgba(0,0,0,.2);transition:transform .1s}#colorPop .cp-swatch:hover{transform:scale(1.15)}#colorPop .cp-reset{width:100%;text-align:center;font-size:9px;color:#888;cursor:pointer;margin-top:4px;text-decoration:underline}.pc-2col{display:grid;grid-template-columns:300px 1fr;gap:28px;align-items:start}.pc-left{position:sticky;top:8px}.lib-pc{display:grid;grid-template-columns:260px 1fr;gap:24px;align-items:start}.lib-pc-left{position:sticky;top:8px}.metro-pc{display:grid;grid-template-columns:1fr 1fr;gap:10px}.compare-pc{display:grid;grid-template-columns:1fr 1fr;gap:24px}#libList{columns:3;column-gap:10px}@media (max-width:1100px){#libList{columns:2}}@media (max-width:750px){#libList{columns:1}}@media (max-width:800px){.lib-pc{grid-template-columns:1fr!important;gap:12px}.lib-pc-left{position:static!important}#lib3cols{grid-template-columns:1fr!important}.pc-2col{grid-template-columns:1fr!important;gap:12px}.pc-left{position:static!important}.compare-pc{grid-template-columns:1fr!important;gap:12px}}#libList .lib-cat-head{column-span:all}#libList .lib-item{break-inside:avoid;margin-bottom:5px}#appFooter{position:fixed;bottom:0;left:0;right:0;height:24px;line-height:24px;background:var(--tx);font-family:"DM Mono",monospace;font-size:9px;padding:0 20px;z-index:9999;border-top:1px solid #2a2010;display:flex;align-items:center;justify-content:space-between}.footer-left{color:#c0a060}.footer-right{color:#807060}@media(max-width:600px){#neckBarLeft>.neck-toggle{display:none}#neckBarLeft>.nbar-sep:first-of-type{display:none}.print-btn{display:none!important}#neckSettingsPanel .nsp-neck-toggle,#neckSettingsPanel .nsp-print{display:flex}#neckBarTitle{font-size:8px;max-width:50vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}@media(max-width:600px){#headerLangWrap{display:none!important}}.beat-dot{cursor:pointer}.finder-wrap{background:var(--surf);border:1.5px solid var(--bdr);border-radius:10px;padding:14px;max-width:700px}
.finder-mode-btn{font-family:'DM Mono',monospace;font-size:9px;font-weight:700;letter-spacing:.07em;padding:3px 9px;border-radius:12px;border:1.5px solid var(--bdr);background:var(--bg);color:var(--txm);cursor:pointer;transition:all .1s}
.finder-mode-btn.on{background:var(--tx);border-color:var(--tx);color:#f0e8cc}
.finder-result{background:var(--surf);border:1.5px solid var(--bdr);border-radius:7px;margin-bottom:5px;overflow:hidden;animation:up .15s ease both}
.finder-result-head{padding:9px 12px;display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer}
.finder-result-head:hover{background:var(--gbg)}
.finder-result-name{font-size:13px;font-weight:700;color:var(--tx)}
.finder-result-cat{font-size:8px;letter-spacing:.1em;text-transform:uppercase;color:var(--txd);margin-top:1px}
.finder-result-right{display:flex;align-items:center;gap:6px;flex-shrink:0}
.finder-match-bar{height:4px;width:48px;background:var(--bdr2);border-radius:2px;overflow:hidden}
.finder-match-fill{height:100%;background:var(--gold);border-radius:2px}
.finder-result-body{display:none;padding:8px 12px 10px;border-top:1.5px solid var(--bdr2)}
.finder-result.open .finder-result-body{display:block}
.finder-result.open .finder-result-head{background:var(--gbg)}
.finder-note-strip{display:flex;flex-wrap:wrap;gap:3px;margin-top:6px}
.finder-note-pill{font-size:11px;font-weight:700;padding:4px 8px;border-radius:5px;background:var(--bg);border:1.5px solid var(--bdr);color:var(--tx);display:flex;flex-direction:column;align-items:center;gap:1px;min-width:34px}
.finder-note-pill.matched{border-color:var(--gbd);background:var(--gbg);color:var(--gold)}
.finder-note-pill span{font-size:7px;color:var(--txd);font-weight:400}
.finder-note-pill.matched span{color:#9a7a18}
.finder-empty{text-align:center;padding:24px;font-size:11px;color:var(--txd)}
.left-nav-group{display:flex;flex-direction:column;gap:3px}
.left-nav-btn{width:100%;display:flex;align-items:center;gap:8px;background:none;border:none;border-radius:7px;padding:9px 12px;font-family:'DM Mono',monospace;font-size:11px;font-weight:600;color:var(--txm);cursor:pointer;text-transform:uppercase;letter-spacing:.08em;transition:all .12s;text-align:left}
.left-nav-btn:hover{background:var(--surf);border:1px solid var(--bdr);color:var(--tx)}
.left-nav-btn.active{background:var(--tx);color:#f0e8cc;border-radius:7px}
.lib-sub-btn{width:100%;display:flex;align-items:center;gap:8px;background:none;border:none;border-radius:7px;padding:7px 12px;font-family:"DM Mono",monospace;font-size:11px;font-weight:600;color:var(--txm);cursor:pointer;text-transform:uppercase;letter-spacing:.08em;transition:all .12s;text-align:left}
/* ── Métronome drawer flottant ──────────────────────────────────────────── */
#metroDrawer{position:fixed;bottom:-100%;left:0;right:0;z-index:810;background:var(--surf);border-top:2px solid var(--bdr);border-radius:14px 14px 0 0;box-shadow:0 -4px 24px rgba(0,0,0,.15);transition:bottom .32s cubic-bezier(.22,1,.36,1);max-height:72vh;overflow-y:auto}
#metroDrawer.open{bottom:0}
#metroDrawerHeader{display:flex;align-items:center;justify-content:space-between;padding:10px 16px 8px;border-bottom:1.5px solid var(--bdr2);position:sticky;top:0;background:var(--surf);z-index:1;font-family:'DM Mono',monospace;font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--txd)}
#metroDrawerClose{background:none;border:none;font-size:16px;color:var(--txd);cursor:pointer;padding:0 4px;line-height:1;border-radius:4px}
#metroDrawerClose:hover{background:var(--bg);color:var(--tx)}
#metroDrawerBtn{position:fixed;bottom:calc(40vh + 10px);right:14px;z-index:800;display:flex;align-items:center;gap:6px;background:var(--tx);color:#f0e8cc;border:none;border-radius:20px;padding:6px 13px;font-family:'DM Mono',monospace;font-size:10px;font-weight:700;letter-spacing:.05em;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.25);transition:background .15s,bottom .32s cubic-bezier(.22,1,.36,1)}
#metroDrawerBtn:hover{background:#3a2e1a}
#metroDrawerBtn.playing{background:#1a5c30;box-shadow:0 0 10px rgba(40,200,100,.3)}
#metroDrawerBtn #metroDrawerBtnIcon{font-size:13px;line-height:1}

/* ── Séparateur nav gauche ──────────────────────────────────────────────── */
.left-nav-sep{height:1px;background:var(--bdr2);margin:4px 6px}

/* ── Onglets top (analyze, library) ────────────────────────────────────── */
#analyzeTopTabs,#libTopTabs{padding-bottom:8px;border-bottom:1.5px solid var(--bdr2);margin-bottom:12px}