.pad[data-v-51ec6b07]{--face: hsl(var(--hue) 70% 42%);--edge: hsl(var(--hue) 70% 25%);position:relative;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;aspect-ratio:1;padding:.9rem;border:0;border-radius:1.25rem;background:var(--face);color:#fff;font:inherit;text-align:left;cursor:pointer;box-shadow:0 7px 0 var(--edge);transition:transform 80ms ease-out,box-shadow 80ms ease-out;-webkit-tap-highlight-color:transparent}.pad[data-v-51ec6b07]:active,.pad.playing[data-v-51ec6b07]{transform:translateY(5px);box-shadow:0 2px 0 var(--edge),inset 0 0 0 3px #ffffffa6}.pad[data-v-51ec6b07]:focus-visible{outline:3px solid var(--ink);outline-offset:4px}.pad-key[data-v-51ec6b07]{min-width:1.6rem;padding:0 .4rem;border:2px solid rgb(255 255 255 / .7);border-radius:.5rem;font:inherit;font-size:.85rem;font-weight:600;line-height:1.4rem;text-align:center}.pad-label[data-v-51ec6b07]{font-size:clamp(1.8rem,5vw,2.6rem);font-weight:700;line-height:1}.pad-note[data-v-51ec6b07]{font-size:.75rem;line-height:1.3;overflow-wrap:anywhere}.pad.missing[data-v-51ec6b07]{--face: #7b7889;--edge: #565364;cursor:not-allowed}@media(prefers-reduced-motion:reduce){.pad[data-v-51ec6b07]{transition:none}}.app[data-v-20f295dd]{max-width:56rem;margin:0 auto;padding:2.5rem 1.25rem 4rem}.head h1[data-v-20f295dd]{margin:0 0 .25rem;font-size:clamp(2rem,6vw,3rem);line-height:1.1}.head p[data-v-20f295dd]{margin:0;max-width:48ch;color:var(--ink-soft)}.controls[data-v-20f295dd]{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2rem;margin:2rem 0 2.25rem;padding-bottom:1.5rem;border-bottom:2px solid var(--line)}.volume[data-v-20f295dd]{display:flex;align-items:center;gap:.75rem;font-weight:600}.volume input[data-v-20f295dd]{width:11rem;accent-color:var(--ink)}.volume output[data-v-20f295dd]{min-width:3.5ch;font-variant-numeric:tabular-nums;color:var(--ink-soft);font-weight:500}.stop[data-v-20f295dd]{padding:.5rem 1.1rem;border:2px solid var(--ink);border-radius:999px;background:transparent;color:var(--ink);font:inherit;font-weight:600;cursor:pointer}.stop[data-v-20f295dd]:hover{background:var(--ink);color:var(--paper)}.stop[data-v-20f295dd]:focus-visible,.volume input[data-v-20f295dd]:focus-visible{outline:3px solid var(--ink);outline-offset:3px}.grid[data-v-20f295dd]{display:grid;grid-template-columns:repeat(auto-fill,minmax(8.5rem,1fr));gap:1.25rem}:root{--paper: #ecebf3;--ink: #25222f;--ink-soft: #5d5a6b;--line: #d3d0e2;font-family:ui-rounded,SF Pro Rounded,Nunito,Segoe UI,system-ui,sans-serif;line-height:1.5;color:var(--ink);background:var(--paper)}*,*:before,*:after{box-sizing:border-box}body{margin:0;min-height:100dvh}