.drum-machine{display:grid;gap:1rem}.drum-machine__controls{display:flex;align-items:end;gap:.75rem;flex-wrap:wrap}.drum-machine__controls label{flex:1 1 12rem;display:grid;gap:.35rem}.drum-machine__controls output{font-variant-numeric:tabular-nums}.drum-machine__viewport{overflow-x:auto;padding:.25rem 0 .65rem;overscroll-behavior-inline:contain}.drum-machine__board{display:grid;gap:.55rem;min-width:38rem}.drum-machine__row{display:grid;grid-template-columns:5.5rem repeat(16,minmax(2rem,1fr));gap:.3rem;align-items:center}.drum-machine__track{font-weight:700}.drum-machine__step{min-width:2rem;min-height:2.75rem;border:1px solid var(--border,#d8deea);border-radius:.5rem;background:var(--surface,#fff);color:var(--text,#182033);cursor:pointer;touch-action:manipulation;transition:background-color .12s,border-color .12s,transform .12s}.drum-machine__step:hover{border-color:var(--accent,#8158d8);transform:translateY(-1px)}.drum-machine__step:focus-visible{outline:3px solid var(--accent,#8158d8);outline-offset:2px}.drum-machine__step.is-beat{border-left-width:3px}.drum-machine__step.is-on{background:var(--accent,#8158d8);border-color:var(--accent,#8158d8);color:#fff}.drum-machine__step.is-current{box-shadow:0 0 0 3px #c6f36b;position:relative;z-index:1}.drum-machine__step.is-current:not(.is-on){background:#f1ecfa;border-color:var(--accent,#8158d8)}.drum-machine__viewport::-webkit-scrollbar{height:.55rem}.drum-machine__viewport::-webkit-scrollbar-thumb{background:#aab2c2;border-radius:99px}@media(max-width:520px){.drum-machine__controls{align-items:stretch}.drum-machine__controls .button{flex:1 1 8rem}.drum-machine__row{grid-template-columns:4.5rem repeat(16,minmax(2.15rem,1fr))}.drum-machine__board{min-width:40rem}}@media(prefers-reduced-motion:reduce){.drum-machine__step{transition:none}}