#chordsPanel{width:min(900px,calc(100vw - 28px));z-index:9;height:auto;max-height:calc(100dvh - 120px);margin-top:90px;bottom:auto;top:0}
#chordsList{display:flex;flex-direction:row;gap:0;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;padding:12px 0;max-width:100%;scrollbar-color:#44c8bd #17242b}
#chordsList .staff-chord{display:flex;flex:0 0 150px;flex-direction:column;align-items:center;justify-content:flex-start;min-width:150px;padding:10px 0;border:1px solid transparent;border-radius:8px;text-align:center;scroll-snap-align:start;color:#e2edef;background:transparent}
#chordsList .staff-chord strong{font-size:20px;color:#56ddd0}#chordsList .staff-chord small{font-size:11px;color:#a5b6bf}#chordsList .staff-chord svg{display:block;width:150px;height:138px;flex-shrink:0}.staff-line{stroke:#a1b7c4;stroke-width:1}.staff-notes{font-size:12px;line-height:1.6;min-height:38px;padding:0 6px;white-space:normal}
#chordsList .staff-chord.active{background:#204a48;border-color:#62e1d5}#chordsList .staff-chord:hover{background:#243b42}
@media(max-width:800px){#chordsPanel{top:12px;right:14px;left:14px;margin:0;width:auto;max-height:calc(100dvh - 24px)}#chordsPanel .panel{padding:14px}#chordsPanel .dialoghead{padding:12px 14px}}