.tool[data-tool=drum-machine] .drum-tool{gap:var(--space-4);display:grid}.tool[data-tool=drum-machine] .btn{min-block-size:var(--tap);min-inline-size:var(--tap)}.tool[data-tool=drum-machine] .bpm-row{gap:var(--space-2);display:flex}.tool[data-tool=drum-machine] .bpm-row input{min-inline-size:0;min-block-size:var(--tap);text-align:center;flex:1}.tool[data-tool=drum-machine] input[type=range]{inline-size:100%;min-block-size:var(--tap)}.tool[data-tool=drum-machine] .grid-scroll{gap:var(--space-1);min-inline-size:0;padding-block-end:var(--space-2);display:grid;overflow-x:auto}.tool[data-tool=drum-machine] .row{grid-template-columns:7.5rem repeat(16,40px);gap:4px;min-inline-size:max-content;display:grid}.tool[data-tool=drum-machine] .name{z-index:1;text-align:start;white-space:nowrap;justify-content:flex-start;position:sticky;inset-inline-start:0}.tool[data-tool=drum-machine] .cell{border-radius:var(--r-sm);border:1px solid var(--c-border-strong);background:var(--c-surface-2);cursor:pointer;block-size:40px;inline-size:40px;padding:0}.tool[data-tool=drum-machine] .cell.beat{background:var(--c-surface)}.tool[data-tool=drum-machine] .cell.on{background:var(--c-primary);border-color:var(--c-primary)}.tool[data-tool=drum-machine] .cell.now{outline:3px solid var(--c-accent);outline-offset:-3px}.tool[data-tool=drum-machine] .media-note{font-size:var(--fs-sm);color:var(--c-text-2);margin:0}