body.has-play-dock{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
body.play-dock-drums{padding-bottom:calc(132px + env(safe-area-inset-bottom))}
.play-dock{position:fixed;bottom:0;left:0;right:0;z-index:1000;background:#101a19f5;border-top:1px solid #6c9381;box-shadow:0 -5px 22px #0006;padding:8px max(8px,env(safe-area-inset-left)) calc(8px + env(safe-area-inset-bottom));backdrop-filter:blur(12px)}
.play-dock-row{display:flex;align-items:center;justify-content:center;gap:8px;overflow-x:auto;padding:2px}
.play-dock-row[hidden]{display:none}
.play-dock-voices{border-top:1px solid #385347;margin-top:6px;padding-top:6px}
.play-dock-channel{display:flex;flex:none;gap:2px;border-left:1px solid #385347;padding-left:8px}
.play-dock button{white-space:nowrap;min-height:40px;padding:7px 12px;color:#dfede5;background:#192923;border:1px solid #385347;border-radius:5px;font:inherit;cursor:pointer}
.play-dock-channel button:not(:first-child){font-size:12px;min-width:32px;padding:6px}
.play-dock button[aria-current=page]{border-color:#99ffd0;color:#99ffd0;background:#264135}
.play-dock button[aria-pressed=true]{background:#a4ffd5;color:#0d2016;border-color:#a4ffd5}
.play-dock button:disabled{opacity:.5;cursor:default}
.play-dock button:focus-visible{outline:2px solid #fff;outline-offset:2px}
#instrument-panel,.drum-paint-heading{scroll-margin-top:24px;scroll-margin-bottom:150px}
@media(max-width:650px){.play-dock-row{justify-content:flex-start;gap:5px}.play-dock-channel{padding-left:5px}.play-dock button{padding:7px 9px;font-size:12px}.play-dock-channel button:not(:first-child){min-width:30px}.play-dock-row>button{flex:none}}
@media(max-width:650px){
 body.has-play-dock{padding-bottom:calc(124px + env(safe-area-inset-bottom))}
 body.play-dock-drums{padding-bottom:calc(216px + env(safe-area-inset-bottom))}
 .play-dock-row{overflow:visible}
 .play-dock-row:not(.play-dock-voices){display:grid;grid-template-columns:repeat(6,minmax(0,1fr))}
 .play-dock-row>button{grid-column:span 3}
 .play-dock-channel{grid-column:span 2;padding-left:0;border:0;gap:2px;justify-content:center}
 .play-dock-channel button:first-child{padding:6px;min-width:0}
 .play-dock-channel button:not(:first-child){min-width:25px;padding:4px}
 .play-dock-voices{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
 .play-dock-voices[hidden]{display:none}
 .play-dock-voices .play-dock-channel{grid-column:span 1;display:grid;grid-template-columns:1fr 1fr}
 .play-dock-voices .play-dock-channel button:first-child{grid-column:span 2}
}

/* Keep the mute/solo state consistent across tracks, drum voices and the dock. */
html body.has-play-dock :is(.play-dock,.mixer-buttons,.drum-mini-strip) button[aria-pressed=true][aria-label^="Solo " i],
html body.has-play-dock :is(.play-dock,.mixer-buttons,.drum-mini-strip) button[aria-pressed=true][aria-label$=" solo" i]{--button-light:#79bdff;background:#79bdff!important;border-color:#79bdff!important;color:#071c31!important;font-weight:bold}
html body.has-play-dock :is(.play-dock,.mixer-buttons,.drum-mini-strip) button[aria-pressed=true][aria-label^="Mute " i],
html body.has-play-dock :is(.play-dock,.mixer-buttons,.drum-mini-strip) button[aria-pressed=true][aria-label$=" mute" i]{--button-light:#ff6b78;background:#ff6b78!important;border-color:#ff6b78!important;color:#290b0f!important;font-weight:bold}