.inlinecalculator.calc-type-tool.drum-machine-tool{--drum-surface:#eef4f7;--drum-ink:#203a50;--drum-muted:#526b7d;--drum-blue:#0878bd;--drum-blue-dark:#075f91;box-sizing:border-box;background:var(--drum-surface);border-radius:22px;width:100%;max-width:980px;min-height:0;padding:28px clamp(24px,4vw,40px) 24px;display:block}.drum-machine-panel,.drum-machine-controls{min-width:0}.drum-machine-panel{width:min(100%,760px);margin-inline:auto;padding:0}.drum-machine-transport{align-items:center;gap:12px;margin-bottom:16px;display:flex}.drum-machine-start{appearance:none;background:var(--drum-blue);color:#fff;width:136px;min-height:46px;font:inherit;cursor:pointer;border:0;border-radius:12px;justify-content:center;align-items:center;gap:8px;margin:0;padding:0 18px;font-size:16px;font-weight:700;line-height:1;transition:background-color .12s,box-shadow .12s,opacity .12s;display:inline-flex}.drum-machine-start:hover{background:#006cab}.drum-machine-panel[data-running=true] .drum-machine-start{background:#24495f}.drum-machine-panel[data-running=true] .drum-machine-start:hover{background:#193c51}.drum-machine-transport-icon{fill:currentColor;flex:none;width:18px;height:18px;display:block}.drum-machine-start:focus-visible,.drum-machine-clear:focus-visible,.drum-machine-track-label:focus-visible,.drum-machine-scroll:focus-visible{outline-offset:2px;outline:2px solid #0069b6}.drum-machine-cell:focus-visible{outline-offset:-4px;outline:2px solid #fff;box-shadow:inset 0 0 0 3px #0069b6}.drum-machine-start:active{box-shadow:inset 0 2px 5px #0000002e}.drum-machine-start:disabled{cursor:wait;opacity:.66}.drum-machine-meter{color:var(--drum-muted);font-variant-numeric:tabular-nums;white-space:nowrap;font-size:13px;font-weight:650}.drum-machine-clear{min-height:42px;color:var(--drum-muted);font:inherit;cursor:pointer;background:0 0;border:0;border-radius:6px;margin-left:auto;padding:8px 6px;font-size:14px;font-weight:600;transition:color .12s,background-color .12s}.drum-machine-clear:hover{color:var(--drum-blue-dark);background:#203a500f}.drum-machine-clear:active{background:#203a501a}.drum-machine-scroll{box-sizing:border-box;overscroll-behavior-inline:contain;scrollbar-color:#3e597161 transparent;scrollbar-width:thin;max-width:100%;padding:2px 2px 8px;overflow-x:auto}.drum-machine-grid{grid-template-columns:116px repeat(16,36px);grid-auto-rows:38px;align-items:center;gap:4px;width:max-content;display:grid}.drum-machine-corner,.drum-machine-row-label{z-index:2;box-sizing:border-box;background:var(--drum-surface);position:sticky;left:0}.drum-machine-corner{z-index:3;height:38px;color:var(--drum-muted);align-items:center;padding:0 10px;font-size:12px;font-weight:700;display:flex}.drum-machine-step-number{color:#536a7d;font-variant-numeric:tabular-nums;border-radius:6px;justify-content:center;align-items:center;width:36px;height:30px;font-size:11px;font-weight:700;transition:background-color 70ms,color 70ms;display:flex}.drum-machine-step-number.is-beat{color:#2f4b64;background:0 0}.drum-machine-step-number.is-downbeat{color:#821469;background:0 0}.drum-machine-step-number.is-current{color:#fff;background:#183c58}.drum-machine-row-label{width:116px;min-height:34px;color:var(--drum-ink);text-align:left;border:0;border-radius:6px;justify-content:space-between;align-items:center;gap:7px;padding:0 10px;font-family:inherit;font-size:13px;font-weight:700;display:flex}.drum-machine-accent-label{color:#821469}.drum-machine-track-label{cursor:pointer;transition:background-color .1s,color .1s,opacity .1s}.drum-machine-track-label:hover{color:var(--drum-blue-dark);background:#203a500f}.drum-machine-track-label:active{background:#203a501a}.drum-machine-track-label.is-muted{color:#687b8b;opacity:.66}.drum-machine-track-label .material-symbols-rounded{flex:none;font-size:18px}.drum-machine-cell{box-sizing:border-box;color:#fff;cursor:pointer;touch-action:manipulation;background:#ffffffb8;border:1px solid #304b6321;border-radius:7px;justify-content:center;align-items:center;width:36px;height:36px;padding:0;transition:background-color 70ms,border-color 70ms,box-shadow 70ms,opacity .1s;display:flex;position:relative}.drum-machine-cell:hover{background:#fff;border-color:#0069b685}.drum-machine-cell:active{box-shadow:inset 0 2px 5px #183c5833}.drum-machine-cell.is-beat:not(.is-on){background:#d6e5eec7}.drum-machine-cell.is-on{background:#0878bd;border-color:#0878bd}.drum-machine-cell.is-on:hover{background:#006fae;border-color:#0067a5}.drum-machine-cell>span{opacity:0;background:currentColor;border-radius:50%;width:10px;height:10px}.drum-machine-cell.is-on>span{opacity:.92}.drum-machine-accent-cell.is-on{background:#9d157d;border-color:#9d157d}.drum-machine-accent-cell.is-on:hover{background:#8c176f;border-color:#821469}.drum-machine-cell.is-current{border-color:#183c58;box-shadow:inset 0 0 0 1px #183c58}.drum-machine-cell.is-on.is-current{border-color:#183c58;box-shadow:inset 0 0 0 2px #ffffffe6}.drum-machine-cell.is-muted{opacity:.42}.drum-machine-controls{flex-wrap:wrap;align-content:flex-start;width:min(100%,760px);margin:24px auto 0;display:flex}.drum-machine-error{color:#0000;width:100%;min-height:18px;margin:1px 5px 0;font-size:13px;font-weight:600;line-height:1.4}.drum-machine-error.is-visible{color:#8f2020}@media screen and (width<=800px){.inlinecalculator.calc-type-tool.drum-machine-tool{padding:24px 22px 20px}.drum-machine-controls{margin-top:18px}}@media screen and (width<=600px){.inlinecalculator.calc-type-tool.drum-machine-tool{border-radius:0;width:auto;margin:10px -15px;padding:22px 15px 18px}.drum-machine-panel{padding:0}.drum-machine-transport{gap:9px;margin:0 2px 15px}.drum-machine-start{flex:0 0 132px;width:132px;min-height:46px}.drum-machine-meter{font-size:12px}.drum-machine-clear{min-height:42px;padding-inline:5px}.drum-machine-scroll{padding-inline:2px}.drum-machine-grid{grid-template-columns:104px repeat(16,40px);grid-auto-rows:42px}.drum-machine-corner,.drum-machine-row-label{width:104px}.drum-machine-corner{height:42px;padding-inline:8px}.drum-machine-row-label{min-height:40px;padding-inline:8px}.drum-machine-step-number,.drum-machine-cell{width:40px}.drum-machine-step-number{height:32px}.drum-machine-cell{height:40px}}@media (prefers-reduced-motion:reduce){.drum-machine-step-number,.drum-machine-cell,.drum-machine-track-label{transition:none}}