: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;overflow-x:hidden;padding:12px 32px max(calc(38vh + 24px),260px);width:100%;box-sizing:border-box}.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:38vh;min-height:230px;max-height:400px;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:16px;font-weight:700;letter-spacing:.06em;text-transform:none;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:8px}
#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:13px}.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:13px}.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:12px;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}
.sel-styled{font-family:'DM Mono',monospace;font-size:11px;font-weight:600;padding:6px 10px;border-radius:7px;border:1.5px solid var(--bdr);background:var(--bg);color:var(--tx);cursor:pointer;width:100%;appearance:none;-webkit-appearance:none;background-image:url('data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%2210%22 height=%226%22><path d=%22M0 0l5 6 5-6z%22 fill=%22%238a7c62%22/></svg>');background-repeat:no-repeat;background-position:right 10px center}
.sel-simple{width:100%;background:var(--surf);color:var(--tx);border:1.5px solid var(--bdr);border-radius:5px;padding:6px 8px;font-family:'DM Mono',monospace;font-size:11px}

/* ── Metro Popup ─────────────────────────────────────────── */
#metroPopup{
  display:none;
  position:fixed;
  z-index:1000;
  width:310px;
  max-width:calc(100vw - 16px);
  background:var(--surf);
  border:1.5px solid var(--bdr);
  border-radius:8px;
  box-shadow:0 6px 24px rgba(0,0,0,.28);
  overflow:hidden;
  animation:metroPopIn .12s ease;
}
#metroPopup.open{ display:block; }
@keyframes metroPopIn{
  from{ opacity:0; transform:translateY(6px); }
  to{   opacity:1; transform:translateY(0); }
}
#metroPopupHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:5px 10px 4px;
  background:var(--tx);
  border-bottom:1px solid var(--bdr);
}
#metroPopupTitle{
  font-family:'DM Mono',monospace;
  font-size:9px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#f0e8cc;
}
#metroPopupClose{
  background:none;
  border:none;
  color:#b89060;
  cursor:pointer;
  font-size:13px;
  line-height:1;
  padding:0 2px;
  transition:color .12s;
}
#metroPopupClose:hover{ color:#f0e8cc; }
#metroPopup .metro-compact{
  border:none;
  border-radius:0;
  padding:8px 12px;
  gap:5px;
  max-height:calc(100vh - 120px);
  overflow-y:auto;
}
/* Compact overrides inside popup */
#metroPopup .metro-bpm{ font-size:30px; }
#metroPopup .beat-dot{ width:22px; height:22px; }
#metroPopup .beat-dot.active{ transform:scale(1.3); }
#metroPopup .mbtn.big{ font-size:11px; padding:7px 16px; }
#metroPopup .metro-bpm-row{ gap:10px; }
#metroPopup .metro-beat{ gap:6px; margin:4px 0; }
#metroPopup .mc-grid3{ padding-top:5px; gap:6px; }
#metroPopup .sig-btn, #metroPopup .subdiv-btn, #metroPopup .sound-btn{ font-size:9px; padding:3px 7px; }
#metroPopup .metro-slabel{ font-size:7px; margin-bottom:3px; }
#metroPopup .metro-slider{ height:4px; }
#metroPopup .metro-slider::-webkit-slider-thumb{ width:16px; height:16px; }
#metroPopup.playing #metroPopupHeader{ background:#186030; }
@media(max-width:600px){
  #metroPopup{ width:calc(100vw - 16px); left:8px !important; }
}

/* ── Library sub-tabs ────────────────────────────────────── */
.lib-subtabs{
  display:flex;
  gap:3px;
  margin-bottom:8px;
  border-bottom:2px solid var(--bdr);
  padding-bottom:0;
}
.lib-stab{
  background:none;
  border:none;
  border-bottom:2.5px solid transparent;
  margin-bottom:-2px;
  font-family:'DM Mono',monospace;
  font-size:12px;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--txd);
  padding:7px 14px;
  cursor:pointer;
  transition:all .12s;
  white-space:nowrap;
}
.lib-stab:hover{ color:var(--tx); }
.lib-stab.active{
  color:var(--tx);
  border-bottom-color:var(--gold);
}
.lib-stab-panel{ display:none; }
.lib-stab-panel.active{ display:block; }
/* Comparaison panel inside library: remove extra wrapper gaps */
#libPanel3 .compare-pc{
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-top:0;
}
@media(max-width:700px){
  #libPanel3 .compare-pc{ grid-template-columns:1fr; }
  .lib-subtabs{ overflow-x:auto; scrollbar-width:none; }
  .lib-subtabs::-webkit-scrollbar{ display:none; }
}

/* ── Full-width library (no left nav) ───────────────────────── */
#libRightCol { width: 100%; }
.lib-pc { display: block !important; }
.lib-pc-left { display: none !important; }

/* ── Panel steps layout ─────────────────────────────────────── */
.panel-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: flex-start;
  padding: 4px 0 0;
  width: 100%;
  box-sizing: border-box;
}
.panel-step {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 16px 0 0;
  min-width: 0;
  flex: 1 1 140px;
  border-right: 1.5px solid var(--bdr);
  box-sizing: border-box;
}
.panel-step:last-child {
  border-right: none;
  flex: 1 1 180px;
}
.panel-step--wide {
  flex: 2 1 220px;
}

.step-num {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--gold);
  color: #fff;
  font-family: 'DM Mono', monospace;
  font-size: 8px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.step-label {
  font-family: 'DM Mono', monospace;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--txd);
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}
.panel-step .note-grid {
  max-width: 100%;
}
/* comparaison panel: let it flow naturally */
.panel-steps--compare { display: block; }

/* ── Info panel (slide from right) ──────────────────────────── */
#infoPanel {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 420px;
  max-width: 100vw;
  background: var(--surf);
  border-left: 1.5px solid var(--bdr);
  box-shadow: -8px 0 32px rgba(0,0,0,.22);
  z-index: 900;
  transform: translateX(100%);
  transition: transform .22s ease;
  overflow-y: auto;
}
#infoPanel.open { transform: translateX(0); }
#infoPanelHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px 8px;
  background: var(--tx);
  position: sticky;
  top: 0;
  z-index: 1;
}
#infoBtn.active { background: var(--tx); color: #f0e8cc; }

/* ── Responsive ─────────────────────────────────────────────── */
@media(max-width: 700px) {
  .panel-steps { flex-direction: column; gap: 12px; }
  .panel-step { border-right: none; border-bottom: 1.5px solid var(--bdr); margin-right: 0; padding: 0 0 12px 0; }
  .panel-step:last-child { border-bottom: none; }
  #infoPanel { width: 100vw; }
}

/* ── Comparaison: distinct root colors per grid ─────────────── */
.note-grid--a .nbtn.on {
  background: var(--gold);
  border-color: var(--gold);
  color: #fff;
}
.note-grid--b .nbtn.on {
  background: #2a78c8;
  border-color: #2a78c8;
  color: #fff;
}

/* ── Detail card clickable hint ─────────────────────────────── */
#libScaleDetail .scard.open:hover {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(138,96,8,.15);
  transition: border-color .15s, box-shadow .15s;
}

/* ── Panel help box ──────────────────────────────────────────── */
.panel-help {
  font-family: 'DM Mono', monospace;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--txm);
  background: var(--surf);
  border: 1px solid var(--bdr);
  border-left: 3px solid var(--gold);
  border-radius: 5px;
  padding: 8px 13px;
  margin-bottom: 9px;
  max-width: 980px;
}

/* ── Ultra-compact steps ─────────────────────────────────────── */
.panel-step .note-grid { gap: 3px; margin-bottom: 0; }
.panel-step .nbtn { padding: 6px 1px; font-size: 11px; }
.panel-step .sel-styled { padding: 5px 9px; }
.panel-step .tab-btn { padding: 5px 10px; }
.panel-step .filter-grid { gap: 2px; }
.panel-step .ibtn { padding: 3px 6px; font-size: 9px; }

/* ── Compact detail card ─────────────────────────────────────── */
#libScaleDetail .scard-head { padding: 7px 10px 5px; }
#libScaleDetail .sc-fullname { font-size: 13px; }
#libScaleDetail .scard-body { padding: 7px 10px 7px; }
#libScaleDetail .lib-ni-row { margin-bottom: 7px; }
#libScaleDetail { margin-top: 6px; }

/* ── Comparer panel: compact ─────────────────────────────────── */
#libPanel3 .compare-pc {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 0;
}
#libPanel3 .compare-pc > div {
  padding: 8px 10px !important;
}
#libPanel3 .compare-pc .note-grid {
  gap: 3px;
}
#libPanel3 .compare-pc .nbtn {
  padding: 6px 1px;
  font-size: 11px;
}
#libPanel3 .compare-pc .sel-simple {
  padding: 4px 8px;
  font-size: 10px;
}
#libPanel3 .compare-pc [id^="cmp-"][id$="-title"] {
  font-size: 8px;
}
#libPanel3 .compare-pc .tab-btn {
  padding: 4px 8px;
  font-size: 8px;
}
#libPanel3 #cmpItemA, #libPanel3 #cmpItemB {
  margin-top: 6px !important;
  gap: 4px !important;
}
/* Results box: cap height, scroll inside only */
#compareResults {
  margin-top: 8px !important;
  max-height: 26vh;
  overflow-y: auto;
}
#compareResults::-webkit-scrollbar { width: 4px; }
#compareResults::-webkit-scrollbar-thumb { background: var(--bdr); border-radius: 2px; }

/* ── Identifier: cap results list height ─────────────────────── */
#finderResults2 {
  max-height: 30vh !important;
  overflow-y: auto;
}
#finderResults2::-webkit-scrollbar { width: 4px; }
#finderResults2::-webkit-scrollbar-thumb { background: var(--bdr); border-radius: 2px; }

/* Keep A/B side by side down to smaller widths */
@media(max-width: 560px) {
  #libPanel3 .compare-pc { grid-template-columns: 1fr; }
}

/* ── Identifier: compact interval grid ───────────────────────── */
#finderIvGrid2 { gap: 2px; }
#finderIvGrid2 .ibtn { padding: 3px 6px; font-size: 9px; }

/* ── Logo + tagline ──────────────────────────────────────────── */
.logo-wrap {
  display: flex;
  align-items: baseline;
  gap: 26px;
  min-width: 0;
}
.tagline {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 15px;
  letter-spacing: .03em;
  color: #e8c87a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-left: 26px;
  border-left: 1px solid rgba(232,200,122,.3);
}
@media(max-width: 860px) {
  .tagline { font-size: 12px; }
}
@media(max-width: 700px) {
  .lib-stab { font-size: 10px; padding: 6px 10px; }
}

/* ── Custom scale intervals: readable size ───────────────────── */
.custom-intervals {
  font-family: 'DM Mono', monospace;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--gold);
  line-height: 1.4;
}

/* ── Identifier: note-name search grid ───────────────────────── */
#finderNoteGrid2 { grid-template-columns: repeat(6, 1fr); gap: 3px; }
#finderNoteGrid2 .nbtn { padding: 6px 1px; font-size: 11px; }
#finderByIv, #finderByNote { font-size: 8px; padding: 3px 8px; }

/* ── Comparer: compact redesign (~40% shorter) ───────────────── */
/* Note grids on ONE row of 12 instead of 2 rows of 6 */
#libPanel3 .note-grid {
  grid-template-columns: repeat(12, 1fr) !important;
  gap: 2px !important;
}
#libPanel3 .note-grid .nbtn {
  padding: 6px 0 !important;
  font-size: 9px !important;
}
/* Selects side by side instead of stacked */
#libPanel3 #cmpItemA,
#libPanel3 #cmpItemB {
  flex-direction: row !important;
  gap: 6px !important;
  margin-top: 6px !important;
}
#libPanel3 #cmpItemA > select,
#libPanel3 #cmpItemB > select {
  flex: 1;
  min-width: 0;
}
/* Tighter block padding + title row */
#libPanel3 .compare-pc > div {
  padding: 7px 9px !important;
}
#libPanel3 .compare-pc > div > div:first-child {
  margin-bottom: 6px !important;
}
#libPanel3 .compare-pc { gap: 10px; }
/* Results: no internal scroll needed now */
#compareResults {
  max-height: none;
  overflow: visible;
  margin-top: 8px !important;
}
/* Help box tighter in this panel only */
#libPanel3 .panel-help { margin-bottom: 7px; }

@media(max-width: 760px) {
  #libPanel3 .note-grid { grid-template-columns: repeat(6, 1fr) !important; }
  #libPanel3 #cmpItemA, #libPanel3 #cmpItemB { flex-direction: column !important; }
}

/* ── Header buttons: better contrast ─────────────────────────── */
header .lang-btn,
header #infoBtn {
  opacity: 1;
  background: rgba(255,255,255,.06);
  border: 1.5px solid #8a6a3a;
  color: #e8c87a;
  padding: 4px 10px;
  font-size: 10px;
  letter-spacing: .08em;
}
header .lang-btn:hover,
header #infoBtn:hover {
  background: rgba(232,200,122,.16);
  border-color: #c8a028;
  color: #ffe9b0;
}
header .lang-btn.active {
  background: #c8a028;
  border-color: #e8c87a;
  color: #201808;
  font-weight: 700;
}
header #infoBtn.active {
  background: #c8a028;
  border-color: #e8c87a;
  color: #201808;
}


/* ── Grille de fondamentales (17 orthographes) ────────────────── */
.root-grid { grid-template-columns: repeat(9, 1fr) !important; gap: 3px !important; }
.root-grid .nbtn { padding: 6px 1px; font-size: 10px; }
#libPanel3 .root-grid { grid-template-columns: repeat(9, 1fr) !important; }
@media(max-width: 900px){ .root-grid { grid-template-columns: repeat(6, 1fr) !important; } }

/* ── Intervalles : les deux lectures superposées ──────────────── */
.ibtn-dual {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.15;
  padding: 5px 8px !important;
  gap: 0;
  min-width: 46px;
}
.ibtn-dual .iv-main {
  font-size: 11px;
  font-weight: 700;
}
.ibtn-dual .iv-alt {
  font-size: 10px;
  font-weight: 600;
  opacity: 1;
  color: var(--txd);
  border-top: 1px solid var(--bdr);
  width: 100%;
  text-align: center;
  margin-top: 2px;
  padding-top: 2px;
}
.ibtn-dual.on .iv-alt {
  color: inherit;
  border-top-color: currentColor;
  opacity: .8;
}


/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE FINAL — PC / TABLETTE / MOBILE
   ═══════════════════════════════════════════════════════════════ */

/* ── Slogan : rétrécit au lieu de disparaître ─────────────────── */
@media (max-width: 1200px) { .tagline { font-size: 14px; } .logo-wrap { gap: 20px; } .tagline { padding-left: 20px; } }
@media (max-width: 1000px) { .tagline { font-size: 13px; } .logo-wrap { gap: 14px; } .tagline { padding-left: 14px; } }
@media (max-width: 860px)  { .tagline { font-size: 12px; } .logo-wrap { gap: 10px; } .tagline { padding-left: 10px; } }
@media (max-width: 720px)  { .logo { font-size: 17px; } .tagline { font-size: 11px; } }
@media (max-width: 560px)  { .logo { font-size: 15px; } .tagline { font-size: 9.5px; white-space: normal; line-height: 1.15; max-width: 42vw; } }
@media (max-width: 380px)  { .tagline { font-size: 8.5px; max-width: 38vw; } }

/* ── TABLETTE (768 → 1024) ────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1024px) {
  #appContent { padding-left: 18px; padding-right: 18px; }
  .panel-steps { gap: 10px 14px; }
  .panel-step  { flex: 1 1 130px; padding-right: 14px; }
  .lib-stab    { font-size: 11px; padding: 6px 11px; }
  .panel-help  { font-size: 11px; }
  #neckPanel   { height: 40vh; min-height: 220px; }
  /* Logo + slogan un peu plus grands (slogan surtout) */
  header       { height: 42px; }
  .logo        { font-size: 23px; }
  .tagline     { font-size: 16px; padding-left: 18px; }
  .logo-wrap   { gap: 18px; }
}

/* ── TÉLÉPHONE PORTRAIT (≤540px) : manche masqué, invite à tourner ─── */
@media (max-width: 540px) and (orientation: portrait) and (pointer: coarse) {
  #neckPanel     { display: none !important; }
}
@media (max-width: 540px) and (orientation: portrait) {
  #rotateHint    { display: flex !important; }
  #appContent    { padding: 10px 10px 90px !important; overflow-y: auto; }
}

/* ── PORTRAIT ÉTROIT (≤767px) : disposition des étapes en colonne ─── */
@media (max-width: 767px) and (orientation: portrait) {
  .lib-stab      { font-size: 10px; padding: 6px 9px; }
  .panel-steps   { flex-direction: column; gap: 12px; }
  .panel-step    { flex: 1 1 auto; width: 100%; border-right: none;
                   border-bottom: 1.5px solid var(--bdr); padding: 0 0 10px; }
  .panel-step:last-child { border-bottom: none; }
  .root-grid     { grid-template-columns: repeat(6, 1fr) !important; }
  #libPanel3 .compare-pc { grid-template-columns: 1fr !important; }
  #infoPanel     { width: 100vw; }
}

/* ── TABLETTE PORTRAIT (541–1024px) : le manche reste visible en bas ─
   Les petites tablettes ne sont plus traitées comme des téléphones :
   pas de bandeau « tournez », le manche s'affiche en bas de l'écran. */
@media (min-width: 541px) and (max-width: 1024px) and (orientation: portrait) {
  #rotateHint     { display: none !important; }
  #neckPanel      { display: flex !important; height: 30vh; min-height: 190px; }
  #appContent     { padding-bottom: max(calc(30vh + 24px), 210px) !important; }
}

/* ── MOBILE PAYSAGE : manche plein écran ──────────────────────
   Cible les vrais téléphones : écran bas (max-height) ET tactile.
   Une fenêtre de bureau rétrécie garde donc son affichage normal. */
@media (orientation: landscape) and (max-height: 520px) and (pointer: coarse) {
  header       { display: none !important; }
  #appContent  { display: none !important; }
  #rotateHint  { display: none !important; }
  #neckPanel {
    position: fixed !important;
    top: 0; left: 0; right: 0; bottom: 0;
    height: 100vh !important;
    height: 100svh !important;          /* exclut la barre d'adresse */
    max-height: none !important;
    min-height: 0 !important;
    border-top: none !important;
    z-index: 900;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-sizing: border-box;
  }
  #neckBar     { flex-shrink: 0; }
  #neckCanvas  { flex: 1; min-height: 0; }
  #neckBarTitle{ font-size: 13px; }
  #metroPopup  { max-height: calc(100svh - 70px); }
}

/* ── Bandeau d'invitation à tourner l'appareil ────────────────── */
#rotateHint {
  display: none;
  position: fixed;
  left: 12px; right: 12px; bottom: 14px;
  z-index: 700;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 18px;
  background: var(--tx);
  color: #ffe9a8;
  border: 2px solid var(--gbd);
  border-radius: 12px;
  font-family: 'DM Mono', monospace;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .05em;
  line-height: 1.35;
  text-align: center;
  animation: rhGlow 1.8s ease-in-out infinite;
}
/* Halo doré qui « respire » pour attirer l'œil */
@keyframes rhGlow {
  0%, 100% { box-shadow: 0 4px 18px rgba(0,0,0,.35), 0 0 0 rgba(200,160,40,0); }
  50%      { box-shadow: 0 4px 22px rgba(0,0,0,.4), 0 0 18px 2px rgba(200,160,40,.55); }
}
#rotateHint .rh-icon {
  font-size: 24px;
  animation: rhTurn 2.4s ease-in-out infinite;
  display: inline-block;
  flex-shrink: 0;
}
@keyframes rhTurn {
  0%, 55%, 100% { transform: rotate(0deg); }
  70%, 90%      { transform: rotate(90deg); }
}
/* Le texte clignote légèrement */
#rotateHint > span:last-child {
  animation: rhBlink 1.5s ease-in-out infinite;
}
@keyframes rhBlink {
  0%, 100% { opacity: 1; }
  50%      { opacity: .55; }
}


/* ── Correctifs mobiles ───────────────────────────────────────── */

/* Le sélecteur FR/EN et INFO doivent rester visibles en mobile */
@media (max-width: 767px) {
  header { padding: 0 8px; gap: 6px; }
  .logo-wrap { flex: 1 1 auto; min-width: 0; overflow: hidden; }
  header > div:last-child { flex: 0 0 auto !important; margin-left: 6px !important; }
  header .lang-btn, header #infoBtn {
    padding: 3px 7px; font-size: 9px; letter-spacing: .04em;
  }
}
@media (max-width: 430px) {
  header .lang-btn, header #infoBtn { padding: 3px 5px; font-size: 8px; }
}

/* Le manche ne doit jamais passer sous la barre d'adresse */
#neckPanel { padding-bottom: env(safe-area-inset-bottom, 0px); box-sizing: border-box; }
@supports (height: 100svh) {
  @media (orientation: landscape) and (max-height: 520px) and (pointer: coarse) {
    #neckPanel { height: 100svh !important; }
  }
}


/* ── Neutralise les anciennes règles qui masquaient l'en-tête ──── */
@media (max-width: 600px) {
  #headerLangWrap { display: flex !important; gap: 2px; }
  header > div:last-of-type { display: flex !important; }
  header > div:last-child   { display: flex !important; }
  #infoBtn { display: inline-flex !important; }
  header { justify-content: space-between !important; }
}
@media (max-width: 767px) {
  #headerLangWrap { display: flex !important; }
  header > div:last-of-type { display: flex !important; align-items: center; }
}
/* En paysage téléphone l'en-tête est masqué : le sélecteur revient en portrait */
@media (orientation: landscape) and (max-height: 520px) and (pointer: coarse) {
  #headerLangWrap { display: none !important; }
}


/* ── Slogan : toujours visible, sur deux lignes si nécessaire ─── */
@media (max-width: 767px) {
  header { height: auto !important; min-height: 52px; padding-top: 5px; padding-bottom: 5px; }
  .logo-wrap { flex-direction: column; align-items: flex-start; gap: 2px !important; }
  .tagline {
    display: block !important;
    border-left: none !important;
    padding-left: 0 !important;
    font-size: 13px !important;
    white-space: normal;
    line-height: 1.2;
    max-width: 100%;
    opacity: .95;
  }
  .logo { font-size: 18px; line-height: 1.1; }
}
@media (max-width: 400px) {
  .tagline { font-size: 11px !important; }
  .logo    { font-size: 16px; }
}

/* ── Métronome accessible en portrait mobile ──────────────────── */
@media (max-width: 767px) and (orientation: portrait) {
  #metroPopup {
    display: none;
    position: fixed !important;
    left: 8px !important; right: 8px !important;
    bottom: 8px !important; top: auto !important;
    width: auto !important; max-width: none !important;
    z-index: 950;
  }
  #metroPopup.open { display: block !important; }
}
/* Le bouton métronome flottant n'apparaît que sur téléphone (≤540px).
   Sur tablette, le métronome est déjà accessible depuis la barre du manche. */
@media (max-width: 540px) and (orientation: portrait) {
  #metroMobileBtn { display: flex !important; }
}
/* Bouton métronome flottant, seulement en portrait mobile */
#metroMobileBtn {
  display: none;
  position: fixed;
  right: 12px; bottom: 64px;
  z-index: 800;
  align-items: center; gap: 6px;
  background: var(--tx);
  color: #f0d890;
  border: none;
  border-radius: 22px;
  padding: 9px 16px;
  font-family: 'DM Mono', monospace;
  font-size: 11px; font-weight: 700;
  letter-spacing: .05em;
  cursor: pointer;
  box-shadow: 0 3px 14px rgba(0,0,0,.35);
}
#metroMobileBtn.playing { background: #186030; color: #d8f0d8; }


/* ── Le métronome doit toujours passer au-dessus du manche ────── */
#metroPopup { z-index: 1000 !important; }
#metroMobileBtn { z-index: 1001; }
/* En paysage plein écran, le manche est en 900 : la popup reste devant */
@media (orientation: landscape) and (max-height: 520px) and (pointer: coarse) {
  #metroPopup {
    z-index: 1000 !important;
    max-height: calc(100svh - 60px);
    overflow-y: auto;
  }
}

/* Ancrage de la popup en paysage plein écran mobile */
@media (orientation: landscape) and (max-height: 520px) and (pointer: coarse) {
  #metroPopup {
    left: 50% !important;
    transform: translateX(-50%);
    bottom: 8px !important;
    top: auto !important;
    width: 320px !important;
    max-width: calc(100vw - 16px) !important;
  }
}


/* ── Panneau d'options du manche : au-dessus de tout ──────────── */
#neckSettingsPanel {
  z-index: 1000 !important;
  max-height: 70vh;
  max-height: 70svh;
  overflow-y: auto;
}

/* En paysage plein écran la barre est EN HAUT : ouvrir vers le bas */
@media (orientation: landscape) and (max-height: 520px) and (pointer: coarse) {
  #neckSettingsPanel {
    bottom: auto !important;
    top: calc(100% + 4px) !important;
    border-radius: 0 0 8px 8px !important;
    max-height: calc(100svh - 60px);
  }
}
/* Même logique sur les petits écrans en portrait si la barre passe en haut */
@media (max-width: 767px) {
  #neckSettingsPanel { min-width: 200px; max-width: calc(100vw - 20px); }
}

/* ═══════════════════════════════════════════════════════════════
   CORRECTIFS MOBILES (v19b)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* 1. Bibliothèque : les étapes « Nom » (dernière) et « wide » ne doivent
     plus être étirées (flex-basis 180/220px) en colonne → supprime le vide. */
  .panel-step:last-child,
  .panel-step--wide { flex: 0 0 auto; }

  /* 2. Le bandeau « Tournez l'appareil » reste tout en bas de l'écran ;
     c'est le bouton métronome flottant qui passe AU-DESSUS de lui. */
  #rotateHint     { bottom: 12px; }
  #metroMobileBtn { bottom: 104px; }

  /* 3. Sous-onglets bibliothèque : puces sur plusieurs lignes au lieu
     d'un défilement horizontal illisible. */
  .lib-subtabs {
    flex-wrap: wrap;
    overflow-x: visible;
    border-bottom: none;
    gap: 5px;
    margin-bottom: 10px;
  }
  .lib-stab {
    border: 1.5px solid var(--bdr);
    border-radius: 7px;
    margin-bottom: 0;
    padding: 6px 11px;
    background: var(--bg);
  }
  .lib-stab.active {
    border-color: var(--gold);
    background: var(--gbg);
    color: var(--gold);
  }

  /* 4. Marge sous l'encadré résultat (gamme + lecteur) pour que le
     bandeau « Tournez l'appareil » ne recouvre pas sa lecture. */
  #libScaleDetail { margin-bottom: 100px; }
}