.acro-families{display:flex;flex-wrap:wrap;gap:5px;margin:8px 0 10px}
.acro-families[hidden]{display:none}
.acro-families button{font:600 11px system-ui;padding:7px 11px;border:1px solid #586586;border-radius:8px;background:#1c2741;color:#c8d2e7;cursor:pointer}
.acro-families button small{font-size:9px;opacity:.7;margin-left:6px}
.acro-families button[aria-pressed=true]{color:#172137;background:#dfedaa;border-color:#dfedaa}
.acro-families button:focus-visible{outline:2px solid #dfff70;outline-offset:2px}
.keyboard[data-page="1"] .key-row{display:block}.keyboard[data-page="1"] .row-label{display:none}
.keyboard[data-page="1"] .row-pads{grid-template-columns:repeat(7,minmax(0,1fr));gap:7px}
.keyboard[data-page="1"] .pad{height:56px!important}.keyboard[data-page="1"] .pad strong{display:block!important;margin:5px 0 0!important;font-size:11px}
.player[data-bank="2"] .key-row{display:block}.player[data-bank="2"] .row-label{display:none}
.player[data-bank="2"] .row-pads{grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}
.player[data-bank="2"] .pad{height:44px!important}.player[data-bank="2"] .pad span{display:block!important;font-size:9px;margin-top:4px}
.player .acro-families button{font-size:10px;padding:6px 9px}
@media(max-width:850px){.keyboard[data-page="1"] .row-pads{grid-template-columns:repeat(4,minmax(0,1fr))}.player .acro-families{gap:3px}.player .acro-families button{font-size:9px;padding:5px}.player .acro-families small{margin-left:3px}.player[data-bank="2"] .row-pads{grid-template-columns:repeat(4,minmax(0,1fr))}}