#root,body,html{max-width:100%;overflow-x:hidden}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;margin:0}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.App{text-align:center}.App-logo{height:40vmin;pointer-events:none}@media (prefers-reduced-motion:no-preference){.App-logo{animation:App-logo-spin 20s linear infinite}}.App-header{align-items:center;background-color:#282c34;color:#fff;display:flex;flex-direction:column;font-size:calc(10px + 2vmin);justify-content:center;min-height:100vh}.App-link{color:#61dafb}@keyframes App-logo-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.modal-overlay{z-index:1300!important}.beatMakerTrackRow{align-items:center;gap:4px;margin-bottom:4px;min-width:0}.samplePickerColumn{flex:0 0 110px;min-width:0}.drumButton{align-items:flex-end;background-color:#181a1c;border:none;border-left:3px solid #4d89f2;border-left:3px solid var(--row-accent,#4d89f2);border-radius:2px;color:#758091;display:flex;height:34px;justify-content:space-between;margin:0;min-width:110px;padding:0;text-transform:none;width:100%}.drumButtonText{align-items:center;display:flex;height:100%;justify-content:flex-start;margin-left:6px}.drumButtonLabel{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.drumButton:hover{background-color:#1d2a40;color:#fff}.buttonIcon{margin-right:8px;opacity:.8}.drumButton:hover .buttonIcon{opacity:.8}.modalOption{align-items:center;background-color:#111314;border-radius:7px;cursor:pointer;display:flex;height:35px;justify-content:space-between;margin:1px;padding:5px 5px 5px 15px;width:150px}.modalOption:hover{background-color:#181b1d}.modalOption.selected{background-color:#25272c}.opener-triangle{bottom:10;height:5px;right:0;width:5px}.opener-triangle-svg{fill:#818ca0}.drumButton:hover .opener-triangle-svg{fill:#4d89f2}.row{display:flex;flex-direction:row;min-width:0;width:100%}.drum-cell,.drumCellSlot{display:flex;flex:1 1;min-width:0}.drum-cell{background:#25272c;background:var(--cell-bg,#25272c);border:0;border-radius:2px;cursor:pointer;height:35px;margin:1px;opacity:1;opacity:var(--cell-opacity,1);padding:0;touch-action:none;transition:background-color 80ms ease,box-shadow 80ms ease;width:100%}.drum-cell:hover{box-shadow:inset 0 0 0 1px hsla(0,0%,100%,.16)}.drum-cell:focus-visible{box-shadow:inset 0 0 0 2px rgba(112,167,255,.58);outline:0}.drum-cell-on{background:#4d89f2;background:var(--cell-bg,var(--row-accent,#4d89f2))}.drum-cell-active{background:#262a2f;background:var(--cell-bg,#262a2f)}.beatMakerTopToolbar{align-items:center;background:transparent;border-bottom:1px solid #4a5564;border-radius:0;box-sizing:border-box;margin-bottom:8px;min-height:44px;padding:0 0 4px;scrollbar-color:#3a4657 transparent;scrollbar-width:thin}.beatMakerTopToolbar>*{flex-shrink:0}.toolbarActions,.toolbarSettingsGroup,.transportControls{align-items:center;display:flex;flex-wrap:nowrap;gap:4px}.toolbarActions,.toolbarTransport{flex:0 0 auto}.toolbarActions{margin-left:auto}.toolbarSettingsScroller{flex:1 1 auto;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-color:#3a4657 transparent;scrollbar-width:thin}.toolbarSettingsGroup{flex:0 0 auto}.toolbarField{align-items:center;display:flex;flex:0 0 auto;gap:3px;min-width:0}.toolbarFieldLabel{color:#8f9fb3;font-size:10px;font-weight:800;line-height:1}.toolbarSelect{background:#25272c;border:0;color:#f3f7fb!important;height:32px;transition:background-color .12s ease,box-shadow .12s ease}.toolbarSelect .MuiSelect-select{font-size:12px;font-weight:700;min-height:0!important;overflow:hidden;padding:5px 22px 5px 7px!important;text-overflow:ellipsis;white-space:nowrap}.toolbarSelect .MuiOutlinedInput-notchedOutline{border:0}.toolbarSelect:hover{background:#2c333c}.toolbarSelect.Mui-focused,.toolbarSelect.Mui-focused:hover{background:#2c333c;box-shadow:inset 0 0 0 2px rgba(112,167,255,.38)}.toolbarPresetSelect{width:56px}.toolbarPatternSelect{width:60px}.toolbarLengthSelect{width:66px}.toolbarSignatureSelect{width:54px}.toolbarSwingSelect{width:88px}.swingControl,.tempoControl{align-items:center;display:flex;flex:0 0 auto;flex-direction:row;gap:4px;margin:0}.scrubNumberControl{align-items:center;color:#dce7f5;display:flex;flex-direction:column;gap:2px}.scrubNumberLabel,.swingControlLabel{color:#dce7f5;font-size:10px;font-weight:800;line-height:1;padding:0}.tempoControl .scrubNumberControl{flex-direction:row;gap:4px}.scrubNumberInputFrame{align-items:center;background:#25272c;border:0;border-radius:4px;display:flex;height:32px;justify-content:center;padding:0 6px;transition:background-color .12s ease,box-shadow .12s ease}.scrubNumberInputFrame:hover{background:#2c333c}.scrubNumberInput{font-feature-settings:"tnum";-webkit-appearance:textfield;appearance:textfield;-moz-appearance:textfield;background:transparent;border:0;color:#f3f7fb;cursor:ns-resize;font:inherit;font-size:14px;font-variant-numeric:tabular-nums;font-weight:700;outline:0;text-align:right;touch-action:none;width:44px}.tempoScrubControl .scrubNumberInputFrame{padding:0 4px 0 3px}.tempoScrubControl .scrubNumberInput{width:31px}.tempoScrubControl .scrubNumberSuffix{margin-left:1px}.scrubNumberInput::-webkit-inner-spin-button,.scrubNumberInput::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.scrubNumberInput:focus{color:#fff}.scrubNumberInputFrame:focus-within{background:#2c333c;box-shadow:inset 0 0 0 2px rgba(112,167,255,.38)}.scrubNumberSuffix{color:#8997aa;font-size:11px;font-weight:700;margin-left:2px}.scrubNumberFormattedValue{display:none}.trackGainControl{flex:0 0 auto;margin:0 3px}.rowGainMeter{align-items:flex-end;background:#3a424d;border:0;border-radius:4px;cursor:ns-resize;display:flex;flex:0 0 24px;height:34px;justify-content:stretch;overflow:hidden;position:relative;touch-action:none;transition:background-color .12s ease,box-shadow .12s ease;width:24px}.rowGainMeter:hover{background:#46515f}.rowGainMeter:focus-visible{background:#46515f;box-shadow:inset 0 0 0 2px rgba(112,167,255,.44);outline:0}.rowGainMeterFill{background:#d6dde7;border-radius:3px 3px 0 0;bottom:0;left:0;position:absolute;right:0;transition:height .12s ease}.rowGainMeter[data-dragging=true] .rowGainMeterFill{transition:none}.stepPager{flex-wrap:wrap;gap:8px;margin-top:8px}.stepPageButton,.stepPager{align-items:center;display:flex;justify-content:center}.stepPageButton{background:transparent;border:1px solid #626b78;border-radius:50%;cursor:pointer;height:17px;padding:0;width:17px}.stepPageButtonActive{border-color:#70a7ff;box-shadow:0 0 0 1px rgba(112,167,255,.4)}.stepPageButton:focus-visible{box-shadow:0 0 0 2px rgba(112,167,255,.55);outline:0}.stepPageButtonDot{background:transparent;border-radius:50%;display:block;height:7px;width:7px}.stepPageButtonPlaying .stepPageButtonDot{background:#d6dde7}.helpIconButton{background:#25272c!important;color:#b8c7dc!important;flex:0 0 32px;height:32px;transition:background-color .12s ease,box-shadow .12s ease;width:32px}.helpIconButton:hover{background:#2c333c!important;color:#fff!important}.helpIconButton.Mui-focusVisible{box-shadow:inset 0 0 0 2px rgba(112,167,255,.38)}.exportMenuButton{background:#25272c!important;border-radius:4px!important;color:#dce7f5!important;font-size:11px!important;font-weight:800!important;height:32px;letter-spacing:0!important;min-width:70px!important;padding:0 8px!important;text-transform:none!important;transition:background-color .12s ease,box-shadow .12s ease}.exportMenuButton:hover{background:#2c333c!important}.exportMenuButton.Mui-focusVisible{box-shadow:inset 0 0 0 2px rgba(112,167,255,.38)}.exportMenuButton .MuiButton-startIcon{margin-left:0;margin-right:4px}.beatMakerHelpDialog .MuiDialog-paper{background:#111314;border:1px solid #2e3948;color:#dce7f5;margin:16px;max-width:420px}.beatMakerHelpTitle{align-items:center;display:flex;font-size:17px!important;font-weight:800!important;justify-content:space-between;padding:12px 14px!important}.helpCloseButton{color:#b8c7dc!important}.beatMakerHelpContent{padding:12px 14px!important}.helpDefinitionList{grid-gap:7px;display:grid;gap:7px;margin:0}.helpDefinitionList dt{color:#fff;font-size:12px;font-weight:800}.helpDefinitionList dd{color:#b8c7dc;font-size:13px;line-height:1.35;margin:0 0 4px}.srOnly{clip:rect(0 0 0 0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}@media (max-width:770px){.beatMakerTopToolbar{padding:0 0 4px}}@media (max-width:520px){.beatMakerTrackRow{gap:3px}.samplePickerColumn{flex-basis:38px}.drumButton{min-width:38px}.drumButtonText{justify-content:center;margin-left:0;width:100%}.drumButtonLabel{display:none}.buttonIcon{margin-right:0}.trackGainControl{margin:0 2px}.rowGainMeter{flex-basis:22px;width:22px}.swingControlLabel,.tempoControl .scrubNumberLabel,.toolbarFieldLabel{display:none}.toolbarPresetSelect{width:48px}.toolbarPatternSelect{width:50px}.toolbarLengthSelect{width:56px}.toolbarSignatureSelect{width:48px}.toolbarSwingSelect{width:76px}.toolbarSelect .MuiSelect-select{font-size:11px;padding-left:6px!important;padding-right:20px!important}.scrubNumberInput{font-size:12px;width:34px}.scrubNumberInputFrame{height:32px;padding:0 4px}.tempoScrubControl .scrubNumberInput{width:29px}.exportMenuButton{flex:0 0 34px;min-width:34px!important;padding:0!important;width:34px}.exportMenuButton .MuiButton-startIcon{margin:0}.exportButtonText{display:none}.helpIconButton{flex-basis:32px;height:32px;width:32px}}ul{border-right:1px solid #ccc;list-style:none;width:200px}li{cursor:pointer;padding:5px}li:hover{background-color:#f0f0f0}