.sampler.panel{padding-left:18px;padding-right:18px}.illustrated-mpc{position:relative;width:100%;max-width:480px;aspect-ratio:1;padding:0;border:0;background:#10140f;border-radius:2px;box-shadow:none;transform:none;overflow:hidden}.mpc-art{display:block;width:100%;height:100%;object-fit:contain}.illustrated-mpc .pads{position:absolute;left:20%;top:38%;width:56%;height:44%;gap:2.5%;grid-template-rows:repeat(4,1fr)}.illustrated-mpc .pad{aspect-ratio:auto;background:transparent!important;border:0;box-shadow:none;border-radius:4px;position:relative;color:transparent;transition:background .08s,box-shadow .08s;min-width:0;min-height:0}.illustrated-mpc .pad:hover{background:#ffe4a52b!important;box-shadow:inset 0 0 0 1px #e9c4816b}.illustrated-mpc .pad.hit,.illustrated-mpc .pad:active{background:#ffb841b0!important;box-shadow:0 0 18px #ffb93899,inset 0 0 9px #ffe7a1;transform:none}.illustrated-mpc .pad:focus-visible{outline:2px solid #ffe6aa;outline-offset:0;background:#e8cf8055!important}.mpc-display{position:absolute;left:18%;top:17%;width:41%;height:12%;display:flex;flex-direction:column;justify-content:center;padding:3% 4%;color:#c5ce8c;font:700 clamp(7px,.9vw,12px)/1.4 'Space Mono',monospace;pointer-events:none;text-shadow:0 0 4px #b9d48155}.mpc-display small{font:400 clamp(5px,.6vw,8px) 'Space Mono',monospace;white-space:nowrap}@media(max-width:650px){.illustrated-mpc{max-width:420px}.mpc-display{font-size:10px}.mpc-display small{font-size:7px}}
/* Align interaction areas with the sixteen illustrated rubber pads. */
.illustrated-mpc .pads{left:24.3%;top:32%;width:50.4%;height:47.8%;gap:5%}.mpc-display{left:18%;top:17%;width:36%;height:7.3%;padding:1% 2%;background:#10160de0}.mpc-transport{position:absolute;top:82.9%;height:5.5%;width:8.5%;border:0;background:transparent;color:transparent;border-radius:3px}.mpc-transport:hover,.mpc-transport:focus-visible{background:#ffda7144}.mpc-transport:active{background:#ffb74f99}#mpc-stop{left:24%}#mpc-play{left:34.7%}